chantastic articles - 39 total
A Universal Terminal alias for bun, pnpm, npm, and yarn.
I've typed npm for the last time. As JavaScript developers, we have four package managers to choose...
Storybook Actions in Action
Let's talk about console.log-driven development. We all do it. So, instead of fighting it, let's...
Polymorphic as prop in Astro
Astro has dynamic tags — a way to take an element or component as a prop. I had trouble finding the...
Doc blocks for design system documentation
If you document design systems, I'm about to save you a ton of time. Because Storybook comes with...
Add Lucide Icons to Astro
There's no first-class Lucide integration for Astro. But making a custom one isn't too hard. This is...
Fix VS Code Explorer for Content Projects
The VS Code explorer displays folders at the top of a directory. This is a common hierarchy that I...
Embed YouTube videos responsively
YouTube makes it easy to copy-paste a video embed. LOVE THAT! But, the default embed isn't...
Concurrent Mode is Dead. Long live Concurrent React
Three years ago Dan Abramov introduced Suspense and Async Rendering with React at JSConf Iceland...
Comprehending YAML
YAML is a little clever for my taste but I'm starting to get it. Before yesterday's post, I had no...
A Non-Comprehensive Guide to YAML for Folks Who Like JSON Just Fine
YAML is a human friendly data serialization standard for all programming...
Import Both Default and Named Exports
We can mix and match import styles to keep code tidy and direct. The code below imports both the...
Import Default From Named Export
Importing default can be nuanced. There are just so many ways to do it. I like to think of default...
Import Default Export
There can only be one default export. export default function Highlander() {} Enter...
Import All Named Exports into One Variable
We can import all of a JavaScript module's contents into a single variable with * as. import * as...
Schedule Netlify Builds with GitHub Actions, Cron, and Webhooks
Instructions Add this GitHub Action to your repo at .github/workflows/schedule-netlify-bui...
Import and Rename Named Exports
JavaScript Modules have a syntax for remaning named exports, at import. import { exportedName as...
Import Modules for Side Effects
Modules — in JavaScript — can be imported strictly for their side effects. import...
Import Named Exports
By default, expressions and assignments declared inside a module aren't available outside of that...
Skip React.useEffect by Providing an Inputs Array
By default, React.useEffect runs every time that component renders. When we combine React.useEffect...
Extract Custom Hooks
First, what's a Hook? Hooks are the use-prefixed functions that we've been using — useState and useE...
Connect useEffect and useState to Update Components with Data
We have one way to update (or re-render) a component. It's React.useState. When we want to render ou...
Fetch Data with React.useEffect()
Things happen outside of React. It's just a fact of life. React gives us a single function for conne...
Render Conditionally with a Ternary
When you need to render JSX conditionally, you need to use a ternary operator. There are no if/else...
Track State with React.useState
To make state dynamic, we just need a function to update it. React gives us this function via React....
Make React Components as Re-usable as HTML Elements
Out of the box, components are less flexible and re-usable than raw HTML Elements. But we can fix tha...
What are Props in React?
Props are how we configure and customize our React Components. They're just like function arguments b...
What's a React Component?
A React Component is a function that returns a React Element. What's a React Element? Gre...
Learn React in 25 Short Lessons — React Holiday 2019 ⚛️🎄
Hey React Friends, I'm firing up the third season of React Holiday. This year, I'm bringing it to d...
Summary: "Suspense for Data Fetching (Experimental)"
This is a summary of key points in this reactjs.org doc What Is Suspense, Exactly? Suspe...
Summary: "Introducing Concurrent Mode"
This is a summary of key points in this reactjs.org doc What Is Concurrent Mode? React's...