This week in React
π React 18 updates
π Gatsby 4
π Context
π FileSystem routing
π Shadows
π React & RN history flashback
π Next.js & Vercel
π State Management
π Custom hooks readability
π React Native everywhere
π React Native windows
π Corepack
...
𧡠Details π
π React 18 updates
π Gatsby 4
π Context
π FileSystem routing
π Shadows
π React & RN history flashback
π Next.js & Vercel
π State Management
π Custom hooks readability
π React Native everywhere
π React Native windows
π Corepack
...
𧡠Details π
1/ @dan_abramov shared a long React 18 update, mostly for course creators:
github.com/reactwg/react-β¦
Some APIs are stable. There's still a good amount of work left
We shouldn't extrapolate the Big Picture vision too much for now
React 18 is not only for FB scale apps
github.com/reactwg/react-β¦
Some APIs are stable. There's still a good amount of work left
We shouldn't extrapolate the Big Picture vision too much for now
React 18 is not only for FB scale apps
2/ @gatsbyjs 4 introduced by @schaudustin
v4.gatsbyjs.com/gatsby-4/
- SSR
- deferred static generation
- parallel query running
New exciting features, and should close the gap with Next.js in terms of feature parity.
I bet @netlify will support Gatsby SSR/DSG soon π€£
v4.gatsbyjs.com/gatsby-4/
- SSR
- deferred static generation
- parallel query running
New exciting features, and should close the gap with Next.js in terms of feature parity.
I bet @netlify will support Gatsby SSR/DSG soon π€£
3/ @PierreOuannes shared how to use React Context like a Pro
devtrium.com/posts/how-use-β¦
Multiple tips I agree with, some not widely known:
- encapsulate your context behind custom provider/hooks
- memoize value
- split in 2 contexts (state + update API)
devtrium.com/posts/how-use-β¦
Multiple tips I agree with, some not widely known:
- encapsulate your context behind custom provider/hooks
- memoize value
- split in 2 contexts (state + update API)
4/ @oedotme explains how to create your own file-based routing on top of React-Router
omarelhawary.me/blog/file-baseβ¦
Inspired by Next.js APIs
Using Vite (globEager) but this can probably be done with Webpack too IMHO (require.context)
omarelhawary.me/blog/file-baseβ¦
Inspired by Next.js APIs
Using Vite (globEager) but this can probably be done with Webpack too IMHO (require.context)
5/ @joshwcomeau explains how to create coherent and realistic shadows in CSS
joshwcomeau.com/css/designing-β¦
Stop randomly picking box-shadow values!
Use your intuition of how the physical world and lightning works, and techniques like shadow layering
Provides Styled-Components impl
joshwcomeau.com/css/designing-β¦
Stop randomly picking box-shadow values!
Use your intuition of how the physical world and lightning works, and techniques like shadow layering
Provides Styled-Components impl
6/ π§ How React got Traction
swyx.transistor.fm/episodes/how-rβ¦
@swyx's flashback of React history with this old podcast sample:
- initial VS second introduction
- role of @floydophone and @swannodette 's famous blog post, convincing FP enthusiasts (including me π)
swyx.transistor.fm/episodes/how-rβ¦
@swyx's flashback of React history with this old podcast sample:
- initial VS second introduction
- role of @floydophone and @swannodette 's famous blog post, convincing FP enthusiasts (including me π)
7/ π§ @vercel and Next.js with @rauchg & @logrocket
podrocket.logrocket.com/vercel
Various interesting insights:
Relationship of DX & UX
Particularly liked the SEO part (Web Vitals, RUM, AMP, CSR...)
Next.js conf (26 Oct): a promise of exciting announcements π€
podrocket.logrocket.com/vercel
Various interesting insights:
Relationship of DX & UX
Particularly liked the SEO part (Web Vitals, RUM, AMP, CSR...)
Next.js conf (26 Oct): a promise of exciting announcements π€
8/ 𧡠10 State Management lessons by @housecor
Most I can agree with π
Most I can agree with π
https://twitter.com/housecor/status/1437765667906854915
9/ Readability Analysis Of Implementing Custom Hooks by @keraito
chakshunyu.com/blog/react-reaβ¦
Another interesting analysis of the readability tradeoffs of multiple possible React implementations
chakshunyu.com/blog/react-reaβ¦
Another interesting analysis of the readability tradeoffs of multiple possible React implementations
10/ TypeScript + React: Children types are broken by @ddprrt
fettblog.eu/react-types-foβ¦
Describes how one very old typing in React typedefs prevents good typing of the children props. And now it's hard to change it π .
But you can fix it in your codebase
fettblog.eu/react-types-foβ¦
Describes how one very old typing in React typedefs prevents good typing of the children props. And now it's hard to change it π .
But you can fix it in your codebase
11/ Running React Native everywhere by @mazzarolomatteo
mmazzarolo.com/blog/2021-09-1β¦
Matteo published a boilerplate + tooling for developing cross-platform apps. Explains how it works in a series.
π€ strong opinion: use different RN versions per platform (macos is still 0.63)
mmazzarolo.com/blog/2021-09-1β¦
Matteo published a boilerplate + tooling for developing cross-platform apps. Explains how it works in a series.
π€ strong opinion: use different RN versions per platform (macos is still 0.63)
12/ π§ React Native's Near Death Experience (@swyx mixtape extract from recent @sourcegraph podcast)
swyx.transistor.fm/episodes/reactβ¦
Another flashback with @vjeux about the history of RN
React-iOS born from a hackathon to solve mobile dev velocity
Story almost ended there π
swyx.transistor.fm/episodes/reactβ¦
Another flashback with @vjeux about the history of RN
React-iOS born from a hackathon to solve mobile dev velocity
Story almost ended there π
13/ React-Native-Windows content by @callstackio
Series of 3 blog posts by Bartosz Klonowski + podcast with @grabbou
Various insights, from business to tech: advantages over Electron, details about brownfield RN Windows apps...
callstack.com/blog/why-use-rβ¦
Series of 3 blog posts by Bartosz Klonowski + podcast with @grabbou
Various insights, from business to tech: advantages over Electron, details about brownfield RN Windows apps...
callstack.com/blog/why-use-rβ¦
14/ Twitter's div Soup and Uglyfied CSS, Explained by @giuseppegurgone
Explains some details about React-Native-Web, used by Twitter
Mention atomic classes, accessibility, devtools...
giuseppegurgone.com/twitter-html/
Explains some details about React-Native-Web, used by Twitter
Mention atomic classes, accessibility, devtools...
giuseppegurgone.com/twitter-html/
15/ React-Native-Screens 3.7.0 by @swmansion
The new onTransitionProgress event on the native stack enables a few new animated use-cases π€
The new onTransitionProgress event on the native stack enables a few new animated use-cases π€
https://twitter.com/swmansion/status/1435976788782501891
16/ Epic vs Apple
"Apple must allow other forms of in-app purchase, rules judge in Epic v. Apple"
Not strictly related to RN, but still quite important news for the mobile industry :)
theverge.com/2021/9/10/2266β¦
"Apple must allow other forms of in-app purchase, rules judge in Epic v. Apple"
Not strictly related to RN, but still quite important news for the mobile industry :)
theverge.com/2021/9/10/2266β¦
17/ Flutter vs React-Native by @Nash0x7E2
getstream.io/blog/flutter-vβ¦
Article from a Flutter dev from @getstream_io , maintaining SDKs for both platforms.
A bit biased, still an interesting comparison (aware of JSI, maybe not React-Native Skia π)
getstream.io/blog/flutter-vβ¦
Article from a Flutter dev from @getstream_io , maintaining SDKs for both platforms.
A bit biased, still an interesting comparison (aware of JSI, maybe not React-Native Skia π)
18/ Corepack in Node.js 16.9 by @arcanis (experimental)
nodejs.org/dist/latest-v1β¦
Allows better integration of Yarn & pnmp in Node.js
Can ensure everyone uses same version
Biasing toward npm usage was not really fair, it's a lucrative company
nodejs.org/dist/latest-v1β¦
Allows better integration of Yarn & pnmp in Node.js
Can ensure everyone uses same version
Biasing toward npm usage was not really fair, it's a lucrative company
19/ Small Bundles, Fast Pages: What To Do With Too Much JavaScript by @benschwarz
calibreapp.com/blog/bundle-siβ¦
Good perf tips, many of them can be applied to React apps
Discovered react-live-chat-loader, allowing performant integration of widgets like Intercom
calibreapp.com/blog/bundle-siβ¦
Good perf tips, many of them can be applied to React apps
Discovered react-live-chat-loader, allowing performant integration of widgets like Intercom
20/ @replayio by @jasonlaster11
replay.io
New kind of time-travel debugging experience
So many thought leaders say it's awesome
Works with any app: not just Redux, and also plan to support backend π
replay.io
New kind of time-travel debugging experience
So many thought leaders say it's awesome
Works with any app: not just Redux, and also plan to support backend π
21/ @_buildspace
A new project-based course for web devs that want to learn crypto / web
Many said it's a really nice new way to learn while leveraging your web / JS / React knowledge
buildspace.so
A new project-based course for web devs that want to learn crypto / web
Many said it's a really nice new way to learn while leveraging your web / JS / React knowledge
buildspace.so
22/ Web Vitals patterns
"A collection of common UX patterns optimized for Core Web Vitals. This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores."
web.dev/patterns/web-vβ¦
"A collection of common UX patterns optimized for Core Web Vitals. This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores."
web.dev/patterns/web-vβ¦
23/ Petite Vue
github.com/vuejs/petite-vβ¦
A new 6Kb subset of Vue, with most of the features, by Evan You
Looks like the equivalent of Preact for Vue
github.com/vuejs/petite-vβ¦
A new 6Kb subset of Vue, with most of the features, by Evan You
Looks like the equivalent of Preact for Vue
24) TypeScript: In defense of any
fettblog.eu/typescript-anyβ¦
Stefan Baumgartner says it's fine to use any if you know what you are doing
Link for your colleague: giveupanduseany.com π
fettblog.eu/typescript-anyβ¦
Stefan Baumgartner says it's fine to use any if you know what you are doing
Link for your colleague: giveupanduseany.com π
π¬ THREAD END!
Follow @sebastienlorber for the next threads!
Going to turn these threads into emails (November)
βοΈ Pre-subscribe here: getrevue.co/profile/thisweβ¦
β€οΈ Like this thread 𧡠?
π Please Retweet π
π Follow the link π
Follow @sebastienlorber for the next threads!
Going to turn these threads into emails (November)
βοΈ Pre-subscribe here: getrevue.co/profile/thisweβ¦
β€οΈ Like this thread 𧡠?
π Please Retweet π
π Follow the link π
https://twitter.com/sebastienlorber/status/1440263826969022475
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
