WebDev Weekly - Issue 60

Articles

• Can I use it in a PDF? CSS support across HTML to PDF engines | HTML to Image

  html2img.com

  HTML to PDF CSS support compared: flexbox, grid, @page margin boxes, page numbers, target-counter and more across Chrome, wkhtmltopdf, WeasyPrint and Prince.

• Dark mode toggles: two states are enough • Lea Verou

  lea.verou.me

  Yes, the underlying model must have three states, but one is always irrelevant to the actual user goal. Users do not seek out solutions to problems they don’t currently have. A lot of the hate towards two-state toggles is based on poor implementations.

• HTML over WebSockets: real-time SPAs with barely any JavaScript | Andros Fenollosa

  en.andros.dev

  Building a SPA (Single-page Application) is a complex puzzle: a JavaScript framework that draws the view, an API serving JSON, and 2 independent…

Tools

• TermDOM | Build Terminal UIs with HTML, CSS and DOM

  termdom.org

  A real DOM, a real cascade and a real CSS layout engine that paint to a terminal. No new API to learn, no native or WASM dependency.

• Octane — React's programming model, compiled

  octanejs.dev

  React's programming model, compiled ahead of time. No VDOM, no rules of hooks.

Tutorials

• Unlock Immediate Diagonal Scrolling with CSS scroll-axis-lock: none

  bram.us

  When you scroll a 2D scroller on a website, the browser does a lot of work behind the scenes to keep you on track. One of the things it typically does is scroll axis-locking (aka “railing”), ignoring some minor scroll deltas in the non-main scrolling axis. While helpful most of the times, this sometimes can get in the way such as in map or image zoom interfaces. With the new CSS scroll-axis-lock property you can disable the browser's default scroll axis-locking behavior, allowing users to immediately perform a diagonal scroll.

• Using and Styling the Dialog Element | CSS-Tricks

  css-tricks.com

  There's a lot of nuance to the <dialog> element, a seemingly little piece of web architecture. I've got some notes from digging into it.

• Working with ::highlight() using progressive enhancement

  piccalil.li

  Using a baseline of <mark> elements, Sunkanmi Fafowora helps you to understand how the new highlight API works with some progressive enhancement for good measure.

AI

• Introducing Kitesurf: The agent-first browser that runs in V8 isolates on Cloudflare Workers

  blog.cloudflare.com

  We should be giving all agents tools that excel at what’s important for an AI model. Kitesurf is Cloudflare’s new stateless, highly scalable, and cost-effective web browser that runs entirely on top of Workers and was designed specifically for the Agentic Cloud.

• AI is removing the middle class of software engineering

  blog.florianherrengt.com

  AI makes projects with weak engineering culture fail much faster.

• Don't be a meat proxy

  gruhn.me

  Remember everyone, don't be a meat proxy.