On AI Gods, Interns and Cogs–your weekend reading
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
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.
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
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.
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
- a11y , accessibility , Design , typography
Discover the key characteristics of accessible fonts and learn best practices for selecting and combining typefaces that ensure readability for all users.
Smarter than ‘Ctrl+F’: Linking Directly to Web Page Content
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!
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
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.
The Interactive Guide to Rendering in React
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.
Recommended by LinkedIn
From there, React takes that description of the UI and uses it to update the View.
An in-depth look at rendering in React.
Oh and have you see what we've got in store for React devs at Dev Summit ?.
Where web components shine
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.
On of the characteristics of experienced developers is 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).
And we don't only have sessions on Web Components at Dev Summit, we have an entire optional Web Components workshop !
A Plea for Sober AI
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 boosters – we’re disappointed.
This article was one of the most cogent framings of what we are getting right and wrong about working with generative AI.
Something we'll be covering in detail from an engineering perspective at Dev Summit and from a design and product perspective at Next .
Unleash The Power Of Scroll-Driven Animations
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!
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.
There is of course loads of CSS related content at Dev Summit!
The 3 AI Use Cases: Gods, Interns, and Cogs
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.
These are the kinds of discussions I think are most valuable about AI and ML right now, particularly when to comes to their use. Not the imagine of tech CEOs, or the self 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.
Want to learn more–you know where to come!