整理并总结下面的文章，返回50字摘要，返回为中文









🚀 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


🔗 Google Search now links directly to the Internet Archive for accessing older versions of Web pages – this replaces Google's 'cached' page feature.


™️ Isn't it about time Oracle gave up the JavaScript trademark?


✏️ The latest working draft of the CSS Values and Units Module document has been published.


🎈 Static site generator 11ty is joining Font Awesome in a partnership that will "extend the life expectancy of the project".


🇬🇧 As someone based in the United Kingdom, this common country selector dropdown issue is very relatable.






📙 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)


This one is something of an golden oldie — Robin Rendle explains how rem and em are useful for different jobs, and how we can use them both for extra maintainability and flexibility.


Hossein Yazdi brings together a collection of 20 'super useful' CSS animation libraries.


Here's how to get the width/height of any element with only CSS.


Curious as to which page elements are considered/contribute to the Interaction to Next Paint (INP) metric? Umar Hansa explores what we need to know.






Ipx.