This month marks five years since the first deployment of component.gallery , so I thought I’d give an update on the numbers so far and my plans for the site. The Component Gallery started as a hobby project: an opportunity to learn new tech and something to talk about in job interviews. It was launched with zero fanfare and apart from some ‘dogfooding’ [1] by me and a couple of colleagues, it was…
When you’re looking to use someone else’s code in a web project, how do you decide between the alternatives? You might look at some key numbers: When was it last updated? How many people are using it? How many open GitHub issues does it have? How many other people using it? To answer these questions you can use the figures for ‘Weekly Downloads’, ‘Last publish’, ‘Issues’, and ‘Dependents’ (the…
In my previous post , I wrote about system fonts and their advantages over web fonts. I encouraged a ‘system fonts first’ approach, arguing that, compared to system fonts, web fonts (a) can negatively impact performance, (b) use more data, and (c) increase your site’s energy consumption. But a web without web fonts would be a far less interesting one — maybe by using web fonts a little more…
A few weeks ago I discovered this article in the Typewolf newsletter about the new website from design studio, Formafantasma : The Formfantasma website Instead of the latest quirky sans-serif, Formafantasma have gone with two of the most ubiquitous typefaces around: Arial and Times New Roman . Whenever I see Arial or Times New Roman in use, I’ll assume that no conscious thought at all has been put…
If I asked you to compile two lists: one containing examples of good documentation and another with examples of bad documentation, I suspect the second list would be longer. I think this is because writing good documentation is hard and documentation can be bad for plenty of reasons: maybe it’s incomplete or out-of-date, or just maybe it uses unnecessary adverbs . An adverb is a word that…
Out of the box, Eleventy gives you a choice of ten different templating languages. Two of these: Nunjucks and Liquid bear more than a passing resemblance to Twig , the templating language used by Craft CMS . When I was migrating this site from Craft to Eleventy, I tried liquid but eventually settled on Nunjucks, simply because it seems to be more popular in the Eleventy community. However, I…
Identifying (and fixing) accessibility issues is an essential part of any front end developer’s skillset, but it can sometimes be difficult to pick out the useful tools and techniques from the not so useful ones. There are also plenty of misconceptions out there, so I thought I’d make a post covering the tools and techniques that I use when testing web accessibility. To get the most from this…
I was looking at Google’s new Eleventy starter, eleventy-high-performance-blog , the other day, when one specific feature jumped out at me: Supports locally serving Google Analytics's JS and proxying it's hit requests to a Netlify proxy (other proxies could be easily added). As someone who is all too familiar with the flaws in Google Analytics — it’s something I’ve written about before — this…
Since its launch in 2005, Google Analytics (GA) has become so widely used that it now appears on 86% of the top 100,000 websites in the United States [1] . How did it become so popular? For two main reasons: its convenience and its cost. Once you’ve signed up (for free), you can install it by pasting a script tag and four lines of JavaScript into your site’s HTML . You now have the power to track…
In my post about why I chose Eleventy over Gatsby when building my new website, I used a statistic from the WebAIM million survey that homepages using React had 5.7% more accessibility errors than the average page. At the time of writing that post, WebAIM hadn’t published the results for Gatsby because its usage share fell under the 0.5% threshold for reporting. I pointed to the value from React…
At the beginning of this year, I decided it was finally time to port my website from a PHP -based CMS [1] to a JavaScript-based Static Site Generator ( SSG ). This was for a few reasons: After starting out as a ‘full-stack’ developer, I now work solely on the front end: If I need to write custom functionality, I don’t want to write it in PHP when I could be writing it in JavaScript. I don't need…