Introduction
Welcome to the documentation section of Reinvent Notes.
Here you will find references and guides organized more systematically than the blog posts. The defining trait is that they are organized by topic rather than chronologically.
Main topics
Getting Started
- Local development environment — steps for running this site locally
JavaScript fundamentals guide (11 chapters)
An 11-chapter guide that teaches the fundamentals of JavaScript systematically, from variables to asynchronous processing.
- JavaScript Guide — variables and constants / data types / conditionals / loops / functions / objects / arrays / DOM manipulation / event handling / asynchronous processing / best practices
TypeScript Guide (21 chapters)
A 21-chapter guide that teaches TypeScript systematically, from the language spec to practice.
- TypeScript Guide — getting started / basic types / functions / classes / advanced types / generics / development environment / practice
Introduction to React (29 chapters)
A 29-chapter guide that teaches modern React development (Vite + TypeScript + Tailwind CSS) systematically from the ground up.
- Introduction to React — groundwork / React basics / Hooks / UI styling / state management and data fetching / advanced topics / capstone exercises / full stack
Tailwind CSS Guide (18 chapters)
An 18-chapter guide that teaches Tailwind CSS v4 systematically, from the basics to practice.
- Tailwind CSS Guide — basics / layout / styling / responsive design and interaction / advanced topics (through building a SaaS landing page)
| Axis | TypeScript Guide | Introduction to React | Tailwind CSS Guide | Clean Code |
|---|---|---|---|---|
| Focus | Language spec | Framework | CSS styling | Design standards |
| Level | Beginner to intermediate | Beginner to intermediate | Beginner to intermediate | Intermediate and up |
| Prerequisite | JS basics | TS + JS | HTML/CSS basics | Any language |
| Example | "How to use mapped types" | "The dependency array of useEffect" | "Adding colors with @theme" | "Replace any with unknown + type guards" |
The four guides are complementary. Solidify types with the TypeScript Guide and assemble your UI with Introduction to React. Then polish your styling with the Tailwind CSS Guide and raise your code quality with Clean Code — that is the intended learning path.
Clean Code (TypeScript)
A collection of guides for writing clean code systematically (13 articles).
- Introduction — what clean code is, and why it matters in TypeScript
- Naming conventions 1: case conventions, variables, and constants — choosing among the four case conventions, and naming variables, booleans, and constants
- Naming conventions 2: functions and classes — naming functions with verb patterns, class name suffixes
- Naming conventions 3: improving naming quality — pronounceable names, consistent synonyms, criteria for abbreviations
- Comments — write the Why, let the code express the What
- Defining variables — no magic numbers, prefer const, minimize scope
- Defining functions — single responsibility, pure functions, early returns
- Loops — choosing among forEach, map, filter, and reduce
- Conditionals — early returns, discriminated unions, polymorphism
- Classes and interfaces — single responsibility, encapsulation, composition
- TypeScript-specific best practices — no any, leveraging unknown, generics
- SOLID principles — the five principles with TypeScript examples
- Summary — the big picture and a checklist
Designing a Design System with the shadcn/ui Button (13 chapters)
Targets React 19 / Tailwind CSS v4 / the latest shadcn/ui. A guide that uses the Button to teach design tokens, cva, cn, and Radix Slot.
Structured Data Implementation Guide (4 chapters)
A systematic guide to implementing JSON-LD structured data based on the official specs of Google Search Central and schema.org.
Introduction to Claude Code Harness Engineering (17 chapters)
A guide that follows the execution flow to show how Claude Code's skills, rules, memory, hooks, and MCP work together.
Reference
- Markdown syntax reference — the Markdown / Docusaurus extended syntax usable on this site
Blog vs. Docs
| Blog | Docs | |
|---|---|---|
| Axis | Chronological | Systematic / topic-based |
| Intended reader | People who want to follow what is happening | People who want to look up a specific topic |
| Update frequency | Irregular, frequent | Updated as needed |
Latest blog posts
Chronological updates are gathered on the Blog. Find the latest topics (harness engineering, domain overhaul, and so on) there.
Site search
You can run a full-text search across the site from the search icon at the top right of the header. It supports Japanese as well.
Feedback
At the bottom of each blog post there is a Tweet your thoughts on 𝕏 button. Feel free to share your impressions, point out mistakes, or send opinions about an article. Feedback on the Docs is also welcome on X (Twitter) at @tekuteku_1104.