The Browser Rendering Pipeline Explained: From HTML to Pixels
“You write HTML and CSS. The browser’s job is to somehow turn them into pixels. What happens in between is one of the most important things ...
Sep 12, 2026
![First Post](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><linearGradient id="gFirst" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%238b5cf6" /><stop offset="100%" stop-color="%23ec4899" /></linearGradient><filter id="fFirst"><feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.3"/></filter></defs><circle cx="50" cy="50" r="45" fill="url(%23gFirst)" filter="url(%23fFirst)"/><circle cx="50" cy="50" r="38" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2"/><path d="M60 30 C 50 30, 40 40, 35 55 L 30 70 L 45 65 C 60 60, 70 50, 70 40 C 70 35, 65 30, 60 30 Z" fill="%23ffffff" opacity="0.9"/><path d="M35 55 L 45 65" stroke="%23ec4899" stroke-width="2"/><circle cx="65" cy="25" r="3" fill="%23fef08a"/><path d="M65 15 L65 20 M65 30 L65 35 M55 25 L60 25 M70 25 L75 25" stroke="%23fef08a" stroke-width="2" stroke-linecap="round"/></svg>)
![Weekend Warrior](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><linearGradient id="gWknd" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%231d4ed8" /><stop offset="100%" stop-color="%2360a5fa" /></linearGradient><filter id="fWknd"><feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.3"/></filter></defs><circle cx="50" cy="50" r="45" fill="url(%23gWknd)" filter="url(%23fWknd)"/><circle cx="50" cy="50" r="38" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2"/><path d="M30 30 C 50 20, 50 20, 70 30 L 70 50 C 70 70, 50 80, 50 80 C 50 80, 30 70, 30 50 Z" fill="%23ffffff" opacity="0.9" filter="url(%23fWknd)"/><rect x="40" y="45" width="20" height="20" rx="2" fill="%231d4ed8"/><rect x="40" y="45" width="20" height="5" fill="%23bfdbfe"/><line x1="45" y1="42" x2="45" y2="48" stroke="%231e3a8a" stroke-width="2"/><line x1="55" y1="42" x2="55" y2="48" stroke="%231e3a8a" stroke-width="2"/></svg>)
11 min
Subscribe to Billy Okeyo's Newsletter
Get new articles and engineering posts delivered to your inbox.
Re-Renders Explained: What Actually Happens When Frontend State Changes
One of the most common pieces of advice in frontend development is: Avoid unnecessary re-renders. You hear it when working with React, when ...
Sep 12, 2026
17 min