Bookmarks (201)

Boring Avatars: React Library to Generate Custom Avatars — Ranging from generic gradients to face-like creations, this library (GitHub repo) generates custom, SVG-based, round avatars from any username and color palette.

MouseTracker: A Component That 'Follows' Your Mouse — A component that renders children into a fixed-position div that takes the coordinates of the mouse, with optional offsets, perhaps to augment the pointer with helpful information or to render tooltips. There are a couple of live samples with code, too.

▶  Talking About the React 'Forget' Compiler — React core team members Joe Savona and Sathya Gunasekaran talk, amongst other topics, about the ‘Forget’ React optimizing compiler first teased in 2021 but then further explained in the React team’s June 2022 update.

The State of State Management in React Apps — State management remains a subject that attracts a lot of attention. So much, in fact, you may need the help of the handy React Handbook to help sort through all the options.

Practice React by Fixing Tests — How would you evaluate your knowledge of JSX? One way could be to clone this repo or this CodeSandbox and see if you can fix the bugs.

The Evolution of React APIs and Code Reuse — An exploration of the evolution of common React patterns, from mixins and higher-order components to render props and hooks. As React becomes more popular in backend contexts too, you can benefit from maintaining a clear mental model of React and understanding the tradeoffs and benefits of each approach here.

▶  Celebrating 10 Years of React — Grab yourself a slice of cake, React is 10 years old. As part of the celebrations, Vercel’s Delba de Oliveira ▶️ hosted a ‘roundtable’ discussion (though the table itself has taken the day off 😁) with Andrew Clark and Sebastian Markbåge talking about the current state of React, Suspense, Server Components, and Actions.

'Enterprise-Grade' Next.js Boilerplate App — One of those boilerplate apps that includes everything but the kitchen sink 😁 Tailwind CSS, Jest, Playwright, Storybook, Radix UI, T3 Env, and more all come along for the ride here.

Quick SQLite: A Fast React Native SQLite Library Built using JSI — Embeds the latest version of SQLite and provides a low-level JSI-backed API to execute SQL queries.

Pastel 2.0: A Framework for Building Ink Apps — Ink brings the power of React and components to building command line apps, and Pastel provides more structure on top of that. Indeed, it calls itself a “Next.js-like framework for CLIs.”

The Epic Stack: An Entire Opinionated Stack in One — A new opinionated ‘project starter’ and stack to help you or your team leapfrog analysis paralysis when figuring out what tools and libraries to use in your next, fresh project. And opinionated it certainly is, choosing to go with Remix, Prisma, Tailwind, Fly, SQLite, and more all out of the box. You’re encouraged to fork...

BlockNote: A 'Notion-Like' Block-Based Text Editor — Flexible and presents an extensive API so you can integrate it with whatever you want to do. You can drag and drop blocks, add real-time collaboration, add customizable ‘slash command’ menus, and more. Builds on top of ProseMirror and TipTap.

How We Built the Storybook Day 3D Animation — Have you ever seen an impressive animation and wondered ‘so how’d they actually do that?’ This tutorial takes the Storybook Day animation and breaks it down step-by-step, each with sample code. One for the React Three Fiber crowd.

Full Stack for Front-End Engineers with Jem Young (Netflix) — Learn what it means to become a well-rounded full-stack engineer with this hands-on video course. You’ll dive into servers, work with the command line, understand networking and security, set up continuous integration and deployment, manage databases, build containers, and more.

▶  Why React is Here to Stay — A rebuttal of sorts to Adam Elmore’s video from two weeks ago: ▶️ I’m Done with React.

You Might Not Need React Query — React Query is a great library, but like any tool, you should choose it for the right problem. Certainly an interesting entry in a fantasticly extensive series of posts all about using React Query ;-)

Understanding React Concurrency — It’s not mandatory to understand the details of React’s ‘concurrent features’ (what you may have once called ‘concurrent mode’) but having the basic ideas in your head could help you solve performance problems and bugs down the line.

Creating a 'Spotlight' Effect with React and CSS — Adding just a touch of interactivity to cards and other UI elements.

▶  React from Another Dimension with Dan Abramov — At Remix Conf 2023, Meta’s Dan Abramov (of both React and Redux fame) gave an illuminating talk about server-side components and server actions, by way of thinking about what React might have been like if the modern JavaScript ecosystem had blown up 15 years earlier than it did, complete with some Windows XP vibes. (42 minutes.)

Introducing Legend-State 1.0: Build Faster Apps Faster — Another state management solution? Yes, indeed. After a year of effort, Legend State 1.0 is here and claims to be the fastest option “on just about every metric” and they have the benchmarks to prove it. Whatever the case, this thorough intro is worth a look. GitHub repo.

Cut Development Time in Half — Spend more time building and less on maintenance with Storyblok CMS: All your assets in one place, reusable components, and a simple visual editor so marketing/design/other teams can do things without bugging you.

Considering Alternatives to Vercel — As Vercel’s platform becomes more popular and adds new features like their new storage options, more folks run up against the reality of pay-as-you-go pricing and start to balance it up against the DX benefits. Prithwish looks at some of the alternative routes.

React Server Components, Next.js App Router and Examples — Addy Osmani’s overview of the state of React Server Components, the Next.js App Router implementation, other implementations, the move towards hybrid rendering, plus some RSC related links.

React with TypeScript Tutorial — Familiar with React, but not yet had the chance to incorporate TypeScript? This tutorial takes you through the steps to do it in what the author believes is the correct way. (Note: Starts off openly accessible but email-walled for later portions.)

Using Apollo Client with Next.js 13 — Looking at the release of an official (if experimental for now) library to support the App Router approach.

Ant Design 5.5: An Extensive React Component Library — v5.5 includes lots of minor enhancements as well as an all new color picker component. Curiously they bill themselves as “The world’s second most popular React UI framework” which got us thinking about ▶️ Garfunkel, Messina, Oates, and Lisa.

Scrollytelling: A Library to Create Scroll Animations with React and GSAP — Powered by GSAP’s ScrollTrigger plugin and includes some abstractions to make it work better with React. Try the example.

DivMagic: Copy Code From any Page as Tailwind CSS Components — A Chrome or Firefox extension to convert elements directly into Tailwind CSS (including colors). Your experiences with it may vary but it’s an interesting idea. You can see it in action ▶️ in this one-minute screencast.

Next.js 13.4 Released — Despite the minor version bump, this is a big release for the popular React framework. The new app router and its improved approach to filesystem based routing is now offered as a stable feature, with a new concept of server actions being introduced in alpha as a way to mutate data on the server without needing to create an in-between...

React Lifecycle Visualizer 3.1: Real-Time Visualization of Lifecycle Methods — It’s been five years since we linked to this, but it’s maintained and now supports React 18. Use it to visualize the lifecycle methods of class components. React Hook Tracer provides similar functionality for function components.

Ink UI: UI Components for React Based CLIs — Ink is a popular React renderer that offers the same component-based UI building experience but for command-line apps, and it’s taking a step forward splitting out some handy components into a separate package.

React D3 Tree: Interactive Tree Graph Component — Handy for things like family trees or org charts. There are a few practical examples on display here. Uses D3 for rendering. GitHub repo.

Build a Multi-Step Form with React Hook Form — Use React Hook Form to build a basic, multi-step registration form to collect a user's data and then present it in a confirmation view where it can be reviewed and edited.

A Guide to Using Redux Toolkit with TypeScript — Redux Toolkit provides a standard way to work with Redux. This tutorial shows off the practicalities.

A Follow-up to Dan Abramov's React Server Component Quizzes — Dan intended for these quizzes — delivered via 🐦 his Twitter account — to challenge and enhance his audience’s understanding of React Server Components. This article provides a helpful companion explanation.

How to Structure Your Next.js App with the New App Router — Learn how to organize your modern Next.js project using a feature-driven structure with the new App Router which, the author asserts, enables greater flexibility and efficiency in development.

▶  'I'm Done With React' — Going from least-to-most important, the reasons this developer isn't choosing React for future projects make for interesting watching, particularly if you too are overwhelmed by upheaval in the React world. Solid is one of the alternatives he has warmed to.

React-Admin: The Open-Source Framework for B2B Apps — From simple dashboards to complex admin panels for your entire company, react-admin unleashes the true productivity of React. Join more than 20k devs already building web apps like they play Lego, thanks to 230+ business-oriented components.

React Canaries: Enabling Incremental Feature Rollout Outside Meta — A little birdie told us (groan..) that React now has a new ‘canary’ release channel in a similar style to Chrome Canary. The idea is that you can more quickly use bleeding edge features of React but in an officially supported release.

The Interactive Guide to Rendering in React — This interactive guide explores why, when and how React renders and illustrates it with a series of short and well thought out animations.

next-sitemap: Sitemap Generator for Next.js Apps — Generates sitemaps and robots.txt for static, pre-rendered, dynamic, and server-side pages.

Mock Service Worker 1.2: REST/GraphQL API Mocking Library — Intercepts requests which you can then mock. Capture outgoing requests using an Express-like routing syntax, complete with parameters, wildcards, and regexes. GitHub repo.

Introducing React Native macOS 0.71 — With this version, the macOS flavor of React Native catches up with its iOS, Android and Windows cousins, and they want to keep it that way in future. v0.71 introduces an experimental preview of Fabric (React Native’s new rendering system) and more.

Making Animated Tooltips with React and Framer Motion — Given there’s a fairly good chance tooltips could be the only ‘documentation’ that will actually get read, why not jazz them up a little?

Bulletproof React: A Scalable Architecture for Production-Ready Apps — A long standing resource that continues to get updates and deserves another look. It’s not a boilerplate app or framework itself but an opinionated guide to how you could structure a large scale React app if you’re lacking for inspiration.

Vercel Introduces First-Class Storage Options — Vercel is a popular platform for deploying React apps but has lacked obvious options for data storage (indeed, they have a lot of templates for common third party systems). Now, though, they’ve partnered with Upstash, Neon, and Cloudflare to offer new first-class key/value, Postgres, and file storage options.