Bookmarks (2147)

Adobe's Efforts in Creating an Accessible Autocomplete Experience for React Spectrum — Adobe is placing a very high priority on accessibility in the Spectrum design system. That is judging by the time, effort and thought they have put into making a ubiquitous combo-box easier to use for everybody.

React Wavify — A UI component which incorporates the physics of real waves configured by a series of parameters. It’s pleasantly soothing to watch.

Bulletproof React: An Architecture for React Apps — Using a group chat application as the case study, the author touches on every significant aspect of building and deploying a React application which will make it “bulletproof” and therefore production ready. Note, however: "This is not supposed to be a template or a framework. It is an opinionated guide that shows how to do some...

React Tags — A tagging component ready to use in your React projects and inspired by Gmail’s To field functionality.

useCookieConsent — The prompts encouraged by certain interpretations of the GDPR data protection rules are everywhere these days; this hook could make implementing them and being compliant with the rules more straightforward.

use-smartcrop: Content Aware Image Cropping Hook — A React wrapper for smartcrop.js and color-thief which algorithmically predicts good crops for images.

What's the Difference Between Controlled and Uncontrolled Components in React? — A very quick and precise differentiation between these two broad categories of components.

Introducing the New Overlay Hooks for Ionic React — Although V6 is already out in beta, these new hooks in V5.6 will give you better, more natural control over UI elements such as alerts, modals and pop-ups.

Create a Fullstack Next.js App with Authentication, Data and Storage — How can you build a full-stack application with what is ostensibly a front-end framework? Spoiler alert: It involves AWS Amplify.

Remotion 2.2: 'Write Videos' in React — In case you missed it back in February when we featured Remotion, it's a pretty exciting way to work with video using the React concepts and constructs you know and love. "If you know React you can make videos."

React Authentication, Simplified — Authentication is one of those things that just always seems to take a lot more effort than we want it to. In this article, we lay out a different approach to authentication (plus access control & SSO) in React applications.

Five Code Smells React Beginners Should Avoid — About to pull the trigger on your first big pull request for a high profile project? You should probably go through this checklist first.

A Checklist for Freelance React Developers — Robin covers a variety of things to think about if you’re an independent React developer who needs to seamlessly get involved with existing teams and projects.

One React Mistake That's Slowing You Down — Are you jumping from passing props to using context too quickly? Here’s the case for why Kent C. Dodds thinks you might be.

Learn React (Hooks) Interactively with Flashcards — Learn modern React from scratch, and practice in an intuitive environment. Throughout this course, you will build an online supermarket shopping app with Stripe integration.

Breaking Down Bulky Builds With Netlify and Next.js — Even though the article is sponsored by Netlify, the author makes a compelling case for how to improve static site build times using On-Demand Builders and Incremental Static Regeneration.

How We Built React Components for Any Front End — Courier, the fee-based service for adding messaging capability to your app, created components using React which their customers use to render Courier components, regardless of which front-end is being employed.

Not All Components Are Created Equal — There have been a number of past attempts to lump components into broad categories which were mostly eschewed by the React community. Despite that, the authors advocate for a new taxonomy based on three component classes.

React Fragments: What Every React Developer Should Know — As a general rule, React components can only return one HTML element which can lead to the DOM being unnecessarily nested. React Fragments provide an efficient workaround to this problem.

How to Cancel Pending API Requests to Show Correct Data — A user rapidly clicking around your app’s UI may result in API requests not completing before being superceded by subsequent API requests. Cancelling the outdated API request ensures only correct data is displayed.

▶  How to Integrate PayPal Payments in React — A short video tutorial on how your app can accept PayPal payments even from those who don’t have PayPal accounts.

React Virtual 2.8.0: Hooks for Virtualizing Scrollable Elements — With a single headless hook you can work with row, column and grid level virtualization, get imperative scrolling when needed, custom scrolling function support, and more. Lots of CodeSandbox demos here too.

Network-Viewer: HTTP Archive File Viewing For Humans — An example of React being used to create an internal web utility, complete with source code. Check out the example.

React 3D Carousel — A nice, incremental improvement on more basic, ‘flat’ carousel components used for viewing galleries of images.

Fre: Small Footprint Concurrent UI for Fiber — Inspired by React, “one of the smallest and fastest UI libraries” implements concurrent mode and off-screen rendering to enhance performance.

Time to Say Goodbye to Enzyme.js? — Enzyme is a long standing React component testing library originally built at Airbnb. However, “the world has already moved - to React Testing Library” claims the author who has a variety of other reasons to consider dropping it.

▶  Rachel Nabors: From Comics in Virginia to React Core at Facebook — React maven Rachel Nabors recounts a most improbable journey from the Blue Ridge Mountains of Appalachia to the centre of the React ecosystem in a fascinating disscussion with hosts Kathy Korevec and Brian Douglas. There's a full transcript if you don't want to listen.

Elementary: React-Inspired Functional, Declarative Audio Applications — Can writing audio DSP software be “simple, fast and fun”? Not up until now, but Elementary intends to change all that, and thus lowering the barriers to entry for this burgeoning field.

Creating a Multi-Author Blog with Next.js — The latest instalment in this informal series of case studies which focus on a big, audacious project goal and then parses it out into a manageable series of steps.

How to useContext in React — Almost two years on, the author follows up the first part of this two part series on useContext. In this latter piece, he focuses specifically on the useContext hook.

Hacking the React AST For Fun and Profit — In a tutorial which is as quirky as it is clever, ‘Swiz’ shows how to hack the paywall on his own recently released book Serverless Handbook for Frontend Engineers. If the objective was to trigger mentions of it, the strategy seems to have worked.

What’s The Best Place to Host a Next.js Site? — A really detailed look at deploying a Next.js app to Vercel, Netlify, Layer0 and Heroku and rating them based upon a variety of factors.

Tagify: Quickly and Easily Add Tagging to Your React App — Take any text or textarea field and, as if by magic, transform it into a tagging component as illustrated with the author’s well thought out demo.

Fresnel: Server Side Media Queries? — Media queries are used to handle variations in the hardware’s characteristics such as screen dimensions and resolution. They are typically implemented in HTML/CSS. This library brings them into React and enables a SSR compatible approach.

react-native-google-cast — Want to add streaming audio and video to your mobile app? This is a React Native wrapper for the Google Cast SDK.

gooey-react: Create Custom Animated "Gooey" Blobs — These can be altered as needed with various properties and can work well as loading indicators. See some examples here.

Designing a Dataflow Editor with TypeScript and React — If you want to know what it’s really like to work with TypeScript to build complex React components, this design report is a thorough guide to the considerations involved in building a drag-and-drop, interactive user interface component.

Read and Render Markdown Files with Next.js and Nx — Part of a series about creating your own blog with Nx, Next.js and Tailwind.

▶  Building a Realtime Chat App with React, Node.js, and Socket.io — The end result looks a lot like Facebook Messenger. Be warned, though, this is a two hour video :-)

Five Epic React Tips To Use Today — A grab bag of ideas which claim to offer cleaner and more reliable code while making “your development experience easier and overall more enjoyable”.

React Architecture: How to Structure and Organize a React Application — We've featured a variety of "how to structure React apps" pieces in the past, but it remains a perennially interesting topic as there really is no one way. Tania is always fantastic at explaining things though, so we really like this one.

Image To Text Conversion With React and Tesseract.js — We like it when a library with a theoretical capability — in this case Tesseract.js’s ability to recognize over 100 languages and turn it into usable text — is shown off and we get to see its practical use in a real world scenario.

SolidJS Official Release: The Long Road to 1.0 — Everyone can agree there’s no shortage of JavaScript frameworks, so what makes the first official release of SolidJS worth a closer look? Claims of “all the flexibility of React and simple mental model of Svelte” caught our attention.

📅  React Meetup: The State of the React Ecosytem — While we’re still not quite back to full-on live events it seeems, this one has kind of that feel: a line-up of React observers and influencers opining as to where things stand today. It's online on Thursday, July 15.

An Overview of React State Management Techniques in 2021 — There are a lot of approaches to state management, so it is sometimes valuable to compare them and see which might be the best for you. This article compares, contrasts and proffers a rating for Apollo’s Local Cache, Recoil and Redux.

iMessage Clone using Stream Chat and React Native — Stream recently published an open source clone of the iMessage application built using v3 of stream-chat-react-native library. This project demonstrates the implementation of message search, swipeable channel list, message list, reactions etc, similar to that of iMessage.

▶  How Serverless Functions and Jamstack Can Power Up React Apps — A 40-minute practical screencast-meets-talk where Jason Lengstorf codes a React app and a custom serverless API from scratch including deploying to production on Netlify.