Skip to content

Instantly share code, notes, and snippets.

View cferdinandi's full-sized avatar

Chris Ferdinandi cferdinandi

1.8k followers · 2 following
View GitHub Profile
@cferdinandi
cferdinandi / tests.js
Created May 8, 2020 20:03
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/
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);
})
};
};
@cferdinandi
cferdinandi / teroy-feedback.js
Created May 1, 2020 01:12
/**
* 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 April 29, 2020 12:36 — forked from willurd/web-servers.md
Big list of http static server one-liners

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 July 17, 2021 15:29
A middleman API boilerplate for Cloudflare Workers. https://workers.cloudflare.com/
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 April 26, 2020 00:31
An example of how to automatically surface a unique discount code based on someone's location using Cloudflare Workers. https://workers.cloudflare.com/
//
// This part goes on Cloudflare Workers
//
addEventListener('fetch', function (event) {
event.respondWith(handleRequest(event.request));
});
/**
* Available discounts
@cferdinandi
cferdinandi / array-find.html
Created March 30, 2020 15:29
Polyfill examples
<!DOCTYPE html>
<html>
<head>
<title>Array.find()</title>
</head>
<body>
<script>
//
// IE9 Support
@cferdinandi
cferdinandi / index.html
Created March 18, 2020 03:21
classes vs. constructors in a revealing module pattern
<!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
@cferdinandi
cferdinandi / loop-tests.html
Last active January 3, 2020 15:53
<!DOCTYPE html>
<html>
<head>
<title>Loop Performance</title>
<style type="text/css">
body {
margin: 1em auto;
max-width: 40em;
text-align: center;
@cferdinandi
cferdinandi / hamburger-menu.html
Last active August 26, 2022 04:27 — forked from prof3ssorSt3v3/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;
@cferdinandi
cferdinandi / core.js
Last active March 16, 2022 20:00
Source code from https://gomakethings.com/building-an-extensible-app-or-library-with-vanilla-js/
// The core app code
var myApp = (function () {
'use strict';
// Create a public methods object
var methods = {};
/**
* Extend the public methods object