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. I … | Continue reading
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. Gradien … | Continue reading
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 con … | Continue reading
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 scr … | Continue reading
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 meaningful work, trying to square my own work as a web developer with my personal values and the impact I want to have on the world. It … | Continue reading
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 sust … | Continue reading
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. I’ve just recently implemented custom styling for external links withi … | Continue reading
A member of the Sustainable Web Design Community Group recently highlighted some sustainability issues with the COP28 website that warrant a closer look. The COP28 website The COP28 climate summit, due to take place in the United Arab Emirates this year is somewhat controversi … | Continue reading
The Sustainable Web Design Community Group has just launched a draft set of guidelines for designing and developing sustainable web applications. Covering design, UX, front and back end development, and business strategies, these guidelines have been months in the making, with co … | Continue reading
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 somewhere else in our code. Perhaps we need a button to respond to a 'click' event, or maybe we need to update the DOM in response to new … | Continue reading
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. Parcel I hate hav … | Continue reading
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. The linear() function in CSS is a new easing function that gives us more control over crafting our ani … | Continue reading
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, a … | Continue reading
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 ti … | Continue reading
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! My own talk was on … | Continue reading
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 tho … | Continue reading
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 s … | Continue reading
WebPageTest is a great tool for measuring your website’s performance, providing detailed metrics and actionable advice. They’ve just released a brand new add-on, Carbon Capture, which measures the CO2 emissions generated by a website. It includes detailed breakdowns on which reso … | Continue reading
There are lots of areas where better web performance and reducing carbon emissions overlap: faster websites are often less carbon-intensive ones. They transfer less data, cache efficiently, and make fewer requests, all of which reduce energy consumption. I’ve been consolidating a … | Continue reading
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! Although I haven’t had much time for blogging, it has … | Continue reading
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. My own preferred editor, VS Code, includes Intellisense out of the box, whi … | Continue reading
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 still have that text available to assistive technologies (such as screenreaders). Icon buttons and skip links are just two examples … | Continue reading
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 i … | Continue reading
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. Una’s post on web.dev includes a rundown of how to use container queries, as well as some … | Continue reading
Temperature anomaly data from the Global Warming and Climate Change API, visualised with 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 … | Continue reading
I often use the WebAIM colour contrast checker to check my colours against WCAG (Web Content Accessibility Guidelines) standards while building websites. Recently I noticed a handy feature in Firefox dev tools to make checking for sufficient colour contrast really easy. If you … | Continue reading
Last year, Interop 2022, a collaborative cross-browser initiative, was hugely successful in getting 15 key features implemented interoperably. As developers, we can enjoy the fruits of this collaboration, with features like container queries, cascade layers and dynamic viewport u … | Continue reading
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 you’re reading right now) is a static site built with Eleventy. That means there’s no server building the pages on demand. Instea … | Continue reading
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 }! Design improvements I felt like the previous UI was becoming a bit muddled as I added new feature … | Continue reading
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 operators, and I regularly need to test my front end code with different databases. My colleague recently alerted me to .ENV Swit … | Continue reading
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 withi … | Continue reading
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 Mode, a data science and AI company working in the renewable energy sector. It’s been a great year for the company, as we’ve taken … | Continue reading
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 pie … | Continue reading
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 c … | Continue reading
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. The reasons for leaving Twitter behind are many, and (hopefully) obvious. Twitter was never without its problems, but the conseque … | Continue reading
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) limi … | Continue reading
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. n:point n:point provides lightweight, publicly accessible A … | Continue reading
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 … | Continue reading
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 … | Continue reading
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 … | Continue reading
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 differe … | Continue reading
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 tech … | Continue reading
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. For any element of live coding, I like to meticulously prepare my demos to prevent any moments of friction on the day. I want … | Continue reading
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 animators Jhey and Amit on separate occasions, and it’s such a neat little trick that it’s worth recording here! Let’s say we have a … | Continue reading
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 … | Continue reading
Something I like about logical properties is the ability to set margins or padding on just a single axis on an element, while leaving the other alone. Say we have an element on which we’ve set some padding using the padding shorthand: /* This gives us 1rem padding all the way aro … | Continue reading
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, th … | Continue reading
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 Suppose you have a page of content, all neatly constrained within a central wrapper. Probably using some kind of utility class, like … | Continue reading