Elsewhere
Things we find interesting we think you might too.
Don’t Disable Form Controls — Adrian Roselli
Source: Don’t Disable Form Controls — Adrian Roselli
On Spatial Computing, Metaverse, the Terms Left Behind and Ideas Renewed — MatthewBall.co
As computer networking, graphical user interfaces, and games entered the mainstream in the 1980s and early 1990s, there was a rash of terms and ideas put forward to describe what we were doing, would soon do, and might eventually do. Source: On Spatial Computing, Metaverse, the Terms Left Behind and Ideas Renewed — MatthewBall.co
Design Patterns Catalogue
The Design patterns catalogue is curated by IF to help teams design trustworthy services that work for people. Think of it as the opposite of deceptive patterns.
Going beyond pixels and (r)ems in CSS – Relative length units based on font – iO tech_hub
There are a lot of CSS units available at the moment and we mostly still rely on pixels and (r)ems for our sizing and fonts. I say it’s time to do a little freshening up. Instead of writing a list of which units are available in CSS that you can easily find on MDN as well, I thought I’d give some examples of where they could come in handy. I will create a mini-series out of this and for the first part, let’s start off with relative length units based on font Source: Going beyond pixels and (r)ems in CSS – Relative length units based on font – iO tech_hub
SpeedCurve | Mobile INP performance: The elephant in the room
However, after several months of discussing the impending change and getting a better look at INP issues in the wild, it’s hard to ignore the fact that mobile stands out as the biggest INP offender by a wide margin. This doesn’t get talked about as much as it should, so in this post we’ll explore: The gap between “good” INP for desktop vs mobile Working theories as to why mobile INP is so much poorer than desktop INP Correlating INP with user behavior and business metrics (like conversion rate) How you can track and improve INP for your pages Source: SpeedCurve | Mobile INP performance: The elephant in the room
“AI Inside” | Adam Stoddard
Tech companies are scrambling to stake their claims in the AI gold rush, and — on top of the legal and ethical woes they’re leaving in their wake — a lot of them are shipping surprisingly bad product. The tell? If the name focuses on “✨AI”, brace yourself. Source: “AI Inside” | Adam Stoddard
Basic Dialog Usage and Gotchas To Watch For – Frontend Masters Boost
The element in HTML is tremendous. We’ve got support across the board now, so using it is a smart plan. Just with basic usage, you get a centered modal dialog experience that comes up when you call it, a dimmed background, focus trapped within it, closes with the ESC key, and focus returning where it came from. You can style it all entirely predictably in CSS. Those things range from a little bit of a pain to downright hard to pull off if left to our own implementations. Now we get them all for free as they say. Source: Basic Dialog Usage and Gotchas To Watch For – Frontend Masters
The web just gets better with Interop 2024 | WebKit
The Interop project aims to improve interoperability by encouraging browser engine teams to look deeper into specific focus areas. Now, for a third year, Apple, Bocoup, Google, Igalia, Microsoft, and Mozilla pooled our collective expertise and selected a specific subset of automated tests for 2024. Some of the technologies chosen have been around for a long time. Other areas are brand new. By selecting some of the highest priority features that developers have avoided for years because of their bugs, we can get them to a place where they can finally be relied on. And by selecting exciting new technology, we can ensure it’s interoperable from the beginning. To better
drab
drab focuses on providing JavaScript functionality where it’s most useful. Many of the elements are helpful wrappers around browser APIs. Here are some of the features of the library. Source: drab
Igalia Chats: A Lighter Shade of DOM | Igalia – Open Source Consultancy and Development
Igalia’s Brian Kardell and Eric Meyer chat with Miriam Suzanne about the Shadow DOM, use cases, and ‘open styling’ problems Source: Igalia Chats: A Lighter Shade of DOM | Igalia – Open Source Consultancy and Development
X marks the spot: Landmark elements
Imagine you had to describe the way through a building to someone without being able to point out certain things that the person could use for orientation: “First you go through the thing to get into the thing. Take the thing upstairs because the other thing is broken. After you have gone past a row of things, there is a thing that you have to climb up. Once at the top, press the thing so that you can find the thing with the things more easily.” You’ll have a rough idea of what to do, but you’ll have to work your way up most of the way by trial and
SpeedCurve | The psychology of site speed and human happiness
In the fourteen years that I’ve been working in the web performance industry, I’ve done a LOT of research, writing, and speaking about the psychology of page speed – in other words, why we crave fast, seamless online experiences. In fact, the entire first chapter of my book, Time Is Money (reprinted here courtesy of the good folks at O’Reilly), is dedicated to the subject. I recently shared some of my favourite research at Beyond Tellerrand (video here) and thought it would be fun to round it up in a post. Here we’re going to cover: Source: SpeedCurve | The psychology of site speed and human happiness
The Good, The Bad, The Web Components—zachleat.com
WEB COMPONENTS ARE ALREADY A SUCCESS STORY Despite some notable criticism, web components are already widely used across the web.In August 2023, Chrome Platform Status reports that 19.4% of page loads in Google Chrome were using a web component (via the CustomElementRegistryDefine key). For comparison was at 15% and CSS Grid at 20%.You can check out more social proof on: Are Web Components A Thing Yet? They are particularly popular in large enterprise design system implementations. Source: The Good, The Bad, The Web Components—zachleat.com
It feels like React is getting a bit of a kicking recently – Piccalilli
I talk about an apparent attitude shift in attitude towards React in the community and also make some recommendations about decision-making for your projects. Source: It feels like React is getting a bit of a kicking recently – Piccalilli
How we reduced CSS size and improved performance across GOV.UK – Government Digital Service
We recently reduced CSS size and improved performance across GOV.UK pages by moving away from bundling all CSS into a single stylesheet served to all pages to serving smaller stylesheets containing only the necessary styles for each page. There have been reductions of up to 40% in CSS size on some pages, accompanied by incremental improvements in timing metrics across many pages. These improvements could lead to a slightly faster experience for users accessing GOV.UK through older or low end devices or for people on slower connections. Source: How we reduced CSS size and improved performance across GOV.UK – Government Digital Service
The Performance Inequality Gap, 2024 – Infrequently Noted
The global device and network situation continues to evolve, and this series is an effort to provide an an up-to-date understanding for working web developers. So what’s changed since last year? And how much HTML, CSS, and (particularly) JavaScript can a new project afford? Source: The Performance Inequality Gap, 2024 – Infrequently Noted
How Core Web Vitals affect application SEO: Understanding Google page experience ranking and Lighthouse scores – Vercel
Core Web Vitals influence how your application’s pages rank on Google. Here, we’ll dive into what they are, how they’re measured, and how your users and search ranking are impacted by them. Source: How Core Web Vitals affect application SEO: Understanding Google page experience ranking and Lighthouse scores – Vercel
Field-sizing just works! | Polypane
field-sizing is wild. It’s a new CSS property that makes input and textarea automatically scale to the size of their content. Source: Field-sizing just works! | Polypane
HTML Web Components on the Server Are Great | Scott Jehl, Web Designer/Developer
I’ll start this post by echoing what many others have been saying: Web Components are having a moment lately! After a decade dominated by fragile, complicated, and slow Single-Page Application delivery patterns, it’s refreshing to see folks stepping back to look for simple, resilient, standards-based alternatives… and discovering Web Components. Meanwhile, there’s an understandable “what took so long?” sentiment coming from many folks who have been happily using web components for a long time.That’s even more true of “HTML Web Components,” a new term describing a judicious use of a subset of Web Components’ feature set, since that subset has been supported across browsers for many years. Better late than
On Web Components – macwright.com
There’s just this assumption that now that React is potentially on its way out (after a decade-long reign! not bad), the natural answer is Web Components. And I just don’t get it. I don’t get it. I think I’m a pretty open-minded guy, and I’m more than happy to test everything out, from Rails to Svelte to htmx to Elm. It’s all cool and good. Source: On Web Components – macwright.com
jakelazaroff.com
I don’t see web components on their own as a huge productivity boon for individual websites. Once you’ve bought into a particular set of technologies, it makes sense to use it for as much as you can. If you have a React app, you’d be justifiably skeptical of introducing a second way to build components! Rather, the biggest benefits I see are collective, cutting across the industry as a whole. I think web components can make the entire web more accessible. They have the potential to unify currently fragmented communities, including various JavaScript frameworks and those who avoid them. Source: jakelazaroff.com
The Website vs. Web App Dichotomy Doesn’t Exist | jakelazaroff.com
You don’t need to wade far into web development discourse to hear about the website vs. web app dichotomy. It posits that websites can be grouped into two categories: mostly static “documents” with little user interaction beyond following links, and “applications” that involve rich dynamic behavior. Usually, people invoke it to talk about the use, abuse or avoidance of JavaScript frameworks. A more nuanced view is that there’s a spectrum between website and web app, and that where a project sits determines which technologies are appropriate to build it. The implication is that at some point, it makes sense to use a JavaScript framework rather than progressively enhanced HTML. Web
Removing React is just weakness leaving your codebase — Begin Blog
Well, there must have been something in the zeitgeist, as we’ve seen a spate of articles where developers are voicing their displeasure with React. Increasingly miffed about the state of React releases by Tom MacWright Kind of annoyed at React by Cassidy Williams React, where are you going? By Matteo Frana The Decline of React by Chris Ferdinandi Concatenating text by Johan Halse It’s not that React has been immune to criticism, as Zach Leatherman has detailed in his post A Historical Reference of React Criticism, but it sure seems like we’ve reached a tipping point. Source: Removing React is just weakness leaving your codebase — Begin Blog
Are Design Systems a zero-interest rate phenomenon? | daverupert.com
So are design systems a zero-interest rate phenomenon? No. Well, maybe. Depends on who you ask. If I need to build 5-10 pages, I can do those one at a time without much of a system. If I need to create or update hundreds or thousands of pages, or five different applications, then I need a system of components so that when I traverse those projects I don’t have to read a ten thousand page mystery to understand what the hell is going on. A handful (20~30) trusty components with some state-driven variants can power infinite applications with perfect consistency in a relatively short amount of time. That is certainly