Alex Wilson @CodeByAlex

💻 Design System Engineering Lead @TRowePrice 📣Speaker 💪Web Platform Advocate & Design Tokens Enthusiast linkedin.com/in/alex-wilson… Joined August 2017

Tweets

616
Followers

185
Following

739
Likes

2K

Mark A. Cianfrani @markacianfrani

2 years ago

If components are just LEGO bricks, I’m not sure if I even want them anymore. cianfrani.dev/posts/the-lego…

1 2 16 1K 5

View Details

Sara Soueidan is on Bluesky @SaraSoueidan

2 years ago

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: hidde.blog/why-its-good-f… Not everything is just about DX. Separation of concerns benefits UX too.#a11y

Theo - t3.gg @theo

2 years ago

If HTML was invented today, styling would be baked in. The idea of an external language just for styling would seem stupid.

227 86 3K 406K 142

6 21 187 19K 18

View Details

Alex Wilson @CodeByAlex

2 years ago

@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.

0 0 0 59 0

View Details

Alex Wilson @CodeByAlex

2 years ago

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

0 0 2 130 0

View Details

Alex Wilson @CodeByAlex

2 years ago

Does your design system support mobile apps?

0 1 1 176 0

View Details

Alex Wilson @CodeByAlex

3 years ago

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

1 0 0 35 0

View Details

Alex Wilson @CodeByAlex

3 years ago

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

3 years ago

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

3 1 26 5K 1

0 0 2 176 0

View Details

jhey ʕ•ᴥ•ʔ @jh3yy

3 years ago

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! 👇

Intent To Ship @intenttoship

3 years ago

Gecko: Intent to Prototype & Ship: Line-height Units (lh, rlh) groups.google.com/a/mozilla.org/…

0 3 16 264K 4

10 94 1K 414K 876

View Details

Oliver Medhurst @CanadaHonk

3 years ago

:has() is in Firefox beta from today, have fun: mozilla.org/en-US/firefox/…

16 64 397 704K 32

View Details

Alex Wilson @CodeByAlex

3 years ago

@stuffbreaker Looking at opportunity areas but media queries for now

0 0 1 25 0

View Details

Alex Wilson @CodeByAlex

3 years ago

UI remnence of what once was…

0 0 1 90 0

View Details

Alex Wilson @CodeByAlex

3 years ago

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 designsystemspodcast.com/episodes/episo…

0 0 2 93 0

View Details

✨ jennie § yip ✨ @jenniesyip

3 years ago

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

1 4 25 2K 4

View Details

Alex Wilson @CodeByAlex

3 years ago

@JoshDesignNz I’d be in 💯

1 0 1 47 0

View Details

Cory LaViska @claviska

3 years ago

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

4 7 65 10K 0

View Details

Alex Wilson @CodeByAlex

3 years ago

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

0 0 0 8 0

View Details

Alex Wilson @CodeByAlex

3 years ago

He speaks the truth

Justin Fagnani @justinfagnani

3 years ago

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

4 3 37 4K 0

0 0 2 131 1

View Details

Alex Wilson @CodeByAlex

3 years ago

“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 bradfrost.com/blog/post/the-…

0 14 40 10K 10

View Details

Sara Soueidan is on Bluesky @SaraSoueidan

3 years ago

"The Web Sustainability Guidelines (WSG) 1.0" w3c.github.io/sustyweb/ — ...best practices based on measurable, evidence-based research for designing & implementing digital products & services that put people and the planet first. 🍀🙌🏻

4 12 53 11K 18

View Details

Aravind Srinivas @AravSrinivas

3 years ago

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”.