Weekly newsletter 25/10/2024
This week in the newsletter with 5 weeks to Web Directions Dev Summit and Next, we’re rounding up a bunch of things we’ve taken notice of this week.
Each week we read hundreds of articles, watch videos and listen to podcasts to bring you those we think you should be paying attention to. Hours of reading and analysis a week distilled to a just few minutes reading for you.
Then a couple of times a year we distil it all down into conference programs–which you can attend in person, or online.
Keeping up with our industry can feel like a full time job–so why not make it ours?
A Very Brief History of Design Systems, Part 1
October 25, 2024
In our modern digital era, the term design system is primarily associated with user interface (UI) development. It describes a structured set of components, guidelines, tools, etc. used to deliver consistent digital experiences. But if we broaden the definition and apply it to history, “design systems,” or systematic design—whether in architecture, publishing, or manufacturing—have been integral in driving human innovation since the dawn of time.
Source: A Very Brief History of Design Systems, Part 1 | by Jim Gulsen | Oct, 2024 | Medium
We’re suckers for a bit of history here at Web Directions–so here’s one on Design Systems, and the lessons we can learn.
A world without passwords is in sight
October 25, 2024
Apple thinks 249 of my passwords need attention. Some of them have been reused. Some of them have been caught up in data breaches. Some are just bad passwords. That’s why, for the past 11 years, a group called the FIDO Alliance has been working to kill passwords — or at least make us less reliant on them. FIDO, short for Fast IDentity Online, wants to make signing into your accounts not only more secure but also, as the name implies, faster and easier.
Since its members include Amazon, Apple, Google, Meta, and other architects of our online experience, the FIDO Alliance is in a position to accomplish this, too.
…
Passkeys promise to fix many of the problems passwords created. Thanks to FIDO and W3C, the consortium that manages the standards for the World Wide Web, there is now an agreed-upon workflow for passkeys to replace passwords entirely.A world without passwords is in sight
We’ve covered passwords, authentication and passkeys a number of times over the years–from a technology and a design perspective.
Here Vox.com rounds up a path to a passwordless future.
What Makes a Font Accessible? A Designer’s Guide
October 24, 2024
Discover the key characteristics of accessible fonts and learn best practices for selecting and combining typefaces that ensure readability for all users.
Source: What Makes a Font Accessible? A Designer’s Guide – The A11Y Collective
Smarter than ‘Ctrl+F’: Linking Directly to Web Page Content
October 24, 2024
Historically, we could link to a certain part of the page only if that part had an ID. All we needed to do was to link to the URL and add the document fragment (ID). If we wanted to link to a certain part of the page, we needed to anchor that part to link to it. This was until we were blessed with the Text fragments!
Source: Smarter than ‘Ctrl+F’: Linking Directly to Web Page Content
You’ve no doubt noticed links into specific selections on a web page. Now that browsers hide most of a URL unless you explicitly go looking you might not have noticed how it’s done–this article explains.
Clarifying The Relationship Between Popovers And Dialogs
October 24, 2024
The difference between Popovers (i.e., the popover attribute) and Dialogs (i.e., both the element and the dialog accessible role) is incredibly confusing — so much that many articles (like this, this, and this) have tried to shed some light on the issue.
If you’re still feeling confused, I hope this one clears up that confusion once and for all.
…
Here’s a quick summary of the mental model:
- Popover is an umbrella term for any kind of on-demand popup.
- Dialog is one type of popover — a kind that creates a new window (or card) to contain some content.
Source: Clarifying The Relationship Between Popovers And Dialogs | CSS-Tricks
Excellent examination of how these two relate.
The Interactive Guide to Rendering in React
October 24, 2024
What is rendering?Put simply, rendering is just a fancy way of saying that React calls your function component with the intent of eventually updating the View.When React renders a component, two things happen.
First, React creates a snapshot of your component which captures everything React needs to update the view at that particular moment in time. props, state, event handlers, and a description of the UI (based on those props and state) are all captured in this snapshot.
From there, React takes that description of the UI and uses it to update the View.
Source: The Interactive Guide to Rendering in React
An in-depth look at rendering in React.
Where web components shine
October 23, 2024
In this job we need to think a lot about the tools we choose and why, so I cataloged all the places where web components (for me) feel like “the right tool for the job”. Your list may be different and I’d love to read it. And because I don’t want this to be 100% propaganda, I’ll also cover some of the not-so-great parts of web components as well.
Source: Where web components shine – daverupert.com
On of the characteristics of experienced developer sis knowing what tools, patterns and technologies are appropriate in particular situations–not everything is a nail since you have more than a hammer at your disposal.
Here Dave Rupert asks when are Web Components the right tool for a job (and when are they not so).
A Plea for Sober AI
October 23, 2024
So why is this hype bad? Why can’t we wallow in the promise of AI for a few days? What’s wrong with pretending these carefully managed demos aren’t casual one-take affairs?
The hype is so loud it washes out the true magic of these products.
Oddly, the best example of this is from another of those hype hangover articles, this time Julia Angwin’s piece in The New York Times Opinion section, “Press Pause on the Silicon Valley Hype Machine.” In it she writes:
The reality is that A.I. models can often prepare a decent first draft. But I find that when I use A.I., I have to spend almost as much time correcting and revising its output as it would have taken me to do the work myself.
Read that again. And again, until the absurdity of it sinks in.
We have software that can write a “decent first draft” in a few seconds, for free or for a few cents, and we’re disappointed.
Thanks to the constant hype – from OpenAI, Google, and countless other companies and boosters2 – we’re disappointed.
Source: A Plea for Sober AI | Drew Breunig
I think this captures well the limiting nature of AI hype.
Unleash The Power Of Scroll-Driven Animations
October 23, 2024
- A scroll-driven animation is an animation that responds to scrolling. There’s a direct link between scrolling progress and the animation’s progress.
- Scroll-driven animations are different than scroll-triggered animations, which execute on scroll and run in their entirety. Scroll-driven animations pause, play, and run with the direction of the scroll. It sounds to me like scroll-triggered animations are a lot like the CSS version of the JavaScript intersection observer that fires and plays independently of scroll.
- Why learn this? It’s super easy to take an existing CSS animation or a WAAPI animation and link it up to scrolling. The only “new” thing to learn is how to attach an animation to scrolling. Plus, hey, it’s the platform!
Source: Unleash The Power Of Scroll-Driven Animations | CSS-Tricks
Scroll-driven animations are a relatively new but already well supported CSS feature, that leverages existing CSS animations in ways that needed JavaScript until now.
The 3 AI Use Cases: Gods, Interns, and Cogs
October 22, 2024
It gets confusing! For laypeople, it’s hard to nail down what AI actually does (and doesn’t) do. For those in the field, we often have to break down and overspecify our terms before we can get to our desired conversations.After plenty of discussions and tons of exploration, I think we can simplify the world of AI use cases into three simple, distinct buckets:
- Gods: Super-intelligent, artificial entities that do things autonomously.
- Interns: Supervised copilots that collaborate with experts, focusing on grunt work.
- Cogs: Functions optimized to perform a single task extremely well, usually as part of a pipeline or interface.
Let’s break these down, one by one.
Source: The 3 AI Use Cases: Gods, Interns, and Cogs | Drew Breunig
These are the kinds of discussions I think are most valuable about AI and ML right now, particularly when ti comes to their use. Not the imagine of tech CEOs, or the set appointed linkedin experts, but nuanced consideration, grounded in experience.
I use these tools as interns and cogs, incredibly effectively a lot of the time. The hype is around the gods–speculative nonsense.
Stay grounded. Experiment. Share.
Great reading, every weekend.
We round up the best writing about the web and send it your way each Friday.