#WhiteboardtheWeb

😤 Stop ? using : ternaries

Ternaries aren't the best match for toggles. Here's how Tailwind's visible / invisible classes give you better transitions.

👀 React app form validation

Form validation is a tough problem. Let's see how reward early, punish late is a great pattern to validate inputs at the right time

👀 Time to ditch eslint?

What if you could replace your pile of eslint plugins with ONE package? Biome is the fast formatter built to replace your linter!

New to web dev? Here's my stack!

There's so many options choosing a JS tech stack. Let me show you why Astro and Next, Drizzle, Lucia-auth, and Tailwind are my go-tos.

⚛️ React devs: learn this prop!

Radix UI NAILED composition with the asChild prop. Here's how it compares to other patterns and why I prefer it.

👀 Every website needs this nav bar

Collapsing a nav menu on-scroll is a bit wonky in React. Let's see how Svelte simplifies our lives to one line of code!

🤔 Svelte has useState now??

Svelte 5 introduces runes, a new way to handle state and reactivity. It's more syntax, but it pays off for code reusability!

🤯 Animate React ➡️ OTHER frameworks?

Animations used to require heavy JS libraries and fancy JS state. With view transitions, you can animate without the framework... and even animate from one framework to another!

⚛️ Use React + Tailwind? Try this!

shadcn is my ride-or-die building React apps. Here's why you should combine Tailwind with accessible UI components.

💡 TypeScript tip: when to type guard

Type guards let you tell TypeScript how to do its job. It'll help you with array.filter, but tread carefully!

🤝 The Link component, explained!

You've probably used a SPA before getting into web app development. But what do those pesky Link components really do?

❗️ The future of websites?

Apple keynote made it easy to animate between slides with FLIP. Now, you can do that on the web. With zero libraries!

🔥 ReactJS devs should try htmx

htmx is the new (old) hotness that lets you right reactive frontends with any backend server. Here's how it works and why React devs should care!

🌶️ ExpressJS is the new JQuery

ExpressJS drove standards forward, much like JQuery in the late 2000s. Let's see how modern options from meta-frameworks like NextJS and libraries like Hono are the next server wave.

🌶️ Why ditch TS for JSDoc?

Svelte switched from TypeScript to JSDoc for their core libraries. I think other library maintainers should follow their lead!

🤔 Replace Node with... Deno?

Deno's been getting better and better since it was announced in 2018. But it still has a long way to go before owning the full-stack.

🤔 Why Cloudflare over AWS?

When AWS goes down, the world goes down. Cloudflare workers are a unique alternative to keep your apps standing, with faster loads!

⭐️ NextJS image, explained!

Image performance can make-or-break website performance. Here's how you can do it right with the NextJS and Astro image components 🙌

😓 Web dev's biggest buzzword, explained?

The edge is the most popular buzzword in modern web dev. But with all these competing definitions... what does it REALLY mean?

😮 Make React apps feel like iPhone apps (without libraries?)

View transitions are now built into Chrome, and make animation a million times easier. You won't need framer motion again!

⚛️ 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.js pages/ or app/?

Next.js lets you start with either pages/ or app/, and the choice will effect your project dramatically. Let me help you choose the right one!

🤔 Databases, without 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 🙌

💪 React "use client" but better

Astro pioneered the "client:" directive to fine tune when JS loads. With custom client directives, it's even more powerful!

👀 Building a website? Add this feature!

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

🤔 NextJS or SvelteKit? Let me help you choose

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!

🏆 React component props like a senior dev

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 🙌

✨ 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 😉

🏆 The easy SQL + TypeScript library

Drizzle 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 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.

✋ Stop using 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!

🪐 Does this SOLVE serverless DBs?

Planetscale has a new approach to database connections: http. Let's see how it solves serverless connection speeds without compromising performance.

🥊 React Server Components vs... Astro?

React Server Components and Astro are two sides of the same coin. Let's talk server vs. client, and why you might choose one solution or the other for your next project.

✋ STOP throwing errors in your code

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!

😳 The MOST important feature of React in 2023

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.

🔥 Sexy syntax highlighting for your blog

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

🏆 Rust fixed my biggest TypeScript problem

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

🤯 try / catch is the devil. Rust solves it!

Rust ditches try / catch and error throwing for a cleaner, type-safe option. Let's learn about Results!

🐝 Write senior-level code, faster!

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.

🏆 Write JS functions like a senior dev!

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

😳 Type-safe Markdown??

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! 👀

😤 Why web dev is getting harder

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!

😳 The NodeJS function to learn in 2023

It's 2023, do we really need backslashes anymore? Let's see how URLs are the best way to write cross-platform-ready file paths in Node.

🤔 Is the new NextJS 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.

🔥 Industry trend: Forms are vital for frontend frameworks

POSTing data to an API shouldn't be hard. SvelteKit forms do it best! Let's see progressively enhanced forms in action 🏃‍♂️

👀 Database calls IN your components?

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!

💙 SolidJS solved NextJS' routing problem

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 REALLY 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!

🔥 Industry trend: Will we stop writing Typescript by hand?

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!

💰 The the scariest part of backend dev, explained!

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 does WHAT to your deploys?

Did you know NextJS flips between static and serverless deploys based on how you write you code? 😳 Let's talk how Next 13 auto-decides the best way to ship your website 👀

💀 The webpack killer is here

Vercel had a lot to announce at NextJS conf, including a Rust-powered bundler called Turbopack with performance comparisons to boot. Let's break down the nuances to see if you should try it today 🔥

🤔 Is CSS-in-JS dying?

😱 Is CSS-in-JS dying? ...Okay not really 😅 But recommended libraries and perf concerns changed a lot since Emotion first hit the scene. Let's break down 18's bottlenecks and new styling approaches 💅

Web app industry trend 👉 render-as-you-fetch

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

🤝 Build typesafe NextJS APIs with tRPC

Your client and server should agree on types! 🤝 Let's ditch type casting for simple-yet-robust validation across API endpoints with tRPC.

Simpler ReactJS global state ➡️ Nano Stores

Nano Stores are my FAVE global state manager. Let's see how they work, and why they simplify your @reactjs Context flow 🌊 edition 51

Web dev industry trend ➡️ "opt-in" mindset

OPT-IN is the new trend 👏 Let's see what that means, and how it's changing the way we build websites.

👀 Are your website forms accessible?

Are YOUR forms screenreader-ready? Let's talk input labels, adding instructions with aria-describedby, and the pain of icon buttons feat. megaphones 📣

Use Preact BEFORE React on your next website!

Preact is like React, but smaller! Here's how you can drop Preact into YOUR React projects for a no-brainer performance boost.

Do you REALLY need SPAs like NextJS?

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 ✨

Are servers BETTER than static site generators? 🤔

Servers and serverless can cut down your build times and still match your static site's speed. Let's see how 👀

😓 Analytics are slowing your site down! Let's fix that 👀

Partytown is an awesome open source dependency to drop in any static or server-ful site. Let's see how web workers + service workers = no more analytics blocking 🚀

DON'T USE CREATE-REACT-APP ✋ Try this instead 👀

create-react-app isn't the go-to it used to be. Let's break down what it's missing, and un(web)pack why I suggest Vite for learning, and NextJS for shipping!

eslint and prettier are hard. Here's a cheatsheet

Here's a rundown of the packages you'll need, strong and eslintrcs, and a setup that DOESN'T break 💪

Make servers faster with cache controls 💰

Let's get this cache 💰 We'll learn cache headers that keep assets and dynamic pages snappy 🔥

SSGs - why is "prerendering" so dang important?

Let's talk about static site generation (SSG) and why "prerendering" makes your sites feel faster 🚀

What is Client-side Rendering?

Rendering on the web, part 1 of 5! How do get your websites to your users? Let’s talk about all the ways / buzzwords to render a site, starting with client-side rendering (CSR)
Explore full #whiteboardtheweb archive Explore full #whiteboardtheweb archive