How to design in 140 characters or less: Delete everything that isn't important.
Pinned Tweet
Follow
Click to Follow michaelarestad
Michael Arestad
@michaelarestad
front-end.social/@michael | #BlackLivesMatter | Designer at | formerly at | open sourcerer | experience adjuster
Michael Arestad’s Tweets
Alrighty, time to get off this jank site. Catch you on the tooterverse
'Why We're Breaking Up with CSS-in-JS' is a very interesting and thought-provoking article. I'll be the first to admit that the community has a big influence on many of my decisions. I don't work in a vacuum, so other's experiences have merit, just as my own do.
Quote Tweet
I'll take 'Things we saw coming from a thousand miles away' for $1000, Alex. twitter.com/brucel/status/…
Show this thread
1
1
2
Show this thread
Monorepo support is here!
🛠 Run in multiple subprojects in parallel
✅ Report status checks to the monorepo repository
chromatic.com/blog/monorepo-
Shoutout to the makers Steven K
GIF
9
24
Is being gender-fluid “new”? Ha! Indigenous people have been rejecting binaries for millennia, and they’d like your colonialism off their bodies.
🧵🔧 Welcome to the Nonbinary Issue, a rich tapestry that defies categorization.
pipewrenchmag.com/issue-seven-we
1
62
154
Show this thread
7.0 design is now in alpha!
Small improvements add up to big productivity boosts over time. Try it out now!
📐 Layout edge-to-edge
🛠 Toolbar reorganized
✍️ 200 redrawn icons
🔢 Form elements refined
⚡️ Pre-bundled app for speed
Read » storybook.js.org/blog/7-0-desig
1/🧵
5
34
146
Show this thread
Blown away by the latest batch of projects in Component Encyclopedia
🚀 NASA
🐍 Python Conference
🧱 Microsoft Fluent
📺 LG electronics
🦅 Dept of Veterans Affairs
storybook.js.org/showcase/proje
2
6
21
Show this thread
This looks really useful: Storybook, which a lot of companies use for their design systems, created a component encyclopedia you can browse and reference:
storybook.js.org/showcase
read image description
ALT
10
152
846
For those of you wanting to take a closer look at in-use design systems, cool Storybooks, and clever components, check this out. (It's also for those of you wanting to show off your cool design system!)
Quote Tweet
Component Encyclopedia is live!
We're indexing every UI component in the world for you to learn from. We have 5,132 components so far—from Airbnb MSFT Adobe etc.
Browse visually
Search & filter
Demo live examples
Reuse components
storybook.js.org/blog/component
But why?
Browse visually
Search & filter
Demo live examples
Reuse components
storybook.js.org/blog/component
But why?Show this thread
4
Every pixel is perfect to me.
1
6
Our friends created a new plugin to help close the gap between design & development.
Use Storybook Connect to:
- Link Figma design components to Storybook stories
- View stories in Figma
- Play with interactive stories in Figma
Try it out: bit.ly/3rVpYsj
GIF
3
78
320
It's here! I am so excited!
Quote Tweet
Figma plugin is live! GA
Compare stories vs design specs to speed up handoff & review.
Link stories to components/variants
Play w live implementation in Figma
Highlight components to reuse
Setup private projects
Try it » storybook.js.org/blog/figma-plu
1/
Link stories to components/variants
Play w live implementation in Figma
Highlight components to reuse
Setup private projects
Try it » storybook.js.org/blog/figma-plu
1/Show this thread
GIF
2
Happy Easter!
1
2
Try out our new Figma plugin! So stoked to see folks using it!
Quote Tweet
Figma plugin beta is here!
It streamlines design handoff & review by connecting stories to variants.
Link stories to designs
Interact w stories in Figma
Compare design to implementation
Private projects + access control
Try it now » storybook.js.org/blog/figma-plu
1/
Link stories to designs
Interact w stories in Figma
Compare design to implementation
Private projects + access control
Try it now » storybook.js.org/blog/figma-plu
1/Show this thread
GIF
2
Chromatic publishes Storybook for teams to collaborate.
We've been demoing the new comment & mention features internally. Great to see them ship!
Congrats
3
7
I still love this
Quote Tweet
A GIRL WAS TRAINED FOR THIS!!! AAAAAAAAAAARRRRRRYYYYYYYAAAAAAAAAAAAA!!!! @GameOfThrones
0:31
731.4K views
2
Y'ALL
Y'ALL
THE GODDAMN NATIONAL MAGAZINE AWARDS
Y'ALL
TEN THOUSAND MILLION CONGRATS
9
4
40
Show this thread
Oh hey! We're making a Figma plugin that lets folks connect Storybook stories to layers in Figma. Super handy for referencing design systems.
Quote Tweet
Sneak peek of our new Figma plugin!
It brings designers closer to developers by connecting variants to stories.
Link design components to stories
Play w interactive stories in Figma
Compare implementation to design
See more » storybook.js.org/blog/figma-plu
Link design components to stories
Play w interactive stories in Figma
Compare implementation to design
See more » storybook.js.org/blog/figma-pluShow this thread
GIF
5
my partner: Do you want to watch skidaddle?
me: ???
her: you know, pitter patter?
me: ah.
1
How do you refactor 541 components without breaking any UI?
Visual testing! 📸
Check out our case study on migrating 5 codebases from Styled Components to Emotion with ease
storybook.js.org/blog/541-compo
1
24
64
I am proud to be a part of the community that made this happen.
Quote Tweet
In 2021 we shipped huge updates to performance, testing, and integrations. Rapid community & ecosystem growth!
#52 most starred repo all time
1400+ contributors
10s of thousands users & even more fans
350+ addons
Read the 2021 State of SB 
storybook.js.org/blog/state-of-
#52 most starred repo all time
1400+ contributors
10s of thousands users & even more fans
350+ addons
Read the 2021 State of SB
storybook.js.org/blog/state-of-Show this thread
0:05
1.8K views
4
Storybook's ESLint plugin is here!
✅ Validate story code as you write it
🗂 Standardize how you write stories across projects
✨ Simplifies auto-migration bw versions via codemods
Install it:
storybook.js.org/blog/how-to-us
Shoutout to
1
33
122
I don’t know who needs to hear this, but please don’t give taxadermied animals as gifts. Especially reptiles or fish.
1
4
Do y'all still do that thing where you scroll through every possible typeface ever when starting a new project?
1
3
Scrolling through icons in Figma
Be kind to your users and yourselves by testing your UI.
Quote Tweet
Testing UIs is tough!
Every tool advertises "not flaky, fast, low maintenance" but has pitfalls in the fine print.
So what works?
We researched ten teams at Twilio, Adobe, Peloton, Shopify and more, to distill their testing tactics into a guide.
storybook.js.org/tutorials/ui-t
Show this thread
GIF
read image description
ALT
1
If we talk shop long enough, Open UI *will* eventually come up as something in which I place a lot of hope for the future of our industry and the web itself. This illustrates why.
Quote Tweet
The work done by open-ui.org is very exciting, and so important.
Early experimentation work in Edge makes built-in fully-stylable and accessible <select>s possible, no libraries or custom JS needed.
Check the demo in Edge Canary only: codepen.io/captainbrosset
GIF
read image description
ALT
1
2
I am very much looking forward to this change.
Quote Tweet
WCAG 3 will use a new color contrast method called APCA (Advanced Perceptual Contrast Algorithm).
It's a big improvement over the current system but there are a lot of changes to get your head around.
Show this thread
read image description
ALT
3
I am very excited about this! Check out a preview of the Component Encyclopedia!
Quote Tweet
Sneak peek of Component Encyclopedia!
We scoured the web for OSS UI components and put them in 1 place for you to reference while building your UIs.
storybook.js.org/blog/component
Browse 1000s of UI components
Search across projects
Play with live UI implementation
Browse 1000s of UI components
Search across projects
Play with live UI implementationShow this thread
6
Excellent read on how to handle vertical spacing in a design system by (I am also in the Spacing on Top Club)
3
Family safety app Life360 is selling the precise location data for tens of millions of their users, including children:
6
251
318
Show this thread
Thank you for reliving your inbox with me. Please link to your soundcloud below.
2
3
Show this thread
GIF
read image description
ALT
1
2
Show this thread