DEV Community: Mohit

Networking Concepts for Software Developers 101

Mohit — Thu, 13 Aug 2026 04:09:06 +0000

When I started my development journey to build Web & Mobile Apps, there were always corners of the topic that made me clueless about how things work under the hood in real-world applications. There is so much going on in the background that we miss as developers, and I personally think it's way better to know the concepts than to just be a code junky.

In this writeup, you will be learning a lot about how Networking plays a crucial role in hosting and running real-world applications. Also, you will be able to understand things from a security standpoint as we go deeper into the concepts of each node of this writeup.

IP Address

There can't be a better topic to start with than IP addresses when we talk about networking; IPs are the first & last thing that you will see while maintaining an application’s environment. There is a lot to know about each topic, so I have covered just enough points that can raise your confidence in front of a Network dude.

When we talk about an IP Address, think of it as a phone number, i.e. unique in an environment & can be used as a communication address. Almost every machine connected to a network is having and IP address, but we can't just randomly assign any IP address to any machine.
Types of IPs are used to build a fault-tolerant network environment that can scale up & down depending on the demand & usage.

IP Classes

IP addresses are divided into multiple classes & knowing which class it belongs to is necessary when you are deploying apps that run between multiple environments.

A great example would be music streaming apps that are available on multiple devices for the same user, such as Spotify and Amazon Music, where you can access the same stream over the Web, Mobile, and Smart Home Devices. We’ll go more deeply into a real-life example later.

The diagram above shows a drill-down view of IP Classes in Public & Private IPs. Please note that you don't have to remember these classes, divided further into Public and Private.
It's easier to remember once you know the difference between the IP Ranges they fall into.
IP Classes for Private Range are something that you have seen mostly in your Personal Devices, Smart Home Devices, and Home Network Devices.

-Private Range having Class A is used mostly in Big Corporate Networks, as it can easily manage a high number of network devices for building a personal scalable network.

Private ranges having Class B are also used in Corporate Networks, but these can also be used in a Isolated Network Envirement to keep things clean.
Private ranges having Class C are the most common range of IPs; these are used in devices that are sitting at the bottom of the private network structure. Such as your Laptop and Smartphone connected to your Home Broadband Router, which is later connected to the ISP Network environment. In this whole mesh of structure, personal devices always fall at the last as they are the last point of packet flow.

That's why you always see IPs starting from 192.168.x.x in your Laptop, Smartphones, smart TVs, etc.

Now, if we talk about the Public IP range, things get a bit different as we have a limited reserved range of Public IP addresses; hence, these are used where the network mesh needs external network exposure, or you can say Internet Connectivity.

-A Great example would be a Cloud KVM instance; the user will be accessing that KVM from anywhere in the world. For that to be possible, KVM will be given a Public IP, which will be an Internet address for that KVM and its users.
You can also look up your Public IP, which is given by your ISP.

-Please note that the Public IP is assigned to your home Router and not your personal machine. However, it doesn't mean that the Public IP will be reserved forever for that machine or your home router; it will be dynamic in 99% of cases and will change in the next 10–15 minutes.

Dynamic & Public IPs

The above example covers a scenario where the Public IP keeps changing; that is because owning a static Public IP includes charges that are paid to keep the IP static. The same thing is configured in Private networks as well to maintain security standards. The more frequently something is accessed by users, the higher the chances of Risk; however, the ratio of Private Dynamic IPs will always be low, as they are already plenty enough and they don't cost anything to use.

Domain Name System

Once IP Addresses are assigned to devices, it is hard to remember the whole IP address that belongs to a certain device; this is where DNS comes into action. The way DNS works is quite simple; think of it as a service that converts a request into a different readable format.

In our case, it can be a Webpage request that comes from a browser requested by a user, which is later resolved by many possible DNS services sitting in between the network.
In most cases, if you visit a Webpage very often, the resolved DNS for a webpage is stored in the browser cache for a fast response.
If the request is fresh, DNS services sitting in possible places such as your home router and the ISP’s DNS itself help in resolving the DNS. Please note that these DNS services are spread over multiple points in the network.
Let's say you are on a Cellular Network on your phone; the DNS servers sitting in your Network Service Provider get activated; these are real physical DNS servers that are doing their job for multiple requests in that same Network Service Provider.

-Apart from these DNS services, we also have some famous DNS service providers such as Cloudflare and Google DNS. Big tech uses a set of providers to tackle high user activity.

Ports

There are a total of 65,536 ports that exist, but you don't have to worry about remembering each port and which services it belongs to. In practice, you will be dealing with a bunch of ports that are used for standard services, mainly in Applications & Microservices, where the port enables us to separate the flow of data in the existing entity.

-For example, if an application needs to handle user data & Web requests through the webpage, it will need to separate those requests in order to redirect that request to a related service.
-That webpage request will be handled by port 443, where HTTPS requests will pass through, and data fetching from SQL tables will be done through the standard MySQL port 3306.

Think of it as an office building with multiple floors; if a parcel has to be delivered to a guy sitting on the 4th floor, the delivery guy needs the floor number, else he will have to search the entire building to deliver.

Read the full blog for free here : https://medium.com/javascript-in-plain-english/networking-concepts-for-software-developers-101-c6d9c0ecb9af

Working With the Float Property in CSS

Mohit — Sun, 01 Aug 2021 16:44:28 +0000

Float is a CSS positioning property, after the introduction of Flexbox in CSS, developers don’t really work much with the float property, but there are still millions of websites where floats are used. In case, you are maintaining such websites you need to know about the Float property.
To understand the Float property, you can think about a print layout, where the images are set into pages where the text wraps around them as needed.

Using the Float Property

The float property can be used just like any other CSS property, while working with the float property make sure to have a proper hierarchy of elements otherwise it will get way too much complicated.

For example:

We have three elements, an article, a div, and a paragraph. With their following classes as profile, avatar, status. To keep things simple as possible, I have taken an example of a basic profile page layout so that you can relate the issues more practically.

At this moment you can observe two elements in the web page with the basic layout as block elements, where we have our div( avatar) and paragraph (status) elements aligned as block-level elements.

However, if we apply the float property to our div (avatar), all the text starts to appear floating around the div as shown below.

Parent Collapsing
One of the biggest issues you have to face while working with Floated elements is the collapsing between child and parent elements. As parent elements ignore Floated elements and they end up collapsing, as a result, the layouts get messy.

Also, if we set the float value to right, the div moves to the right position on the available space, where all the text float around it.

Read the full Post at : https://javascript.plainenglish.io/working-with-the-float-property-in-css-f73cf7525261

8 UX Principles You Should Know as a Frontend Developer

Mohit — Sun, 23 May 2021 09:22:52 +0000

1. Don’t Use More than Two Typefaces
Fonts are the files on the device, that are later used to render the typeface. Developers sometimes add too many typefaces to their products and end up making it an overwhelming result. You should use only two typefaces maximum. One for heading and titles, and another for body copy that is the content to be read by users.
However, you can use weights and italics within that font family for any further customization of your style, adding too many typefaces creates too much visual noise and increase the effort that they have to put into understanding the view in front of them.

Points to Remember
Use a maximum of two typefaces.
Use one typeface for heading and titles, and another for body copy.

2. Use System Native Fonts

There are times when developers are required to use their product/brand font, but that different font takes more time to load on pages, as it needs to be downloaded from the server and renders which results in empty pages until everything loads up.
These fonts have to be loaded from somewhere, whether it’s Google Fonts, Typekit, or your CDN, which means that there is a barrier in getting the font files down to the user’s machine. Also, different devices out there will make your page look a little different for everyone. This is why it is recommended to use system native fonts that make pages appear quicker and the type look sharper and appealing to read.

Points to Remember
Use system-native fonts that users already have installed.
System fonts will typically render better than custom fonts.

Recommended system font stack
apple-system.
BlinkMacSystemFont.
sans-serif.
Oxygen-Sans.
Helvetica Neue.
Cantarell.

3. Depict Information Hierarchy With Type Size

There are times when you want to keep things effective while managing your views and making them instantly understandable for a wide range of users.
For example, let's say in your application, a pop-up reminds users about their meetings, and if we use the same Type Size for all the content, it loses the hierarchy of what matters the most to users when they are looking at the view.

Points to Remember
Scale up the information that you want the user to observe first.
Use at least two and not more than three type sizes.
Find a balance between the type sizes and don't overdo it.

4. Use Consistent Icons

There are times when developers get confused with multiple icons set available out there, and later they realize that it didn't have an icon for a particular action for their product. Using consistent icons is very important as the user has to put extra effort to recognize the whole UI.

Points to Remember
Don't take a shortcut by adding disparate icons.
Try to build a coherent icon style.

8 Best Practices for REST API Design

Mohit — Mon, 17 May 2021 06:25:49 +0000

1. Automate Caching

Repeated request and responding to those request consumes resources and this becomes a sign of flawed design. To solve this problem you must store data fetched from the API on the server and serve later from there.
However, there are times when the data becomes outdated and needs to be updated, in this case, we have some industry caching solutions (Redis and Amazon ElasticCache) that can cache data even after making changes.

2. API Documentation

Always provide clear and concise documentation is necessary for any API, it becomes harder to use that API later without good documentation. So make sure that your API has good documentation using simple languages with updates and new releases.
Your API Documentation should include the following:

Simple and easy to read language.
Implementation of API in different programming languages.

3. Don't Return Plain Text

It is not necessary to go above JSON in REST architecture, as most REST APIs use JSON as a data format. But there are times when returning a body that contains a JSON-formated string isn't enough.

Such as you can specify the Content-Type header set to the value application/json.

4. 401 VS 403

Both the status codes have different meanings and it is very easy to get confused whether it related to authentication or authorization. In order to resolve issues faster, you need to know the difference.
If the user hasn't provided authentication details or they were invalid, then it is 401 Unauthorized.
And if the user successfully authenticated but didn't provide the permissions to access the resource, then it is 403 Forbidden.

11 VS Code Features & Tricks You Should Know as a Developer

Mohit — Mon, 17 May 2021 06:20:42 +0000

1. Fonts With Ligatures

Fonts with ligatures make code more clean and handy when working with big projects, you can make your editor experience much better with exceptional fonts in conjunction with ligatures. There are several fonts available that support ligatures, but you can simply stick with the classic Fira Code.

To enable ligatures in VS Code you just have to add “editorLigatures”: true in VS Code settings file.

2. Rainbow Indent

This VS Code extension colorizes the indention in front of your text alternating four special colors on every step if you write code in JavaScript and Python then this feature is quite useful for neat-looking code.

3. Tag Wrapping

If you are tired of typing things repeatedly then you should understand emmet, emmet allows you to write an abbreviated code and get the returned corresponding tags quickly. The latest version of emmet has support for the majority of the Emmet Actions including expanding Emmet abbreviations and snippets.

To use tag wrapping:

Select text.
Open command palette.
Execute Emmet: Wrap with Abbreviation.
Enter a tag div (or an abbreviation).
Then hit Enter.

4. Turbo Console.log()

Instead of typing console.log repeatedly, you should preserve your time when you simply need to output some things fast. Turbo Console Log is an awesome extension in VS Code that solves this problem, it enables the logging of any variable on the line below with an automatic prefixing following the code structure.

5. Multi Cursor Editing

One of the most helpful features in VS Code that I personally love, with multi cursor editing you can edit multiple lines within a quick. There are several methods for multi cursor editing as given below:

ALT-CLICK: If you want to insert multiple cursors through a document that aren’t on consecutive lines, you have to just simply hold ALT and click on each line.

CTRL-U: Just in case you clicked the wrong line and don’t want to go all over again with selecting lines, then just press CTRL+U to undo the last cursor operation.

SHIFT-ALT with Arrow Keys: If you selected a word and want to include the quotes or anything that surrounds near it, just simply use the SHIT+ALT with the arrow keys to expand your selection area.

SHIFT-ALT-Drag: Using this key combination allows you to create a rectangular selection.

50 Questions to Master the JavaScript Coding Interview

Mohit — Mon, 26 Apr 2021 08:56:21 +0000

https://javascript.plainenglish.io/50-questions-to-master-the-javascript-coding-interview-639d2ac12630

9 Data Structures & Algorithms you Should Know as a Developer

Mohit — Sun, 28 Mar 2021 12:42:25 +0000

https://javascript.plainenglish.io/9-data-structures-algorithms-you-should-know-as-a-developer-5e10946c95a0

The Node.js Developer Roadmap for 2021

Mohit — Sat, 13 Feb 2021 15:11:35 +0000

https://medium.com/javascript-in-plain-english/node-js-developer-roadmap-for-2021-2ae9c057bff4

Top 7 React-Native Packages To Look Up In 2021

Mohit — Thu, 07 Jan 2021 13:38:29 +0000

1. react-native-qrcode-scanner

All modern and quality mobile apps prefer the feature of QR code scanning in their mobile apps, you can use this feature in your React-Native easily using this package to add the functionality of scanning QR code.

To Install:

npm i react-native-qrcode-scanner

2. react-native-immediate-phone-call

This package is quite handy if you want to add a feature of initiating an immediate phone call feature without any further steps in your apps.

To Install:

npm i react-native-immediate-phone-call

3. react-native-colour-matrix-image-filters

You do basic image greyscaling using this package in your apps. Each filter supports all the view props and if you need to combine several filters it is more performant than the corresponding stack of filter components.

To install:

npm i react-native-color-matrix-image-filters

4. react-native-customized-image-picker

A pretty good package for adding the picker feature in your apps comes with various other different features like cropping the image while selecting it. Supports camera, video compression & multiple images.

To install:

npm i react-native-customized-image-picker

5. react-native-websocket

A WebSocket API wrapped as a component for React Native, the component simply wraps the native WebSocket API, also if you are using this package in production it is recommended to implement your own exponential backoff.

To install:

npm i react-native-websocket

6. expo-document-picker

Provides access to the system UI for selecting documents from the available provides on the user's device.
To install:

npm i expo-document-pickernpm i expo-document-picker

7. react-native-fingerprint-scanner

Working with cross-platform device comes with many challenges and the right packages can help you a lot, this package can be handy for adding fingerprint feature in you React-Native app and work on both (Android & iOS) pretty well.

To install:

npm i expo-document-picker

A Complete Guide To Custom Events In JavaScript

Mohit — Wed, 06 Jan 2021 14:58:24 +0000

The DOMContentLoaded event, which is triggered at the moment when the browser is done loading and parsing HTML to the unload event, triggered just before the user leaves your site. Events are almost everywhere in a Web App. These events help in determining what just happened in an application & what the user’s state was specific at that time and more.

But the available JavaScript events are not adequate for describing the state of an application.

For example, when a user login fails and you want the parent component to know about the failure, there is no such login- failed event.
And to solve these issues we can surely create custom events in JavaScript for our applications.

We will cover:

How to use & create custom events in JavaScript
Using the CustomEvent constructor.
Dispatching custom events.
How Custom Events Work.
Drag & Drop in JavaScript.
Using Object Destructuring In JavaScript.

Prerequisites.

HTML & CSS.
JavaScrip (ES6).
DOM & DOM Manipulation.

1. How to create custom events in JavaScript
There are certainly two ways to create custom events:

Using the Event constructor.
Using the CustomEvent constructor.

A custom event can be created using the event constructor, like this:

We created the event myevent, by passing the event name to the Event constructor. Event names are case sensitive so we named them as myEvent and MyEvent.

a). bubbles

The bubbles property specifies whether the event should be propagated upward to the parent element or not.
If we set this to true it will get dispatched in a child element and the parent element can listen to the event and perform an action based on that. That's the behavior of most DOM events and for custom events, it is set to false by default. In case we only want it to be dispatching a particular element we can stop the propagation of the event via event.stopPropagation().

b). cancelable

The name implies all of it, cancelable specifies whether the event should be cancelable.
Native DOM events are cancelable by default so we can call event.preventDeafult() on it which will prevent the default action of the event if the custom event had cancelable set to false, as calling the event.preventDeafult() will not perform any action.

c). composed

The composed property specifies whether the event should bubble across from the shadow DOM (created when using the web components)to the real DOM.
If the bubbles is set to false, the value of this property won’t matter as we are explicitly telling the event not to bubble upward. If you want to dispatch a custom event in a web component and listen to it on a parent element in the real DOM and then the composed property needs to be set to true.
But this method comes with a drawback as we cant send data across the listener, and in most applications, we would want to able to send data across from where the event is being dispatched to the listener. Ans to do this we can use the CustomEvent controller.

You can also send data using DOM events.

2. Using The CustomEvent constructor

A custom event can be created using the CustomEvent constructor like this:

creating a custom event via the CustomEvent constructor is similar to creating one using the Event constructor, the only difference is in the object passed as the second parameter to the constructor. While creating the Event constructor, we are limited by the fact that we cant pass data through the event to the listener. Any data that needs to be passed to the listener can be passed in the detail property which is created while initializing the event.

3. Dispatching Custom Events

After creating the events you need to dispatch them and events can be dispatched to any object that extends EvenTarget, and they include all HTML elements and the document, the window.

For Example:

To listen for a custom event, we add an event listener to the element you want to listen on. Just similar, we do in native DOM events.

4. How Custom Events Work

To understand how we use custom events in JavaScript applications we'll build a simple app that allows users to add a profile and automatically get a profile card.

The UI

Create a folder and name it anything you prefer and create an index.html file in the folder.
Add the following to the index.html :

This will be the markup for the page.

The page has two sections and the first section is a form that allows the user to the following:
Upload an image via drag & drop or by manual selection.

Enter a name.
Enter an occupation.

The data initialized from the form will be displayed in the section, which is the profile card. And the second section just contains some placeholder text and images, the data received from the form will overwrite the content placeholder data.

Then create the following style.css file:

And at the last create an index.js file so we can add functionality to the application.

5. Drag & Drop In JavaScript

We will add the functionality to upload images by drag and drop or by manual selection. For this add the following to the index.js file.

This allows us to listen on the events that are required to allow drag and drop operations (dragover, dragcenter & drop).

In the handleDragOver function, we are ensuring that the item being dragged is a file and setting the drop effect to copy, also the handleDragCenter performs a similar function that making sure that we are handling the dragging files. The actual work happens when the file is dropped and we handle that using handleDrop.

At first, we prevent the browser’s default action which to open a file before delivering it. We are also validating if that is an image and if it’s not we send an error message to let the user know we only accept image files. And if the validation passes we proceed to process the file in the handleFileUpload function which we will create next.

Now update the index.js file with the following:

We can simply add the event listener as you simply do and call the handleCardUpdate function when it is triggered.

Read My Full Post At: https://medium.com/javascript-in-plain-english/a-complete-guide-to-custom-events-in-javascript-4db599b49551

Design Patterns In React Native: Component Patterns

Mohit — Mon, 04 Jan 2021 07:47:59 +0000

Developing Android & iOS apps has never been easier when it comes to delivering the right product to the end-user. React-Native has changed this problem totally since it was introduced, knowing about design patterns in React-Native is an essential skill that developers should know. In the React-Native ecosystem, the way we design our apps has always been easier since due to the large community support you can easily pick some of the work done by other outstanding developers. I will discuss the design patterns in React-Native that will help you write more maintainable code with examples.

Components In React-Native

A component is all that React uses most of the time the apps and writing your components in the right way is really important as you start to make real-world and bigger apps that require actual maintenance over time. These practices are still used by professional developers to make awesome React-Native apps and also I will discuss why it is so important to learn design patterns in React or React-Native in our case

When it comes to Components it is very crucial to make them reusable as your app grows with the time you will find it really hard to make new components every time to use somewhere else and end-up up following the well-known programmer principle-Don't Repeat Yourself (DRY). Presentational components are meant to do that.

I will discuss the following practices in this article:

Stateless and Stateful Components, with short and more complex examples.
Creating Presentational Components with easy configuration.
Container Components.
When to compose components and how to create (HOC)-High Order Components.

Stateless And Stateful Components

If you create a simple React-Native project using Create React-Native App (CRNA) you will observe simple React components already written in the file App.js.This component was created using the class syntax that was introduced in ES6 and such components are called class components.

You can take a deeper look at the example below:

Class components can be used to create stateful components, in this case, the clas component is unnecessary and we can use a stateless one instead.

Let's understand how can we convert it into a Stateless Component.

The most common approach is by using ES6 arrow syntax as such components are called Functional Components. (You can use regular syntax if are not comfortable with the arrow syntax)

The question that comes to mind is why is it stateless? Because it doesn't contain any inner state, which means we are not storing any private data inside it, everything that the component renders itself is provided from the external world and the component cont care about that in this case.

Till now we are not passing any kind of external data to our component. To pass some data we will make another new component called HelloText that consumes the property to display some text. To do so the usual convention to pass text to such a component is to place a text between the opening and closing tag,

For example: Text to be passed

But to retrieve such a prop within our functional component we still need to use a special key called Children.
After implementing the props in our functional component that's how it will look like:

Using the Children prop makes the HelloText component way much powerful, as props are flexible you can send any valid JavaScript type. In this case, we have just sent a Text, but you can send other components too.

Now it's the time to add some more features to our component and we will make expand the third text blocks after pressing the title text. To achieve this functionality we need to store a state that remembers if the component is expanded or collapsed.

Here's what changes we need to make:

At first, we need to change the component to a class syntax.
To leverage the state object in the React library we must initialize the state within the class constructor and make the text collapsed by default.
Add conditional rendering to the component render function.
Add the press handler which will change the state once we tap on the title or text.

After making these changes here what our code will look like.

Now to understand the design pattern we will make something more challenging (a TaskList)

To create the following feature the constructor should initialize the task list in its state, in the example the task list will be an array of strings. It will iterate over the task to create the Text component for each task & and this should happen in the render function in the App component.

Read the full post at: https://mohit19.medium.com/design-patterns-in-react-native-component-patterns-785d585ac3f

8 Node.js Projects To Keep An Eye On

Mohit — Sun, 03 Jan 2021 08:30:47 +0000

Cytoscape.js

An open-source JavaScript library used for visualization and graph analysis which comes with rich and interactive implementation. It includes all out-of-the-box gestures which include box selection, panning,pinch-to-zoom, and so on.
Cytoscape could be used on Node.js to perform graph analysis on a web server or in the terminal. Developers moving toward data science in their interest can choose Cytoscape as a good choice, also it has a wonderful contribution guide with documentation.

PDFKit

Very useful PDF generation library for nodes which helps in building and downloading complex PDFs, also it supports text and font embedding, annotations, vector graphics. However, the project has no extensive documentation which makes it harder to contribute to it.

Socket.IO

Bi-directional, real-time event-based communication and works on every browser device with equal focus on speed. A basic chat app is an example of two-way communication that the tool provides.

A new message is received by the server then it sends it to the client and notifies them bypassing the need to send a request between the client and the server.

Comes With Useful Features:

Binary Streaming
Analytics in real-time
Document Collaboiration

Strapi

An opensource content management system which a backend only system that provides functions to use with RESTful APIs, the main aim to get and deliver content across all devices structurally.
Comes with plenty of features, includes an inbuilt email system, file upload, and JSON Web Token authentication. The content structure is created via Strapi which is very flexible and lets you create content groups and customizable APIs.

Nest

Nest is a popular progressive framework for creating efficient and scalable server-side apps. Uses TypeScript for combing functional and object-oriented programming elements & uses Express under the hood. This tool provides true flexibility by letting you use and libraries, thanks to its modular architecture.

Date-fns

Still, the most consistent and simple set of tools to manipulate JavaScript dates in Node.js and a browser and works well with modern module bundlers like, Browserify,webpack, and Rollup. With amazing community support, the tool has dozen of locales where each function has a detailed description along with examples.

Read the full post at: https://medium.com/javascript-in-plain-english/8-node-js-projects-to-keep-an-eye-on-66465e221db5