Your weekly reading–dog days of (northern) summer edition
It’s a little quieter this week, with the Northern Hemisphere summer seeing less being published. But still a bit of reading to bring to you.
Shipping WebGPU on Windows in Firefox 141
After years in development, we will be releasing WebGPU on Windows in Firefox 141! WebGPU gives web content a modern interface to the user’s graphics processor, enabling high-performance computation and rendering. We’re excited about WebGPU because we believe it will raise the ceiling for games, visualization, and local computation on the web.You can find a tutorial on WebGPU at webgpufundamentals.org, try out the WebGPU Samples, and read documentation for the API at MDN. WebGPU is defined in two W3C standards, WebGPU and WGSL, whose development Mozilla has participated in since it began in 2017.
Source: Shipping WebGPU on Windows in Firefox 141 – Mozilla Gfx Team Blog
WebGPU is arriving in Firefox–well for Windows right now at least, with Mac and Linux to come. Already shipping in Chrome, it’s coming to Safari before too long too. WebGPU is a key component of client side AI (and much more) and helps keep the Web platform on par with platform native applications which have access to underlying device capabilities like GPUs.
WebAssembly: Yes, but for What? – ACM Queue
WebAssembly (Wasm) turns 10 this year, which, in software terms, just about brings it to the age of majority. It has been polished, prepared, explored, and deployed, but in the language of American speculative fiction author William Gibson, we are now as ever in the unevenly distributed future: WebAssembly has found a niche but not yet filled its habitable space. This article attempts to inventory the early Wasm wins and losses and identify winning (and losing!) patterns, and then goes further to extract commonalities between these patterns: What is it that makes for a successful Wasm deployment? These observations are then used to predict the future, suggesting new areas where Wasm will find purchase in the next two to three years.
Source: WebAssembly: Yes, but for What? – ACM Queue
WebAssembly is a decade old now–yet while it has long been widely supported, its adoption has lagged what might be expected of such an enabling technology. Here Andy Wingo looks at where it has been successfully adopted, and where we might see it coming in the future.
The History of Ecommerce Part II
history, interledger protocol, Web Monetization
In the early 1990s, three companies pioneered online transactions, facing challenges of security and user accessibility. They are hardly known today.
Source: The History of Ecommerce Part II – The History of the Web
Financial transactions on the Web have always been a challenge. Even today the fixed cost part of any transaction (typically in the order of 30c) constrains innovating with business models. Here the always excellent History of the Web looks at three early attempts to add transactions to the Web.
Modern async iteration in JavaScript with Array.fromAsync()
arrays, asynch, JavaScript, streams
As front-end engineers, we frequently deal with asynchronous data, such as API responses, streams, lazy-loaded content, and more. JavaScript has long provided tools for managing async logic, but working with async iterables has often required verbose or manual handling.
Enter Array.fromAsync(), a modern addition to JavaScript that simplifies the process of converting async data sources into arrays. It’s intuitive, powerful, and designed to work seamlessly with async/await.
Source: Modern async iteration in JavaScript with Array.fromAsync() – Matt Smith
A relatively new feature of JavaScript that simplifies the process of converting async data sources into arrays.
Delegation is the AI Metric that Matters
Plotting the Tasks Users Delegate to AI is Key for Product Planning & Monitoring Social Acceptance of AI
Forget the benchmarks – the best way to track AI’s capabilities is to watch which decisions experts delegate to AI.
Some delegations are subtle, like Claude’s 4.0 system prompt update that searches the web without asking for permission). Others are explicit, like a programmer using Claude Code’s “YOLO mode” that lets the agent perform actions on its own1.
Source: Delegation is the AI Metric that Matters | Drew Breunig
There’s certainly pushback from some, indeed many, users at the seemingly indiscriminate addition of AI features to products. Drew Breunig argues that focussing on what gets delegated to AI, when and how, is central to users accepting this new capability.
Design Patterns For AI Interfaces — Smashing Magazine
So you need to design a new AI feature for your product. How would you start? How do you design flows and interactions? And how do you ensure that that new feature doesn’t get abandoned by users after a few runs?
In this article, I’d love to share a very simple but systematic approach to how I think about designing AI experiences. Hopefully, it will help you get a bit more clarity about how to get started.
Source: Design Patterns For AI Interfaces — Smashing Magazine
Most interaction design when it comes to incorporating LLMs and AI in user interfaces still seems to involve cramming in a chat interface. That’s in no small part part because we’re still very new to working with these technologies, and the fact that ChatGPT rocketed in a matter of months from nowhere to being the most widely used new product in the world.
Here Vitaly Friedman considers more deeply how we might incorporate these capabilities into the products we build.
Setting Line Length in CSS (and Fitting Text to a Container)
First, what is line length? Line length is the length of a container that holds a body of multi-line text. “Multi-line” is the key part here, because text becomes less readable if the beginning of a line of text is too far away from the end of the prior line of text. This causes users to reread lines by mistake, and generally get lost while reading.
Luckily, the Web Content Accessibility Guidelines (WCAG) gives us a pretty hard rule to follow: no more than 80 characters on a line (40 if the language is Chinese, Japanese, or Korean), which is super easy to implement using character (ch) units:
Source: Setting Line Length in CSS (and Fitting Text to a Container) | CSS-Tricks
Subtle things most people won’t ever consciously think about, like how many characters on average there are on a line of text, can significantly affect readability. Here’s how we can specify the length of a line of text using CSS.
Great reading, every weekend.
We round up the best writing about the web and send it your way each Friday.
