Skip to content

Instantly share code, notes, and snippets.

Avatar

Chris Ferdinandi cferdinandi

View GitHub Profile
View accordions.html
<!DOCTYPE html>
<html>
<head>
<title>Accordions</title>
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
View fitvids-vanilla.html
<!DOCTYPE html>
<html>
<head>
<title>Vanilla Fitvids.js</title>
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
@cferdinandi
cferdinandi / README.md
Created Oct 15, 2020
A vanilla JS fork of Lettering.js
View README.md
View dice.html
<!DOCTYPE html>
<html>
<head>
<title>Dice</title>
<style type="text/css">
body {
margin: 1em auto;
max-width: 40em;
width: 88%;
@cferdinandi
cferdinandi / print-to-pdf.html
Last active Jul 9, 2020
A boilerplate for building a print-to-PDF HTML page that you can dynamically generate with JS (could also be server-rendered if you prefer).
View print-to-pdf.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Print to PDF</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
@cferdinandi
cferdinandi / tests.js
Created May 8, 2020
Performance testing the DOM Tree Walker API vs. a hand-rolled mapDOM() function. More on performance testing JS here: https://gomakethings.com/how-to-test-vanilla-js-performance/
View tests.js
var mapDOM = function (elem) {
return {
NODE: elem,
ATTRIBUTES: elem.attributes,
PARENT: elem.parentNode,
CHILDREN: Array.prototype.map.call(elem.childNodes, function (child) {
return mapDOM(child);
})
};
};
View teroy-feedback.js
/**
* Teroy: The smallest JavaScript state-based component UI renderer - "Keepin' it Vanilla."
* Length: 100 lines.
* Global support: 93.89% (https://caniuse.com/#feat=proxy)
* Github: https://github.com/MathiasWP/TeroyJS
* NPM: https://www.npmjs.com/package/teroy
* Creator: Mathias Picker.
* License: MIT
*/
@cferdinandi
cferdinandi / web-servers.md
Created Apr 29, 2020 — forked from willurd/web-servers.md
Big list of http static server one-liners
View web-servers.md

Each of these commands will run an ad hoc http static server in your current (or specified) directory, available at http://localhost:8000. Use this power wisely.

Discussion on reddit.

Python 2.x

$ python -m SimpleHTTPServer 8000
@cferdinandi
cferdinandi / middle-man.js
Last active May 16, 2020
A middleman API boilerplate for Cloudflare Workers. https://workers.cloudflare.com/
View middle-man.js
addEventListener('fetch', function (event) {
event.respondWith(handleRequest(event.request));
});
// Allowed domain origins
var allowed = ['http://localhost:8000', 'https://your-website.com'];
/**
* Respond to the request
* @param {Request} request
@cferdinandi
cferdinandi / discount-code-api.js
Last active Apr 26, 2020
An example of how to automatically surface a unique discount code based on someone's location using Cloudflare Workers. https://workers.cloudflare.com/
View discount-code-api.js
//
// This part goes on Cloudflare Workers
//
addEventListener('fetch', function (event) {
event.respondWith(handleRequest(event.request));
});
/**
* Available discounts
You can’t perform that action at this time.