Frontend
The part of the app people see: React, Vite, Tailwind and shadcn/ui, the browser errors that break it, and making it fast, installable and pleasant on a phone.
39 posts · page 1 of 2
What Is TypeScript? JavaScript With Labels, Explained for Beginners
TypeScript is JavaScript plus types: labels that say what kind of value each thing holds, checked before your code runs. What it looks like, why AI tools default to it, what .ts and .tsx files are, and how to read the red squiggles.
What Is a Headless CMS? And Does Your App Need One?
A headless CMS is a content editor with no website attached — it stores your content and hands it to your app through an API. How it differs from WordPress, the popular options, when it beats Markdown files or your own database, and when it's overkill.
"Unexpected Token < in JSON at Position 0": What It Means and How to Fix It
Your code expected JSON and got HTML — almost always an error page or your app's index.html. Why it happens (wrong URL, 404, server error, SPA fallback, login redirect), how to see what the server actually sent, and how to parse responses safely.
TanStack Query vs useEffect for Data Fetching in React
Fetching in useEffect looks simple until you need loading states, errors, caching, race conditions, refetching and mutations. What TanStack Query handles for you, side-by-side code, mutations with invalidation, and when server components or plain useEffect are still the right choice.
Streaming LLM Responses to the Browser: SSE, Fetch Streams, and Gotchas
Streaming makes AI features feel fast: words appear as they're generated instead of after a ten-second wait. How to stream from the Claude API on your server, forward it to the browser, read it in React, and fix the proxies and timeouts that buffer or cut off streams.
React vs Vue vs Svelte: Which Frontend Framework Should You Learn?
Three popular ways to build interactive web interfaces. How they differ in syntax, size, learning curve, ecosystem and jobs — and why, if you build with AI tools, the answer is usually React even when another option is nicer.
React useState Explained: How State Actually Works
useState gives a component memory that survives re-renders and updates the screen when it changes. How it works, why the value doesn't change immediately after you set it, updating objects and arrays without mutating them, and the functional update form.
React useEffect Explained: When to Use It (and When Not To)
useEffect runs code after React renders, to sync your component with something outside React — a timer, a subscription, a browser API. How the dependency array works, cleanup functions, why effects run twice in development, and the many cases where you don't need an effect at all.
"Each Child in a List Should Have a Unique Key Prop": What It Means
React's key warning appears when you render a list without telling React which item is which. Why keys matter, why array index is a bad key for lists that change, what to use instead, and how to fix the warning in fragments and nested maps.
React "Too Many Re-renders" and "Maximum Update Depth Exceeded": Fixes
Both errors mean a component keeps updating state, which re-renders it, which updates state again — forever. The four patterns that cause it (calling a handler instead of passing it, setState during render, effects without dependencies, objects in dependency arrays) and their fixes.
React State Management: useState vs Context vs Zustand vs Redux
Most React apps need less state management than they think. Sort your state into server, URL, form, local and global, then pick the lightest tool for each: useState, the URL, React Context, Zustand, Redux Toolkit or Jotai. Trade-offs, examples and common mistakes.
React Server Components Explained: "use client", "use server", and What Runs Where
Server Components render on the server and send no JavaScript; Client Components hydrate in the browser for interactivity. How the boundary works, what 'use client' and 'use server' actually mean, passing data across, common errors, and how to keep secrets and bundles where they belong.
Next.js App Router vs Pages Router: Differences and Whether to Migrate
Next.js has two routers: the older pages/ directory and the newer app/ directory built on React Server Components. How routing, data fetching, layouts and API routes differ, which one new projects should use, and a sensible incremental migration path.
localStorage vs sessionStorage vs Cookies: Where Should You Store It?
Three ways to store data in the browser, with different lifetimes, sizes and security properties. What each one is for, why login tokens shouldn't go in localStorage, the size limits, and a simple rule for choosing.
JavaScript Array Methods: map, filter, reduce, find and Friends
Most JavaScript in AI-generated apps is arrays being transformed. What map, filter, find, some, every, reduce, sort and includes do, with plain examples, how to chain them, which ones change the original array, and the mistakes that cause bugs.
"TypeError: X Is Not a Function": The Common Causes and Fixes
"is not a function" means you tried to call something that isn't a function — usually undefined, an object, or the wrong kind of value. The usual suspects: .map on a non-array, wrong import, missing await, a typo, or a name collision. How to diagnose each.
How to Center a Div (Horizontally, Vertically, or Both)
The internet's favourite CSS joke has simple answers now. How to center anything horizontally, vertically or both with Flexbox, Grid, margin auto and absolute positioning — with the Tailwind classes — and why your centering isn't working.
Google Search Console for Beginners: Set It Up and Read It
Search Console is Google's free tool for seeing how your site appears in search. How to verify your domain, submit a sitemap, read the Performance and Pages reports, fix 'Crawled — currently not indexed', and use URL Inspection to get a new page noticed.
"TypeError: Failed to Fetch": What It Means and How to Fix It
"Failed to fetch" means the browser couldn't complete a request at all — no response reached your code. The usual causes are CORS, a wrong URL, mixed content, the server being down, or an ad blocker. How to tell which in under a minute.
Flexbox vs Grid: Which CSS Layout Should You Use?
Flexbox lays things out in one direction — a row or a column. Grid lays things out in two — rows and columns at once. When to use each, the handful of properties that do most of the work, and the Tailwind classes you'll see in AI-generated code.
How to Build a Landing Page That Gets Sign-Ups
A landing page has one job: get the visitor to take one action. The sections that work, how to write a headline that says what the product does, where to put the sign-up form, what to measure, and the technical basics that stop it looking broken when shared.
Astro vs Next.js: Which Should You Use for Your Site?
Astro ships almost no JavaScript by default and shines for content sites. Next.js is a full React application framework. How they differ in philosophy, performance, data handling and hosting — and a simple rule for picking between them.
What Is Vite? The Build Tool Behind Lovable and Bolt Apps, Explained
Vite is the tool that runs your React app during development and bundles it for production. What Vite does, what npm run dev and npm run build actually produce, why VITE_ environment variables are public, and how to deploy the dist folder.
What Is Tailwind CSS? Why Every AI-Built App Seems to Use It
Tailwind CSS styles your app with small utility classes written straight in the HTML. What Tailwind is, how it differs from normal CSS and Bootstrap, why AI tools love it, what changed in Tailwind v4, and how to read those long class lists.