Search

Lessons (23)

• How Browsers Render a Page

  … Stack the floors together ( composite ). ![The critical rendering path: from HTML and CSS to pixels](/img/frontend/rendering …

• React Hooks in Practice

  … reference a DOM node const renderCount = useRef(0); // 2. mutable value that survives renders renderCount.current++; return ( < <input …

• Next.js Rendering: CSR, SSR, SSG, ISR & Server Components

  Where and when is your HTML created? Compare client-side, server-side, static and incremental rendering, plus React …

• Frontend Performance & Core Web Vitals

  … render only the ~20 visible rows (TanStack Virtual, react-window) Context updates re-render everything Split contexts, or …

• React Fundamentals

  … Learn to think in React, with a picture of how renders and reconciliation actually work. The big idea …

• Frontend Testing Strategy

  … 201 })), ]; tsx it("lists products from the API", async () = { render(<ProductsPage / ); expect(await screen.findByText("Keyboard")).toBeInTheDocument(); // findBy …

• MVC, MVP & MVVM

  … only rendering function LoginForm() { const vm = useLoginViewModel(); return ( <form onSubmit={(e) = { e.preventDefault(); vm.submit(); }} <input value={vm …

• Microkernel (Plugin) Architecture

  … string; / Transform the rendered HTML (optional hook) / afterRender?(html: string): string; } 2. The core: registry + lifecycle ts // core …

• Structural Patterns: How to Connect Objects

  … Shapes hold a reference (the bridge) to a renderer class Circle { constructor(radius, renderer) { Object.assign(this, { radius …

• Creational Patterns: How to Make Objects

  … both come from the same factory return [uiFactory.createInput(), uiFactory.createButton()].map((c) = c.render()).join(""); } buildLoginForm(prefersDark …

• State Management (Redux, Zustand, TanStack Query)

  … Select only what you use to avoid extra renders: const count = useCartStore((state) = state.items.length); const add …

• JavaScript Essentials: Event Loop, Closures & this

  … every render's handlers close over that render's props and state The classic loop bug js // ❌ var …

• React vs Vue vs Angular

  … notified] -- A3[update affected views] end - React re-renders the component and diffs the result. Simple mental model …

• Small Functions That Do One Thing

  … Split it into renderForPrint() and renderForScreen() . Avoid hidden side effects A function called checkPassword() should only check . If …

• S — Single Responsibility Principle

  … to React components too. jsx // ❌ Fetching + state + formatting + rendering in one component function UserProfile({ id }) { const [user, setUser …

• Comments & Formatting

  … const html = render(article); return save(html); } function validate(article) { / … / } // details, in call order function render(article) { / … / } function …

• N+1 Queries, Loading & Pagination

  … Ask which fields the endpoint truly renders. Offset versus cursor pagination Offset asks the database to walk past …

• Deploying & Operating Microservices

  … user.country })) { return renderNewCheckout(); } return renderOldCheckout(); mermaid flowchart LR D["🚀 Deploy<br/ (code is in production, flag off …

• Helm, kubectl Cheat Sheet & Best Practices

  … a chart plus values renders into Kubernetes manifests](/img/kubernetes/helm.svg) Helm term Meaning npm analogy --- --- --- Chart …

• O — Open/Closed Principle

  … Plugins and loaders React Components via children and render props ESLint Custom rules None of these tools need …

• Why Kubernetes?

  … Vercel, Render, Railway,<br/ Fly.io, Heroku, Cloud Run"] Q1 -- many Q2{Team to operate it?} Q2 -- no …

• Behavioral Patterns I: Observer, Strategy, Command, State

  … EventEmitter , RxJS, Redux store.subscribe , React state → re-render, Kafka and message queues at a system level. ⚠️ Always …

• TypeScript Essentials

  … T }; function render(state: RequestState<User[] ) { switch (state.status) { case "loading": return "Loading…"; case "error": return Error: ${state …