The modern web development landscape is characterized by a drive towards creating more modular, maintainable, and long-lasting applications. At the heart of this movement lies the Web Components specification, a suite of browser-native technologies designed to address the historical challenges of code reuse and framework lock-in. Understanding this foundation is essential for evaluating the libraries in this report. The Philosophy of Web Components Web Components are not a framework, but rather a set of standardized APIs built directly into modern browsers. They are built on three core pillars that enable the creation of truly reusable user interface elements. Encapsulation: The...
This article explores optional chaining in JavaScript: what it is, how it works, and why it's a feature you should be using—along with a few words of caution. Introduction For many JavaScript developers, one of the most frustrating and common errors is TypeError: Cannot read property '...' of undefined. This error typically occurs when you attempt to access a nested property on an object, but an intermediate property in the chain doesn't exist. Traditionally, you would write defensive code using the logical AND && operator to avoid this: js const user = { address: { street: '123 Main St', city:...
Typescript, a superset of Javascript that adds static typing, offers a powerful feature known as decorators. These provide a way to add annotations and meta-programming syntax for classes and their members. As of Typescript 5.8, the language supports two distinct decorator implementations: The modern, ECMAScript decorators TC39 Stage 3 as of this writing The original, experimental decorators This duality reflects the evolution of the decorator proposal within TC39 the group that defines the Javascript standard. This post will cover how decorators work, how to create and use them, and clarify the distinctions between these two versions and their relationship with...
Once merely syntactic sugar over prototype-based inheritance, JavaScript classes have matured into a powerful feature set, offering developers a more familiar and robust object-oriented programming paradigm. With the continuous evolution of the ECMAScript standard and the type-safe enhancements from Typescript, classes have become an indispensable tool for building modern, scalable applications. This post will cover classes as they exist in the latest versions of Javascript, exploring their fundamental concepts and advanced features. We will also cover the enhancements Typescript brings to classes. JavaScript Classes Introduced in ECMAScript 2015 ES6 and progressively enhanced in subsequent releases, JavaScript classes provide a clear...
Caniuse provides a visual representation of browser support for various web features. Rather than generating a static image using the caniuse embedhttps://caniuse.bitsofco.de/ to display data, I've created a web component that dynamically fetches and displays the data for a specific feature. This post explains how to create a web component that fetches and displays Caniuse data for a specific feature, using the Caniuse database. It also addresses some issues I've found with custom elements over the years. Web Component breakdown In this section we'll break down the caniuse-support web component script. It does a lot of things so we'll go...
The this keyword in JavaScript can be tricky. It refers to the context in which a function is running, and its value changes depending on how that function is called. This guide will clarify what this is, how it behaves in different situations, and how it relates to arrow functions and the call, apply, and bind methods. Understanding this In JavaScript, this refers to the execution context of a function. A common use case is within an object's methods, where this provides a convenient way to access the object it belongs to. This allows you to create a single method...
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...
