Pens – code examples

Prefetch internal link on mouse hover for faster page loads

3rd January 2023

Used to load same-site static pages faster.

Generate a random unique id

3rd January 2023

Generates a random number as used in crypto.

Late-load your Codepen embed

29th December 2022

A web component to late-load Codepens. Nothing, except the optional image, is loaded until you click the component, then the asset is loaded in full and embedded into the page.

Space toggle hack - CSS logical conditionals

27th December 2022

Adding the logical conditions AND and OR to CSS with custom variables.

Give users advanced warning when opening a new window

4th November 2022

The objective of this method is to provide an accessible tooltip to give the user fair warning before opening a new window or tab.

Bookmarklet to highlight landmarks and headings

2nd November 2022

A bookmarklet to help with WCAG 2.1: 1.3.1 - Info and Relationships - Identifies and highlights each landmark or heading.

Generate colours to WCAG AA (small text)

10th May 2022

Generate a set of the brightest, and most different, colours which pass WCAG 2.1 level AA.

Bookmarklet to help meet WCAG Text Spacing

3rd December 2021

To help test WCAG Success Criterion 1.4.12 Text Spacing (Level AA). Adjusts line-height, word-spacing, letter-spacing and paragraph margins.

CDN hosted video

3rd April 2020

Example of embedding video elements in a performant manner

Late-load Youtube videos on demand

11th March 2020

Videos are loaded upon user interaction, not before. A lightweight, accessible, and very performant, video component / module using HTML5 Custom Elements. Only the background image is loaded until the video is clicked.

Code highlighting (light & dark mode) with Prism.js

25th February 2020

A pen to highlight embedded code examples using Prism.js with a dark or light mode theme.

Light & dark mode switching

31st January 2020

Inherits dark mode from the OS when enabled, and allows switching in-browser.

Prevent numeric input invalidity

14th January 2020

Prevent illegal input while entering numbers into form fields which perform real-time calculations.

Date dependant, page background falling-image animations

6th January 2020

Falling snowflakes in December, hearts on Valentines day. Dog fighting x-wings & tie-fighters on May 4th. Floating ghosts, ghouls & witches on Halloween.

Snowflakes: JS generated, CSS animated

20th November 2019

ES6 is used to generate and embed SVG snowflakes which are animated by CSS.

CSS only snowflakes

20th November 2019

SVG snowflakes animated via CSS.

Andy Warhol looks a scream…

5th October 2019

An entertaining, alternate take on launching objects into full-screen. Emulating Warhol's Marilyn Monroe series of paintings.

Launch any object into full-screen mode

3rd October 2019

Any object may be launched into a full screen window by using the JavaScript Fullscreen API.

Circle of Fifths: Interactive SVG chord wheel

9th October 2018

Find the guitar chords of most common keys using an interactive chord wheel. Built as an SVG representing the Major / Ionian circle of fifths.

Accessible "Skip to content" for desktop and mobile

23rd August 2018

Assistive technologies struggle with "skip links" on mobile and touch devices. Solution presented corrects experienced issues across desktop, iOS and Android.

Hide unsupported mobile download button

27th July 2018

Used to show only OS relevant buttons to mobile devices.
A small script which adds a class to the html tag, CSS does the rest.

CSS Grid: Match individual element heights along a grid row

17th June 2018

Maintains a consistent visual layout across a CSS grid-row when content size/length is variable in each grid-item. Image, heading and copy elements in each grid-item have their height dynamically adjusted across each grid row.

Audio player with tempo adjustment

31st March 2018

Maintains pitch while slowing an MP3 down.
For beginner guitarists, like myself, to practice chord progressions at a managable pace.

CSS Grid wallboard

24th February 2018

A responsive wallboard created with CSS grids.
Uses a single image per grid item, without image scaling.
Also utilises the Vignette & Brightness hover effect.

Vignette & brightness hover effect

17th February 2018

Concentrates user focus on the central area. Values are individually set in the HTML allowing for fine control in a production environment.

HTML 5.2 dialog element

13th January 2018

Trialing the new HTML 5.2 dialog element. JavaScript applied to work on any ES6 browser without dependencies.

The spinning hexagonal click-spot

3rd December 2017

An on-click background animation presented in a freestyle material design manner.

Christmas cracker animation

25th October 2017

Christmas haz the cracker, no?
Simple cracker animation with SVG snowflake page backgounds.

Oooh – it’s Halloween!

16th October 2017

Ghostly text in pure CSS for Halloween.

Gooey-drips for Halloween @ 60fps

6th October 2017

This version crops left and right as the viewport gets smaller. The SVG is generated by JavaScript and may be reused for the hover state of stamps.

Pumpkin flickering eyes animation @ 60fps

3rd October 2017

The eyes have it. 60fps SVG animation with PNG overlays and drop-shadows. Vanilla Javascript in ES5 (support down to IE9).

Test browser supports ES6

23rd September 2017

A little script which tests for ES6 support

Performant lazy-load technique for 2017

10th September 2017

Utilises the new Intersection Observer API. Zero jank runs at 60fps using ultra lightweight vanilla JavaScript. Images are loaded as normal under fallback conditions.

Make America grate again!

3rd September 2017

SVG experiment

Accordian toggling methods

30th August 2017

Three different ways to toggle your accordions using methods you've not seen before.

YouTube full-width video loop as a header background

18th August 2017

Full-width YouTube video looping, with the "between videos" black frame removed. For use as a header background. Uses an SVG crosshatch overlay. Multiple videos supported, each segment configurable with start and end points. Responsive with a static for mobile.

Scaling font-size in proportion to an image

3rd August 2017

Responsively scaling overlaid text to fit proportionally over a background-image in pure CSS

Dirty ’orrible ’acky Safari resize fix

3rd August 2017

Safari only: Fix for onresize, including vw & vh, inside an iframe. A Codepen for example.

Centering vertically and horizontally in CSS

31st July 2017

Centering both vertically and horizontally in CSS with support down to IE9.

White Noise Generator

24th June 2017

Using the Web Audio API to generate white noise and supply play, fade and stop methods with individual settings.

Web Audio API - Fetch, store and play audio samples

18th June 2017

Ultra lightweight (<1k gzipped) method to fetch, store, play (volume, loop, fadeIn, fadeOut), and stop audio samples.

Performant sticky header (hides on scroll)

16th June 2017

Hides the site header on scroll down, reinstates on scroll up, while producing zero visual jank.

Modal popup - ink transition effect

7th May 2017

An ink bleed transition effect applied to a modal popup using CSS animations.

Liquid ripple click effect

7th April 2017

Cooler than a penguins testicles. Liquid ripple click effect applied to social icons with a back-up animation.

Crop copy then restore via sliding drop-down

22nd January 2017

Responsively crop content copy down to a user-defined number of lines in an accessible manner. Click to fully restore content via a sliding drop-down animation.

Responsively crop copy then restore onclick

11th January 2017

Responsively crop content copy down to a user-defined number of lines. Click to restore content via a typed animation.

Matching element heights

12th December 2016

A lightweight vanilla script to match heights on non-linear elements. A get-out-of-jail free card when flexbox proves too cumbersome.

Late-loaded animated gif with pause button

30th August 2016

Improve page-load performance by defering the load of a large animated gifs. Load a static jpg first, then swap across. This allows the addition of a pause button which helps to meet WCAG 2 level AA guidelines.

Embedding video via a button

24th August 2016

Using a button, with ARIA support, to embed a YouTube video iframe.

Wobbly background on link hover

21st August 2016

Wobbly background on a link hover using CSS only. Sort of almost gooey in feel.

FAQ using ARIA attributes

19th August 2016

Semantically correct FAQ with animated show-hide accordian style. Vanilla JavaScript toggles ARIA attributes which are animated via CSS. Questions may be set open on-load or via a URI fragment.

CSS filters experiment

18th August 2016

Just messing around animating the hue-rotate filter

ARIA hamburger menu

15th August 2016

WCAG 2 level AA hamburger menu with CSS animation and ARIA support.

Social SVG icons pt3 - Gooey

6th August 2016

Animated gooey social SVG icons.

Social SVG icons pt2

4th August 2016

Tooltip monochrome animated SVG social icons.

Social SVG icons pt1

31st July 2016

Highly optimised monochrome animated SVG social icons.

SVG to CSS background-image converter">

SVG to CSS background-image converter

22nd June 2016

Reformat SVG images to URIs for use as, cross-browser, CSS background-images in your stylesheet.

Sinclair ZX Spectrum 404 page

26th March 2016

A custom 404 page emulating a 1980s ZX Spectrum tape loading error

Accessible tab navigation using ARIA

16th March 2016

Accessible tab navigation to meet WCAG 2 level AA using ARIA roles

Popular Codepens

5th March 2016

List view of my most liked Codepens

Newest Codepens

5th March 2016

My latest Codepens in list format.