🇺🇦 #​286 — April 27, 2022

Read on the Web

Remotion 3.0: ‘Write’ Videos in React — Remotion provides a way for you to use your React knowledge to create videos by writing what you want to happen in code with Remotion then handling the rendering and encoding. ▶️ This video showing off the new Remotion Lambda serverless video renderer (using AWS Lambda, unsurprisingly) was itself created with the tool. React 18 is now supported as of v3.

Jonny Burger (Remotion)

React 18.1 Released — Don’t get too excited – it’s almost entirely a bug fix release, but if you’re already on React 18, you’ll want to get upgraded nonetheless.

Meta

How to Build an Accessible React Data Grid — How do you make a React table (data grid) component accessible? Read this blog post for a comprehensive tutorial by one of our most experienced software engineers and accessibility experts.

Progress KendoReact sponsor

Netlify Edge Functions: Serverless Compute Powered by Deno — Edge Functions is a Deno-powered platform for running globally distributed JavaScript functions. How does this benefit you? It’s another place to run your React server components or using streaming SSR.

Joey Aiello (Netlify)

Building a Wordle Clone for the Terminal with React Ink — Inkle is a React powered clone of the popular Wordle word game. What makes it interesting is it runs in the terminal and uses Ink to do so.

John Ruble

React Batching — An easy-to-follow and well-illustrated tutorial on how to batch up multiple state updates as one and improve rendering performance as a result.

Robin Wieruch

Creating a Rich Text Editor using Rust and React — In 2021, Rust topped Stack Overflow’s Loved vs. Dreaded list for the sixth straight year. Here’s an example of how it can be incorporated into a React application – less a tutorial and more a case study.

Arend van Beelen

Stack Overflow Podcast: Exploring the Art & Practice of Programming

Stack Overflow sponsor

Mastering CSS Transitions with React 18 — How to use the new useTransition hook that arrived with React 18 to perform a wide variety of web animation effects.

Amazing Enyichi Agu (OpenReplay)

Upgrading to React 18 with TypeScript

John Reilly

File-Based Routing with React Location and Vite: Nested Layouts

Omar Elhawary

🛠 Code and Tools

React Responsive Pagination: Component for Smart Pagination — A responsive React pagination component which intelligently renders to the available width. You can try it out live here.

Jon Elantha

xstyled: A Utility-First CSS-in-JS Framework Built for React — An abstraction of the libraries and utilities use to create Smooth UI which can be employed to create your own, unique UI components without starting completely from scratch.

Greg Bergé

FortuneSheet: An Excel-Like JS Spreadsheet Control — It’s early days, but this looks promising. There’s a live demo, of course.

Suzhou Ruilisi Technology Co., Ltd

⚡️ Quick Bits:

react-accessible-accordion — The popular UI affordance, but taking WAI-ARIA requirements into account.

React Table Library — Build better, feature-rich tables with flexible theming and server-side operations.

react-dropdown 1.10 — Simple dropdown component. Demos.

useDisclosure 5.0 — Hook to handle open/close/toggle states on things.

Jobs

React Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Frontend Engineer — We’ve built the next-generation CMS. We’re open-source. JavaScript. Headless. Community & People first. And free. And will stay that way. Forever.

Strapi

Senior Software Engineers at Turo (SF | Remote/Hybrid Options) — The world’s largest car sharing marketplace on a mission to put the world’s 1.5B cars to better use. We’re hiring BE, FE, ML, iOS, Android & DevOps roles at all levels.

Turo

Find React Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired