Focus outlines (and their styling) have frequently been a point of contention between aesthetics and usability. On the one hand, focus outlines are incredibly important for navigation, particularly by users navigating via keyboard or other non-pointer devices. On the other hand, … | Continue reading
Over 5 years ago, I migrated this blog From Jekyll to Ghost. Back then, my reasons for moving to Ghost where because - I wanted a CMS Managing all the posts’ raw markdown files in one folder was getting clunky The Jekyll build process was starting to significantly lag I no longe … | Continue reading
I’ve recently been making some improvements to the search page of this blog, and wanted to implement a feature where the search term was highlighted everywhere it appeared in the results. Although libraries for this exist, I wanted to try to implement it myself as it seemed li … | Continue reading
I recently gave a talk on “Making Sense of Performance Metrics” at the Web Unleashed Conference, and it was suggested that I turn the breakdown of all the performance metrics into a cheatsheet; so here it is! The full cheatsheet, including a downloadable PDF version, are at the b … | Continue reading
One thing that I’ve been really into lately has been ENS names. As someone who’s already obsessed with buying domain names, ENS names have been an even greater obsession (mostly because of emoji names, like ✊🏾✊🏾✊🏾.eth)! So what are ENS names, exactly? And … | Continue reading
A couple of weeks ago, I wrote an article on what exactly the DOM is. To recap, the Document Object Model is a representation of an HTML document. It is used by browsers to determine what to render on the page, and by Javascript programs to modify the content, structure, | Continue reading
When HTML is written incorrectly, nothing much happens. Because of this, it's easy to have invalid, unsemantic, or unaccessible bits in markup without it being obvious. There are many ways we can lint our HTML to discover and fix these issues, for example using the W3C Markup Va … | Continue reading
CDS in 2020 was a bit different, like everything else. It was online, and the talks were more bite-sized at roughly 10 minutes each. I really enjoyed this new style of the summit and, while I missed the in-person aspects of the conference, this was a great way to end | Continue reading
A couple weeks ago I started working on my first React application. Not only was it my first React application, but it was also my first React Native application, so a lot was new to me all in one go. Coming from the Angular (and Ionic) world, it felt like | Continue reading
I've recently been going down a rabbit hole of making improvements to my CanIUse embed. To give a bit of a background, it is an interactive embed I created to easily embed data from caniuse.com in my blog posts and anywhere else. I previously wrote about how I first | Continue reading
I’ve been going to Chrome Dev Summit for a couple of years now (2016 & 2018) and I always like to do this roundup article, highlighting what I thought were the most interesting ideas and projects from the conference. So let’s get into it! HTML is (finally) getting | Continue reading
I recently gave a talk at JAMstack_conf San Francisco about how I used headless chrome (via Puppeteer) and Cloudinary to capture screenshots of my interactive caniuse embed. I did this to have a fallback image to use in case the embed couldn’t be loaded, for example in cases | Continue reading
I’ve recently been doing Udacity’s Blockchain Developer Nanodegree, and the gotcha that has caused me the most wasted hours is the difference between calling a method in my smart contract using the call() vs send() web3.js methods. Using web3.js to call smart contract functions … | Continue reading
When writing a smart contract, we can control who/what can call functions within that contract by specifying what is known as the function visibility. This allows us to easily secure certain parts of a contract without having to write too much custom logic. Who can call a smart … | Continue reading
I asked on Twitter the other day how many people had created and enforced a performance budget for a website they were working on. Not surprisingly, the vast majority of people hadn't. I'm curious, have you ever created (and enforced) a performance budget for a site you' | Continue reading
Let’s say we have an array of objects such as the following: const books = [ { name: "My Sister the Serial Killer", author: "Oyinkan Braithwaite" }, { name: "Educated", author: "Tara Westover&quo … | Continue reading
The Web Content Accessibility Guidelines (WCAG) is a set a guidelines for how to make websites accessible. The second version was published in 2008, before websites were available on mobile devices in any meaningful way. A few months ago, the WCAG was updated to version 2.1, whi … | Continue reading
A few weeks ago, I wrote about how to make the abbr element work for touchscreen, keyboard, and mouse. My suggestion involved making the <abbr> element focusable with the tabindex attribute and using pseudo-elements to create a tooltip from the title attribute. <abbr ti … | Continue reading
When Javascript applications get to a certain size, it’s helpful to separate the code into modules. However, when we do so, we can end up with code imported that isn’t actually used. Tree shaking is a method of optimising our code bundles by eliminating any code from the | Continue reading
The ServiceWorker.skipWaiting() method is a life saver. It ensures that any new versions of a service worker will take over the page and become activated immediately. To understand why this is so important and useful, we need to revisit the service worker lifecycle. I have a mor … | Continue reading
The content of HTML documents can be in many different languages. To specify the primary language of a document, we use the lang attribute on the root element. <html lang="en"> We can also use the lang attribute within the page to demarcate specific elements or | Continue reading
Since writing about the state of CSS resets in 2018, I’ve had a few people ask what my modified CSS reset looks like. As I mentioned in that article, my reset is more like a base at this point because, in addition to resetting some default browser styles, I | Continue reading
When we hear the world “visibility”, we tend to only think of vision. But the visibility: hidden rule actually affects different kinds of visibility - visual, spatial, assistive technology, and interaction - in different ways. | Continue reading
All browsers ship with a set of default styles that are applied to every web page in what is called the “user agent stylesheet”. Most of these stylesheets are open source so you can have a look through them: Chromium UA stylesheet - Google Chrome & Opera Mozilla UA stylesheet | Continue reading
While learning CSS Grid Layout, I’ve found that the best way to internalise all the new concepts and terminology is by working on various layouts using them. Recently, I decided to try to recreate the GitHub Contribution graph using CSS Grid Layout, and found it was an interestin … | Continue reading
In JavaScript, like any other language, there are several ways to achieve the same result, some being more suited to certain situations than others. One of the first concepts I learned about when learning to code was loops, and it seemed like the answer to almost everything. Alth … | Continue reading
WebP is an image format developed by Google in 2010. It was created to be an alternative to formats like PNG and JPG, producing much smaller file sizes while maintaining similar image qualities. Why use WebP? WebP is an incredibly useful format because it offers both pe … | Continue reading
The Document Object Model, or the “DOM”, is an interface to web pages. It is essentially an API to the page, allowing programs to read and manipulate the page’s content, structure, and styles. Let’s break this down. How is a web page built? How a browser goes from | Continue reading
Web workers, service workers, and worklets. All of these are what I would call “Javascript Workers”, and although they do have some similarities in how they work, they have very little overlap in what they are used for. Broadly speaking, a worker is a script that runs on a thread | Continue reading
There are a lot of metrics we can use to measure the performance of a website - FP, FMP, FCP, TTI, TTYL (JK :P). Although these metrics can be overwhelming at first, it isn’t necessary for every site to track every single one. Different metrics may be more important | Continue reading