“Software engineering principles, from Robert C. Martin's book Clean Code, adapted for JavaScript. This is not a style guide. It's a guide to producing readable, reusable, and refactorable software in JavaScript.”

published Wednesday, April 20^th, 2022

Back to the Facepile, Featherweight Edition

While I don't think I get so much feedback on my posts that this is an immediate concern for my website, I'm going to keep this in mind, as I particularly like the idea of hiding interactions behind a details…

published Thursday, January 27^th, 2022

GPS

Wow, just wow. What an incredible article about Global Positioning System with some delightful interactive demos to help understand complex ideas.

published Tuesday, January 18^th, 2022

Is it worth the time?

How long can you work on making a routine task more efficient before you’re spending more time than you save? (Across five years) A handy chart from XKCD

published Tuesday, January 11^th, 2022

Fluid Type Scale

One of the sharper and cleaner tools for generating fluid font-sizes with just the bells and whistles I need. I love that it spits out CSS Variables and gives you control over naming as well, generating as many steps as…

published Wednesday, January 5^th, 2022

2021 5 posts permalink¶

Old CSS, new CSS

What an incredibly-detailed and interesting read on the history of CSS and web design!

published Sunday, December 12^th, 2021

color × color

I *keep* losing this, and I finally found it again, so I'm bookmarking it once-and-for-all so I can't lose it again! So darn useful.

published Friday, November 26^th, 2021

Passing arguments into a vanilla JS function

I need to remember smart things like this, so I'm saving it for future me, who won't have an excuse not to have remembered.

published Wednesday, November 24^th, 2021

Lo-Fi Player

To me, this is part of what the web is all about. A fun little interactable room that plays lo-fi music!

published Friday, June 4^th, 2021

Why I Love Coding

I think I need to read *The Mythical Man-Month*!

published Monday, May 10^th, 2021

2020 27 posts permalink¶

Hexagonal Grids

This incredible post covers just about everything you'd want to know about implementing a hexagonal grid. Chock-full of useful info!

published Tuesday, December 8^th, 2020

SVG Favicons and Dark Mode

My good friend, Dave, has written this excellent overview of SVG favicons and using prefers-color-scheme to toggle a dark-mode version.

published Sunday, November 22^nd, 2020

Video Conversion

This is definitely something that I may or may not do often… fantastic little guide to doing it right!

published Wednesday, October 14^th, 2020

The True Story of Lee Kuan Yew's Singapore

“Early Singapore’s authoritarian competency is a model invoked by leaders from China to Rwanda. But its rise was complex, messy, and the result of long factional battles. There are hard limits to how far it can be exported.”

published Monday, September 7^th, 2020

Autonomy Online: A Case For The IndieWeb

Ana Rodrigues perfectly lays out what the IndieWeb is all about, along with the why’s and how’s of getting involved!

published Thursday, August 27^th, 2020

IA Basics

My great friend, Tom, has written a super-comprehensive article about IA: a topic I’m lacking in serious experience with!

published Tuesday, August 11^th, 2020

Uncommon CSS Properties

Some useful gems in here I had no idea about!

published Tuesday, July 7^th, 2020

The samsui women of Singapore

An interesting read about the history of my girlfriend's paternal grandmother, detailing the lives of women who immigrated to Singapore.

published Saturday, May 23^rd, 2020

Every Noise at Once

A serious rabbit-hole deep-dive into musical genres that's uniquely presented.

published Thursday, May 21^st, 2020

The World-Wide Work

This resonates with me time and time again. Such a powerful talk.

published Wednesday, April 22^nd, 2020

Element.focus vs aria-activedescendant

When you build JavaScript components, you need to manage focus for both keyboard users and screen readers. The WAI-ARIA specs say there are two ways to manage focus

published Wednesday, April 8^th, 2020

Why outbreaks like coronavirus spread exponentially

Incredible visualisations and information from Washington Post.

published Tuesday, March 17^th, 2020

Fraidycat

This is so freaking cool. “Fraidycat is a desktop app or browser extension for Firefox or Chrome [you can] use to follow people (hundreds) on whatever platform they choose”. Warm, fuzzy, IndieWeb vibes from this one!

published Thursday, March 12^th, 2020

Build a light and global state system - Piccalilli

“Using Proxies and subscriber functions, we can create an observable, reactive state system with a tiny footprint.”

published Wednesday, March 11^th, 2020

Getting the easy stuff right ･ Robin Rendle

It me.

published Wednesday, March 11^th, 2020

HTML: The Inaccessible Parts

Dave Rupert gives an extremely thorough run-through of numerous gotchas to do with writing HTML you might think is accessible, but isn't quite what it seems.

published Friday, February 28^th, 2020

Desktop Goose

“A downloadable goose-sperience for Windows and macOS”

published Monday, February 24^th, 2020

In-Browser Performance Linting With Feature Policies

“Feature-Policy is a relatively new feature that lets you opt-in or out of certain browser features on your site.” Tim Kadlec runs through performance linting using feature policies.

published Friday, February 21^st, 2020

A Complete Guide to Links and Buttons

CSS-Tricks' complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.

published Wednesday, February 19^th, 2020

Some Imaginary CSS

“The other day I was using CSS grid and custom properties to solve some problems that would have seemed almost impossible only a year or two ago. This made me wonder: What CSS could I be writing in a few…

published Wednesday, February 19^th, 2020

Neumorphism/Soft UI CSS shadow generator

Generate clever and gorgeous CSS shadows with this simple tool.

published Thursday, February 13^th, 2020

Fluid custom properties

Trys, once again, taking things to the next level with CSS locks, CSS properties, media queries, and the cascade to create incredibly dynamic and fluid layouts.

published Friday, February 7^th, 2020

GT Alpina by Grilli Type

Amazing demo for this variable font.

published Wednesday, January 29^th, 2020

Canadian Stock Photography

REALLY Canadian. I have a slightly embarrassing feeling I'll be using these.

published Thursday, January 23^rd, 2020

The CSS Cascade

Not only is this beautiful and a joy to read, it's chock-full of of useful info about how CSS' cascading.

published Wednesday, January 22^nd, 2020

The Accessibility of Styled Form Controls

A repository of styled and styled form control elements and markup patterns, and how they are announced by screen readers.

published Friday, January 10^th, 2020

Simplified Fluid Typography | CSS-Tricks

With min(), max(), and clamp() we can greatly simplify how we define fluid property values in CSS—can't wait for for wider browser support!

published Monday, January 6^th, 2020

2019 55 posts permalink¶

Dynamic, Date-Based Color with JavaScript, HSL, and CSS Variables | Rob Weychert

“A rational system for generating thousands of possible color schemes.”

published Monday, December 16^th, 2019

Leonardo

“Create beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors.”

published Monday, December 16^th, 2019

Neal.fun

Bringing back the weird web!

published Friday, December 13^th, 2019

Accessible Color Spaces - Color Contrast Tool

This is such an amazing tool for visualising colour and contrast that'll help you confidently meet your accessibility requirements. It can even provide closest accessible colours, so it really takes away a huge amount of the manual work and difficulty…

published Friday, December 13^th, 2019

JournalBook

From the venerable Trys Mudford comes JournalBook, a private, offline-first personal journal.

published Friday, December 6^th, 2019

Binary Music Player

Another bit of clever fun from Tim Holman—this time building some fun musical melodies by counting in binary, and you can customise the notes too!

published Wednesday, December 4^th, 2019

Masking GIFs with other GIFs

A super-fun technique for using SVG to mask one GIF on top of another.

published Tuesday, December 3^rd, 2019

Ordered Error Diffusion Dithering

I admit that I don’t understand a lot of the math going on here, but I’m very interested in the output.

published Monday, December 2^nd, 2019

giffgaff design

This is a set of standards that define the universal design language and content composition at giffgaff.

published Thursday, November 21^st, 2019

The Web Almanac

HTTP Archive's annual state of the web report. This is *super-comprehensive* and is jam-packed with useful information.

published Wednesday, November 13^th, 2019

Codevember

“Codevember is a challenge for developers to sharpen their creativity and improve their skills. The goal is to build a creative piece of code every day of November.”

published Tuesday, October 29^th, 2019

GitSheet

A dead simple git cheatsheet.

published Monday, October 14^th, 2019

Advanced Lesson of the Firefox Font Editor

In this YouTube video, Jen Simmons gives a thorough run-through of Firefox's Font Editor in its Dev Tools.

published Wednesday, October 9^th, 2019

Keep a Changelog

Everything you need to know about changelogs, and presented beautifully as well.

published Thursday, October 3^rd, 2019

Compound Grid Generator

A little tool to generate compound grids by Michelle Barker. Enter the number of columns for each of your grids, and they’ll be magically merged into a compound grid.

published Wednesday, September 25^th, 2019

3D Ken Burns Effect from a Single Image

Simon Niklaus, Long Mai, Jimei Yang and Feng Liu have made an incredible framework for automatically synthesising a parallax/Ken Burns effect from a single source image. Check out the video!

published Wednesday, September 18^th, 2019

ASCIICKER

It boggles the mind how much effort went into building this, and how clean it is!

published Wednesday, September 18^th, 2019

An ode to OpenType

Fall in love with the secret world of fonts

published Tuesday, September 10^th, 2019

Leon Sans

This has to be the coolest typeface demo I've ever seen, hands down.

published Monday, September 2^nd, 2019

vi is a language

Until reading this, I’ve been stumbling around feeling frustrated that I can't seem to find any efficiency in my use of the language. This is exactly what I needed to read to get into and grok vi.

published Tuesday, August 20^th, 2019

Use snippets in VS Code

Arek’s got Part 2 of his Tips & Tricks for VS Code where he shows you how to save time and keystrokes by using snippets!

published Tuesday, August 20^th, 2019

Using the aria-current attribute

Ever used an active or current class to denote/style a navigation element? Léonie demonstrates how to use the aria-current attribute to do the same coupled with the boon to accessibility it brings.

published Thursday, August 15^th, 2019

Create a user controlled dark or light mode

Andy Bell breaks down implementing robust theme-switching functionality on your own site.

published Wednesday, August 14^th, 2019

Styling title bars in VS Code

I find this useful when switching between multiple windows. Written by my good friend, Arek.

published Tuesday, August 13^th, 2019

Foreign Rap

Foreignrap is a platform to discover + enjoy international rap music. Run by enthusiasts, we share sounds from across the world for you to enjoy 🙏

published Monday, July 29^th, 2019

Poolside FM

Get on loser! We’re going POOLSIDE

published Friday, July 26^th, 2019

SVG Calendar showing todays date in Squiz Matrix

My good friend, Dave, has remixed Terence Eden's SVG with JavaScript calendar icon to be powered by keywords in Matrix (a CMS developed by Squiz).

published Tuesday, July 23^rd, 2019

Making an interactive hoverboard game using JavaScript and web sockets

The internet is full of amazing people building amazing things, including this! I'm so inspired by projects like this.

published Wednesday, July 10^th, 2019

CSS and Network Performance

Invaluable tips on CSS and Network Performance from Harry Roberts

published Monday, July 1^st, 2019

Every Layout

Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.

published Friday, June 21^st, 2019

Drawing Realistic Clouds with SVG and CSS

Equally as interesting as the technique on display is Beau Jackson’s explanation of this incredible, photo-realistic combination of SVG and CSS to draw clouds!

published Thursday, June 13^th, 2019

Appscope - Progressive Web Apps Examples

“Appscope is a directory of Progressive Web Apps, showcasing the best PWA examples. All apps listed run entirely in the web browser and launch instantly without an app download. If you wish, they can be saved to your home screen…

published Sunday, June 2^nd, 2019

Fornacalia

If, like me, you’re getting into baking your own bread, there may be no better teacher than Jeremy Cherfas, who’s been baking bread for over 50 years. His website is chock-full of useful information, recipes, and anecdotes to keep your…

published Thursday, May 2^nd, 2019

Web Design Experiments by Jen Simmons

Jen Simmons’ demos and experiments were instrumental in my learning CSS Grid, and even if you already know your way around the spec blindfolded, I guarantee you’ll find something new and interesting here!

published Tuesday, April 30^th, 2019

The Farce of Record Store Day

My very good friend, Dave, outlines what Record Store Day is, why movements like these are important, and why this particular once has fallen short. Wise words from seriously big fan of music.

published Friday, April 26^th, 2019

The Celebrated New Miscellany of Mr. Simon Collison

The design Simon presented here in 2010 was and still is as beautiful as it was illuminating, right at the cusp of responsive design on the web.

published Tuesday, April 9^th, 2019

How Not To Sort By Average Rating – Evan Miller

PROBLEM: You are a web programmer. You have users. Your users rate stuff on your site. You want to put the highest-rated stuff at the top and lowest-rated at the bottom. You need some sort of score to sort by.

All you need to know about hyphenation in CSS

I tend to write quite verbosely and as a result end up with big, unruly blocks of text in my articles. Thanks to Richard, I've learned a bit more about how hyphens and how they can help!

published Friday, March 29^th, 2019

An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods

I've struggled for a little while to wrap my head around these new methods, but this article by Una Kravets couldn't have made them any easier or fun to understand!

published Tuesday, March 26^th, 2019

Sophisticated Partitioning with CSS Grid

Equally as impressive as Rob Weychert's 'Tinnitus Tracker' is the CSS Grid that powers it. This article and accompanying code is so thorough and cleanly-thought through. What a joy to read and see in action.

published Tuesday, March 26^th, 2019

1% Better • Robin Rendle

This really resonates with me—too often I've planned or been part of planning a big project that fizzles out and burns people out after months. Most of my productivity and positive output has been the outcome of quick, iterative improvements.

published Friday, March 22^nd, 2019

Celebrating Johann Sebastian Bach

Compose a two-measure melody and machine learning will harmonise with your tune! This is basically magic to me.

published Thursday, March 21^st, 2019

Quill

Quill is a simple Micropub client for creating posts on your own website. To use it, your website will need to have a Micropub endpoint, and this app will send requests to it to create posts.

published Sunday, March 17^th, 2019

An Interactive Introduction to Fourier Transforms

This is one of the most clever and interesting interactive demos I've ever seen. Worth setting aside time to go through the whole thing!

published Tuesday, March 5^th, 2019

How to Create a Fake 3D Image Effect with WebGL

“Learn how to create an interactive "fake" 3D effect for images with depth maps and plain WebGL.”

published Thursday, February 28^th, 2019

Color Spaces – Bartosz Ciechanowski

“For the longest time we didn’t have to pay a lot of attention to the way we talk about color. The modern display technologies capable of showing more vivid shades have, for better or for worse, changed the rules of…

published Thursday, February 28^th, 2019

A talk by Dave Letorey … and you thought you had no issues

My very good friend, Dave, gave an incredible talk on accessibility at the recent Monki Gras conference in London. Worth every second of watching!

published Thursday, February 21^st, 2019

NES.css

NES.css is a NES-style CSS Framework.

published Friday, January 18^th, 2019

Uncanny Valley Studio

Not your typical portfolio website. Absolutely mind-blowing.

published Tuesday, January 15^th, 2019

The Flexbox Holy Albatross Reincarnated

Revamped and updated version of the original.

published Monday, January 14^th, 2019

The Flexbox Holy Albatross

Who even needs media queries anymore? Not Heydon Pickering, that's who.

published Sunday, January 13^th, 2019

Monocle

I've really enjoyed using this as my Microsub reader for the last few weeks. Combined with X-Ray, it's been pretty trivial to debug my feeds!

published Sunday, January 13^th, 2019

CSS doesn’t suck

Front end communities have been up-in-arms recently about CSS's shortcomings (and how they compare to JS's shortcomings, for example). I think CSS has been undeservedly been painted in a poor light, but Andy Bell's article had me nodding enthusiastically throughout.

published Friday, January 11^th, 2019

Web A Skeb

Childhood Picassos, your time has come again.

published Wednesday, January 9^th, 2019

Chrono Trigger: Secret of the Forest - Reuben Gingrich

I'm clearly cruising on a Chrono Trigger vibe because, again, I need to share some music by some unquestionably-talented musicians, @reubengingrich http://reubengingrich.com/) But how can you not love Secret of the Forest?

2018 8 posts permalink¶

Chrono Trigger: Secret of the Forest - Contraband VGM

This is seriously amazing. It deserves way more recognition than it has; @ContraReloaded mesh together some incredible talent and synergy.

Lynn Fisher’s Portfolio

I wish I could create animations this beautiful. Lynn Fisher demonstrates her god-like abilities with yet another gorgeous portfolio redesign. Check out the archive of her previous designs, too. They're remarkable.

published Wednesday, December 5^th, 2018

Piano Genie

Piano Genie, an intelligent controller that maps 8-button input to a full 88-key piano in real time, is in some ways reminiscent of video games such as Rock Band and Guitar Hero that are accessible to novice musicians, with the…

published Wednesday, October 17^th, 2018

Am I a Real Developer?

Ever wonder if you're a real developer? Maybe you used a tool before or wrote code that wasn't real code. Take the quiz and find out.

published Monday, October 15^th, 2018

Generative Artistry

These are the coolest instructional demos I've ever seen. It's just such a pleasure to watch how Tim Holman steps through each artistic challenge in a beautiful way.

published Tuesday, October 9^th, 2018

Mariano Pascual’s Interactive Portfolio

I always wanted to create a website UI like this; only, Mariano's done it 10× better than I ever dreamed of. Such a delightful experience.

published Thursday, August 9^th, 2018

Devhints — TL;DR for developer documentation

A ridiculous collection of web development cheatsheets

published Wednesday, August 1^st, 2018

So You Think You’ve Built a Good Infinite Scroll

Adrian hits the nail on the head with this checklist for implementing infinite scroll.

published Friday, July 13^th, 2018

2016 11 posts permalink¶

NYER

The classic rap air horn. That's all.

published Monday, November 14^th, 2016

Atom Multiline Select

An Atom Editor package to support multiline selection which I forked and modified to mimic Sublime Text's multiline selection technique.

published Friday, July 22^nd, 2016

Theremin

Play your own musical synth with delay, feedback, and scuzz.

published Friday, May 6^th, 2016

IE9 :before font-size bug

Seems there's a bug in Internet Explorer 9 wherein pseudo content (:before and :after content) doesn't get parsed properly in the DOM, so instead of declarations like font-size being applied only once despite multiple occurrences of the rule, but is…

published Thursday, May 5^th, 2016

HTML Rube Goldberg

A mesmerising Rube Goldberg machine made with HTML form elements and their form element-specific attributes and states, like checked, :focus, and value.

published Friday, April 29^th, 2016

Responsive Pixel Art

This is an incredible display of creativity and logic on the web. The effort that has gone into this is unbelievable.

published Wednesday, March 9^th, 2016

Editing your last embarrassment

In other words Quick editing your last sent texts

published Saturday, February 27^th, 2016

Regex Golf

Test your regex skills. So much fun. Brainmelting, but fun.

published Saturday, January 23^rd, 2016

Styling SVG use Content with CSS

Little late on this one, but gold dust nonetheless. SVG Wizard, Sara Soueidan, discusses in-depth how to style SVG's element and how to overcome the challenges in doing so.

published Thursday, January 21^st, 2016

ServiceWorker Cookbook

The Service Worker Cookbook is a collection of working, practical examples of using service workers in modern web apps.

published Friday, January 8^th, 2016

Polyfill Service

The polyfill service selectively bundles browser polyfills based on the User-Agent header supplied in a request, with the intention of allowing JavaScript and CSS developers to use modern standards in legacy user agents that do not natively support the standard.…

Bookmarks

2023 2 posts permalink¶

2022 10 posts permalink¶

2021 5 posts permalink¶

2020 27 posts permalink¶

2019 55 posts permalink¶

2018 8 posts permalink¶

2016 11 posts permalink¶

Browse by category

Browse by tag

Browse collections

More pages