Layered Toggles: Optional CSS Mixins
the next evolution of space & cyclic toggles, which allows us to create and apply optional mixins in CSS with the help of custom cascade layers
2024 12 posts Permalink ¶
Web Design Museum
Web Design Museum exhibits thousands of screens and videos of old websites, mobile apps and software from 1990s to mid-00s
capo.js
A beautiful little tool to help you identify the best order of elements in your website’s <head>.
32bit.cafe Community Code Jam #3
A list of all the entries for the 32bit.cafe Community Code Jam #3, celebrating its one-year anniversary! Such a joy to participate in and see everyone’s beautiful work.
bookmarklvllvl
Create pictures using character sets
bookmarkSubtitles, Closed Captions, and Open Captions: What's the Difference?
Such an excellent article by Ben Myers on subtitles, captions, and transcription. Lots to learn!
bookmarkWakamai Fondue
An online tool where you can drop in a font and see all the features that the font possesses: variable axes, layout features, etc.
bookmarksynthwave.live
The best synthwave mixes, updated weekly.
How does a changed market affect Developer Relations?
An excellent rundown of the role of Developer Relations, how things have changed given—gestures broadly—the state of things right now, and how Developer Advocates can change focus to be more applicable and bring more benefits to the careers of developers around us.
bookmarkSome use cases for revert-layer
CSS Layers has been such a boon to wrangling specificity, and it’s really helped me get a better understanding of the CSS I write from a bird’s eye view. So I’m surprised that I’m just learning about revert-layer now, but super glad that this fabulously-comprehensive article by Mayank is what introduced me to it!
The what, why, how formula of technical writing
I’d really like to improve my technical writing skills, and this article by James has tonnes of practical and sage wisdom for answering three important questions when writing technical content.
bookmarkCSS Wrapped: 2023!
2023 was unmistakably one of the most exciting bumper years for CSS. This superb post by Una Kravets, Bramus, and Adam Argyle is chock-full of information and editable examples of all the electrifying changes that we saw to CSS last year.
bookmark2023 18 posts Permalink ¶
CSS Scroll-Driven Animation Velocity
CSS and the things we're able to do with it continue to astound. In this article, Bramus shows how we can use CSS to determine the speed and direction a user is scrolling and style elements respectively.
bookmarkThe ideal viewport doesn’t exist
“Before you settle on basing design decisions on a handful of strict breakpoints, make sure you consider the vast fragmentation of screen sizes and browser viewports.”
bookmarkOptical Toys
A long list of fantastic and performant web-based optical illusions. Even includes RSS!
bookmarkRogue for Macintosh
This is such a trip down memory lane for me, and I’ve been trying to (remember how to) find it for YEARS!
bookmarkOddContrast
A wonderfully easy to use and understand colour contrast checker with support for new colour formats — very useful! — built by the great folks at OddBird.
bookmarkSwapping Images with the Sizes Attribute
Wow, this technique is unbelievably clever. 🤯 Keeping this one in my back pocket for sure! h/t Scott Jehl and Alistair Shepherd
bookmarkGetting started with View Transitions on multi-page apps
This post really helped me understand just how surprisingly easy it is to start using View Transitions—as quick as a single meta tag in the head to enable fade/opacity transitions—and a slew of other great tips, tricks, and things to watch out for as we prepare for this great new browser feature to become stable!
Gotta love a good Animorphs reference, too.
Linear easing generator
“Generate linear() easings from JavaScript and SVG”
bookmarkDo you know color-scheme?
This post by Sara really helped solidify my understanding of color schemes in the browser, how they affect HTML’s default appearance in browsers, and how we can make use of them in CSS and JavaScript. Lots of useful code examples and imagery to help the detailed explanations!
bookmarkFunctional documentation
“Some collected thoughts and ideas around applying a functional approach to writing and maintaining documentation, especially for design systems.”
bookmarkLerp
A handy trick to add a bit of smoothness to animations that Rach Smith calls Lerp, a nickname for Linear Interpolation between two points
.
Sticky Page Header Shadow on Scroll
I love rather simple but powerful solutions like this—so clever!
bookmarkMourning my obsolete Skillset
This post really resonated with me, putting into words so beautifully things which I've been unable to articulate even to myself.
bookmarkWeb Design is 95% Typography
“95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.”
bookmarkSome simple ways to make content look good
Andy Bell masterfully breaks-down some of the most powerful and elegant (and my favourite too!) solutions we have in CSS today.
bookmarkGameDev Journal №1: Otis’s Zelda-like
I think this might just be the inspirational kick-in-the-pants I’ve needed to re-explore this hobby myself! 🐰🕳️
bookmarkThe Surprising Things That CSS Can Animate
“This articles explores some of the unexpected things that CSS can animate and some nifty things you can do by animating them.”
bookmarkSmithsonian Open Access
An incredible, zero-copyright archive of millions of the Smithsonian’s images available for all to download and use.
bookmark2022 10 posts Permalink ¶
!important custom properties
“Using !important with custom properties might not work as you expect.”
bookmarkGenerative art Open Graph preview images
“What if each preview image was a piece of generative art?”
bookmarkColor & Contrast
A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast.
Negative Animation Delay
Awesome little trick for building better "initial" animation states where multiple elements are staggered.
bookmarkBuild Excellent Websites
“Be the browser’s mentor, not its micromanager.”
bookmarkClean Code concepts adapted for JavaScript
“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.”
bookmarkBack 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 element as Zach does.
bookmarkGPS
Wow, just wow. What an incredible article about Global Positioning System with some delightful interactive demos to help understand complex ideas.
bookmarkIs 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
bookmarkFluid 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 you give it. Fantastic!
bookmark2021 5 posts Permalink ¶
Old CSS, new CSS
What an incredibly-detailed and interesting read on the history of CSS and web design!
bookmarkcolor × 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.
bookmarkPassing 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.
bookmarkLo-Fi Player
To me, this is part of what the web is all about. A fun little interactable room that plays lo-fi music!
bookmarkWhy I Love Coding
I think I need to read The Mythical Man-Month!
bookmark2020 28 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!
bookmarkSVG 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.
bookmarkVideo Conversion
This is definitely something that I may or may not do often… fantastic little guide to doing it right!
bookmarkThe 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.”
bookmarkAutonomy 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!
bookmarkMy Mother’s Recipes
My Mother’s Recipes is a website to share your favourite recipes, built lovingly by my pal, Will Liew.
bookmarkIA Basics
My great friend, Tom, has written a super-comprehensive article about IA: a topic I’m lacking in serious experience with!
bookmarkUncommon CSS Properties
Some useful gems in here I had no idea about!
bookmarkThe 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.
bookmarkEvery Noise at Once
A serious rabbit hole deep-dive into musical genres that's uniquely presented.
bookmarkThe World-Wide Work
This resonates with me time and time again. Such a powerful talk.
bookmarkElement.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
bookmarkWhy outbreaks like coronavirus spread exponentially
Incredible visualisations and information from Washington Post.
bookmarkFraidycat
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!
bookmarkBuild a light and global state system - Piccalilli
“Using Proxies and subscriber functions, we can create an observable, reactive state system with a tiny footprint.”
bookmarkGetting the easy stuff right ･ Robin Rendle
It me.
bookmarkHTML: 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.
bookmarkDesktop Goose
“A downloadable goose-sperience for Windows and macOS”
bookmarkIn-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.
bookmarkA Complete Guide to Links and Buttons
CSS-Tricks' complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.
bookmarkSome 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 years that might seem far-fetched today?”
bookmarkNeumorphism/Soft UI CSS shadow generator
Generate clever and gorgeous CSS shadows with this simple tool.
bookmarkFluid 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.
bookmarkGT Alpina by Grilli Type
Amazing demo for this variable font.
bookmarkCanadian Stock Photography
REALLY Canadian. I have a slightly embarrassing feeling I'll be using these.
bookmarkThe CSS Cascade
Not only is this beautiful and a joy to read, it's chock-full of of useful info about how CSS' cascading.
bookmarkThe 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.
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!
bookmark2019 55 posts Permalink ¶
Dynamic, Date-Based Color with JavaScript, HSL, and CSS Variables
“A rational system for generating thousands of possible color schemes.”
bookmarkLeonardo
“Create beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors.”
bookmarkNeal.fun
Bringing back the weird web!
bookmarkAccessible 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 in choosing accessible contrasting colours.
bookmarkJournalBook
From the venerable Trys Mudford comes JournalBook, a private, offline-first personal journal.
bookmarkBinary 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!
bookmarkMasking GIFs with other GIFs
A super-fun technique for using SVG to mask one GIF on top of another.
bookmarkOrdered 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.
bookmarkgiffgaff design
This is a set of standards that define the universal design language and content composition at giffgaff.
The Web Almanac
HTTP Archive's annual state of the web report. This is super-comprehensive and is jam-packed with useful information.
bookmarkCodevember
“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.”
bookmarkGitSheet
A dead simple git cheatsheet.
bookmarkAdvanced 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.
bookmarkKeep a Changelog
Everything you need to know about changelogs, and presented beautifully as well.
bookmarkCompound 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.
bookmark3D 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!
bookmarkASCIICKER
It boggles the mind how much effort went into building this, and how clean it is!
bookmarkAn ode to OpenType
Fall in love with the secret world of fonts
bookmarkLeon Sans
This has to be the coolest typeface demo I've ever seen, hands down.
bookmarkvi 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.
bookmarkUse 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!
bookmarkUsing 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.
Create a user controlled dark or light mode
Andy Bell breaks down implementing robust theme-switching functionality on your own site.
bookmarkStyling title bars in VS Code
I find this useful when switching between multiple windows. Written by my good friend, Arek.
bookmarkForeign 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 🙏
Poolside FM
Get on loser! We’re going POOLSIDE
bookmarkSVG 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).
bookmarkMaking 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.
bookmarkCSS and Network Performance
Invaluable tips on CSS and Network Performance from Harry Roberts
bookmarkEvery Layout
Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.
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!
bookmarkAppscope - 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...
bookmarkFornacalia
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 starter forever bubbly.
bookmarkWeb 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!
bookmarkThe 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.
bookmarkThe 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.
bookmarkHow 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!
bookmarkAn 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!
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.
bookmark1% 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.
bookmarkCelebrating Johann Sebastian Bach
Compose a two-measure melody and machine learning will harmonise with your tune! This is basically magic to me.
bookmarkQuill
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.
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!
bookmarkHow 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.”
bookmarkColor 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 the game. Once esoteric ideas like a gamut or a color space are becoming increasingly important.”
bookmarkA 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!
bookmarkNES.css
NES.css is a NES-style CSS Framework.
bookmarkUncanny Valley Studio
Not your typical portfolio website. Absolutely mind-blowing.
bookmarkThe Flexbox Holy Albatross Reincarnated
Revamped and updated version of the original.
bookmarkThe Flexbox Holy Albatross
Who even needs media queries anymore? Not Heydon Pickering, that's who.
bookmarkMonocle
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!
bookmarkCSS 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.
bookmarkWeb A Skeb
Childhood Picassos, your time has come again.
bookmarkChrono 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.
bookmarkLynn 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.
bookmarkPiano 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 crucial difference that users can freely improvise on Piano Genie rather than re-enacting songs from a fixed repertoire.
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.
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.
bookmarkMariano 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.
bookmarkDevhints — TL;DR for developer documentation
A ridiculous collection of web development cheatsheets
So You Think You’ve Built a Good Infinite Scroll
Adrian hits the nail on the head with this checklist for implementing infinite scroll.
bookmark2016 11 posts Permalink ¶
NYER
The classic rap air horn. That's all.
bookmarkAtom Multiline Select
An Atom Editor package to support multiline selection which I forked and modified to mimic Sublime Text's multiline selection technique.
bookmarkTheremin
Play your own musical synth with delay, feedback, and scuzz.
bookmarkIE9 :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 in fact treated like a child element in each instance.
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.
Responsive Pixel Art
This is an incredible display of creativity and logic on the web. The effort that has gone into this is unbelievable.
bookmarkEditing your last embarrassment
In other words Quick editing your last sent texts
Regex Golf
Test your regex skills. So much fun. Brainmelting, but fun.
bookmarkStyling 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
bookmarkServiceWorker Cookbook
The Service Worker Cookbook is a collection of working, practical examples of using service workers in modern web apps.
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. Think of it like a pair of glasses for your aging browser.