Together with  WorkOS
🚀 Frontend Focus

#​660 — September 18, 2024 | Read on the web

WebKit Features in Safari 18.0 — Safari 18 arrives alongside iOS 18 and macOS Sequoia, along with 53 new web platform features. This new version of Apple’s browser has some interesting features, such as the ability to hide ‘distracting’ items from a web page, new iPhone Mirroring and remote inspection options, and it joins Chrome in supporting View Transitions and Style Queries when testing CSS Custom Properties.

Jen Simmons

Optimizing for High Latency Environments — If you’ve a particular interest or responsibility in diving deep into performance metrics, then this detailed post from Harry on round-trip-time (RTT) should prove invaluable.

Harry Roberts

WorkOS: Start Selling to Enterprises with Just a Few Lines of Code — WorkOS is a modern identity platform for B2B SaaS. It provides flexible and easy-to-use APIs to integrate SSO, SCIM, and RBAC in minutes. WorkOS is used by hundreds of high-growth startups including Perplexity, Vercel, Drata, & Webflow.

WorkOS sponsor

'In 2024, Just 0.5% of the Global Top 200 Websites Use Valid HTML' — Jens digs into some of the rather woeful findings from the latest HTML conformance data and urges us to ship valid HTML.

Jens Oliver Meiert

Astro 5.0 Beta Release — The first beta release of Astro 5.0, the popular web framework is now available. This new release includes the now stable Astro Content Layer, along with stable server islands, a new way to mix static and personalized content.

Astro

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

▶  The “Other” C in CSS — A practical, technical hour-long talk from this year's CSS Day conference about accessibility, and how CSS affects the semantic accessibility of our HTML.

Sara Soueidan

💬 Another talk from CSS Day recently put on YouTube is this presentation from Josh Comeau on how to teach CSS, focusing on some of the mental models and analogies that help make CSS click.

How to Animate to height: auto (and Other Intrinsic Sizing Keywords) — An often requested CSS feature is the ability to animate to height: auto and CSS’s interpolate-size property and the calc-size() function provide a way to do this, though it’s limited to Chrome 129+ for now.

Bramus (Chrome)

Streamline Your Product Delivery with monday dev — From ideation to launch, monday dev makes product delivery faster and simpler, all in one place.

monday dev sponsor

The State of ES5 on the Web — Early JavaScript build tools often focused on allowing modern features to be used on the Web at the time by compiling down to ES5 code that could run anywhere. Time has moved on, but have the tools or popular libraries? Philip investigates, and shares some recommendations.

Philip Walton

Logical Properties in Size Queries — “We may need size-based media queries for some time yet, and being able to use logical properties with them would certainly be useful”.

Michelle Barker

😢 The Continuing Tragedy of Emoji on the Web — Nolan laments “how half-heartedly browsers and operating systems have worked to keep their emoji up to date”.

Nolan Lawson

Two CSS Properties for Trimming Text Box Whitespace — Specifically, text-box-trim and text-box-edge, two fine-grain properties to trim specific amounts of whitespace around text. Support is limited, and only behind a feature flag for now.

Daniel Schwarz

Let’s Bring Back Browsing — “To “surf the web” implied fun and adventure and to “browse” implied serendipity. And we seem to have lost that. Let’s go back”.

Christian Heilmann

A Step-by-Step Guide to Conducting a Web Accessibility Audit
Melissa Morse

🔧 Code, Tools & Resources

The First HTML LSP That Reports Syntax Errors — A new Language Server for HTML that catches various syntax errors (either in popular editors such as VSCode or as a CLI tool). It claims to deliver immediate feedback on HTML errors, and common typos.

Loris Cro

Run GitHub Actions Up to 2x Faster at Half the Cost — Blacksmith runs GitHub Actions up to 2x faster at half the cost. Trusted by 100+ companies like Ashby and Slope.

Blacksmith sponsor

@bramus/caniuse-cli: A CLI Tool for “Can I Use” — Bramus has built an (offline) command line tool for the always useful Can I Use and MDN’s browser-compat-data. The npm package is here. Once installed, use caniuse at the command line to query. Handy!

Bramus Van Damme

DECK.GL: GPU-Powered Large-Scale Data Visualization Framework — Particularly well suited to geospatial data visualization use cases that go beyond typical 2D views. There are plenty of examples to show you what it can do. Can be used through both vanilla JS and React interfaces.

OpenJS Foundation

Free Public APIs: A Collection of Free Public APIs for Developers — Categorized and searchable, these are tested daily via bots so if any API is taken down or moved behind a paywall, it gets removed from the site.

Nick Schneeberger

AIEditor: A Next-Generation Rich Text Editor with AI Features — Based on Web Components so it can be integrated with any framework, has real-time collab, Markdown-friendly, and includes AI capabilities like spelling/grammar checks, one-click translation, and more. (LGPL licensed with a 'pro' option.)

AIEditor

11ty-Serene: A Minimal Landing Page Theme for Eleventy — Styled with Tailwind and includes scroll-reveal effects. (Eleventy / 11ty is a popular Node.js-powered static site generator.)

Kevin Zhong

Dev Utilities: A Suite of Free, Open Source, Ad-Free Tools for Developers
jam

Slimify: Fast and Lossless Image Compression for JPEG, PNG, and WebP
Slimify

🕰️ ICYMI (Older links, still worth checking out)

Ipx.