DEV Community: Zeeshan Ahmad

My VS Code Setup

Zeeshan Ahmad — Sat, 01 May 2021 19:08:06 +0000

Extensions

Settings

{
  "customizeUI.titleBar": "inline",
  "window.titleBarStyle": "native",
  "explorer.openEditors.visible": 0,
  "editor.suggestSelection": "first",
  "editor.fontFamily": "FiraCode-Retina",
  "customizeUI.font.regular": "FiraCode-Retina",
  "customizeUI.font.monospace": "FiraCode-Retina",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "terminal.integrated.fontFamily": "FiraCode-Retina"
}

Running MongoDB, Redis, MySQL, and NATS as a Docker container

Zeeshan Ahmad — Sat, 10 Apr 2021 06:50:44 +0000

Recently my laptop fan was making lots of noises. So I went to format and reinstall the operating system. This time I thought why not use docker for all the services which I was using through brew before.

Below are some of the commands which I used to start different services in Docker and persist their data. Each command you will run will pull the latest image from the docker hub if it does not exist in your local machine and run the container in the detached mode.

MongoDB

docker run -d -n mongo -p 27017:27017 -v ~/data/mongo-data:/data/db mongo:latest

Redis

docker run -d -n redis -p 6379:6379 redis:latest --dir /tmp

MySQL

docker run -d -n mysql -e MYSQL_ROOT_PASSWORD=root -p 3306:3306 -v ~/data/mysql-data:/var/lib/mysql mysql

NATS

docker run -d -n nats-streaming -p 4222:4222 nats-streaming:latest

PS: Sometimes when you restart your laptop resulting in docker shutting down all the services that are running in the Docker. To overcome this problem I used some bash aliases.

alias dockmongo="docker run -d -n mongo -p 27017:27017 -v ~/data/mongo-data:/data/db mongo:latest"
alias dockredis="docker run -d -n redis -p 6379:6379 redis:latest --dir /tmp"
alias dockmysql="docker run -d -n mysql -e MYSQL_ROOT_PASSWORD=root -p 3306:3306 -v ~/data/mysql-data:/var/lib/mysql mysql"
alias docknats="docker run -d -n nats-streaming -p 4222:4222 nats-streaming:latest"

Configuring PHP_CodeSniffer in PhpStorm

Zeeshan Ahmad — Sun, 09 Aug 2020 08:23:28 +0000

Navigae to Preferences > Languages & Frameworks > PHP > Quality Tools and expand the PHP_CodeSniffer section and select Configuration to Local like following
Next, we have to set the binary paths of PHP_CodeSniffer. For that click on the three dots button next to Configuration dropdown and then inside the opened dialog set the phpcs and phpcbf binary paths:
Finally we have to enable the PHP_CodeSniffer in the IDE by navigating to Preferences > Editor > Inspections > PHP > Quality Tools and enable the PHP CS Fixer validation and PHP_CodeSniffer validation.

Minimal ts-node starter

Zeeshan Ahmad — Sun, 12 Jul 2020 09:26:32 +0000

My goal is by creating this small minimal ts-node starter is to kickstart small applications for simulating small tasks.

I mostly prefer doing small tasks outside the application as it helps me to clearly understand the implementation of the task and also the end result contains fewer bugs. Without further ado, let's start by creating a new directory by running the following command:

mkdir ts-node-starter

Now open ts-node-starter directory inside your terminal and initialize package.json by running following command:

yarn init -y

The above command will create a new file called package.json. Now let's install some dependencies which will help us running typescript files in Node.js. For that you have to run the below command:

yarn add ts-node typescript

Now let's create a new typescript file and name it index.ts and put the following content inside of it:

const message: string = "Hello, World!";
console.log(message);

After doing the above process open the terminal and run the following command:

./node_modules/.bin/ts-node index.ts

You will see the following output in your terminal:

Hello, World!

Until now what we can do our job but we want to automate that. For that let's create a new script in the package.json file.

"scripts": {
  "dev": "./node_modules/.bin/ts-node index.ts"
}

Now after update the scripts key in package.json run the below command:

yarn run dev

The above command will out following inside the terminal:

Hello, World!

But the only problem is left is when we change anything in our code we have to again run yarn run dev command to execute the code. We can also automate that by installing nodemon. nodemon is used to run a specific command when upon file changes. Now lets open package.json file and update our dev script.

"scripts": {
  "dev": "./node_modules/.bin/nodemon --exec ./node_modules/.bin/ts-node index.ts"
}

Now let's open your terminal again and rerun yarn dev command. At this time you will see the Hello, World output but the command will not exit the process as now we are watching for the file changes using nodemon. Now open index.ts file and change message variable value to Hello, John. After changing the variable value you will see Hello, John printed inside the terminal.

Helpful tools

typesync

Install missing TypeScript typings for dependencies in your package.json.

npm-check-updates

Upgrades your package.json dependencies to the latest versions.

You will be able to find the above code on GitHub.

Writing a swagger.json file

Zeeshan Ahmad — Mon, 22 Jun 2020 10:08:57 +0000

Swagger is a tool that you can use to document and consume API. The document can be in JSON or YAML format.

In this tutorial, we will document JSONPlaceholder endpoints using Swagger and finally, we will consume JSONPlaceholder endpoints using Swagger UI.

Initial Setup

I will recommend using Visual Studio Code as your editor for writing Swagger file with the below-mentioned extension as it helps in autocompletion:

OpenAPI (Swagger) Editor

Let's start by creating a new file you can name it whatever you want but I will call it swagger.json. Now open that file in Visual Studio Code and put below text inside of it:

{
  "openapi": "3.0.3",
  "info": {
    "title": "JSONPlaceholder",
    "description": "Fake Online REST API for Testing and Prototyping",
    "version": "0.0.1"
  },
  "paths": {}
}

Lets breakdown the above JSON into multiple parts:

openapi: Swagger uses OpenAPI specifications which defines Swagger file structure
info: Information about JSONPlaceholder
- title: Our API name
- description: Short description of our API
- version: Version of the swagger file
paths: All endpoints of any API

JSONPlaceholder `/posts` endpoint

Now navigate to swagger.json and put the following conten in the paths key:

"/posts": {
  "get": {
    "description": "List all posts",
    "responses": {}
  }
}

Lets breakdown the above JSON into multiple parts for your understanding:

"/posts": Endpoint to JSONPlaceholder which returns the list of posts
- "get": HTTP method of /posts endpoint
- "description": Short description of this endpoint
- "responses": List of possible responses that could come from this endpoint

Inside your browser open the following link. You will see the array of posts.

As we know now that if everything is working fine on the JSONPlaceholder side we receive the list of posts. Now go back to our swagger.json file and replace "responses": {} with the following text:

"responses": {
  "200": {
    "description": "Successfully fetched all posts from JSONPlaceholder",
    "content": {
      "application/json": {
        "schema": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "userId": {
                "type": "number"
              },
              "id": {
                "type": "number"
              },
              "title": {
                "type": "string"
              },
              "body": {
                "type": "string"
              }
            },
            "example": {
              "userId": 1,
              "id": 1,
              "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
              "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
            }
          }
        }
      }
    }
  }
}

Lets breakdown the above JSON:

"200": HTTP method of the success response
- "description": Short description of this response
- "content": Response that is coming from the server
- "application/json": Type of the response from server
  - "schema": Data structure of the response from server
  - "type": Data type of the received Data structure: object, number, string, boolean
    - "items": Array item structure
    - "type": Type of the array item: object, number, string, boolean
    - "properties": Properties inside the post object
      - "property": Property inside the post object
      - "type": Type of the property: object, number, string, boolean
    - "example": Example of the structure of a post item

Here is the full example of swagger.json file:

{
  "openapi": "3.0.2",
  "info": {
    "title": "JSONPlaceholder",
    "description": "Fake Online REST API for Testing and Prototyping",
    "version": "0.0.1"
  },
  "paths": {
    "/posts": {
      "get": {
        "description": "List all posts",
        "responses": {
          "200": {
            "description": "Successfully fetched all posts from JSONPlaceholder",
            "content": {
              "application/json": {
                "schema": {
                  "type": "array",
                  "items": {
                    "type": "object",
                    "properties": {
                      "userId": {
                        "type": "number"
                      },
                      "id": {
                        "type": "number"
                      },
                      "title": {
                        "type": "string"
                      },
                      "body": {
                        "type": "string"
                      }
                    },
                    "example": {
                      "userId": 1,
                      "id": 1,
                      "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
                      "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

Handling errors in React using Error Boundary

Zeeshan Ahmad — Tue, 07 Apr 2020 09:08:59 +0000

Error Boundary concept is introduced in React 16 to handle javascript errors and display a fallback UI.

Create a new react application by running below command inside your terminal:

yarn global add create-react-app
create-react-app react-error-boundary
cd react-error-boundary

Open App.js file inside your favourite editor and replace everything with the below content:

import React, { useState } from "react";

export function App() {
  const [counter, setCounter] = useState(0);

  if (counter === 5) {
    throw new Error("Counter is reached at its maximum value :)");
  }

  return (
    <>
      <p>{counter}</p>
      <button onClick={() => setCounter(counter + 1)}>Add</button>
    </>
  );
}

Let's see what happens if we create a build and serve the application from there:

yarn run build
serve -s build

Upon running serve command two URLs will appear inside your terminal open one of them inside your browser. If you keep pressing on the Add button it will increase the value of the counter variable and after a while when counter values reache 5 your application will become unresponsive and following will happen:

To handle the above issue create a new component and you can name it anything you want but I will rename it to ErrorBoundary and after creating the file put following content inside of it:

import React, { Component } from "react";

export class ErrorBoundary extends Component {
  state = {
    error: null,
    errorInfo: null
  };

  componentDidCatch(error, errorInfo) {
    this.setState({
      error,
      errorInfo
    });
  }

  render() {
    // If there are no errors render
    // the child components
    if (!this.state.errorInfo) {
      return this.props.children;
    }

    // Display custom UI if there are errors
    // in our application
    return (
      <div>Something went wrong</div>
    );
  }
}

Lets open index.js and wrap App component with our ErrorBoundary:

import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";
import { ErrorBoundary } from "./ErrorBoundary";

ReactDOM.render(
  <ErrorBoundary>
    <App />
  </ErrorBoundary>,
  document.getElementById("root")
);

We have to create a new build again and restart the build server:

yarn run build
serve -s build

Open the link which is appeared inside your terminal after running serve command.

Logging like a PRO in javascript

Zeeshan Ahmad — Tue, 07 Apr 2020 09:07:41 +0000

Inside JavaScript there is a built-in function JSON.stringify which converts any variable into json string.

The syntax is:

JSON.stringify(value, replacer, space)

value - Any variable you want to convert into JSON string
replacer - This method will be called on each item of the variable
space - Number of spaces you want to add to each item of the variable

The second and thrird arguments are optional.

Lets have a look at the following example:

const users = [
  {
    name: 'John',
    isActive: false,
  },
  {
    name: 'Jane',
    isActive: true,
  },
];
console.log(JSON.stringify(users, null, 2));

Upon running above code you will get the following output:

JavaScript array methods

Zeeshan Ahmad — Tue, 07 Apr 2020 09:06:59 +0000

There are many javascript array mehthods but we will discuss only the following:

Map
Reduce
Filter
Some
Every

Map

This method will executes the callback function on each element of the array.

array.map((item, index, array) => {}, thisValue)

Now lets have a look at the usage of the map method:

const names = ["John", "Jane"];
const greetings = names.map((name, index) => {
    console.log(index);
    return `Hi, ${name}`;
});
console.log(greetings);