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 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
React Guide (30 chapters)
A 30-chapter guide that teaches modern React development (Vite + TypeScript + Tailwind CSS) systematically from the ground up.
- React Guide — 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)
| Series | Focus | Level | Prerequisites | Example |
|---|---|---|---|---|
| JavaScript Guide | Language spec (JS) | Beginner | None | "Arrow functions and this behavior" |
| TypeScript Guide | Language spec | Beginner to intermediate | JS basics | "How to use Mapped Types" |
| React Guide | Framework | Beginner to intermediate | HTML/CSS + JS basics | "useEffect's dependency array" |
| Tailwind CSS Guide | CSS styling | Beginner to intermediate | HTML/CSS basics | "Adding colors with @theme" |
| Clean Code Guide | Design standards | Intermediate and up | TS basics | "Replace any with unknown + type guards" |
| TypeScript Design Patterns | Design catalog | Intermediate and up | TS + OOP basics | "Is a function enough for Strategy?" |
The guides are complementary. Build your language foundation with the JavaScript Guide and learn the language spec with the TypeScript Guide. On top of that, build your UI with the React Guide and polish your styling with the Tailwind CSS Guide. Raise your code quality with the Clean Code Guide, then widen your design options with TypeScript Design Patterns. That is the intended learning path.
Clean Code Guide (13 articles)
A collection of guides for writing clean code systematically in TypeScript.
- 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
TypeScript Design Patterns (16 chapters)
A guide that revisits the 23 GoF patterns from the perspective of modern TypeScript. Each chapter judges whether a language feature can take the pattern's place, and lists the conditions under which writing it as a class still pays off.
- TypeScript Design Patterns — creational / structural / behavioral, plus Repository (outside GoF) and a summary
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.
Claude Code Harness Engineering Guide (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 @rasshii1104.