Blog
Thoughts on web development, technology, and building things.
10 Beginner-Friendly JavaScript Problems Solved: Step-by-Step Code Examples
Master JavaScript basics by working through ten beginner-friendly problems with clear, step-by-step code examples—perfect for building confidence with loops, conditionals, arrays, and strings.
Setting Up Better Auth with MongoDB in Your Next.js Application
Learn how to seamlessly integrate Better Auth with MongoDB in your Next.js app for a secure, serverless-ready authentication layer—covering everything from setup to route protection in just a few steps.
CSS Flexbox vs Grid: when to use which (with visuals)
Flexbox excels at one-dimensional layouts (rows or columns) with content-driven flexibility, while CSS Grid is built for two-dimensional layouts where you control both rows and columns simultaneously—choose the one that matches the dimension of your layout problem.
Server Components vs Client Components: when to actually use each
Server Components let you render static content and fetch data server-side with zero JavaScript sent to the client, while Client Components handle interactivity and browser APIs—but the key is to push the client boundary as low as possible, starting with a Server Component by default and only adding `'use client'` when truly necessary. This shift dramatically reduces JavaScript payloads and improves performance without sacrificing rich interactivity.
Best open-source alternatives to popular SaaS tools
The open-source ecosystem now offers robust, self-hosted alternatives to essential SaaS tools—from CRM and project management to analytics and password management—giving you full data ownership, privacy, and cost control without sacrificing features or quality. Start replacing your most expensive subscriptions today and regain control over your business infrastructure.
Optimizing Your Next.js Stack: A Multi-Stage Dockerfile for Bun, Prisma, and Production-Ready Deployments
Learn how to build a lean, secure, and fast multi-stage Dockerfile for a Next.js application using Bun and Prisma, separating build and runtime stages to slash image size and boost deployment reliability.
Better Auth + JWKS JWT verification: a complete guide
Replace hard-coded public keys with dynamic JWKS endpoints for JWT verification—this guide shows you how to integrate seamless key rotation into your Next.js app using Better Auth and the `jose` library, eliminating painful updates when signing keys change.
Using DeepSeek as a backend for Claude Code
By swapping Claude Code's default backend for DeepSeek, you can unlock lower costs, faster performance, and greater flexibility—all while keeping Claude Code's polished interface and workflow.
Artificial Intelligence in Content Creation
AI is no longer a futuristic fantasy—it has become a practical tool for writers and marketers to draft, optimize, and personalize content at scale, but success depends on using it strategically while preserving the human creativity, empathy, and ethical judgment that make content truly resonate.
Persist React State Like a Pro: Building a Reusable useLocalState Hook
React's state resets on page refresh, but by combining localStorage with a custom `useLocalState` hook, you can create persistent state that survives browser reloads and sessions while maintaining the familiar `useState` interface.
Deploy Like a Developer: Zero-Config Deployment from Your Terminal with Vercel CLI
After perfecting your project, a fast zero-config way to deploy it online is using Vercel: sign up, install the Vercel CLI globally, authenticate via `vercel login`, then deploy to production with `vercel --prod`.
How to Fix a Broken Rollup Build with a Simple package.json Override
A cryptic Rollup build error was caused by an incompatibility in a newer version, but the fix is simple: pin Rollup to version 4.15.0 using a package override in `package.json`, then reinstall dependencies and rebuild. Use this workaround sparingly and remove it once the upstream issue is resolved.
Automate Secure Cookie Handling Across Environments Using NODE_ENV
Use a simple `NODE_ENV` check to automatically switch cookie security settings between development and production, eliminating manual errors when deploying.
**How to Remove node_modules from a GitHub Repository: A Complete Guide**
Accidentally pushing a `node_modules` folder to GitHub can clutter your repository, but you can easily remove it by updating your `.gitignore`, running `git rm --cached node_modules -r`, and pushing the changes to keep your repo lean and professional.
The Two-Line Nginx Fix That Brings Your WebSocket Backend Online
To fix WebSocket connection errors when moving from localhost to production, you need to configure Nginx with three critical directives: `proxy_http_version 1.1`, `proxy_set_header Upgrade $http_upgrade`, and `proxy_set_header Connection "upgrade"` to properly handle the WebSocket upgrade handshake and allow external clients to connect reliably.
The Hidden Power of useEffect's Return Function
React's useEffect cleanup function is essential for preventing memory leaks and unexpected behavior by properly disposing of timers, event listeners, and subscriptions when components unmount or dependencies change.
Implement a Manual Dark Mode Toggle in Your Tailwind CSS Site with a Custom React Hook
To give your website visitors control over their viewing experience, you can easily implement a manual dark mode toggle in Tailwind CSS by switching to a class-based approach and using a custom React hook that reads from localStorage. This lightweight solution lets users toggle between light and dark themes with a single button click while remembering their preference across sessions.
The Hidden Danger in Your React Components: Why Every useEffect Needs a Cleanup Function
Any time you start a side effect in `useEffect` that continues after rendering—like a timer, WebSocket, or event listener—you must return a cleanup function to stop it when the component unmounts; otherwise, you risk memory leaks, wasted resources, and unpredictable behavior.
Building a Dynamic Star Rating Component in React with Tailwind CSS and react-icons
A clean, reusable star rating component built with Tailwind CSS and React icons, supporting both static display and interactive star selection with hover effects and click-to-rate functionality.
From Localhost to Production: Your Complete Node.js Express Deployment Checklist
Deploying an Express.js app on Vercel is straightforward with the right configuration, but requires switching from local file uploads to cloud storage. This guide walks you through preparing your project, setting up the essential `vercel.json` file, and deploying with just a few terminal commands.