I recently read two post that got me thinking about the value of learning a web development framework. These posts also align with my own experiences and thoughts on the subject. This post will explore my experiences, why I think learning a framework may be beneficial, and when do we learn to reach beyond frameworks and back to web standards. My Experience I've finally started to learn Reacthttps://react.dev/ and I can see the value in learning a framework but the value is tempered by the assumptions we all make when learning the framework. The Assumptions I see What do I...
One of my biggest frustrations in Node.js development is when your project works on your machine but breaks somewhere else. A common cause is package inconsistency between environments, even with a package.json file. Updating, removing, or installing packages can lead to a nodemodules directory that doesn't perfectly match what's defined. The standard fix — deleting nodemodules and package-lock.json before running npm install again — is cumbersome. This is the exact problem npm ci for clean install was designed to solve. This post will explain what npm ci is, how it differs from npm install, and how to use it effectively...
List comprehensions in Python allow you to create new lists by applying an expression to each item in an existing iterable, optionally filtering items based in a condition. I've always missed this feature in Javascript and later Typescript, but it wasn't until recently that I discovered there is a way to achieve similar array methods that are native to Javascript and available in Typescript. This post will explain list comprehensions in Python, and how they can be replicated in Typescript using the map and filter array methods. While there isn't a direct syntactic equivalent to Python's list comprehension in Typescript,...
One of the biggest pain in working with Node.js is dealing with dependency vulnerabilities that you can't fix because they are in a transitive dependency a dependency of your direct dependencies. This is where the overrideshttps://docs.npmjs.com/cli/v11/configuring-npm/package-jsonoverrides feature in npm comes to the rescue. This post will look at overrides, how they work, how you can use them to fix security audit issues, and What Are Overrides? Overrides allow you to install a specific version of a transitive dependency, providing a temporary fix for security audit issues, that you have no control over. You could brute force a fix by running...
Since the first CSS specification, web developers were limited to a handful of ways to define colors in the sRGB color space. With the finalization of the CSS Color Module Level 4https://www.w3.org/TR/css-color-4/ and the ongoing development of Level 5https://www.w3.org/TR/css-color-5/, we now have access to a vastly expanded universe of color, along with powerful tools to manipulate and mix them. This post will cover the new color spaces, functions, and syntaxes, with a focus on what's available, how to mix colors, and when to use each color space. What Colors Are Available? CSS now supports a wide range of color notations....
Top-level await in Javascript allows developers to use the await keyword at the top level of a module, outside of an async function. This simplifies code by enabling modules to act as if they are large async functions, making it easier to work with asynchronous operations like fetching data, connecting to databases, or initializing dependencies. How Top-Level await Works in Javascript Before top-level await, if you needed to perform an asynchronous operation within a module's initial execution, you had to wrap it in an async immediately invoked function expression IIFEhttps://developer.mozilla.org/en-US/docs/Glossary/IIFE, or use promise chaining with .then. This could make the...
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...
