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









🚀 Frontend Focus
#​659 — September 11, 2024 | Read on the web









CSS Display Contents — Ahmad takes a a look at how best to use 'display: contents' in order to build more fluid layouts. As ever with Ahmad’s work, there are plenty of code examples and use cases to help our understanding.
Ahmad Shadeed 


The Undeniable Utility of CSS :has — Josh has spent the past few months rebuilding his blog using modern CSS techniques, including the :has pseudo-class. Here he reflects on just how useful it is by way of some real-world use cases and some ‘mindblowing’ experiments.
Josh W. Comeau 



The Frontend Masters Knowledge Quest Sale Is Going on All Week! — The Frontend Masters Knowledge Quest sale is now on! There's four new learning paths (including JS performance and code architecture) with more epic courses on the way throughout 2024 and beyond.
Frontend Masters sponsor



CSS Triggers — If you want to write more performant CSS, then understanding how things are rendered (layout, paint, and composite) across the three main browser engines is always going to be handy knowledge. This site brings together findings across a series of CSS properties.
Andrico Karoulla 


A Complete Guide to Beginning with JavaScript — A rather epic article packed with background knowledge, context, and third party resources for starting a modern JavaScript learning journey.
Cody Lindley 




⚡️ Quick Links


🔠 Modern Web fonts have many more features available within them than you might expect..


🤖 /llms.txt is a proposed file that sites could provide for large language models to better use a site's features at inference time.


😵 Firefox is joining other browsers in finally 'unshipping' HTTP/2 Push support.


🛠️ Is immediately jumping for added tooling just a form of premature optimization when it comes to building Web sites?






📙 Tutorials, Articles & Opinion

Sticky Headers and Full-Height Elements: A Tricky Combination — Philip warns that sticky elements often don’t play nicely if they have to coordinate with other elements to make up a combined height (such as 100vh). This post explores why this happens and offers up a solution.
Philip Braunen 


Brand New Performance Features in Chrome DevTools — A helpful look into Chrome’s updated Performance Panel and all the different metrics it shows off to help you improve the performance of your site.
Umar Hansa (DebugBear) 


[Workshop] Fix Your Front-End: JavaScript Edition — Learn practical tips to make debugging more tolerable. Join our JavaScript team live for a masterclass on Sept 24.
Sentry sponsor



Anchor Positioning Quirks — Dives into the various potential ‘head-scratchers’ that you may come up against when working with anchor positioning, breaking them down so you’ll hopefully have an easier time when you come to use them.
Juan Diego Rodríguez 


A Release Note for the Web Platform — Details of a community-driven effort to create an index of all features across the entire web platform, which will track their availability, and share the latest information via release notes.
Patrick Brosset 


The Web's Clipboard, and How It Stores Data of Different Types — An interesting exploration of how things currently work with copy and pasting on the web, how different data types are treated, and what the Web Custom Formats proposal is putting forward.
Alex Harri Jónsson 


Simplify Data Collection with a Fully Integrated Custom Form Builder — Build dynamic JSON-driven front-end forms of any complexity directly within your app. Integrate with any backend system. Drag-and-drop UI.
SurveyJS sponsor


Time Travelling CSS with :target — A fun look at how you can achieve a kind of ‘primitive version of client-side routing’ solely through the behavior of :target. A fun one.
Lee Mayer 


⬛  Alternatives to Using Pure Black (#000000) for Text and Backgrounds
Dmitry Sergushkin



From Parcel to Vite: A Short Story of a 100K LOC Migration
Gao / Logto



🔧  Code, Tools & Resources




svg.wtf: An SVG Playground to Learn How to Write SVG Code — Includes some useful code-related features like tooltip info on hover, to help understand the different elements, attributes, etc.
Amelia Wattenberger 


Redirect Checker: A URL Redirect Analysis Tool — Includes numerous features to help analyze your redirects, like providing a detailed path analysis, bulk redirect checking, custom user-agent selection, among others.
Sead Feng 


📱  Web Inspector: An iOS/iPadOS App to Expand Mobile Safari with Extra Development Tools — Similar to a desktop browser’s DevTools, this lets you inspect elements, edit styles, run commands in a console, view network requests, and more.
And a Dinosaur 





📰 Classifieds


Blacksmith runs GitHub Actions up to 2x faster at half the cost with a one-line change. Trusted by 100+ companies like Ashby and Slope.




SVGEdit: A Powerful Browser-Based SVG Editor — A fast, web-based, JavaScript-driven SVG drawing editor that works in any modern browser. You can try it live here or host it for yourself.
SVG-Edit Authors 


🇬🇧  GOV.UK Vue: Build Vue Apps, the British Way — The UK government is well known for providing its citizens with an effective, well designed Web site for performing various civic tasks. Now you can get all of their clean components in Vue 3 form.
UK Government 


Open Graph Generator: A Free Tool to Create Meta Tags for Your Pages
Open Graph Generator



StatiCrypt 3.5: Password Protect a Static HTML Page
Robin Moisson



Ninja Backgrounds: Customizable Pure CSS Backgrounds Made with Bootstrap 5
NinjaBootstrap



Ipx.