When working with Typescript, there are times when we need to assert the type of a value to help the compiler understand our intentions. But understanding what assertions are is not always straightforward since there are many different kinds of what Typescript calls assertions. This post will discuss assertions: What they are, how they work, the different kinds of assertions and how they compare to type guards. What are type assertions? Type assertions in Typescript tell the compiler to treat a value as a specific type. It's a way for the developer to say, "I know more about the type...
What it is The ai-summary element is a zero-dependency, progressive enhancement web component that automatically summarizes a given block of text on a webpage. This component is designed to be as efficient as possible by first attempting to use experimental, built-in browser AI capabilities. If those are not available, it gracefully falls back to a high-quality, in-browser model using the transformers.js library. How It Works The component follows a "native-first" approach to ensure the best performance for your users: Native Browser AI Primary Method: The component first checks if the browser supports the experimental Summarizer API. This new API allows...
Rather than using tools like LangChain and LangChart for machine learning, you can use Chrome's built-in AI capabilities for some cases. This post will explore the Built-in AI features of Chrome, how they work, how to enable them and how to use them with third-party fallbacks for browsers that don't support these features. Enabling Gemini Nano in Chrome Get the Right Chrome Version: The version you need depends the API you want to use: For early access to the core createTextSession API, you'll need Chrome 127+ or +higher. For task-specific APIs like Summarizer and LanguageDetector, you'll need Chrome Stable version...
The CSS @function at-rule allows you to create reusable, static functions, making your code more DRY Don't Repeat Yourself, modular, and maintainable. This post covers the @function syntax as implemented in recent Chrome 139+ and as specified in the CSS Custom Functions and Mixins Module Level 1https://www.w3.org/TR/css-mixins-1/ draft. What It Is The CSS @function at-rule is conceptually similar to the SASS @functionhttps://sass-lang.com/documentation/at-rules/function/ at-rule. css @function --function-name--arg1: default, --arg2 returns { / Function body with logic / result: / some computed value /; } The components of the function are: --function-name: The name you use to call the function, prefixed with...
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...
