Writing code can be repetitive, and many developers (myself included) opt to make our lives easier by configuring our code editor of choice to auto-complete common statements in the given coding language. My own preferred editor, VS Code, includes Intellisense out of the box, which provides common code snippets for auto-completion as you type. Pressing Enter or Tab inserts them into your code. Perhaps you need something more custom? There are many extensions in the VS Code Marketplace that provide snippets in a variety of languages. Personally, I use Sarah Drasner’s Vue VS Code Snippets extens ..read more

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 visually, which usually manifest as a utility class that gets copied and pasted into every project, often call ..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. If you’re a developer, naturally there’s a bunch of stuff you need to install to get your environment perfectly right for coding. The followin ..read more

Temperature anomaly data from the Global Warming and Climate Change API, visualised with D3 There are many different ways of using colour informatively when it comes to data visualization. But we also need to ensure our use of colour conveys the right information, and that it is 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. Is colour the best option ..read more

I often use the WebAIM colour contrast checker to check my colours against WCAG (Web Content Accessibility Guidelines) standards while building websites. Recently I noticed a handy feature in Firefox dev tools to make checking for sufficient colour contrast really easy. If you inspect an element’s CSS in the dev tools inspector you’ll notice any colours are accompanied by a little colour swatch. Clicking on this brings up a colour picker — handy for trying out different colour options in the browser. For the color property, this colour picker also shows the contrast ratio of the text colour c ..read more

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. Interop 2023 has just been announced, expanding to 26 focus areas. Some exciting CSS features include the :has() pseudo-class, which is already supported in some browsers, as well as Level 4 media queries, math functions, and fo ..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. Why This site (the one you’re reading right now) is a static site built with Eleventy. That means there’s no server building the pages on demand. Instead, every time I write a blog post in markdown and commit the file to the Github repository, the site is re-built — with Eleventy generating a static HTML page from my markdown file — and deployed on Netlify’s servers. Pretty cool, right? In order to set up automated deployments you need to link your Github repository t ..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 }! Design improvements I felt like the previous UI was becoming a bit muddled as I added new features on an ad-hoc basis, without sitting down and committing to a plan. Also, I was just sick of looking at it! So this design is a bit more stripped back visually, without to many unnecessary flourishes, while still keeping some nice little touches, like animated underlines on hover. Other improvements include a better m ..read more

Do you find yourself needing to switch between development environments frequently? That's often the case for me. I work on a web app for wind turbine operators, and I regularly need to test my front end code with different databases. My colleague recently alerted me to .ENV Switcher, a VS Code extension that makes switching between different environments simple. Once installed, you need to create your different .env files (such as dev.env, release.env). Then you bring up a list of .env files to select from by clicking on a small button at the bottom of the window, and instantly switch to the ..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 t ..read more