Testing components with Playwright

🇺🇦 #​289 — May 18, 2022

Read on the Web

React Status

Aspect: A New Visual Environment for Building Components — It’s a new, unproven tool, but any efforts to simplify the development process are laudable to us, and you might find it useful too. Currently it only exports class components, but it’s great to see them dogfooding things by building Aspect in Aspect itself.

Aspect

Playwright Can Now Test Your ComponentsPlaywright, Microsoft’s browser control library which “enables reliable end-to-end testing for modern web apps”, takes an interesting step outside of its usual neighborhood. In preview form for now, but you can learn more here.

Microsoft

Revolutionize Your File Handling with Filestack. Start Now — Ever wondered how to bring your application to the next level? Filestack offers its best-in-class APIs to help you do just that. Detect images with Image Detection, speed up your file uploads, and make your application safe all with Filestack.

Filestack sponsor

Improve Your React App Performance Using React Profiler — A quick peek at the profiler API which can provide hard data to be used in diagnosing performance bottlenecks.

Laure Retru-Chavastel

Quick bits:

SolidJS is an interesting alternative you may have heard of but not had time to look into.. if so, ▶️ there’s now a 100 second intro video comparing its approach to React’s.

TypeScript 4.7 Release Candidate is out.

Jobs

Senior React Engineer @ Nebulab (Remote) — Join our distributed team and build high-volume eCommerce applications in a workplace made by developers for developers.

Nebulab

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

Senior React / React-Native Developer (m/f/d) – Remote in Germany — Join our strongly motivated and fun-to-be-around core team that will turn a dusty market of photo book creation upside down.

Celebrate Apps GmbH

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

Improve the Performance of Your Forms — An exploration of how Kent’s state colocation concept (from 2019) can optimize React forms by keeping state management close to where it is needed.

Kent C. Dodds

Using Next.js ISR with Serverless Cloud — Serverless’s cloud offering supports Next.js incremental static regeneration (ISR) rendering method. This post walks through how to use it.

Russ Schick

Implementing Progressive Image Loading — Is there anything worse than staring at a blank frame while a large, high-resolution image is loading? Improve your user’s experience by giving them a progressively clearer picture of what lays in store for them.

Ibadehin Mojeed (LogRocket)

How to Implement Redux Reducers

Godwin Chinda (OpenReplay Blog)

🛠 Code and Tools

React Fast Accordion: A Fast, Dynamic, and Accessible Accordion — No dependencies and it incorporates animation via the Web Animations API. Demo on CodeSandbox.

Shivam

Kea 3.0: A State Manager for ReactKea is a state management library that’s been around for many years and provides a lot of structure around the concept. This big v3 release brings Kea up to modern standards without breaking what worked before.

Marius Andra

Free Activity Feeds & Chat APIs for Qualifying Teams

Stream sponsor

react-ymd-date-select: Year/Month/Day Selection Dropdowns — Provides an alternative to the calendar based approach. react-select-datepicker is another option in this space.

Yuichiro Tachibana

A React Router Implemented in Under 100 LOC — One of those sort of experiments that anyone can learn from.

Ashok Khanna

Start UI Web: An Opinionated Frontend Starter Built with React, Next.js, Chakra UI, React Query, and More

BearStudio

⚡️ Quick Bits:

react-page-transition — Some jazzy alternatives to waiting for the new page to load – courtesy of Codrops.

react-textarea-autosize — Textarea component that grows with the content.

react-dnd-treeview — Intuitive, drag-and-drop functionality for your tree view.

react-native-geolocation — Geolocation APIs for React Native.

react-native-bars — Components to control your app status and navigation bars.

react-medium-image-zoom — Medium․com style image zooming.

Leave a Reply

Your email address will not be published.