~frontendfocus | Issue 659 - 'Release notes' for the entire web platform? (17)

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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

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.

🇬🇧  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.