Frontend
Technical notes from the frontend domain, covering frameworks, engineering, styling, performance and browser internals, continuously updated along with learning.
Collected
- Vue 3 — Composition API, reactivity internals, ecosystem selection
- React — Core concepts, Hooks, state management
- Build Tools — Vite, Webpack and engineering configuration
- Styling — Tailwind / UnoCSS, modern CSS features
- Testing — Vitest, component testing and E2E
Planning Checklist
| Topic | Description | Status |
|---|---|---|
| Vue 3 | Reactivity internals, Composition API, ecosystem (Pinia/Router/VueUse) | Planned |
| React | Hooks mental model, concurrent features, state management selection | Planned |
| Angular | Modular architecture, dependency injection, RxJS reactive programming | Planned |
| Svelte | Compile-time framework, fine-grained reactivity, SvelteKit full-stack | Planned |
| Astro | Content-first island architecture, static site generation | Planned |
| TypeScript practices in engineering | Type gymnastics, advanced generics, engineering constraints | Planned |
| Build tools | Vite plugin mechanism, Webpack internals, code splitting and caching | Planned |
| Styling | Tailwind / UnoCSS, CSS Modules, design tokens | Planned |
| Performance optimization | Rendering performance, bundle size, first-screen metrics (LCP/INP) | Planned |
| Browser internals | Rendering pipeline, event loop, storage and security | Planned |
| Micro-frontends and architecture | Module Federation, Monorepo organization | Planned |
| Testing | Unit/component/E2E testing strategies | Planned |
| Frontend security | XSS, CSRF and dependency supply chain security | Planned |
Writing Guidelines
- Each article focuses on one technical point and includes "Core Concept → Code Example → Common Pitfalls → Reference Links";
- Code examples must be runnable and state the applicable version;
- File names use kebab-case (e.g.
vue-reactivity.md), and new files should be registered in theconfig.mjssidebar.