Understanding Computer Networks from a Front-End Developer's Perspective: Series Guide

As a front-end developer, you deal with networking every day — fetch for requests, WebSocket for persistent connections, npm install for dependencies. But have you ever wondered: after you press Enter in the browser's address bar, what actually happens to the data?

This series aims to dissect computer networking layer by layer, from the bottom up, through the lens of a front-end developer. We don't aim to cover everything — we focus on the key concepts that let you truly understand how data flows.

The series is organized by the classic network layering model. It's recommended to read from the bottom layer upward:

The moment you connect to Wi-Fi, your laptop joins a local area network. How do devices on the same network find each other? What format does data take? What role does the switch play?

Start here — this is the first piece of the networking puzzle.

Given an IP, how do you find the corresponding MAC? The mechanics of the ARP protocol.

LAN communication stops at the router. Why can't MAC addresses directly power the Internet? What's the fundamental difference between a switch and a router? Why do we need an entirely new addressing system?

As an aside: how does your home broadband actually "dial up"? Why does PPPoE still exist in the fiber era?

Within a LAN, communication relies on MAC. But the Internet spans the globe — how do data packets find their destination IP through countless routers?

How does IP's hierarchical structure actually work? Subnet masks, CIDR, and subnet checks — these concepts determine every "direct connect or go through gateway" decision your computer makes.

And after the packet reaches the gateway? Routing tables, longest prefix matching, hop-by-hop forwarding, default routes — the complete mechanism by which data traverses the Internet.

How are IP addresses allocated and managed? From IANA to ISP to your home router.

IP only promises "best-effort" delivery — but the network can lose packets, reorder them, or become congested. Who handles these issues?

Understand the three-way handshake, sliding windows, and congestion control from the ground up.

Not all data needs reliable delivery. Real-time audio/video, DNS queries, online gaming — in these scenarios, low latency matters more than reliability. UDP is TCP's sibling at the same layer, with a diametrically opposed design philosophy.

From the 8-byte header to QUIC — why "send and forget" is sometimes the right call.

TCP's congestion control relies on packet loss — but loss is a late signal. Google's BBR directly measures bottleneck bandwidth and RTT, fundamentally solving the bufferbloat problem.

Measure BtlBw and RTprop, saturate the pipe without loss — the modern evolution of transport-layer congestion control.

When you log into a website and enter your password, is your data traveling naked over the public Internet or encrypted?

The complete story behind that little green padlock in HTTPS.

With the foundation of the first four layers, application-layer protocols like HTTP, WebSocket, and RPC will no longer feel like fuzzy magic.

But before you can visit any domain, there's one more essential step — translating the name into an IP. DNS is the internet's phonebook and the first link in every HTTP request chain.

Hierarchical namespace, recursive vs. iterative queries, caching & TTL.

DNS queries are plaintext by default — anyone can see which websites you visit. DoH and DoT encrypt DNS, protecting your browsing privacy.

DNS-over-HTTPS vs DNS-over-TLS: which is more secure? Which is faster?

From single-line text to persistent connections — the three-generation evolution of HTTP.

HTTP/1.1 introduced caching mechanisms (Cache-Control, ETag), but only scratched the surface. These two articles systematically break down the HTTP caching system:

max-age, no-cache vs no-store, ETag, Last-Modified — the complete browser cache decision tree.

s-maxage for CDN/browser differentiation, stale-while-revalidate async refresh, Vary response differentiation, Service Worker Cache API offline strategies.

Binary framing, multiplexing, header compression, server push — the most significant HTTP upgrade in 18 years.

From refreshing pages on a timer to full-duplex real-time communication.

How services call each other, from REST to gRPC.

A protocol you use every day but may not truly understand.

Front-end developers with experience but unsystematic networking fundamentals. Those curious about "how data actually travels." Those who want understanding, not memorization.

People studying for certifications — this series doesn't cover every exam topic. People doing low-level network development — we focus on understanding, not implementation.

Each article stands alone, but reading in roadmap order is recommended. Short on time? Prioritize: MAC/LAN → Bridge → IP/Routing → TCP/UDP → BBR → TLS → DNS → HTTP 1.1 → HTTP Caching → HTTP/2 — this chain forms the core networking knowledge most relevant to daily front-end development.

Cover image from a network meme. Salute to everyone who fell asleep during their computer networking class.