#​356 — September 27, 2023

Read on the Web

Together with  Adadot
React Status

Upgrading Frontend Dependencies with Confidence — Tests often provide a way to see if the logic in our apps isn’t working the way we expect, but what about if a frontend component is rendering incorrectly? Visual regression testing to the rescue! Sébastien, well known for his work on Docusaurus, shares a workflow based on GitHub Actions, Playwright, and Argos (a commercial tool but with a free tier suitable for the task).

Sébastien Lorber

Insights For Developers, Gamified — Adadot gamifies the software development process giving each developer and team personalised recommendations on how to become the best. Collect all of the badges and showcase your experience with embeddable stats.

Adadot sponsor

Best Practices for Developing Complex Form-Based Apps — Developing form-based apps using React Hook Form with an emphasis on the added benefits of incorporating TypeScript to enhance type safety and developer productivity.

Oren Farhi


Drawing on Google Maps with Drawing Manager — This incredibly thorough and code-rich followup to Integrating Google Maps in React focuses on the use of DrawingManager to draw polygons, rectangles, polylines, circles and markers on top of maps.

Pavlo Chabanenko (Sudolabs)

Build Your Own Chatbot with React and the OpenAI API — The AI is all provided by OpenAI, of course, but building your UI on top opens up some interesting opportunities.

Madars Biss

Implementing Dark Mode in React Native — Supporting dark mode is more important than ever as users have come to expect it—this guide explains how.

Stephen Hanson (thoughtbot)

🛠 Code and Tools

Sonner 1.0: An Opinionated Toast Component — Styled by default but customizable. We’ve linked to it a few times this year but it’s just reached its 1.0 milestone. There’s a live demo to try on the homepage, or hit up the GitHub repo.

Emil Kowalski

Sugar High: A Lightweight Syntax Highlighter for JSX — At just 1KB minified and gzipped, this is the sort of sugar high that’s not bad for you. GitHub repo.

Jiachi Liu

The Postman VS Code Extension: Lightning-Fast API Testing and Collaboration — Develop and test your APIs in Postman directly from Visual Studio Code with the new Postman VS Code extension.

Postman sponsor

MDX Editor 1.0: A Rich Markdown Editor Component — Best known for React Virtuoso, Petyo unveiled a Lexical-powered Markdown editor for React apps earlier this year, and it, too, has just hit 1.0. The live demo shows off what you need to see.

Petyo Ivanov

Sandpack 2.8: A Component Toolkit for Live Code Editing Experiences — Created by the folks at CodeSandbox who specialize in this area. Something to consider if you want to create interactive documentation, low-code tools, or the like. GitHub repo.


📰 Classifieds

Frontend Developer at Crystallize 🚀 (Remote, Work from Anywhere 🏖️) — Enjoy TypeScript, React, GraphQL and performance? Join in building our super-fast headless commerce service with a beautiful UI.

🎟️ CityJS Berlin: 1-3 November. Hear from Rachel Nabors speak about the "Gateway to React: the react․dev story." Use the discount code COMMUNITY to save 35%.

💻 Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

🎁 And a bonus item..

Gitify: GitHub Notifications From Your Menu Bar — If you get too many GitHub notifications, this desktop utility promises to bring them under control and collect them together in one place, whether on macOS, Windows or Linux. It's built using Node and React as an Electron app. Here's the source.

Manos Konstantinidis