DEV Community: Raghav Dhingra

How to upload Large, Multiple, and Sensitive files on Jotform using Uploadcare Integration

Raghav Dhingra — Sat, 15 Jul 2023 11:42:46 +0000

Uploadcare is a lightweight, secure, and easy-to-integrate tool for file uploading. It is built on a high-performance infrastructure and has a secured uploading and storing environment.

Uploadcare integrates with unique features and benefits, including serverless file uploads, in-browser image editing, and support for uploads from dozens of prominent websites.

The Uploadcare integration is simple to add to the Jotform. There are several options for uploading the file. The user may easily drag and drop files from their local system to the form, add an external file link, use a file management application, or connect to their social accounts, such as Facebook, Instagram, Google Drive, Google Photos, and many more, to attach files to the form.

The integration should be capable of uploading larger files and managing numerous files at once, as it will be uploading millions of files every day from all over the world. And most importantly, the file must be uploaded and retrieved in a highly secure environment. Uploadcare deserves praise for its comprehensive, adaptable, scalable, and secure features.

How should the file be handled during uploads if the internet connection is dropped in the middle?

By Tom, Expert at Broadband Savvy

If your internet connection drops out when making an upload, what happens next depends on the software application you're using.
In most cases, you will need to restart the upload again from scratch if your internet connection drops out. However, with some FTP clients, you can pause your file upload - this should occur automatically when your internet connection drops out. You can simply recommence the upload when you have a connection again.
This is why it's always best to perform large uploads over FTP, instead of through a web browser, when possible.

Let's learn more about how the Uploadcare integration handles everything simultaneously.

Uploading Large file on Jotform, how Uploadcare handles it

Uploadcare handles each file in a creative way so that it can be uploaded to the server online. There is no exact memory space definition for a large file, but let's say it's larger than 20 Mb; it will be broken down into smaller chunks, each of which is 5 Mb in size. After that, the pieces are uploaded to the server. As a result, if an issue arises during uploading or your internet connection becomes slow, it will address the issue and re-upload the little 5 Mb section of the file rather than uploading the entire file again.

Uploadcare runs a high-speed server in the background that handles each file quickly and reliably without interfering with the content. It also contains a feature that allows you to compress image files during upload without compromising quality, which you may enable from the interface.

Aside from that, Uploadcare's integration with numerous methods speeds up the uploading process. For example, if we link the Uploadcare form to Facebook, Google Drive, or any other social platform, the data will be quickly sent online; you won't have to wait long.

That’s how Uploadcare handles every file upload you make on their servers.

What are the most effective methods for speeding up the uploading process?

By Casey Crane, Content Manager at The SSL Store

Honestly, the biggest hurdle in the upload speed equation is your internet provider. If they’re throttling your connection, there’s not much you can really do to aid the situation. However, two potential solutions to resolve upload speed issues are either using file compression methods like ZIP or RAR or cutting large files into smaller files.
As the process name implies, file compression takes your files and removes redundant data to help streamline the files and reduce their size.
Compare this to file cutting, which is also a pretty self-explanatory term. Imagine taking a 500 MB file and cutting it down into smaller chunks

Uploading multiple files and how it is allowed by Uploadcare

Uploadcare allows you to choose and upload several files at the same time. The Uploadcare Widget in Jotform can be configured to accept multiple files. Furthermore, we may specify the minimum and maximum amount of files that can be uploaded at one time. It is a very handy feature to limit the number of files. We can also choose the type of file to upload at the time of upload, such as only photographs, docs, videos, and so on. When the user clicks done, the widget creates a filegroup with files in the same sequence as in the widget's dialog.

Let's have a look at how Uploadcare handles multiple-file uploads. When a user uploads numerous files, rather than uploading them one at a time, the files are uploaded simultaneously. This is known as parallel uploading, and it is only done when each file is less than 20 Mb in size.

If the file size exceeds the required size, the upload will be queued, saving internet traffic and allowing for faster uploading. As previously stated, these uploads will be intelligently handled by multiple servers running in the background.

How important is it to safeguard the uploading process, and how to ensure it?

An answer by Steven Walker, CEO at Spylix

It is important to safeguard uploading processes since many web applications accept user input, and one of the most common types of input is in the form of a file upload. Despite being a consumer application where users upload photos or a business application that accepts PDFs and word documents, file uploads are an essential feature. However, they also leave the site open to several potential risks and vulnerabilities. A hacker can exploit a file upload vulnerability. A file upload vulnerability can open a site to malware, unauthorized server access, attacks on website visitors, hosting illegal files, and more.
To ensure the protection of the uploading processes, use of third-party system: Using an off-the-shelf file upload system is an easy step to achieve secured file uploads with almost zero effort.

What do you think @uploadcare?

Investigation about Uploadcare for how it ensures security for sensitive files

Uploadcare considers security to be the most important factor while offering services to its customers. Uploadcare encrypts all files and assigns each one a unique id, ensuring a secure environment. We may also define an expiration date and time for the uploaded file so that it can only be seen for a limited period. Aside from that, we can use a secured key to control access to the uploaded data. As a result, unauthorized users have restrictions to operate and utilize the file.

The GDPR (General Data Protection Regulation), Privacy Shield agreement and HIPAA compliance allow Uploadcare to assure the protection of their users, as well as their clients' sensitive and vital information. And because there are multiple data centers throughout the world, 99.9% of the files will be successfully uploaded and retrieved.

How to integrate the Uploadcare form with Jotform

Setting up Uploadcare integration with the Jotform is an easy task with a few simple steps.

Create a Form using the Jotform Form builder
It's the first step in making a form on Jotform. To do so, go to the Jotform website and sign up, then click the Create form option. Select Start From Scratch from the panel, then Classic Form from the form layout area. This will result in a blank form.
Select Uploadcare Integration
On the left side, click the Add Form Element button. A side panel will open as a result of this action. From there, navigate to the Widgets section and type Uploadcare into the search box.
Add the Uploadcare Integration to the form by dragging and dropping it.
Setting the Uploadcare Integration
Go to the Uploadcare homepage and create an account. This will bring up the Uploadcare dashboard.
Go to the API Key tab on the left panel, copy the public key from the section, and paste it into the key input box in the Uploadcare Widget settings.
Customizing the form's options
If you need to enable your form accept multiple documents and set a restriction on the number of files that can be uploaded. That's simple to do from the Widget settings section. From there, we can adjust the form's language, resize the images, apply effects, and more.

Click the Preview form button in the top right corner to test your implementation.

You have effectively integrated the the secure and fast Uploadcare integration for file uploading with the Jotform.

Anonymous Controller

Raghav Dhingra — Thu, 12 May 2022 17:58:49 +0000

Overview of My Submission

I have an inspiration for controlling a device from anywhere around the world using Web Technologies and I always wanted to try out something unique, therefore, developed prototype to illustrate controlling of an IoT robot car connected with the internet, steering with a Progressive Web Application (PWA) built on Javascript.

It's a Progressive Web Application controller that allows us to control the IoT robot from anywhere in the world via the internet. I used the MQTT protocol for communication between the app and the robot, as well as appwrite integration for user authentication to access the controller. It also have the appwrite's real-time database for tracking user events on the controller that are saved in the database.

Developed using Appwrite deployed on Digital Ocean, C++, React, Recoil, Service Workers, MQTT, Arduino, ESP, Mosquitto broker deployed on AWS.

You can heads to https://appwrite-hack-robo.netlify.app/ to control.

Github Repository Link: https://github.com/raghavdhingra/Anonymous-Remote

Submission Category

My submission falls under the category of Wacky Wildcards, and Web2 Wizards

Link to Code

raghavdhingra / Anonymous-Remote

Anonymous controller

It is a Progressive Web Application controller, through which we can control the IoT robot over the internet from all around the world. I have used MQTT protocol for the communication between the application and the robot, along with appwrite integration for the authentication for the users to access the controller, also have a real time database for tracking the user events performed on the controller and get saved on the database.

Developed using Appwrite deployed on Digital Ocean, C++, React, Recoil, Service Workers, MQTT, Arduino, ESP, Mosquitto broker deployed on AWS.

You can heads over to https://appwrite-hack-robo.netlify.app to control the robot from where you are sitting, just remind me to turn on the power supply.😁

The .ino file should be uploaded to ESP module for the GPIO pins

Some Images for the controller:

Hope you will like it. :)

View on GitHub

Additional Resources / Info

Designed and code by @raghavdhingra

Personal Pinterest with Uploadcare Chrome Extension

Raghav Dhingra — Fri, 04 Feb 2022 12:48:06 +0000

Everyone needs an online file storage system that is both personal and secure.
If you have an assignment due and need to submit the link on an urgent basis, or if you like a photo and want to save it online, or if you’re developing an application, and need to display an image or file in it, you’ll need a URL as quick.

You may do this by opening any browser, typing a URL for online storage applications, waiting for the website to load, going to the dashboard, selecting a file to upload, and searching for the URL to utilize it.

Alternatively, you can install an easy-to-use Uploadcare Chrome extension that allows you to upload the file directly to the cloud, and instantly access the file link. The file will be saved in the Chrome extension’s history, allowing you to retrieve it anytime you need it.

How to install the Chrome extension

To install the extension, go to https://chrome.google.com/webstore/detail/uploadcare-file-uploader/dgaehcjjbeoplnffljjeckmphcaijpim

Click on Add to Chrome button, and select Add Extension from the popup. This will install the extension to the Chrome browser and make it available for use.

Select the extension from the Extensions panel on the right side of the URL bar.

It will require a Public Key for usage.

Go to the Uploadcare website, and create an account: https://uploadcare.com

After logging into the account, go to the Dashboard and select API Keys from the left side of the navigation panel.

Copy the API Key from the Public Key dashboard page, paste it into the input box of the extension, and click on the Select Key button.
The extension is now available for use whenever a file has to be uploaded.

Using the extension

The Uploadcare extension provides multiple sources from where you can upload a file. For example, you can get it from the local file system, from Google Drive, Google Photos, Facebook, or paste the given image’s URL.

You just need to choose a file, and the extension will upload it to the cloud storage and provide you with a URL:

You can also view a list of previously uploaded images and their URLs:

Understanding the Chrome extension

A browser extension is a software program created specifically for browsers that allow users to improve their browsing experience and accomplish specific tasks. These extensions are developed using basic web technologies such as HTML, CSS, and JS. We can utilize external libraries like React to develop the extension, but it must be built in plain HTML, CSS, and JavaScript before it can be published in the extension store.

So how's it different from web-based applications?

It’s just as simple to create a chrome extension as it is to create a web application. Only the manifest.json file has to be configured. It is the key file that directs the browser as an extension and contains vital information such as name, description, version, icons, and so on. This file is also responsible for displaying the extension popup. We’ll be ready to finalize the extension after properly configuring the file.

We have two relevant versions of the manifest for developing browser extensions, each indicating different attributes.

"manifest_version": 2

"manifest_version": 3

Here's an example of how a manifest file looks:

{
  "short_name": "Name",
  "name": "Name of the extension",
  "manifest_version": 3,
  "version": "1.0.0",
  "description": "Extension Description goes here",
  "icons": {
    "16": "/assets/icon-16.png",
    "32": "/assets/icon-32.png",
    "48": "/assets/icon-48.png",
    "64": "/assets/icon-64.png",
    "128": "/assets/icon-128.png"
  },
  "action": {
    "default_icon": "/assets/icon.png",
    "default_popup": "/src/index.html",
    "default_title": "Title of the Popup"
  },
  "background": {},
  "permissions": []
}

I used manifest version 3 to configure the Reactjs-based application for this extension.

Testing the extension in the browser

You need to clone the application to test the extension in the local environment.

Prerequisites:

Git and Node need to be installed on the local system
Should have a Chrome browser

Open the terminal, or command prompt, and type:

git clone https://github.com/raghavdhingra/UploadCare-Chrome-Extension.git

Open a code editor (e.g. VS Code) on the base directory of the project folder.
For installing the dependency of the project, type

npm install

This will create a node_modules folder in the base directory

Now, you need to convert the .env.example file to .env file.
In the .env file, we can define the environment variables not visible to other users.

React builds an HTML file that contains inline scripts, which disrupts the Content Security Policy for the browser extensions.
To solve this, we need the given variable defined in the .env file.

INLINE_RUNTIME_CHUNK=false

This will handle the inline issue with the React build.
Or,
We can directly build up the folder, and manually move all inline scripts in the index.html file to an external JavaScript file.

Now you have to build up the project to get the plain HTML files. To do this, type:

npm run build

It will create a folder named build.

We have successfully accomplished the project setup. It’s time to test out the implementation.

Go to the Chrome browser and insert this link into the URL bar:

chrome://extensions

Click on the Load Unpacked button, and select the build folder. This will add a new development extension to your tab, and you’ll be able to check out the extension in the extension bar.

Now it’s time for you to test it out!

The project is Open-Sourced at https://github.com/raghavdhingra/UploadCare-Chrome-Extension

Hope you like it! :)

Voice Enabling your React Apps

Raghav Dhingra — Wed, 26 Jan 2022 08:52:10 +0000

The globe has been transitioning to a new technology generation. In addition, the applications that are being developed must meet the generation's standards.
According to the census of 2022, the global population is estimated to be around 7.9 billion people. Therefore, while building applications, accessibility, and ease of use are significant aspects that are taken into consideration.

For this tutorial, we will enhance the standards of our generic React-based Web application by integrating Alan AI voice SDK to provide voice accessibility to our application.

Before we go any further, let's get a fundamental knowledge of Alan AI.
Alan AI is an artificial intelligence technology that helps app developers add voice assistant functionality to their existing apps.
It's a really simple tool to incorporate, and anyone with a basic understanding of JavaScript may do it. Alan AI integration is available to everyone for free.

Let's begin by building a react application with the help of the basic npm package create-react-app.

Prerequisites** Node must be installed in your system

Open your project folder's terminal or command prompt and type the following command:

npx create-react-app alan-ai-react-app

Type y if prompted to proceed.

It will take 3-4 minutes to install all the dependencies.
On completion, a folder named alan-ai-react-app will be created.

Open the project in a code editor (suggestion VSCode).

The structure would be as shown in the above image.

- alan-ai-app/
    - public/
        - index.html
        - manifest.json
    - node_modules/
    - src/
        - index.js
        - index.css
        - app.js
        - app.css
    - package.json
    - package-lock.json

Now, open terminal by going to Terminal section > New Terminal

A terminal will be opened below the code editor, type:

npm start

The browser will be opened automatically, and the application will be started at port 3000 by default.

Go back to the terminal, and type:

npm install @alan-ai/alan-sdk-web

This will install the Alan AI sdk into your application.
Go to the package.json file in the root folder to check whether @alan-ai/alan-sdk-web is present in the dependencies.

Go to app.js file in the src folder, and replace the code with:

import React from "react";
import alanBtn from "@alan-ai/alan-sdk-web";
import "./App.css";
const App = () => {
    const alanAIRef = React.useRef(null);
    const [orderList, setOrderList] = React.useState([]);
    React.useEffect(() => {
        alanAIRef.current = alanBtn({
            key: "API_KEY",
        });
    }, []);
    return (
        <div className="app">
        <h1>Demo Restaurant</h1>
        <p>
            Place Order just by clicking on Alan AI voice button
            <br />
            And say "Pizza", "Burger", or any items
        </p>
        <div className="order-container">
            {orderList && orderList.length > 0 ? (
              <>
                <p>Your Order for</p>
                <ul className="order-list">
                   {orderList.map((order, index) => (
                     <li className="order-list-item" key={index}>
                         {order}
                     </li>
                   ))}
                </ul>
              <label>have been placed</label>
             </>
           ) : (
              "No order Placed Yet"
           )}
            </div>
        </div>
    );
};
export default App;

And app.css code with:

.app {
  text-align: center;
}
.order-container {
  margin-top: 2rem;
}
.order-container > p {
  font-weight: 500;
}
.order-list {
  padding: 0;
}
.order-list-item {
  list-style-type: none;
  box-sizing: border-box;
  padding: 1rem;
  margin: 0 1rem;
  display: inline-block;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

Now, we have completed the UI of our application, and integrated the Alan AI button.

It’s the time to add some functionality to it, when we say any item to the voice assistant, it should add it in our order list and that should be displayed on the screen.

Go to studio.alan.app and create an account to get some free integrations.

After signing in to the application, the project page will be displayed. Select Create Voice assistant > Example: Hello World

This will create a voice assistant with some pre-written commands.
To integrate the assistant, click on the Integration button at the top.

And click on the copy SDK key and replace “API_KEY” in the app.js in your react application.

A voice assistant button will be available in your react application on the browser.

Click on it and say “Hello!”, “How are you?”. It will give some reply according to the commands written in the Alan Studio platform.

Go back to Alan Studio web app, and replace the HelloWorld file code:

const helloPatterns = [
    'Help',
    'I need some help',
    'I am stuck',
    'Please guide me',
    'Hello assistant',
];
intent(helloPatterns, p => {
    p.play('Hey, I am your food assistant. You can give me your order. What had you like to eat?');
});
intent(`$(COMPLAINT* (.*))`, p => {
    p.play(`$(COMPLAINT*|food (.*)) is being added`);
    p.play({command: "add", item: p.COMPLAINT.value});
});
const clearPatterns = [
    'Clear',
    'checkout',
    'I am done',
    'done',
    'finish',
];
intent(clearPatterns, p => {
    p.play(`Cart have been cleared`);
    p.play({command: "clear"});
});

And back in app.js, replace the use effect code with:

  React.useEffect(() => {
    alanAIRef.current = alanBtn({
      key: "API_KEY",
      onCommand: function (commandData) {
        switch (commandData.command) {
          case "add": {
            const { item } = commandData;
            setOrderList((orLst) => {
              return [...orLst, item];
            });
            break;
          }
          case "clear": {
            setOrderList([]);
            break;
          }
          default:
            break;
        }
      },
    });
  }, []);

Save the code, and it’s the time to test out the implementation,
Go to the react application on the browser, and click on the voice assistant button, and say “Hello!”, continuing with the food names - “Pizza”, “Burger”, “Noodles”, etc…

It will look something like:

After Addition, try to say “Clear”, “Checkout”, etc… to clear up the cart.

This is how you can integrate the Alan AI integration to enable your react application with voice commands.

The demo application is available on: https://alan-ai-react-integration.netlify.app

The code is Open-Sourced at: https://github.com/raghavdhingra/Alan-AI-React-integration

Join the Alan AI community at https://bit.ly/alan-slack

PWA Universal Controller

Raghav Dhingra — Tue, 22 Jun 2021 07:10:41 +0000

#Control anything around the world

Surprising? Obvio not, all the traditional machines and softwares are being replaced with modernized technology.
Therefore, my concepts and belief also substitute with new ideas.

I am really fascinated by the world being changed so rapidly with up-to-date designs, plans, structures in terms of software as well as hardware. Not long ago, I have been engrossed in electronics and communication.
P.S. I am not an electronics or electrical student (^_^)/
Being from a software background, it kick-starts the ability to integrate my software skills with the hardware.

I am wandering around IoT stuffs for few months, and playing with different components and modules in my leisure time.
Begin to test out the knowledge while developing some astonishing devices, may not be the as good insight as others. But yeah, will share it soon.

Inspiration for the project

The project where I have taken an inspiration from, a simple remote control car. I wish to try out a different approach of controlling through a mobile, again ordinary, but not for me.
I had build a car using simple components, NodeMCU (ESP8266), and a motor driver bridge (L298N).
Along with it, I had used the Blynk android application as a medium for controlling. That was my first incredible experience in the field of IoT. Though already made some small projects,but it was just insane.

Still, want to take it to a higher level. It has a major dependency on an application - Blynk, which I have not developed. I wish to have some personal up-gradation but have no control over it. Also, it has a limitation of connection. The device and the mobile have to be connected over the same wifi network. Again, we can operate through an android mobile application.
#restrictions ヽ(ಠ_ಠ)ノ

Hence, after days of research, got upon a distinct process of communication via MQTT protocol.
I had some experimentation and exploration about the protocol. This is a very lightweight protocol for messaging transmission that follows a pattern of pub/sub.

Again, analysis over the scalability factor, efforts for integration over the web. Subsequently, initiated the react application, and set up the MQTT broker over the EC2, again, I don't want to use publicly available brokers due to configuration restrictions.
Finalized the flow, and implemented within few weeks. Cumulatively, it's not more than a week task, but due to other activities alongside, and the research part took more than a month.
After weeks-long work, got the application and the device ready for use.
Currently, anyone around the world can control the IoT device in my room. The only restriction is that the device/car should be connected to the internet.
The current application is a PWA, hence can be installed as a native application over any platform, whether it's Windows, Mac, Linux, Android, Ios, and any other.
For PWA, I have used the service workers to cache all the application data inside and serves when the browser is offline. (But can't control the device)

Multiple controllers can control the device at one time, hence can have disturbance seen, if so (≧∇≦)/.
I have tested the controller and car with some friends over a meet. A delay of 120 ms can be seen while controlling the device due to the internet and the network latency.

You can view the demo video at

Test out the controller at controller.raghavdhingra.com
Username: raghavdhingra
Password: qwerty1234

Now you have the master control for the car and all my future devices. But will change the password soon 😜

If you wish to have a live demo and play with it, you can mail me at admin@raghavdhingra.com

Do give it a like and follow me up on GitHub: github.com/raghavdhingra

Tech Stack

Frontend - ReactJs, Recoil
Broker - Mosquitto MQTT broker
IoT - C++

Broker deployed on AWS EC2
Frontend deployed on Netlify

Open-Source

Frontend code
github.com/raghavdhingra/React-MQTT

IoT device code
github.com/raghavdhingra/Arduino-Cpp/blob/main/mqtt_car_controller-with-react/mqtt_car_controller-with-react.ino

Connection Diagram

Do check out my other blogs

#Control stuff around the world

Building the Portfolio: WebOS

Raghav Dhingra — Fri, 18 Jun 2021 13:29:15 +0000

The portfolio is one of the most crucial tasks for the developers to create. It not only represents the brief-up of the dev, rather exhibits the potential that they have.
Not confined to presenting the projects, and the experience, but it's an art and emotion to showcase the skills and expertise. It might take years of experience to develop an engaging and attractive portfolio.

How I came up with the idea

While wandering around the internet and stuff, I explored many interesting ideas and inspirations to create a portfolio. But perceiving a unique idea requires time and creativity. In the era of software, it's not easy to get a unique design to follow up.

I am fond of listening to EDM. So back in 2019, I was listening to Alan Walker's song "Play" and at the end of the video, there was a link given for their website.

I was totally amazed after seeing the website. It was an Operating system-based portal, well designed. You can head up to p74y.com to view.

Initial Inspiration

Hence, got an inspiration to design my portfolio in an appearance of an Operating System.
I have started working on the base design, how it will look. The first theme that I have planned out was a Window-based Portfolio, that will have some minor functionalities of accessing different instances of the desktop in the explorer.
It includes the portfolio, projects, and a setting explorer from where customization can be done. But it feels more static and less engaging.
Tech Stack: Django, CSS, Js, PostgreSQL
Time Duration: 1 month
Deployed on Heroku

You can have a look at the old portfolio design at archive.raghavdhingra.com

Restructuring the Portfolio

After designing and releasing, I got engaged with some internships and other projects. But again it stuck on the mind, about the unattractive and constant portfolio.
Over a span of one year, I had polished up my skills and experience in other languages and libraries.
I have initiated the whole project from scratch and implemented the knowledge gained over that period, which really gave me a push to design it more extensible. I was also practicing data structures and algorithms, which again assisted me to make it more versatile.
Hence, worked out with the design, and the tech stack. It took around 2 months (* overall, over a span of few months) to finalize it. The end outline was to design the portfolio in the appearance of Linux.
Tech Stack: React/Redux, Django, PostgreSQL, CSS3
Duration: 2 months **
Deployed on Google Cloud Platform, and Netlify

You can view the latest portfolio at raghavdhingra.com

Features ideation

It was a crucial moment to define the features to embrace the portfolio. There was a lot of stuff coming up to my mind. At the same time, consulted some of my colleagues and friends for the ideation phase. Eventually, made a list of all the features to be implemented.

The portfolio encompasses some of the interesting features,

Integrated File System: Creation, updation, and deletion of files and folders within the portfolio.
Root terminal: Terminal for accessing the features of the portfolio through the root user.
Settings tab: Customizing the portfolio according the users, in terms of background theme, font, clicks, etc.
Browser: For browsing different stuff within the portfolio.
Camera: For clicking out images
Text Editor: Editing and creating the text files for future use.
Explorers: For glancing the portfolio, and other stuff present on the website.

And much more...
Would definitely love to explore it.

All the stuff is stored within the local storage, hence your data is being preserved after the portfolio is being refreshed.
P.S. I am not collecting any data, you can check out the network tab for any request made.😂

The most interesting thing while developing the whole portfolio is that no external library is used. All the features, including, the file system, terminal, are created using vanilla js (Pure Js)

The project is Open Sourced at:

WebOS -
Frontent: https://github.com/raghavdhingra/Web-OS
Backend: https://github.com/raghavdhingra/OS_2_Server

Archived Website -
https://github.com/raghavdhingra/Portfolio.OS

Do follow up on GitHub: https://github.com/raghavdhingra
Stay Tuned for more content!

Immutable Data Structures for Functional JavaScript

Raghav Dhingra — Thu, 17 Jun 2021 09:15:28 +0000

First of all, we will know about what is Immutable. Actually, Immutable means not mutable, or changeless. Immutable makes a data structure constant, we cannot change its value by any means.
Let’s assume that we have made a global array and we want to keep it’s value constant throughout the code. For example, we have taken an array with a name “foo”:
var foo = [ 1 , 2 , 3 ];
Now, by-mistake we have used same variable name “foo” as a local variable inside a function or anywhere for defining any array or value. Then, its value gets change. For Example, we have made a new variable “foo1”, and in this suppose we have assigned its value exactly same as foo just adding one more element (say “ 4 ” ) by using push() :
var foo1 = foo.push(4);
Now, the value for “foo” will also change from this code because the push() function will add 4 to the end of the array of “foo” due to which its value becomes — [ 1 , 2 , 3 , 4 ]
This is known as Mutation. That is we have change the value for a particular data structure which we don’t want to, either by mistake, or doing bad code practice, or by one-or-the other means.
But, we don’t want our variable “foo” to re-assign its value to something else. Therefore, we can make our variable immutable so that its value can’t be change even when we have reassign its value somewhere in the code.
But now what about the value of “foo1”. We have to assign its value to [ 1 , 2 , 3 , 4 ] without changing the value of “foo”.
Now most of us think about directly assigning the value to “foo1” as:
var foo1 = [1,2,3,4];
It is right but what about when we have to make a big files having hundreds or thousands of variables and function. Also, which have same elements or values in common. Then, if we assign directly assign each value to the variable, it will make the code bulkier and will covers more memory. This type of practices are bad.
To fix this problem, we can use various types of libraries like “MORI” or we can use “IMMUTABLE.JS”. These libraries help us to make the value of a the variable constant so that its value can’t be change in between the code. Also, it can be helpful in defining another variables by the help of the immutable variables made by using these libraries. For example, we have use “immutable.js” library and we have defined the value of “foo” by using it:
var imjs = require(“immutable”);
var foo = imjs.List.of(1,2,3); //Results in [1,2,3]
var foo1 = foo.push(4); //Results in [1,2,3,4]
Now, the value of “foo” will not change because we have made it immutable. That is its value is [ 1 , 2 , 3 ]. But the value of “foo1” will be now — [1 , 2 , 3 , 4 ].
Working of these Libraries:
Another important thing is that if we want to introduce a new value instead of a particular value of the array “foo” without changing the original value of the array “foo”. The same typo will come that it will change the original value. The simplest way to handle this in a very short way is using a tree structure.
We can take an example of a tree which haves a main trunk which gets smaller and divides itself into many branches as we moves up. Further, on each branch there are many leaves on it. We can consider the main trunk of the tree as the main value of the variable, branches as fragments of the value of the variable, and leaves as the further smaller fragments of the variable where the data can be extracted or changed easily. Similarly, we can divide the whole value into smaller fragments, then assign a new value to that particular fragment and then joining the fragments to make a new array. This can reduce a lot of human efforts and also saves a lot of memory.
The “MORI” and “IMMUTABLE.JS” Libraries works in the same manner as describes above. It breaks data into fragments, changes a particular fragment data to a new value and then joining the fragments to form a new data so that the actual value of the parent variable remains same and a new value is assigned to another variable using the parent variable.