The archive
All posts
24 field notes on homelab, self-hosting and full-stack craft, from white-belt basics to brown-belt deep dives.
Showing all 24 posts
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
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
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
What is Webpack 5 and Module Bundling
Webpack 5 and module bundlers are used with Frontend Frameworks, like React or CRA.
Yellow belt
Helper Files or Utils
Helper Files keep your code clean and re-usable
White belt
Material-UI Styled Components Implementation with JSS
Material-UI, a popular React UI framework and using the makeStyle option hook for styled components.
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
Application Programming Interfaces
API stands for application programming interface, a concept that applies everywhere from command-line tools to enterprise Java code to Ruby on Rails web apps. An API is a way to programmatically interact with a separate software component or resource.
White belt
React Helmet Async
React Helmet Async lets you quickly add Meta and other Head Tags to your Single Page React Application
White belt
Flutter Introduction
Flutter lets you create mobile apps that are pixel perfect for any device. Lets 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