The Speculation Rules API allows developers to hint the browser about which pages a user is likely to navigate to next, enabling the browser to prefetch or prerender those pages. This can lead to near-instant page loads and a significantly improved user experience. This post will cover the basics of the Speculation Rules API, how to use it and the benefits it provides, as well as its current browser support status. What is the Speculation Rules API? Speculation rules are a declarative JSON-based syntax, defined inside a script type="speculationrules" tag. They allow developers to inform the browser about which pages...
Compression dictionaries are a new, and intriguing, way to reduce the size of compressed data by using a shared dictionary that is known to both the compressor and decompressor. This can lead to significant savings in bandwidth and storage, especially for repetitive or predictable data patterns. This post explores what are compression dictionaries, how they work, and how they can be used effectively in web applications. What Are Compression Dictionaries? GZip provides a way to compress data between a client and server, it has been around for a long time and is widely used. Newer compression algorithms, like Brotli and...
Reading flow and reading order are important concepts in web accessibility, particularly for users who rely on keyboard navigation. The reading flow refers to the logical sequence in which content is presented to users, while reading order determines how that content is navigated using the keyboard. This post will explore the reading-flow and reading-order features in Chrome, how they work and how can they be used to improve keyboard navigation and accessibility. Reading Flow The reading-flow property modifies the reading order of elements within a block, flex, or grid container and only on these layouts when set to a value...
Line height units are not new but not widely used yet. They provide to measure things based on the line height of an element for the current font at the current line height. There are two line height units: lh: measured relative to the line height of the element rlh: measured relative to the line height of the root element usually the html element The most common case of using lh and rlh is to set paragraph block top and bottom in Latin languages margins or paddings. In this example, we set the paragraph block top and bottom margins to...
Even outside of functional programming, Javascript provides mutable and immutable functions and methods to process data. Which one you use depends on the context of the application you're working on. In this post, we'll explore the differences between mutable and immutable objects in Javascript, and how to use them. Definitions Mutable objects : Objects whose state can be modified after they are created : In Javascript, most objects are mutable by default. This means you can change their properties, add new properties, or remove existing ones without creating a new object : This is what most people think of when...
Creating the same type of Vite-based applications is tedious and repetitive, even when it's the same Vite command. This post will cover one way to create a builder tool for Vite-based applications. It will also cover how to add utilities like Prettier, ESLint, and Playwright to the project. How The NPM inithttps://docs.npmjs.com/cli/v9/commands/npm-init command allows you initialize remote packages, like a Vite project, either from an NPM package or a GitHub repository. For eaxmple, the following command will create a new Vite project using the React template: bash npm create vite@latest my-vite-app -- --template react This command will create a new...
Now that GSAP 3.11 has been released as a free product, the GSAP Motion Path Helper plugin is available for use free of charge. This post will run through installing the GSAP MotionPathHelper plugin, and how to use it. Why a Javascript solution? Creating SVG paths is very challenging, especially when you want to create complex paths for animations or to place text on them. The MotionPathHelper GSAP plugin allows you to create complex animations with ease by providing a visual interface for defining motion paths. While I'm normally not a fan of using Javascript for animations, I've come to...
Image Magickhttps://imagemagick.org/index.php is a powerful command-line tool for image processing. It can be used to convert, edit, or compose images in various formats. I first heard of Image Magick from Phillip Greenspun's Pandahttps://philip.greenspun.com/panda/ project, which uses it to add borders and a copyright message. This post will explore ways to use Image Magick for image processing, both modifying existing images and composing new images from existing images and text. Background: What is Image Magick? ImageMagick was created in 1987 by John Cristy when working at DuPont, to convert 24-bit images 16 million colors to 8-bit images 256 colors, so they...
I read Michelle Barker's Creating CSS Theme Variables from a JS filehttps://css-irl.info/creating-css-variables-from-a-js-file/ and thought it was a great idea. I wanted to try out a simpler version that would work as a command line tool. This post will discuss how to create a command line tool that generates a CSS file with custom properties from a JS/TS module exporting a theme object. Rationale Michelle's post is a great introduction to the topic, but rather than using it as a library or including the theme data on the same script file, I wanted to create a command line tool that would...
I answered a question in Quora about the default styles for a p element. The answer is more complicated than it would first appear. There is no single default for HTML elements that are common to all browsers. This post will explore the default stylesheets for the most common browsers and show what the default styles are for a p element. Where to find the default stylesheets Before we start digging into the default styles, let's look at where to find the default stylesheets for the major browsers. The table below shows the default stylesheets for the major browsers. The...
