Steve (Builder.io)
@Steve8708
Followers
86,994
Following
688
Media
874
Statuses
6,487
CEO @builderio - design to production, faster
San Francisco, CA
Joined October 2008
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Cohen
• 146986 Tweets
$GME
• 104000 Tweets
#LovelyRunnerEp11
• 95646 Tweets
MY LOVE IS LIKE
• 57385 Tweets
TREASURE COMEBACK
• 48542 Tweets
GameStop
• 48310 Tweets
Aziz Yıldırım
• 41933 Tweets
Roaring Kitty
• 29547 Tweets
LINEの新機能
• 28957 Tweets
Vance
• 25717 Tweets
GRACIE
• 24264 Tweets
Hot Sale
• 22884 Tweets
Square Enix
• 22509 Tweets
Childish Gambino
• 20889 Tweets
yves
• 19609 Tweets
Atiku
• 18876 Tweets
Ravens
• 18873 Tweets
$AMC
• 18169 Tweets
ACEITA ANITTA
• 17775 Tweets
Deco
• 16637 Tweets
Heartstopper
• 16337 Tweets
Stevie Wonder
• 14667 Tweets
McDavid
• 13578 Tweets
TREASURE IS COMING
• 13163 Tweets
DIAMOND HANDS
• 11052 Tweets
Tuberville
• 10512 Tweets
Carvajal
• 10387 Tweets
Carlos Vives
• 10217 Tweets
Vitor Roque
• 10157 Tweets
Pinned Tweet
Thrilled to announce Visual Copilot V1
AI codegen using YOUR components
20
65
417
these 5 lines of code can add crazy shit to your apps. use them.
🧵:
104
838
7K
How do Nike and Apple make such smooth and touch friendly carousels with pure CSS?
/* tl;dr */
.carousel {
scroll-snap-type: x mandatory;
}
.carousel .item {
scroll-snap-align: start;
}
More detail 👇
72
981
7K
A cure for React useState hell?
You may not realize how easily you can replace useState with useReducer and simplify your state management
You can read more in my latest blog post:
127
852
6K
Everything you didn't know you need to know about buttons
Yes, buttons
More surprises in my full blog post:
118
781
6K
Perf tip: avoid chained async tasks
Parallelize with Promise.all wherever possible
62
677
5K
Are you loading images as optimally as you can?
Do you know how and when to use decoding=async, loading=lazy, fetchpriority, <picture>, aspect-ratio, or srcset?
A deep dive on optimally loading images in my latest blog post:
75
700
5K
Speed up sequential async/await code with promise concurrency
But be aware of a couple critical gotchas!
Read more in my latest article:
62
587
4K
fun fact - you can chain '!' and '?' operators in ts for added drama
87
356
4K
PSA: please stop using strings concatination to create and edit URLs in JS
All major browsers have great built-in functionality for URL parsing & manipulation:
44
713
4K
PSA: number inputs have a `.valueAsNumber` property that you may find handy
44
634
4K
If you're still creating and modifying URLs in JavaScript using string concatenation, this is a PSA that there is a better way:
59
551
4K
This is one you need to know.
JS has a built-in function for deep cloning objects called `structuredClone`, which can handle:
😍 Deeply nested objects and arrays
🌎 Many types, like Date, Set, Map, etc
➰ Circular references
More in my latest article:
64
579
4K
8 modern browser APIs you might not know, but really should:
63
601
3K
Do you know about :is() in CSS?
It's pretty handy!
More on :is(), as well as :where() and :has(), in my full article:
42
417
3K
Performance tip: do you know about `overflow: clip`?
It is a modern alternative to `overflow: hidden` with better performance
30
443
3K
Performance tip: if you need to set a lot of dynamic keys to an object, a Map can give you better perf
Explanation in 🧵:
28
564
3K
If you aren't using `new URL()` in JS, you really should start:
32
477
3K
Why are people so obsessed with signals right now?
Let me attempt to explain...
More in our blog post:
70
359
3K
If you are reading number and date input values as strings and parsing them manually, there is a better way.
More in my latest blog post:
25
300
3K
If you are creating configuration objects in TS and not using the `satisfies` operator, you are doing it wrong
38
376
3K
Performance tip: make your page load feel more instant by using priority hints to help the browser prioritize the most critical resources
More you can do with priority hints in 🧵:
23
398
2K
Performance tip: try the `decoding` attribute for images to allow decoding to be async and not block the main thread, allowing your content to display faster
23
416
2K
How does Tesla make that beautifully smooth full page swipe effect on their homepage?
/* tl;dr */
.container {
scroll-snap-type: y mandatory;
}
.section {
scroll-snap-align: start;
scroll-snap-stop: always;
}
More detail 👇
34
350
2K
frontend devs when they learn js was invented in 1995
41
286
2K
The `Intl` object in JS is so valuable, yet so underutilized
Learn how to generate friendly relative time strings from a given date - like "in 10 minutes" or "last week" or "tomorrow" - with 0 dependencies in my latest blog post:
34
330
2K
Do you know about ReturnType in TypeScript? What about Awaited or Parameters?
Utility types can unlock a lot of power to keep your code type safe, even when your npm packages aren't perfect
More magic you can do with utility types in my latest article:
41
344
2K
The `satisfies` operator in TypeScript 4.9 is a game changer
Here is a quick overview of how it compares to a couple alternative ways of annotating types
Learn more about the `satisfies` operator here:
38
381
2K
How Apple makes those crazy 3D effects as you scroll
While this is not the best for performance/usability/accessibility, it's fun to see how they do it
34
273
2K
Should you use an anchor tag or a button tag for clickable elements in HTML?
The answer is surprisingly nuanced:
49
355
2K
The CSS Working Group is debating over the best way to define nesting in CSS, and want your input!
Which do you like best?
You can vote in the official poll here:
637
386
2K
TIL about the download attribute for anchors, handy!
16
294
2K
the first time i had to deal with a huge git rebase conflict
61
423
2K
JavaScript Maps (new Map()) are more performant, ergonomic, and overall useful than you might think.
You may want to consider using them more often than you likely are.
Full video is now out!
29
346
2K
Tip: avoid hard coding relative days and times
Try `Intl` to give well formatted messages with great UX and performance
Learn more:
14
301
2K
How Apple makes their beautiful hamburger menu in *pure CSS* (no JS!)
<!-- tl;dr -->
<input type="checkbox" ... />
<style>
.checkbox:checked + .menu {
/* animate */
}
</style>
More detail 👇
23
244
2K
CSS has a variety of layout algorithms to choose from
It is useful to understand the differences, as some CSS properties behave differently in each layout mode
17
341
2K
How does Apple make that awesome frosted glass effect on their site header in CSS?
tl;dr backdrop-filter: blur(20px) saturate(180%)
Better explanation 👇
15
190
2K
Wow, how have I not known about the `gap` property for flex layouts
How it works in 🧵:
81
221
2K
Quick tip: avoid plain objects when you need to frequently create and remove keys, and use a Map instead
You can get better performance and ergonomics
More cool things you can do with Maps in my latest blog post:
25
210
2K
How Airbnb makes that cool swipe up drawer on their mobile site in CSS
Pretty clever trick!
Code example:
No-code example:
13
183
2K
Are you ever debugging in Node.js and realize your terminal leaves a lot to be desired...
Did you know that it takes just 2 seconds to connect any Node process to your browser devtools and have fully interactive debugging 🐛?
Read on in our article:
27
235
2K
Make super cool swipe-over sections like Apple in pure CSS!
Try it in code:
Try it in
@builderio
:
22
205
2K
never understood this take, I feel way more productive with TS even for tiny projects
Bye TypeScript 👋
Great for big teams but it's slowing me down when working solo or with 1-2 friends
Going back full JS
390
61
2K
129
51
2K
How does Stripe do that really cool morphing animation with their menus?
See how to easily replicate it with React, Tailwind, and AI:
25
173
1K
pretty awesome new zod alternative that is < 1kb
38
198
1K
Web perf tip: avoid using background-image in CSS
For faster loading images, use <img /> anywhere possible, for better optimization options such as the srcset & sizes attributes
24
185
1K
Performance is hard, and there are many things to know
That's why I have compiled many tips for image perf into this one cheat sheet!
More info in 🧵:
11
264
1K
How Apple makes those awesome zooming page transitions as you scroll
Code example:
Low-code example:
16
161
1K
If you don't already know... I'm a huge fan of the new `satisfies` operator in TypeScript 4.9
I've compiled the best examples I've found on using the operator, as well as a few helpful notes to make the most of it
Latest blog post now live:
22
215
1K
If you want to build AI products that are truly unique, valuable, and fast, don't do what everybody else is doing.
Do this instead:
25
182
1K
Are you using mix-blend-mode in CSS? It's cool!
Source code for this example:
14
161
1K
"But you can't JSON.stringify maps!"
You actually can.
It's surprisingly easy to JSON stringify and parse virtually anything in JS using a `replacer`
13
150
1K
if i brush my teeth while peeing is that concurrency or parallelization
142
74
1K
Browser-native deep object cloning in JS is finally here, and it's awesome
structuredClone() can:
- copy deeply nested data
- handle many data types like Map/Set/Regex/etc
- even handle circular references
Performance is great as well ⚡️
17
238
1K
Do you know the difference between a Map and a WeakMap and when to use which?
Or why you would even want to have objects as keys and what use cases this unlocks?
More in the full article:
19
130
1K
Make a text reveal scroll effect like Apple in a few lines of code using IntersectionObserver:
10
141
1K
Countries with the best food I’ve ever had (subjective):
1. India
2. Thailand
3. Mexico
4. China
5. France
6. Japan
7. Malaysia
8. Brazil
9. Portugal
10. Italy
…
Absolute worst: England
211
27
1K
amazing resource to visually learn the node.js event loop:
highlights in 🧵:
9
222
1K
If your code to render data from a CMS is a mess... it doesn't have to be:
23
100
1K
Turns out, Devin is a lie
Here's the key things they fabricated:
32
161
1K
It’s insane what happens when you connect LLMs to a visual editor.
Generate responsive designs and apps with AI, edit them with natural language, and convert to code for any framework.
This is not a hypothetical future or "private beta", its available right now for everyone:
29
168
1K
Performance tip: did you know you can make a fast function for relative time strings with ~30 lines of code and 0 dependencies?
Code in 🧵:
16
118
968
One new way you can make fetch() more elegant is to use the new Error.prototype.cause property in JS:
const res = await fetch(...)
if (!res.ok) {
throw new Error('...', { cause: res })
}
...
catch (err) {
if (err.cause.status === ...) {
// Handle each status
}
}
11
154
958
Just ship it.
Just ship it.
Just ship it.
Just ship it.
Just ship it.
Just ship it.
Just ship it.
Just ship it.
Just ship it.
Just ship it.
Just ship it.
Just ship it.
Just ship it.
Just ship it.
Just ship it.
Just ship it.
Just ship it.
Just ship it.
Just ship it.
Just ship it.…
99
96
955
What is Server-Driven UI?
It's an emerging technique for:
- more component-driven development
- a balance of personalization and performance
- better content workflows for teams
More in the vid:
47
165
955
Performance tip: don't forget to dedupe your modules!
In many cases, you may be loading the same package multiple times
Try `npm dedupe` or `npx yarn-dedupe` to ensure you shed unneeded duplicates
7
130
950
If you're not using border-image in CSS, you are missing out on a very cool effect!
Try it:
11
119
906
Performance tip: use IntersectionObserver instead of scroll events for a faster way to detect when elements are in the viewport
Learn more:
8
146
894
My personal likes/dislikes of the popular frameworks:
React: I love TSX and hooks.
Dislike: useEffect, callback arrays, and over pushing immutability.
Vue: I love SFCs, simple proxy-based mutable state management.
Dislike: would like to see a solution to having less…
54
63
874
One cool use case for Maps - creating a simple O(1) LRU cache
Given how Maps preserve the order of their keys, implementation is trivial:
15
85
870
Civet (
@civetlang
) is a new alternative syntax for TypeScript
Init flame war about syntax preferences:
53
99
863
Deep cloning simple objects/array structures in JS - which is fastest?
Do you know? Answer in thread:
25
121
860
JS perf tip: date libraries can hurt your site speed more than you expect
Consider browser native alternatives under `Intl` for faster execution and smaller bundles
15
154
859
A thread of my favorite frontend performance tips to keep top of mind ⬇
31
185
836
we just finished porting a major ML project from JS to python only for it to be…. about 100x slower
moving it back to JS and using a bit of C where needed has given us an insane perf boost
71
40
828
I don’t have a college degree of any kind. I’ve never taken a CS class.
If you like my content then you agree that you don’t need formal education to have valuable knowledge about coding.
69
40
806
How makes such beautiful text gradient effects in CSS:
10
96
810
What image format should you use for the best balance of performance and quality? 👇
16
152
790