The idea behind JSON modules, and import attributes, is to allow developers to import JSON files directly into Javascript modules, making it easier to work with structured data directly on the script without adding loading steps. This post will explore the JSON module feature, its benefits, and how to use it effectively in your projects. What are JSON modules? JSON modules allow you to import JSON files directly into Javascript modules using the import statement with the type: "json" attribute. When we import a JSON file in a module like this: js import data from "https://example.com/data.json"; On the web, each...
Javascript has two syntaxes that use the same representation: Rest and Spread. This post will explore the two syntaxes, their differences, and how to use them in Javascript and Typescript. The Core Idea: Gathering vs. Expanding At its heart, the distinction between rest and spread is about direction: Rest Parameters: Gathers multiple elements and "condenses" them into a single array. Spread Syntax: Expands an iterable like an array or string into its individual elements. Rest Parameters: Collecting an Indefinite Number of Arguments The rest parameter syntax allows a function to accept an indefinite number of arguments as an array. This...
CSS Grid Layout changed how developers build two-dimensional layouts, moving us beyond float and table layouts. Most of the time we see grid used for positioning elements in specific areas of the grid. This post covers grid template areas, from its basic mechanics to its applications and limitations. What Are CSS Grid Template Areas? grid-template-areas allows you to assign human-readable names to specific regions of your grid. Instead of placing items based on abstract line numbers, you create a visual "blueprint" of your layout directly within your CSS. This approach makes your code more descriptive, readable, and easier to maintain....
Unless you're familiar with Typescript, you might run into compilation errors that don't have immediately obvious fixes. In this post, I will share two common issues I've encountered while working with Typescript and how to resolve them. Module resolution errors I was getting errors when trying to compile my Lit Typescript project with command line tsc commands with flags like outDir, --module and --target. The errors were related to module resolution and decorators. Here's how I fixed them. When you run this command to compile a Lit project that uses Typescript: bash tsc src/site-search.ts \ --outDir dist \ --module node...
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...
