DEV Community: Moonlit Capy

I Built a Free Dark-Themed Daily Journal & Gratitude Planner (PDF)

Moonlit Capy — Sat, 21 Feb 2026 13:29:08 +0000

Journaling is one of the most effective habits for improving mental clarity, emotional well-being, and personal growth. But let's be honest â€” most journal templates are cluttered, uninspiring, and not enjoyable to use.

So I built something different: a free printable Daily Journal & Gratitude Planner with a beautiful dark theme, designed for people who actually want to use their planner every day.

What's Inside (5 Pages, A4 PDF)

Page 1: Cover

A clean, modern cover with amber/orange accent colors. Looks great printed or on a tablet.

Page 2: Morning Routine & Daily Intentions

Start your day with structure:

Morning Checklist â€” track habits like hydrate, exercise, meditate, healthy breakfast
Mood Tracker â€” 7 emoji-based mood options to check in with yourself
Top 3 Priorities â€” focus on what actually matters today
Daily Schedule â€” time blocks from 6 AM to 9 PM

Page 3: Daily Journal

Journal Prompt â€” a rotating prompt to spark reflection
Free Writing Area â€” 12 lined rows for unstructured thoughts
Wins & Accomplishments â€” celebrate what went right
Lessons Learned â€” capture growth moments

Page 4: Gratitude & Evening Reflection

Wind down intentionally:

5 Gratitude Entries â€” write what you're thankful for
Evening Reflection Questions â€” what went well? what to improve?
Self-Care Checklist â€” track healthy screen time, reading, stretching
Daily Affirmation â€” end on a positive note
Sleep Quality Tracker â€” 5-level rating

Page 5: Habit Tracker & Monthly Goals

The long game:

31-Day Habit Grid â€” track up to 10 habits across an entire month
4 Goal Cards â€” each with title, deadline, and 3 action steps
Month-in-Review â€” summarize highlights, challenges, and next month focus

Why Dark Theme?

Two reasons:

It looks stunning â€” modern gradients, amber accents, clean typography
Less ink when printing â€” inverted backgrounds use less toner on most printers

If you prefer digital journaling on a tablet (iPad, Android tablet), the dark theme is even better â€” easier on the eyes during evening journaling sessions.

How to Use It

Download the PDF â€” it's pay-what-you-want ($0 minimum)
Print it â€” A4 size, works on any printer
Or use digitally â€” import into GoodNotes, Notability, or any PDF annotation app
Fill it in daily â€” morning routine â†’ journal â†’ evening reflection
Monthly review â€” use the habit tracker and goal cards for long-term progress

The Science Behind It

Journaling isn't just a feel-good activity. Research shows:

Gratitude journaling reduces stress and improves sleep quality (source)
Habit tracking increases follow-through by making progress visible
Morning routines with intention-setting improve focus and productivity
Evening reflection helps consolidate learning and emotional processing

This planner combines all four practices into a single daily workflow.

Get It Free

Download Daily Journal & Gratitude Planner â€” $0+ (pay what you want, suggested $3)

No sign-up walls. No email required. Just download and start journaling.

More Free Planners

If you like this style, check out my other printable planners â€” all free, all dark-themed:

Developer Quick Reference Card â€” coding cheat sheet
Monthly Budget Planner â€” personal finance tracker
Workout Log & Fitness Tracker â€” exercise logging
Study Planner & Exam Tracker â€” academic planning
Weekly Meal Planner & Grocery List â€” meal prep & nutrition

Built with care by Moonlit Capy. If these planners help you, consider buying me a coffee or paying what you want on Gumroad.

6 Free Printable Planners to Organize Your Life (Dark Theme, A4 PDF)

Moonlit Capy — Sat, 21 Feb 2026 13:01:14 +0000

Looking for printable planners that don't look like they were made in Microsoft Word circa 2003? Same.

I couldn't find free planners that were actually nice to look at and use, so I built my own. All 6 planners below are:

Free ($0 minimum, pay what you want)
Dark-themed with modern gradients and accent colors
A4 PDF format â€” print or use digitally
5 pages each â€” packed with useful layouts, not filler

Here they are:

1. Developer Quick Reference Card

A coding cheat sheet covering terminal commands, Git workflows, HTTP status codes, regex patterns, data structures, and Big-O notation. Built for developers who want a printed reference next to their monitor.

Get it free on Gumroad â†’

2. Monthly Budget Planner

Track income, fixed expenses, variable spending, savings goals, and subscriptions. Includes a monthly overview, expense tracker, savings progress, and annual summary page.

Get it free on Gumroad â†’

3. Workout Log & Fitness Tracker

Log exercises with sets, reps, and weights. Track body measurements, personal records, weekly cardio, and monthly fitness goals. Built for people who actually go to the gym.

Get it free on Gumroad â†’

4. Study Planner & Exam Tracker

Manage your semester with a course tracker, weekly schedule grid, daily study session logs, exam preparation checklists, and goal-setting pages. Built for students who want structure without apps.

Get it free on Gumroad â†’

5. Weekly Meal Planner & Grocery List

Plan meals for the entire week across breakfast, lunch, dinner, and snacks. Includes grocery lists organized by category (produce, proteins, dairy, pantry staples), meal prep schedules, and nutrition tracking.

Get it free on Gumroad â†’

6. Daily Journal & Gratitude Planner âœ¨ NEW

Start your morning with intention and end your evening with reflection. Includes morning routine checklist, mood tracker, daily priorities, free-writing journal pages, gratitude entries, self-care checklist, 31-day habit tracker grid, and monthly goal cards.

Get it free on Gumroad â†’

Why Dark Theme?

Aesthetics â€” They actually look good. Modern gradients, clean typography, visually appealing layouts.
Less ink â€” Dark backgrounds with light text use surprisingly less toner on most modern printers.
Digital-friendly â€” If you use them on a tablet (GoodNotes, Notability, etc.), dark themes reduce eye strain.

How to Use Them

All planners are standard A4 PDFs:

Print them â€” any home or office printer works
Use digitally â€” import into your favorite PDF annotation app
Combine them â€” mix and match pages from different planners

No accounts, no sign-ups, no email walls. Just download and use.

Browse All Planners

See all products on Gumroad â†’

Built with care by Moonlit Capy. If these help you, consider buying me a coffee.

Also check out 85+ free developer tools built by the same team.

3 Free Printable Planners That Actually Help You Stay Organized

Moonlit Capy — Sat, 21 Feb 2026 11:41:25 +0000

Staying organized shouldn't require expensive apps or complex systems. Sometimes, a simple printable planner you can keep on your desk works better than any digital tool.

I created three free printable planners covering the areas where most people struggle: work output, money, and fitness. They're all pay-what-you-want (including $0), PDF format, designed for A4/Letter printing.

1. Developer Quick Reference Card

For: Software developers who constantly Google the same commands.

A compact 11-page landscape cheat sheet covering:

Git commands & workflows
Docker essentials
JavaScript/TypeScript patterns
React hooks & lifecycle
SQL queries & joins
HTTP status codes & API patterns
Terminal shortcuts
VS Code keyboard shortcuts
CSS Layout (Flexbox + Grid)
Regex patterns

Print it, pin it next to your monitor, stop context-switching to Stack Overflow.

Get it free on Gumroad

2. Monthly Budget Planner

For: Anyone who reaches the end of the month wondering where their money went.

A 5-page A4 portrait planner with:

Monthly Overview - income tracker + fixed bills checklist
Expense Tracker - 6 categories (Housing, Food, Transport, Health, Personal, Education)
Savings & Goals - 4 goal cards + debt tracker + monthly reflection
Daily Spending Log - 31 days of item/category/amount tracking

The structure forces you to actually look at your spending patterns instead of just tracking totals.

Get it free on Gumroad

3. Workout Log & Fitness Tracker

For: Gym-goers who want to track progress without paying for an app subscription.

A 5-page A4 portrait tracker with:

Weekly Workout Overview - Mon-Fri + weekend split with weekly summary
Workout Log - warm-up, 8 main exercises (4 sets each), cool-down
Body Measurements & Progress - core stats, upper/lower body measurements, strength PRs, 6-month weight chart
Goals, Habits & Notes - 4 goal cards, weekly habit tracker (6 habits x 7 days)

I designed this because most fitness apps try to upsell you into a premium tier just to log your sets. A piece of paper doesn't have a paywall.

Get it free on Gumroad

Why Printable?

Digital tools are great, but they add friction:

You need your phone/laptop open
Notifications interrupt your flow
Apps sunset features behind paywalls
Battery dies at the gym

A printed sheet is:

Always visible (pin it, tape it, fold it)
Zero boot time
No subscription
No distractions

I keep one of each on my desk. The budget planner goes in my wallet. The workout log goes in my gym bag. Friction-free.

All Three Are Free

Every planner is pay-what-you-want starting at $0. No email gate, no free trial, no upsell. Download the PDF, print it, use it.

If they save you even 10 minutes a week, consider buying me a coffee.

You can also check out 85+ free developer tools I built - things like JSON formatters, regex testers, color palette generators, and more.

What productivity tools do you keep on your physical desk? I'd love to hear in the comments.

React Performance Optimization: From Slow to Lightning Fast

Moonlit Capy — Sat, 21 Feb 2026 08:57:59 +0000

14 min read

React is fast by default — until it isn't. As applications grow, rendering bottlenecks creep in. This guide covers the techniques for diagnosing and fixing performance issues in production React applications.

Rule Zero: Measure First

Use React DevTools Profiler to find the actual bottleneck. Open the Profiler tab, record an interaction, and examine which components re-rendered and why.

Preventing Unnecessary Re-renders

React.memo

const ExpensiveChart = memo(function ExpensiveChart({
  data, width, height
}: ChartProps) {
  // Only re-renders when props actually change
  return <canvas />
})

useMemo for Expensive Computations

const summary = useMemo(() => ({
  total: transactions.reduce((sum, t) => sum + t.amount, 0),
  byCategory: groupBy(transactions, "category"),
}), [transactions])

React Compiler (React 19)

React 19 introduces automatic memoization at build time, making manual memo/useMemo/useCallback largely unnecessary for new code. Enable with experimental: { reactCompiler: true }.

Code Splitting

const DataViz = lazy(() => import("./DataVisualization"))

function Dashboard() {
  return (
    <Suspense fallback={<Skeleton />}>
      <DataViz />
    </Suspense>
  )
}

Virtualization for Long Lists

Render only visible items. Use @tanstack/react-virtual for lists over 100 items. The overhead of the virtualizer is negligible compared to rendering thousands of DOM nodes.

Colocate State

The most impactful technique: put state as close as possible to where it's used. Global state that changes frequently causes the entire tree to re-render.

Performance Checklist

Profile first — don't guess
Colocate state — move it down
Virtualize long lists (100+ items)
Code split heavy routes
Optimize images (next/image or lazy loading)
Defer non-urgent updates (useDeferredValue)
Enable React Compiler in React 19

Wrapping Up

Focus on architecture (where state lives, how data flows) rather than micro-optimizations. A well-structured app is fast by default.

Explore 85+ free developer tools or support this work.

Keep Leveling Up

If you found this useful, check out my Dev Reference Card - a downloadable cheat sheet with essential developer patterns, shortcuts, and references condensed into one page.

Grab it here for the price of a coffee.

Browse all my tools and templates at moonlitcapy.gumroad.com

Docker Essentials: A Developer's Practical Guide for 2026

Moonlit Capy — Sat, 21 Feb 2026 08:49:08 +0000

13 min read

Docker changed how we build and ship software. This guide covers Docker from a developer's perspective — the concepts, commands, and patterns you'll use daily.

Core Concepts

An image is a read-only blueprint. A container is a running instance. A Dockerfile is the recipe. A volume persists data. A network connects containers.

Essential Commands

docker build --tag myapp:latest .
docker run --detach --name myapp --publish 3000:3000 myapp:latest
docker ps
docker logs --follow myapp
docker exec --interactive --tty myapp sh
docker stop myapp && docker rm myapp
docker system prune --all --force

Multi-Stage Builds

Separate the build environment from the runtime for smaller, more secure images.

FROM node:22-alpine AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:22-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/package.json ./
RUN npm ci --production --ignore-scripts
USER node
EXPOSE 3000
CMD ["node", "dist/server.js"]

Docker Compose for Local Dev

services:
  app:
    build: .
    ports: ["3000:3000"]
    volumes: [".:/app", "/app/node_modules"]
    depends_on:
      db: { condition: service_healthy }
  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_USER: dev
      POSTGRES_PASSWORD: dev
      POSTGRES_DB: myapp
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U dev"]
      interval: 5s
      retries: 5

Wrapping Up

Start with a simple Dockerfile and Docker Compose for local dev. Add multi-stage builds for production. The goal: remove environment differences as a source of bugs.

Explore 85+ free developer tools or support this work.

Keep Leveling Up

If you found this useful, check out my Dev Reference Card - a downloadable cheat sheet with essential developer patterns, shortcuts, and references condensed into one page.

Grab it here for the price of a coffee.

Browse all my tools and templates at moonlitcapy.gumroad.com

Data Pipeline Design: From Messy CSV to Clean Database

Moonlit Capy — Sat, 21 Feb 2026 08:48:50 +0000

9 min read

Most real-world data starts messy — inconsistent CSV exports from legacy systems, spreadsheets with merged cells, date formats that vary by row. A good data pipeline transforms this chaos into clean, normalized database records.

Pipeline Architecture

The classic ETL (Extract, Transform, Load) pattern remains the foundation. Each stage has a clear boundary and failure mode.

Extract     → Read raw data from source (CSV, API, FTP)
Transform   → Normalize, validate, enrich, deduplicate
Load        → Write clean records to target database
Monitor     → Log anomalies, send alerts on threshold breaches

Handling Messy Data

Date normalization: Parse multiple formats (MM/DD/YYYY, DD-MM-YYYY, ISO 8601) into a single canonical format
Address standardization: Normalize street abbreviations (St → Street, Ave → Avenue) and validate against postal databases
Deduplication: Use fuzzy matching (Levenshtein distance, Jaro-Winkler) to identify duplicate records with slight variations
Type coercion: Convert "yes"/"no"/"1"/"0"/"true"/"false" to consistent booleans

AI-Assisted Normalization

For particularly messy data, LLMs can classify and normalize fields that rule-based systems struggle with — company name variations, free-text product descriptions, and ambiguous category labels.

async function normalizeWithAI(rawValue: string, field: string): Promise<string> {
  const response = await llm.complete({
    prompt: `Normalize this ${field} value into a standard format.\nInput: "${rawValue}"\nOutput (just the normalized value, nothing else):`,
    maxTokens: 50,
    temperature: 0,
  })
  return response.trim()
}

Validation Layer

Every record should pass through validation before loading. Reject invalid records into a quarantine table for manual review rather than silently dropping data.

Wrapping Up

Data pipelines are unglamorous but critical. The difference between a good pipeline and a bad one shows up in data quality — and data quality directly impacts every business decision downstream.

Explore 85+ free developer tools or support this work.

Keep Leveling Up

If you found this useful, check out my Dev Reference Card - a downloadable cheat sheet with essential developer patterns, shortcuts, and references condensed into one page.

Grab it here for the price of a coffee.

Browse all my tools and templates at moonlitcapy.gumroad.com

Building a Developer Portfolio That Actually Gets You Hired

Moonlit Capy — Sat, 21 Feb 2026 08:42:54 +0000

7 min read

A developer portfolio isn't a resume — it's proof of work. The most effective portfolios I've seen share a common formula: strong project showcases, clean UI, fast load times, and proper SEO.

Why Next.js for Portfolios

Static generation — pages are pre-built at deploy time, resulting in instant loads
Built-in SEO — metadata API, sitemap generation, robots.txt
React ecosystem — use any UI library, animation library, or component system
Free hosting — Vercel deploys Next.js with zero configuration

Project Showcase Structure

Each project page should answer three questions: what problem does it solve, what was the technical approach, and what was the measurable outcome.

app/
  page.tsx              # Hero + project cards
  projects/
    [slug]/
      page.tsx          # Individual project showcase
  sitemap.ts            # Auto-generated sitemap
  robots.ts             # Search engine directives

SEO Essentials

Set unique title and description for every page
Use semantic HTML: h1, h2, article, nav
Generate a sitemap with sitemap.ts
Submit your sitemap to Google Search Console and Bing Webmaster Tools
Add structured data (JSON-LD) for Person and WebSite

Performance Tips

Use next/image for automatic image optimization
Minimize client-side JavaScript — most portfolio pages can be static
Use system fonts or limit web fonts to one family
Aim for 90+ Lighthouse score across all categories

Wrapping Up

A live portfolio with real projects beats a polished resume every time. Focus on shipping a clean version 1, then iterate. Start the first project today, write the first showcase this weekend.

Explore 85+ free developer tools or support this work.

Keep Leveling Up

If you found this useful, check out my Dev Reference Card - a downloadable cheat sheet with essential developer patterns, shortcuts, and references condensed into one page.

Grab it here for the price of a coffee.

Browse all my tools and templates at moonlitcapy.gumroad.com

API Integration Patterns for Production Systems

Moonlit Capy — Sat, 21 Feb 2026 08:42:35 +0000

10 min read

Building API integrations that work in production — not just in Postman — requires patterns for handling the real world: flaky networks, rate limits, schema changes, and partial failures.

Retry with Exponential Backoff

Network errors and 5xx responses are inevitable. A retry strategy with exponential backoff prevents overwhelming a recovering service while maximizing your chances of success.

async function fetchWithRetry(url, options, maxRetries = 3) {
  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    try {
      const res = await fetch(url, options)
      if (res.ok) return res
      if (res.status < 500) throw new Error(`Client error: ${res.status}`)
    } catch (err) {
      if (attempt === maxRetries) throw err
    }
    const delay = Math.min(1000 * 2 ** attempt, 30000)
    const jitter = delay * (0.5 + Math.random() * 0.5)
    await new Promise((r) => setTimeout(r, jitter))
  }
}

Circuit Breaker

When an upstream service is down, continuing to send requests wastes resources and slows down your entire system. A circuit breaker short-circuits failed requests after a threshold.

class CircuitBreaker {
  failures = 0; lastFailure = 0; state = "closed"
  constructor(private threshold = 5, private resetMs = 60000) {}

  async call<T>(fn: () => Promise<T>): Promise<T> {
    if (this.state === "open") {
      if (Date.now() - this.lastFailure > this.resetMs)
        this.state = "half-open"
      else throw new Error("Circuit is open")
    }
    try {
      const result = await fn()
      this.failures = 0; this.state = "closed"
      return result
    } catch (err) {
      this.failures++; this.lastFailure = Date.now()
      if (this.failures >= this.threshold) this.state = "open"
      throw err
    }
  }
}

Idempotency Keys

For mutating operations (payments, order creation), an idempotency key ensures that retried requests don't duplicate side effects — the server reuses the original response.

const idempotencyKey = crypto.randomUUID()

const response = await fetch("/api/payments", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Idempotency-Key": idempotencyKey,
  },
  body: JSON.stringify({ amount: 4999, currency: "USD" }),
})

Rate Limiting (Client Side)

Respect the API's rate limits before they enforce them. A token bucket algorithm gives you smooth, predictable request pacing.

class RateLimiter {
  private tokens: number
  private lastRefill: number
  constructor(
    private maxTokens: number,
    private refillRate: number // tokens per second
  ) {
    this.tokens = maxTokens
    this.lastRefill = Date.now()
  }
  async acquire(): Promise<void> {
    this.refill()
    if (this.tokens < 1) {
      const waitMs = (1 / this.refillRate) * 1000
      await new Promise((r) => setTimeout(r, waitMs))
      this.refill()
    }
    this.tokens--
  }
  private refill() {
    const now = Date.now()
    const elapsed = (now - this.lastRefill) / 1000
    this.tokens = Math.min(this.maxTokens, this.tokens + elapsed * this.refillRate)
    this.lastRefill = now
  }
}

Wrapping Up

These patterns aren't optional for production systems. Retries handle transient failures, circuit breakers prevent cascade failures, idempotency keys prevent duplicates, and rate limiting keeps you within bounds. Layer them together for integrations that survive the real world.

Explore 85+ free developer tools or support this work.

Keep Leveling Up

If you found this useful, check out my Dev Reference Card - a downloadable cheat sheet with essential developer patterns, shortcuts, and references condensed into one page.

Grab it here for the price of a coffee.

Browse all my tools and templates at moonlitcapy.gumroad.com

The Complete Git Workflow Guide for Teams in 2026

Moonlit Capy — Sat, 21 Feb 2026 08:37:05 +0000

12 min read

Git is the backbone of modern software development, but most teams use only a fraction of its capabilities. Here are the workflows, conventions, and strategies that consistently lead to clean histories and reliable deployments.

Choosing the Right Branching Strategy

Trunk-Based Development

Works best for teams shipping multiple times per day. Everyone commits to main directly with short-lived feature branches lasting hours, not days.

git checkout -b feat/add-search-filter
# ... make changes ...
git add -A && git commit -m "feat: add search filter component"
git push origin feat/add-search-filter

GitHub Flow

Ideal for teams shipping daily or weekly. One main branch, feature branches for all work, pull requests for everything.

Merge vs Rebase

Use merge by default (preserves history, safer for shared branches). Use rebase only for personal branches you haven't pushed yet.

Commit Message Conventions

feat(auth): add SSO login with Google
fix(api): handle null response from payment gateway
docs(readme): update deployment instructions
refactor(db): extract query builder into utility
chore(deps): bump next.js to 16.1.3

Git Aliases That Save Hours

[alias]
  s = status -sb
  lg = log --oneline --graph --decorate -20
  co = checkout
  cb = checkout -b
  cm = commit -m
  wip = !git add -A && git commit -m "wip: work in progress"
  up = !git fetch origin && git rebase origin/main

Wrapping Up

The best Git workflow is the one your entire team actually follows. Start simple with GitHub Flow and conventional commits. Add complexity only when you have a real problem.

Explore 85+ free developer tools or support this work.

Keep Leveling Up

If you found this useful, check out my Dev Reference Card - a downloadable cheat sheet with essential developer patterns, shortcuts, and references condensed into one page.

Grab it here for the price of a coffee.

Browse all my tools and templates at moonlitcapy.gumroad.com

TypeScript Patterns Every Developer Should Know in 2026

Moonlit Capy — Sat, 21 Feb 2026 07:23:08 +0000

TypeScript has matured far beyond "JavaScript with types." The type system is powerful enough to encode complex business logic at compile time. Here are the patterns that make the biggest difference in production codebases.

Discriminated Unions

Model states where different variants carry different data. TypeScript narrows the type automatically based on the discriminant.

type AsyncState<T> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; error: Error }

function renderState<T>(state: AsyncState<T>) {
  switch (state.status) {
    case "idle": return "Ready"
    case "loading": return "Loading..."
    case "success": return `Data: ${JSON.stringify(state.data)}`
    case "error": return `Error: ${state.error.message}`
  }
}

This is the foundation of type-safe state management. Every React app with async data should use this pattern instead of separate isLoading, isError, data booleans.

Branded Types

Prevent mixing up values that are the same primitive type but represent different things.

type UserId = string & { readonly __brand: "UserId" }
type OrderId = string & { readonly __brand: "OrderId" }

function createUserId(id: string): UserId {
  return id as UserId
}

function getOrder(orderId: OrderId) { /* ... */ }

const userId = createUserId("user_123")
// getOrder(userId) // Compile error! Can't pass UserId where OrderId expected

Zero runtime cost. The brand exists only in the type system. Use this for any ID type, currency amount, or validated string.

Template Literal Types

Generate string unions from combinations:

type EventName = `${"user" | "order"}.${"created" | "updated" | "deleted"}`
// Result: "user.created" | "user.updated" | "user.deleted" | "order.created" | "order.updated" | "order.deleted"

type CSSProperty = `${string}-${string}`
type HexColor = `#${string}`

This is powerful for event systems, CSS-in-JS, and any API where string patterns matter.

Result Types for Error Handling

Stop throwing exceptions. Return typed results instead:

type Result<T, E = Error> =
  | { ok: true; value: T }
  | { ok: false; error: E }

function parseConfig(input: string): Result<Config, ParseError> {
  try {
    const config = JSON.parse(input)
    return { ok: true, value: config }
  } catch (e) {
    return { ok: false, error: new ParseError(e.message) }
  }
}

const result = parseConfig(input)
if (result.ok) {
  console.log(result.value) // TypeScript knows this is Config
} else {
  console.error(result.error) // TypeScript knows this is ParseError
}

The caller is forced to handle both cases. No more uncaught exceptions in production.

Exhaustive Matching

Use the never type to ensure you handle every case in a union:

function assertNever(x: never): never {
  throw new Error(`Unexpected value: ${x}`)
}

function handleStatus(status: AsyncState<unknown>) {
  switch (status.status) {
    case "idle": return "Ready"
    case "loading": return "Loading..."
    case "success": return "Done"
    case "error": return "Failed"
    default: return assertNever(status) // Compile error if a case is missing
  }
}

When you add a new variant to the union, TypeScript will flag every switch statement that doesn't handle it.

Wrapping Up

Start with discriminated unions and exhaustive matching — they change how you think about state management. Layer in branded types and Result types as your codebase grows. The goal: make illegal states unrepresentable.

These patterns have zero runtime overhead. They exist purely in the type system, disappearing completely after compilation. That's the beauty of TypeScript done right.

Want more dev content? Check out the blog or buy me a coffee.

Keep Leveling Up

If you found this useful, check out my Dev Reference Card - a downloadable cheat sheet with essential developer patterns, shortcuts, and references condensed into one page.

Grab it here for the price of a coffee.

Browse all my tools and templates at moonlitcapy.gumroad.com

25 Essential Free Developer Tools You Should Be Using in 2026

Moonlit Capy — Sat, 21 Feb 2026 07:20:52 +0000

Every developer has a toolkit — a set of utilities they reach for daily. The best tools are the ones that work instantly in your browser, require no account, and just get the job done. Here are 25 free online tools that belong in every developer's bookmarks.

Data Format Tools

1. JSON Formatter & Validator

Paste malformed JSON, get it beautifully formatted with syntax highlighting and error detection. Essential for debugging API responses and config files.

2. JSON to CSV Converter

Converting API responses to spreadsheet-friendly formats is a daily task. Tools like DevKit's JSON to CSV converter make this instant.

3. YAML to JSON Converter

Docker Compose, CI configs, Kubernetes manifests — YAML is everywhere. A reliable YAML/JSON converter saves time when switching between formats.

4. XML to JSON Converter

Legacy APIs and SOAP services still use XML. Converting XML responses to JSON for modern frontends is a common need.

5. CSV Viewer & Editor

Preview CSV files without opening Excel. Good viewers handle large files, detect delimiters automatically, and let you sort/filter.

Encoding & Security Tools

6. Base64 Encoder/Decoder

Data URIs, API tokens, email attachments — Base64 encoding is everywhere. A fast encoder/decoder is essential.

7. URL Encoder/Decoder

Debugging query parameters with special characters? URL encoding issues are among the most common API bugs.

8. JWT Decoder

Decode JWT tokens to inspect headers, payloads, and expiration times without any external library.

9. Hash Generator (MD5/SHA)

Generate checksums for file integrity verification, password hashing comparisons, and data deduplication.

10. Password Generator

Generate secure, random passwords with configurable length, character sets, and entropy indicators.

CSS & Design Tools

11. CSS Gradient Generator

Visual gradient editors save hours of tweaking CSS. The best ones generate complex multi-stop gradients.

12. Box Shadow Generator

Layered shadows create depth. Interactive generators let you preview and copy production-ready CSS.

13. Flexbox Playground

Understanding flex properties visually is 10x faster than reading docs. Interactive playgrounds show results in real time.

14. CSS Grid Generator

Grid layouts are powerful but the syntax is complex. Visual generators help you prototype layouts quickly.

15. Color Palette Generator

Generate harmonious color schemes from a base color. Essential for design systems and brand consistency.

Code Transformation Tools

16. JSON to TypeScript

Paste a JSON response, get TypeScript interfaces. The DevKit converter handles nested objects and arrays intelligently.

17. Regex Tester

Test and debug regular expressions with real-time matching, group highlighting, and explanation of pattern components.

18. JavaScript/CSS Minifier

Quick minification for one-off scripts or inline styles. Useful when build tools feel like overkill.

19. SQL Formatter

Transform single-line SQL queries into readable, indented format. Makes complex joins and subqueries comprehensible.

20. Markdown Preview

Write and preview Markdown in real time. Useful for README files, documentation, and blog posts.

Utility Tools

21. Cron Expression Parser

Cron syntax reads like hieroglyphics. A parser that shows the next execution times in plain English is invaluable.

22. Timestamp Converter

Convert between Unix timestamps, ISO 8601, and human-readable dates. Debug time zone issues instantly.

23. UUID/ULID Generator

Generate unique identifiers for database records, API keys, and session tokens.

24. HTTP Status Code Reference

Quick lookup for all HTTP status codes with descriptions and common use cases. Faster than searching the RFC.

25. Placeholder Image Generator

Generate placeholder images of any size for mockups and prototypes without external services.

Where to Find These

All of these tools (and many more) are available for free at DevKit (tools.elunari.uk). No login, no tracking, no installs — just paste and go.

Found this useful? Check out 85+ free dev tools or buy me a coffee.

Keep Leveling Up

If you found this useful, check out my Dev Reference Card - a downloadable cheat sheet with essential developer patterns, shortcuts, and references condensed into one page.

Grab it here for the price of a coffee.

Browse all my tools and templates at moonlitcapy.gumroad.com