Articles on frontend development and more.
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, for certain mouse or touchscreen users they can be unnecessary and detract from the design. Before the :focus-visible…
Over 5 years ago, I migrated this blog From Jekyll to Ghost . Back then, my reasons for moving to Ghost were 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 longer wanted to have to manually upload new posts via FTP I wanted to be able to schedule posts (although Ghost doesn’t…
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 bottom of the page so feel free to skip to that. Four Questions # In a web.dev article on "User-centric Performance…
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 what is a “decentralised website”? A short intro to ENS, IPFS, and the dWeb # Let’s start with ENS. The Ethereum Name Service is a naming…
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 the year. So, without further ado, here’s what I’m most excited about from the conference! Simplified performance metrics with the…
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 all my preconceived notions and ideas were being turned upside down. I managed to put together (what I think is) a pretty decent application,…
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 created the embed and how I progressively enhanced it by adding a fallback screenshot captured with puppeteer and hosted on…
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 some 💕 # It seems like the design and functionality of pretty much all control elements have stayed the same since the dawn of the…
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 where Javascript couldn’t be run. My talk, which you can watch on YouTube , focused on the code I wrote to capture the…
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 # Web3.js is a library that allows you to do a number of things related to developing for the ethereum ecosystem,…
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 contract function? # Before getting into the different types of function visibility, it’s helpful to understand what the…
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're working on? — Ire Aderinokun (@ireaderinokun) May 24, 2019 Until recently, I also hadn't setup an official performance budget…
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" } , { name : "My Sister the Serial Killer" , author : "Oyinkan Braithwaite" } ] ; The first and the last objects in the array are identical. So what if we want to remove such duplicate objects from…
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, which includes a whole new section on guidelines for mobile accessibility . There are several new mobile-specific rules,…
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 title = " Cascading Style Sheets " tabindex = " 0 " > CSS </ abbr > abbr[title]:hover::after, abbr[title]:focus::after { content :…
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 more detailed article about each step of the lifecycle, but you just need to know that there are six states that a service…
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 final file that isn’t actually being used. Let’s say we have a utilities file with some math operations we may want to use in…
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 sections that are in a different language to the document’s primary language. < html lang = " en " > < head > </ head > < body > <…
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, it packs a lot of power and is actually a great automation tool. In addition to being able to run actual scripts, we can do things image…
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 be thought of as a “lite” version of the DOM. It is also an object-based representation of HTML elements, but not of a full standalone document.…
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 also include some utilities that I want in every project. You can view the entire CSS file in my Github repository , which will be kept more…
The <abbr> element is used to denote and define an acronym. For example, if we want to write the acronym “CSS” anywhere on a web page, we can also provide the full name “Cascading Style Sheets” for readers unfamiliar with the acronym. This is done by wrapping the acronym in an <abbr> element and adding the full definition in a title attribute. < abbr title = " Cascading Style Sheets " > CSS </…
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 could style those elements and they would only display if the image was broken. Here’s an example of how I’ve styled broken images on this site: There…
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 like an interesting challenge. I initially spent hours coming up with weird and convoluted solutions, until I realised that…
UPDATE : Some people have pointed out some genuinely great use cases for this property which I've listed at the end of the article. I still stand by all the points I made against the use cases I pointed out in this article, but I now believe there are some good reasons to use pointer-events for HTML elements! The pointer-events CSS property controls if and how elements can be targeted by pointer…
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 you type in a query such as “css” and search, several articles related to that term begin to appear on the page. If you are looking at the page, it is…
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 store these requests and responses locally in the browser. The cache API was created as part of the service worker specification to “allow authors to…
I recently ran into an issue where the text content of a <button> I created wasn’t in the accessibility tree and therefore wasn’t visible to screen readers. After some debugging, I realised that the reason was because I was animating the text visually by changing the opacity and, more importantly the visbility property. It was definitely an oversight, as I know and have previously written about…
When we select an element by its .class or #id , we’re using predefined and unchanging attributes that are baked into the DOM. With pseudo-classes, we can select elements using information that isn’t already in the DOM and can change based on how a user interacts with the page. :hover , :focus , and :active are pseudo-classes that are determined by a user’s actions. They each correspond to a very…
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, or styling of the page. For example, let’s take the following HTML document: <! doctype html > < html lang = " en " > < head >…
You may have noticed that I recently updated this blog to allow for users like yourself to save an article to view offline. You can do this by clicking the bookmark icon above. If you are ever offline, you will still be able to view articles previously bookmarked. If you try to visit a page that isn't bookmarked, you'll be redirected to the offline page, which lists all the saved articles. The…
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 - Firefox WebKit UA stylesheet - Safari A lot of styles are consistent across all user agent stylesheets. For example, I…
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 point an element becomes focusable when a user is interacting with the page via a keyboard Focus order # To understand how the tabindex attribute…
When the iPhone X came out with the infamous notch, you may have heard of the new safe-area-inset values, which allowed browsers to detect the area of the screen that was covered by the notch and move content around appropriately. Recently, these values have been formalised as part of a new specification for CSS Environment Variables . This specification is still in the stage of Editor’s Draft…
I prefer to interface with git via the command line, at least for the simple commands. However, I’m a bit lazy, and don’t like having to repeatedly type out the same long commands multiple times a day. Over the years, I have created some short aliases that allow me to more quickly use git via the command line. How to create an alias # Bash aliases allow us to set keywords that can trigger longer…
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 a source HTML document to displaying a styled and interactive page in the viewport is called the “Critical Rendering Path”. Although…
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 how to use headless Chrome, via Puppeteer, to capture that screenshot. The next thing I needed to do was upload the screenshot to my Cloudinary…
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 having to manually open up a browser and click around. Another great use of headless browsers is to take screenshots of web pages dynamically. What…
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 performance and features. Unlike other formats, WebP supports both lossy and lossless compression, as well as transparency and…
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 separate to the browser’s main thread. If you think about your typical Javascript file that is included in your HTML…
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. Although loops are great for a lot of use cases, the JavaScript language has provided a suite of methods that can be used to…
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 I’ve been to in a while, jam-packed with well-thought out sessions and amazing people. I learned a lot from the sessions and will likely write…
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 for different types of websites. For a content-driven website such as this blog, First Contentful Paint & First Meaningful Paint are…
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 expect, there were a lot of interesting people doing a lot of interesting things, but the talk that stood out to me the most was Uri Shaked ’s talk…
With all the new properties related to CSS Grid Layout, one of the distinctions that always confused me was the difference between the grid-template-* and grid-auto-* properties. Specifically the difference between grid-template-rows/columns and grid-auto-rows/columns . Although I knew they were to do with the explicit and implicit grid systems, at face value they seemed to be doing almost the…
While working with feature queries, I requently find myself in the messy situation of trying to test my fallbacks layout. This lead me to create the Feature Queries Manager , a developer tools extension that lets you easily toggle styles behind feature queries. I recently wrote an article for Smashing Magazine about why and how I created this extension. Read the article on Smashing Magazine .
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, we have the contents of the box; the content area. With the CSS display property, we can control different things about how this box and its children are…
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 interesting challenge. As I always find while working with CSS Grid Layout, I end up with far less CSS than I would have using…
Less than a month ago, HTML 5.2 became an official W3C Recommendation (REC). When a specification reaches the REC stage, this means that it has received the official endorsement of W3C Members and the Director, and that the W3C officially recommends it’s deployment by user agents, and it’s implementation by web page authors. By the REC stage, anything new should have had at least 2 independent…
Coming from the English-speaking world, it can be easy to maintain the bubble that is the English-speaking World Wide Web. But in fact, more than half of web pages are written in languages other than English . Since starting work at eyeo , I’ve had to think a lot more about localisation and translations because most of our websites are translated into several languages, something I previously…