Node.js has always supported Common.js as the module system. When building a package we use modules.export to define the elements in the package that can be consumed by other modules: // file:...

The Filesystem Access API is a Chromium-only feature that's part of Project Fugu. It allows you to work opening and saving files to the local filesystem. This post will discuss the feature and...

While we have touch and mouse events, pointer events, the pointer events API provides a unified interface for both mouse and touch devices. This post will explore pointer events, paying special...

Events are things that happen in the system you are programming — the system "fires" a signal of some kind when an event occurs, and provides a way to use the event in either the element...

I came across Web Components Are Not the Future by Ryan Carniato, the creator of Solid.js. I think that the article is biased and it makes assumptions based on his experience as the creator of a...

From their humble beginnings, the specifications that make up web components have become more complex and flexible at the same time. This post will cover the APIs and specifications that make web...

This post is a continuation of the last post about Javascript events. It will give a partial list of events available to Javascript browsers, whether they bubble up to parent chain and a brief...

We can use special types of parameters to protect ourselves when writing code. This post will cover two defensive coding strategies: default parameters and what I call sibling parameters. Using...

Most of the time I work with ES Modules as a consumer, only using the import side of the equation. However there is another side to modules when working in creating reusable code libraries. This post...

In Using Sliders in Javascript we saw how we can use sliders to control aspects of a user interface. This post will expand on the content from the previous post and build a full configuration panel...

When doing interactive demos or building preferences panels we may need to create sliders to set values for the associated properties. This post will cover how to configure an HTML slider and how to...

Publishing NPM modules has become progessively more complex over time (go figure). We now have to contend with ESM versus Common JS, Typescript versus Javascript, setting a default module type, and...

Working with international websites can be challenging since there are many aspects that we need to address. This post will cover a simple way to add internationalized messages available in multiple...

Destructuring is an alternative way to assign properties from an objecct or array. The traditional way to assign items to an array is using bracker [] notation. This example sets constatn to specific...

WebCodecs is an interesting API. It enhances existing video codecs and allows for video-based applications. This post will cover the API and how it works. What is the WebCodecs API # The WebCodecs API...

I've looked at streams in the context of Node and the browser, but I haven't really done anything with them because I couldn't figure out what the best use for them was. As I started working with more...

Semantic HTML has an extensibility mechanism that allows adding extra data on elements using the data-* syntax. This replaces older hacks such as non-standard attributes, or extra properties on...

Who gets the job? In 2019, Chris Coyier wrote The Great Divide where he discusses the differences between different types of front end developers. This post will explore the great divide: what is it,...

Javascript has access to the conditional CSS tools that we have to work when working directly with CSS. This post will cover matchMedia (script support for media queries) and CSS.Supports...

The PageVisibility API lets your application know when a page is visible to the user. While this information may seem irrelevant it enables the creation of Web pages that behave differently when they...

Laravel for PHP and Ruby on Rails for Ruby provide a full set of opinionated, 'batteries included' of tools, libraries and processes to create web applications. In Why We Don't Have a Laravel For...

I've been busy writing content but there are things that I'm either long overdue in implementing or want to explore. This should keep me busy when not writing posts and working on other...

Import maps allow developers to instead specify arbitrary text in the module specifier when importing a module; the map provides a corresponding value that will replace the text when the module URL is...

Looping through a flat JSON file is easy, doing the same through a nested JSON object, is not so easy. There is no built-in way to loop through nested arrays of JSON properties so we have to develop...

Node 22 was recently introduced as the current active version. The thing that caught my attention in the release notes is the built-in task runner. In this post we'll look at the Node task runner...

This code started as an exercise in ChatGPT prompt generation and a way to explore what we can do with OKLCH colors. It uses vanilla Javascript and deliberately avoids using libraries like Chroma.js...

The ECMAScript specification gained a new set of methods for the Array object. These methods work on copies of the original array rather than modifying the original array directly. There are other...

Among the large number of new features in ES6/ES2015 are Template Literals/Strings. These are backtick "`" enclosed expressions that allow for multiline expressions and string interpolations...

I am not going to rehash the "people don't disable Javascript" debate. Most of the time Javascript is enabled and everything is good. However, having Javascript enabled doesn't mean that...

I've written about web components a lot over the years but not recently. I think it's time to take a look at where we're at, and the newer technologies that have emerged under the web components...

Measuring long tasks in our code # // Test for long tasks test('should capture long tasks on the page', async ({ page }) => { // Function to capture long tasks async function...

Javascript provides a way to shortcircuit if/else statements with the conditional or ternary operator. the idea is that we consolidate the three parts of the if statement in one command, like shown...

As I was writing my previous post about Playwright and writing tests I came across an article that explained how to run performance measurements inside Playwright tests. Core Web Vitals # The example...