Heydon

<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
	<metadata id="metadata7">
		<rdf:RDF>
			<cc:Work rdf:about="">
				<dc:format>image/svg+xml</dc:format>
				<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
				<dc:title/>
			</cc:Work>
		</rdf:RDF>

Heydon

Handlebars.registerHelper('slugify', function(title) {
  return title.toLowerCase()
              .replace(/ /g,'-')
              .replace(/[^\w-]+/g,'');
});

Heydon

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)
}

Heydon

(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
    Array.prototype.forEach.call(svgs, function(svg) {
      // Set preserveAspectRatio to 'XMidYMin slice'
      svg.setAttribute('preserveAspectRatio', 'xMidYMin slice')

Heydon

// Elements with `data-observe` toggle `data-visible`
// between `true` and `false`

if ('IntersectionObserver' in window) {
  const callback = (entries, observer) => {
    entries.forEach(entry => {
      entry.target.setAttribute('data-visible', entry.isIntersecting)
    })
  }
  

Heydon

/**
 * @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
 */

Heydon

Flexbox Grid Exploits

Flexbox — not to be confused with Sex Box, the British TV show wherein Mariella Frostrup interviews people who’ve just had sex in a box — is the CSS layout toolkit de rigueur. Of all the celebrated features of Flexbox, it is the light work it makes of producing wrappable grids, tolerant of dynamic content, that I think's integral.

In this article, I'll cover a few techniques to exploit Flexbox's internal algorithms and design finessed grids intended for changing quantities and dimensions of content.

Basic wrapping

.parent {
	display: flex;

Heydon

// 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

Heydon

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)

Heydon

/* 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;