Together with  Greptile
🚀 Frontend Focus

#​738 — April 22, 2026 | Read on the web

Building a UI Without Breakpoints — Amit makes the case for moving away from global viewport breakpoints, instead shifting to using modern CSS such as clamp(), container queries, and auto-fit to create fluid interfaces no matter the screen.

Amit Sheen

Catch Bugs Before Your Frontend PRs Merge — Frontend bugs rarely stay in the diff. Greptile reviews each PR with full repo context, flags real issues, and suggests fixes that match your team. Works with GitHub and GitLab.

Greptile sponsor

font-family Doesn’t Fall Back the Way You Think — Harry clarifies how inheritance actually works when loading in font stacks, provides some welcome nuance on why we often see flashes of unexpected text or even layout shifts, and of course shares how to easily fix things.

Harry Roberts

Firefox 150: Release Notes for Developers — Enhancements include light-dark() image support, changes to the CSS color-mix() function (with it now accepting multiple color values), the addition of media-based pseudo-classes, and more.

MDN

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

Delivering a Dynamic Hexagonal World Map in 10KB — A walkthrough of building a hexagon-based SVG world map with the whole thing weighing in at just 10KB. Covers simplifying high-resolution GeoJSON with Turf.js and projecting it with d3-geo.

Ben Schwarz

First Experiments with the New 'HTML in Canvas' API — A fun primer looking at what we’ll be able to do with the HTML-in-Canvas API. It’s currently experimental, and is only available behind a flag — but these demos do a good job of showing what sort of things it will unlock — ”not just a new API; it is a new workflow mindset”.

Amit Sheen

Introducing B2B Authentication — Clerk combines Organizations, SCIM, SSO, RBAC, invites, and billing to build enterprise-ready apps.

Clerk sponsor

Details That Make Interfaces Feel Better — Plenty of good ‘small-detail’ UI advice here, and the learnings are also available bundled up as an AI skill.

Jakub Krehel

Making Your Site Visible to LLMs: 6 Techniques That Work, 8 That Don't — There aren’t any particularly accepted standards today, but these techniques are easy enough to put in place if you do want LLMs to return your sites in results.

Irina Nazarova (Evil Martians)

Why Some Images Look Brighter Than Your Screen — A technical exploration of why some images can sometimes seem brighter than a surrounding user interface when viewed on certain modern displays. Tom talks HDR, color profiles, gain maps, and more, sharing how such techniques can be utilised. There’s also a tool here to generate such images. (I opened this on my iPhone, and true enough, the image really does pop.)

Tom Nick

Green Components: How Your Design System Can Aid Sustainability Goals — Tips on how to make your site more sustainable via your design system, and measure the effects of your efforts.

Hidde De Vries

box-shadow Is No Alternative to outline
Manuel Matuzovic

🧰 Tools, Code & Resources

✉️ MJML 5.0: The Responsive Email Framework — HTML emails are a headache to code (trust us!) but MJML provides a component-based framework to make it less daunting if you don’t read CanIEmail on a regular basis. There's an upgrade guide to v5.0 if you're an existing user.

Mailjet

🔊 tiks: Procedural UI Sounds for the Web — Bleeps, blips, and clicks synthesized with the Web Audio API (so it’s tiny).

Rexa

Map Out Your Postgres AI Stack — Use EDB’s interactive configurator to architect your sovereign AI platform and get instant sizing and cost estimates.

EDB (Creators of EDB Postgres AI) sponsor

HyperFrames: Write HTML & JavaScript to Create Videos — An open-source framework for creating and rendering videos. Includes a variety of built-in blocks/components for common video effects and elements, and can also composite existing video and audio clips. GitHub repo.

HeyGen

µCSS: A Lightweight, Themeable CSS Framework — Includes default class-less styles in 20 different themes, dark mode toggle, 36 pre-built components, a mobile-first grid, and templating in PHP.

Digicreon

Formisch: A Modular, Type-Safe Form Library for Any Framework — A headless solution boasting a small bundle size with a simple, intuitive API to manage form state, handle user input, and Valibot schema-based validation. Try out some demos in the playground on the docs site.

Open Circle

TypeGPU: A Type-Safe WebGPU Toolkit — A WebGPU toolkit with advanced type inference and the ability to write shaders in TypeScript. Here’s a live example (flip the toggle to see the source).

Software Mansion

🦋 bsky-comments: A Zero-Dependency Web Component to Embed Bluesky Comments — No dependencies, works with any framework, it’s easy to style with CSS (i.e., no tricky Shadow DOM), and supports full threads with nested replies.

Florian Schepp

📰 Classifieds

📸 Add robust in-browser barcode scanning to your web apps using STRICH, a lean JS library. Free 30-day trial, try the demo app today!


Gauntlet AI Night School | RAG that holds up in production requires evaluation built in from the start. Learn how. (Virtual — 4/22)


Great builders start with curiosity. Join Mark Rober at Twilio SIGNAL, May 6–7 in SF, to see how he turns ideas into things people remember. Register for a discounted developer ticket here!

🧊 And finally..

Liquid Glass: WebGL Glass Effects for HTML Elements — A fun WebGL-powered effect you can apply, by way of JavaScript, to the HTML elements of your choice to reproduce realistic glass refraction and blur effects a la iOS 26. And, yes, there's an interactive playground (shown above).

Yassine Bouanane