CSS { In Real Life }

Reflections From Green IO 2025

Thu Sep 25 2025

Yesterday I attended Green IO conference in London for the second year running, this time bringing along one of my Ada Mode colleagues. I only managed to attend Day 2, (the main conference day) and not the preceding day’s workshops, but there was plenty to take away and be inspired...

Creating CSS Theme Variables from a JS file

Tue Apr 22 2025

Wholegrain Digital’s Response to the BBC’s Web Sustainability Report

Thu Apr 03 2025

Earlier this year the BBC published a report on digital sustainability, Does what you scroll burn coal? Mythbusting energy consumption on the web. The report seeks to address some of the ways our online activities consume energy but interestingly, is quite critical of some of the web sustainability guidelines that...

Debating the Merits of LLMs

Thu Feb 13 2025

A recently published post by the science fiction writer Robin Sloan (Is It Okay?, published 11th February 2025) ignited some examination and debate among my little corner of the web. The post asks the question of whether it’s ethical, from an individual moral standpoint to use an LLM ([Large Language...

Published on Piccalilli

What I learned from migrating a Vue project from Vuex to Pinia

Thu Feb 06 2025

Read it on Piccalilli

Creating Static SVGs from GeoJSON

Fri Jan 17 2025

Recently I’ve been working with map data to create interactive visualisations. When working with maps it’s common to receive data as GeoJSON, a JSON format for encoding geographic features, which specifies the type of geometry and co-ordinates for the features we want to display on a map. Javascript mapping libraries...

Sustainable Hardware Choices

Tue Dec 17 2024

I’m pretty proud that I managed to keep my iPhone 8 going for over five years (with one battery replacement in that time). But recently it’s been increasingly unreliable, switching itself off at random times, and spontaneously draining the battery after doing anything remotely taxing. This combined with the fact...

Education Needs Teachers, Not More Technology

Thu Nov 21 2024

Baldur Bjarnason shared an article in a recent edition of his newsletter about AI in education. As a parent of an 8-year-old, this is something that’s been on my mind a lot recently. Like most other parents I’ve encountered, I find the idea that teachers can be “replaced” by AI...

AI Environmental Impact Report

Wed Oct 23 2024

The Green Web Foundation have published a thorough and insightful report into the sustainability of AI, and the results are pretty damning. Over the couple of years I’ve been talking about web sustainability I haven’t really touched upon AI a whole lot, partly as there wasn’t a lot of publicly...

A Versatile Markdown Shortcode for Eleventy

Fri Oct 18 2024

When writing blog posts in Markdown files I often find myself needing to add HTML elements that aren’t accounted for in Markdown. Some common ones are <aside> elements, where I include content tangentially related to the post itself, or external references.

...

I’ve Been Doing Blockquotes Wrong

Wed Oct 16 2024

True to form, Heydon Pickering has written another blistering account of one of the most ubiquitous HTML elements, the <blockquote>. You’ve probably used a <blockquote> when writing HTML. I know I’ve used literally hundreds of them. What I didn’t know is that I’ve been using them wrong all these years.

...

Notes From Green IO Conference

Sun Sep 22 2024

Logical Properties in Size Queries

Wed Sep 11 2024

The Problem With Surveys (and Why You Should Take This One)

Fri Aug 30 2024

Published on Piccalilli

Styling Tables the Modern CSS Way

Thu Jul 18 2024

Read it on Piccalilli

Feedback

Thu Jun 20 2024

Modern CSS Layout is Awesome: Talking and Thinking About CSS Layout

Tue Jun 18 2024

Anchor Positioning and the Popover API for a JS-Free Site Menu

Tue May 14 2024

RSS is Good, Isn’t It?!

Mon May 13 2024

Shades of Grey with color-mix()

Sat May 04 2024

Published on Branch

The Perfect Site Doesn’t Exist

Fri May 03 2024

Read it on Branch

Time to Ditch Analytics? Tracking Scripts and Web Sustainability

Sun Mar 17 2024

Published on MDN

Creating Color Palettes with the CSS color-mix() Function

Fri Mar 08 2024

Read it on MDN

February 2024 Bookmarks

Tue Feb 27 2024

Design Patterns that Encourage Junk Data

Tue Feb 20 2024

How I Solved My Font Rendering Problem

Tue Feb 13 2024

Eleventy Starter Project Updates

Sun Feb 11 2024

Wrapping Up 2023

Tue Jan 23 2024

Video: Building a Greener Web (Smashing Meets Goes Green)

Sun Jan 21 2024

Where Do We Go From Here?

Sat Jan 20 2024

Workshop Review: Data Visualisation Fundamentals with Andy Kirk

Tue Jan 16 2024

How Do You Vertically Centre an Element in CSS? (Even More) Easily!

Thu Dec 21 2023

Testing the Performance of Social Media Embeds

Mon Dec 04 2023

Wrapping Up National Blog Posting Month 2023

Thu Nov 30 2023

Oh No, Overflow!

Tue Nov 28 2023

Kicking the Excessive JavaScript Habit

Mon Nov 27 2023

Why You Should Hold Onto Your Devices For Longer

Fri Nov 24 2023

What to Blog About When You Don’t Know What to Blog About

Thu Nov 23 2023

Choosing a Green Web Host

Wed Nov 22 2023

Using Flow Diagrams to Manage State in Complex Applications

Thu Nov 16 2023

Published on MDN

Getting Started with Container Queries

Thu Nov 16 2023

Read it on MDN

Better Vue Application State Management with Vuex Modules

Mon Nov 13 2023

Stop Using AI-Generated Images

Sat Nov 11 2023

CSS Nesting is Here

Fri Nov 10 2023

NaN or Not a Number?

Thu Nov 09 2023

(Don’t) Mind the Gap

Tue Nov 07 2023

Owning Your Web

Sun Nov 05 2023

Code Gardening

Sat Nov 04 2023

Messing About with CSS Gradients

Fri Nov 03 2023

Update on the COP28 Website

Thu Nov 02 2023

National Blog Posting Month

Wed Nov 01 2023

Published on MDN

Introduction to Web Sustainability

Fri Oct 13 2023

Read it on MDN

Styling External Links with Attribute Selectors

Wed Oct 11 2023

Greenwashing and the COP28 Website

Tue Oct 10 2023

Cool Tools

Sun Sep 10 2023

Published on MDN

Creating custom easing effects in CSS animations using the linear() function

Tue Aug 01 2023

Read it on MDN

Video: Building a Greener Web

Tue Jul 25 2023

Published on MDN

Scroll Progress Animations in CSS

Fri Jul 14 2023

Read it on MDN

Video: Modern CSS Layout is Awesome

Tue Jul 11 2023

Thoughts From CSS Day

Tue Jun 13 2023

Reducing Complexity in Front End Development

Tue Jun 06 2023

Exploring :has() Again

Sun Apr 16 2023

Creating VS Code Snippets to Speed Up Workflow

Tue Mar 07 2023

Setting Up a New(ish) MacBook

Tue Feb 28 2023

Resizing with CSS

Fri Feb 17 2023

Working with Colour Scales for Data Visualisation in D3

Tue Feb 14 2023

Scheduling Netlify Deployments with Github Actions

Tue Jan 31 2023

A Quick Website Redesign

Wed Jan 25 2023

In my 2023 review I mentioned that I wanted to give this site a revamp. This week I carved out some time to do just that. So, here it is: Welcome to the new and improved CSS { IRL }!

...

Disentangling Frameworks

Tue Jan 17 2023

2022 in Review

Mon Jan 02 2023

As is tradition, it’s time to do a little round-up of the past year!

...

Correcting With Kindness

Tue Dec 27 2022

Logical Border Radius

Thu Dec 15 2022

Published on Smashing Magazine

Optimizing a Vue App

Tue Nov 22 2022

Read it on Smashing Magazine

Find Me On Mastodon

Tue Nov 22 2022

Web Sustainability Resources

Mon Nov 14 2022

Handy Tools For Mocking API Requests

Tue Oct 25 2022

Published on Smashing Magazine

Sustainable Web Development Strategies Within an Organization

Tue Oct 11 2022

Read it on Smashing Magazine

CSS Halftone Patterns

Fri Oct 07 2022

Web Sustainability and the Ethical Dilemma

Mon Sep 19 2022

Detecting CSS Selector Support

Tue Sep 13 2022

Creative CSS Layout (and the Flexible Web)

Wed Aug 31 2022

Published on Web.dev

Creative List Styling

Wed Aug 24 2022

Read it on Web.dev

A Handy Use For Cascade Layers

Tue Aug 23 2022

I was just preparing a demo for an upcoming talk and it suddenly occurred to me that cascade layers would be a perfect solution to a problem I was having.

...

Tech Workers and Climate Action

Mon Jul 25 2022

Logical Properties for Useful Shorthands

Tue Jul 19 2022

Masonry? In CSS?!

Tue Jul 05 2022

Breaking Out of a Central Wrapper

Fri Jul 01 2022

CSS Day 2022

Tue Jun 14 2022

Writing Useful Alt Text

Mon May 30 2022

My Browser Support Strategy

Thu Apr 28 2022

Animated Grid Tracks with :has()

Tue Apr 05 2022

Exciting Times for Browsers (and CSS)

Thu Mar 31 2022

Published on Codrops

Building an Interactive Sparkline Graph with D3

Tue Mar 29 2022

Read it on Codrops

The Web Doesn’t Have Version Numbers

Sat Mar 19 2022

A Reason to Self-Host Fonts

Tue Mar 08 2022

The other day I noticed a strange thing had happened with the title font on my personal site. Where once the glyphs were clearly defined by glowing outlines, suddenly the outlines were all over the place, bisecting the glyphs in odd ways.

...

Published on Smashing Magazine

New CSS Features In 2022

Tue Mar 01 2022

Read it on Smashing Magazine

A Blog Post About Blogging

Tue Feb 22 2022

Someone in a Slack group I’m a member of shared recently shared a link to a post by Cory Doctorow titled The Memex Method. In the post he shares his opinions on blogging as a way to order your thoughts and ideas, somewhere between a sketchbook full of notes and...

In Commission to No Emmissions: Videos from Toronto Web Performance Meetup

Sat Feb 19 2022

I Finally Installed an Ad Blocker

Sun Feb 13 2022

Aspect Ratio is Great

Tue Feb 08 2022

Published on Smashing Magazine

Reducing The Web’s Carbon Footprint: Optimizing Social Media Embeds

Thu Feb 03 2022

Read it on Smashing Magazine

Not an NFT artist

Sun Jan 30 2022

Published on Codrops

Building a Scrollable and Draggable Timeline with GSAP

Mon Jan 03 2022

Read it on Codrops

2021 in Review

Fri Dec 31 2021

Another year gone by, and it’s time to reflect on the highlights and look ahead to some goals for next year. Like Hidde, I prefer not to dwell too much on the negatives for these end-of-year posts. Suffice to say, in another pandemic year, there have been plenty of lows...

:has() Has Landed in Safari

Mon Dec 27 2021

Building a Greener Web

Tue Dec 21 2021

Published on CSS Tricks

Reduce Your Website’s Environmental Impact With a Carbon Budget

Mon Dec 06 2021

Read it on CSS Tricks

Don’t Forget the “lang” Attribute

Thu Dec 02 2021

Published on Smashing Magazine

A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH

Thu Nov 18 2021

There’s more to color on the web than meets the eye, and it’s about to get a lot more interesting! In this article, we’ll take a look at the best ways to use colors in a design system, and what we can expect from our colors in the not-too-distant future.

...

Read it on Smashing Magazine

IT Career Energizer Podcast

Wed Nov 17 2021

Favourite Web Development Courses

Tue Nov 16 2021

Accessible Toggles

Mon Nov 01 2021

Published on Smashing Magazine

Respecting Users’ Motion Preferences

Thu Oct 21 2021

Read it on Smashing Magazine

The State of CSS 2021

Wed Oct 20 2021

Evaluating Clever CSS Solutions

Tue Oct 19 2021

Published on Codrops

Creating 3D Characters in Three.js

Sun Oct 10 2021

Read it on Codrops

Published on Smashing Magazine

Simplifying Form Styles With accent-color

Thu Sep 23 2021

Read it on Smashing Magazine

Simpler Block Spacing in WordPress with :is() and :where()

Mon Sep 20 2021

Published on Smashing Magazine

Developer Decisions For Building Flexible Components

Thu Sep 09 2021

Read it on Smashing Magazine

Learning in the Open

Sat Sep 04 2021

New Length Debugging Tool in Chrome Canary

Tue Aug 24 2021

Masking One Element With Another

Tue Aug 10 2021

Is it Time to Ditch the Design Grid?

Tue Jul 27 2021

Published on Smashing Magazine

Building A Dynamic Header With Intersection Observer

Tue Jul 20 2021

Read it on Smashing Magazine

Inspecting Sizes

Sat Jul 10 2021

Detecting Hover-Capable Devices

Wed Jun 30 2021

Video: Dev Roulette Live

Sun Jun 27 2021

Trigonometry in CSS and JS: A Series

Fri Jun 11 2021

Creating Generative SVG Characters

Sat May 08 2021

Toggling CSS Custom Properties with Radio Buttons

Tue May 04 2021

Published on Codrops

Dynamic CSS Masks with Custom Properties and GSAP

Tue May 04 2021

Read it on Codrops

Development Budgets

Thu Apr 15 2021

Paper Snowflakes: Combining Clipping and Masking in CSS

Wed Apr 07 2021

Animating Underlines

Wed Mar 24 2021

Debugging Media Queries: A Dev Tools Wish List

Tue Mar 02 2021

Favourite Things 2: New CSS Features, JS Libraries and More

Mon Feb 15 2021

Finding an Element’s Nearest Relative Positioned Ancestor

Tue Feb 09 2021

My Typical Day

Fri Feb 05 2021

On a break

Tue Jan 26 2021

Goodbye, 2020

Wed Dec 30 2020

Video: Using Tailwind with Wordpress

Sun Dec 20 2020

A Utility Class for Covering Elements

Sun Dec 06 2020

Troubleshooting Caching

Mon Nov 30 2020

Published on CSS-Tricks

Color Theming with CSS Custom Properties and Tailwind

Fri Nov 20 2020

Read it on CSS-Tricks

Launching the New and Improved CSS { In Real Life }

Wed Nov 04 2020

Tailwind Thoughts

Thu Oct 22 2020

Making Work Experience a Positive Experience

Thu Oct 08 2020

Quick Command Line Tip: Create Mutliple Files With the Same Extension

Fri Sep 25 2020

Learning About CSS 3D Transforms and Perspective

Tue Sep 15 2020

Why I Don’t Have Time For Your Coding Challenge

Thu Sep 10 2020

Favourite Things 1: GSAP ScrollTrigger, Eleventy, and more

Mon Aug 31 2020

Building the Zig-Zag Gradient Lab

Thu Aug 13 2020

Accessibly Hiding Focus Outlines

Sun Aug 09 2020

Drop-Shadow: The Underrated CSS Filter

Tue Aug 04 2020

From Gatsby to Eleventy: Choosing a Static Site Generator for a Personal Site

Wed Jul 15 2020

Irregular-shaped Links with Subgrid

Wed Jun 24 2020

Mentoring

Thu Jun 11 2020

CSS-only Slide-up Caption Hover Effect

Wed May 27 2020

All the CSS Colours

Tue May 19 2020

Exciting Things on the Horizon For CSS Layout

Fri May 01 2020

Video: 90 Seconds on CSS Custom Properties

Wed Apr 22 2020

Tips for Writing for the Web

Tue Apr 21 2020

Different Approaches to Responsive CSS Motion Path

Sat Apr 18 2020

Building an Interactive Timetable

Tue Mar 31 2020

Positioning Text Along a Path with CSS

Wed Mar 18 2020

In Search of Simplicity

Mon Feb 17 2020

Do We Need CSS4?

Thu Feb 13 2020

Quick and Easy Dark Mode with CSS Custom Properties

Mon Feb 03 2020

Optimising SVGs for the Web

Sun Jan 26 2020

Fun with CSS Motion Path

Mon Jan 06 2020

Imperfect

Fri Jan 03 2020

2019 in Review

Mon Dec 30 2019

I’m going to try to keep this 2019 retrospective brief, but like many people, I find it cathartic to look back at the year’s triumphs and disappointments (not dwelling for too long on the latter), and ready for myself for the year ahead.

...

7 Uses for CSS Custom Properties

Mon Dec 09 2019

Custom properties (also known as CSS variables) allow us to store property values for re-use in our stylesheets. If you’re relatively new to them, you might wonder when you might use them over and above preprocessor variables (if indeed you use a preprocessor). I’m using custom properties a lot in...

Published on 24 Ways

Beautiful Scrolling Experiences – Without Libraries

Fri Dec 06 2019

Read it on 24 Ways

Re-creating the ‘His Dark Materials’ Logo in CSS

Thu Dec 05 2019

A Layout Trick for Building a Contact List

Sat Nov 16 2019

A Modern Front End Workflow

Part 3: Building Our Sass Architecture

Mon Oct 28 2019

A Modern Front End Workflow

Part 2: Module Bundling with Parcel

Mon Oct 28 2019

A Modern Front End Workflow

Part 1: Building a Project Starter with NPM Scripts

Mon Oct 28 2019

When it comes to building a simple front-end project, how do you get started? What are the tools you need? I suspect everyone will have a different answer. Do you start with a (JS or CSS) framework, or off-the-shelf boilerplate? Perhaps...

Published on Creative Bloq

State of the Art CSS

Wed Oct 23 2019

Read it on Creative Bloq

Building a Scrapbook Layout with CSS Grid

Mon Sep 30 2019

Thoughts on the State of the Web

Mon Sep 16 2019

Published on Creative Bloq

Get ready for the CSS Grid Revolution

Fri Sep 06 2019

Read it on Creative Bloq

How to Accessibly Split Text

Tue Aug 27 2019

Variable Font Animation with CSS and Splitting JS

Tue Aug 13 2019

Heatwave: An Animated CSS Sun Illustration

Fri Jul 26 2019

Debugging CSS Grid

Part 3: Auto-flow, Order and Item Placement

Mon Jul 08 2019

How to Enable Experimental Web Platform Features in Chrome and Firefox

Fri Jun 21 2019

Video: Building Complex Layouts at Future Sync 2019

Sat Jun 15 2019

Pixel Pioneers 2019 Roundup

Mon Jun 10 2019

Video: Super-powered Layouts at State of the Browser 2018

Sat Jun 08 2019

Top Tips for Hiring Diverse Teams

Wed May 29 2019

Subgrid is here

Sun May 26 2019

How Git Stash Can Help You Juggle Multiple Branches

Sat May 25 2019

Debugging CSS Grid

Part 2: What the Fr(action)?

Thu May 16 2019

Debugging CSS Grid

Part 1: Understanding Implicit Tracks

Tue Apr 30 2019

Controlling Leftover Grid Items with Pseudo-selectors

Sat Apr 13 2019

Amending Your Past Commits with Git

Mon Apr 08 2019

Published on LogRocket

How to Create Better Themes with CSS Variables

Mon Apr 01 2019

Read it on LogRocket

Building a Dependency-free Site in 2019

Fri Mar 22 2019

How to Convince Your Team to Adopt CSS Grid

Sat Mar 09 2019

Becoming a Tech Speaker

Sat Feb 23 2019

To Grid or to Flex?

Sun Feb 10 2019

My CSS Grid Wishlist

Sun Feb 03 2019

A Year of Utility Classes

Mon Jan 28 2019

Animating CSS Grid

Mon Jan 14 2019

Solving a Tricky Layout Problem with CSS Grid

Sat Jan 12 2019

Wrapping Up 2018

Thu Dec 27 2018

Published on CSS-Tricks

Reversing an Easing Curve

Tue Dec 18 2018

Read it on CSS-Tricks

Into the Matrix with SVG Filters

Tue Nov 20 2018

Mentoring Junior Developers

Sun Oct 28 2018

Negative Grid Lines

Sun Oct 14 2018

20 Inspiring Women in Tech

Tue Sep 25 2018

Marko Bijelic, designer at Hipinspire, recently published this article on Medium title Web design legends: where are they now?. The article was a look back at Cameron Moll’s who’s who of web design in 2004, exploring the 20 individuals’ influence on the web today. While it was interesting to read...