Skip to content

Instantly share code, notes, and snippets.

View findLevel.js
// set heading level based on the closest heading before the node
const setLevel = (node, nodeSelector) => {
// Get all relevant nodes and reverse the array (destructive)
let allNodes = [...document.querySelectorAll(`h1, h2, h3, h4, h5, h6, ${nodeSelector}`)].reverse();
// Truncate the array to make the target node the first item
let index = allNodes.indexOf(allNodes.find(n => n.contains(node)));
let truncated = allNodes.slice(index);
// Find the next node thats a heading
View Albatross.js
* @module holy-albatross
* @description
* A custom element for switching between horizontal and vertical layouts
* using Flexbox, where the switch property defines the minimum container width
* for the horizontal layout
* @property {string} switch A CSS width value
* @property {string} margin A CSS margin value

Algorithmic layouts

You are looking at the most important, and most abundant thing on the web. You can't see it, unfortunately, because it's very small… aaaaand it's invisible — so having a magnifying glass doesn't really help here. But still.

I'm talking, of course, about U+0020; not to be confused with the band U2, who are just as ubiquitous, but far less useful.

This unicode point, representing the humble space character, is between every word, in every run of text, on every page of the web. And it has a very special characteristic: it's not sticky like glue. If two words are neighbors but there's not enough room for both of them, the space will free the second word to wrap around and start a new line.

Before getting into flexible containers, viewport meta tags, and @media breakpoints this humble character is what makes the web fundamentally 'responsive'. That is: able to change the layout of its content to suit different devices, contexts, and settings. Browser text does this automa


Unusual Shapes

Ask any of my friends, and they'll tell you I'm a big fan of shapes. Here are some of my all time favorites:

  • The circle
  • The hexagon
  • The triangle
  • The 'play button' (a triangle on its side)
  • The square
  • The fast square (a skewed square)
View vh.css
/* This special class is used to remove content visually,
without removing it from screen reader output. Use it in
place of `display: none` when you want screen readers to
identify and announce the information the (visually) hidden
element contains */
.vh {
clip-path: inset(100%) !important;
clip: rect(1px, 1px, 1px, 1px) !important;
height: 1px !important;
View Mutilator.js
function Mutilator(data, name, context) {
this.n = name || `mutilation-${+new Date()}`;
this.d = data;
this.c = context || window;
this.isArr = function(p) {
return this.d[p].constructor == Array;
this.dispatch = function(p, v, t) {
new CustomEvent(this.n, {
Heydon / light.js
Last active Jun 21, 2018
Function to determine if a hex color is light (crude)
View light.js
function isLight(hex) {
let vals = hex.substring(1).split('').map((h, i) => {
if (!/^\d+$/.test(h)) {
h = parseInt(h, 16)
return parseInt(i % 2 < 1 ? h * 16 : h)
return vals.reduce((n, x) => n + x) > (765 / 2)
View observe.js
// Elements with `data-observe` toggle `data-visible`
// between `true` and `false`
if ('IntersectionObserver' in window) {
const callback = (entries, observer) => {
entries.forEach(entry => {'data-visible', entry.isIntersecting)
View responsive-svgs-ie.js
(function () {
// If the browser supports Microsoft High Contrast Mode...
if (window.matchMedia('(-ms-high-contrast: none), (-ms-high-contrast: active)').matches) {
// Get all the SVGs on the page except the symbol defs
var svgs = document.querySelectorAll('svg:not(.defs)')
// ... iterate over SVGs, function(svg) {
// Set preserveAspectRatio to 'XMidYMin slice'
svg.setAttribute('preserveAspectRatio', 'xMidYMin slice')
View slugify-helper.js
Handlebars.registerHelper('slugify', function(title) {
return title.toLowerCase()
.replace(/ /g,'-')