Notes on craft & motion
Short, practical write-ups. Mostly the tricks behind the components.
How to Make Next.js SEO-Friendly: The Complete 2026 Checklist
A practical, code-first guide to Next.js SEO: rendering, metadata, sitemaps, structured data, Core Web Vitals, plus AEO and GEO so AI search engines cite you too.
AEO and GEO: How to Get Your Site Cited by ChatGPT and AI Search
AI assistants now answer questions your customers used to Google. Here's how AEO and GEO work, and the concrete steps to get your site quoted by ChatGPT, Gemini and Perplexity.
Free Keyword Research Without Paid Tools (The Method I Actually Use)
You don't need Ahrefs or Semrush to find keywords people search. Here's how to do real keyword research for free using autocomplete, intent grouping and a simple difficulty check.
How to Fix Core Web Vitals: LCP, INP and CLS Explained
A practical guide to the three Core Web Vitals, what LCP, INP and CLS measure, why they affect SEO, and the concrete fixes that move each one into the green.
Meta Tags for SEO: The Ones That Matter (and the Ones That Don't)
A no-fluff guide to meta tags for SEO: which tags actually affect rankings and clicks, how to write great title and description tags, and which old tags to ignore.
SEO for Beginners: A Simple Step-by-Step Guide
A no-jargon SEO guide for beginners: how search works, the on-page, technical and off-page basics, and the exact first steps to get a new site ranking.
React Hooks Explained: What They Are and When to Use Them
A beginner-friendly guide to React hooks: what useState, useEffect, useRef and friends actually do, when to use each, and the rules that keep them working.
How to Use Tailwind CSS in React (Setup and First Component)
A step-by-step guide to installing Tailwind CSS in a React project, plus how utility classes work, why they're fast, and how to build your first clean component.
How to Use Framer Motion in React (and Next.js)
Install Framer Motion and animate your first React component: the motion element, variants, gestures, and scroll animations, with copy-paste examples.
TypeScript vs JavaScript: The Differences That Actually Matter
What TypeScript adds to JavaScript, why teams switch, and whether you should learn it: types, tooling, and the real trade-offs explained simply.
Async/Await in JavaScript Explained (With Real Examples)
Understand async/await in JavaScript: how it makes asynchronous code read like synchronous code, how it relates to promises, and how to handle errors properly.
JavaScript Array Methods You Actually Use: map, filter, reduce and More
A practical guide to the JavaScript array methods that matter, map, filter, reduce, find, some and every, with clear examples of when to use each.
How to Make a CSS Grid Responsive (Without Media Queries)
Build responsive grid layouts with CSS Grid, using auto-fit, minmax and a few key properties to make columns adapt to any screen, often with zero media queries.
Flexbox vs Grid: When to Use Which (With Clear Examples)
Flexbox and CSS Grid solve different layout problems. Here's the simple rule for choosing between them, with examples of when each one is the right tool.
CSS Variables (Custom Properties): A Practical Guide
How to create and use CSS variables, why they beat preprocessor variables, and how to build theming and dark mode with them, with copy-paste examples.
CSS Animation Basics: Keyframes, Transitions and When to Use Which
A clear, example-first guide to CSS animation: transitions vs keyframes, the properties that matter, how to loop, and how to keep everything smooth at 60fps.
How to Trigger CSS Animations with JavaScript (and When to Use GSAP)
The reliable ways to start a CSS animation from JavaScript, from toggling a class to the Web Animations API, plus when it's time to reach for GSAP and scroll triggers.
REST API Basics: How REST APIs Work (For Frontend Developers)
What a REST API is, how HTTP methods and status codes work, and how to call one from JavaScript, explained simply for frontend developers.
Git Commands Every Developer Should Know (The Daily 15)
The Git commands you actually use every day, from staging and committing to branching, merging and undoing mistakes, with plain-English explanations.
Web Accessibility Basics: What Every Developer Should Do
A practical intro to web accessibility (a11y): what it is, why it matters, and the concrete things you can do today, semantic HTML, alt text, contrast and keyboard support.
The hover underline that makes any navbar feel premium
A 4-line CSS trick using scaleX and transform-origin that turns a boring link into something that feels intentional.