For many projects I work on it’s useful to define all of our brand colours in a JavaScript file, particularly as I work on a lot of data visualisations that use them. Here’s an abridged example of how I define brand colours, as well as those used for data visualisations, and their variants:| CSS { In Real Life } | Creating CSS Theme Variables from a JS file
Earlier this year the BBC published a report on digital sustainability, Does what you scroll burn coal? Mythbusting energy consumption on the web. The report seeks to address some of the ways our online activities consume energy but interestingly, is quite critical of some of the web sustainability guidelines that have been developed and published by the community.| CSS { In Real Life } | Wholegrain Digital’s Response to the BBC’s Web Sus...
A recently published post by the science fiction writer Robin Sloan (Is It Okay?, published 11th February 2024) ignited some examination and debate among my little corner of the web. The post asks the question of whether it’s ethical, from an individual moral standpoint to use an LLM (Large Language Model, such as Claude or GPT-4). Robin raises some important points about the trade-offs that come with LLMs, depending on their application.| CSS In Real Life
Recently I had the experience of migrating a Vue web app to a new state management library, Pinia, which was interesting from both a technical and non-technical point of view. In this article for Piccalilli I’ll share my thoughts and findings on when, why and how you might consider carrying out such a major technical migration, applicable to any large web project, and some tips and advice on migrating from Vuex to Pinia specifically.| CSS In Real Life
Recently I’ve been working with map data to create interactive visualisations. When working with maps it’s common to receive data as GeoJSON, a JSON format for encoding geographic features, which specifies the type of geometry and co-ordinates for the features we want to display on a map. Javascript mapping libraries such as Mapbox GL are designed to consume GeoJSON to render features on a canvas. I’m fairly accustomed to using GeoJSON in this way — for example, rendering geographic a...| CSS In Real Life
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.| CSS In Real Life
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 compl...| CSS In Real Life
Ahmad Shadeed has published a great article digging into the proposed CSS masonry layout syntax. In case you’re unaware, the term “masonry” for layout is used to describe the kind of grid layout where instead of items of various heights being aligned in neat horizontal rows, they are shifted to fill the leftover space, effectively creating a brickwork effect. It was popularised by the website Pinterest some years ago, and became a widespread UI design trend for a while.| CSS In Real Life
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.| CSS In Real Life
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.| CSS In Real Life
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.| CSS In Real Life
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!| CSS In Real Life
It’s been a little while since I’ve played around with making creative stuff with CSS just for fun. My trip to State of the Browser conference at the weekend reminded me why I love the web and the creative community around it. If you haven’t already, you should check out Hidde’s summary of the conference. Every talk was absolutely top quality (and some were downright jaw-dropping — Katie Fenn’s live Daft Punk performance in particular!).| CSS In Real Life
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:| CSS In Real Life
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 ...| CSS In Real Life
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.| CSS In Real Life
If anybody needs some free advice on how to build websites, Sara Joy has got it absolutely nailed. (With supporting voiceover from Keenan, and an accompanying video from Robb Knight.)| CSS In Real Life
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.| CSS In Real Life
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!| CSS In Real Life
Here’s a new demo where we’re positioning article references for a body of text relative to two different anchors for the block and inline axes. Each reference is positioned so that it aligns vertically with the position it’s referred to in the text, but appears adjacent to the main content wrapper on the horizontal axis.| CSS In Real Life
The CSS Anchor Positioning specification enables us to position elements relative to an anchor, wherever they are in our web page. As I wrote recently, one thing that particularly excites me is being able to combine anchor positioning with the Popover API to show and hide elements.| CSS In Real Life
View from the top of Mount Snowdon (Y Wyddfa) in Eryri National ParkThis week I climbed a mountain. There are some things that make me care not one tiny bit about web development, and being on top of a mountain is one of them. The web helped me with this adventure, though.| CSS In Real Life
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.| CSS In Real Life
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 maga...| CSS In Real Life
I’m sure I’m not alone in noticing the recent proliferation of articles lamenting the impending (or, indeed, already happening) destruction of the web as we know it, due in large part to the influx of AI-generated content. For the most part, I share their pessimism. It’s hard not to see the devaluation of human content as anything but a negative.| CSS In Real Life
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.| CSS In Real Life
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...| CSS In Real Life
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 m...| CSS In Real Life
When you get an invite from Chris and Dave to appear on ShopTalk Show it’s hard to say no! Despite my longstanding fear of sounding like an idiot on the airwaves, I swallowed my nerves and joined them for an episode on web sustaibaility — althought we managed to delve into a few other topics too. Naturally, right afterwards I thought of a whole bunch of things I forgot to mention (hopefully I’ll get around to writing one or two follow-up blog posts!), but I was pleased to get the chance...| CSS In Real Life
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?| CSS In Real Life
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.| CSS In Real Life
A post from Remy on Mastodon recently got me thinking:| CSS In Real Life
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.| CSS In Real Life
The Green Web Foundation has recently redesigned their green web hosting directory. Previously the directory was a useful resource for finding hosting platforms that at least claim some sustainable credentials but, as I’ve noted before the information provided by each web host was somewhat limited. From the directory alone it was impossible to discern which providers could claim to be running on renewable energy rather than buying carbon offsets, for instance, or which providers were doing ...| CSS In Real Life
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 star...| CSS In Real Life
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 ex...| CSS In Real Life
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!| CSS In Real Life
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 ...| CSS In Real Life
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 co...| CSS In Real Life
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.| CSS In Real Life
Melinda Seckington has just launched a brand new blog series, Beyond the Spotlight, where she’ll be talking to conference speakers about their talk process, preparation and delivery. Melinda is an accomplished speaker , writer and engineering manager, so I was honoured to be the first speaker interviewed.| CSS In Real Life
I’ve been speaking about web sustainability a bit recently, and a question that comes up fairly frequently is about the impact of audio and video streaming. Catherine Van Loo from Carnerstone consultancy is part of the team working on DIMPACT — a collaborative initiative between researchers and digital media companies with the aim of quantifying and reducing carbon emissions from digital content. She recently gave an illuminating talk at Green Tech South West on the subject.| CSS In Real Life
Yesterday I spoke at Smashing Meets Goes Green, an online meetup themed around building a more sustainable web. In my talk I spoke a little about tools for measuring your website’s carbon emissions, and how it would be great if these metrics could be integrated with commonly-used developer tools for monitoring performance. As I also mentioned, it’s really hard to land on 100% accurate figures for this stuff, as there are so many variables.| CSS In Real Life
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!| CSS In Real Life
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?| CSS In Real Life
A tiny tip today, but a good one: use the :empty pseudo-class to hide pesky empty elements (commonly found in user-generated content).| CSS In Real Life
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)?| CSS In Real Life
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.| CSS In Real Life
A recent post by Melinda Seckington, The Myth of not Having Anything To Talk About really resonated with me. I’ve been doing talks about CSS for a few years now, and for a while before that I was an organiser of web conferences, so I’ve seen a fair few talks. I can definitely say that some of the best talks I’ve seen are not necessarily by the people with the most expertise in a given subject, but by people who share their story, their perspective — whether it’s on a particular tech...| CSS In Real Life
When you scroll rapidly to the top or bottom of a webpage you might notice a “bounce” effect, where the browser momentarily allows you to scroll beyond the uppermost or lowermost point, before bouncing you to correct position.| CSS In Real Life
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.| CSS In Real Life
Here’s a cool thing I made.| CSS In Real Life
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?| CSS In Real Life
I’ve been playing around with scroll-driven animations a bit lately. Scroll timelines allow us to link the progress of element’s animation to the progress of a scroll container, as I wrote about not long ago for MDN.| CSS In Real Life
Reality Check is a new article series from Set Studio that focuses on CSS layout with real-world case studies. Each issue takes a design from Dribbble (or a similar platform) and demonstrates how to code it in CSS in a way that plays to the strengths of the medium, rather than aiming for pixel-perfect recreations. As Andy says in the first article:| CSS In Real Life
Today’s post is a quick one, but (hopefully!) a fun one! It’s a demo featuring a fun text effect, using background-clip: text and text-stroke. It’s not a new technique, but worth remembering.| CSS In Real Life
If you live in the UK like I do, you can’t escape the fact that it’s been a wet few months. Since today had been yet another rainy day, I was inspired to see if I could create a rainy background with CSS.| CSS In Real Life
This post on the role of a UX Engineer by Donnie D’Amato was published almost a year ago, but has cropped up in my feed today. UX engineering is something I identify strongly with, as I suspect do many of my friends on the front-of-the-front end. Like Donnie, I’m from a design background, but cared a lot about how things were built, as well as how they looked and the function they performed for the user. I gradually made the transition to a more technical role over time, by dappling in fr...| CSS In Real Life
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.| CSS In Real Life
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.| CSS In Real Life
I’m a big fan of lists. I like to think of myself as a fairly organised person. I make lists for a lot of stuff, at work and home, and get a little kick out of crossing things off. Yes, I’m one of those people who add tasks to a list post-completion, just for the pleasure of seeing it crossed off. This sounds completely pointless, but it’s actually a good motivator! I’m more motivated to tackle the rest of the list if I already have the sense of achievement that comes from already-com...| CSS In Real Life
I’ve been playing around with layering radial gradients in CSS to create flower shapes, with the help of CSS trigonometric functions. For a primer on what trigonometric functions are, and why they’re useful in our code, I’ve written a three-part series for Codrops.| CSS In Real Life
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.| CSS In Real Life
Last week I had the pleasure of attending FF Conf in Brighton. I was partly inspired to go to the conference after watching a talk from last year’s event: Programming With Yarn by Lily Madar.| CSS In Real Life
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.| CSS In Real Life
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.| CSS In Real Life
Following yesterday’s post on handling null, undefined and zero values in JS, I was asked on Mastodon:| CSS In Real Life
In JS, it’s easy to get caught out when determining if a variable is null, undefined, or has a value of zero. I do a lot of data visualisation, and quite often I’ll need to filter out null values from an array of data.| CSS In Real Life
I don’t see people using the gap property for flexbox out in the wild all that often, but it’s pretty cool!| CSS In Real Life
It’s been a year since Twitter (X) went down the pan, and I finally got around to removing the Twitter link from this site. I haven’t visited the platform in months, except periodically, guiltily checking that I haven’t missed an important DM. I never post there, and the occasional fleeting glimpse of my feed is enough to convince me I’m not missing much.| CSS In Real Life
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!| CSS In Real Life
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.| CSS In Real Life
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.| CSS In Real Life
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.| CSS In Real Life
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.| CSS In Real Life
Spread from the wonderful ‘Cat Kid Comic Club: On Purpose’, written and illustrated by Dav PilkeyThis 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.| CSS In Real Life
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.| CSS In Real Life
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.| CSS In Real Life
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.| CSS In Real Life
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 contributions from experts and breakout groups from across the industry.| CSS In Real Life
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 data. The Vue docs have a great explanation of reactivity.| CSS In Real Life
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.| CSS In Real Life
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.| CSS In Real Life
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.| CSS In Real Life
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.| CSS In Real Life
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!| CSS In Real Life
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.| CSS In Real Life
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 develo...| CSS In Real Life
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 resources have the greatest carbon impact, as well as quantifying the total emissions. Read all about it in this blog post by Scott Jehl at WebPageTest.| CSS In Real Life
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.| CSS In Real Life
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!| CSS In Real Life
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.| CSS In Real Life
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. (There are plenty more.) Simply using display: none hides text from assistive technologies, which is not useful to us in this scenario. So developers over the years have come up with clever ways to hide text vis...| CSS In Real Life
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.| CSS In Real Life
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.| CSS In Real Life
Temperature anomaly data from the Global Warming and Climate Change API, visualised with D3There 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 wi...| CSS In Real Life
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.| CSS In Real Life
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 units going from little or no browser support to almost full support in the space of a year.| CSS In Real Life
In this article we’ll walk through how to use Github Actions to automate regular deployment of a static site hosted on Netlify.| CSS In Real Life
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 }!| CSS In Real Life