👀 Tailwind devs are sleeping on this
Install container queries in your Tailwind projects:
https://github.com/tailwindlabs/tailwindcss ✨ Make beautiful CSS shadows
Make your CSS shadows look amazing in plain CSS or Tailwind. Try Josh Comeau's shadow generator
https://www.joshwcomeau.com/shadow-palette/
🤔 Why don't web apps feel native?
Check your cursor: pointer at the door! Here's a full article on making apps feel native:
https://evilmartians.com/chronicles/how-to-make-absolutely-any-app-look-like-a-macos-app 💀 The Electron AND React Native killer?
Try Tauri v2:
https://v2.tauri.app/start/
✨ There's a database for AI now?
Vector databases are a powerful concept for database search. Here's a 1 minute explainer.
https://wtw.dev/tensorflow
👀 Write better React useEffects
You can pass abort controllers to document.addEventListener. It makes cleanup so much simpler! Node has a KV store now.
Try --experimental-localstorage in Node 22!
https://github.com/nodejs/node/pull/52435/files
You don’t need Bun.
Try out SQLite in Node! Install the latest Node 22 version and add the --experimental-sqlite flag. 😰 ReactJS is hurting the planet
https://wtw.dev/talkco2
NodeJS can do WHAT now?
Node 21 has everything built-in now. Fetch, styling, env files, and tests are all here.
👀 Better Tailwind colors
Tailwind is bringing in color-mix to unlock new colors and opacities. Let's peak at the Tailwind version 4 changes.
😤 Stop using MySQL
SQLite is a fast, cheap alternative to a full SQL server. It's where I'd start for any new web dev project.
👀 The best Tailwind v4 feature
Tailwind v4 is the biggest change yet. New config file, new internals, Rust, oh my!
👀 CLEANER Tailwind classes
You don't need a library like clsx() to toggle Tailwind classes. data attributes are more powerful!
😤 Stop ? using : ternaries
Ternaries aren't the best match for toggles. Here's how Tailwind's visible / invisible classes give you better transitions.
🔥 Better Tailwind transitions
ease is so out of fashion. Spice up your CSS transitions with spring easing. Tailwind guide inside!
⚛️ You're doing server components wrong.
Server components cause waterfalls if you aren't careful. Unblock your queries with hot promises.
👀 Tailwind theme gamechanger
Tailwind's default text sizes are fine... but they don't scale. CSS clamp() can help! ⚛️ RSC Suspense from scratch
Can we implement React Suspense ourselves? Here's a plain HTML example.
https://simple-stack.dev/stream
👀 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
👀 Adobe made a GOOD React library?
react-aria is the best baseline for React UI components. Here's why. ⚛️ React Context finally makes sense
React Context is confusing at first. Let's break down how to create a context, and how get or set state can work. Playground here:
https://wtw.dev/react-context-setter
👀 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!
Be a vim PRO in 1 minute
vim motions actually are simple. Let's break down command - count - motion to learn every combo vim has to offer.
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!
🤔 Why JS for fullstack apps?
It's best to use ONE programming language across the stack, when you can. John Carmack even says so!
⚛️ 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.
👇 The clickiest, squooshiest buttons on the web
This one line of CSS makes every button feel springy. Here's how you can write it!
🔥 NEW to TypeScript - satisfies
satisfies was the missing piece for TypeScript libraries. Here's how it works!
💡 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! 🌟 SUB 1 MINUTE RUN - build a blog challenge
Hit my first sub 1 minute run building a blog with Astro Starlight (
https://starlight.astro.build) and neovim.
👀 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 🏆
⭐️ Learn this Tailwind function
The Tailwind @apply utility was a mistake. What should you use instead? Let me introduce you to theme().
🤔 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! ⚛️ NextJS server actions in under 1 min
[Server actions](
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions) could be the future of React and NextJS backends. How do they work, and why are they different from regular REST endpoints?
🏆 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! 🤝 React Server Components without Next?
How do you build React Server Components without NextJS? Here's a high-level overview of all the code you need. Demo repo at
https://github.com/bholmesdev/simple-rsc 👀
👀 React transitions make so much sense now
useTransition is the key to unlock server-side experiences like search. Let's learn about it!
🏆 Name your variables like a senior dev
Naming variables is hard. But if you try naming backwards, you might end up with simpler code.
😳 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. [VOD] React Server Components deep dive with @JamesQQuick 🤿
Taking React Server Components for a spin, without a framework! Find the very janky not-at-all-ready demo here:
https://github.com/bholmesdev/deno-rsc
⚛️ React server components, explained!
Data streaming is the future of React, and THE key to understanding server components 👀
🔥 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!
👀 Did Stripe build an MDX killer?
🏆 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.
😳 Rust solved ternaries
JS forces you into ternary and switch case hell. Let's see how Rust "expressions" solves this completely!
🤯 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!
🦀 Is Rust BETTER than JS? - Pattern matching
Tired of awkward switch cases in JS? Let's see why Rust's pattern matching is just better.
😳 Best practices are a lie.
Let's see what best practices really are, and how to use them to your advantage.
🐝 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.
😮 The SECRET to senior-level code
Sick of 100 VS Code tabs you can hardly navigate? My secret is to just... stick to big files. Here's why! Stop hating CSS.
CSS is hard. Here's some resources and guides to hate it less!
Links to all resources at
https://wtw.dev/75
😳 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! 👀
😳 Should you leave ReactJS?
JSX ain't what it used to be. Are new alternatives like SolidJS and Qwik worth the switch from React?
Should React devs learn Qwik?
Qwik might be the new hotness with its resumeability features, but is it really faster than your React app today?
😤 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.
🔥 Industry trend: Zod is taking over web apps
Zod is being used for APIs, Markdown, and more. Let's learn why it's so useful.
Why Copilot makes you smarter 🧠
Copilot is basically a junior dev. If your code makes sense to them, it's probably good code!
👀 Better SEO with this one element
The time element could mean better SEO for your blog. Let's take it for a spin!
🤔 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! 💨 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 🏆💨
What is a design system?
https://bradfrost.com/blog/post/design-systems-are-for-user-interfaces/
💰 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. This could fix the HARDEST part of ReactJS 😱
Data fetching, and async stuff in general, is pretty complicated in React. Luckily, the ReactJS team is proposing a new way forward! Let's talk server components and the
use hook.
React has opened this proposal for comments, so weigh in here 👇
https://github.com/reactjs/rfcs/pull/229 ✅ Simple React form validation with Zod
Zod is the last form validator I'll ever need 🙏
Let's validate forms on the server
and client using zod-form-data!
https://www.npmjs.com/package/zod-form-data
🤝 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 📣
Is Solid what ReactJS should've been??
Let's see what makes Solid so special, and why it's my rec for performance-minded JSX lovers 💙
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 👀 💡 How to set up fonts on your 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 (
https://fontsource.org/) can automate the process 💪
😓 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 💪
Why edge deployment is a BIG deal
🎵 I'm on the edge... CDN... and I'm serving all my content near you 🎵
Make servers faster with cache controls 💰
Let's get this cache 💰 We'll learn cache headers that keep assets and dynamic pages snappy 🔥
When should my web app use SSR?
Let's learn server-side rendering and discover where it works best!
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)