Together with  StackBlitz
🚀 Frontend Focus

#​669 — November 20, 2024 | Read on the web

How overflow: clip Works in CSS — This is a solid look at using the well-supported clip value alongside the overflow CSS property — with some good example use cases, particularly around art direction.

Ahmad Shadeed

The State of HTML 2024 Results — The results from this year’s State of HTML survey dropped late last week, and Patrick Brosset (of the Edge team) sums up where things stand in his conclusion:

💬 “..it’s heartwarming that most respondents agree that, overall, interoperability is now much less of an issue than it used to be, with clear improvements being felt in recent years. And, with the increasing number of capabilities we’re getting, building performant, accessible, and interactive HTML-first UIs is becoming easier all the time, making it possible to reduce JavaScript usage to where it truly matters, and letting web servers and browsers communicate how they were meant to: with HTML!
— Patrick Brosset

Build Fully Functional Applications in Minutes, Not Months — Create, run, edit, and deploy full-stack web apps with Bolt.

StackBlitz sponsor

Meet Angular v19 — The latest version of this popular web app framework is here — to mark the release ▶️ here’s a video running through what new features you can expect.

Minko Gechev

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

Importing a Frontend JavaScript Library Without a Build System — Julia explores how to import a JS library when taking a no-build-system approach.

Julia Evans

alt Text: Don’t Just Describe Images — Advice for writing alt text that communicates an image’s purpose without repeating page content — chiefly focus on meaning rather than visual description.

Emma Cionca & Tanner Kohler

Pinpoint Flaky and Failing Tests with Codecov Test Analytics — Stop digging through logs and re-running your CI. See why tests are failing and which are flaky, right in your PR.

Codecov sponsor

Creating an ASCII Shader Using OGL — This is an incredibly cool effect, not to mention great tutorial on getting started with shaders and using OGL, a minimal WebGL library that’s a lot lighter than Three.js.

Andrico Karoulla

▶  Nerd Show and Tell: Meet Zach Leatherman — Zach talks about the “rollercoaster ride of building Eleventy”, why owning your corner of the internet is more important than ever, and how platforms like Eleventy could be “the ticket to a new wave of web independence”.

Podcast Awesome podcast

When's the Right Time to Share Our Excitement About New Web Features?
Rachel Andrew

Creating 'No Fuss' Light/Dark Modes — Keeping it simple.
Chris Coyier

📊 Adding Interactive Charts to Astro Sites
Pavlin BG

🔧 Code, Tools & Resources

SVG to Font 6.1: Read SVG Icons and Output a Font File — Both a CLI tool and Node.js library that can read in SVG documents and output WOFF2, WOFF, EOT, TTF and SVG fonts. Useful for generating a Web font from a set of icons, say, as in this demo.

Kenny Something

lite-youtube Web Component v1.6 Released — The latest version of this web component that quickly renders YouTube embeds adds auto-pausing, custom CSS properties, named slot thumbnails, and more.

Justin Ribeiro

Troubleshoot Frontend Issues with Digital Experience Monitoring — Learn how Datadog provides a single source of truth for frontend monitoring so teams can troubleshoot issues faster.

Datadog sponsor

SmarkForm: A Library for Creating Markup-Driven and Extendable Forms in Web Apps — This allows you to add advanced features to forms, like JSON import/export, hotkeys, along with other interactive enhancements. Try some examples here.

Joan Miquel Torres

Coding Font: A 'Game' to Find Your New Favorite Code Font — This is a fun idea. It throws over 25 popular developer-oriented fonts into a ‘tournament’ and you then pick your favorites until you’re left with a winner. (It was Cousine for me.)

Typogram

Monicon: A Universal Icon Library for Any JavaScript Framework — The project itself is not new, but provides quick access to 200,000+ icons from popular sets and works with most frameworks and build tools.

Oktay Şenkan

📰 Classifieds

Introducing @clerk/nextjs v6, with support for Next.js 15. Learn about v6 updates and upgrade using our guide.


🎹 STRICH: Add blazing fast and reliable 1D/2D Barcode Scanning to your web apps. Free demo app and 30-day trial available.

Ipx.