#WhiteboardtheWeb

What does “the edge” really mean?

The edge is the most popular buzzword in modern web dev. But with all these competing definitions… what does it REALLY mean? For extended reading, see Glauber’s (CEO of Turso) take on his blog.

View transitions make websites feel like iPhone apps

View transitions are now built into Chrome, and make animation a million times easier. You won’t need framer motion again! Check out Adam Argyle’s incredible slideshow demo.

React SSR vs. Server Components

Server components and server rendering mean very different things in React. Let’s break down the difference.

Should I use Next app/ or pages/ dir in 2023?

Next.js lets you start with either pages/ or app/, and the choice will effect your project dramatically. TL;DW: pages/ for beginners and projects you depend on, app/ for intermediate devs learning the latest patterns.

Astro content collections are databases without the SQL

Markdown blogs look so simple at first, but they always turn into database-level problems. Let’s see how Astro content collections make it easy, without SQL 🙌

Astro has React’s “use client” but better

Astro pioneered the “client:” directive to fine tune when JS loads. With custom client directives, it’s even more powerful than React’s "use client"! Try the client:rainy-in-ny demo here.

Every website needs cmd + k

The web is an insanely crowded market these days. Here’s how a command palette helps you stand out 🏆

Learn the Tailwind theme() function

The Tailwind @apply utility was a mistake. What should you use instead? Let me introduce you to theme().

NextJS vs. SvelteKit in 2023

SvelteKit is an exciting new framework for building fullstack apps. But why use it over NextJS? To me, it comes down to simply… React vs. Svelte!

NextJS server actions in under a minute

Server actions could be the future of React and NextJS backends. How do they work, and why are they different from regular REST endpoints?

How to write good abstractions

Something something “there’s 2 hard parts about programming, and naming is one of them.” Let’s see how to write smarter component props that invert control to the parent, where it counts 🙌 Based on the excellent Kent C. Dodds talk, Simply React.

How to write good abstractions

Good abstractions are the simplest-yet-hardest programming problem. Here’s how you can write better utilities and components, with a little more copy / paste 😉 Based on the incredible Dan Abramov talk, The WET Codebase.

Drizzle is the easiest SQL + TypeScript library

Drizzle ORM is a simple SQL tool for creating, inserting, and querying from tables in your TypeScript backend. Let’s see why!

Is React Context dying?

In the world of server components, React Context doesn’t work like it used to. Let’s see how old Context use cases are might get replaced by new patterns.

Why Edge compute can replace serverless

Edge compute is a powerful new idea cutting down cold starts and unlocking new distribution options. Let’s see if edge really is the serverless killer.

Astro is the modern ExpressJS

ExpressJS was a great first stab at JS for the backend. But these days, we want modern templating, file-based routing, SPA transitions and more. Here’s how Astro takes the ExpressJS model to a new world!

Did Planetscale SOLVE serverless DBs?

Planetscale has a new approach to database connections: http. Let’s see how it solves serverless connection speeds without compromising performance. Read the full performance benchmark here 👀

React Server Components vs. Astro

React Server Components and Astro have the same goal: split up server and client code. How they achieve that goal feels similar too… but they have some unique strengths!

STOP throwing errors everywhere

Throwing errors can be a recipe for nasty 500 errors. Let’s see how returning error objects can keep your code type-safe and maintainable!

React Server Components without NextJS?

How do you build React Server Components without NextJS? Here’s a high-level overview of all the code you need. Try the demo repo, simple-rsc 👀

Using NextJS? Learn useTransition

With React Server Components, there are entirely new ways to think about re-rendering. Let’s see how the new transition hook can unlock server-side searching with beautiful loading states.

Name your variables like a senior dev

Naming variables is hard. But let’s see how naming backwards could make your life easier.

React Suspense finally makes sense

React Suspense has existed for years, and it was never obvious when or why you’d use it. But now, with React Server Components, it might be the bridge to get the best of EVERY data fetching solution.

React Server Components, explained!

Data streaming is the future of React, and THE key to understanding server components. Let’s explore how React really renders routes on your NextJS site.

Syntax highlighting for your blog - Prism vs. Shiki

How do you syntax highlight code blocks on your blog? Let’s talk about the tradeoffs for 2 great libraries: Prism and Shiki.

Markdoc vs. MDX: what do you choose?

Markdoc is an exciting content format from Stripe built for scale. If reusability and build speed are top of your list, it might be worth a try over MDX!

Rust enums are WAY better than TypeScript’s

TypeScript enums are missing a LOT of features. Let’s see the magic of matching and structs that Rust brings to the table.

Rust expressions are a game changer

TypeScript forces you into clunky switch cases and unreadable ternaries. Let’s see how Rust expressions solve this.

Ditch try / catch hell with Rust’s Result

You deserve type-safe errors. Let’s see how Rust ditches confusing try / catch patterns with the Result object.

Why JS devs should learn Rust - pattern matching

Tired of JS switch cases break-ing your code? Let’s see how Rust got it right with pattern matching.

Best practices are a lie.

Best practices are trends, not rules. Let’s see how to use this to your advantage!

Write code that works, faster by beelining

It’s easy to get bogged down in refactors and clean-up. Here’s why I suggest “beelining” to a solution SOONER to write reliable code with fewer mistakes.

Best practice for JS function arguments

Can we write better function arguments? Let’s see why leaning on objects can avoid show-stopping bugs from positional arguments.

One component per file is wrong. Here’s why

Tired of unorganized code and 100+ VS Code tabs? My secret is… embrace big files. Here’s why!

Guide to stop hating CSS

CSS is hard. Here’s some resources and guides to hate it less!

• Josh Comeau’s z-index article
• Kevin Powell’s :is() intro
• Steph Eckles’ SmolCSS snippets
• Mia’s “Why is CSS So Weird?”
• My CSS-in-JS advice
• Adobe Spectrum accessible UI

Typessafe Markdown with Astro 2.0

Sick of accidentally shipping Author: [Object object] on your blog? Let’s check out typesafe Markdown in Astro 2.0. aka the video I’ve been excited to post for MONTHS! 👀

ReactJS vs. SolidJS vs. Qwik: should you switch?

Qwik might be the new hotness with its resumability features, but is it really faster than your React app today?

Should ReactJS devs learn Qwik?

Qwik might be the new hotness with its resumability features, but is it really faster than your React app today?

Why web dev is getting harder in 2023

Is frontend web dev a MESS? The amount of options and best practices are overwhelming… but it’s the nature of any growing industry. Here’s why.

Node file paths in 2023

ESM became the new Node standard. Let’s see how this changes file paths for the better with the URL object.

Why Zod is the library to learn in 2023

Zod solves a base-level problem every app has, with applications from APIs to Markdown validation. Let’s see why it’s so useful!

Why GitHub Copilot makes you smart, not dumb

Copilot can pump out quality code… if your codebase has quality design. Let’s see how treating Copilot as the “junior dev test” makes you a better programmer.

Use the time element for better SEO

This one HTML element means better SEO and accessibility for your blog. It’s time (heh 😉) to talk about published dates!

Is the NextJS 13 router worse?

Next 13 completely changed routing and nested layouts. Let’s see why they shook things up, and whether it’s better or worse for your web app.

SvelteKit does HTML forms best

POSTing data to an API shouldn’t be hard. SvelteKit forms do it best! Let’s see multiple page forms and progressive enhancement in action 🏃‍♂️

Trend: SolidStart changed the server game

Full stack components ™️ are becoming a trend. And I think SolidJS found the smartest way to marry server$ code to your frontend in perfect typesafe harmony 🤝 Let’s see if this sparks an industry trend!

Did SolidStart SOLVE routing?

File-based routing only gets you (..)part(..)/ of the way. Let’s see how Solid makes hybrid approaches and config-based routing easy.

What React Server Components ACTUALLY do

There’s some confusion over the benefits and drawbacks of React Server Components. Let’s break them down, with a comparison to Astro (astro.build) as well!

TypeScript generation is reshaping Nuxt, Astro, and more

Frameworks like NuxtJS and Astro are leaning into type generation. You have never have to write a Typescript type by hand again. Let’s see how!

Tailwind is not a design system.

…But it can be a key part of one! Let’s see where Tailwind shines, and how utility classes with accessible Radix UI or Zag components can be a winning combo 🏆💨 Brad Frost article - design systems are for user interfaces

Cache serverless responses with Cache-Control headers

With serverless on the rise, cache is king 💰 To speed up responses and cut down on your server bill, let’s walk through Cache-Control headers that’ll fine-tune how and where cache is stored.

NextJS 13 chooses static vs. dynamic deploys… for you?

Did you know NextJS 13 flips between static and serverless deploys based on how you write you code? Let’s seen how Next snoops on your fetch functions to auto-decide the best way to ship your website.

Is Turbopack the next Vite?

Vercel had a lot to announce at NextJS Conf 2022, including a Rust-powered bundler called Turbopack with performance comparisons to boot. Let’s break down the nuances to see the differences and benefits compared to ViteJS.

Should you still use CSS-in-JS?

😱 Is CSS-in-JS dying? …Okay, not really. But recommended libraries and performance concerns changed a lot since Emotion first hit the scene. So, let’s break down React 18’s bottlenecks and new styling approaches 💅

Article noted in video: “Why we’re breaking up with CSS-in-JS”

render-as-you-fetch makes websites feel faster

🔁 Loading 🔁 spinners 🔁 are 🔁 annoying. How do you fetch data more efficiently? Let’s talk about render-as-you-fetch, a buzzword shaping frameworks like NextJS and React Location.

ReactJS async / await proposal, explained

Data fetching (and async code in general) is pretty complicated in React. Luckily, the ReactJS team is proposing a new way forward!

Let’s talk server components, async / await, and the use hook. React has opened this proposal for comments, so weigh in here 👀

Simple full-stack form validation with Zod

Zod is the last form validator I’ll ever need 🙏 Let’s validate forms on the server and client, no matter the framework, using zod-form-data!

To try the project from this video, clone the repository 👀

Build secure, type-safe APIs with tRPC

What if your server and client agreed on types? Let’s use tRPC to build simple-yet-robust API endpoints with built-in type validation 💪

👀 Want a sample app? Spin one up with create-t3-app!

Simpler global state for your web app ➡️ Nano Stores

Nano Stores are my FAVORITE global state manager. Let’s see how they work, and why they can simplify your ReactJS Context flow 🌊

Try the Astro tutorial to learn more!

Web dev industry trend ➡️ “opt-in” mindset

OPT-IN is the new trend 👏 Let’s see what that means, and how tools like SolidJS and Astro are flipping NextJS’ “opt-out” approach on its head.

Are your HTML forms screen reader accessible?

Let’s talk input labels, adding instructions with aria-describedby, and the pain of icon buttons feat. megaphones 📣

For more, check out Ben Myer’s excellent aria-label rundown!

Is Solid what ReactJS should’ve been?

Let’s see what makes SolidJS so special, and why it’s my rec for performance-minded JSX lovers 💙

Some helpful resources:

• Spin up a starter project with Astro + Solid
• Watch Solid’s intro to reactivity for an in-depth intro

Use Preact BEFORE React on your next website

It’s never been easier to spin up a Preact project. Here’s why you should start with Preact BEFORE graduating to React on your next project 💪

Some helpful resources:

• Spin up a starter project with Astro + Preact
• Set up Preact compat in your existing React project to avoid big refactors

Are MPAs coming back?

Could modern browser APIs make multi-page apps (aka “traditional” static or server websites) feel like single-page apps? Let’s explore why SPAs like NextJS exist, and why they may be less necessary in the future ✨

Some helpful resources:

• Maxi Ferriera’s incredible navigation API demo, bringing app-like navigation to a static MPA.

Are servers better than static site generators?

I’ve been hearing a lot of “serverless can replace your static site” claims. So, I put some cache headers to the test. Turns out, servers and serverless can cut down your build times and still match your static site’s speed 👀

Set up fonts on any website

Fonts are hard 😓

Let’s write font-face rules together, preload for efficiency, learn what the heck font-display: swap does, and see how Fontsource can automate the process 💪

Faster Analytics with Partytown 🎉

Analytics are slowing your site down. 😓

Been wanting to talk builder.io’s partytown for a while! Let’s see how web workers + service workers = no more analytics blocking 🚀

🚨 PSA: You don’t need create-react-app

Let’s un(web)pack why CRA isn’t my go-to for ReactJS newbies, and what I recommend for learning 📝 and shipping ⛴

The last eslint + prettier setup you’ll need

Let’s be real… eslint and prettier are a lot to set up.

Here’s a rundown of packages you’ll need, strong web and ReactJS eslintrcs, and a VS Code setup that DOESN’T break 💪

What is edge compute?

🎵 I’m on the edge 🎵 CDN 🎵 And I’m serving all my content near you

Let’s explore edge compute vs. serverless deployment, and the emerging use cases for this tech.

How cache headers work with SSR

Caching is key to fast servers. Let’s explore how cache headers work, what max-age to choose, and how this applies to server-side rendering (SSR). Remember, the MDN docs are your friend!

What is server-side rendering (SSR)?

Let’s try SSR, a way to render content on-request and deliver a unique user experience without the loading spinners. This relies on “pre-rendering” as well, which you can learn about here.

What are pre-rendering and static site generation (SSG)?

Let’s explore “pre-rendering,” a way to render your websites ahead-of-time. Unlike client-side rendering (CSR), this lets you ditch the loading spinner and deliver content faster. Static site generators like NextJS and Astro can help.

What is client-side rendering (CSR)?

Let’s talk about client-side rendering, a way to render your webpage top-to-bottom using JavaScript requests. This is common for frameworks like create-react-app and Vite!