We look at React's native async support and how to use it in a NextJS 13 app. Learn how to use async components, parallel loading states, and caching with React.js and NextJS 13.

Following up from my article about XState and Stately.ai, fellow reader S. asked if `useReducer` could ever be relevant when using state machines in React code. Yes! Here's how

Two years ago I wrote about using XState after building a UI interaction so twisted my brain leaked out my ears. It helped. Now the creators have made something even better – Stately.ai 😍

A way to embed tweets in static sites with full pre-renders and live updates using just 9kB of client-side JavaScript, 2 HTTP requests, and full reader privacy ✌️

One of my favorite ways to simplify and de-gotcha React code is to rip out all the useCallback and useMemo drama. 90% of the time you don't need it.

"Your code doesn't matter" is something experienced programmers say, between the lines, when they sound like complete lunatics. But what do they mean? Why does everyone say it?

The pros and cons of different approaches to writing resilient code that handles partial failures

Lessons from a painful outage with timezones, UTC offsets, and database clients that took a whole week to resolve.

On the backend anything can and will fail. How do you deal with that?

When you grok state machines, a new world of computational beauty and software design opens in front of your eyes. Things that used to be hard become easy. The impossible becomes possible. And you turn into that annoying team member.

wanna see the strangest looping construct I've found in production code?

Defensive coding is an important lesson and over time and engineers it leads to massive bloat, if you're not careful.

Using plain Jest on a TypeScript codebase is kinda rough. No types in tests no thanks. Making Jest and TypeScript work together smoothly is something you do just rarely enough to forget the details. Hope this helps you and future me too ✌️

What's the most algorithmically fun code you've written recently? 🤔 Here's mine: A dataviz using a grid of triangles that fits into the client's logo.

The opposite of folks who follow every FAANG trend and over-engineer their companies to death, are the folks who *never* take advice from the big boys.

Friend, I have glimpsed the future and it is amazing. React 18 is shipping with Suspense and startTransition for deferred component rendering, but not data loading. That's coming in a future 18.x version.

This blew my mind, thought you'd like it too. You can do more with ?. than you thought.

Something always goes wrong when you change hosting providers. 😅 For me it was redirects. A vital feature of any site migration.

Demoing startTransition is hard. Modern computers are too fast 😅 – Dan Abramov, a React core team member, helped me fix it up. Here's what I learned

I read everything about React 18 Alpha, trawled through the work group, and ran some experiments. Here's what you'll wanna know.

The flash of unlocked content is great fun for any paywall

Twitter embeds every tweet on your page as an iframe. Loads 1.2MB of JavaScript, makes 20+ HTTP requests and uses 100+ DOM nodes. 💩

Continuing our quest for better Lighthouse scores, more reader privacy, and less JavaScript we attacked the next biggest culprit 👉 Twitter.

When talk comes to serverless, engineers have lots of questions. Here are some answers 😊

How *do* you build a JavaScript function that runs in the cloud serverlessly? Here's how to get started with Vercel, Netlify, or AWS Lambda

What's the laziest thing you've ever built? For me it's a bot that sends cute pictures every day

When you think of a backend or server developer, who comes to mind? A wizard of arcane magics. The future belongs to full-stack frontend engineers.

my point is that running server code on the web has become ridiculously cheap *and* easy

Reusable components like to grow boolean props for different situations and complexity soon blows up. Variant props are the perfect solution.

We used a man-in-the-middle attack to snoop an app's API traffic, replayed it in a GraphQL client, and successfully put it inside an AWS Lambda 🤘

Reusable hooks are all fun and games until TypeScript starts yelling at you about incompatible types.

Write functions, mostly magic.

It works! useAuth has beta-level support for Firebase Auth 🥳 I did not expect that to take 3 sessions.

Tech interviews have a magic answer: The hashmap. And it's not always best on the job.

Firebase continues to be 💩. No wonder people keep asking for support in useAuth. Almost there ✌️

These abbreviations are getting out of hand. It's like a bad interviewer's wet dream.

You're using the many-small-repositories approach to work faster as a team. But where do you put shared code? How do you make it nice to use? How to publish and install private packages?

useAuth works without React Context! 🎉 here's how

In Refactoring a useReducer to XState we talked about a 5 step process to turn a reducer into an XState state machine. Today answers "Ok now what?"

Prefetching lets you start React apps without loading spinners. Gatsby introduced this concept with `staticQuery`, react-query and NextJS make the pattern easier 😍

Many engineers think server-side code is the scary domain of True Engineers. Something newbies, juniors, and frontend engineers shouldn't touch. They're wrong. Modern backend is a joy. ❤️

Update code with a JavaScript function? Easier than you think 😍

In this episode of CodeWithSwiz, we tried NextJS's support for /api routes – code running on the backend. In a word – Wow

NextJS getStaticProps, environment vars, and why you shouldn't use yarn link – all in this episode of #CodeWithSwiz

Friend, this episode of #CodeWithSwiz was a great example of why you want to start using TypeScript and how thermal load *destroys* computers.

You're the computer, the CMS is your script. Starting small, trying NextJS, comparing microbundle vs. parcel for extracting libraries out of projects.

On CodeWithSwiz ep2, we tried NextJS and built our first tiny app. Complete with a design system, static rendering, React Query to talk to AWS Lambda, and deployed to live 🤘

A new old experiment 👉 regular livecoding. It's like a podcast with video, show notes, regular cadence, and we both learn something new.

"He's a frontend guy, is this even a fair question to ask?" The head of engineering was worried about our systems design question …

Lemme guess, every project involves 1 or 2 forms and they're all the friggen same. You got forms coming out the wazoo. Render fields. Connect to state. Add field validation. Detect submit. Add form validation. Send fetch request. Repeat.

GraphQL for new projects looks great ... buuuut how do you use it with that old backend cobbled together in Rails over the last bazillion years?

Let's have a look at hyow GraphQL makes queries so much easier and more pleasant than REST

What if I told you modern tools let you build and launch a small webapp in 30 minutes? Complete with SSL, a .com domain, a database, a documented API, CDN hosting, fast static initial loads, and a hydrated SPA? That's the challenge I posed at Silicon Valley Code Camp this weekend. The audience didn't believe me, so it was time to perform some magic. 🧙

GraphQL is taking the world by storm and it is wonderful. But in the real world, you're still dealing with REST APIs aren't you?

The Big Mac index is a purchasing power parity index published by The Economist. Jest fetch testing is a tech task so frustrating that it almost made me quit the industry. I'm writing this so you don't have to read 8234721 different blog posts, stack overflow answers, and GitHub threads with conflicting info on how to get Jest and fetch to play together.

A few months ago I inherited a Kotlin project. It was an unfinished prototype and all I had to do was wrap it up and deploy. Every time I touched the project, it broke. Nothing worked. Wouldn't run on my machine, wouldn't read API requests, couldn't get tests working, if I changed some code I broke it all. That's when I realized learning a new field is super hard

I was bored Monday night and decided to see if I still know how to build with jQuery. Nothing better to do, no pressing ideas, a bit of fun. Also a favor for a friend who's preparing to talk about React to a bunch of people who've never seen it before 😛

A fully functioning LOLCODE-to-JavaScript compiler implemented as a Babel macro. You never thought you wanted this and now here it is. You're welcome. 🐱

JavaScript generators are amazing. They let you write infinite loops that terminate. Yield values from functions before they finish … and I bet you've never used a JavaScript generator even once did you? I FOUND A USE! A real world practical use-case where generators make your code better. 😱

Chatroom is slow? I know, I'll just use list virtualization! List virtualization is hard, dear reader. So, how do you virtualize a list?

You've probably seen web notifications before. YouTube shows them when it goes to a new song, Facebook pings them when a new message comes in, scammy websites ask for permissions and you say no. The usual. You can fire those notifications from anywhere inside your JavaScript.

There's a joke in functional programming that once you understand monads, it becomes impossible to explain them to others. The nuance is nuanced, the details are hard, let’s focus on practice

I was doing code review for a coworker, and it soon became obvious that he used a linter and that the linter gave him a bright idea: _use strict comparisons_.

How many touch points does your sales process require? Do you need 2 ad clicks or 5? Two shiny demos or one fat video? As an engineer, you might not care, but this is the stuff that keeps your CEO and growth lead and head of product up at night. A business owner that can answer that 👆 question reliably is god.

Both superagent and fetch() enable you to talk to a server. The first produces clean code that gets nesty if you need many things. The second produces clean code that is Promis-y and sometimes cumbersome. The difference between superagent and fetch() isn't that one sends your headers as-given and the other lowercases their names. The difference is that superagent sends a cookie and fetch() doesn't!

This is a puzzle you can run into if you’re not careful, and sometimes, despite your best efforts, even if you are careful. It happened to me when I had a settings object that I passed into a view. The view then did things. When I made a new view from the settings object, it looked like the view I had just cleared.

Days aren't 60*60*24 seconds long. They are 1 day long, which on most days maps to 60*60*24 = 86400 seconds. But not on all days.

My favourite tool for javascript debugging is `console.log`. I mean, I love `console.log`. If I ever get a programming tattoo, it's going to be `console.log` or some variation thereof. Simple to use, works every time, and every programming language I've used since I was 9 has had some variation of it.

Using returns and callbacks in the same function. Sounds like crazy talk I know, but hear me out, I have good reason. I think.