Skip to content

Instantly share code, notes, and snippets.

Chris Ferdinandi cferdinandi

View GitHub Profile
@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
View array-find.html
<!DOCTYPE html>
<html>
<head>
<title>Array.find()</title>
</head>
<body>
<script>
//
// IE9 Support
@cferdinandi
cferdinandi / index.html
Created Mar 18, 2020
classes vs. constructors in a revealing module pattern
View index.html
<!DOCTYPE html>
<html>
<head>
<title>Classes</title>
</head>
<body>
<script>
// This is a Contructor inside a Revealing Module Pattern
// It creates the scoped namespace for the entire set of methods
View loop-tests.html
<!DOCTYPE html>
<html>
<head>
<title>Loop Performance</title>
<style type="text/css">
body {
margin: 1em auto;
max-width: 40em;
text-align: center;
View hamburger-menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Animated Hamburger menu</title>
<style>
html {
font-size: 20px;
View core.js
// The core app code
var myApp = (function () {
'use strict';
// Create a public methods object
var methods = {};
/**
* Extend the public methods object
You can’t perform that action at this time.