9 posts tagged with "web-development"

"Rendering" is one of those words that means three different things depending on who you ask. Before we walk the timeline, it helps to separate the layers:

1. The rendering API — the actual function you call (ReactDOM.render, createRoot, renderToString…) to turn a component tree into DOM or HTML.
2. The rendering strategy — where and when the HTML is produced: in the browser, on a server per-request, at build time, etc.
3. The hydration model — how a server-produced HTML page becomes interactive on the client. The post is organized around layer 2 (strategies), because that's where the chronological and simple-to-complex story is richest — but each strategy is tagged with all three: an At a glance box names its rendering API and hydration model too. There's also a short section near the end that lists the API methods on their own, since "render a component" can literally mean those. Each strategy also has a Metrics table in web-vitals shorthand (TTFB, FCP, LCP, TBT, INP, CLS) — every acronym in this post is spelled out in the Glossary at the end.

One honest caveat up front: chronology and complexity mostly line up, but not perfectly. Islands and streaming SSR landed around the same time, for example. I've ordered primarily by conceptual complexity and noted the rough dates as we go.

Every framework, HTTP client, and browser hides the protocol behind a few convenient calls — so most developers never see the request that actually goes over the wire. This post pulls back that curtain: the communication model, the methods, the status codes, and the headers you've been using all along without knowing it.

Online payments sound scary until you look at them from the top down: how the money actually moves, how you're allowed to touch card data, and what the customer is really paying with. This guide builds that mental model one layer at a time.

https://ogp.me/

Testing Open Graph locally is a bit deceptive: your browser can see localhost, but Facebook, LinkedIn, Slack, Discord, X/Twitter, etc. cannot.

The best workflow is:

1. Check the HTML locally
2. Expose localhost with ngrok
3. Test the public URL in real social preview/debugger tools

Chrome plugins are useful for fast feedback, but the final validation should happen through a public HTTPS URL.

Authentication sounds scary until you look at it from the top down: who are you, how do you prove it, and how does the app remember you. This guide builds that mental model one layer at a time.

A top-down tour of Next.js: start from the mental model of the framework as a whole, then drill into the concepts that actually shape how you build with it.

A field guide to the modern frontend ecosystem — the frameworks, tools, standards, and patterns worth knowing about, so you can tell the durable signal from the passing noise.

The Compound Component Pattern has become a popular approach in React for building flexible, reusable components. You'll often see it in two flavors: separate exports (<SelectTrigger />) or dot notation (<Select.Trigger />). But like any pattern, it comes with significant trade-offs. Let's explore both sides.

A one-line-per-concept tour of Next.js — the whole mental model at a glance, from routing to rendering to deployment, with no fluff.