Next.js 11, Demystifying styled-components, and a new design and coding environment for React components that runs in the browser
This week's issue is sponsored by Clerk
With Clerk, you can add <SignUp/> and <SignIn/> to your React application in minutes. Clerk comes with beautiful, high-conversion UIs, multi-factor authentication, device management, and much more.
Highlights include:
Next.js Live -- A new, open-source development environment that enables real-time, collaborative coding in the browser. It uses Wasm, ESM, Service Workers, and a bunch of other stuff to generate a live URL (without a build step) that you can share with anyone -- so your whole team can edit, chat, draw, and see updates happen in real time.
Conformance -- Google's new system of "strong defaults and actionable rules" for improving performance out of the box with frameworks like Next.js.
Better, faster dev experience -- Startup time improved by 24%, processing time for changes was reduced by 40%, and the next/image component got some big improvements.
Josh Comeau pops the hood on styled-components and teaches you how it works by walking you through the process of building your own mini-clone of 💅 styled-components. "By demystifying styled-components, we'll be able to diagnose and fix weird CSS issues with way less frustration."
In this article, Seif Ghezala talks about the performance problems his team faced when building an energy news aggregator site that showcases thousands of posts daily and how they leveraged Next.js and Vercel to solve them.
Shruti Kapoor writes about how the major theme of React 18 is to make the UI more performant by removing janky user experiences by introducing out of the box features and improvements powered by "concurrent rendering." She goes over the main new features that will be coming out and how they help support this goal.
startTransition demoCheck out this article from Swizec Teller if you're interested in seeing a demo of startTransition (a new React 18 feature that's still unstable) in action.
In this tutorial, Dhaiwat Pandya walks you through the process of crafting an isolated, independent & reliable Image component for React by leveraging tools like Storybook, Testing Library and Jest.
Martin Novak covers the basics as well as some advanced tips that include 404 pages, redirects, asynchronous pages, and a site map. He discusses how he has used these techniques to build all of his websites, including his current project.
Rupa makes lab testing simple. We're taking the archaic processing of ordering lab work and bringing it into the modern age. Come join us as the 5th engineer in our early team. You'll be a key part of setting the direction for the engineering culture and will own major aspects of the product. Rupa is a remote-first company, but we love getting the team together a couple times a year for some beautiful outdoor experiences. We're growing rapidly and would love to have you be a part of this journey with us! 💙
A slick design and coding environment for React projects and components that runs in the browser. It combines VSCode with a design and preview tool, and full two-way synchronisation: design and code update each other, in real time. And unlike any design tool out there, it uses React code as the source of truth. Created by Balazs Bajorics and others.
A new React component library for building modern applications easily and quickly.
A new, community-led project that enables Storybook 6.3 to support Vite, one of the hottest new build tools out there.
In this 15-minute video, Harry Wolff gives a fun, accessible overview of all the new stuff that's coming in React 18.
This hour-long video covers what JWT is and how to use it in React and Node.js. It goes over JWT Authentication and authorization for beginners using the refresh token and JWT Login.