~frontendfocus | Issue 648 - What if CSS had if()? (16)

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.

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.

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.

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.

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”.

🕶️ 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.)

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.

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.

❄️ 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”.

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.

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.

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

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.

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

Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Subscribe to get curated advice on building great products and best practices of top startups.

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.