Web Performance Metrics Cheatsheet

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 ... more

Highlights from Chrome Dev Summit 2020

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 ... more

What I wish I knew about React

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 ... more

How I created 488 "live images"

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 ... more

How to use Puppeteer in a Netlify (AWS Lambda) function

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, ... more

Calling smart contract functions using web3.js - call() vs send()

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 ... more

Your first performance budget with Lighthouse

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 ... more

Revisiting the abbr element

A few weeks ago, I write 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 ... more

What self.skipWaiting() does to the service worker lifecycle

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 ... more

What is tree shaking and how does it work?

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 ... more

A Siri Shortcut to Generate PWA Icons and Web App Manifest

If you've been following along with my daily blogging challenge, this is my final article! I've done 30 articles in 42 days! Since Siri Shortcuts were announced in iOS 12, I’ve been trying to find some interesting and useful applications for it. Suprisingly, ... more

Understanding the Virtual DOM

I’ve recently been writing about what exactly the DOM and the shadow DOM are and how they differ. To recap, the Document Object Model is an object-based representation of an HTML document and an interface to manipulating that object. The shadow DOM can ... more

Handling broken images with the service worker

A few years ago, I wrote about how we can use css to style broken images. The technique leveraged on the fact that any styling to the ::before or ::after pseudo-elements on the <img> element will only be applied if the image doesn’t load. So, we ... more

Using aria-live

Many web pages today have their content dynamically changed using Javascript. An example of this is the search page on this blog. When the page is initially loaded, the only content in the <main> section of the page is a search form. But, when ... more

Cache API 101

A cache is a form of storage for “requests” and “responses”. When you visited this page, you made a request for /cache-api-101 . The response to that request was the HTML document you are viewing in your browser right now. The cache API allows us to ... more

What is the Shadow DOM?

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 ... more

How and when to use the tabindex attribute

tabindex is a global attribute that can be applied to most HTML elements with content. It controls two things: If an element is focusable , either by an input method such as the keyboard, or programatically such as with the focus() method; and At what ... more

What, exactly, is the DOM?

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 ... more

How to upload a screenshot from Puppeteer to Cloudinary

In my article yesterday, I wrote about the problem I was trying to solve with my caniuse embed. To recap, I was trying to create a fallback image for the live embed and I did this by taking a screenshot of the page using puppeteer. Yesterday, I covered ... more

Using a headless browser to capture page screenshots

A headless browser is a browser without the graphical user interface. It is a way to navigate the web via the command line. Headless browsers are useful for automating tests of websites as it allows us to navigate to a page and perform actions without ... more

Why and how to use WebP images today

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 ... more

Web workers vs Service workers vs Worklets

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 ... more

You might not need a loop

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 ... more

Highlights from Chrome Dev Summit 2018

Earlier this week, I was able to attend Chrome Dev Summit in San Francisco. This was my second time attending the event, the first being in 2016 (you can read about my highlights from that event too). This year's event was one of the best tech conferences ... more

What is First Input Delay?

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

Learning to write again

Last weekend, I attended the Google Developers Experts Summit in Sunnyvale, California. During the summit, some GDEs delivered quick, 5-minute lightning talks on interesting projects or experiences they had over the course of their career. As you would ... more

How display: contents; Works

As I frequently mention, every element in the document tree is a rectangular box. Broadly speaking, this "rectangular box" consists of two sections. First we have the actual box, which consists of the border, padding, and margin areas. Second, ... more

Accessibility Testing with pa11y

Knowing where to start with accessibility testing can be difficult and overwhelming. In my article on Tools for Developing Accessible Websites, I mentioned 5 tools you can use to get started developing more accessible websites. More recently, I have ... more

CSS Animations vs the Web Animations API: A Case Study

Last week, I wrote about how I created the bitsofcode logo animation with CSS. After that, it was suggested that I attempt a comparison between a CSS animation and the Web Animations API, so here it is! Introduction to the Web Animations API As with ... more

How I Animated the bitsofcode Logo

I’m pretty new to CSS animations. For the most part, I had only used them in limited cases and mostly using libraries created by others, such as the excellent Animate.css created by Daniel Eden. As I mentioned in Redesigning bitsofcode, the graphic designer ... more