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

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

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

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