Exploring Modern Alternatives to vh/vw Units — Ahmad brings us up to speed on the new(ish) small, large, and dynamic viewport units in CSS (e.g. svh, lvh, and dvh) and how they work across various mobile browsers. As ever, there are plenty of visuals to convey the points being made. Getting mobile page height right has long been tricky, but these new units make things more manageable and browser support is good too, which makes a nice change.

Ahmad Shadeed

<The Case Against Self-Closing Tags in HTML /> — /> is sometimes ignored, and sometimes it isn’t… should we still be writing this? Should Prettier still be enforcing this? Does it matter? Jake shares his stance on a technique whose origin goes back more than 20 years.

Jake Archibald

SDKs to Build Quality Product Onboarding — Dopt gives developers a component library and SDKs to build product onboarding and education in minutes. A visual builder lets the team map out flows; SDKs & APIs make it easy to develop them. Use Dopt’s prebuilt components or build with your own.

Dopt sponsor

WCAG 2.2: Quick and Simplified — With a new version of the Web Content Accessibility Guidelines on the cusp of becoming a standard, here’s a brief, simplified look at the nine new requirements.

Mike Gower

Coding Randomized 'Tears of the Kingdom' Zelda Patterns — The new Zelda game (which I’m really enjoying btw — but I have a Nintendo newsletter for that) uses repeated, geometric patterns to build a cohesive aesthetic throughout the world. Paul looks at how to recreate this motif with code. A fun little SVG experiment, and a pen-plotting robot even gets involved.

Paul Hebert

Offset Parent and Stacking Context: Positioning Elements in All Three Dimensions — How you can use the offset parent and stacking context to position elements in all three dimensions, and how to debug them.

Kilian Valkhof

How to Build a Web App in 60 Seconds Using AI — Dynaboard's low-code IDE offers 40+ built-in UI components & easy DB connections. Use AI to generate any SQL, JS & CSS.

Dynaboard sponsor

Permission — It’s generally accepted that our sites are crawled so people can find them via search, but are we ok with our sites being crawled to help train an LLM? In the evolving era of AI, Jeremy notes: “We can rescind our invitation to Google”.

Jeremy Keith

What’s the Best Font? See How You and Others Perceive Different Types — A neat interactive article that runs through the unique characteristics of a few fonts and shares how these differences are perceived.

Kumar, Fowler, Shapiro (The Washington Post)

SVG Hub: 70+ Custom-Color Elements Ready to Paste Into Your Project — A unique set of graphics in SVG format consisting of squiggles, scribbles, and other unusual shapes — and you can live-edit the colors on the page to test out various palettes.

Daniel Cranney

Feature Flags That Work the Way You Code — DevCycle’s feature flags integrate seamlessly with your workflow so you can ship faster using tools you already love.

DevCycle sponsor

Tailkits: A Directory of Tailwind CSS Templates, Components, and More — Currently includes more than 250 products, and you can easily filter by free or paid and select by category (dashboards, landing pages, e-commerce, portfolios, etc).

Tailkits

Prettier 3.0 Released — The latest version of the popular code formatter (which isn’t just for JavaScript, it tackles CSS, JSX, Markdown, and numerous templating formats too) is here.

Sosuke Suzuki

Proportio: An Interactive Tool to Create Proportional Scales — Similar to other type scale tools, but this one is much more complete, allowing you to create proportional scales for type, shapes, components, and even containers. Lots to fiddle around with here!

nate baldwin

MathLive: A Web Component for Math Input — A web component that provides an interface for editing formulas. It supports hundreds of LaTeX commands and uses LaTeX-style typesetting to keep things looking slick. GitHub repo.

Arno Gourdol

comiCSS: The ABCs of CSS — Each letter of the alphabet here is drawn with CSS and showcases one CSS property/value - like A for aspect-ratio. There’s a live demo version here too.

Alvaro Montoro