CIDR notation explained for frontend and full-stack developers — private ranges, VPC subnets, localhost quirks, and how to read /24 vs /16 without memorizing the whole CCNA.
By codefunc
Frontend work increasingly touches networks you do not control: a preview deploy on a private VPC, a webhook allowlist, a corporate VPN, or "why is my dev server only reachable on 127.0.0.1?" You do not need to design backbone routing — you do need to read CIDR notation, know private ranges, and tell a /32 from a /16 when someone pastes a security-group rule into Slack.
Bottom line: CIDR (ip/prefix) describes an address plus how many bits are fixed as the network. Smaller prefix numbers mean larger ranges (/16 is huge; /32 is one host). Use an IP Subnet Calculator when you need usable host counts or network/broadcast addresses. Binary helps; you do not have to do it by hand every time.
Frontend and full-stack developers who configure allowlists, Docker/Vite host bindings, cloud preview environments, or office Wi‑Fi debugging — not aspiring network engineers. If you already know VLSM cold, skim the CIDR table and jump to the VPC section.
An IPv4 address is 32 bits, usually written as four decimal octets:
192.168.1.20
Each octet is 0–255 (8 bits). Under the hood that address is a single 32-bit number. Hex and binary views help when you are comparing masks — the Number Base Converter is handy for translating an octet or a full address representation while you learn.
| Form | Example |
|---|---|
| Dotted decimal | 10.0.0.5 |
| Binary (one octet) | 00001010 for 10 |
| Prefix length | /24 means first 24 bits are the network |
CIDR (Classless Inter-Domain Routing) writes:
address/prefix_length
Examples:
| CIDR | Meaning (approx.) |
|---|---|
10.0.0.0/8 |
16,777,216 addresses (10.0.0.0–10.255.255.255) |
10.0.0.0/16 |
65,536 addresses (10.0.0.0–10.0.255.255) |
10.0.0.0/24 |
256 addresses (10.0.0.0–10.0.0.255) |
10.0.0.5/32 |
Exactly one host: 10.0.0.5 |
0.0.0.0/0 |
Everything (default route / wide open allowlist) |
The prefix length is the number of leading bits that identify the network. The remaining bits identify hosts inside that network.
/24 → 255.255.255.0 mask → 8 host bits → 256 addresses
/32 → 255.255.255.255 → 0 host bits → 1 address
/16 → 255.255.0.0 → 16 host bits → 65,536 addresses
In many IPv4 subnets, the first address is the network identifier and the last is broadcast, so usable hosts are fewer than the raw count (classic /24 → 254 usable). Cloud platforms sometimes document this differently for VPC subnets — always check the provider's "usable IPs" note. The IP Subnet Calculator shows network, broadcast, and host ranges for a given CIDR.
RFC 1918 private IPv4 space (not routed on the public internet):
| CIDR | Common use |
|---|---|
10.0.0.0/8 |
Large corp / cloud VPC blocks |
172.16.0.0/12 |
172.16–172.31; Docker bridge defaults often live here |
192.168.0.0/16 |
Home routers, small offices |
Also related:
| Address / range | Role |
|---|---|
127.0.0.0/8 |
Loopback (127.0.0.1 is localhost) |
169.254.0.0/16 |
Link-local (APIPA) |
::1 |
IPv6 loopback |
When a cloud console says "VPC CIDR 10.10.0.0/16" it means all resources in that VPC share addresses from that block, usually carved into smaller subnets (10.10.1.0/24, 10.10.2.0/24, …).
Typical cloud pattern:
VPC 10.0.0.0/16
├── public subnet 10.0.1.0/24 (load balancers)
├── private subnet 10.0.2.0/24 (app tasks)
└── data subnet 10.0.3.0/24 (databases)
Why you care as a frontend/full-stack developer:
| Situation | CIDR literacy helps you… |
|---|---|
| Webhook allowlists | Understand why 10.0.2.0/24 was added instead of a single IP |
| Preview environments | Know that 0.0.0.0/0 on a security group is "the world" |
| VPN-only admin UIs | Recognize you must be inside 10.0.0.0/8 (or connected via VPN) |
| SSR server fetch to internal API | Use internal DNS/IPs; public URL may not resolve inside the VPC |
| "Works on my machine" | Your laptop 192.168.x.x is not the VPC 10.x |
Binding a Vite/Next/webpack dev server:
| Bind address | Who can connect |
|---|---|
127.0.0.1 |
Only your machine |
0.0.0.0 |
Other devices on the local network (and sometimes more — be careful) |
LAN IP 192.168.1.20 |
Explicit interface |
Phone testing against your laptop usually needs the LAN IP and a firewall rule, not localhost on the phone (that would be the phone itself).
Docker: containers often sit on 172.16.0.0/12-ish bridges. localhost inside a container is not your host — use host.docker.internal or service names depending on the stack.
Host bits = 32 - prefix.
| Prefix | Host bits | Total addresses |
|---|---|---|
| /32 | 0 | 1 |
| /31 | 1 | 2 (special pair; rare in app docs) |
| /30 | 2 | 4 |
| /24 | 8 | 256 |
| /20 | 12 | 4,096 |
| /16 | 16 | 65,536 |
| /8 | 24 | 16,777,216 |
Powers of two are enough: each time the prefix shrinks by 1, the range doubles. Use the Number Base Converter if you want to see 255 as 11111111 while building intuition; use the IP Subnet Calculator when you need exact ranges for a ticket.
IPv6 addresses are 128 bits; CIDR still applies (2001:db8::/32). Many apps today still allowlist IPv4 only — if users are on IPv6, dual-stack or "allowlist the reverse proxy" matters more than memorizing nibble boundaries. Same idea: longer prefix = smaller network.
Read a.b.c.d/n as "first n bits fixed." Remember RFC 1918 private blocks, treat /32 as one host and /0 as everyone, and verify ranges with the IP Subnet Calculator before you paste CIDRs into cloud allowlists. For binary intuition on octets, keep the Number Base Converter nearby. You rarely need to design subnets — you need to stop confusing localhost, LAN, and VPC space.
A complete guide to cron syntax — the five fields, special characters, real-world examples, and the timezone, day-of-week, and non-standard pitfalls that silently break schedules.
Get Content-Type right for APIs, file uploads, and static assets — charset parameters, multipart boundaries, sniffing risks, and a practical MIME lookup workflow.
Named and numeric HTML entities, when to encode, XSS pitfalls, and how entity lookup pairs with MIME awareness when pasting content into HTML and email.
Find a developer tool