Alex Wilson

💻 Design System Engineering Lead @TRowePrice 📣Speaker 💪Web Platform Advocate & Design Tokens Enthusiast

[Mark A. Cianfrani @markacianfrani]

If components are just LEGO bricks, I’m not sure if I even want them anymore. https://t.co/mXommxj9YS

[Sara Soueidan is on Bluesky @SaraSoueidan]

Not only was styling baked into HTML at some point, it's important that it's no longer baked into it, mainly for accessibility reasons. @hdv outlines some of those reasons here: https://t.co/9oVEMLDGEw

Not everything is just about DX. Separation of concerns benefits UX too.#a11y

[Alex Wilson @CodeByAlex]

@mattcampux There are non color indicators that show the close state and editing state but I can see that the text colors could throw a user off. Looks like a situation where they started with text color as an indicator and then added icons over time.

[Alex Wilson @CodeByAlex]

What tech do you use to support your mobile design system?

If “something else”, let me know in the comments! Also curious about why you chose your option

[Alex Wilson @CodeByAlex]

Does your design system support mobile apps?

[Alex Wilson @CodeByAlex]

@kairoeder @juristr @astrodotbuild What tools did you use to build out your upgrade schematic?

[Alex Wilson @CodeByAlex]

Imagine creating a design system for the entire web

Think about the challenges with scaling, deprecation strategy, maintenance, adoption, and more🧐

It’s often said that the web moves slowly but I’m impressed by the OG

[Adam Argyle @argyleink]

Web platform is a design system,
powering indie and enterprise alike

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS Tip! ⭐️

You can use the lh (line-height) unit on background layers to emphasize multiple lines of text responsively without extra elements! ⚡️

h1 {
background: linear-gradient(white, white), grey;
background-size:
100% calc(var(--lines) * 1lh), 100% 100%;
background-clip: text;
color: transparent;
}

Here you emphasize the first two lines of the heading with white using a sized background-image layer

It has a size of 2lh ✨

Then the rest of the element is colored with whatever other colors you want to use as layers. If you watch the video, you can see different colors used for different lines and then fade it out if you wish. You could do whatever you like with it 😎

Neat part is that it's responsive. The font-size is set with a clamp and you can resize the viewport or the element and the number of lines emphasized will remain 🤙

Last but not least, make sure to use background-clip: text and color: transparent so the background shines through 🔥

Also, note that if you're only looking to highlight the first line, you can still use the :first-line pseudo 🫶

Have a play with it and see what you can come up with!

@CodePen link below! 👇

[Oliver Medhurst @CanadaHonk]

:has() is in Firefox beta from today, have fun: https://t.co/3wfwI9tTpP

[Alex Wilson @CodeByAlex]

@stuffbreaker Looking at opportunity areas but media queries for now

[Alex Wilson @CodeByAlex]

UI remnence of what once was…

[Alex Wilson @CodeByAlex]

Had a great discussion with @chrisstrahl and @Jon_Reidy about Design System innovation and adoption at T. Rowe Price 📣 Check out Episode 90 of the @TheDSPod to listen in!

#DesignSystem
#DesignSystemsPodcast

https://t.co/Olq5IfSxtf

[✨ jennie § yip ✨ @jenniesyip]

“Systems thinking is a discipline for seeing the structures that underlie complex situations.” — Peter Senge

[Alex Wilson @CodeByAlex]

@JoshDesignNz I’d be in 💯

[Cory LaViska @claviska]

The best way to advocate for web components is to build great things with them. Actions speak louder than words. #useThePlatform

[Alex Wilson @CodeByAlex]

@firefox needs to unleash the power of :has() 💪

[Alex Wilson @CodeByAlex]

He speaks the truth

[Justin Fagnani @justinfagnani]

If you're building a multi-platform development solution, you *have* to preference the web - it's the most sensitive to code size, a11y, and perf.

If you don't optimize for the web you're going to force multi-MB bundles and OS opaque canvases on users who can handle it the least

[Alex Wilson @CodeByAlex]

“We’ve helped organizations build design systems in a multitude of technologies over the years, but as time goes by we now heartily recommend one specific technology to build a core design system for the web: Web Components.” - Brad Frost

https://t.co/kb8rq1yxlJ

[Sara Soueidan is on Bluesky @SaraSoueidan]

"The Web Sustainability Guidelines (WSG) 1.0" https://t.co/b3F4R3cBIc

—
...best practices based on measurable, evidence-based research for designing & implementing digital products & services that put people and the planet first. 🍀🙌🏻

[Aravind Srinivas @AravSrinivas]

This actually happened to Evernote. They took the advice of “keep talking to your customers and ship whatever they want” as the only guiding principle for product development. And what ended up happening was paying users liked it, but the product become unintuitive and feature overload for the new user. To the extent that they had to rebuild a version for the new user.

Users don’t always know if they really want something. It’s your job to take the extra step to think on their behalf: whether they really need this. Or can what they ask be done through something much simpler. Or can you solve multiple problems of different users with one new redesign rather than a bunch of changes. The right principle is: “Keep talking and listening to your users, spend the additional time thinking on their behalf what they actually want, and ship that”.