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...