yuvadm/cidr.xyz

Web-based CIDR / netmask / IP address visualizer

cidr.xyz

Web-based CIDR / netmask / IP address visualizer - https://cidr.xyz

Dev

Install dependencies and run the development server:

$ yarn
$ yarn run start

Build

Manually building the static content into the dist/ directory can be done with:

$ yarn run build

Docker

You can build a Docker Image from an included Dockerfile and run it as a container:

docker build -t cidr.xyz:0.1 .
docker run -d --rm -p 80:80 cidr.xyz:0.1

Deployment

Deployment is automated from master branch via Netlify

cidr.xyz's Issues

Advance to next field when typing '.' key

When entering an IP address I naturally hit the . key between the octets. It would be nice if the . key acted like a tab press and advanced to the next box.

First and Last IP are wrong for certain values

For example the address 10.88.135.144 / 30
Count correctly shows 4
But First IP is showing as 10.88.135.145 and Last IP is 10.88.135.146

They should be First IP: 10.88.135.144 and Last IP: 10.88.135.147

It looks like First IP is often +1 and Last IP is often -1 of what they should be.

Add arrow up/down behavior

It would be nice if arrow up/down (and maybe even mouse scroll up/down) in the text fields will translate to value increment and decrement

Improve accessibility for visually impaired viewing

I ran the site through an accessibility tool and it gave a pretty good score, but there are three things that can be improved.

• The input fields need labels that can be announced if using a screen reader
• The masked binary bits are white on gray which fail the contrast test
• The labels on the output IP's just barely fail the contrast test

The white on gray bit fields are not indicated on this screenshot, but an alternate view reported them.

Proposed changes:

• Just add aria-label properties like octet1-4 and mask size to the input fields.
• The zero bit masks just stick to black like the mask input field. The gray background should still make it clear it is in the host mask part.
• The tool suggested just slightly darken the font color from #777799 to #656582 on the output IP labels.

AccessibilityInsights FastPass is the tool I used.

Issue in corner cases

I was using your calculator and according to it the first usable IP for 10.88.135.145/28 (default value) is 10.88.135.145 when should be 10.88.135.144.

Actually, if you use 10.88.135.145/28 as a input CIDR you retrieve 10.88.135.145 as a first usable IP.

I hope it help!

A section for calculating number of subnet based of host size per subnet

@yuvadm Can we have a section for calculating several subnets based on host size per subnet? If yes, then I can take that up and raise a PR for that.

yarn killed during build in alpine docker container

I was trying to run this project under an alpine image in docker. As soon as I run the yarn command, following output is produced, and the program is killed. In mac-OS the same command runs perfectly, so the issue might be that some dependencies may not be compatible with linux/alpine system? Or it maybe a yarn issue? I am not well versed in yarn or webpack, and was wondering if there is another way to build this project?

/var/www/localhost/code # ls
README.md          docs               node_modules       package-lock.json  package.json       src                webpack.config.js  yarn.lock
/var/www/localhost/code # yarn
yarn install v1.5.1
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
[1/1] ⡀ node-sass
[-/1] ⡀ waiting...
[-/1] ⡀ waiting...
[-/1] ⡀ waiting...
[-/1] ⢀ waiting...Killed
/var/www/localhost/code # 

Incorrect results for cases like 0.0.0.0/30, 0.0.0.4/30

Looks like in some cases starting and ending IP addresses are excluded, and inconsistent result is returned, e.g. there starting IP is output as 0.0.0.5 and ending as 0.0.0.6 - which is 2 different IPs - but count is 4. This is for 0.0.0.4/30 - pretty sure starting IP should be 0.0.0.4 and ending 0.0.0.7.

See also screenshots:

Update all dependencies and remove security vulnerabilities

An easy contribution for new developers for https://hacktoberfest.digitalocean.com

Feature request for IPv6 CIDR ranges

Please include feature to calculate and split IPv6 CIDR ranges.

Modernize react code base

Since lots of the code is starting to age, it would be great if we could modernize the codebase to work with the latest react releases and best practices.

This issue is up for grabs if anyone wants to tackle, preferably someone with more frontend / react experience than me.

No easy way to copy-paste CIDR in and out

Feature to paste CIDR range

It would be nice have option for copied CIDR range to be pasted in the text box in the cidr.xyz.

Feature request - CIDR input steper

Hi, this has become my favourite calculator.

The problem I'm trying to solve is what is the CIDR for this IP range 10.x-10.y as Network technicians typically are lazy and use - ranges instead of CIDR subnets - because they don't understand bitmasks in networking 101 or other reasons IDK.

If CIDR had a stepper that let me scroll down from 32->0 then I could check the end usable IP and know the CIDR ranges to give to real network engineers who aren't so lazy :)

Incorrect range

Tested with 10.5.5.240/28, which incorrectly gives:

NETMASK: 255.255.255.240
FIRST IP: 10.5.5.241
LAST IP: 10.5.5.254
COUNT: 16

It should be: Start IP: 10.5.5.240 End IP: 10.5.5.255

Please make cidr website responsive

The cidr website is almost not usable on a smartphone. Bad when trying things out and you are not using a Desktop computer. Please make site responsive.

HTTPS certificate invalid

Hi there!

First off: Thanks for creating this! With the help of your tool I finally understood CIDR blocks. :)

But when I tried to use the tool, I was greeted with this today:

Seems like the site's certificate has become invalid:

Favicon for the website

Error in IP address description

IP addresses contain 4 octets, each consisting of 8 bytes giving values between 0 and 255

should be

IP addresses contain 4 octets, each consisting of 8 bits giving values between 0 and 255

netmask

when setting the to 0 bits sets for the net mask (/0) net mask is displayed as 255.255.255.255(/32)

Unintuitive results for "first usable IP"

Hi, first off, I love this website, thank you so much for making it. I use it to explain CIDRs to junior engineers or engineers without a networking background and it really helps them "get it".

For example the CIDR 200.88.135.144/4, your calculator says the first IP is 192.0.0.1

But I think the first IP address should be 192.0.0.0, as that is the lowest IP address that matches the 1,1,0,0 4-bit prefix. Other CIDR calculators e.g. https://www.ipaddressguide.com/cidr or the Rust ipnetwork crate agree with me.

I see you're using the NodeJS netmask package for calculating first/last IPs. So I guess the issue is in the library. According to this great StackOverflow question it comes down to whether .0 IPs are really "usable" as some hardware reserves them for the "network ID" and doesn't consider them "real" IPs that devices can use.

The only reason I bother to go into this much detail is that I frequently use your website for teaching purposes, and to help generate unit tests for code which deals with CIDRs. Maybe the UI could be updated to differentiate between the "usable" IPs and the IPs in the CIDR? I certainly found the differences between different IP calculator websites/libraries confusing.

Feature to load CIDR related info like CIDR Class

It would be more helpful to use UI realestate by showing some CIDR related information at the bottom as we type CIDR in the text box, bottom of the screen if you can dynamically load info about CIDR Class info, if any restrictions applicable for the specified CIDR ..etc

Responsive view

The current view looks horrible on small devices. It could be great to have an interface that looks reasonable well on mobile / small screen devices.

Netlify CI / CD failing - Unsupported build image

Netlify removed support for Ubuntu 16.04 Xenial Xerus build image on 15th November 2022. Refer https://answers.netlify.com/t/please-read-end-of-support-for-xenial-build-image-everything-you-need-to-know/68239

@yuvadm can you please fix the same via https://app.netlify.com/sites/cidr/settings/deploys#build-image-selection ?

ugh thank you for this

There is no issue, just thank you.