Coder Social home page Coder Social logo

visualsubnetcalc's Introduction

Visual Subnet Calculator - visualsubnetcalc.com

demo.gif

Visual Subnet Calculator is a modernized tool based on the original work by davidc. It strives to be a tool for quickly designing networks and collaborating on that design with others. It focuses on expediting the work of network administrators, not academic subnetting math.

Design Tenets

The following tenets are the most important values that drive the design of the tool. New features, pull requests, etc should align to these tenets, or propose an adjustment to the tenets.

  • Simplicity is king. Network admins are busy and Visual Subnet Calculator should always be easy for FIRST TIME USERS to quickly and intuitively use.
  • Subnetting is design work. Promote features that enhance visual clarity and easy mental processing of even the most complex architectures.
  • Users control the data. We store nothing, but provide convenient ways for users to save and share their designs.
  • Embrace community contributions. Consider and respond to all feedback and pull requests in the context of these tenets.

Building From Source

If you have a more opinionated best-practice way to lay out this repository please open an issue.

Build prerequisites:

  • (Optional but recommended) NVM to manage node version
  • node.js (version 20) and associated NPM.
  • sass (Globally installed, following instructions below.)

Compile from source:

# Clone the repository
> git clone https://github.com/ckabalan/visualsubnetcalc
# Use recommended NVM version
> nvm use
# Change to the sources directory
> cd visualsubnetcalc/src
# Install Bootstrap
> npm install
# Compile Bootstrap (Also install sass command line globally)
> npm run build
# Run the local webserver
> npm start

The full application should then be available within ./dist/, open ./dist/index.html in a browser.

Run with certificates (Optional)

NB: required for testing clipboard.writeText() in the browser. Feature is only available in secure (https) mode.

#Install mkcert
> brew install mkcert
# generate CA Certs to be trusted by local browsers
> mkcert install
# generate certs for local development
> cd visualsubnetcalc/src
# generate certs for local development
> npm run setup:certs
# run the local webserver with https
> npm run local-secure-start

Cloud Subnet Notes

Standard mode:

  • Smallest subnet: /32
  • Two reserved addresses per subnet of size <= 30:
    • Network Address (network + 0)
    • Broadcast Address (last network address)

AWS mode :

  • Smallest subnet: /28
  • Five reserved addresses per subnet:
    • Network Address (network + 0)
    • AWS Reserved - VPC Router
    • AWS Reserved - VPC DNS
    • AWS Reserved - Future Use
    • Broadcast Address (last network address)

Azure mode :

  • Smallest subnet: /29
  • Five reserved addresses per subnet:
    • Network Address (network + 0)
    • Azure Reserved - Default Gateway
    • Azure Reserved - DNS Mapping
    • Azure Reserved - DNS Mapping
    • Broadcast Address (last network address)

Credits

Split icon made by Freepik from Flaticon.

License

Visual Subnet Calculator is released under the MIT License

visualsubnetcalc's People

Contributors

ckabalan avatar karldreher avatar byroncollins avatar supermathie avatar purplebabar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.