DEV Community: Jameer Khan

How to create AWS Instance with Terraform

Jameer Khan — Mon, 29 Jul 2024 13:37:59 +0000

Terraform is an open-source infrastructure as code (IaC) tool developed by HashiCorp that enables you to define and provision data centre infrastructure using a high-level configuration language known as HashiCorp Configuration Language (HCL). This article provides simple step-by-step guide on how to create and update AWS instance with Terraform script.

Unlike traditional methods that involve multiple manual steps to configure a cloud, Terraform provides a unified approach to create and manage infrastructure across various cloud providers.

Benefits of Using Terraform

Terraform has several benefits. Some of the key points are mentioned here.

Provider Flexibility

One of the most significant advantages of Terraform is its ability to work with multiple cloud providers. You can manage resources on AWS, Google Cloud, Azure, and others from a single tool, facilitating a true multi-cloud strategy.

Infrastructure as Code

Terraform enables you to manage infrastructure through code, which can be versioned and stored in a source control system like Git.

State Management

Terraform keeps track of the current state of your infrastructure in a state file. This state file acts as a source of truth that allows Terraform to understand what has already been deployed and make necessary adjustments when changes are made.

Plan and Apply

Terraform provides a clear two-step process when applying changes to infrastructure. First, the terraform plan command generates an execution plan that shows what changes will be made. This allows users to review and confirm changes before they are applied. After reviewing, you can execute terraform apply to create or modify the resources. This provides an extra layer of safety and assurance.

Create an AWS EC2 Instance with Terraform

Now, let’s walk through the steps to create an AWS EC2 instance using Terraform.

Install Terraform

If you haven’t already, download and install Terraform from the official Terraform website and ensure you have an active AWS account.

Create Terraform Configuration Files

Create a directory for your project and navigate into it:

mkdir terraform-aws-instance

cd terraform-aws-instance/

Then, create a configuration file named main.tf with following code:

provider "aws" {
  region = "us-east-1"
}

data "aws_ami" "ubuntu" {
  most_recent = true

  filter {
    name   = "name"
    values = ["ubuntu/images/hvm-ssd/ubuntu-jammy-22.04-amd64-server-*"]
  }

  filter {
    name   = "virtualization-type"
    values = ["hvm"]
  }

  owners = ["099720109477"]
}

resource "aws_instance" "aws_instance_example" {
  ami               = data.aws_ami.ubuntu.id
  instance_type         = "t2.micro"

  tags = {
    Name = "AWSAppInstance"
  }
}

output "public_ip" {
  value = aws_instance.aws_instance_example.public_ip
}

Initialize Terraform

Run the initialization command to set up your working directory:

terraform init

Plan and Apply

Generate an execution plan to see what Terraform will do:

terraform plan -out="example-instance"

The -out flag in Terraform is used to specify the filename for the plan file when you generate an execution plan. This allows you to save the planned changes to a file instead of executing them immediately.

Apply your configuration to create the instance:

terraform apply

Type yes when asked and hit ENTER.

Once the action is confirmed, Terraform will provision the EC2 instance.

Check the AWS Account instances page, you will see a new instance is created and running.

Updating the Instance Type

Suppose you want to change the instance type from t2.micro to t2.small in your existing EC2 instance configuration. Here’s how to do it:

Modify the Configuration

Open the main.tf file and update the instance_type parameter:

resource "aws_instance" "aws_instance_example" {
  ami               = data.aws_ami.ubuntu.id
  instance_type     = "t2.small"

  tags = {
    Name = "AWSAppInstance"
  }
}

Plan the Changes

Run the following command to see what changes will be made:

terraform plan

Apply the Changes

After reviewing the plan, you can apply the changes:

terraform apply

You’ll need to confirm the action, and Terraform will update the EC2 instance according to your new configuration.

Destroying the EC2 Instance

If you want to remove the EC2 instance you created, you can do so using the terraform destroy command. This command will delete all resources defined in your Terraform configuration.

To destroy the instance, run:

terraform destroy

Confirm the action with yes and hit ENTER.

Conclusion

Terraform provides a powerful and flexible way to manage cloud infrastructure, allowing you to automate the deployment and management of AWS resources seamlessly.

With Terraform, you can build a cloud environment that meets your needs efficiently and reliably. Plus, updating and changing your infrastructure is simple, allowing you to adapt to the needs of your projects as they change.

Custom Format Date Time in MS SQL

Jameer Khan — Fri, 27 Jan 2023 08:10:55 +0000

The article is originally published to my blog StackBlogger as MS SQL Server: Select Custom Formatted Date Time

MS SQL Server provides several built-in functions to format and display dates in different ways. One of the most commonly used functions is the FORMAT function, which allows you to change the format of a date value with the help of a custom format string.

The syntax of the FORMAT function is as follows:

FORMAT(date, format)

The date is the date value that you want to format, and the format is the custom format string that specifies how the date should be displayed.

For example, let’s say you want to display the current date in the format of ‘yyyy-MM-dd’, you can use the following query:

SELECT FORMAT(GETDATE(), 'yyyy-MM-dd') AS 'Current Date'
// 2023-01-12

In this query, the FORMAT function is used to format the current date (GETDATE()) using the format string ‘yyyy-MM-dd’. The resulting column is given the name ‘Current Date’.

Here are some other examples of how to use the FORMAT function:

MS SQL Custom format a date in the format of ‘dd/MM/yyyy’

SELECT FORMAT(GETDATE(), 'dd/MM/yyyy') AS 'Current Date'
// 12/01/2023

MS SQL Custom format a date in the format of ‘MM/dd/yyyy’

SELECT FORMAT(GETDATE(), 'MM/dd/yyyy') AS 'Current Date'
// 01/12/2023

MS SQL Custom format a date in the format of ‘dddd, mmmm dd, yyyy’

SELECT FORMAT(GETDATE(), 'dddd, mmmm dd, yyyy') AS 'Current Date'
// Thursday, 11 12, 2023

You can also use the FORMAT function in combination with other functions and clauses to format date values from a specific table. For example, to display the date of a specific order in the format ‘yyyy-MM-dd’ from the Orders table, you can use the following query:

SELECT FORMAT(OrderDate, 'yyyy-MM-dd') AS 'Order Date'
FROM Orders
WHERE OrderID = 123

In this query, the FORMAT function is used to format the OrderDate column from the Orders table using the format string ‘yyyy-MM-dd’. The query also uses a WHERE clause to filter the results to show only the order with an OrderID of 123.

The FORMAT function can be also combined with other SQL Server functions like DATEADD, DATEDIFF, etc to manipulate and filter the date.

SELECT FORMAT(DATEADD(day, -30, GETDATE()), 'yyyy-MM-dd') AS 'Date 30 days ago'
// 2022-12-13

In this example, DATEADD function is used to calculate the date 30 days ago and FORMAT function is used to format the date.

Run the SQLFiddle link here to get the output and try some more formatting on your own.

In conclusion, the FORMAT function is a powerful tool that allows you to format and display dates in a specific format in MS SQL Server. With the ability to use a custom format string, you can easily format your date values to meet your specific needs.

Extract Metadata Information From URL | JavaScript

Jameer Khan — Sun, 31 Jul 2022 20:16:31 +0000

The original article is published at my blog here- Extract metadata information from URL using TypeScript/JavaScript.

Metadata of a website holds the information about its search engine-related properties like title, description, site-name, site-color, and many other open-graph properties. If you are building a SEO service-related application then reading metadata properties of websites might be a required point for you. The article provides a very easy-to-use package that you can use in TypeScript/JavaScript project to extract metadata information from an URL.

Extract Metadata Information from URL

Extract metadata information from any http/https url.

Install link-meta-extractor package

Run the command to install the package in your existing TypeScript/JavaScript application. You can find the complete package here. Check the complete source code of the package here.

npm install link-meta-extractor

TypeScript Usage

Work with async/await

If you want to extract metadata information from a website using async/await then go with the following code…

import { extractMetadata } from 'link-meta-extractor';

async function extractMeta() {
  const url = 'https://stackblogger.com';
  const metaInformation = await extractMetadata(url);

  console.log(metaInformation);
}

extractMeta();

/*
    {
        title: 'StackBlogger - A blog by programmer for programmers',
        description: 'StackBlogger provide programming Tutorials, Tips, Tricks and HowTo Guides.',
        banner: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
        isItWordpress: true,
        wordpressVersion: 'WordPress 5.8.1'
    }
*/

Work with promise/callback

Extract metadata information from a website using the callback method then go with the following code…

import { extractMetadata } from 'link-meta-extractor';

function extractMeta() {
  const url = 'https://stackblogger.com';
  extractMetadata(url).then((metaInformation) => {
    console.log(metaInformation);
  });
}

extractMeta();

/*
    {
        title: 'StackBlogger - A blog by programmer for programmers',
        description: 'StackBlogger provide programming Tutorials, Tips, Tricks and HowTo Guides.',
        banner: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
        isItWordpress: true,
        wordpressVersion: 'WordPress 5.8.1'
    }
*/

JavaScript Usage

Use the following code to extract metadata information from an url in JavaScript code

Work with async/await

Extract metadata information from a website using async/await then go with the following code…

const metaExtractor = require('link-meta-extractor');

async function extractMeta() {
  const url = 'https://stackblogger.com';
  const metaInformation = await metaExtractor.extractMetadata(url);
  console.log(metaInformation);
}

extractMeta();

/*
    {
        title: 'StackBlogger - A blog by programmer for programmers',
        description: 'StackBlogger provide programming Tutorials, Tips, Tricks and HowTo Guides.',
        banner: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
        isItWordpress: true,
        wordpressVersion: 'WordPress 5.8.1'
    }
*/

Work with promise/callback

Extract metadata information from a website using the callback method then go with the following code…

const metaExtractor = require('link-meta-extractor');

function extractMeta() {
  const url = 'https://stackblogger.com';
  metaExtractor.extractMetadata(url).then((metaInformation) => {
    console.log(metaInformation);
  });
}

extractMeta();

/*
    {
        title: 'StackBlogger - A blog by programmer for programmers',
        description: 'StackBlogger provide programming Tutorials, Tips, Tricks and HowTo Guides.',
        banner: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
        isItWordpress: true,
        wordpressVersion: 'WordPress 5.8.1'
    }
*/

Additional Metadata Fields Extraction

The plugin accepts additional fields as optional arguments that you can use to extract from a website.

Pass the meta field keys in string format as a rest parameter in the function. Refer to the code here…

import { extractMetadata } from 'link-meta-extractor';

async function extractMeta() {
  const url = 'https://stackblogger.com';
  const metaInformation = await extractMetadata(
    url,
    'og:site_name', // additional field
    'og:image', // additional field
    'robots' // additional field
  );

  console.log(metaInformation);
}

extractMeta();

/* 
    {
        title: 'StackBlogger - A blog by programmer for programmers',
        description: 'StackBlogger provide programming Tutorials, Tips, Tricks and HowTo Guides.',
        banner: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
        isItWordpress: true,
        wordpressVersion: 'WordPress 5.8.1',
        additional: {
            siteName: 'StackBlogger',
            image: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
            robots: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1'
        }
    }
*/

Final Say

Extract metadata information in just one line of code with a simple plugin
Checkout my other exciting JavaScript related articles here.

FastifyError- Request body is too large

Jameer Khan — Tue, 26 Jul 2022 19:46:17 +0000

Article is originally published to my blog here- FastifyError- Request body is too large

Fastify is a Node.Js Server Side Framework written on top of JavaScript scripting language. It has by default 1MB of Request Payload size limit. Passing a large payload or even more than 1MB of payload gives Request Body is too large error. Let’s resolve the FastifyError- Request body is too large error.

Below screenshot shows the default maximum payload size limit Fastify is allowed to accept.

How the error looks

Following screen shows the Fastify Request body too large error.

Resolve FastifyError- Request body is too large

To resolve the Request body too large error, we need to increase the default size in Fastify Server instance.

Provide the bodyLimit parameter in the Fastify create server options object.

import Fastify from 'fastify'
const fastify = Fastify({
  logger: true,

  bodyLimit: 30 * 1024 * 1024 // Default Limit set to 30MB
})


// Declare a route
fastify.get('/', function (request, reply) {
  reply.send({ hello: 'world' })
})

// Run the server!
fastify.listen({ port: 3000 }, function (err, address) {
  if (err) {
    fastify.log.error(err)
    process.exit(1)
  }
  // Server is now listening on ${address}
})

Provide the size in bytes (convert to MB by multiplying 1024 twice) to bodyLimit parameter. Following line sets the default size limit to 30MB.

bodyLimit: 30 * 1024 * 1024

Save the changes and run application. Now you can send up-to 30MB of request body without any failure.

Conclusion

Fastify is Node.Js Framework to write Server-Side apps built on top of JavaScript platform. It is recommended to use with Node.Js TypeScript project.

The article resolves a very common fastify error ie. request body is too large error. Hope it helps you resolve your issue. If you still face the problem, make sure to comment below and we will try to look into the issue.

Checkout other JavaScript articles here.

Angular and RxJS: Refresh a Component From Another

Jameer Khan — Thu, 12 May 2022 18:46:41 +0000

RxJS is Reactive Extensions of JavaScript. It provides various handy Observables and Operators to work within Angular. It becomes important in scalable application development. This tutorial will guide you to reload or refresh a component from another using RxJS Observables. I will use a common service that will be responsible to keep the event emitters.

Real examples

Building a large-scale application requires an optimized and well-structured code, only then it will give the best performance measurement. There are many situations where we need to refresh a part of a component from another component’s action. Here are a few of them.

Refresh data table at component after action on another

This is the most common scenario when building an application. You have a data table on the list component and there is another component for Add/Edit/Delete. You want to refresh the data table when a record is added/edited/deleted.

Reload a dropdown after action on a different component

A dropdown data can be refreshed using RxJS Subject or EventEmitter from a different component. It requires a common service to be used by both of the components. Emit the event from the source component and subscribe to the listener. Reload the data in the subscription.

Refresh multi-lingual content explicitly

This situation happens when Angular’s Change Detection is not able to detect the language change button click. In that case, you want to manually emit an event at the language change action and refresh the multi-language content.

You can use any one of the below events generation mechanisms to implement any of the above examples. You can also use it in any other use case as per your requirement. Let’s start code implementation.

Refresh a Component From Another Using RxJS

RxJS observables and operators will be used to reload a part of data at a component from a different component. We will look into the ways one by one with examples.

Reload part of component using RxJS Subject

RxJS Subject is an Observable that is used to multicast the event to multiple observers. We will use Subject to notify the component on some action and reload the part.

data.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  subjectNotifier: Subject<null> = new Subject<null>();

  constructor() { }

  notifyAboutChange() {
    this.subjectNotifier.next();
  }
}

A variable subjectNotifier with Subject Data Type is declared. null type is passed in the Subject argument because I don’t need to send any value with notification. If you want to send a value along with the notification, you can specify there the value type and send the value in this.subjectNotifier.next();

Call the notifyAboutChange method from the origin component.

sender.component.ts

This is the event originator component. An event will be emitted on add/edit/delete record or as per your requirement. The event will be then subscribed by the receiver component.

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-sender',
  templateUrl: './sender.component.html',
  styleUrls: ['./sender.component.scss']
})
export class SenderComponent implements OnInit {

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.notifyForChange(); // call this method after add/edit/delete or as per your requirement
  }

  notifyForChange() {
    this.dataService.notifyAboutChange();
  }
}

receiver.component.ts

Subscribe to the event in receiver component.

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { DataService } from '../data.service';

@Component({
  selector: 'app-receiver',
  templateUrl: './receiver.component.html',
  styleUrls: ['./receiver.component.scss']
})
export class ReceiverComponent implements OnInit, OnDestroy {

  notifierSubscription: Subscription = this.dataService.subjectNotifier.subscribe(notified => {
    // originator has notified me. refresh my data here.
  });

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
  }

  ngOnDestroy() {
    this.notifierSubscription.unsubscribe();
  }
}

Note: I have used a Subscription variable notifierSubscription. I can unsubscribe it in ngOnDestroy to prevent memory leaks when component is destroyed.

Refresh part of component using EventEmitter

data.service.ts

Declare an EventEmitter variable.

eventEmitterNotifier: EventEmitter<null> = new EventEmitter();

Again, I am using null value in the EventEmitter argument because I don’t need to pass any value. I only need to notify my listener. If you need to pass data along with event notification, you can provide the data reference and pass the value while emitting the event.

Emit the event.

notifyAboutChange() {
  this.eventEmitterNotifier.emit();
}

Call the emit() method in notifyAboutChange in data.service.ts file. Consume notifyAboutChange method from sender component to emit event.

sender.component.ts

Call the notifyAboutChange service method to emit the event on add/edit/delete action or any other action as per your need.

constructor(private dataService: DataService) { }

ngOnInit(): void {
  this.notifyForChange(); // call this method after add/edit/delete or as per your requirement
}

notifyForChange() {
  this.dataService.notifyAboutChange();
}

This will invoke the event and the listener will be notified immediately.

receiver.component.ts

Subscribe to the event in the same way we did for the RxJS Subject.

notifierSubscription: Subscription = this.dataService.eventEmitterNotifier.subscribe(notified => {
  // originator has notified me. refresh my data here.
});

constructor(private dataService: DataService) { }

ngOnInit(): void {
}

ngOnDestroy() {
  this.notifierSubscription.unsubscribe();
}

Note: Unsubscribe the subscription in ngOnDestroy to prevent unnecessary memory leakage.

Conclusion

Events generation is one of the most used mechanisms in Angular development. RxJS comes to mind when implementing such use cases. This article explains how to refresh a part of component from another component with the help of RxJS Observables.

Read How to Pass Data Between Components Using RxJS.

Finding Duplicate Documents in MongoDB Collection

Jameer Khan — Tue, 18 Jan 2022 07:57:52 +0000

The original article is published here.

Looking out to find duplicate documents in a MongoDB collection? This article will help you find duplicate records in MongoDB collection by a specific field.

MongoDB is a JSON based document-oriented database that can handle big size of data without compromising the performance.

Find Duplicate Documents In MongoDB Collection
Sometimes you want to remove all the duplicate documents from a collection but you don’t know how to find them. Here we will see how to find duplicate records in MongoDB. Once you find the duplicates, you can easily remove those from Mongo collection.

For this example, I am using Github Public Issues API. I have fetched the issues from Github API and inserted them into the database by making same requests multiple times to make duplicates.

I will use aggregate method along with $group and $match pipeline operators to find duplicates. Let’s step by step implement code to get duplicates.

MongoDB Group Records by Field

First step towards implementing duplicate search is Grouping Records.

db.issues.aggregate([  
    {$group: {
        _id: {IssueNumber: "$issue_number"}
        }
    }
]);

Above code fetches all the documents present in issues collection grouped by issue_number field.

/* 1 */
{
    "_id" : {
        "IssueNumber" : 2778
    }
}

/* 2 */
{
    "_id" : {
        "IssueNumber" : 80
    }
}

/* 3 */
{
    "_id" : {
        "IssueNumber" : 2592
    }
}

/* 4 */
{
    "_id" : {
        "IssueNumber" : 2596
    }
}

/* 5 */
{
    "_id" : {
        "IssueNumber" : 2599
    }
}

/* 6 */
{
    "_id" : {
        "IssueNumber" : 98
    }
}

/* 7 */
{
    "_id" : {
        "IssueNumber" : 2602
    }
}

/* 8 */
{
    "_id" : {
        "IssueNumber" : 99
    }
}

/* 9 */
{
    "_id" : {
        "IssueNumber" : 2607
    }
}

/* 10 */
{
    "_id" : {
        "IssueNumber" : 100
    }
}

MongoDB Get Duplicate Documents

It’s time to implement the complete query and get all the rows that have more than 1 count in MongoDB collection.

db.issues.aggregate([  
    {$group: {
        _id: {IssueNumber: "$issue_number"},
        uniqueIds: {$addToSet: "$_id"},
        count: {$sum: 1}
        }
    },
    {$match: { 
        count: {"$gt": 1}
        }
    }
]);

$addToSet operator adds a value to an array if the value is not already present. If the value is already present, it does nothing.

$sum calculates and returns the sum of numeric values.

$match applies condition on the result set. $gt will check if the count is greater than provided number (ie 1).

The above query produces following output.

/* 1 */
{
    "_id" : {
        "IssueNumber" : 34
    },
    "uniqueIds" : [ 
        ObjectId("61b993c2f8fba0f17accd7fc"), 
        ObjectId("61b9937b12b680e75f5a7fac"), 
        ObjectId("61b88043dcb3fc4c9c03ca8e")
    ],
    "count" : 3.0
}

/* 2 */
{
    "_id" : {
        "IssueNumber" : 37
    },
    "uniqueIds" : [ 
        ObjectId("61b993c1f8fba0f17accd7f6"), 
        ObjectId("61b9937b12b680e75f5a7f97"), 
        ObjectId("61b88042dcb3fc4c9c03ca82")
    ],
    "count" : 3.0
}

/* 3 */
{
    "_id" : {
        "IssueNumber" : 677
    },
    "uniqueIds" : [ 
        ObjectId("61b993baf8fba0f17accd6bd"), 
        ObjectId("61b88042dcb3fc4c9c03ca76")
    ],
    "count" : 2.0
}

/* 4 */
{
    "_id" : {
        "IssueNumber" : 695
    },
    "uniqueIds" : [ 
        ObjectId("61b993b9f8fba0f17accd667"), 
        ObjectId("61b88040dcb3fc4c9c03ca4a")
    ],
    "count" : 2.0
}

/* 5 */
{
    "_id" : {
        "IssueNumber" : 700
    },
    "uniqueIds" : [ 
        ObjectId("61b993b8f8fba0f17accd653"), 
        ObjectId("61b88040dcb3fc4c9c03ca42")
    ],
    "count" : 2.0
}

/* 6 */
{
    "_id" : {
        "IssueNumber" : 1871
    },
    "uniqueIds" : [ 
        ObjectId("61b993b8f8fba0f17accd60c"), 
        ObjectId("61b8803fdcb3fc4c9c03ca25")
    ],
    "count" : 2.0
}

Now you have ObjectId of all the duplicate records present in MongoDB collection. You can run a separate query to remove them.

Looking to insert and update records in MongoDB together? This will help you upsert documents in a single query.

Repair MongoDB instance after crash on Windows.

Conclusion

This article elaborates on how to find duplicate documents in MongoDB collection by a specific field.

TLDR;

Group records by the field on which you want to find duplicates
Add all the Object Ids to an array
Count the documents
Apply condition to fetch only documents that are available more than once in collection

Hope you find some value out of this article. If you liked the article, make sure to spread it across other developers. See you in next article 🙂

Improve Performance Using Web Workers | JavaScript

Jameer Khan — Tue, 18 Jan 2022 07:42:00 +0000

The original article is published here.

Ever faced performance problems in highlighting code? Ever heard about Web Workers? Well, I am going to explain the best way to highlight code using Web Workers in JavaScript that will give the best performance.

Web Workers are some World Wide Web tools that run task in a background thread without freezing web UI. Users can perform tasks like page scroll, button click or anything without being interrupted by web workers.

Benefits of using Web Workers to highlight code

There are several benefits of highlighting code snippets with Web Workers. Here are some of them:

Gives best performance
Nice to have web workers in case we scale application to handle large traffic
We can run web workers for only those items that we want to highlight (basically we can exclude items that we don’t want to highlight)

Problems in code highlight without Web Workers

We can obviously highlight code snippets on page load using hljs.highlightAll(); without using Web Workers. But there are some problems we may face in this way:
Blocks UI (Page becomes unresponsive till all the code snippets are highlighted)
Website performance may be down when we have a large traffic
By default it runs for all the pre tags available on the page. It becomes difficult to exclude some pre tags in case the page content is dynamic.

Highlight Code Using Web Workers

To highlight code using web worker, we will need a normal script file and a web worker script. The normal script will call the web worker and send the raw code as input. The web worker script will highlight the code and return the highlighted code to the normal script file. The normal script file will bind the highlighted code on web UI.

worker.postMessage and worker.onmessage will be used for communication between normal script and web worker script files.

Script to create new worker

Create a script.js file that will fetch all the pre tags available on the page and call the Web Worker for each of them.

const allPres = [...document.querySelectorAll('pre')];
for (let i = 0; i < allPres.length; i++) {
 setTimeout(() => {
 const block = allPres[i];
 var code = block.innerText,
 worker = new Worker('/worker.js');

 worker.onmessage = function (event) {
 var result = event.data;
 block.innerHTML = result;
 worker.terminate();
 };

 worker.postMessage(code);
 }, i * 500)
}

In the above code, I have used setTimeout with 500ms delay so that the next web worker can wait for 500ms before highlighting code.

Web Worker script

Create a file with the name worker.js and put the below code.

importScripts('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js');

self.onmessage = function (event) {
    var result = hljs.highlightAuto(event.data);
    postMessage(result.value);
};

self.onmessage function receives the raw code snippet in the callback. postMessage sends the highlighted code snippet back to the normal script file (script.js).

Run the application and go to the Network tab in the browser console. Web Workers are efficiently highlighting code snippets on the page without freezing the UI.

Conclusion

Web Workers are the best tools to implement non-blocking tasks like code highlights, API calls, etc. It helps in scaling the application to handle a large amount of traffic.

This article explains how to highlight code snippets using Web Workers without blocking the user UI in JavaScript. Hope it provides some value to improve your application performance.

Here you can implement some further techniques to improve the performance.

Best Way to Create Dynamic Components in Angular

Jameer Khan — Wed, 17 Nov 2021 05:33:21 +0000

The article is originally published to my blog here.

Angular is a TypeScript based Open Source JavaScript framework. A situation like this happens most of the time where we need to create components dynamically. This article explains what is the best way to create dynamic components in Angular.

A component is a page in Angular. We will try to create it dynamically using the latest Ivy Component API and see how it works. Let’s start!

ComponentFactoryResolver is removed from latest Angular release. This article explains how to use Ivy API to create components dynamically.

Create Dynamic Components in Angular

We have seen in the latest Angular release, the use of ComponentFactoryResolver is removed. Ivy creates the opportunity to instantiate the component with ViewContainerRef.createComponent without creating an associated factory.

Learn what are the new features and updates in Angular 13 here.

Create ChildLoader Directive

The first step in creating a dynamic component is to set up a generic child loader directive. It will be responsible to load components dynamically wherever required in the project.

load-child.directive.ts

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[dynamicChildLoader]'
})
export class DynamicChildLoaderDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

DynamicChildLoaderDirective is a generic directive that will load the child components dynamically throughout the application. ViewContainerRef is instantiated publicly that will be used to apply the component.

Setup parent to load component dynamically

Create a parent component that will hold the child component dynamically.

parent.component.html

<p>dynamic-components works!</p>

<ng-template dynamicChildLoader></ng-template>

Create a ng-template to hold the dynamic child component. dynamicChildLoader is used to apply the component dynamically. You can use it at any other place as well as per your requirement. It will create the component from ts file.

parent.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { DynamicChildComponent } from './dynamic-child/dynamic-child.component';
import { DynamicChildLoaderDirective } from './load-child.directive';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
  @ViewChild(DynamicChildLoaderDirective, { static: true }) dynamicChild!: DynamicChildLoaderDirective;
  constructor() { }

  ngOnInit(): void {
    this.loadDynamicComponent();
  }

  private loadDynamicComponent() {
    this.dynamicChild.viewContainerRef.createComponent(DynamicChildComponent);
  }
}

Initialize a ViewChild of DynamicChildLoaderDirective type. Create the dynamic component using viewContainerRef from DynamicChildLoaderDirective directive.

Output

Run the application and check the browser. You can see the child component is loaded dynamically.

Note: It does not require destroying dynamically loaded components. The new Ivy API does it itself.

Create dynamic components in Angular with Parameters

So far we have learnt how to create components dynamically using Angular new API. It’s time to pass parameters to dynamically created components. Let’s see how to implement it.

child.component.ts

Declare an @Input variable to receive custom data from the parent.

@Input() customData: any;

parent.component.ts

Pass the data from parent component at the time of instantiating the dynamic component.

const componentRef = this.dynamicChild.viewContainerRef.createComponent(DynamicChildComponent);
componentRef.instance.customData = {
  test: 'test key',
  value: 'test value'
}

Assign the created instance in a local variable componentRef. Access the child component’s customData variable using instance. Pass the custom data in the variable. You can pass multiple data by creating multiple @Input variables in the child component.

The custom data is received at child component that was sent from the parent at the time of creating component instance.

After Angular’s latest release, this is probably the best way to create a component dynamically in Angular. We do not need to destroy dynamically created components explicitly. Angular’s new API does it itself.

The article is originally published to my blog here.

Conclusion

That’s it! We learnt how to create a dynamic component in Angular with the New API without using ComponentFactoryResolver. It also shows how to pass parameters to dynamically created components in Angular.

Check other Angular related articles here.

Read how proper use of RxJS Observables and Operators can improve your Website Speed.

Some common points that can improve your Angular Website Speed you can’t imagine.

Speed Up Website With AWS S3 and CloudFront

Jameer Khan — Mon, 15 Nov 2021 05:14:52 +0000

The article is originally published to my blog: Improve Website Speed With AWS S3 and CloudFront

AWS S3 is a Simple Storage Service powered by Amazon Web Services. It provides object storage service and serves you the files in a faster way whenever accessed. AWS S3 with CloudFront is a great tool to speed up website performance. In this tutorial, we will learn how to improve website speed with AWS S3 and CloudFront.

This tutorial will help optimize the Angular application for scaling: 5 Best Ways To Optimize Angular For Scaling

Before diving into the tutorial, let’s read some basic questions.

What is AWS S3

S3 stands for Simple Storage Service. It is a service powered by Amazon Web Service for object storage on the cloud. It is static file storage. S3 is best to store any type of static files like images, js, css, html, xml, doc, and many more.

What is CloudFront

CloudFront is a cloud service powered by Amazon Web Services. It is used to speed up the contents such as html, css, js, images by delivering it through worldwide nearest datacenters. When a user requests content that is serving from CloudFront, the request is routed to the nearest edge location (edge location is the datacenter around the world) that provides the lowest latency (time delay), so that content is delivered with the best possible performance.

There could be two possibilities:

If the content is already in the edge location with the lowest latency, CloudFront delivers it immediately.
If the content is not in that edge location, CloudFront retrieves it from the origin and delivers to user.

Improve Website Speed With AWS S3 and CloudFront

Follow the steps below to implement AWS S3 and CloudFront in your application to speed up the performance.

Setup AWS S3

This is the first step towards implementing S3 and CloudFront. Login to AWS Console and search for “S3” in the top search box.

Click “Create Bucket”. Give bucket name a unique name. Choose an “AWS Region” as per your users locations or leave it blank. The region is basically the origin datacenter on which your files will be kept. It must be nearest to the users from where you get most of the traffic.

Once you fill Bucket Name and select the appropriate AWS Region, click the “Create Bucket” button. Wait for it to create the bucket.

The bucket is created and it will be listed on the buckets list.

By default, the bucket is disabled for public access. Check the column, it says “Bucket and objects not public”. You need to change the permission of it.

Click on the bucket name to open it and go to the “Permissions” tab.

Click the “Edit” button.

Uncheck the “Block all public access” checkbox and click “Confirm Changes”. It will enable public access to your bucket.

Note: It will make the bucket and all of its objects public.

Now the Bucket is ready to upload files. The next step is to upload files to the bucket.

Upload Static Files to S3 Bucket

Now the bucket is ready and we need to upload our static contents to it. That will be further served with CloudFront. I will upload the contents of bookmymark.com website. You can upload contents of your own website.

Note: Make sure to minify the js and css files. That will help in further improvement.

Click on the “Upload” button and drag and drop all the files that you need to upload to the bucket.

Before clicking the “Upload” button at the bottom, click on “Properties” to modify the meta tag.

In the “Metadata – optional” block, choose “System defined” in the Type field, “Cache-Control” in the Key field, and “604800” in Value.

It will add caching of 7 days to all the files you are uploading. Click the “Upload” button now.

Files are successfully uploaded to S3 Bucket.

Make S3 Files Public

The files uploaded in the S3 bucket are by default private. We need to make them public only then they will be accessible by CloudFront.

Select all files and click “Actions”. Choose the “Make public” option and click the “Make public” button when you see it on the popup screen.

Setup CloudFront Distribution

The next step is to setup cloudfront distribution. It will be attached to the S3 bucket and distribute the files to various datacenters. If a user accesses a file from a location that is far away from the file origin server location then the CloudFront will serve the file from the nearest server instead of fetching it from the origin server. It is a Content Delivery Network that serves the file from the nearest server.

Search for “CloudFront” in the top search box and open it.

Click the “Create Distribution” button.

Choose the S3 bucket in the “Origin domain” field. Click the “Create Distribution” button at the bottom.

Wait for the Distribution to become ready. You can refresh to check if it is ready.

Once it is ready, click on the distribution name and open it.

Copy the Distribution domain name from the marked area above. The S3 files will be served at this domain.

Measure the Improved Speed with CloudFront

We are all setup. Open the s3 files using the CloudFront domain.

Append the s3 file name in the last in CloudFront domain.

https://.cloudfront.net/backlinks.min.js

You can use your cloudfront domain and filename and open it in in new tab. Here is my file link.

It takes just 16ms to load the file using CloudFront and the size is also compressed to 4.8 kb from 19 kb.

Let’s check the same file speed from the bookmymark.com server without S3 and CloudFront.

The same file takes 451ms to load and the size is also not compressed.

It shows S3 with CloudFront is more than 20 times faster than the normal server. CloudFront makes not only a website fast but also helps in search engine ranking as the fast website is always preferred than the slow website.

As the CloudFront is implemented in the bookmymark.com website, it loads in just 580ms which is more than better.

Here is what Google Page Insights says about it.

The article is originally published to my blog: Improve Website Speed With AWS S3 and CloudFront

Conclusion

AWS S3 with CloudFront makes a huge difference in the website performance. It improves not only the speed but also the Search Engine Ranking of the website.

This article has covered how to improve website speed with AWS S3 and CloudFront. I hope it will add some value to your website improvement step. Check out the tutorial to further optimize the Angular website: 5 Best Ways To Optimize Angular For Scaling

Best Sites To Learn JavaScript for FREE

Jameer Khan — Fri, 12 Nov 2021 05:30:18 +0000

The article is originally published to my blog- 5 Best Sites to Learn JavaScript [FREE]

JavaScript is the world’s most used scripting language. It is used to build various types of applications mostly web apps. At this time we look forward to learning JavaScript online but we don’t find good resources. Many times it is not FREE. I will describe 5 best sites that will help you learn JavaScript for absolutely FREE. You will gain a lot out of it.

Before starting the tutorial, let’s see why JavaScript is important to learn.

What are benefits to learn JavaScript

This could be a genuine question for beginners- what are the benefits of learning JavaScript? why would I learn JavaScript over others? what are the career scopes in JavaScript? there could be plenty of questions. I will state some of the benefits of learning JavaScript here.

Learn one, use in many

JavaScript is a one-man army! You have to learn just one language and you can use it too many others like Angular, React, Vue, Node, and many more. They are all frameworks of JavaScript which means JavaScript codes and syntax will work everywhere.

Careers in JavaScript

JavaScript has huge career opportunities. You can become a full-stack developer with JavaScript. There are Front End Technologies, Backend Technologies, Artificial Intelligence, Robotics, Softwares, Mobile Apps, and many more places where JavaScript is used.

Easy to learn

JavaScript is an easy-to-learn language. There are so many resources out there to learn. One can easily become a master in JavaScript with online practice. There are many online JavaScript compilers you can start playing with JavaScript.

Best sites to learn JavaScript FREE

Here are 5 best sites where you can start learning JavaScript and become a master.

W3Schools

W3Schools is one of the best online learning platforms for JavaScript. It has “Try-it-yourself” option which makes it easier for any learner to just try it right away while learning. It provides good learning resources for FREE, one does not need to buy a course.

Complete all their tutorials one by one and you will be able to gain a lot out of it at the end. I would personally recommend W3Schools to learn JavaScript if you are a beginner and starting your career ahead.

TutorialsPoint

TutorialsPoint is the biggest learning platform. It has easy-to-understand content and is available with proper examples. One can learn the basics of JavaScript from it and then go to some other resources. It provides the basic contents which are not hard to understand and practice.

It provides FREE as well as paid content to start learning JavaScript. At the moment go for FREE content and if you like it then you can buy.

JavaScript Info

JavaScript Info provides simple but detailed tutorials with examples and tasks that make any beginners understand it easily. Here you can learn JavaScript, starting from scratch and go on to advanced concepts like OOP.

There are 3 parts of tutorials on the website-

The JavaScript language – learn all the aspects of JavaScript from basic to advanced
Browser: Document, Events, Interfaces – learn to manager browser page
Additional articles – extra topics that assume you’ve covered the first two parts of tutorial

MDN Web Docs (Mozilla Developer Network)

If we talk about learning JavaScript online for FREE then MDN Web Docs can not be missed from the list. It provides information about Open Web Technologies like HTML, JavaScript, CSS, and APIs for Progressive Web apps.

MDN Docs has tutorials for beginners, intermediate and advanced learners.

Learn JavaScript

By now you have learned enough JavaScript. It’s time to implement the JavaScript knowledge in practical examples. Learn JavaScript is an online platform where you can learn and implement. It will teach you JavaScript in the context of building web applications.

Learn JavaScript has a collection of tests that you can implement in a live editor. It will help you boost the practical experience.

You will learn & practice new syntax, functions, and concepts step-by-step in lessons, and have direct application in challenges and projects.

Do you optimize your JavaScript code to remove unnecessary variables and spaces? If not, I would recommend you to minify it and then use it anywhere.

The article is originally published to my blog- 5 Best Sites to Learn JavaScript [FREE]

Conclusion

JavaScript is the most used worldwide scripting language. There are many career opportunities out there around the world. One can easily become a Front End developer and start a career in programming.

This article describes the best sites to learn JavaScript for FREE. I hope you will get some value out of it.

If you liked the article, please share it with your other friends so they can also start learning JavaScript for FREE and start a career in Web Development.

Learn more articles on JavaScript.

Benefits Of Using Pipe Over Function In Angular

Jameer Khan — Sun, 31 Oct 2021 09:24:13 +0000

The article is originally published at my blog here: Benefits Of Using Pipe Over Function In Angular

Do you use functions / methods to implement various conditions and DOM manipulations in Angular ? If yes, trust me it will worsen your website performance. In this tutorial I will explain how pipes increase your angular website performance and what are the various benefits of using Pipe over Functions based on a case study.

Before diving straight into tutorial, let’s start with some basic questions.

Angular Pipe

The first question comes in mind- What is Pipe? A simple definition of pipe- it is a decorative function in Angular used to manipulate DOM. It takes an untransformed value as input and returns a transformed value as output.

Types of Pipe

Various built-in pipes are provided by Angular- AsyncPipe, CurrencyPipe, DatePipe, JsonPipe and many more. Complete list here.

How to use pipe in code?

This could be a common question for beginners- how can I use a pipe? Check the code below.

The example code below demonstrates the use of date pipe. See how the output is manipulated on the DOM.

app.component.ts

date: Date;

constructor() {
  this.date = new Date();
}

app.component.html

<b>Date Pipe Example: </b>
<span>{{ date | date: 'shortDate'}}</span>

Result with Date Pipe

Result without Date Pipe

Pure and Impure Pipe

Pure pipe is a type of function which runs only when a change has been done in the input value. They are called as pure because they do not run every time a state is changed or a change detection happened. They are only called when a value is changed. This improves the performance (see below case study).

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customUpper'
})
export class CustomUpperPipe implements PipeTransform {

  transform(value: string): string {
    console.log('Custom pipe is called');
    return value.toUpperCase();
  }
}

Impure pipe is a type of function which runs for every Angular lifecycle events as well as whenever state or input value changes.

@Pipe({
  name: 'customUpper',
  pure: false  // <--- this will convert a pure pipe to impure one
})

It is not advisable to use a method to manipulate your DOM. Use pipes instead of methods if you have a big application and want to improve performance.

Benefits of using Pipe over Function

Let’s take an example of doing same thing once with method and once with pipe.

Uppercase using pipe

In this case study we will take an example of converting string to uppercase using a pure pipe. And we will see the output.

Create a server side data table with fake JSON api to demonstrate it better.

1. Create a data table with fake api response

app.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, Injectable, OnInit } from '@angular/core';

@Injectable()
export class AppService {
  constructor(private http: HttpClient) { }

  public getData() {
    return this.http.get('https://fakestoreapi.com/products');
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [AppService]
})
export class AppComponent implements OnInit {
  date: Date;
  data: any = [];

  constructor(private appService: AppService) {
    this.date = new Date();
  }

  ngOnInit() {
    this.appService.getData().subscribe(data => {
      this.data = data;
    });
  }
}

app.component.html

<table>
  <tr>
    <th>Title</th>
    <th>Category</th>
    <th>Description</th>
  </tr>
  <tr *ngFor="let item of data">
    <td>{{item.title}}</td>
    <td>{{item.category}}</td>
    <td>{{item.description}}</td>
  </tr>
</table>

2. Create a custom pipe `custom-upper`

ng g p custom-upper

Put the code to convert string to uppercase in the created pipe.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customUpper'
})
export class CustomUpperPipe implements PipeTransform {

  transform(value: string): string {
    console.log('Custom pipe is called');  // console.log will let us know how many times it's called
    return value.toUpperCase();
  }
}

3. Consume the custom pipe in template

Call the customUpper in the template code.

<td>{{item.category | customUpper}}</td>

4. Check the output

Run the app and open Browser Console to check the output.

Notice in the screen above that the console is printed 20 times. Its because the api gives 20 results and it ran once for each row which is fine.

Now check the same example without using a pure pipe.

Uppercase using method

In the above case study we already seen the output of converting string to uppercase using a pipe. In this case study we will take the sample example ie. convert string to uppercase but using a method at component. And we will see the output.

1. Convert to uppercase using a method

Create a method convertToUpperCase in component to convert text to upper case. Put a console.log in the function to know how many times it is called from UI.

convertToUpperCase(str: string) {
    console.log('Uppercase fn is called');  // put a console to know how many times the function is called
    return str.toUpperCase();
}

2. Consume the custom uppercase method in template

Call the method from template.

<td>{{convertToUpperCase(item.category)}}</td>

Check the output.

Notice the output in console. You will see it’s called 4 times more than what was called in pipe. This will make a huge difference if you are building a large Angular application that has complex layouts and binding.

The article is originally published at my blog here: Benefits Of Using Pipe Over Function In Angular

Conclusion

In this article we learnt about the benefits of using Pipe over Function in Angular. They make a huge difference in the performance.

Check this article to optimize your Angular application: 5 Best Ways To Optimize Angular For Scaling

Must Read Articles:

TOP 100+ DoFollow Backlink Sites | High PR Free Backlink Sites 2021

Jameer Khan — Mon, 25 Oct 2021 12:07:29 +0000

List of DoFollow High PR Free Social Bookmarking Sites

[Serial] [Website] [Link Type]
1 https://bookmymark.com/ DoFollow
2 https://www.digg.com/ DoFollow
3 https://www.soup.io/ DoFollow
4 https://www.pearltrees.com/ DoFollow
5 https://backlinks.stackblogger.com/ DoFollow
6 http://www.n4g.com/ DoFollow
7 http://www.storeboard.com/ DoFollow
8 http://www.bookmarkingbase.com/ DoFollow
9 http://www.bookmarkmaps.com/ DoFollow
10 http://www.video-bookmark.com/ DoFollow
11 https://www.bookmarkmonk.com/ DoFollow
12 http://www.votetags.info/ DoFollow
13 http://www.zypid.com/ DoFollow
14 http://www.highprbookmarking.com/ DoFollow
15 https://story.wallclassifieds.com/ DoFollow
List of DoFollow High PR Free Social Bookmarking Sites

DEV Community: Jameer Khan

How to create AWS Instance with Terraform

Benefits of Using Terraform

Provider Flexibility

Infrastructure as Code

State Management

Plan and Apply

Create an AWS EC2 Instance with Terraform

Install Terraform

Create Terraform Configuration Files

Initialize Terraform

Plan and Apply

Updating the Instance Type

Modify the Configuration

Plan the Changes

Apply the Changes

Destroying the EC2 Instance

Conclusion

Custom Format Date Time in MS SQL

MS SQL Custom format a date in the format of ‘dd/MM/yyyy’

MS SQL Custom format a date in the format of ‘MM/dd/yyyy’

MS SQL Custom format a date in the format of ‘dddd, mmmm dd, yyyy’

Extract Metadata Information From URL | JavaScript

Extract Metadata Information from URL

Install link-meta-extractor package

TypeScript Usage

Work with async/await

Work with promise/callback

JavaScript Usage

Work with async/await

Work with promise/callback

Additional Metadata Fields Extraction

Final Say

FastifyError- Request body is too large

How the error looks

Resolve FastifyError- Request body is too large

Conclusion

Angular and RxJS: Refresh a Component From Another

Real examples

Refresh data table at component after action on another

Reload a dropdown after action on a different component

Refresh multi-lingual content explicitly

Refresh a Component From Another Using RxJS

Reload part of component using RxJS Subject

Refresh part of component using EventEmitter

Conclusion

Finding Duplicate Documents in MongoDB Collection

MongoDB Group Records by Field

MongoDB Get Duplicate Documents

Conclusion

Improve Performance Using Web Workers | JavaScript

Benefits of using Web Workers to highlight code

Problems in code highlight without Web Workers

Highlight Code Using Web Workers

Script to create new worker

Web Worker script

Conclusion

Best Way to Create Dynamic Components in Angular

Create Dynamic Components in Angular

Create ChildLoader Directive

Setup parent to load component dynamically

Output

Create dynamic components in Angular with Parameters

Conclusion

Speed Up Website With AWS S3 and CloudFront

What is AWS S3

What is CloudFront

Improve Website Speed With AWS S3 and CloudFront

Setup AWS S3

Upload Static Files to S3 Bucket

Make S3 Files Public

Setup CloudFront Distribution

Measure the Improved Speed with CloudFront

Conclusion

Best Sites To Learn JavaScript for FREE

What are benefits to learn JavaScript

Learn one, use in many

Careers in JavaScript

Easy to learn

Best sites to learn JavaScript FREE

2. Create a custom pipe `custom-upper`