Webpack and other bundlers often produce large JavaScript bundles that can negatively impact web application performance. While Webpack Bundle Analyzerhttps://www.npmjs.com/package/webpack-bundle-analyzer offers a visual way to analyze bundle contents and identify optimization opportunities, it is—as the name implies—Webpack-specific. Developers using other bundlers like Rollup, Vite, or Parcel require a different tool. This post covers how to set up Sondahttps://sonda.dev/, a generic bundle analyzer, and use it to analyze JavaScript bundles within Vite and Rollup projects. What is Sonda? Sonda is a generic bundle analyzer that provides a detailed breakdown of a bundle's contents, including module sizes and dependencies. It supports multiple...
Defining CSS4 is a tricky endeavor. Unlike the annual ECMAScript specifications or the monolithic releases of CSS2 and HTML5, modern CSS evolves continuously. It consists of many different modules, each with its own specification and development timeline. This post explores how we can rethink CSS4 as a concept, approach its definition, and understand its implications for web developers. Historical Context To understand why "CSS4" remains a complex topic, we must look at how the language outgrew its original structure. Before CSS, developers styled web pages using HTML attributes and tags, leading to inconsistent, fragile designs. html This text is red....
Writing modes have a significant impact on how text is displayed on a webpage. By manipulating writing modes, designers can create unique and engaging layouts that enhance the user experience. Below are some examples of different writing modes and their effects. Until recently, not all browser could use sideways text, they could only display vertical text in the upright orientation. This woulld work well for languages like Chinese, Japanese, and Korean, but not so well for Latin-based languages. Now, with better support for the text-orientation property, we can create more versatile designs in all languages. This post will explore the...
AI can be a very effective writing partner given the right context and approach. Here are two ways I use AI to enhance my writing process, along with the tools and techniques I employ. Tools and Setup I use Gemini Pro via the online UIhttps://gemini.google.com/ as my LLM. I use Markdownlinthttps://github.com/DavidAnson/markdownlint via the VSCode extensionhttps://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint to ensure my Markdown formatting is consistent and clean. I use YAML front matter for metadata like title, date and tags for the Eleventy static site generator. I can add specific tools later as needed. The following example front matter adds the default metadata title,...
Working with modules in Node.js has evolved significantly. It used to be simple: CommonJS was the only game in town. With the introduction of ES Modules ESM and their stabilization in Node.js, developers now have powerful options—but also new complexity. The flexibility comes with its own set of challenges for both module authors and consumers. In this post, we’ll explore the differences between CommonJS and ESM, discuss how to navigate interoperability, and provide practical examples for building hybrid packages. A Little Bit Of History To understand the current landscape, we need to look back at how modules evolved in the...
GitHub Copilot is an AI pair programmer that provides intelligent suggestions as you work. It can suggest single lines of code, entire functions, documentation, and even prose based on the context of your file and your comments. This tutorial will guide you through installing, authenticating, and using its core features in VSCode for both coding and writing. This post will explore Github Copilot's capabilities, focusing on practical examples as well as its use as a writing assistant for documentation and blog posts. Copilot, and all other AI tools I'm aware of, generate non-deterministic outputs. This means that if you follow...
grid-template-areas is a CSS property that provides a visual, intuitive way to define grid layouts. It represents a paradigm shift in how developers approach layout design: instead of counting column lines, calculating spans, and doing mental math to size items, you create a semantic "map" of your layout directly in your CSS code using named areas. This post will explore the concept of grid-template-areas in depth, covering: - What grid-template-areas are - How they work - Important rules and common pitfalls - A comparison with traditional line-based placement - Real-world examples demonstrating their power What Are They? grid-template-areas allow you...
Installing a package like sharp involves more than just downloading JavaScript files. Developers frequently encounter "native modules"—packages that include C or C++ code. These modules interact directly with the underlying operating system and hardware, providing performance benefits or functionality that JavaScript alone cannot achieve such as high-performance image processing. However, this power comes with a strict constraint: binary compatibility. This post covers why native Node.js packages are version-dependent, focusing on the role of the Node.js Application Binary Interface ABI, the node-gyp build tool, and a practical case study with the popular sharp package. The core issue: The Node.js ABI The...
I answered this question in Quora: Why is my WordPress site fast on a desktop but slow on a mobile? but I thought it deserved a deeper dive here along with some updated references since this is not strictly a WordPress issue but more of a developer education issue. The answer: Because desktop and mobile are completely different beasts. It is a common, often maddening frustration for developers: you build a beautiful WordPress site, test it on your high-end MacBook Pro connected to a stable office fiber connection, and it flies. The animations are smooth, the pages load instantly, and...
Over the years I've collected a set of principles and mental models that I constantly try to apply when writing code successfully and unsuccessfully. These are not specific to any one programming language or framework, but rather general guidelines that help improve code quality, maintainability, and developer productivity. This post covers the background of common architectural rules, details specific principles and models, and provides practical code examples to illustrate their application. Background In software development, engineering teams often encounter conflicting advice regarding code structure and optimization. The most common maxims include: Don't Repeat Yourself DRYhttps://en.wikipedia.org/wiki/Don%27trepeatyourself : This principle prevents code...
