Ron Perris from Snyk this checklist of React security best practices to help you and your team find and fix security issues in your React applications. I’ll show you how to automatically test your React code for security-related errors and automatically fix them.
Aleph.js doesn’t need webpack or other bundler since it uses the ESM imports syntax. Every module only needs to be compiled once and then cached on the disk. When a module changes, Aleph.js just needs to re-compile that single module, there’s no time wasted to re-bundle every changes, and instantly updates in the browser by HMR (Hot Module Replacement) with React Fast Refresh.
The “$X but for Deno” meta trend is starting to pick up steam. Expect more like this in 2021 and beyond.
Timelines are hard to get right and React-Chrono looks really well done. It has 3 modes (vertical, horizontal, and vertical alternating where cards alternate between left and right side of timeline), lets you include images & videos, and is highly customizable.
I am a huge proponent of a couple of specific ideas. One is that you should always try to understand what problems a specific tool is trying to solve… And another is that you need to understand exactly what problems you are trying to solve in your own application right now, and pick the tools that solve your problem best.
Ben Ilegbodu joins Divya, Suz, & Amal to talk about introducing TypeScript at Stitch Fix, why TypeScript and React work well together, building component libraries, and more.
Trends come and go and sometimes we forget to look at the value of tools for what they are. In an exploration of how to write React in a way that felt more pleasant, I rediscovered an old front-end tool, and thought it was worth sharing it.
At Airbnb, we made it a goal to unify our visualization stack across the company and in the process, we created a new project that brings together the power of D3 with the joy of React.
The library boasts small bundle sizes due to package splitting, is un-opinionated about integrations like state management and animations (if that’s a feature for you), and is explicitly not a charting library.
As you start using visualization primitives, you’ll end up building your own charting library that’s optimized for your use case. You’re in control.
Redux maintainer Mark Erikson joins Jerod and Amal for an in-depth conversation around the React community’s fav state management solution. We learn how Mark came to be maintainer of Redux, why and how Redux Toolkit came about, when to go with Redux vs other options, and much more.
ALSO: prop drilling, the grep factor, & lasagna mode (oh my)
If you plan on using Tailwind and building with React or Vue (or Alpine coming soon), it’s a no-brainer to start with these free UI components by the Tailwind team.
Many of these “vs” style articles are too shallow or narrowly-focused to be of much use. Not this one. It even has a table of contents. Dive in deep for the full analysis or jump straight to the end for the
if/then framework selection advice.
Arwes is a web framework to build user interfaces for web applications based on science fiction and cyberpunk styles guidelines, animations and sounds effects. The idea is to provide an user experience as if you were using futuristic out of a movie interfaces for your project.
The sounds are perfect.
I tried a lot of different ways to add TS support to Kea. At the end of the day what was needed was just not possible without an extra type generation step. I’ll document the failed attempts in a blog post one day. The issue boils down to the fact that each block inside a logic (e.g.
reducers) gets the logic itself as a parameter (
reducers: logic => (...)). That kind of loopy stuff is just not possible with TS right now. At least not to the level that it has to be for it to work in Kea (think of selectors that depend on each other). Ultimately, all of the pure-TS attempts I tried would have yielded a partial solution.
Thus kea-typegen was born. Even if it’s just a step along the way (TS compiler plugins a’la babel someday?) and still missing many features, it’s already really useful. It uses the TypeScript compiler API to analyse your source files and print out complete types (interfaces) for them.
Marius also recorded a video of the process in action.
Antoni Kepinski, who was a guest of ours on JS Party #85:
I wrote a short tutorial on how to embed Changelog’s podcast player into a React application so that it doesn’t affect the performance and accessibility of the site.
While I do understand that Changelog isn’t interested in
How-to's and tutorials, I feel like this one can be an exception, as it is related directly to Changelog and its podcasts ;)
Antoni is correct! How-to’s and tutorials aren’t something we share often. It’s not that they aren’t useful, it’s just that they aren’t really news and they are rarely noteworthy. But I’ll make an exception this time. 😉
It took me just 3 minutes to fully understand the concepts of React Hooks thanks to this great post.
That’s a ringing endorsement, if I’ve ever seen one. If React Hooks are new (or confusing) to you, give this 3 minutes of your time. 😀
Blitz.js creator Brandon Bayer joins Jerod to dive deep into the foundational principles of this fullstack React framework. We talk about its inspiration (Ruby on Rails), its differentiation (a “no-API” data layer), and its aspirations (built-in auth, plugins, recipes, and more).
This provides responsive UI components from 15 different app categories (commerce, blog, pricing, etc) with dark/light modes and differing color variants.
Recoil provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.
Straight outta Facebook. See also the conference talk where it was announced at React Europe 2020.
This is a very detailed article on:
directly comparing Ember and React, using the latest idioms and best practices from both frameworks.
It goes really deep into the differences and the developer experiences of both frameworks and is a really good read for someone who is curious about what modern Ember looks like, especially if they have some previous React knowledge.
This week Feross and Emma chat with Segun Adebayo about Chakra UI, a modular React component library that’s changing the game for design systems and app development.
Phelia transforms React components into Slack messages by use of a custom React reconciler. Components (with their internal state and props) are serialized into a custom storage. When a user interacts with a posted message Phelia retrieves the component, re-hydrates it’s state and props, and performs any actions which may result in a new state.
A fun walkthrough of creating a mini data viz component in React, which teaches useful concepts like drawing with SVG and d3.js scales.
Super-simplified reimplementations of complex pieces of software are a great way to learn for the author and reader alike. When you can boil it down to just 33 lines like this, the surface area is minimal enough that reading it shouldn’t be too tough, but there’s definitely some code golf going on.
Why is static the future? How do you define “static”? Read this deep dive from Josh Comeau to find out…
The term “static” can be a little overloaded, and occasionally a little misleading. Here’s how I’d define it:
“A static website is a website where the initial HTML is prepared ahead of time, not dynamically generated by a server on request.”
When you make a request to this website, for example, Netlify serves pre-generated HTML to you. I don’t have a Node server dynamically rendering HTML documents on-the-fly.