Articles

208 posts
  • 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 about the link between invasive tracking scripts and the carbon footprint of a website. I’ve often been frustrated by the negative performance impact of adding Google Analytics or Google Tag Manager to a site. Sites that were previously reasonably fast would subsequently perform poorly with regard to Google’s own Core Web Vitals. It seems that many of the products Google actively encourage web authors to add to their sites are paradoxically the ones that have the worst impact on performance. (Don’t get me started on YouTube videos.)

    Read more

  • Published on MDN

    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 variations as our project grows. Perhaps we realize that we need to adjust the lightness of a button color for accessibility reasons, or that we need a slightly different variant of a component. How do we ensure that the colors we choose fit within the design system for our project?

    Read it on MDN

  • 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 Web newsletter lands in my inbox! This month it’s all about bookmarks: how you collate them, where you keep them, and how you share them. I definitely need a better way to organise mine, which is why I’m sharing them here.

    Read more

  • Design Patterns that Encourage Junk Data

    A post from Remy on Mastodon recently got me thinking:

    Read more

  • 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 on iOS the headings rendered poorly, slightly blurry, as if they’d been faux-bolded. Googling the problem was coming up with nothing, but I’m using a variable font, so I figured perhaps that had something to do with it not being a super-common issue.

    Read more

  • 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 switching gratuitously between the two! Let’s go with “Eleventy” for now.) under the hood. I like Eleventy because it allows me to write blog posts in markdown and use Nunjucks for templates, which get built into HTML file on deployment and served as static files, so it’s nice and lightweight on the client side. I also have an Eleventy starter project that’s been long-overdue for some maintenance. I recently made a few updates, so I thought I’d note them down here.

    Read more

  • 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 the state of the web. Normally I like to end the year with a (mostly) upbeat reflection on my experiences, and on new developments in CSS. But for the first time, I feel a sense of trepidation for my chosen profession, and the industry as a whole. It seems every week the headlines are filled with new ways that companies are using AI to exploit workers and fill the web with soulless marketing soup. Additionally, I’ve seen several friends and acquaintances laid off this year, and I have a feeling that trend might continue a while yet. It’s taken a bit of the shine of my enthusiasm for the web, even to the point of questioning whether my chosen profession is still where I want to be.

    Read more

  • 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 if you’d like to know more about this vast topic, jump right in!

    Read more

  • 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 be doing it five years later. I picked the name “CSS { In Real Life }” because I loved CSS (I still do!), and that was what I was most interested in learning and writing about. But over the course of the years I’ve found myself expanding my writing into different areas: web sustainability, JS, dev ops, front-end in general, and work/life more broadly.

    Read more

  • 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 six-hour workshop was split across two days, and consisted of a mixture of teaching materials, examples and interactive exercises (both individually and in small groups). It can be tricky to find the right balance to hold people’s attention for an online workshop — speaking from my own experience, I find I sometimes struggle to stay engaged compared to attending in person. But the blend of content here, combined with Andy’s presentation style and his expertise and enthusiasm for the subject meant that in this case I felt fully immersed. It appeared the rest of the audience was similarly engaged too.

    Read more

  • 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 parent without the parent needing to be a flex or grid container, using the align-content property.

    Read more

  • 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 transfer size of various social media embeds — they’re pretty bad!

    Read more

  • 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 this post — yes, I cheated!). So, what have I learned?

    Read more

  • 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 itself. Should it bleed out of the box (overflow: visible, the default)? Hidden completely (overflow: hidden)? Or should the content be scrollable (overflow: scroll or overflow: auto)?

    Read more

  • 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 turbo-charged by JS frameworks, has long been a problem on the web, with bundle sizes showing no sign of decreasing.

    Read more

  • 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 already been replaced once), some apps are noticeably slower, and Apple have announced that the iPhone 8 won’t support the iOS 17 update, which means I’ll have to seriously consider upgrading in the not-too-distant future. I’m hoping to make it to the five-year mark, but we’ll see.

    Read more

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

    Read more

  • 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 how do you ensure that you’re hosting your website on a green server?

    Read more

  • 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 Vue app, and I wanted to share a bit about my process and how I’ve made it more manageable.

    Read more

  • Published on MDN

    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 layouts? Do we still need media queries? Let's find out.

    Read it on MDN

  • 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 team developed Pinia. But lots of applications still use Vuex, including the one I work on. This post contains some tips for handling state in a Vue app with Vuex. Some familiarity with building with Vue and Vuex will be assumed.

    Read more

  • 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 change activists. Most of the stories are accompanied by an illustration specially created by an artist. One story did not have an accompanying image, so the author suggested using an illustration produced by an AI image generator.

    Read more

  • 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 been, in my opinion, on of the main reasons to keep using preprocessors. But with nesting supported natively, it might soon be time to consider dropping a preprocessor altogether.

    Read more

  • NaN or Not a Number?

    Following yesterday’s post on handling null, undefined and zero values in JS, I was asked on Mastodon:

    Read more

  • (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!

    Read more

  • 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, and publishing for and on the Web”, which captures a whole bunch of people in its remit: designers, developers, writers, content creators and more. I was pleasantly surprised to get a shoutout in the latest issue for my recent article for MDN on web sustainability!

    Read more

  • 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 cause) is that I get to experience an entirely different codebase, architecture and working process than I do in my paid employment.

    Read more

  • 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 time I became aware that you could create some pretty cool effects with CSS gradients was Lea Verou’s CSS3 Patterns Gallery.

    Read more

  • 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 interest of a few people, and I was contacted by ABC News Australia, who published a story on it, inviting me and web sustainability consultant Fershad Irani to comment.

    Read more

  • 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 thing a day (blog post, tip, sketch, photo, whatever), even while secretly thinking that people who commit to that must have a few screws loose. There’s a sense of achievement that comes from forcing myself to generate some sort of creative output regularly though.

    Read more

  • Published on MDN

    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 introduces some ways in which developers can improve the efficiency of the website we build and take steps to make our work more sustainable.

    Read it on MDN

  • 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 know that the link is going to take them somewhere off-site.

    Read more

  • 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, and the low-carbon toggle actually prevents them from loading. Much more could be done to optimise the site, however, and many of the points still stand.

    Read more

  • 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 to narrow it down to just five! So I thought I’d share the full long-list with you here, in no particular order.

    Read more

  • Published on MDN

    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 conveying a sense of purpose.

    Read it on MDN

  • 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 unprecedated temperature, the need for action on climate change is more pressing than ever. If you’re not sure what action you, as a developer, can take, my talk from All Day Hey conference provides some facts, figures and starting points for thinking about sustainability in the context of web development.

    Read more

  • Published on MDN

    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 being implemented to enable us to create rich scroll-driven experiences with CSS! In this article for MDN, we’ll explore scroll timelines — how to link an animation to the progress of scroll.

    Read it on MDN

  • 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 web design into the realms of animation, mural painting, typography, digital art, Japanese calligraphy and more!

    Read more

  • 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 inspiring conference I’ve ever been to. Right off the bat, Una hit the nail on the head when she said that (paraphrasing) if we thought 2022 was a good year for CSS, we ain’t seen nothin’ yet.

    Read more

  • 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 applications grow larger, they inevitably fall prey to complexity, despite our best intentions. The prevalence of third-party libraries to solve everyday coding problems is both a blessing and a curse. It can be tempting to reach for an off-the-shelf solution to save time now, but what happens when that dependency is no longer maintained, or when developer needs change? Can you be sure you understand enough of the underlying code to fix any bugs created by pinning all-important functionality on an (often unpaid) open source maintainer?

    Read more

  • 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 talk on modern CSS layout at Beyond Tellerand, which is (checks notes) tomorrow!

    Read more

  • 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-complete common statements in the given coding language.

    Read more

  • 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 “non-work” stuff. The last couple of times I’ve got a new Mac I’ve gone for the option of cloning my old setup, so I don’t need to install everything again. This time, however, the whole point was to keep things simple, minimal and (hopefully) fast, so I decided to completely wipe it and start from scratch.

    Read more

  • 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-awaited feature finally become useable.

    Read more

  • Working with Colour Scales for Data Visualisation in D3

    There are many different ways of using colour informatively when it comes to data visualization. But we also need to ensure our use of colour conveys the right information, and that it is used accessibly. In this article we’ll walk through some examples of using colour in different types of visualizations with the data visualization library D3.js. Some familiarity with D3 will be assumed, but there will be some helpful pointers regardless of how you create your visualizations.

    Read more

  • 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.

    Read more

  • 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 the new and improved CSS { IRL }!

    Read more

  • 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 displays a health summary for the section of the app the user is currently inspecting (which could be a wind turbine, a system within that turbine, or the entire wind farm). Generally we want to show that towards the top left of the screen, with some other information on the right. On certain pages however, the information on the right will be absent, so we want the health summary component to go full width. Easy enough, but we also want to style the component differently when it takes up the entire width by aligning the text to the left and giving it a more horizontal layout.

    Read more

  • 2022 in Review

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

    Read more

  • 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 factual error despite our best efforts and research. Sometimes we phrase something clumsily, giving the wrong impression, omit some piece of information (intentionally or unintentionally), or perhaps misinterpret something we’ve read elsewhere. I’m as guilty as anyone. Especially on this blog, where I don’t always have time to proofread as thoroughly as I should. I worry a lot about being “correct”, particularly as my readership has increased over the past few years, and always endeavour to ensure my articles are as accurate as possible. It’s part of the reason why writing for others takes me so much longer than writing for myself. I always want to make sure the information I’m providing is 100% reliable. Even then, inevitably the odd mistake can slip through.

    Read more

  • 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 padding shorthands (top, right, bottom, left), but when it comes to corners it’s a different story. Do I start from the top left corner, or the top right? So I usually resort to the longhand, which is admittedly verbose, but at least has the advantage of being explicit, for me and any future readers of my code. For the record, these are equivalent:

    Read more

  • Published on Smashing Magazine

    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 this article we’ll walk through some of the front-end optimization tips to keep our Vue apps as efficient as possible.

    Read it on Smashing Magazine

  • 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.

    Read more

  • 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: the COP27 climate summit, taking place in Sharm El-Sheikh, where world leaders gather to hammer out agreements to (hopefully) limit catastrophic climate change.

    Read more

  • 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 are a couple of useful (free) tools I reach for on these occasions.

    Read more

  • Published on Smashing Magazine

    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 Smashing Magzine, we explore some of the ways we can raise awareness and effect change within an organization to create a more positive environmental impact.

    Read it on Smashing Magazine

  • 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 into the code and see how it was done! Ana’s demos are made using Sass — what better way to learn than to try to produce similar effects using vanilla CSS?

    Read more

  • 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 Software Foundation, who talked about what a Net-Zero strategy means for organisations building websites. It was interesting to hear about the challenges of measuring the carbon emissions of a website, and the many different aspects that must be considered while doing so.

    Read more

  • 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 is a pretty smart way to go about writing robust CSS that caters for users with a whole range of browsers and devices with different capabilities, and is infinitely preferable to user agent sniffing. We can check whether a browser supports aspect-ratio, say, and provide a fallback in cases where lack of support would hamper the user experience.

    Read more

  • 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 conference. I’m pleased to say the video has now been published! Take a look to learn about a whole bunch of modern CSS layout techniques, with a few little tricks thrown in.

    Read more

  • Published on Web.dev

    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 particular order. But we use lists in all sorts of ways on the web. A collection of upcoming concerts at a venue? Very likely a list. A multi-step booking process? Quite possibly a list. A gallery of images? Even that could be considered a list of images with captions.

    Read it on Web.dev

  • 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 having.

    Read more

  • 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 action by the people in power. While much of the world suffers from extreme high temperures this summer, climate change has become a visible, tangible issue for many of us.

    Read more

  • Logical Properties for Useful Shorthands

    This article was updated on 28 July 2022 to include the section covering older browsers.

    Read more

  • 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 case you’re not aware, is where different height items are laid out in columns but, rather than being aligned on the row axis, the items below effectively move up to plug any gaps, kind of like a bricklayer — hence the name. Pinterest’s grid design is a commonly-cited example whenever the masonry conversation comes up.

    Read more

  • 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!

    Read more

  • 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), but I’m quite sure it won’t be the last. The incredible mix of speakers and attendees with an overwhelming passion for CSS blew me away, and every talk demonstrated in-depth knowledge in the speaker’s chosen area.

    Read more

  • 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 the text value of the alt attribute of an <img>. It should describe the image (although in practice doesn’t always!).

    Read more

  • 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 started using them straight away?! It’s great to see browsers working to support new CSS features quicker than ever before, and that pace should persist with Interop, an initiative where browser vendors work together to implement features interoperably. And with so-called “evergreen” browsers, most users should see those new features right away, as their browsers update seamlessly.

    Read more

  • Animated Grid Tracks with :has()

    Somehow it’s already three months since I wrote about the CSS :has() pseudo-class landing in Safari Technology preview. The latest Safari (proper) release has just shipped with support, and can be enabled with a flag in the next Chrome release.

    Read more

  • 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 certainly an exciting time to be working on the web right now, with browser support for new features moving along at lightning-fast pace! This month saw Safari drop a new release that includes support for a tonne of new stuff, including :has() (A.K.A. the “parent selector”), accent-color, and Cascade Layers (all of which are covered in my Smashing article), as well as some additional gems:

    Read more

  • Published on Codrops

    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 graph that takes inspiration from the NPM website. We’ll also learn how to use CSS custom properties to create multiple color schemes.

    Read it on Codrops

  • 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” and “NFTs”. If you’re a web developer you’d be forgiven for thinking that this technology is something you need to jump on right away, or risk being left behind. This post by Hidde de Vries explains why we should be cautious about the misleading term “web3”, and not mistake it for some kind of official release. As he writes:

    Read more

  • 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 outlines, suddenly the outlines were all over the place, bisecting the glyphs in odd ways.

    Read more

  • Published on Smashing Magazine

    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, with the potential for big changes in the way we write CSS! I explored some of these new features for Smashing Magazine.

    Read it on Smashing Magazine

  • 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 opinions on blogging as a way to order your thoughts and ideas, somewhere between a sketchbook full of notes and a fully-formed essay. He writes:

    Read more

  • 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 speaking in all, each with a different take on how we as web developers can reduce our environmental impact.

    Read more

  • 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 to protect privacy by blocking trackers. And to be honest, I don’t read a lot of articles on desktop, preferring to read the news on mobile while I’m on the go. While you might get one or two pop-ups on mobile, the area available for them is clearly a lot smaller, and I generally find the browsing experience for many of the sites I regularly visit is OK.

    Read more

  • 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 getting to grips with a collection of properties and how they work together — even learning a whole specification. That’s certainly not a complaint from me: it makes sense to consider properties as part of an ecosystem. But I have to confess, I love it when a new CSS property lands in browsers that doesn’t have a steep learning curve and just works, with no fuss. The aspect-ratio property hits all the right spots there, neatly solving with a single line of CSS something that was, quite frankly, a bit of faff before. It’s been supported in browsers for going on a year now, but with Safari finally catching up in September 2021, we can finally feel confident using it with aplomb.

    Read more

  • Published on Smashing Magazine

    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 strategies to avoid them altogether. While the spotlight is on reducing the environmental impact, many of these tips will be great for performance too.

    Read it on Smashing Magazine

  • 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 write if I want to”. 😁

    Read more

  • Published on Codrops

    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 this article for Codrops we’ll look at how to use them together, to create an interactive timeline that’s both scrollable and draggable. We’ll be building a timeline showing the albums of the rock band Radiohead — but you can choose any subject matter you like!

    Read it on Codrops

  • 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 much on the negatives for these end-of-year posts. Suffice to say, in another pandemic year, there have been plenty of lows as well as highs.

    Read more

  • :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-class! Otherwise known as the “parent selector”, (but officially termed in the the spec ‘The Relational Pseudo-class’) it allows us to style an element based on its descendants. We can do things like (off the top of my head) style any sections that contain img elements:

    Read more

  • 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 web is responsible for a growing proportion of carbon emissions. Rising temperatures, increasingly extreme weather events, and the failure of this year’s COP26 conference to deliver strong leadership have all highlighted the urgency of reducing our emissions if we’re to avoid disastrous climate change. The commitments of world leaders may have fallen short, but we all have a role to play, and we can’t escape our responsibility.

    Read more

  • Published on CSS Tricks

    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 products we’re building, and some resources to help us do so.

    Read it on CSS Tricks

  • Don’t Forget the “lang” Attribute

    An interesting notification from @cyishere popped up in my Twitter feed the other day:

    Read more

  • Published on Smashing Magazine

    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 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

    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 developers starting out on that path. You can listen to the episode here — it’s also available on all your favourite podcast platforms (Spotify, Apple Podcasts and more)!

    Read more

  • 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 day. That said, I’ve dipped into a few great courses recently that I’ve learned loads from, so I thought I’d share them with you fine folks here.

    Read more

  • 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). The demo sets the play-state of the animation depending on the user’s motion preferences (using the prefers-reduced-motion media query). Users could also click the button to toggle motion on and off, which also changes the text of the button to “Turn on motion” or “Turn off motion”. Here’s the original version:

    Read more

  • Published on Smashing Magazine

    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 to use it today to make your sites more accessible.

    Read it on Smashing Magazine

  • 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 years ago. Scroll snap, Motion Path, Level 5 Media Queries and CSS functions min(), max() and clamp() are just some of the CSS features that have got me excited in the last year or two, but even these are old-hat compared to the buzz around container queries, or LCH colours, for instance. It can be hard to keep up with the pace of change, but as a developer I would argue that one of the most important qualities to have is curiosity. That doesn’t mean instantly adopting new tools and features the second they arrive (and burning yourself out trying to keep up). It means being open to the possibility that there might be a better way of doing something, and being able to evaluate it objectively when the need arises.

    Read more

  • 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 noticed, upon inspecting Facebook’s CSS, that the value for border-radius seemed quite convoluted for what amounted to a value of 8px:

    Read more

  • Published on Codrops

    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 generative colour palette.

    Read it on Codrops

  • Published on Smashing Magazine

    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 article we’ll take a look at what it does and how to use it alongside color-scheme for simple, accessible checkboxes and radio buttons — and imagine how we might use it in the future.

    Read it on Smashing Magazine

  • 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 parentheses. For example, using :is() we can target any p, h2 or ul element with a class of test:

    Read more

  • Published on Smashing Magazine

    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-ups, which visualize the “ideal” experience of browsing the website.

    Read it on Smashing Magazine

  • 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 really no substitute for learning by doing. In fact, I’d do so far as to say that this is probably the best way for anyone to learn front end coding (and perhaps most other disciplines too!). That’s not to say that the above resources aren’t useful — I still use of them frequently. But I consider them supplementary to actually learning “on the job”. Here I’d like to share what’s been successful for me when learning new front end skills, and some things that might help you too.

    Read more

  • 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 length values:

    Read more

  • 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 (although it still needs a prefix). “What is the element() function?”, I hear you cry. It’s a way to render a HTML element as an image value for use in our CSS. The example given on MDN is using an image rendered on a <canvas> as a background image. That’s a pretty cool use case, although the CSS Paint API already allows us to create a paint worklet and use it in our CSS – check out this tutorial by Temani Afif. Perhaps that’s one reason why browser support seems to have stalled?

    Read more

  • 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 way that the usual design process, where designers hand off static mockups based, so often, on a 12-column grid, is not fit for purpose. I know I’m far from the first person to think that way, but increasingly with the advancements in CSS layout in recent years, the design grid feels more like a hangover from print than ever. A solution to a problem that, on the web, we simply don’t have.

    Read more

  • Published on Smashing Magazine

    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 viewport — or perhaps in and out of the viewport itself?

    Read it on Smashing Magazine

  • 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 left?”. The problem is, most of the time I’m not using pixels. It’s frustrating that despite rem or em units generally being a better choice for the web, design tools tend to favour pixels. It means that designers and developers are often speaking different languages when it comes to sizes.

    Read more

  • 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 we serve up to our website users. Up until fairly recently, we might have caught ourselves making assumptions based on the size of a device: that mobile devices would rely on touch input, for instance, while for larger screen sizes we might assume the majority of users would interact with our webpage using a mouse. We might provide different experiences with a media query:

    Read more

  • 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 for live conversation about their specialist subjects. The added twist is a roulette wheel, spun at different points to choose topics at random. One of my favourite things to do is talk about CSS, so this was super fun to be a part of!

    Read more

  • 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 initially started brushing up on my knowledge to solve a specific problem. But I was soon drawn in by how a grasp of trigonometry opens up the possibilities for creative coding!

    Read more

  • 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 particularly love about these is that they underline how generative art doesn’t have to be serious — it can be playful, whimsical and fun.

    Read more

  • 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 using radio buttons. As with so many things these days, I found myself reaching for custom properties! Let’s take a look at why custom properties are great for this.

    Read more

  • Published on Codrops

    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 it on Codrops

  • 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 some processes over time that enable us to estimate a lot of common development tasks with some degree of accuracy:

    Read more

  • 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! Christmas might be a distant memory, but there were plenty of learnings from this process that might be interesting to share.

    Read more

  • 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 one is all about underlines. Hover over any of the links in the body copy on the site and you’ll notice the underline transitions downwards. On the web it’s pretty common to seeing animated underline effects using pseudo-elements and/or borders. Try hovering on the examples in this demo.

    Read more

  • 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 up styles accordingly. Current support for the various media queries within the specification is mixed, but there are some that already have widespread support and are safe to use right now. For instance, we can detect whether a user has their system preferences set to dark mode using the prefers-color-scheme media query:

    Read more

  • 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 to write one of these posts regular, it’s been several months since the first one.

    Read more

  • Finding an Element’s Nearest Relative Positioned Ancestor

    This article was updated on 15 March 2021.

    Read more

  • 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 day and inviting others to do the same. It’s like looking in through a little window on other people’s worlds, which I love – and right now it feels like a great way of connecting with others, which is more important than ever. Sometimes I pick up some productivity tips too!

    Read more

  • 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 development, so this never (or hardly ever) felt like a chore: there was always something to get excited about, which meant I couldn’t wait to dash off a few thoughts, whether on the train home from work or late into the evening, even after a long day of coding. But this pandemic has utterly defeated me.

    Read more

  • 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 goals and achievements (personal and professional). Writing things down can help make sense of a year that has often made very little sense. For me personally, and no doubt for many of you too, there have been many times throughout the past 12 months where I’ve felt stuck in limbo, and that I’m not achieving very much at all. So I’m writing this to celebrate the highlights and the small wins (as well as reminding myself they exist). But (as Hidde also acknowledges in his end-of-year post), it doesn’t mean the year has been without its lowlights. Don’t feel bad if your biggest win this year has been just getting through it. It’s the same for me, and countless others.

    Read more

  • 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 Tailwind CSS for building Wordpress sites. We’ve been using Tailwind at Atomic Smash for the past year, and I’ve been using it even longer. It’s been an interesting journey marrying it up with the Gutenberg block editor in Wordpress, but it’s fair to say it’s become an important part of our workflow.

    Read more

  • 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 first element (the one that needs to be covered) has position: relative applied to it. The second has position: absolute and is positioned so that all four sides align to the edges of the first element. The full CSS looks like this:

    Read more

  • 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 this being a total rebuild. It meant some users were still seeing the previous version of the site unless they manually cleared their cache. Clearly this is not a reasonable request to make of every user!

    Read more

  • Published on CSS-Tricks

    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.

    Read it on CSS-Tricks

  • 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, and if you’re just reading articles you might notice very little difference. But there are a few new features I hope users might enjoy. No doubt there are a few bugs to fix too! Please be patient while I iron those out over the coming weeks. 😉

    Read more

  • 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, but there’s still something about it that doesn’t feel quite as good (for me) as writing “real” CSS. It has its limitations which, I believe, are worth considering before wholesale adoption. (I wrote about my feelings towards it some time ago.) Nevertheless, its many advantages – the speed which it allows for building components, the consistency it brings to projects that might have several different team members working on the front end, the clear documentation – make it a worthwhile choice for us at Atomic Smash.

    Read more

  • 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 placement whilst maintaining the existing team’s productivity is challenging at the best of times. But during a global pandemic, with a fully remote team, it becomes even more so. As lead front end developer, it fell to me to oversee a large part of the placement, and provide assistance when needed.

    Read more

  • 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 will create a new index.html file in your current directory:

    Read more

  • 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 lot more time playing around with them, like I have with Motion Path and some other new CSS features. As things stand, I’ve never had much cause to use them in production (with the odd exception), so I’ve concentrated my time and energy on other things.

    Read more

  • 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 this takes the form of the much-feared whiteboard interview – where candidates are expected to work through a problem on the aforementioned whiteboard, in front of an interviewing panel. In other cases, it’s a take-home assignment, or coding challenge. Often following an initial interview (or sometimes two rounds of interviews), the candidate is given a task to complete in their own time, generally something typical of the job they are applying for, or that requires many of the same skills.

    Read more

  • 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 the aim of helping others discover new things. (Hey, that’s what this blog is for!) Kind of like a newsletter, without the newsletter part. Although maybe it’ll eventually become a newsletter too!

    Read more

  • 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 talks by Cassie, Andy, Ramón and Carie, I spoke about how I built a recent Codepen demo, the Zig-Zag Gradient Lab:

    Read more

  • 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 default for displaying the focus outline. I no longer recommend the solution detailed in this article.

    Read more

  • Drop-Shadow: The Underrated CSS Filter

    This article was updated on 13 August 2020 to include additional reference material.

    Read more

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

    There have been so many great personal site redesigns recently. Cassie’s, Jason’s and Josh’s are among my favourites, but there are plenty more flying under the radar. What characterises many of them is a certain playfulness, a resurgence of whimsy and delight. You can feel the love and care that has gone into them, the fact that their creators have carved out their little corner of the web to call home. Perhaps the pandemic situation, coupled with the popularity of Animal Crossing has something to do with this?

    Read more

  • 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 entire card. There are a few strategies for implementing this effect using CSS, and this CSS Tricks article covers some of them. (None of them is perfect, and they all have their pitfalls!)

    Read more

  • 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 to be sharing CSS tips, without acknowledging the real struggles of the people out protesting on the streets following the killing of George Floyd. Black people are literally fighting for the right to exist in a racist world.

    Read more

  • 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?

    Read more

  • 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 the trouble was I couldn’t find just a list of all 148 colours anywhere as plain text.

    Read more

  • 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 near future.

    Read more

  • 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 put together a 90-second video on CSS custom properties, one of my favourite (relatively) recent CSS features, and thought I’d share it with you here.

    Read more

  • 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 creating content for other sites before that, and I like to think I’m pretty okay at it – though there are always ways to improve! In this article I’ll share a few tidbits of wisdom that I’ve acquired over the years, which might help you if you’re starting to blog, or even making the switch from writing for print.

    Read more

  • 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 size, in pixels. It means that responsive design with Motion Path is a little tricky, and requires some workarounds.

    Read more

  • 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 pretty weird situation, to say the least. I hope you’re all keeping safe and taking care of yourselves and your loved ones out there. My heart goes out to those who have been personally affected, and to the incredible NHS workers on the frontline, who are fighting daily battles and risking their own health to keep us safe.

    Read more

  • 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 this Codepen collection. But the “Motion Path” name is a little misleading, as it doesn’t only relate to movement. In fact, although the specification still goes by the name “Motion Path”, the property used to define the path was changed from motion-path to offset-path. It’s easy to see why: an element can be placed anywhere along the path, with or without motion – its position (or offset-distance value) doesn’t have to be animated.

    Read more

  • 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 includes all the scripts, packages and starter files to enable anyone in the development team to get started on a new project quickly and painlessly. Uppermost in my mind is the elusive goal of simplicity, in a front end development landscape that is anything but.

    Read more

  • Do We Need CSS4?

    Jen Simmons raised an interesting proposal for the CSS Working Group this week:

    Read more

  • 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 users a dark theme option can be beneficial for accessibility, as some people experience headaches or visual difficulties from excessively bright screens, or have trouble reading for long periods on a light background.

    Read more

  • 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 plenty of times I’ve opened up a web project and found that SVG assets could be made significantly smaller with some straightforward optimisations. In this article I’ll share my process for optimising SVG assets, which may help you if you’re a designer or developer unfamiliar with working with SVG on the web.

    Read more

  • 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 Motion Path module, we can create fancy path animations using only CSS!

    Read more

  • 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 everything reads well, there are no grammatical errors, and all the code examples are helpful and flawless. Others dash out a draft and publish as quickly as possible, then worry about editing later.

    Read more

  • 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 disappointments (not dwelling for too long on the latter), and ready for myself for the year ahead.

    Read more

  • 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 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 my workflow these days, and thought I would collate some of the use cases here.

    Read more

  • Published on 24 Ways

    Beautiful Scrolling Experiences – Without Libraries

    Published on 24Ways

    Read it on 24 Ways

  • 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’m a sucker for a beautiful title sequence (I need to watch the opening credits of Game of Thrones in full, every single time), and this one certainly fits the bill, as well as the striking logo. After watching a recent episode, I thought I’d have a go at re-creating this logo with CSS!

    Read more

  • A Layout Trick for Building a Contact List

    I recently needed to build a design for a contact list that looks like this:

    Read more

  • A Modern Front End Workflow

    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 same Sass architecture for every project, so I want my boilerplate to include the SCSS files and folders I need to get started writing code straight away. This is my preferred architecture, loosely based on Harry Roberts’ ITCSS (Inverted Triangle CSS), and our boilerplate at my previous agency, Mud:

    Read more

  • A Modern Front End Workflow

    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 (or modules) and “bundles” them into a single file to be served to the browser, as well as minifying the output. This can improve website performance, as the browser doesn’t need to load a bunch of files individually. This in itself is very useful, but Parcel also takes care of other tasks for us out of the box, including:

    Read more

  • A Modern Front End Workflow

    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 answer. Do you start with a (JS or CSS) framework, or off-the-shelf boilerplate? Perhaps you use a task runner (like Gulp to orchestrate your project’s needs. Or do you start simple, with just HTML and a CSS file?

    Read more

  • Published on Creative Bloq

    State of the Art CSS

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

    Read it on Creative Bloq

  • 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 take said teddy bear out on adventures and add your memories to a scrapbook. I quite enjoyed creating this scrapbook layout, and it got me thinking about how I would build something like this with CSS Grid!

    Read more

  • Thoughts on the State of the Web

    I’ve just come back from State of the Browser, a wonderful, community-run conference in London, where I gave a talk about debugging CSS Grid. The conference intentionally focused on web standards, rather than the latest tooling or frameworks. Each of the speakers had their own area of expertise, but what was especially successful was the way the talks were, whether by accident or design, woven seemlessly together by a common thread: making the web work for everyone. Bruce Lawson set the tone early on by quoting Sir Tim Berners Lee (or “Uncle Timbo”, as Bruce would have him known):

    Read more

  • Published on Creative Bloq

    Get ready for the CSS Grid Revolution

    An interview for Net magazine

    Read it on Creative Bloq

  • 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 accessibility implications of this, so in this article we’ll take a look at why splitting a string of text can be problematic from an accessibility point of view, and what we can do to make sure that split text is accessible to everyone.

    Read more

  • 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 with CSS, and how I created a breathing effect with CSS and a little bit of Javascript.

    Read more

  • Heatwave: An Animated CSS 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 very busy with various other projects. So I’d thought I’d take a little break today and try something a little bit fun – an animated CSS sun illustration, to capture the summer spirit (and the relentless heat)!

    Read more

  • Debugging CSS Grid

    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 different placement methods, how to use auto-flow to avoid having to explicitly place every item, and why sometimes grid items might not be placed where you expect them to be.

    Read more

  • 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 and Firefox have versions of their browsers where they launch experimental or non-standardised features – Chrome Canary and Firefox Nightly respectively. This allows for experimentation and getting feedback before rolling out full support. From time to time, you may need to enable experimental features yourself. This article will show you how to do that in Chrome and Firefox.

    Read more

  • 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 Grid. If you’re new to CSS Grid, or haven’t had the chance to play around with it too much yet, this could be a good introduction. I start of with some basic usage and progressively get onto more complex examples, explaining different placement methods, and using the minmax() function to craft flexible layouts.

    Read more

  • 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 didn’t disappoint. In fact, I’d go so far as to say it might be the best one yet.

    Read more

  • 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 Keith, Christian Heilmann, Ruth John and Charlie Owen.

    Read more

  • 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-dominated. While I don’t have a magic bullet, I have my own experience of seeking employment in the tech industry, and consequently I have a few opinions on what companies could be doing better in order to attract more diverse applicants. As in so many cases, making something better for a minority of people also has the bonus effect of making it better for everyone. So there’s really no excuse not to be proactive on this.

    Read more

  • 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 enable the feature by going to about:config in the browser, then searching for subgrid. Toggle layout.css.grid-template-subgrid-value.enabled and subgrid to true.

    Read more

  • 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. Or sometimes you might be working on a feature and you’re not ready to commit your changes yet, when someone asks you to fix an urgent bug and you need to jump onto another branch. This is where Git’s stash command comes in useful.

    Read more

  • Debugging CSS Grid

    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 vastly simplify the process of building responsive layouts. But there are one or two unexpected behaviours you may run into if you don’t understand how they work. This article will aim to demystify these.

    Read more

  • Debugging CSS Grid

    Part 1: Understanding Implicit Tracks

    This post was edited on to better describe item placement in the example of overlapping grid items.

    Read more

  • 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 be a better case for using flexbox is when you want to control the behaviour of any leftover grid items that don’t fill an entire row.

    Read more

  • 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 up, or maybe your commit message was insufficiently descriptive. Either way, bad commit messages are no good to anyone – you never know when you might need to check out a commit, and hunting through past commits for an elusive chunk of code can be a nightmare. Your future self won’t thank you for it!

    Read more

  • Published on LogRocket

    How to Create Better Themes with CSS Variables

    Published on LogRocket

    Read it on LogRocket

  • Building a Dependency-free Site in 2019

    After several years of basically ignoring it, I decided recently that it was time for a refresh of my personal site. The previous iteration used a combination of Gulp and Bower, coupled with Susy, a Sass library for the grid system (version 2, rather than the latest version 3 release). The last time I did any work on it was around 2015 and, suffice to say, my tools were pretty out-of-date. This just wasn’t going to cut it in 2019.

    Read more

  • 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 recently if I had any advice for convincing a skeptical team to adopt CSS Grid into their workflow. Although I haven’t faced any major barriers on this front myself, it’s a story I hear all too often. You’re ready to dive in and work with the latest modern layout techniques, only for the higher powers to put the brakes on.

    Read more

  • 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 confidence in myself as a developer, and if you’re on the fence about it, to encourage you to give it a try!

    Read more

  • 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:

    Read more

  • 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 to tackling layout on the web. But there are a few of my CSS layout needs that Grid hasn’t quite managed to fulfill just yet – here’s hoping some of these get implemented down the road!

    Read more

  • 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 framework, which provides a bunch of classes you can apply to your projects to rapidly build a UI.

    Read more

  • Animating CSS Grid

    Soooo, Jen Simmons just dropped a surprise bombshell on Twitter – CSS Grid grid-template-columns and grid-template-rows properties are now animatable in Firefox Nightly! Naturally I had to jump in and have a go right away!

    Read more

  • 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 using CSS Grid to build a variety of component layouts, and the layouts I built for that site have become the subject of some of my talks and articles.

    Read more

  • 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 hopes and goals for the year ahead. I wasn’t going to do one of these, but reading all the others got me feeling inspired, so here we are!

    Read more

  • Published on CSS-Tricks

    Reversing an Easing Curve

    Published on CSS Tricks

    Read it 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.

    Read more

  • 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 some really interesting sessions on topics ranging from developing with components (Jack Franklin), to using data as a creative material (Mike Brondbjerg), to machine learning (Simona Cotin). But one talk really stood out for me, as it’s a subject that’s close to my heart, and that’s Tara Ojo’s talk on mentoring junior developers.

    Read more

  • 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 thought, as I never felt like I needed to before.

    Read more

  • 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 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 Marko’s post and reflect on the undeniable influence of many of these leading figures, it was impossibly to notice the distinct absence of women from the original list. In fact, only one woman (Donna Driscoll) gets a mention, and in Marko’s article she is only referred to with a footnote in her ex-husband’s entry:

    Read more

  • 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 another, e.g “If column 1 ends at line x, make column 2 start at line x + n”. There isn’t exactly a way of doing this natively with Grid, you would need to explicitly position the items in this case. But it occurred to me that this could be a use case for CSS variables, or custom properties.

    Read more

  • Notes from State of the Browser

    I recently had the pleasure of speaking at State of the Browser, a community-run web conference in London. I gave my first technical talk on a large stage, speaking about CSS Grid and CSS Variables – some of which I’ve covered in my blog posts over the past few months. My slides can be found here.

    Read more

  • Published on CSS-Tricks

    Super-powered Grid Components with CSS Custom Properties

    Published on CSS Tricks

    Read it on CSS-Tricks

  • Published on Originally published on Codepen

    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. (Here’s one example by Mandy Michael)

    Read it on Originally published on Codepen

  • Published on Originally published on ournameismud.co.uk

    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 with them. In this post I’m going to tell you about my experience of building a PWA with Gatsby, a static site generator.​

    Read it on Originally published on ournameismud.co.uk

  • 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 friend of mine!) Ruth John. Ruth gave a amazing talk on Web Workers and Worklets – complete with lemmings and lots of demos, which made me excited to learn more about CSS Houdini and the CSS Paint API.

    Read more

  • Published on Originally published on ournameismud.co.uk

    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, PWAs have all the advantages of the web when it comes to user engagement, coupled with the speed and reliability users can expect from a native app.

    Read it on Originally published on ournameismud.co.uk

  • 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:

    Read more

  • 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 love.

    Read more

  • Published on Originally published on Codepen

    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 strategy for integrating them into my workflow.

    Read it on Originally published on Codepen

  • 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 languages like Handlebars or Mustache, Gatsby uses React, helping contribute to its “blazing fast” claim.

    Read more

  • Published on Originally published on Codepen

    Aspect Ratio Cells with CSS Grid Layout

    I found myself recently building a layout in CSS Grid that would have previously needed JavaScript in order to work. It’s a layout based on equal sized square grid cells, where grid items could span one or two cells on the row and/or column axis. In other words, the grid cells needed to maintain an aspect ratio (1:1 in this case), but the actual grid items did not necessarily, something like this:

    Read it on Originally published on Codepen

  • Published on Originally published on Codepen

    CSS Grid: More Flexibility with Minmax()

    One of the things that can put people off trying out CSS Grid is there’s so much choice when it comes to defining your grid layout and placing your content, so it can be hard to know until you’ve been using it a while which is going to to be the best option for a particular layout. It’s only recently that I got around to fully appreciating the power of minmax() and how it can be such a huge helper when coding many of the layouts I’m required to build, so I’d like to share one way in which it’s been beneficial to me.

    Read it on Originally published on Codepen

  • Published on Originally published on Codepen

    Using Pseudo-elements with CSS Grid

    This week I’ve had a couple of scenarios where I’ve needed to build a hero section with a full-width image, a large heading and a translucent sidebar overlaying the image – where the sidebar bleeds to the edge of the viewport but (crucially) the content of the sidebar aligns to what I like to call the “wrapper” grid columns – i.e. the columns of the grid where we actually want to place our content. (I have a whole other post almost written on this!)

    Read it on Originally published on Codepen

  • Published on Originally published on Codepen

    Super-powered layouts with CSS Variables + CSS Grid

    We’ve been using CSS Grid in production at Mud for a few months now and I absolutely love the flexibility it’s giving me when coding layout. For so long we've got along without a true layout solution for the web - hacking it with floats and flexbox was just how we did things. But now, I honestly cannot imagine life without Grid!

    Read it on Originally published on Codepen

  • Published on Originally published on ournameismud.co.uk

    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, and where you fit in the pecking order! My first two weeks as a Junior Front-end Developer at Mud have been fun, interesting and very challenging at times. So I thought I’d share some of my observations, as well as lessons learnt from some of the previous teams I’ve been involved with.

    Read it on Originally published on ournameismud.co.uk