As we write for the web, we face a dual challenge: catering to human readers while also considering how machines will interpret our content. These audiences have very different needs. For humans, you're creating a well-organized, scannable document that respects their time. For machines, you're creating a container of clear, extractable facts or "assertions" that explain the context, meaning, and relationships within your content. Success lies in serving both audiences simultaneously. This post will explore potential ways to synthesize these approaches. Content Structure and Hierarchy The foundation of effective web content is a logical, predictable structure. Machines and human readers...
One of the most inspiring visions for personal computing was Apple's 1987 "Knowledge Navigator" concept video. It depicted a user interacting seamlessly with a digital assistant that could manage schedules, retrieve data, and collaborate on complex tasks. For years, integrating this level of intelligent, stateful interaction into a web application felt like science fiction. I always struggled to bridge the gap between powerful machine learning models and the dynamic, interactive nature of the web. With the introduction of modern machine learning and agents, this has become closer to reality. LangChain.js and LangGraph.js make it even easier to create and interact...
WebGPUhttps://www.w3.org/TR/webgpu/ is a new, modern API that exposes the capabilities of graphics hardware for the web. It is the successor to WebGL and is designed from the ground up to provide better performance, more predictable behavior, and access to advanced features of modern GPUs. This post will look at WebGPU, what it is, how it fundamentally differs from WebGL, and provide practical examples of usage, both directly and through the Three.jshttps://threejs.org/ library. What is WebGPU? WebGPU is a low-level API developed by the W3C GPU for the Web Community Grouphttps://www.w3.org/community/gpu/, which includes major browser vendors like Apple, Google, Mozilla, and...
CSS has had multi column layout capabilities for years now but I don't think many people including me have figured how to use them effectively. In this post, I'll explore the various ways to create multi column layouts using CSS, basic usage, and how to make the content more readable. CSS Multi Column Basics The CSS multi-column layout module lets you arrange content into multiple columns, similar to how text flows in a newspaper. It's a powerful and simple way to create magazine-style layouts without complex floats or flexbox/grid setups. Creating Columns You can create columns in two primary ways:...
When building with Web Components, you have four primary strategies for composing them: Slots: For injecting user-defined content into a component's template. Nesting: For building complex components out of smaller ones. A Hybrid Approach: Combining slots and nested components. HTML-First: For prioritizing progressive enhancement. This post will cover these four strategies with examples and best practices. Using Slots for Content Projection The <slot> element is a placeholder inside a component’s Shadow DOM that you can fill with your own HTML from the outside. This process is called content projection, as your external markup is "projected" into the component's render tree....
Homebrew is a great package manager for macOS and Linux, making package installation and management straighforward. A less known feature is its ability to use it as a dependency manager for your projects beyond NPM or other language-specific package managers. This post will walk you through the steps to use Homebrew as a dependency manager for your project. Example Scenario The example project we'll use is a Docbook-based documentation site that requires docbook, docbook-xsl, saxon and openjdk to build the HTML files from XML sources and prince to convert a flavor of the generated HTML into PDF using CSS. These...
A recent article, HTML is dead, long live HTMLhttps://acko.net/blog/html-is-dead-long-live-html/, presents a provocative take on the state of HTML in modern web development. While it raises interesting points, I believe the conclusion misses the mark. Here's my perspective on why HTML, and the DOM, is not only alive but remains the essential, evolving foundation of the web. The DOM is Not Just a Document The Document Object Model DOMhttps://dom.spec.whatwg.org/ is the backbone of any webpage. It creates a structured, live representation of a document, allowing languages like javascript to dynamically alter its content, structure, and style. HTMLhttps://html.spec.whatwg.org/ is simply the standard...
The way you structure your content with HTML has a significant impact on your website's accessibility, search engine ranking, and overall maintainability. The key distinction lies in using semantic HTML versus what's pejoratively known as "tag soup" markup. Demystifying the Terminology Semantic HTML uses tags that clearly describe the meaning and structure of the content they enclose. Think of it as using labels that are self-explanatory. For example, the tag unambiguously indicates a section of navigation links, while defines a self-contained piece of content like a blog post or news story. These tags provide context to both the browser and...
In a previous post A History of CSS Resetshttps://publishing-project.rivendellweb.net/a-history-of-css-resets/, we discussed the evolution of CSS resets and their importance in creating a consistent starting point for web development. In this post, we'll explore how to build a modern, opinionated CSS reset using Cascade Layers, a powerful feature that brings order and predictability to the often chaotic world of CSS. Why Create Your Own Reset? In modern web development, starting a project with a clean, predictable foundation is crucial. While pre-built systems like Open Props or Tailwind's Preflight offer excellent solutions, understanding how to craft your own modern CSS reset is...
I've always loved the idea of running a database directly in the browser. Until I heard about PGLitehttps://pglite.dev/, I thought it was just a dream and that the only way to use PostgreSQL was to set up a server in the same box I was running the client code. But PGlite has changed that, allowing you to run a lightweight version of PostgreSQL entirely in the browser or in a JavaScript environment like Node.js. In this post we'll explore what PGlite is, when it's a good choice and when it's not and how to sync it with an external PostgreSQL...
