Prefetch internal link on mouse hover for faster page loads
3rd January 2023
Used to load same-site static pages faster.
A mixed bag of experiments, snippets and useful widgets. All new materials I create are dev'ed on CodePen these days.
Mike Foskett - (update: )
3rd January 2023
Used to load same-site static pages faster.
3rd January 2023
Generates a random number as used in crypto.
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.
27th December 2022
Adding the logical conditions AND and OR to CSS with custom variables.
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.
2nd November 2022
A bookmarklet to help with WCAG 2.1: 1.3.1 - Info and Relationships - Identifies and highlights each landmark or heading.
10th May 2022
Generate a set of the brightest, and most different, colours which pass WCAG 2.1 level AA.
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.
3rd April 2020
Example of embedding video elements in a performant manner
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.
25th February 2020
A pen to highlight embedded code examples using Prism.js with a dark or light mode theme.
31st January 2020
Inherits dark mode from the OS when enabled, and allows switching in-browser.
14th January 2020
Prevent illegal input while entering numbers into form fields which perform real-time calculations.
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.
20th November 2019
ES6 is used to generate and embed SVG snowflakes which are animated by CSS.
20th November 2019
SVG snowflakes animated via CSS.
5th October 2019
An entertaining, alternate take on launching objects into full-screen. Emulating Warhol's Marilyn Monroe series of paintings.
3rd October 2019
Any object may be launched into a full screen window by using the JavaScript Fullscreen API.
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.
23rd August 2018
Assistive technologies struggle with "skip links" on mobile and touch devices. Solution presented corrects experienced issues across desktop, iOS and Android.
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.
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.
31st March 2018
Maintains pitch while slowing an MP3 down.
For beginner guitarists, like myself, to practice chord progressions at a managable pace.
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.
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.
13th January 2018
Trialing the new HTML 5.2 dialog element. JavaScript applied to work on any ES6 browser without dependencies.
3rd December 2017
An on-click background animation presented in a freestyle material design manner.
25th October 2017
Christmas haz the cracker, no?
Simple cracker animation with SVG snowflake page backgounds.
16th October 2017
Ghostly text in pure CSS for Halloween.
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.
3rd October 2017
The eyes have it. 60fps SVG animation with PNG overlays and drop-shadows. Vanilla Javascript in ES5 (support down to IE9).
23rd September 2017
A little script which tests for ES6 support
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.
3rd September 2017
SVG experiment
30th August 2017
Three different ways to toggle your accordions using methods you've not seen before.
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.
3rd August 2017
Responsively scaling overlaid text to fit proportionally over a background-image in pure CSS
3rd August 2017
Safari only: Fix for onresize, including vw & vh, inside an iframe. A Codepen for example.
31st July 2017
Centering both vertically and horizontally in CSS with support down to IE9.
24th June 2017
Using the Web Audio API to generate white noise and supply play, fade and stop methods with individual settings.
18th June 2017
Ultra lightweight (<1k gzipped) method to fetch, store, play (volume, loop, fadeIn, fadeOut), and stop audio samples.
16th June 2017
Hides the site header on scroll down, reinstates on scroll up, while producing zero visual jank.
7th May 2017
An ink bleed transition effect applied to a modal popup using CSS animations.
7th April 2017
Cooler than a penguins testicles. Liquid ripple click effect applied to social icons with a back-up animation.
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.
11th January 2017
Responsively crop content copy down to a user-defined number of lines. Click to restore content via a typed animation.
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.
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.
24th August 2016
Using a button, with ARIA support, to embed a YouTube video iframe.
21st August 2016
Wobbly background on a link hover using CSS only. Sort of almost gooey in feel.
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.
18th August 2016
Just messing around animating the hue-rotate filter
15th August 2016
WCAG 2 level AA hamburger menu with CSS animation and ARIA support.
6th August 2016
Animated gooey social SVG icons.
4th August 2016
Tooltip monochrome animated SVG social icons.
31st July 2016
Highly optimised monochrome animated SVG social icons.
22nd June 2016
Reformat SVG images to URIs for use as, cross-browser, CSS background-images in your stylesheet.
26th March 2016
A custom 404 page emulating a 1980s ZX Spectrum tape loading error
16th March 2016
Accessible tab navigation to meet WCAG 2 level AA using ARIA roles
5th March 2016
List view of my most liked Codepens
5th March 2016
My latest Codepens in list format.
Social links and email client: