Skip to content

Instantly share code, notes, and snippets.

Avatar

Chris Ferdinandi cferdinandi

View GitHub Profile
View war-refactor.html
<!DOCTYPE html>
<html>
<head>
<title>War</title>
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
View caesar-cipher.html
<!DOCTYPE html>
<html>
<head>
<title>Caesar Cipher</title>
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
View react-todos-with-reef.html
<!DOCTYPE html>
<html>
<head>
<title>React Todos in Vanilla JS</title>
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
}
View react-todo-to-vanilla-js.html
<!DOCTYPE html>
<html>
<head>
<title>React Todos in Vanilla JS</title>
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
}
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);
})
};
};