The archive
All posts
48 field notes on homelab, self-hosting and full-stack craft, from white-belt basics to brown-belt deep dives.
Showing all 48 posts
React Suspense and Error Boundaries: Declarative Loading and Error States
Replace scattered isLoading and error checks with Suspense and Error Boundaries — a cleaner model for async UI in React.
Green belt
TIL: findLast() and findLastIndex() — Search Arrays From the End
ES2023 added findLast() and findLastIndex() so you can stop reversing arrays just to find the last matching element.
White belt
Custom React Hooks: Extract, Reuse, and Actually Test Them
Custom hooks are React's best composability tool — here is how to design them well, avoid the common pitfalls, and write tests that give you real confidence.
Green belt
TypeScript Utility Types: The Ones You Will Actually Use
Partial, Pick, Omit, ReturnType, Awaited — six built-in TypeScript helpers that eliminate repetitive type definitions and make refactors painless.
Yellow belt
Core Web Vitals in Next.js: Measuring and Fixing What Actually Matters
LCP, INP, and CLS explained with concrete Next.js fixes — next/image, font optimization, lazy loading, and the useReportWebVitals hook.
Green belt
TIL: toSorted(), toReversed(), toSpliced(), with() — Mutate-Free Array Methods
ES2023 gave JavaScript four non-mutating array methods that return a new array instead of changing the original — a small API improvement with big payoff in React.
Yellow belt
GitHub Actions CI/CD for Your Next.js App
Automate linting, type checking, tests, and Vercel previews on every pull request with a practical GitHub Actions workflow.
Green belt
TIL: structuredClone() — JavaScript Has a Native Deep Clone
Stop reaching for JSON.parse/stringify — JavaScript ships a proper deep clone API and it handles Dates, Sets, Maps, and circular refs.
White belt
useReducer: Managing Complex State in React
When useState starts to feel like juggling — multiple flags that must stay in sync, actions that update several pieces of state at once — useReducer brings order back.
Yellow belt
React 19: The New APIs Worth Using Right Now
React 19 shipped the most significant API additions in years. Here is a practical tour of the ones that change how you write components day-to-day.
Green belt
TIL: Promise.withResolvers() — A Cleaner Deferred Pattern
ES2024 ships Promise.withResolvers() — no more awkward outer variables to expose resolve and reject outside the executor.
Yellow belt
Building a Type-Safe REST API with Express and TypeScript
Stop guessing what your request bodies look like. Here is how to wire up Express with TypeScript for fully typed routes, validated payloads, and sane error handling.
Green belt
Next.js Server Actions: Forms Without the API Boilerplate
Server Actions let you mutate data directly from a form without writing a separate API route. Here is how to use them confidently in production.
Green belt
Zustand: Simple Global State Without the Boilerplate
Zustand gives you global React state in under 10 lines — no providers, no reducers, no boilerplate. Here is how it works and when to reach for it.
Yellow belt
TIL: TypeScript's satisfies Operator
The satisfies keyword validates a value against a type without widening it — you get the safety net and the most specific inference at the same time.
Green belt
Testing React with Vitest and React Testing Library
Set up a fast, modern test suite for your React app using Vitest and React Testing Library — from first render to async interactions and mocks.
Green belt
Prisma ORM: Type-Safe Database Queries for Node.js
Prisma turns your Postgres schema into a fully-typed TypeScript client — no hand-rolled SQL strings, no manual type definitions. Here's how to go from zero to productive queries in minutes.
Green belt
React Context + useReducer: Lightweight State Management Without Redux
Before reaching for Redux or Zustand, see how far React's own Context API and useReducer hook can take you — and exactly when they stop being the right tool.
Green belt
Kotlin Coroutines: Async Android Without Callback Hell
Coroutines make async code in Android feel like regular sequential code. Here is how suspend functions, viewModelScope, and structured concurrency actually work.
Green belt
TIL: Object.groupBy() — JavaScript Finally Has a Native Group By
ES2024 ships Object.groupBy() and Map.groupBy() — no more reduce() gymnastics just to bucket an array into groups.
Yellow belt
TIL: useDeferredValue — React's Built-in Way to Defer Expensive Renders
React 18 ships a hook that lets you keep your UI responsive during expensive filtering or searching without a single setTimeout.
Green belt
Zod: Stop Trusting Your API Responses at Runtime
TypeScript types vanish at runtime. Zod gives you a single source of truth for shape validation *and* your TS types — here is how I use it in real projects.
Green belt
TIL: Use React's key Prop to Reset Component State
Passing a new key to a component is often the cleanest way to fully reset its internal state — no useEffect, no manual reset handler needed.
Yellow belt
TIL: docker compose watch Syncs Code Without Restarting Containers
Docker Compose 2.22 added a watch mode that hot-syncs your source files into running containers — no manual volume hacks or full restarts needed.
Yellow belt
Kotlin + Jetpack Compose: Build Your First Android Screen Without XML
Jetpack Compose replaces XML layouts with plain Kotlin functions. Here is a practical intro — composables, state, and a working todo list — that gets you productive fast.
Yellow belt
Building a REST API with Node.js, Express, and PostgreSQL
A practical end-to-end walkthrough — spin up Express, connect to Postgres with parameterized queries, and build a solid set of CRUD routes.
Green belt
Docker Multi-Stage Builds: Smaller Images, Faster Deploys
Multi-stage builds let you compile and test inside a fat builder image, then ship only the final artifact in a tiny runtime image — the same Dockerfile, no extra scripts.
Brown belt
useCallback and useMemo: When They Actually Help
Most React devs either ignore these hooks or wrap everything in them "just to be safe." Both are wrong. Here is exactly when each one earns its place.
Brown belt
TanStack Query v5: Stop Managing Server State by Hand
If you are still fetching data with useEffect and useState, TanStack Query will feel like a superpower — caching, deduplication, background refetching, and mutations, all handled for you.
Green belt
Running Home Assistant in Docker: From Zero to Your First Automation
How I run Home Assistant in a single Docker container, keep the config in Git, and build automations that actually make life easier.
Green belt
Mastering Modern JavaScript: Patterns You Actually Use
A practical tour of the modern JS features that come up every day — scoping, destructuring, array methods, async/await, and optional chaining.
Yellow belt
PostgreSQL for Node.js Developers: A Practical Guide
PostgreSQL is the most capable open-source relational database you can run yourself. Here is how to model data, write efficient queries, and use it cleanly from Node.js.
Green belt
Self-Hosting RustDesk: A Private Remote Desktop Server in Under 10 Minutes
Replace TeamViewer and AnyDesk with your own RustDesk relay server — complete Docker Compose setup, firewall rules, and client configuration.
Green belt
Next.js App Router: What Changed and Why It Matters
The App Router rewrites how Next.js handles routing, layouts, and data fetching. Here is a practical breakdown of what changed and how to use it today.
Green belt
TypeScript in React: Practical Typing Patterns That Actually Help
TypeScript stops being noise and starts being useful the moment you learn a handful of patterns — typed props, useState generics, event handlers, and API responses.
Green belt
Automating My Homelab with n8n
I replaced a pile of brittle cron scripts with n8n — a self-hosted automation tool where workflows are visual, debuggable, and triggered by real webhooks.
Green belt
Self-Hosting a Homelab with Docker Compose
How I run my entire homelab from a single, version-controlled Docker Compose file — with healthchecks, named volumes, and backups that I never have to think about.
Brown belt
User Authorization with Firebase Walkthrough
Steps Used to add Firebase to Crypto Tracking Application
Yellow belt
Webpack 5 and Module Bundling: A Practical Guide
Webpack 5 takes your source files — JS, Sass, images, and more — and bundles them into optimized static assets your browser can actually load. Here's how to set it up from scratch.
Yellow belt
Helper Files and Utility Functions in React
Keep components clean and logic reusable by extracting it into focused utility modules.
White belt
MUI v5+: Styling with the sx Prop, styled(), and Custom Themes
Material UI v5 replaced JSS and makeStyles with the sx prop and a styled() API built on Emotion — here is how to use them effectively.
Yellow belt
Bootstrap 5 in a React App
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. Here is a practical guide to using it with React.
White belt
React Overview
A JavaScript library for building user interfaces
White belt
REST APIs: A Practical Guide for Web Developers
APIs let applications talk to each other over the web. Here's everything you need to know to consume and understand REST APIs as a JavaScript developer.
White belt
SEO in React: Dynamic Meta Tags with react-helmet-async
Single-page apps skip server-rendered head tags by default — react-helmet-async fixes that by letting you set title, description, and Open Graph tags from any component.
Yellow belt
Flutter Introduction
Flutter lets you create mobile apps that are pixel perfect for any device. Let's go over some basics together.
White belt
NextJS: Core Feature Overview
NextJS is a the React framework for production - it makes building fullstack React apps and sites a breeze and ships with built-in SSR.
Yellow belt
React-Markdown
This package is a React component that can be given a string of markdown that it’ll safely render to React elements.
White belt