DEV Community: Mubashir Hassan

I spent hours debugging an issue which was not even in my code! Docker could have saved my time

Mubashir Hassan — Fri, 07 Jun 2024 18:28:10 +0000

Have you ever faced issues like It works on my machine but not on yours? Or you wrote some code some time back and now you are not able to run it because of the environment setup? Or you are working on multiple projects and each project requires a different environment setup?

Almost 2 years ago, I wrote a script with Node.js v14 for interacting with Ethereum Smart Contract. After few months, I needed to run that script again but I was getting some weird clue-less error. I spent a lot of time debugging the issue and found that I was using a package which required Node.js v14 to run and I had Node.js v16 installed on my machine. Maybe, some specific method that was used in that package was deprecated Node.js v16. So, I had to downgrade my Node.js version to v14 to run the script.

Imagine if that script was dockerized, I would not have wasted my time debugging an issue which was not even present in my code, rather in that package. I would have just run the script in a Docker container with Node.js v14 installed and it would have run without any issues.

What is Docker?

Docker is a platform to bundle your application code along with the environment it needs to run, so that if it works on your machine, it will work on any machine that has Docker installed.

Docker bundles application code, operating system, libraries, and other dependencies in one package called a docker image which can be used to run multiple instances of the application in isolated environments called docker containers.

👉 Consistent Environment

Docker containers provide a consistent environment for your application to run, so you can be sure that when your application is ported to another developer's machine or to a server, it will behave the exact same way.
It helps developers to work on different projects without worrying about the environment setup.
E.g. If you have an old Node.js application that requires Node.js v18 to run, you can create a Docker container with Node.js v18 installed and run the application in that container, without worrying about the version of Node.js installed on your machine.
Imagine running an application which was intended for Node.js v18, on a machine with Node.js v22 installed (which may have some breaking changes). But if that is dockerized, it will run in the same environment as it was intended to (Node.js v18).

👉 Isolation

Docker containers are isolated from each other and from the host system, so they offer a clean and consistent environment to run your application.
This isolation helps to prevent conflicts between different applications running on the same machine. Some applications might be running on Debian with Node.js v16, while others might be running on Ubuntu with Node.js v18, v20, etc. inside their respective containers.
Docker containers are secure and can be used to run untrusted code in a sandboxed environment, reducing the risk of security vulnerabilities because the code is isolated from the host system.

👉 Portability

Docker images are portable and can run on any machine that has Docker installed, regardless of the underlying operating system.
E.g. if a developer is working on a Windows machine, they can create a Docker image with Ubuntu OS and Node.js v18 and run their application in that container. Then, they can share the image with another developer who is working on a Mac or Linux machine, and the application will run the same way on their machine as well.

👉 Scalability

Docker containers are scalable and can be used to run multiple instances of the same application on the same machine or across different machines.
Docker containers can be easily deployed to cloud platforms like AWS, Google Cloud, Azure, etc., and can be scaled up or down based on the demand for the application.
E.g. if your application is getting more traffic, you can scale up the number of containers running the application to handle the increased load, and scale them down when the traffic decreases.

What is Dockerfile, Docker Image, Docker Container?

👉 Dockerfile is a text file that contains a set of instructions to build a Docker image. It contains instructions to install the necessary software packages, copy application code into the Docker image, set environment variables, expose ports, and define the command to run the application.

👉 A Docker image is a template that contains the application code, environment and dependencies required to run an application inside a Docker container. It is created from a Dockerfile and can be used to create multiple instances of a Docker container.

Docker image can be shared, stored, and reused across different environments. It is portable and can be used to run docker containers on any machine that has Docker installed.

👉 A Docker container is a lightweight, standalone instance created from a Docker image that can be run. Multiple containers of same or different images can run on the same machine, isolated from each other and from the host system.

Let's Talk About Docker Compose

Docker Compose is a tool for defining and running multi-container Docker applications. It uses a YAML file to configure the application's services, networks, and volumes.

With Docker Compose, you can define a multi-container application in a single file and run it with a single command.

👉 When you have a web application that has an API, a database, a frontend. Then you also need to define the network between these services (so they can communicate with each other), the volumes to store data (so that when you remove and recreate containers, the data should persist). Docker Compose helps you define all these in a single file and run them together with a single command docker compose up.

👉 Docker Compose is useful for development, testing, and staging environments where you need to run multiple services together.

That's all for an overview of Docker and Docker Compose.

You can find the example project here:
https://github.com/mhm13dev/lerna-with-docker-compose

Streamlining AWS S3 Object Handling and Optimizing User Experience

Mubashir Hassan — Fri, 29 Sep 2023 11:15:49 +0000

Have you ever wondered how large files like images or videos are efficiently served over the internet, ensuring a smooth user experience without excessive delays? Recently, I delved into the world of AWS SDK APIs, particularly focusing on the Amazon S3 API, and discovered some fascinating insights into handling and optimizing the delivery of objects like images and videos.

Generating Presigned URLs

The journey began with understanding how to generate presigned URLs for S3 objects. These URLs are like golden tickets, granting temporary access to upload or download objects. Presigned URLs are incredibly useful for securely sharing files while maintaining control over access.

Streamlining Object Retrieval

But it wasn't just about generating URLs; I was eager to figure out how to retrieve S3 objects efficiently, especially for large media files. The challenge was to avoid waiting for the entire file to download on the server before serving it, as this can be slow and inefficient.

That's when I stumbled upon a game-changing feature in the AWS SDK: the ability to get a readable stream of the object directly from the S3 bucket. With this stream in hand, I could stream data chunk by chunk to the client side without delay, significantly improving efficiency and speed.

Setting the Right Headers

Efficient object retrieval wasn't the only piece of the puzzle. I also had to ensure that the client understood the response correctly. This meant setting a plethora of HTTP headers:

Content-Type: Defines the type of content being sent.
Content-Disposition: Guides the client on how to handle the response, whether to display it or download it.
Content-Length: Specifies the size of the object.
Cache-Control: Indicates how long the object can be cached.
Accept-Ranges: Informs the client of support for partial requests, crucial for efficient downloads.
Content-Range: Helps the client track how much of the object it has received, useful for resumable downloads.
ETag: Notifies the client of object changes, reducing unnecessary downloads.
Last-Modified: Indicates the last modification date, crucial for caching and conditional requests.
Expires: Specifies when the object will expire.
Content-Encoding: Tells the client how the object is encoded, often used for compression.
Content-Language: Informs the client about the language of the content.
x-amz-version-id: Identifies the version of the object, vital for versioning.

Each of these headers plays a specific role in ensuring a seamless user experience. For instance, ETag helps avoid unnecessary downloads, while Content-Disposition controls how the client handles the response, whether to download or display it.

Handling Range Requests

One particularly fascinating aspect was handling range requests. By utilizing the Range header, I could send only the requested part of the object to the client. This is incredibly valuable for large files like videos. Clients can download the video in chunks and begin playback while the download is in progress, creating a smoother user experience.

Private Object Access

This approach also opens up possibilities for role-based access to objects. For instance, imagine a private user profile with content accessible only to followers. With this method, we can check if a user is a follower and serve the object accordingly. It's a powerful way to manage and serve private content efficiently.

In conclusion, my journey through AWS S3 object handling and optimizing user experiences was not only educational but also empowering. I gained a deep understanding of how HTTP headers influence client-server interactions and how they can be leveraged to streamline content delivery.

Moreover, implementing these techniques has significantly improved the performance of serving files, making the user experience smoother and more efficient. Whether you're handling images, videos, or other types of content, mastering the art of object handling and HTTP headers is a valuable skill in the world of web development. I'm excited to apply these lessons in our app, and I hope you find them as insightful and empowering as I did.

Array.sort() in JavaScript - I was asked about this in an interview

Mubashir Hassan — Tue, 13 Dec 2022 21:55:50 +0000

I was in an interview and I was given an array of strings.

const arr = [
  "karachi",
  "lahore",
  "kolachi",
  "islamabad"
]

He asked me to sort it in alphabatical order.

I tried:

arr.sort((a, b) => {
  return a < b;
});

He said it will work for numbers (actually it won't) but does not work for strings.

Then I tried

arr.sort((a, b) => {
  return a.charAt(0) < b.charAt(0);
});

He said it will work for just the first characters (actually it won't), then how karachi and kolachi starting with k will be sorted?

I was blank.

He said what are a and b?

I said a is the current element (the element at the index of current iteration) and b is the next element (the element at the current iteration + 1 index).

👉 But actually, it is the opposite. a is the next element and b is the current element.

Then he asked, does the sort modify the original array or returns a new array.

Honestly, most of the time I am working with .map(), .filter(), .some(), and .every(). So I knew the behaviour of these methods but I don't remember when was the last time I used .sort().

I said, it does not modify the original array, rather returns a new array like .map().

👉 But it is the opposite. .sort() modifies the original array and returns the reference to the original array, which is now sorted.

How does actually `.sort()` work?

Array.sort() accepts a an optional compare function as an argument.

If we do not provide any compare function, the sort method converts all the non-undefined elements to string, and then compare their sequences of UTF-16 code units values.

What does "compare their sequences of UTF-16 code units values" means?
To put it simple, let's say we write character a which is encoded as UTF-16 in JavaScript. In decimal it's value will be 97. For b it will be 98. i.e.
A = 65
B = 66
C = 67
and so on.
I expect you know the ASCII table.

So basically the array of strings will automatically be sorted by .sort() method correctly without passing any compare function.

👉 In case of numbers, the behaviour is same;

const arr = [1, 30, 4, 21, 100000];
arr.sort();
console.log(arr);
// expected output: [1, 100000, 21, 30, 4]

Because each number is first converted into string, and then compared with respect to their UTF-16 code units values.

But If we provide a compare function to sort based on numbers:

const arr = [1, 5, 3, 10, 7]
arr.sort((nextValue, prevValue) => {
  // if returnValue > 0, move nextValue after the prevValue
  // if returnValue < 0, move the nextValue before the prevValue
  // if returnValue === 0, keep the original order, do not move any value
  return nextValue - prevValue;
});

So, the sort method can be thought of like this:

function compareFunction(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  a must be equal to b
  return 0;
}

I hope this will make the things a bit clear about Array.sort()

That's it for this post. Write your thoughts in the comments below!

My first post on dev.to - I created a webpack plugin

Mubashir Hassan — Sun, 23 Aug 2020 08:29:16 +0000

I created a Webpack plugin for extracting output assets filenames into a separate JSON file according to the Entrypoints specified in the webpack configuration.

The main purpose of writing this plugin was that I had a project structure where I was working with NodeJS, Express, Pug (view engine) and webpack. So basically, webpack was building my assets with names having random content hashes like index.d53b3te33yi3y.js and it was difficult for me to inject those assets into my views e.g. index.pug. That's why I came up with webpack-get-files-plugin that extracts the filenames of the output assets into a GetFiles.json file and I can easily inject them into my views.

Installation

npm install webpack-get-files-plugin --save-dev

Usage

The Webpack Configuartion:

const  path  =  require('path');

// Requiring webpack-get-files-plugin
const  GetFilesPlugin  =  require('webpack-get-files-plugin');

const  MiniCssExtractPlugin  =  require('mini-css-extract-plugin');
const { CleanWebpackPlugin } =  require('clean-webpack-plugin');

module.exports  = {
    mode:  'production',
    entry: {
        home:  path.join(__dirname, 'src', 'home.js'),
    },
    output: {
        path:  path.join(__dirname, 'dist'),
        filename:  'js/[name].[contentHash].js',
    },
    plugins: [
        // Using the Plugin
        new  GetFilesPlugin(),

        new  CleanWebpackPlugin(),
        new  MiniCssExtractPlugin({
            filename:  'css/[name].[contentHash].css',
        }),
    ],
    module: {
        rules: [
            {
                test:  /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],

            },
            {
                test: /\.(png|jpg|svg|gif|jpeg)/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'images/[name].[contentHash].[ext]',
                    },
                },
            },
        ],
    },
};

After running the webpack build process, this plugin will emit a file named GetFiles.json in the root directory of your project.

Structure of GetFiles.json

{
    "entrypoints": ["home"],
    "files": {
        "home": {
            "filenames": [
                "css/home.c43adcd817b4eaa62b97.css",
                "js/home.5e994fb65e62d205d1c5.js",
                "{\"name\": \"webpack-logo.png\"}??gffm??images/webpack-logo.3b7bf087cbac835e6f7d4b7dc9711e72.png",
                "{\"name\": \"github.svg\"}??gffm??images/github.16a9304e38fd8167989291ab92544e14.svg"
                ],
            "assets": {
                "css": ["css/home.c43adcd817b4eaa62b97.css"],
                "js": ["js/home.5e994fb65e62d205d1c5.js"],
                "images": {
                    "webpack-logo.png":  "images/webpack-logo.3b7bf087cbac835e6f7d4b7dc9711e72.png",
                    "github.svg":  "images/github.16a9304e38fd8167989291ab92544e14.svg"
                }
            }
        }
    }
}

Demo Project

I have created a demo project in demo-webpack-get-files-plugin directory to help you better understand how this plugin works. This demo project does not contain example of working with NodeJS, Express and Pug.

For that I have a separate boilerplate project where I have used this plugin. @mhm13dev/node-express-webpack-pug

To See How This Plugin Works in Action:

Clone this repo:

git clone https://github.com/mhm13dev/webpack-get-files-plugin.git

Change into repo's directory

cd webpack-get-files-plugin

Change into demo project directory

cd demo-webpack-get-files-plugin

Install the dependencies

npm install

Run the webpack build process

npm run webpack

Then have a look at the dist directory and GetFiles.json file inside demo-webpack-get-files-plugin directory.

Link to the Github Rep:

@mhm13/webpack-get-files-plugin

For queries and suggestions, comment below.

If you liked this post then please give it a heart! ❤