Inline Conditionals in CSS? — Last week, the CSS Working Group resolved to add an inline if() to CSS. Seen by many as an overwhelmingly positive step forward, but one that raises lots of questions too. Lea explains what this all means, and why it’s exciting.

Lea Verou

Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Product for Engineers is PostHog’s newsletter helping engineers improve their product skills. Subscribe to get curated advice on building great products, lessons (and mistakes) from building PostHog, and dives into the strategies of top startups.

PostHog sponsor

The 2-Page Login Pattern, and How To Fix It — Explores the reasons behind the now seemingly pervasive design choice of login forms split across multiple screens, sharing some alternative solutions that aim to “create a more efficient and user-friendly authentication experience”.

Vitaly Friedman

🕶️ Trying Out Your Site in the Spatial Web — If you’ve any curiosity about how your site looks and performs in Apple’s visionOS, this guide from the WebKit team tells you what you need to know to get started (looking at developer tools, testing, debugging, etc.)

WebKit (Apple)

Flow Charts with CSS Anchor Positioning — The recently introduced CSS Anchor Position API can be used for more than just popovers and tooltips — as demonstrated in this post, showing us how to create flow charts and diagrams with just CSS. This GIF shared on Twitter is a good way to get a quick grasp on what’s possible here.

Cory Rylan

Simplifying Commerce Site Performance — This article breaks down which performance metrics matter most in commerce, and how to measure and triage online store performance in seconds.

Elastic Path sponsor

❄️ Engineering for Slow Internet — A post about minimizing user frustration for those on slower connections. This might sell you on it: “I got partway through writing this post while I was still in Antarctica”.

brr

Shape Lens Blur Effect with SDFs and WebGL — An introduction on harnessing the power of Signed Distance Fields (SDFs) to draw shapes in WebGL and create interactive effects, such as lens blur.

Guillaume Lanier

Safari 18: What Web Features Are Usable Across Browsers? — Stefan outlines what new developer features are in the beta of Safari 18, and when it will be safe to use them more broadly.

Stefan Judis

How BBC News Writes Text Descriptions and Alt Text — Considered guidelines for a range of images (decorative, informative, of people, etc.)

BBC

Rooster v9.6: Microsoft's Framework-Independent Rich Text Editor — A JavaScript-based rich-text editor that's neatly nested inside one div element (there's a demo here). Edits performed by end users are handled in simple ways to generate the final HTML. Several years old, but still maintained.

Microsoft

Pic Smaller: An Open-Source Batch Image Compression Tool — Supports intelligent compression for JPEG, PNG, WebP, AVIF, SVG, and GIF, and is fully local.

Pic Smaller

Drawing the Auth Owl at Userfront | Transformational Auth & Identity — Read the story behind Userfront. Including the vision behind the company and what auth should (and shouldn't) have.

Userfront sponsor

Entity Code: A Clear and Quick Reference to HTML Entities Codes — This is actually a project from 2009 (considered “retro” in web years!) but still useful as a quick way to find the most common copy/paste characters and their corresponding entity codes.

webmasterish

sveltekit-ultrafast: A Blazing Fast SvelteKit Boilerplate — An all-in-one starter kit for building apps with SvelteKit, Tailwind, and TypeScript. Also includes DaisyUI, Supabase for auth, Stripe for payments, and Contentful for setting up a blog.

Jacob

Teranoptia: A Typeface Representing Plants and Animals — In case you were looking to add “chimeric creatures” and similar symbols, inspired by medieval illustrations, to a design using just your keyboard. A peculiar typeface, and free to use.

tunera type foundry