I’m pretty proud that I managed to keep my iPhone 8 going for over five years (with one battery replacement in that time). But recently it’s been increasingly unreliable, switching itself off at random times, and spontaneously draining the battery after doing anything remotely taxing. This combined with the fact that software updates are no longer available for this model led me to the conclusion that buying a new phone was probably a good idea at this point.
Read more
Baldur Bjarnason shared an article in a recent edition of his newsletter about AI in education. As a parent of an 8-year-old, this is something that’s been on my mind a lot recently. Like most other parents I’ve encountered, I find the idea that teachers can be “replaced” by AI so preposterous that I’d imagine no one who’s ever had a child, met a child, or even been a child would take it seriously. Apparently though, there are some for whom the idea of taking an immeasurably complex, still-forming, constantly changing human brain, understanding, caring for and nurturing it, and imbuing it with the wisdom of the universe in a way that inspires excitement, passion and curiosity are the kind of tasks that should be done by a computer. Go figure.
Read more
The Green Web Foundation have published a thorough and insightful report into the sustainability of AI, and the results are pretty damning. Over the couple of years I’ve been talking about web sustainability I haven’t really touched upon AI a whole lot, partly as there wasn’t a lot of publicly available hard data about its environmental impact. Now, however, it’s become an issue that’s too big to ignore. We can’t not talk about it.
Read more
When writing blog posts in Markdown files I often find myself needing to add HTML elements that aren’t accounted for in Markdown. Some common ones are <aside> elements, where I include content tangentially related to the post itself, or external references.
Read more
True to form, Heydon Pickering has written another blistering account of one of the most ubiquitous HTML elements, the <blockquote>. You’ve probably used a <blockquote> when writing HTML. I know I’ve used literally hundreds of them. What I didn’t know is that I’ve been using them wrong all these years.
Read more
Last week I attended Green IO, a conference in London all about sustainability in digital technology, organised by Gaël Duez (who also hosts the Green IO podcast). It was a fantastic conference, and amazing to see so many people who are passionate about this stuff all in one room!
Read more
I came across a post from Elad Shechter lamenting not being able to use logical properties in media queries. As he correctly notes, the following won’t work:
Read more
If you’re a regular user of CSS (and hey, if you’re reading this you probably are) you should definitely complete the State of CSS survey, an annual survey of CSS features. Registering your opinion of CSS features, frameworks, tools and resources is helpful to the CSS world as it helps browsers and working groups figure out what to prioritise. If enough people shout loudly enough about a particular feature then it increases the chance that we’ll get to be able to use that feature a bit sooner.
Read more
In this article for Andy Bell’s blog Piccalilli, we explore something I’ve been consumed with styling a lot recently: data tables. Not to be confused with using tables for layout (as in the bad old days of CSS), HTML tables are vital for displaying tabular data (data with row and column relationships) accessibly. They come with a few quirks, however, and some less-familiar CSS properties that are handy for styling.
Read it on Piccalilli
Hearing you’re doing a good job matters. Like anyone, there have been plenty of times when I’ve felt disinvested from a job, when I’ve lacked motivation or felt disconnected. There are lots of reasons why those feelings can arise in anyone, but one that triggers them often is a lack of feedback.
Read more
I recently gave a CSS layout talk at Pixel Pioneers conference in my (sort of) home city of Bristol. I’ve spoken about CSS layout quite a bit over the years, but I feel like there’s always a lot to talk about, as things are changing all the time!
Read more
Anchor positioning in CSS enables us to position an element relative to an anchor element anywhere on the page. Prior to this we could only position an element relative to its closest positioned ancestor, which sometimes meant doing some HTML and CSS gymnastics or, more often than not, resorting to Javascript for positioning elements like tooltips or nested submenus.
Read more
My son gets a weekly magazine delivered to our home. It’s full of his favourite comic strips by fantastic authors and artists, he gets the pleasure of receiving something in the post just for him, and (even better) it doesn’t come with a load of plastic tat like you get with magazines in the supermarket. It’s not packed full of ads either, apart from a few for the comic book company’s workshops and merchandise, which I consider a small trade-off. Wouldn’t it be awesome to get a magazine full of articles by your favourite bloggers every week? Anyway, that’s kind of what RSS is like.
Read more
Greys. Who doesn’t love ’em? When it comes to building websites, it can be handy having a few shades of grey at your disposal, no matter your colour palette. We use them for borders and subtle dividers, shadows, and to indicate state changes without overwhelming the user with colour. Some designers feel that a website needs quite a few shades of grey in order to convey subtleties. I once worked on a project that literally had 50 shades of grey.
Read more
There’s something special about starting a new web or software project. Like a blank canvas, it has so much potential. Surely this is where we’re about to do our best work...
Read it on Branch
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
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
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
A post from Remy on Mastodon recently got me thinking:
Read more
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
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
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
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
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
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
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
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
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
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
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
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
Read more
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
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
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
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
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
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
Following yesterday’s post on handling null, undefined and zero values in JS, I was asked on Mastodon:
Read more
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
As is tradition, it’s time to do a little round-up of the past year!
Read more
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
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
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
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
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
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
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
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
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
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
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
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
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
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
This article was updated on 28 July 2022 to include the section covering older browsers.
Read more
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
An interesting notification from @cyishere popped up in my Twitter feed the other day:
Read more
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
This article was updated on 15 March 2021.
Read more
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
This article was updated on 13 August 2020 to include additional reference material.
Read more
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
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
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
Have you ever needed to build a UI where a caption needs to slide over an image on hover, revealing more content?
Read more
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
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
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
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
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
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
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
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
Jen Simmons raised an interesting proposal for the CSS Working Group this week:
Read more
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 (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
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
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
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
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 24Ways
Read it on 24 Ways
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
I recently needed to build a design for a contact list that looks like this:
Read more
A Modern Front End Workflow
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
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
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
An article on new and upcoming CSS features for Web Designer magazine.
Read it on Creative Bloq
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
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
An interview for Net magazine
Read it on Creative Bloq
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
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
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
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
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
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
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
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
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
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
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
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
This post was edited on to better describe item placement in the example of overlapping grid items.
Read more
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
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
Read it on LogRocket
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
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
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
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
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
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
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
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
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
Read it on CSS-Tricks
In this article we’ll explore how to use SVG filters for advanced colour manipulation on images.
Read more
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
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
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
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
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
Read it on CSS-Tricks
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
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
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
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
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
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
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
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
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
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
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
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
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