[Weekend Drop] Adam Argyle: Complexity Cliffs, DX, and the Disruption of Web Design
The Swyx Mixtape
The Design System Isn't a Phase
A start up isn't a phase. You should not be hardening all your stuff with a hundred % test coverage. What you need to do its build a really good experience that's messy and expressive. And if you try to sit down or predict it all, you'll just never get to the point at which it should have as fast as you can. It's weird, we think we move faster with all these rules and all this stuff, but we end up moving away slower. I've seen you do this rant a couple of times. Am, i think you need to slap a fancy label on it and then put aput into a nice graphic"
The following is my conversation with Adam Argyle, CSS Developer Advocate for Google Chrome.
Watch on YouTube: https://youtu.be/xEyJ6LY7DKI
The conversation covers a quite a few topics that are relevant in the webdev and web design industries: UI complexity cliffs, DX vs UX, Self Disruption, and what Web Design Tooling could be.
Along the way we touch on what OpenUI is, Adam's Deferred Inputs proposal, the 4 Jobs of Developer Experience, Thoughtleading for Good from Emily Freeman, Ilya Grigorik, and Dion Almaier, and Adobe vs Figma vs Webflow!
Links:
- Button tweet https://twitter.com/swyx/status/1450333133300064259
- https://open-ui.org/
- https://jasonformat.com/application-holotypes/
- https://siliconangle.com/2021/09/29/devops-dummies-author-emily-freeman-introduces-revolutionary-model-modern-software-development-awsq3/
- https://en.wikipedia.org/wiki/The_Cathedral_and_the_Bazaar
- Ilya Grigorik Perf.now talk https://www.youtube.com/watch?v=vtIfVPtN6io
- Visbug https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en
- https://web.dev/learn/
Timestamps:
00:00:00 Cold open
00:01:05 Complexity Cliffs and the Reusable Button Problem
00:03:28 OpenUI
00:04:32 DevRel vs Personal work
00:05:52 DRY vs Design Systems
00:07:10 Building in Phases
00:08:04 Thought Leading for Good
00:10:33 Learning
00:14:13 The Surprising Complexity of Tabs
00:17:12 What is Open UI?
00:19:59 Hot Take: Deferred Inputs
00:23:40 Cathedral vs Bazaar
00:28:01 Illya Grigorik: Head/Torso/Tail
00:32:45 UX vs DX
00:45:51 4 Jobs of DX
00:50:33 Self Disruption
00:54:50 Adobe vs Figma vs Webflow
01:01:04 VisBug
01:05:05 Shameless Plugs
Transcript
- swyx: Alright So the first thing we're talking about is ui complexity cliffs what's on your mind what was his first on your on your list.
- Adam Argyle: yeah you had a tweet the other day that was i'm at my fourth startup or something like this and we're pressing buttons again like, how s it 2021.
- swyx: And by guys
- Adam Argyle: Are popping up i needing refactoring or something like How are they not solved and.
- Adam Argyle: i'm sure you had threads of people that have their ideas there and mine was it's a omplexity cliff it's the first introduction, where you as a front end ui person who actually.
- Adam Argyle: is like goingto go build out all this matrix of states that a button needs that it lands on you it's like you've been in the car using a shifter this whole time using a steering wheel this whole time and then someone said hey.
- Adam Argyle: Go change the steering wheel out and you're like oh that's just a component just a single use like that things totally only got like one attachment right, and then you walk up to it and you start working on it you'd like.
- Adam Argyle: To see just like really integrated into the system.
- Adam Argyle: And or whatever right, you have these like discovery moments with it and you realize it's much more complex than it is in a button just does that buttons like yeah well let's allow an icon to be on our button and you're like okay left and right.
- Adam Argyle: sides can be I can have both sides because you could have a shopping cart with a little drop down arrow.
- Adam Argyle: Oh man Okay, and you have to have dark mode you better have this and that and that the matrix like i've seen the of states, is what I mean by this complexity cliff like it's just not visible from the surface, it looks all innocent.
- Adam Argyle: And then you go map it like if you mapped out everything you need it's it's a lot, like the CSS alone that it takes to have like a custom button and the design system is absurd it's absurd, but at the same time I love it anyway.
- swyx: So this is the tweet and question and honestly like this is this is genuine because.
- swyx: yeah I had that to Sigma away, where I had my first front end job and then modify and now it's immoral same stuff again and all did you handle disabled Oh, is it a link, or is it a button.
- swyx: And it was interesting was also just the replies like Nicole from Google So what does she do she like.
- Adam Argyle: beats I worry record directly.
- Adam Argyle: These days, she was on frameworks and she's now shifted to ui and sort of like how did she empower people to build flexible and fluid interfaces on the web.
- Adam Argyle: And that's why she points to open your eyes it's like a community for that, but anyway that i'm part of her team because i'm I work on similar things.
- swyx: Okay yeah and so like you know, first of all I didn't I didn't expect this to reach anyone in Google.
- swyx: But then also like the Web components people reached out to me and they're like how come work a foreign service officer for you and i'm like it's not about the tech.
- swyx: it's more about like understanding the specs of what people wanted people not agreeing what a button should do.
- Adam Argyle: yeah.
- Adam Argyle: yeah Google cloud had had too many.
- Adam Argyle: They had them in multiple frameworks in the same.
- Adam Argyle: repo right being like just because they grew so fast or whatever like your project always gets out of hand and all of a sudden yeah you have more than one button.
- Adam Argyle: which some people have enough time or England one, how are they going to wrinkle two or three and built in different frameworks right you could your islands architecture with buttons you're just like oh snap touch mean any button from any framework just shows up in an island.
- swyx: that's an interesting discussion is that a big.
- swyx: Is the islands architecture, a big discussion within Google, or because I always have hard I have trouble separating Jason from Jason Miller, who wrote the article architecture markers.
- swyx: When is he talking in his own personal capacity, or when is he saying like No, this is something we're tight with thinking about a Google.
- Adam Argyle: Oh, in my opinion Jason and I are pretty straight shooters about our own stuff like we work for Google and chrome and we love our job, and we want to represent chrome well and do all the things our job want us to do, but we have this like I don't know where our own personal opinion like.
- swyx: jake Archibald as to he.
- Adam Argyle: he's working on a lot of his own stuff we kind of balance, both I mean Jason definitely does things internally that he might not have chosen to go do if he just could choose whatever he wants to do.
- Adam Argyle: But that doesn't mean that's what he's going to go pitch outside of Google and the islands architectures.
- Adam Argyle: yeah This is just sort of the micro friends evolution into let's eventually docker eyes every component and then manage them with communities in the front end right we'll get there, I don't know.
- Adam Argyle: yeah.
- swyx: Well, so the this discussion of the reusable button and the ui complexity cliff makes me wonder because there's a lot of discussion about how dry is overrated you know.
- swyx: We should we should write everything twice and sometimes if you're just customizing it so often you're reusing it so much maybe just don't reuse code just just copy and paste and then that makes it easy to the really easy to modify the only thing that.
- swyx: That goes wrong with that so whenever you need to do a global update then you'd run into trouble, but how often do you really need to do that.
- Adam Argyle: Right isn't that what the super RAD typescript refactor button is for like tha...
The AI-powered Podcast Player
