Catching Up on the WordPress & WP Engine Situation — There’s been plenty of continued drama in the WordPress world between Automattic and WP Engine — and this post attempts to bring us up to speed. More has happened since including ▶️ Matt Mullenweg sitting down with Theo Browne for a chat about the situation, and some new terms have been shared.

Geoff Graham

The HTTP QUERY Method — A draft spec for a new QUERY HTTP method, a “safe, idempotent request method that can carry request content”. It’s said to be desirable “when the data conveyed in a request is too voluminous to be encoded into the request’s URI”. It's not quite GET, but it's not quite POST..

Reschke, Malhotra, Snell, Bishop

Build a Native App Experience with PWAs — Join Maximiliano Firtman for a detailed video course exploring how to create installable, offline-capable web apps. You'll learn how to create impressive Progressive Web Apps, explore various UI techniques, dig into how best to test and debug, and how to deploy your efforts to end users.

Frontend Masters sponsor

Web Components Are Okay — Spent any time on social this week? You may have spotted many in the frontend community talking about and questioning the overall merit and utility of Web Components. Nolan ties a few of these arguments together, concluding that folks are generally “talking past each other because they’re building different things with different constraints”.

Nolan Lawson

CSS Masonry & CSS Grid — As mentioned last week, steam is picking up on a formal CSS solution for masonry layouts, but with two competing proposals and lots of various opinions on both flying around, it’s good to take a high-level overview of where things stand — that’s what this is.

Geoff Graham

📙 Tutorials, Articles & Opinion

Interview With Björn Ottosson, Creator of the Oklab Color Space — A chat with the Swedish engineer who created the Oklab color space, covering how he approached developing an effective model, with good hue uniformity, while also handling lightness and saturation well.

Philip Jägenstedt

What’s the Difference Between HTML’s Dialog Element and Popovers? — Whilst pretty similar in both look and functionality Chris highlights the important distinctions, differing APIs, and overall use cases.

Chris Coyier

How To Manage Dangerous Actions In User Interfaces — An exploration of different strategies we can use to prevent users from making mistakes (such as unintentionally sending an email, placing an order, hitting publish on something, etc).

Victor Ponamariov

🗓️ ViteConf is Tomorrow! — Last chance to get your ticket to ViteConf 2024!

StackBlitz sponsor

How To Make a “Scroll To Select” Form Control — This is an interesting little experiment, turning the humble <select> element into a dial of sorts, kinda like the scrollable date picker often seen on iOS. You select an option by scrolling it into position.

Preethi Sam

▶  Fundamentals of Frontend Architecture — A free video course that covers “everything you need to know to build robust and scalable frontend applications”. It covers architectural drivers, documentation, decision making, prototyping, implementation, and more.

Maxi Ferreira

SVG Coding Examples: Useful Recipes for Writing Vectors by Hand — Explores the basics of hand-coding SVGs, how to leverage JavaScript along the way, plus practical examples to demystify the inner workings of common SVG elements.

Myriam Frisano

WorkOS: Start Selling to Enterprises with Just a Few Lines of Code — A modern B2B SaaS identity platform with APIs for SSO, SCIM, RBAC. Trusted by top startups.

WorkOS sponsor

Four Tips for Unlocking the Benefits of Svelte in Frontend Development
Eleanor Hecks

Why I Prefer WebStorm Over Visual Studio Code for Web Development
Rob Bell

🔧 Code, Tools & Resources

CrUX Vis — A new, experimental, browser-based Chrome User Experience Report (CrUX) tool to allow you to visualize CrUX History API data. This related blog post from Matt Zeunert explains what it does in more detail.

Jamison O'Keefe

Eleventy v3.0 Is Now Available — A popular Node.js-based static site generator. This release is written in ESM with full ESM support, is 20% smaller, has 11% fewer dependencies, and installs faster. The Eleventy Image utility hit v5 too.

Zach Leatherman

tailwind-to-inline: A Tailwind CSS to Inline Styles Converter — The target use case is email template creation. Quickly craft the templates using Tailwind CSS, but then inline everything for the final version.

Vardan Hakobyan

OctoPalm.js: A Lightweight JavaScript Utility to Add Customizable Search Functionality to Your Apps — Includes features like animated results, customizable scrollbars for lengthy search lists, and real-time results as the user types.

Eddie Gulay

TinyJS: A Lightweight Library to Easily Generate and Customize DOM Elements — Includes a jQuery-like syntax for element selection, iteration, and appending content and adding properties to elements. Nothing you couldn’t do with vanilla JS, but a much simpler API.

Victor Ribeiro

The First Public Working Draft of CSS Grid Level 3 / Masonry Layout — This new draft represents progress on masonry layout as a built-in capability of CSS in two possible syntactic forms: a grid-integrated syntax, and a grid-independent syntax, both outlined as alternatives. The CSSWG has resolved to adopt fully mixed track sizing for this new layout model, allowing all the possible track listings expressible in CSS Grid for masonry layouts too.

W3C

▶  CSS Masonry Layouts — As we’ve covered in recent months (and as alluded to above) there’s differing, strong opinions on how best masonry layouts should finally be realised in CSS. Nicole does a good job of bringing us up to speed on the various sides both clearly and fairly.

Nicole Sullivan

💬 Related: Rachel Andrew makes the case for a separate display: masonry value.

How To Make Your Web Page Faster Before It Even Loads — What about the events that happen before the first byte of a web page is received by the browser? Read from Salma Alam-Naylor, how to measure those events and optimize them to make web pages and applications load even faster.

Sentry sponsor

How Josh W. Comeau Rebuilt His Blog, App Router Style — We’re huge fans of Josh’s blog (particularly its wealth of CSS articles). He’s just rebuilt it entirely using Next.js, MDX, Sandpack, and an array of other technologies, and gives a detailed, behind the scenes look at a modern React-driven frontend project.

Josh W Comeau

Get Ready for Interop 2025: Your Chance to Shape the Web — An invite to “help shape the future of web interoperability”. Submissions for ideas/proposals are being taken now, with the deadline on October 9th. Here’s what 2024 has focused on.

Nicole Sullivan

📙 Tutorials, Articles & Opinion

Improving Rendering Performance with CSS content-visibility — When a page has 20,000 custom emoji on it, things may well get a touch slow. Nolan set out to fix things.

Nolan Lawson

A Redesign Case Study — Like Josh Comeau (above), Ahmad Shadeed, whose excellent frontend articles we often feature, has too recently rebuilt his website, though with a stronger focus on the design. This case study digs into his rationale and process.

Ahmad Shadeed

AI for Front-End Devs: Faster Code Reviews, Fewer Bugs — Streamline your front-end code reviews with AI-driven insights. Improve UI, performance, and code quality faster.

CodeRabbit sponsor

The Frontend Treadmill — Some candid advice and musings on the frontend ecosystem, technical decisions, and wasted energies: “our current framework layer is working against the grain instead of embracing the platform”.

Marco Rogers

Monitor Your Local and Real-User Core Web Vitals Performance in Chrome 129 — The latest Chrome features a completely redesigned Performance panel landing page featuring a live view of your local Core Web Vitals performance.

Rick Viscomi

How to Create a Chrome Extension with React, TypeScript, Tailwind CSS and Vite — Covers everything you need to know right through to publishing in the Chrome Web Store.

Lokman Musliu

Clever Polypane Debugging Features I'm Loving — A nice look at some of the handy features to be found in the stand-alone dev browser, Polypane.

Ryan Trimble

Mobile Accessibility Testing: Enhancing User Experience for All
Caitlin de Rooij

How to Defer Offscreen Images and Background Images
Anna Monus

▶  The Easy Way to Understand Flexbox Alignment
Kevin Powell

🔧 Code, Tools & Resources

Dark Patterns Hall of Shame: Learn About Dark Patterns and Unethical Designs — Real examples showcasing what not to do in UI design, with details/screenshots from real websites that have made such poor UI choices.

Dark Patterns Hall of Shame

CSS Almanac — The almanac over at CSS Tricks has been spruced up. It’s a great resource packed with references for various CSS selectors and properties.

Geoff Graham

Generate Dynamic JSON Forms and Collect Data Right in Your App — Integrate SurveyJS UI libraries to design secure, custom forms in minutes. Code-free interface, easy integration with any backend, and fully customizable.

SurveyJS sponsor

Vue-Multiselect 3.1: A Complete 'Selecting Solution' for Vue.js — There’s a lot on offer here, complete with SSR support, Vuex support, strong test coverage, and with no dependencies.

Damian Dulisz et al.

Departure Mono: Monospace Pixel Font with a Lo-Fi Technical Vibe — It’s open source and takes inspiration from “the constraints of early command-line and graphical user interfaces”, along with late 90s and early 2000s pixel fonts. Cool website!

Tobias Fried

blocks.md: Generate Forms and Web Pages from Markdown — Not a free tool, but an interesting one to try out. It has its own syntax along the lines of something like Haml or Pug, and you can use it free locally.

blocks.md

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

📙 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

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

📙 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

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