Feed - CSS In Real Life

I’ve Been Doing Blockquotes Wrong 🔗

True to form, Heydon Pickering has written another blistering account of one of the most ubiquitous HTML elements, the <blockquote>. You’ve probably u [...]

Notes From Green IO Conference 🔗

Last week I attended Green IO, a conference in London all about sustainability in digital technology, organised by Gaël Duez (who also hosts the Green [...]

Limitation Breeds Creativity: A Study in Composition with Custom Properties 🔗

It’s been a little while since I’ve played around with making creative stuff with CSS just for fun. My trip to State of the Browser conference at the [...]

Logical Properties in Size Queries 🔗

I came across a post from Elad Shechter lamenting not being able to use logical properties in media queries. As he correctly notes, the following won’ [...]

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

If you’re a regular user of CSS (and hey, if you’re reading this you probably are) you should definitely complete the State of CSS survey, an annual s [...]

Styling Tables the Modern CSS Way 🔗

In this article for Andy Bell’s blog Piccalilli, we explore something I’ve been consumed with styling a lot recently: data tables. Not to be confused [...]

Everybody’s Free (to Write Websites) 🔗

If anybody needs some free advice on how to build websites, Sara Joy has got it absolutely nailed. (With supporting voiceover from Keenan, and an acco [...]

Feedback 🔗

Hearing you’re doing a good job matters. Like anyone, there have been plenty of times when I’ve felt disinvested from a job, when I’ve lacked motivati [...]

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

I recently gave a CSS layout talk at Pixel Pioneers conference in my (sort of) home city of Bristol. I’ve spoken about CSS layout quite a bit over the [...]

Another Anchor Positioning Demo: Multiple Anchors 🔗

Here’s a new demo where we’re positioning article references for a body of text relative to two different anchors for the block and inline axes. Each [...]

Progressively Enhanced Popover Toggletips 🔗

The CSS Anchor Positioning specification enables us to position elements relative to an anchor, wherever they are in our web page. As I wrote recently [...]

Perspective 🔗

View from the top of Mount Snowdon (Y Wyddfa) in Eryri National Park This week I climbed a mountain. There are some things that make me care not one [...]

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

Anchor positioning in CSS enables us to position an element relative to an anchor element anywhere on the page. Prior to this we could only position a [...]

RSS is Good, Isn’t It?! 🔗

My son gets a weekly magazine delivered to our home. It’s full of his favourite comic strips by fantastic authors and artists, he gets the pleasure of [...]

Manifesto for a Humane Web 🔗

I’m sure I’m not alone in noticing the recent proliferation of articles lamenting the impending (or, indeed, already happening) destruction of the web [...]

Shades of Grey with color-mix() 🔗

Greys. Who doesn’t love ’em? When it comes to building websites, it can be handy having a few shades of grey at your disposal, no matter your colour p [...]

The Perfect Site Doesn’t Exist 🔗

There’s something special about starting a new web or software project. Like a blank canvas, it has so much potential. Surely this is where we’re abou [...]

Time to Ditch Analytics? Tracking Scripts and Web Sustainability 🔗

This article on privacy-focussed web design by Paul Jardine and Becky Thorn of sustainably-minded web design agency Root raises some great points abou [...]

Talking About Web Sustainability on ShopTalk Show 🔗

When you get an invite from Chris and Dave to appear on ShopTalk Show it’s hard to say no! Despite my longstanding fear of sounding like an idiot on t [...]

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

Colors can sometimes get out of hand in a project. We often start with a few well-chosen brand colors, but over time, we may find ourselves adding var [...]

February 2024 Bookmarks 🔗

I was just collating all the articles I’ve read over the past month in order to post them here when, coincidentally, Matthias Ott’s latest Own Your We [...]

Design Patterns that Encourage Junk Data 🔗

A post from Remy on Mastodon recently got me thinking: Been picking up some of the jsbin archive work. Today, there's currently 62 millions bins store [...]

How I Solved My Font Rendering Problem 🔗

Since I redesigned this website last year, an issue with the heading font has been bugging me. I’d noticed that, unlike in other browsers, in Safari o [...]

New and Improved Green Web Hosting Directory from the Green Web Foundation 🔗

The Green Web Foundation has recently redesigned their green web hosting directory. Previously the directory was a useful resource for finding hosting [...]

Eleventy Starter Project Updates 🔗

This blog uses static site generator Eleventy (or 11ty. I have no idea which one is the “official” spelling, and the docs appear to delight in switchi [...]

Wrapping Up 2023 🔗

I’ve held off publishing a “year in review” post until now because, to be honest, towards the end of last year I wasn’t feeling too optimistic about t [...]

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

Just before Christmas I spoke at Smashing Meets Goes Green an online event focused on digital sustainability. The video of my talk is now online, so i [...]

Where Do We Go From Here? 🔗

A question I’ve been asking myself recently is “What is the purpose of this blog”? When I started writing in 2018 it didn’t occur to me that I’d still [...]

Workshop Review: Data Visualisation Fundamentals with Andy Kirk 🔗

Last week I had the privilege of attending an online workshop on Data Visualisation Fundamentals hosted by data visualisation expert Andy Kirk. The si [...]

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

Rachel Andrew shared a snippet of good news for CSS layout on her blog the other day: it’ll soon be possible to vertically centre an element inside a [...]

Interview: Beyond the Spotlight 🔗

Melinda Seckington has just launched a brand new blog series, Beyond the Spotlight, where she’ll be talking to conference speakers about their talk pr [...]

Greenhouse Gas Emissions From Streaming Digital Content 🔗

I’ve been speaking about web sustainability a bit recently, and a question that comes up fairly frequently is about the impact of audio and video stre [...]

Reporting on Website Carbon Emissions 🔗

Yesterday I spoke at Smashing Meets Goes Green, an online meetup themed around building a more sustainable web. In my talk I spoke a little about tool [...]

Testing the Performance of Social Media Embeds 🔗

I’ve been writing and speaking about web sustainability quite a bit this past year. One thing I’ve done periodically for my talks is to test the data [...]

Wrapping Up National Blog Posting Month 2023 🔗

We made it! I tasked myself with writing 30 posts in 30 days for National Blog Posting Month, and somehow I just about managed it (well, including thi [...]

Hide and Debug Empty Elements with CSS 🔗

A tiny tip today, but a good one: use the :empty pseudo-class to hide pesky empty elements (commonly found in user-generated content). p:empty { dis [...]

Oh No, Overflow! 🔗

The overflow CSS property (shorthand for overflow-x and overflow-y) controls what happens when the stuff you put inside a box is bigger than the box i [...]

Kicking the Excessive JavaScript Habit 🔗

The video of Ryan Townsend’s talk from Performance Now(), The Unbearable Weight of Massive JavaScript is well worth a watch. Excessive JS, seemingly t [...]

You Have Something to Say That’s Worth Hearing 🔗

A recent post by Melinda Seckington, The Myth of not Having Anything To Talk About really resonated with me. I’ve been doing talks about CSS for a few [...]

Preventing Scroll “Bounce” with CSS 🔗

When you scroll rapidly to the top or bottom of a webpage you might notice a “bounce” effect, where the browser momentarily allows you to scroll beyon [...]

Why You Should Hold Onto Your Devices For Longer 🔗

My iPhone 8 is still going, four years after I bought it. That shouldn’t be a great achievement, but somehow it is. The battery life isn’t great (it’s [...]

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

Here’s a cool thing I made. Here’s a cool thing someone else made. Here’s something I just learned. Here’s something I want to learn that looks cool. [...]

Choosing a Green Web Host 🔗

Earlier this month, Jeremy Keith posed the question: “How green is my server?”. As Jeremy notes, it’s surprisingly hard to get that information! So ho [...]

Scroll Timeline Parallax Effect 🔗

I’ve been playing around with scroll-driven animations a bit lately. Scroll timelines allow us to link the progress of element’s animation to the prog [...]

Reality Check: A Series for Building Real Layouts 🔗

Reality Check is a new article series from Set Studio that focuses on CSS layout with real-world case studies. Each issue takes a design from Dribbble [...]

A Fun CSS Text Effect 🔗

Today’s post is a quick one, but (hopefully!) a fun one! It’s a demo featuring a fun text effect, using background-clip: text and text-stroke. It’s no [...]

Drawing Raindrops with CSS Gradients and Masks 🔗

If you live in the UK like I do, you can’t escape the fact that it’s been a wet few months. Since today had been yet another rainy day, I was inspired [...]

Thoughts on UX Engineering 🔗

This post on the role of a UX Engineer by Donnie D’Amato was published almost a year ago, but has cropped up in my feed today. UX engineering is somet [...]

Using Flow Diagrams to Manage State in Complex Applications 🔗

A few days ago I blogged about managing state in Vue apps with Vuex modules. I’m currently grappling with some fairly complex state management in a Vu [...]

Getting Started with Container Queries 🔗

As of this year, container queries are supported in all major browsers. But what are they, and how can we use them to build more robust, flexible layo [...]

The Joy of Lists 🔗

I’m a big fan of lists. I like to think of myself as a fairly organised person. I make lists for a lot of stuff, at work and home, and get a little ki [...]

Radial Gradients and CSS Trigonometric Functions 🔗

I’ve been playing around with layering radial gradients in CSS to create flower shapes, with the help of CSS trigonometric functions. For a primer on [...]

Better Vue Application State Management with Vuex Modules 🔗

If you use Vue you might be familiar with the state management library Vuex. It used to be the state management library recommended by Vue, until the [...]

Programming as a Craft 🔗

Last week I had the pleasure of attending FF Conf in Brighton. I was partly inspired to go to the conference after watching a talk from last year’s ev [...]

Stop Using AI-Generated Images 🔗

Recently I’ve been doing some front end development work for a lovely project that showcases original short stories submitted by writers and climate c [...]

CSS Nesting is Here 🔗

In case you missed it, nesting is now supported natively in CSS in all major browsers! Nesting is a popular feature of preprocessors like Sass and has [...]

NaN or Not a Number? 🔗

Following yesterday’s post on handling null, undefined and zero values in JS, I was asked on Mastodon: I’m curious why isNaN() doesn’t work in your ca [...]

Handling Null, Undefined and Zero Values in JavaScript 🔗

In JS, it’s easy to get caught out when determining if a variable is null, undefined, or has a value of zero. I do a lot of data visualisation, and qu [...]

(Don’t) Mind the Gap 🔗

I don’t see people using the gap property for flexbox out in the wild all that often, but it’s pretty cool! gap has been supported for flexbox in all [...]

Leaving Twitter Behind 🔗

It’s been a year since Twitter (X) went down the pan, and I finally got around to removing the Twitter link from this site. I haven’t visited the plat [...]

Owning Your Web 🔗

In case you missed it, Matthias Ott has a new newsletter. Own Your Web is a lovely, fortnightly newsletter about “about designing, building, creating, [...]

Code Gardening 🔗

In my spare time I do a bit of voluntary development work for an activist network. What I like about this kind of work (aside from helping a good caus [...]

Messing About with CSS Gradients 🔗

I’m not a person who creates CSS “art” (as in drawings), but I do like messing about with CSS gradients and seeing what comes up. I think the first ti [...]

Update on the COP28 Website 🔗

Recently I wrote about the COP28 climate summit’s website, which featured a low-carbon toggle that did precisely nothing. The post captured the intere [...]

National Blog Posting Month 🔗

Today I learned from Amy Hupe that November is National Blog Posting Month, or #NaBloPoMo, if you will. I’ve always liked the idea of posting one thin [...]

Finding Meaning in Our Work 🔗

Spread from the wonderful ‘Cat Kid Comic Club: On Purpose’, written and illustrated by Dav Pilkey This past year I’ve been thinking a lot about meani [...]

Introduction to Web Sustainability 🔗

It’s important to reflect on the environmental impact of our work and do what we can to reduce it. Don’t know where to start? This article for MDN int [...]

Styling External Links with Attribute Selectors 🔗

You might notice on some websites you visit that external links display a little icon next to them. This is super helpful for users, as it lets them k [...]

Greenwashing and the COP28 Website 🔗

Update (28th October 2023): Since this post was published the COP28 website has undergone some changes. Many of the images are now better optimised, a [...]

Introducing the Web Sustainability Guidelines 🔗

The Sustainable Web Design Community Group has just launched a draft set of guidelines for designing and developing sustainable web applications. Cove [...]

Reactivity in Vanilla Javascript 🔗

When we talk about the concept of reactivity in Javascript, we generally mean a variable in our code responding to an event or change in state somewhe [...]

Cool Tools 🔗

Chris Brandrick at Frontend Focus asked me to share five tools, libraries or packages that I love for the latest issue of the newsletter. It was hard [...]

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

An animation is about more than just moving things from one place to another. How something moves (or changes in some way) is just as important for co [...]

Video: Building a Greener Web 🔗

It’s been great to see digital sustainability become more of a mainstream topic in recent months. With most of Europe baking in a deadly heatwave with [...]

Scroll Progress Animations in CSS 🔗

Scroll-linked animations can often add a touch of class to a website, but have long been the preserve of JavaScript. Now a brand new specification is [...]

Video: Modern CSS Layout is Awesome 🔗

Back in May I had the privilege of speaking at Beyond Tellerand, an incredible conference in Düsseldorf, Germany, with content extending way beyond we [...]

Thoughts From CSS Day 🔗

Last week I had the privilege of attending CSS Day for the second year in a row (and MCing the second day!). I have to say it’s pretty much the most i [...]

Reducing Complexity in Front End Development 🔗

One of my favourite sessions at All Day Hey conference last month was Jack Franklin’s talk Abstractions, complexities and off-ramps. As web applicatio [...]

Carbon Capture: A New Way to Measure Your Website’s Carbon Emissions 🔗

WebPageTest is a great tool for measuring your website’s performance, providing detailed metrics and actionable advice. They’ve just released a brand [...]

Useful Resources for Improving Your Site’s Performance (and Reducing Carbon Emissions) 🔗

There are lots of areas where better web performance and reducing carbon emissions overlap: faster websites are often less carbon-intensive ones. They [...]

Exploring :has() Again 🔗

It’s been a while since my last article on here (well, a month is a while for me, anyway 😅), as I’ve been busy with my head down preparing for my tal [...]

Creating VS Code Snippets to Speed Up Workflow 🔗

Writing code can be repetitive, and many developers (myself included) opt to make our lives easier by configuring our code editor of choice to auto-co [...]

A Native “Visually Hidden” in CSS? Yes Please! 🔗

If you’ve been writing CSS for any length of time, the chances are you’ll have come across situations where you need to hide some text visually, but s [...]

Setting Up a New(ish) MacBook 🔗

I recently dusted off a relatively old (~5 years) MacBook and replaced the battery with the plan that I could use it as a secondary machine, for my “n [...]

Resizing with CSS 🔗

In case you missed it, container queries landed in all stable browsers this week! It’s a pretty exciting time to be working with CSS, seeing this long [...]

Working with Colour Scales for Data Visualisation in D3 🔗

Temperature anomaly data from the Global Warming and Climate Change API, visualised with D3 There are many different ways of using colour informative [...]

Testing Colour Accessibility with Dev Tools 🔗

I often use the WebAIM colour contrast checker to check my colours against WCAG (Web Content Accessibility Guidelines) standards while building websit [...]

Interop 2023 🔗

Last year, Interop 2022, a collaborative cross-browser initiative, was hugely successful in getting 15 key features implemented interoperably. As deve [...]

Scheduling Netlify Deployments with Github Actions 🔗

In this article we’ll walk through how to use Github Actions to automate regular deployment of a static site hosted on Netlify. Why This site (the one [...]

A Quick Website Redesign 🔗

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 t [...]

A Useful VS Code Extension for Environment Switching 🔗

Do you find yourself needing to switch between development environments frequently? That's often the case for me. I work on a web app for wind turbine [...]

Disentangling Frameworks 🔗

The other day I came across a pretty much textbook use case for container queries in the web app I was working on. We have this card component that di [...]

2022 in Review 🔗

As is tradition, it’s time to do a little round-up of the past year! Work At the end of 2021 I started a new job as Senior Front End Developer at Ada [...]

Correcting With Kindness 🔗

Quite a lot of us tech writers don’t get everything 100% right all of the time. Sometimes a small typo might elude us, sometimes we make the odd factu [...]

Logical Border Radius 🔗

Confession: I almost never write border-radius as shorthand, largely because I can never remember the order. My brain is wired to remember margin and [...]

Optimizing a Vue App 🔗

Prioritizing performance when building our web apps improves the user experience and helps ensure they can be used by as many people as possible. In t [...]

Find Me On Mastodon 🔗

Like many watching from the sidelines of Twitter’s rapid implosion, I’ve finally migrated to Mastodon. You can find me at @michelle@front-end.social. [...]

Web Sustainability Resources 🔗

While there’s plenty to occupy the web community this week in the form of Twitter imploding, something far more important is also going on right now: [...]

Handy Tools For Mocking API Requests 🔗

In the course of my work I sometimes find myself needing to mock API requests — often when I’m prototyping, or testing a concept for an article. There [...]

Sustainable Web Development Strategies Within an Organization 🔗

Climate change and sustainability are increasing concerns for digital organizations, as well as individuals working in tech. In this article for Smash [...]

CSS Halftone Patterns 🔗

A little while ago, Ana Tudor created an impressive collection of halftone patterns using only CSS. As I had a little time to spare, I thought I’d dig [...]

Web Sustainability and the Ethical Dilemma 🔗

Last week I had the privilege of participating in Smashing Conference in Freiburg. One of the standout sessions was from Asim Hussain, of the Green So [...]

Detecting CSS Selector Support 🔗

You might already be aware of how we can use feature detection in CSS to check whether a particular property and value combination is supported. This [...]

Creative CSS Layout (and the Flexible Web) 🔗

Hi friends! Way back in June (which already feels like such a long time ago in CSS land!) I had the pleasure of speaking about CSS layout at CSS Day c [...]

Creative List Styling 🔗

What comes to mind when you think of a list? The most obvious example is a shopping list—the most simple of lists, a collection of items in no particu [...]

A Handy Use For Cascade Layers 🔗

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 hav [...]

Quick Tip: Negative Animation Delay 🔗

Here’s a tiny CSS tip for making staggered animations feel waaaay more natural: Negative animation delay. I’ve seen this idea shared by master CSS ani [...]

Tech Workers and Climate Action 🔗

Dave Rupert recently published a post expressing his frustration with the urgent case for action on climate change, and lack of co-ordinated policy ac [...]

Logical Properties for Useful Shorthands 🔗

This article was updated on 28 July 2022 to include the section covering older browsers. Something I like about logical properties is the ability to s [...]

Masonry? In CSS?! 🔗

I spoke about CSS layout at CSS Day conference recently, and in the Q&A session afterwards I was asked about masonry layout in CSS. Masonry layout, in [...]

Breaking Out of a Central Wrapper 🔗

This is an old trick, but one I reach for just often enough to warrant a post on this blog — for no reason other than my own reference! The problem Su [...]

CSS Day 2022 🔗

Last week I spoke about CSS layout at CSS Day in Amsterdam. It was my first time attending the conference (which, this year, was actually two days), b [...]

Writing Useful Alt Text 🔗

I enjoyed this article by Jeremy Keith on writing alt text for images. In case you’re not aware of what “alt text” or (“alternative” text) is, it’s th [...]

Quick Tip: You Might Not Need Calc() 🔗

Did you know, if you use CSS math functions like min(), max() and clamp() and you’re calculating any one of the arguments, you don’t need calc()? I th [...]

My Browser Support Strategy 🔗

As I’ve written about recently, it’s super exciting to see a bunch of new CSS features landing in browsers, and who can blame us for wanting to get st [...]

Animated Grid Tracks with :has() 🔗

Screenshot from a Codepen demo. Hovering on a grid item expands the grid tracks. Somehow it’s already three months since I wrote about the CSS :has() [...]

Exciting Times for Browsers (and CSS) 🔗

Last month I wrote about some of the exciting new CSS features you can expect to see coming to a browser near you in 2022 for Smashing Magazine. It’s [...]

Building an Interactive Sparkline Graph with D3 🔗

D3 is a great JavaScript library for building data visualizations using SVG elements. In this tutorial, learn how to build an interactive sparkline gr [...]

The Web Doesn’t Have Version Numbers 🔗

You’ve probably heard the term “web3” bandied around quite a bit over the past year or so — along with related terminology like “blockchain”, “crypto” [...]

A Reason to Self-Host Fonts 🔗

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 ou [...]

New CSS Features In 2022 🔗

There are a lot of new CSS features in development as I write this. And 2022 is the year that some big ones will be landing in a browser near you, wit [...]

Are My Third Parties Green? 🔗

Fershad Irani’s tool lets you check if your third-party scripts use green hosting. Recently I’ve been thinking quite a bit about third-party scripts [...]

A Blog Post About Blogging 🔗

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 o [...]

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

Earlier this month I has the pleasure of speaking at a special green-themed edition of Toronto Web Performance Meetup (online). There were three of us [...]

I Finally Installed an Ad Blocker 🔗

It might be unusual for a web developer, but up until recently I’d never had an ad blocker installed. I use Firefox as my main browser, which claims t [...]

Aspect Ratio is Great 🔗

Maybe it’s just me, but I feel like a lot of the time learning new CSS features doesn’t involve just learning a what a single property does, more like [...]

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

In this article, we’ll look specifically at what we can do to reduce the impact of social media embeds and social sharing widgets — or even some strat [...]

Not an NFT artist 🔗

Fair warning, this post doesn’t really conform to my usual content model of frontend/CSS writing. But, as the song goes, “It’s my party, and I’ll writ [...]

Building a Scrollable and Draggable Timeline with GSAP 🔗

The Greensock animation library’s ScrollTrigger and Draggable plugins can help us create some very cool effects that respond to user interaction. In t [...]

2021 in Review 🔗

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 muc [...]

:has() Has Landed in Safari 🔗

Just a few days ago Safari gave us all an early Christmas present: the latest Safari Technology Preview release includes support for the :has() pseudo [...]

Building a Greener Web 🔗

As web developers we don’t tend to talk a great deal about the environmental impact of the products we build. But the uncomfortable truth is that the [...]

Reduce Your Website’s Environmental Impact With a Carbon Budget 🔗

In this article for CSS Tricks’ end-of-year series I wrote about how we in the web development industry should examine the environmental impact of the [...]

Don’t Forget the “lang” Attribute 🔗

An interesting notification from @cyishere popped up in my Twitter feed the other day: I use a Chrome extension Read Aloud to read the web pages for i [...]

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

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 [...]

IT Career Energizer Podcast 🔗

I recently had the priviledge of chatting to Phil Burgess on the IT Career Energizer Podcast about my journey into web development, and advice to new [...]

Favourite Web Development Courses 🔗

I’m not one for taking loads of courses. It’s hard to find the time, and when it comes to learning I always feel that, for me, doing beats reading any [...]

Accessible Toggles 🔗

I recently received some great advice from Scott O’Hara on improving the accessibility of a demo featuring a reduced-motion toggle (for this article). [...]

Respecting Users’ Motion Preferences 🔗

The prefers-reduced-motion media query has excellent support in all modern browsers going back a couple of years. In this article, we’ll look at how t [...]

The State of CSS 2021 🔗

There has arguably never been a better time to be working with CSS. We have so many more tools available at our disposal than even just a couple of ye [...]

Evaluating Clever CSS Solutions 🔗

Ahmad Shadeed recently published an article where he dug into Facebook’s implementation of the border-radius property on their card components. He had [...]

Creating 3D Characters in Three.js 🔗

In this tutorial we’ll talk through creating a three-dimensional character using Three.js, adding some simple but effective animation, and a generativ [...]

Simplifying Form Styles With accent-color 🔗

The new CSS accent-color property makes it quick and easy to roll out our brand colors to certain form inputs by leveraging user agent styles. In this [...]

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

The :is() and :where() pseudo-selectors are relatively new additions to CSS, which allow us to target elements that meet the criteria in their parenth [...]

Developer Decisions For Building Flexible Components 🔗

One of the key skills of a front-end developer is to be able to take designs and turn them into code. These designs are often presented as static mock [...]

Learning in the Open 🔗

Over the years I’ve tried out a lot of different ways of learning CSS and JS: books, online courses, articles, video tutorials… But for me, there’s re [...]

New Length Debugging Tool in Chrome Canary 🔗

A few weeks ago I blogged about inspecting sizes in the browser dev tools, lamenting the lack of a way to toggle between different unit types for leng [...]

Masking One Element With Another 🔗

Somehow it escaped my knowledge until recently that the CSS element() function is supported in Firefox. In fact, it has been for a good while (althoug [...]

Is it Time to Ditch the Design Grid? 🔗

I came across this website, Gridless Design recently, and it immediately struck a chord. It’s something I’ve been thinking about for a long time — the [...]

Building A Dynamic Header With Intersection Observer 🔗

Have you ever needed to build a UI where some component on the page needs to respond to elements as they’re scrolled to a certain threshold within the [...]

Inspecting Sizes 🔗

I don’t know about you, but I’ve often had a designer, looking over a site I’m developing, say something like “Can you move that five pixels to the le [...]

Detecting Hover-Capable Devices 🔗

With a greater proliferation of devices than ever before, we developers can no longer rely on viewport size as the factor that determines the styles w [...]

Video: Dev Roulette Live 🔗

Last week I had the honour of participating in Dev Roulette Live — a new video series co-ordinated by Stephanie Eckles, where developers are paired up [...]

Trigonometry in CSS and JS: A Series 🔗

While working on some demos earlier this year, I started to get really interested in trigonometry. Having left the subject alone since school, I initi [...]

Creating Generative SVG Characters 🔗

I came across George Francis’ work recently, and am completely in love with his generative SVG characters — especially the googly eyes! What I particu [...]

Toggling CSS Custom Properties with Radio Buttons 🔗

As part of a recent article published on Codrops, I made some demos that allowed the user to toggle between three different values for a clip path usi [...]

Dynamic CSS Masks with Custom Properties and GSAP 🔗

Learn how to animate CSS masks based on the cursor position using GSAP and custom properties for a unique spotlight effect. Read the article ➡️ [...]

Development Budgets 🔗

Personally, I find that one of the hardest things to do as a developer is estimate how long a piece of work will take. At Atomic Smash we’ve developed [...]

Paper Snowflakes: Combining Clipping and Masking in CSS 🔗

Just after Christmas I made a fun little Codepen demo recreating realistic-looking paper snowflakes in CSS, inspired by our homemade decorations! Chri [...]

Quick Tip: Style Pseudo-elements with Javascript Using Custom Properties 🔗

In Javascript we have a few ways of selecting elements, but we can’t directly target pseudo-elements. Something like this, for instance, won’t work, a [...]

Animating Underlines 🔗

I recently gave my personal website a makeover and included a few cool little CSS tricks. Over the next few posts I’ll share some of these. The first [...]

Debugging Media Queries: A Dev Tools Wish List 🔗

The Level 5 Media Queries specification brings us the ability to detect a whole load of different user preferences from within our CSS file, and serve [...]

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

Here’s a short round-up of some of the web technologies and resources that are getting me excited right now. Having started with the best intentions t [...]

Finding an Element’s Nearest Relative Positioned Ancestor 🔗

This article was updated on 15 March 2021. Have you ever been faced with a CSS positioning dilemma where an element with position: absolute isn’t bein [...]

My Typical Day 🔗

I’ve been reading quite a few blog posts in a kind of unofficial series started by Colin Devroe, who kicked things off by writing about his typical da [...]

On a break 🔗

Since starting this blog almost three years ago, I’ve regularly published two more more articles every month. I love writing and I love web developmen [...]

Goodbye, 2020 🔗

We all know 2020 has been a bad year. Nevertheless, I feel compelled to continue the tradition of writing my end-of-year review, to reflect on my goal [...]

Video: Using Tailwind with Wordpress 🔗

Last week I had the pleasure of chatting with Keith Devon and Mark Wilkinson of Highrise Digital, alongside Ben Furfie, about my experience of using T [...]

A Utility Class for Covering Elements 🔗

Here’s something I find myself needing to do again and again in CSS: completely covering one element with another. It’s the same CSS every time: the f [...]

Troubleshooting Caching 🔗

While launching the new version of this site recently, I came across a few issues with some browsers unexpectedly caching the old version – despite th [...]

Color Theming with CSS Custom Properties and Tailwind 🔗

I’m a big fan of custom properties, and this post for CSS Tricks covers how we use them with Tailwind CSS at Atomic Smash for building themes. [...]

Launching the New and Improved CSS { In Real Life } 🔗

After a few months of on-and-off work, this week I’m pleased to finally launch the new and improved version of this site! It’s not a major redesign, a [...]

Tailwind Thoughts 🔗

Although I use utility class framework Tailwind CSS for work, in some ways I am a reluctant user. I actively advocated for us to adopt it as a team, b [...]

Making Work Experience a Positive Experience 🔗

Last week at Atomic Smash we had Alice, a junior developer, join us for some work experience. Helping someone get the most out of a work experience pl [...]

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

If you’re familiar with the command line, you’ll probably already know you can create a new file using the touch command. For example, this command wi [...]

Learning About CSS 3D Transforms and Perspective 🔗

3D transforms, despite being available in CSS for a while, are one area I’ve never understood well. I think if they were new to CSS now, I’d spend a l [...]

Why I Don’t Have Time For Your Coding Challenge 🔗

It tends to be standard recruitment practice in the tech industry to require candidates to complete some sort of coding test or challenge. Sometimes t [...]

Favourite Things 1: GSAP ScrollTrigger, Eleventy, and more 🔗

For a while I’ve been thinking about publishing a semi-regular round-up of all the things that have been interesting me in tech recently, partly with [...]

Building the Zig-Zag Gradient Lab 🔗

Last month I had the priviledge of giving a talk at Vienna Calling, the online meetup organised by CSS-In-Vienna and Webclerks. Alongside fantastic ta [...]

Accessibly Hiding Focus Outlines 🔗

Update (January 2023): This article was written before :focus-visible was widely supported. Browsers have since implemented :focus-visible as the defa [...]

Drop-Shadow: The Underrated CSS Filter 🔗

This article was updated on 13 August 2020 to include additional reference material. If you’re familiar with CSS, you probably know all about the box- [...]

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

Fig 1 Cassie Evans’ personal site is resplendent with playful touches There have been so many great personal site redesigns recently. Cassie’s, Jason [...]

Irregular-shaped Links with Subgrid 🔗

Card-based UIs are commonly-used web design patterns, and it’s not unusual to build a UI that requires a hover (or focus) effect to be applied to an e [...]

Mentoring 🔗

This blog has been a little quiet over the past couple of weeks. With everything going on in the world right now, it doesn't feel like the right time [...]

CSS-only Slide-up Caption Hover Effect 🔗

Have you ever needed to build a UI where a caption needs to slide over an image on hover, revealing more content? This is something I’ve been tasked w [...]

All the CSS Colours 🔗

I recently made a demo where I needed to list all the CSS named colours as options in a select input. I didn’t want to write them all out by hand, but [...]

Exciting Things on the Horizon For CSS Layout 🔗

This past week has brought a few announcements from browser vendors of some exciting things that might have a big impact on CSS layout in the very nea [...]

Video: 90 Seconds on CSS Custom Properties 🔗

Last year I spoke at Future Sync conference, and this year the organisers asked me if I could provide a short recorded introduction to a CSS topic. I [...]

Tips for Writing for the Web 🔗

Writing for the web is a skill, like any other, that can only be perfected through practice. I’ve been writing on this blog for two years now, and cre [...]

Different Approaches to Responsive CSS Motion Path 🔗

When it comes to using CSS Motion Path, it always bugs me that the path itself is doesn’t scale. The path size, as created, is essentially a fixed siz [...]

Building an Interactive Timetable 🔗

This week the UK joined many other parts of the world in imposing a lockdown to battle the coronavirus (AKA Covid-19), and so we find ourselves in a p [...]

Positioning Text Along a Path with CSS 🔗

I’ve been playing around with CSS Motion Path a lot over the past couple of months, and having a lot of fun creating demos, some of which you can find [...]

In Search of Simplicity 🔗

During the past month or so at Atomic Smash I’ve been working on building our new front end framework (recently christened ‘Snap’) – a repository that [...]

Do We Need CSS4? 🔗

Jen Simmons raised an interesting proposal for the CSS Working Group this week: Let’s Define CSS 4 It’s come up quite a few times recently that the wo [...]

Quick and Easy Dark Mode with CSS Custom Properties 🔗

Adding “dark mode” support to a website or app is becoming increasingly popular among developers, many of whom favour this setting themselves. Giving [...]

Optimising SVGs for the Web 🔗

Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. But p [...]

Fun with CSS Motion Path 🔗

Animating an element along a path is something we as developers would normally reach for a big old JS library (like GSAP) for. But with the new CSS Mo [...]

Imperfect 🔗

Different people have differing views on writing when it comes to personal blogs. Some people spend a long time perfecting a draft, making sure everyt [...]

2019 in Review 🔗

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 disappointme [...]

7 Uses for CSS Custom Properties 🔗

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 [...]

Beautiful Scrolling Experiences – Without Libraries 🔗

Published on 24Ways [...]

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

I love the new BBC adaptation of Philip Pullman’s His Dark Materials trilogy of novels. There’s also some pretty nice graphic design to appreciate. I’ [...]

A Layout Trick for Building a Contact List 🔗

I recently needed to build a design for a contact list that looks like this: It consists of an email address and telephone number (with the potential [...]

Part 3: Building Our Sass Architecture 🔗

In the previous two articles we went through configuring a project starter repository using NPM scripts and Parcel. I tend to employ more or less the [...]

Part 2: Module Bundling with Parcel 🔗

Parcel purports to be a “zero-config” alternative to Webpack, a popular Javascript module bundler. A module bundler takes separate, reusable JS files [...]

Part 1: Building a Project Starter with NPM Scripts 🔗

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 an [...]

State of the Art CSS 🔗

An article on new and upcoming CSS features for Web Designer magazine. [...]

Building a Scrapbook Layout with CSS Grid 🔗

My son was recently tasked with the responsibility of looking after his pre-school class teddy bear for the week, which comes with the obligation to t [...]

Thoughts on the State of the Web 🔗

Laura Kalbag on stage at State of the Browser 2019 I’ve just come back from State of the Browser, a wonderful, community-run conference in London, wh [...]

Get ready for the CSS Grid Revolution 🔗

An interview for Net magazine [...]

How to Accessibly Split Text 🔗

I recently published an article on animating variable fonts with the help of the Javascript library Splitting.js. A few people asked about the accessi [...]

Variable Font Animation with CSS and Splitting JS 🔗

A little while ago I made an animated variable font demo on Codepen. In this article I’ll explain what variable fonts are, how they can be animated wi [...]

Heatwave: An Animated CSS Sun Illustration 🔗

Animated sun illustration We’re right in the middle of a heatwave here in the UK, and things have been a little quiet on this blog while I’ve been ve [...]

Part 3: Auto-flow, Order and Item Placement 🔗

When it comes to building a layout, CSS Grid offers us a number of different choices for placing items. In this article we’ll take a look at the diffe [...]

How to Enable Experimental Web Platform Features in Chrome and Firefox 🔗

Want to experiment with the latest bleeding-edge web technologies? One way is to download a nightly (or developer) version of the browser. Both Chrome [...]

Video: Building Complex Layouts at Future Sync 2019 🔗

Future Sync conference recently published the videos from their 2019 conference, including the one from my talk, Building Complex Layouts with CSS Gri [...]

Pixel Pioneers 2019 Roundup 🔗

Last week I attended Pixel Pioneers, an annual conference in my local city of Bristol. It has fast become a firm date in my calendar, and this year di [...]

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

Last year I spoke about CSS Grid at State of the Browser conference. This was a great conference to attend, with awesome speakers including Jeremy Kei [...]

Top Tips for Hiring Diverse Teams 🔗

Like many women in tech, I sometimes get asked how companies can recruit a more diverse team. It’s no secret that the tech world is very male-dominate [...]

Subgrid is here 🔗

Support for subgrid (part of the CSS Grid Level 2 specification) has just landed in Firefox Nightly! To start experimenting with it you’ll need to ena [...]

How Git Stash Can Help You Juggle Multiple Branches 🔗

When juggling multiple branches in Git, it’s easy to accidentally start working on the wrong branch, before realising you need to switch to another. O [...]

Part 2: What the Fr(action)? 🔗

In the second part of the Debugging CSS Grid series, we’ll take a look at fr (or fraction) units. Fr units are very useful for sizing grid tracks, and [...]

Part 1: Understanding Implicit Tracks 🔗

This post was edited on 22 July 2019 to better describe item placement in the example of overlapping grid items. When observing people getting to grip [...]

Controlling Leftover Grid Items with Pseudo-selectors 🔗

I recently wrote about some of the cases where you might want to use Grid instead of flexbox, and vice-versa. One of the scenarios I pointed out might [...]

Amending Your Past Commits with Git 🔗

Have you ever pushed some code with a bad commit message and wished you could go back in time and edit it? Perhaps you got two different commits mixed [...]

How to Create Better Themes with CSS Variables 🔗

Published on LogRocket [...]

Building a Dependency-free Site in 2019 🔗

A screenshot of my new, improved personal website After several years of basically ignoring it, I decided recently that it was time for a refresh of [...]

How to Convince Your Team to Adopt CSS Grid 🔗

Are you keen to jump into CSS Grid Layout but having trouble convincing the rest of your team (whether your peers or your managers)? Someone asked me [...]

Becoming a Tech Speaker 🔗

In this post I’m taking a brief diversion from my usual CSS topics to discuss how becoming a tech speaker has helped me develop my career and my confi [...]

To Grid or to Flex? 🔗

A recent Twitter thread started by Chris Coyier got me thinking about how people in general interpret the use cases for CSS Grid Layout versus flexbox [...]

My CSS Grid Wishlist 🔗

If you follow this blog you’ll know I’m a big fan of CSS Grid, and without a doubt it’s given us developers more power than ever before when it comes [...]

A Year of Utility Classes 🔗

Last year at Mud we adopted a utility-first approach to CSS (also known as atomic CSS). Specifically we decided to use TailwindCSS, a utility class fr [...]

Animating CSS Grid 🔗

Animated CSS Grid properties in action (Firefox Nightly) Soooo, Jen Simmons just dropped a surprise bombshell on Twitter – CSS Grid grid-template-col [...]

Solving a Tricky Layout Problem with CSS Grid 🔗

Last year, while working at Mud, I worked on the CSS on a site for Warner Brothers Leavesden Park studios. A large part of my contribution involved us [...]

Wrapping Up 2018 🔗

The past few days I’ve been reading a lot of people’s end-of-year reviews, where they share their personal and professional accomplishments, and their [...]

Reversing an Easing Curve 🔗

Published on CSS Tricks [...]

Into the Matrix with SVG Filters 🔗

In this article we’ll explore how to use SVG filters for advanced colour manipulation on images. Blend modes and beyond If you’re writing CSS regularl [...]

Mentoring Junior Developers 🔗

Last week I gave a talk at Bath Digital Festival about CSS Grid and CSS Variables. I was lucky enough to be able to attend a full day of talks and saw [...]

Negative Grid Lines 🔗

Did you know you can use negative line numbers to position grid items with CSS Grid? I didn’t until recently – or rather, I hadn’t given it any though [...]

20 Inspiring Women in Tech 🔗

Marko Bijelic, designer at Hipinspire, recently published this article on Medium title Web design legends: where are they now?. The article was a look [...]

Relative Grid Items with CSS Variables 🔗

I was helping my colleague get started with a CSS Grid layout recently and he asked me if there was a way of offsetting grid items relative to one ano [...]

Notes from State of the Browser 🔗

Charlie Owen at State of the Browser I recently had the pleasure of speaking at State of the Browser, a community-run web conference in London. I gav [...]

Super-powered Grid Components with CSS Custom Properties 🔗

Published on CSS Tricks [...]

Experimental Layouts with CSS Shapes and Clip-path 🔗

Recently there has been a proliferation of demos using the CSS property shape-outside to create interesting and unusual text and layout effects. (Her [...]

Building a Progressive Web App with Gatsby 🔗

In my previous article, Progressive Web Apps: An Introduction, I wrote about the key technologies involved with building a PWA and how to get started [...]

Speaking at Bristol JS on Super-powered Layouts 🔗

Last Wednesday I had the honour of presenting a new talk at Bristol JS meetup group, alongside veteran speaker, JS whizz and web audio pioneer (also a [...]

Progressive Web Apps: An Introduction 🔗

If you’re in the business of building websites, you may have increasingly heard people talking about Progressive Web Apps (PWAs). Developed by Google, [...]

In Defence of Bad Code 🔗

I saw a tweet the other day from Christian Heilmann of Microsoft (formerly of Mozilla), a big name in the web industry and tech conference circuit: <b [...]

Great Front End Writers to Follow 🔗

As this is a brand new blog, I want to highlight some of the people in web development who have inspired me and whose articles (and writing style) I l [...]

Practical Tips for Working with CSS Variables 🔗

I’ve been playing around with CSS variables (or custom properties) quite a lot recently and thought I’d share a few tips as I develop a practical stra [...]

Introduction to Gatsby 🔗

In case you haven’t heard about it, Gatsby is the latest hot thing in static site generators. While many static site generators (SSGs) use templating [...]

How to be a Good Co-worker 🔗

Transitioning to a new team inevitably involves learning new methods and processes – as well as getting used to the personalities of your co-workers, [...]