---
title: "The Web Components debate"
publication: "Frontend Focus"
issue: 662
published_at: "2024-10-02"
canonical_url: "https://frontendfoc.us/issues/662"
---

Plus a new HTTP QUERY method, and the WordPress drama continues... |       

Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/pwas-v2/?utm_source=email&utm_medium=frontendfocus&utm_content=pwasv2)        

🚀 **Frontend** Focus 

#​662 — October 2, 2024 | [Read on the web](https://frontendfoc.us/issues/662)      

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1727869013/z4oc3tyb0pppvyqmayjc.png)](https://css-tricks.com/catching-up-on-the-wordpress-wp-engine-sitch/)  

[Catching Up on the WordPress & WP Engine Situation](https://css-tricks.com/catching-up-on-the-wordpress-wp-engine-sitch/) — There’s been plenty of [continued drama](https://techcrunch.com/2024/09/25/wordpress-org-bans-wp-engine-blocks-it-from-accessing-its-resources/) 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](https://ma.tt/2024/09/t3/) about the situation, and [some new terms](https://automattic.com/2024/10/01/wpe-terms/) have been shared. 

Geoff Graham   

[The HTTP `QUERY` Method](https://www.ietf.org/archive/id/draft-ietf-httpbis-safe-method-w-body-05.html) — 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   [![\](https://copm.s3.amazonaws.com/59c9dfbf.png)](https://frontendmasters.com/courses/pwas-v2/?utm_source=email&utm_medium=frontendfocus&utm_content=pwasv2) 

[Build a Native App Experience with PWAs](https://frontendmasters.com/courses/pwas-v2/?utm_source=email&utm_medium=frontendfocus&utm_content=pwasv2) — 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](https://nolanlawson.com/2024/09/28/web-components-are-okay/) — Spent any time on social this week? You may have spotted many in the frontend community [talking about](https://lea.verou.me/blog/2024/wcs-vs-frameworks/) and [questioning the overall merit](https://www.abeautifulsite.net/posts/web-components-are-not-the-future-they-re-the-present/) and [utility of Web Components](https://dev.to/ryansolid/web-components-are-not-the-future-48bh). 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](https://css-tricks.com/css-masonry-css-grid/) — As mentioned last week, steam is picking up on [a formal CSS solution](https://www.w3.org/blog/CSS/2024/09/24/css-grid-3-fpwd/) 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     

⚡️ Quick Links 

- 🆕 Rachel Andrew brings us [up to speed on what was new to the web platform in September](https://web.dev/blog/web-platform-09-2024), including Chrome and Edge adding `calc-size()` support.
- 🧭 Safari Technology Preview 204 [is now available](https://www.webkit.org/blog/15978/release-notes-for-safari-technology-preview-204/) with updates to Accessibility, CSS, Forms, JavaScript, Service Workers, and more.
- 💰 Evan You has [raised a good chunk of change](https://voidzero.dev/posts/announcing-voidzero-inc) for a new "unified development toolchain for the JavaScript ecosystem".
- ✨ Google has cash prizes up for grabs as part of [a new Chrome 'Built-in AI' challenge](https://x.com/ChromiumDev/status/1841148935345218045).     

📙 **Tutorials, Articles & Opinion**  [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1727874678/woplmqentlt2ssavrvqe.png)](https://www.smashingmagazine.com/2024/10/interview-bjorn-ottosson-creator-oklab-color-space/) 

[Interview With Björn Ottosson, Creator of the Oklab Color Space](https://www.smashingmagazine.com/2024/10/interview-bjorn-ottosson-creator-oklab-color-space/) — A chat with the Swedish engineer who created the [Oklab color space](https://en.wikipedia.org/wiki/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?](https://frontendmasters.com/blog/whats-the-difference-between-htmls-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](https://www.smashingmagazine.com/2024/09/how-manage-dangerous-actions-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!](https://viteconf.org/?utm_source=fe_focus&utm_medium=secondary) — Last chance to get your ticket to ViteConf 2024! 

StackBlitz sponsor   [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1727870234/qp31aeksmwmgbh99eig1.png)](https://css-tricks.com/how-to-make-a-scroll-to-select-form-control/) 

[How To Make a “Scroll To Select” Form Control](https://css-tricks.com/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](https://frontendatscale.com/courses/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](https://www.smashingmagazine.com/2024/09/svg-coding-examples-recipes-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](https://workos.com/?utm_source=fefocus&utm_medium=newsletter&utm_campaign=q42024) — 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](https://frontenddogma.com/posts/2024/4-tips-for-unlocking-the-benefits-of-svelte-in-frontend-development/) 
Eleanor Hecks   

[Why I Prefer WebStorm Over Visual Studio Code for Web Development](https://spin.atomicobject.com/why-i-prefer-webstorm-over-visual-studio-code-for-web-development/) 
Rob Bell  

🔧 **Code, Tools & Resources** 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1727869647/pajrhrrg5btclffixleb.png)](https://cruxvis.withgoogle.com/#/)  

[CrUX Vis](https://cruxvis.withgoogle.com/#/) — 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](https://www.debugbear.com/blog/google-crux-vis) explains what it does in more detail. 

Jamison O'Keefe   

[Eleventy v3.0 Is Now Available](https://github.com/11ty/eleventy/releases/tag/v3.0.0) — 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](https://github.com/11ty/eleventy-img/releases/tag/v5.0.0) utility hit v5 too. 

Zach Leatherman   

[tailwind-to-inline: A Tailwind CSS to Inline Styles Converter](https://www.npmjs.com/package/tailwind-to-inline) — 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](https://github.com/eddiegulay/octopalm) — 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](https://github.com/victorqribeiro/TinyJS) — 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    

📬 

**Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). 

--- 

**Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). 

--- 

**Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. 

--- 

Published by Cooper Press Ltd.
Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86).
Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom 

[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)  

[Ipx.](https://frontendfoc.us/open/662/*|UID|*?ipx=t)
