Shu
@shuding_
Followers
36,363
Following
2,262
Media
369
Statuses
2,582
@vercel . @nextjs , @v0 , Satori, SWR. Don’t talk unless you can improve the silence.
Berlin, Germany
Joined March 2012
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Mother's Day
• 1882595 Tweets
#GrandConcertENGLOTinNYC
• 163652 Tweets
Racing
• 60154 Tweets
Pacers
• 45891 Tweets
Vitória
• 40384 Tweets
Bahia
• 27792 Tweets
Romero
• 26125 Tweets
雨の月曜日
• 25635 Tweets
Bruins
• 18595 Tweets
Costas
• 18532 Tweets
Jamal Murray
• 17650 Tweets
Fabra
• 16496 Tweets
Bennett
• 16454 Tweets
Panthers
• 15986 Tweets
Medina
• 14992 Tweets
Belgrano
• 14473 Tweets
Cristal
• 13077 Tweets
Payet
• 11262 Tweets
Fade-in animation that is not so boring:
{
0% { opacity: 0; filter: brightness(1) blur(20px) }
10% { opacity: 1; filter: brightness(2) blur(10px) }
100% { opacity: 1; filter: brightness(1) blur(0) }
}
47
359
4K
I made a while ago: a 5kB globe lib, and it improved our page performance* by almost 60%.
How is it created? Time for a WebGL & shader thread!
32
286
2K
A 20x faster, realtime Next.js dev experience is coming…
(the debug toasts show actual latency figures on our large production codebase)
26
192
2K
React Wrap Balancer:
Simple React Component That Makes Titles More Readable
41
163
2K
There’s a trend of using rotating gradients as input / button borders with CSS. Here’s a neat trick to enhance its appearance:
20
131
1K
Easy-to-use CSS View Transitions API helpers for Next.js App Router:
28
120
1K
CSS-only scroll area indicator using `scroll-timeline`.
The trick is to simply add an opacity animation, controlled by that timeline, to these 2 arrow elements.
14
112
985
Nextra 2.0 is here:
🔹 Redesigned UI
🔹 Image optimization
🔹 Built-in full-text search
🔹 Build-time code highlighting
🔹 MDX v2
🔹 Next SEO
🔹 Multiple docs zones
🔹 Menus and separators
🔹 ...
23
117
818
GitHub Copilot is definitely more than just an autocompletion tool, it tries to understand the code you're writing. Have been using it for weeks and it's truly amazing.
3
90
673
I’m redesigning my website on top of some exciting new things: Next.js App Router, Turbopack, CSS View Transitions, Tailwind CSS 4.0, MDX in RSC.
Will have it open sourced when it’s ready :)
Interestingly Turbopack, Tailwind and MDX compilers are all backed by Rust now.
17
38
659
A little helper hook I made a while ago: it quickly tells you when, where and why does a render happen.
15
59
601
My React Server Components (RSC) mental model is basically:
They’re getServerSideProps / getStaticProps but more powerful.
Things RSC / gSSP / gSP share in common:
🔸 You can’t pass things like normal functions from RSC / gSSP / gSP to the client, because they just can’t be…
12
85
598
I like this idea a lot and after many years, finally brought it to life... CSS-only magnifier! The demo doesn’t have any JavaScript.
Will share the code next week, but I believe some of you can already figure it out :D
14
31
588
Open your browser console on and you can use it as a REPL of the lib:
9
68
552
Since iOS 13.4+, it's possible to make touch-friendly carousels on the Mobile Web!
I just fixed this for Next.js Commerce:
Demo:
PR:
12
40
529
Mask animations are really underrated. Another good use case I have:
5
24
499
I spent a month in NYC & SF preparing for the launch of with the team — it went smoothly. On the night of release, while flying back to Europe, I was treated to a stunning aurora over the Greenland skies. Breathtaking.
11
4
468
The new React Wrap Balancer 1.0 version now uses the native CSS feature `text-wrap: balance` automatically when it’s available!
Read more about the release:
CSS `text-wrap: balance`:
9
51
449
Another CSS-only toy: Color Picker.
Built with 790 `:has()` selectors.
8
31
431
UIs that are 1) context-aware 2) dynamically streamed from the server 3) interactive 4) stateful in both server and client 5) hooked into LLMs.
Will share more and open source it very soon.
14
24
424
After 11 beta releases and weeks of testing, we launched SWR v0.3.0! 🎊
v0.3.0 includes tons of bug fixes, enhancements and test cases, as well as a new dedicated pagination/infinite loading API. Check out the docs:
6
59
413
Guess I really love CSS and I’m obsessed with the idea of CSS-only challenges. There are some interesting tricks used and someday I’ll write about them...
Here are a few of them:
10
17
409
Some recent updates for
@vercel
’s OG image generation and Satori:
🔹 Flex gap is now supported 🎉
🔹 HTML lang= attr 🎉
🔹 currentColor 🎉
🔹 Improvements related to emojis, viewBox, data URI, break-word, white-space and more
10
27
379
Working on Nextra 2.0...
- Redesigned UI
- Rewritten in TypeScript
- Turborepo
- MDX 2
- Tailwind 3
- FlexSearch Built-in
- Shiki
- pnpm
22
21
374
Image generation in 100ms, powered by :
This is now the fastest SVG chart -> PNG generation I've ever seen.
2
1
72
4
21
360
'RSC'.reverse() == 'CSR'
This is how React Server Components work. And I’ll explain it a bit more in the thread...
4
71
348
import { useChat } from 'ai/react'
6
39
340
Trying to visualize that Server-Side Rendering (SSR) isn't just about SEO, it actually makes the site faster. And why PPR is the goat.
Main cost =
🟥 JS load & Hydration
🟡⇆🔵 Region Latency
11
32
336
My favorite thing about variable fonts is that you can animate the weight (font-variation-settings: 'wght' 600) smoothly:
4
15
333
8
34
328
...when using a straight line to fit exponential data, you overestimate the near future but underestimate the far future, like this:
3
27
297
Not just Open Graph images, Satori can be used to generate all kinds of images too!
For example a Syntax Highlighter:
6
24
296
Going to convert markers of to attributes of a new vertex shader. This works similar to a particle system, and it is more performant than the for loop in our current fragment shader (so you can add more markers!).
Next is arcs and DOM nodes/events.
3
21
279
Did some research on metaballs today... got some interesting renderings w/ React and WebGL. Also tried for the first time, it's such an amazing tool...
5
17
267
Image generation with HTML and CSS (or Tailwind CSS) at the Edge (or Node.js/browser). 5x faster, 100x smaller, 160x cheaper than our old solution.
Try it:
Powered by Satori and Resvg.
Vercel OG Image Generation – a new library for generating dynamic social card images.
57
296
2K
4
15
267
For those who love the idea of Zero JS: use <textarea> and CSS container query to make interactive sliders!
13
25
262
Poured my thoughts into an article about Barrel Optimization in Next.js. If you’re as fascinated by frameworks and bundlers, give it a read!
Learn about the hidden cost with JavaScript runtimes.
By optimizing package imports, we’ve seen 40% faster cold boots when using libraries with many barrel files.
9
142
1K
14
15
263
And I’ll try to draw some diagrams to show how I visualize Server Actions in my head and how they work, as I saw some confusion around. There’re two ways of using Server Actions:
1. Define Server Actions in Server Components and pass them to Client Components via props...
4
45
258
13
43
249
Weirdest bug this week: iOS Safari renders long digits (e.g. 1111111111) as a telephone link that breaks hydration.
To avoid, add `<meta name="format-detection" content="telephone=no">`. Maybe can be a common thing as any dynamic content may run into it.
5
18
248
Just noticed that most Touch Events APIs are now supported in iOS Safari, including `touchType` (👆/✍️), `force`, `altitudeAngle`, and `azimuthAngle`! This is so powerful that you can create a fully Web based drawing app w/ brushes!
Here's a simple demo: .
5
50
245
That’s it! You can find the code here:
(Note that the demo uses `
@property
`, but you can also make an extra div and use CSS `rotate` if that’s an issue)
10
18
245
Published v0.1.10 of SWR with a bunch of improvements:
◆ Query variables
◆ React Native
◆ 28% Smaller (3.4k gzipped)
◆ Improved TS support
◆ Improved performance
◆ Examples of subscription, prefetching and many more
◆ Smart error retries
9
41
236
When reviewing PRs especially in open source projects, remember to also take a look at npm/yarn/pnpm lockfile changes. They can be used to attack the project by introducing malicious dependencies. Like this:
6
24
236
Better type inference is coming to SWR soon!
• Key / arguments
• Conditional / dependent
• Constant keys
• Returned data
4
26
227
What if there’s a <Satori> component that adds fluid layout & style transitions to your elements?
6
12
227
@shadcn
@vercel
@jaredpalmer
@max_leiter
@mrncst
@rauchg
@cramforce
@almonk
Joining the party—it was great to work together
10
1
222
Have been working on implementing Server Actions in Next.js with the team for the past 5 months (and yes, it still feels magical), couldn’t be happier to see it come to life. Thanks
@sebmarkbage
@feedthejim
@acdlite
@kdy1dev
❤️
Next.js 13.4
◆ App Router (Stable)
◆ Turbopack (Beta)
◆ Server Actions (Alpha)
85
663
3K
6
9
211
I didn’t expect this to get so much attention... thanks everyone! 🙇♂️
What I learned from it was “people overestimate what they can do in a year and underestimate what they can do in 10 years” by
@BillGates
. We are good at predicting things linearly but the world is exponential:
1
13
209
If you want to know what’s the performance impact of React Wrap Balancer, I just wrote about it in the docs:
3
10
204
The latest version of React DevTools now shows the names of custom hooks! 🎉🎉🎉
It makes debugging so much easier!
5
50
195
This was inspired by
@artur_bien
’s “Blur Vignette effect in CSS”:
New blog post - "Blur Vignette effect in CSS" 🔥
I've also built a CSS generator for this effect so you can easily drop it in your projects.
More details below 👇
15
78
774
0
10
191
Delivered some value last week! Next.js canary now automatically optimizes barrel file imports of popular libs (lucide-react, react-bootstrap, ant-design/icons, etc.).
A more advanced config is also available for your internal component system to use:
7
13
181
Performance is a top priority of SWR.
On this dedicated docs page, we’ll explain why and how SWR ensures your app to be always fast and reactive:
✅ No extra requests
✅ No extra re-renders
✅ No extra code imported
5
21
184
The Next.js TypeScript plugin is quite helpful. However, there is no way to enable a TS Language Server plugin by default in VS Code.
To avoid picking Workspace TS Version every time when opening a project, I made this extension to do it automatically:
10
12
165
One year ago, I switched to the Next.js team to work on React 18 and React Server Components support with
@huozhi
. Happy to see them landed and running as the core of Next.js 13 to empower some of these incredible new features.
4
7
159