Bookmarks (134)

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

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.

Playwright Can Now Test Your Components — Playwright, 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.

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.

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.

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.

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.

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.

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

Kea 3.0: A State Manager for React — Kea 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.

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.

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

An RFC for useEvent, a New Fundamental React Hook — Billed as a so-far ‘missing piece’ of the hooks system, the proposed useEvent is for defining an event handler that ‘sees’ fresh props/state but has a stable function identity. The motivation and use cases are shown off here and the React team is open to your feedback.

What The useEvent Hook Is (and Isn't) — If you want a bit more background to the above, Nick has some initial reactions to the useEvent hook RFC. James Brightman also thinks about it and thinks it’ll eventually “change the way you write modern React.”

Build Your Custom React Chat App Fast — The Sendbird UIKit is ideal to quickly build a world-class, custom, React chat app. Sign up for a free trial now and experiment with the richest chat API on your own schedule with our free forever Developer plan.

A Report from Reactathon — In-person React events remain few and far between as the COVID situation continues to play out around the world, but Reactathon brought a lot of folks together and Swizec reflects on the key themes here.

▶  React Router 6 Tutorial for Beginners — A new video by this noted educator where he goes back to basics for React beginners. In this case, he takes up the subject of React Router as used to build a single page application.

The key Attribute and Best Practices for Performant Lists — Is the only reason you’re using the key attribute to satisfy an obscure ESlint rule? If so, the author asserts there are better reasons than that to make it part of your routine.

A Quick React Component Test — A explanation of a Cypress test to confirm the onClick handler is executing when a button component is clicked, complete with source code.

The as Prop — A succinct description on its use to combine semantics with aesthetics in a flexible way.

Reagraph: WebGL Graph Visualizations for React — A high-performance network graph visualization library that uses WebGL under the hood for both 2D and 3D rendering options. Here’s a basic sandbox example you can play with.

Horizon UI: A Beautiful Open Source Admin Template for Chakra UI and React — Includes 70+ dark/light components covering a whole slew of UI possibilities. View a live preview here.

Scrollex: A Library to Build Beautiful Scroll Experiences with Minimal Code — Definitely not for every project but you can check out some really cool examples of what’s possible on the demo page.