Array sorting in JavaScript

 REf:

 https://joel.net/custom-array-sort-algorithms-in-javascript

Complex Custom Sorting

I recently had a use case where an API was returning data that looked like this.

// API Response
["1", "10", "2", "BLA", "BLA2", "3"]

The Array contained all String items, but the business wanted the items to display like "1, 2, 3, 10, BLA, BLA2".

That meant, I had to detect when the String was a Number and Sort the "numbers" first and the text after.

As complex as that sounds, the sort algorithm wasn't too bad.

const isNumeric = (num) => !isNaN(num)

const customCompare = (a, b) => {
    if (isNumeric(a) && !isNumeric(b)) return -1
    if (!isNumeric(a) && isNumeric(b)) return 1
    if (isNumeric(a) && isNumeric(b)) return a - b
    return a < b ? -1 : 1
}

// [ '1', '2', '3', '10', 'BLA', 'BLA2' ]




Dockerfile and Docker compose

 Dockerfile And docker compose:

• https://medium.com/@madhukaudantha/dockerize-microservice-3d7562ffcda3
• https://dzone.com/articles/microservices-an-example-with-docker-go-and-mongod
• https://github.com/mmorejon/microservices-docker-go-mongodb/blob/master/docker-compose.yml

Node image associated with linux system. Thats why no need to add ubuntu/debien system

Docker and docker  need to install seperately

From: as a base image

RUN: this command run during image creation

CMD: this commnad run when container create from image

Volume:

Expose:

ENV: to set the environment variable

Docker compose.yml file example of winstone backend service

version: "3"

services:

kupi-backend-dev:

build:

context: .

dockerfile: Dockerfile.development

ports:

- "8080:8080"

environment:

- PORT=8080

- MAIL_CONFIG_PATH=/etc/mail-config/config

volumes:

- ./src:/usr/src/app

- /usr/src/app/node_modules

- ./local/mail-config:/etc/mail-config

- ./local/keydb:/etc/keydb

Dockerfile.development file of winsotne backend service

FROM node:carbon

# Create app directory

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app

# Install sqlite3 for holding client credentials

RUN apt-get -y update

RUN apt-get -y upgrade

RUN apt-get install -y sqlite3 libsqlite3-dev

RUN mkdir /etc/keydb

RUN /usr/bin/sqlite3 /etc/keydb/test.db

# Install app dependencies

COPY src/package.json /usr/src/app/

RUN npm install

# For watching files

RUN npm install --global nodemon

# For running tests

RUN npm install --global expect

# Bundle app source

COPY ./src /usr/src/app

# Run tests on build

RUN npm test

EXPOSE 8080

# Run tests and restart server on file changes

CMD [ "nodemon", "-x", "npm test", "|", "nodemon", "-L", "server.js" ]

Docker and Docker in aws

 +

RUN - command triggers while we build the docker image.  A Dockerfile can have many RUN steps that layer on top of one another to build the image.

CMD - command triggers while we launch the created docker image.

ref: 

• https://stackoverflow.com/questions/37461868/difference-between-run-and-cmd-in-a-dockerfile
• https://www.youtube.com/watch?v=i7ABlHngi1Q (VVIII ********* to understand the docker)
• https://www.google.com/amp/s/www.freecodecamp.org/news/how-to-enable-live-reload-on-docker-based-applications/amp/ (VVI *********** during development )

Design pattern discussion

 Design pattern: 

Design pattern represents a industrial best practice that is used by experienced developer. Design pattern concept is needed to develop a framework or understand the framework coding.

Type:

1. Creational Patterns: Discuss about a object create by hiding object creation logic.  
   
2. Structural Patterns: Structural patterns are concerned with how classes and objects are composed to form larger structures.
   
3. Behavioral Patterns: These design patterns are specifically concerned with communication between objects.

Design Pattern - Factory Pattern  (EASY)

A normal factory produces goods; a software factory produces objects. And not just that — it does so without specifying the exact class of the object to be created. To accomplish this, objects are created by calling a factory method instead of calling a constructor.Usually, object creation in Java takes place like so:

SomeClass someClassObject = new SomeClass();

The problem with the above approach is that the code using the SomeClass’s object, suddenly now becomes dependent on the concrete implementation of SomeClass. There’s nothing wrong with using new to create objects but it comes with the baggage of tightly coupling our code to the concrete implementation class, which can occasionally be problematic.

Ref: https://medium.com/educative/the-7-most-important-software-design-patterns-d60e546afb0e

Design Pattern - Abstract Factory Pattern (EASY)

Abstract Factory patterns work around a super-factory which creates other factories. This factory is also called as factory of factories.

Ref: https://www.tutorialspoint.com/design_pattern/abstract_factory_pattern.htm

Design Pattern - Singleton Pattern

Singleton pattern is one of the simplest design patterns in Java. This type of design pattern comes under creational pattern as this pattern provides one of the best ways to create an object.

This pattern involves a single class which is responsible to create an object while making sure that only single object gets created. This class provides a way to access its only object which can be accessed directly without need to instantiate the object of the class.

Implementation Example: Database connection. Connection will be created only one time.

REf: https://www.tutorialspoint.com/design_pattern/singleton_pattern.htm

Design Patterns - Builder Pattern

As the name implies, a builder pattern is used to build objects. Sometimes, the objects we create can be complex, made up of several sub-objects or require an elaborate construction process. The exercise of creating complex types can be simplified by using the builder pattern. A composite or an aggregate object is what a builder generally builds.

When you need multiple object to create a object. That time this design pattern need. 

Ref: https://medium.com/educative/the-7-most-important-software-design-patterns-d60e546afb0e

Devops: Jenkins

•  https://www.youtube.com/watch?v=FX322RVNGj4 (start from 32.00 min)(****)

1. Show how to configure email (SMPT) 
2. show to how to run simple build
3. show how to build from git command
4. show how to build from git and deploy to tomcat server autmatically (VVI)
5. show how to create master slave node in jenkins (VVI)
6. creating pipeline to run multiple job (2:00 hour later) (VVI)
7. also show pipeline using groovy scripting

What is the role of configuration managemnet:

 Helps in administrating and managing several server and maintains intregety of the entire infrastructure

How does continues monitoring help in maintaining the entrie architecture of the system.

Continues monitoring in devops is a process of detecting, identifying and reporting any faults or threates in the entire infrastructure of the system.

Code deploy to EC2 using pipeline (code build ad code deploy)

 https://www.youtube.com/watch?v=ND8hujOoZ14

https://docs.aws.amazon.com/codepipeline/latest/userguide/tutorials-simple-codecommit.html

Create a git repository

for code deploy need two role

• – AmazonEC2RoleforAWSCodeDeploy

• AWSCodeDeployRole

******************************************************************

************************************************************

#!/bin/bash
yum -y update
yum install -y ruby
yum install -y aws-cli
cd /home/ec2-user
aws s3 cp s3://aws-codedeploy-us-east-2/latest/install . --region us-east-2
chmod +x ./install
./install auto

Review the ec2 instance creattion

pipeline

Create pipeline

pipeline source storage

Add build stage:

Code build evnronment

****************************************************************************

CODE deploy

Create deployment group

Javascript Error: Rang error - maximum call stack size exceeded

1. Use settimeout to avoid the maximum call stack
1. https://www.hhutzler.de/blog/avoid-maximum-call-stack-size-exceeded-in-javascript/  (*******)
2. We can increase the stack size 

            Nodejs default size 492 kBytes, 

            to increase the stack size, we can write "node --stack-size=4096"

https://stackoverflow.com/questions/11332422/how-can-i-increase-the-maximum-call-stack-size-in-node-js

window resize

 

this.listStyle = {

height: (window.innerHeight - 85) + 'px',

overflow: 'auto'

};

this.windowWidth = window.innerWidth;

this.onResize('');

@HostListener('window:resize', ['$event'])

onResize(event) {

this.windowWidth = window.innerWidth;

this.listStyle = {

height: (window.innerHeight - 60) + 'px',

overflow: 'auto'

};

if(this.windowWidth <= 700){

this.maxHeaderChars = 20;

}

else if (this.windowWidth > 700 && this.windowWidth <= 1200){

this.maxHeaderChars = 50;

}

else{

this.maxHeaderChars = 100;

}

}

Image upload in angular

 html

<div fxLayout="column" class="attachment-add-content form-subsection-wrapper">

<label class="mat-caption gray-54 label-no-wrapper">{{ 'Logo / Image' | i18n }}</label>

<label id="fileuploadbutton" class="mat-button mat-primary mat-raised" for="take-picture">Select a

document</label>

<div class="show-picture-outer-wrapper" *ngIf="showPicture">

<div id="show-picture-wrapper">

<img id="show-picture" src="{{imgURL}}" alt="preview" />

</div>

</div>

<span id="filenamedisplay" class="" *ngIf="showName"> {{fileName}}</span>

<input type="file" id="take-picture" (change)="fileProgress($event)"

accept="application/*|audio/*|video/*|image/*|text/*|multipart/*|message/*|model/*" />

</div>

ts

fileProgress(e: any) {

let files = e.target.files;

if (files && files.length > 0) {

this.file = files[0];

let mime = (this.file.type || this.file.mimeType);

if (mime && mime.match(/image./)) {

// /this.imgURL = URL.createObjectURL(this.file);

let reader = new FileReader();

reader.readAsDataURL(this.file); // read file as data url

reader.onload = (event) => { // called once readAsDataURL is completed

this.imgURL = event.target.result;

}

this.showName = false;

this.showPicture = true;

} else {

this.showName = true;

this.showPicture = false;

this.fileName = this.file.name;

}

}

}

Foreach and combine

const observables: Observable<any>[] = data.map(item => {

item = JSON.parse(item);

return this.facilityService.getFacilityName(item.facility);

});

let sub1 = combineLatest(observables).pipe(

take(1),

map((names) => {

return names;

})

).subscribe((result) => {

sub1 && sub1.unsubscribe();

// console.log("facilti name ", result);

let returnResult = {};

if(data.length == result.length){

data.map((item, i) => {

item = JSON.parse(item);

returnResult[item.facility] = result[i];

});

}

callback(returnResult);

});

Code deploy to EC2 using code deploy