DEV Community: Mohit

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

Different Methods for Data Fetching in React

Mohit — Sun, 03 Jan 2021 07:51:55 +0000

React is really awesome when it comes to displaying data in a component view, I will discuss all the best approaches.

You can visit the Gitlab link fir accessing the example used below:

https://gitlab.com/mohit199thd/react-data-patterns-demo

How To Fetch Data In React

If you are a beginner who’s familiar with building simple React Projects then you may have worked on simple methods of data fetching where you don't work on bigger and higher amounts of data to be fetched. In your React journey as you go along your apps will get more complex and data fetching with the right techniques becomes a requirement. There are plenty of ways to fetch data in React using the built-in Fetch API, Axios, async/await, and much more

Server-Provided Data

This approach is straightforward and works pretty well in most cases where the data is embedded in the HTML sent from the server. And if we need fresh data you need to refresh the page manually or have the page refresh periodically.

For Example:

This method is not that relevant to React application, but we can call this method a more dynamic way to get data from the server to the browser.
Still, a lot of Web Apps use this & in case JavaScript is disabled or when we have to deal with old browsers it is even the best way to fetch data.

How React Components Fetch Data

There are several approaches for data fetching in React Components.

Start with no data, and then fetch data on user-based action (clicking on a button).
Loading data at once.
Loading data periodically

As the component is totally autonomous and no other component can tell that it's the time to load some data, so will load the data for the first time in the componentDidMount() and set a timer that will fetch the data again every 7 seconds.
Our UserTableAutonomus component below is a standard React class component,

The state includes two fields:

Boolean isFetching initialized to false since it is not fetching yet.

An empty list of users, which is the data it needs to fetch.
The render() method renders the BootstrapTable component passing the current user from the state. The actual data fetching happens in the componentDidMount() which is a React lifecycle method, there are two reasons why we are not using componnetWillMount() as first its deprecated as of React 17 & when we use the Fetch API or Axios componentWillMount(), the render will happen without waiting for it to finish, and this will cause and empty render for the first time.

The componentDidMount() is called after the first render so we still need to handle the first empty render, in this case, we use the ‘Fetching Data’ message, you can also choose your own initial data fetching in the constructor.
So now we will fetch our data in componentDidMount() and the code simply calls the fetchUsers() method and starts a timer to call fetchUsers() every 7 seconds.

componentWillMount() method is called when our component goes away and clearInterval() will stop the time interval by setting it to null.
The fetchUsers() set the isFetching state variable to True, so as soon as new data gets fetched the ‘Fetching Data’ message gets renders by the component. And then after getting some data it set isFetching back to False.

The Fetch API

I have used the Fetch API in the function fetchUsersWithFetchAPI() and assigned variable fetchUsers so the component just calls fetchUsers().

It starts by setting the isFetching variable to true, then it calls fetch which returns a promise which further resolves to a response, then the response json() method returns a JavaScript object.
Then it resets isFetching to false and in case something goes wrong the catch handlers log the errors to the console and reset the isFetching variable when the Fetching process is finished.

Using Axios

We will use Axios in the UserTableRenderProps component. Axios also has a promise-based API similar to Fetch, but it saves the JSON parsing phase and handles all the errors. Where the Fetch API returns an error 404 as a normal response, so you might need to check the response on your code and throw an error yourself. Axios have almost similar code to Fetch API but with one less step and more error handling.

Fetch vs Axios

We can communicate with the server through HTTP protocol using both, but which is better for you will depend on your project goals.

Fetch API provides a fetch() method on the window project, as well as a JavaScript interface for accessing HTTP request and responses, fetch has only one mandatory argument that the URL of a resource to be fetched, it returns a promise that can be used to retrieve the response of the request
Whereas Axios is a JavaScript library that enables to make an HTTP request from Node.js or XML & supports the Promise API in the ES6 version of JavaScript.

Read the full post at:

https://medium.com/javascript-in-plain-english/data-fetching-in-react-668ef136efd9