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.
Domains
The guides are split across domains. The "Docs" menu in the header uses the same split. Each domain page lays out the reading order and the prerequisites for the guides it holds.
| Domain | What it covers | Main guides |
|---|---|---|
| Fundamentals | The layers that run underneath the frameworks — groundwork that cuts across disciplines | Web Engineering Fundamentals Guide |
| Programming languages | The language spec itself, from variables and functions through to the type system | JavaScript Guide / TypeScript Guide |
| Design and quality | How code is written and structured, from naming and splitting functions to a catalog of design patterns | Clean Code Guide / SOLID Principles in Depth / TypeScript Design Patterns |
| Frontend | Building UI, styling, and component design | React Guide / Vue Guide / Tailwind CSS Guide / shadcn/ui Button |
| Backend | Designing business logic, persisting data, and building APIs | Database Design Guide / PHP Class Design Guide / Laravel API Development Guide / Laravel × DDD × Clean Architecture / PayloadCMS Guide |
| AI and agents | How a harness works, and how to design one that holds up at a scale of dozens of files | Claude Code Harness Engineering Guide / Rebuilt with Faceted Prompting |
| Infrastructure and operations | Building and operating infrastructure | AWS Practical Guide |
| Other | Site guidance, and guides too few in number to warrant their own domain | Structured Data Implementation Guide / Markdown syntax reference |
A path that climbs from the foundations of the language up to design. It covers the series listed here; for the full picture of what is published, see the domain table above.
| 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" |
| Vue Guide (the Japanese original for now) | Framework | Beginner to intermediate | HTML/CSS + JS basics | "Why destructuring a ref breaks it" |
| 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 or the Vue 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.
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 @sanfu_dev.