Here is my terminal setup:

In the first part, we are going to talk about the top 5 tools (my personal choice)

• Alacritty
• Oh My ZSH!
• Tmux
• Starship
• Pet

Alacritty

As a developer who spends most of the time in the terminal. When I think about machine setup, the First thing that comes in my mind is Alacritty.

Its GitHub page describes as follows, so do I.

Alacritty is the fastest terminal emulator in existence. Using the GPU for rendering enables optimizations that simply aren't possible without it. Alacritty currently supports macOS, Linux, BSD, and Windows.

I was a fan of Iterm multi panes but after started using alacritty + tmux, now I barely open iTerm on my machine.

WHY Alacritty is better:

• Faster: It is written in rust with the philosophy of focusing on speed. Alacritty is one of the fastest terminal emulators out there.
• Highly customizable: As developers, we love customization and alacritty provides a lot room for that. It's configuration file is very well made and easy to use by just editing "alacritty.yaml" file.
• Elegant and minimal: Once you installed alacritty, the first thing you notice is very minimal, elegant UI and no clutters like UI settings and so on.

How to Install:

Simply install with brew for mac

brew cask install alacritty

Refer official installation guide for other operating systems

by default, alacritty does not create a config file. you can take default config file from GitHub or here is my config file.

create one on this location for alacritty to read it.

~/.config/alacritty/alacritty.yml

Oh My ZSH!

The next tool that I cannot live without is ZSH. Zsh is also called Z shell, an extended version of Bourne Shell (sh) with plenty of features and support for plugins and themes. Usually, it may seem bash is enough for everything but once you started using zsh, you cannot go back to bash again because it provides thousands of useful features which increases your productivity.

So Why use it?

Zsh has so many features but here are some of the major ones.

• Automatic cd: Just type name of the directory
• Recursive path expansion: For example “/u/lo/b” expands to “/usr/local/bin”
• Spelling correction and approximate completion: If you make a minor mistake typing a directory name, ZSH will fix it for you
• Plugin and theme support: ZSH includes many different plugin frameworks

plugins and themes support is probably the coolest feature of ZSH.

Installing ZSH

If you're on Mac, use brew

brew install zsh

If you’re on Linux, the commands can vary by the distro, but it should be a default package in your package manager. You can consult this guide if you’re having trouble.

If you’re on Windows, you may not even have Bash in the first place. You can follow this guide to set that up and enable ZSH.

Installing Oh-My-Zsh

Your terminal never felt this good before.

Oh-My-Zsh is a famous framework for managing plugins for ZSH and it comes with plenty of plugins and themes as well.

oh-my-zsh has simple install script you can run

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Read more about zsh plugins and themes

tmux

Simply speaking, Tmux act as a windows manager within your terminal that allows you to create multiple windows and panes in a single terminal window.

here is an example of multiple panes in a single window.

So Why use it?

• Session management: Actually, in the background, all these panes and windows get its own terminal, and its managed by the tmux server so even you close your terminal application, tmux keeps the session in the background, so you can easily attach and detach to the session until you restart the machine.
• Platform independence: I can use tmux on my Macbook, my Linux notebook, Cloud servers, Raspberry Pis, BeagleBones, etc.
• customizable: There are many ways that I can customize the look and behavior of my tmux and sync this across different platforms using dotfiles.

Installing Tmux

Fortunately installing tmux is pretty straightforward on most distributions a simple sudo apt-get install tmux (Ubuntu and derivatives) or brew install tmux (Mac) should be sufficient.

Tmux has a prefix key to trigger functions by default it is ctrl+b but most of the people change it to ctrl+a here is my tmux config file

The learning curve of tmux little bit steep but worth learning, you can learn more about tmux here

Starship

Starship is a cross shell prompt and it is extremely handy to know about multiple things such as current state of git, which folder are you in, what version of the programming language you are using, and so on.

it is minimal, blazing-fast, and infinitely customizable prompt for any shell!

So Why use it?

• It saves tons of time and minimizes human errors
• It is very easy to install and customize
• Works on most of the popular shell
• Extremely faster

here is the demo video of the starship

here is quick install guide from official page

PET

Most of the time we want a command that was used a week ago, and it is very difficult to retrieve them. yes, we all have this pain. To fix this problem I wanted to write a program that saves all my important commands into GitHub gist so I can get it back whenever I want. But later I found an application which does the exactly same thing with lot of additional features as well, that is PET.

Pet is a command-line snippet manager

It also provides code script to integrate with our shells, customizable keybindings and it also provides the option to save these commands as private or public gist.

So Why use it?

• Register your command snippets easily.
• Use variables in snippets.
• Search snippets interactively.
• Run snippets directly.
• Edit snippets easily (config is just a TOML file).
• Sync snippets via Gist or GitLab Snippets automatically.

How to install?

You can use homebrew on OS X.

$ brew install knqyf263/pet/pet

Debian, Ubuntu

Download deb package from the releases page

$ wget https://github.com/knqyf263/pet/releases/download/v0.3.0/pet_0.3.0_linux_amd64.deb
dpkg -i pet_0.3.0_linux_amd64.deb

How to use?

These are available pet commands.

$ pet --help
pet - Simple command-line snippet manager.

Usage:
  pet [command]

Available Commands:
  configure   Edit config file
  edit        Edit snippet file
  exec        Run the selected commands
  help        Help about any command
  list        Show all snippets
  new         Create a new snippet
  search      Search snippets
  sync        Sync snippets
  version     Print the version number

Pet commands are very easy to use but you can make a lot easier by following the below steps.

prev command

Instead of using pet new, you can configure prev command with this guide , thereafter just enter the command prev to save your last executed command into the pet.

Select snippets at the current line (like C-r)

Rather than using pet search command every time, you can simply assign a keybinding for it using this guide

Sync with Gist

Backup and sharing is an important thing to do and pet provides an easier way for that, using pet sync you can manually upload all your saved commands to gist, it also can be automated using pet configure and set auto_sync to true. Read more about pet sync

That's it for part 1, Feel free to post your favorite terminal tools on comments. See you in next the part 2 with another 5 useful terminal tools.

We know that all write requests go to the master and all read requests go to the replicas but there is an issue to achieve it because both master and replicas should be in sync always otherwise consistency problems will occur. So let's see what are the different types of replication strategies out there and how are they addressing consistency issues.

There are three types of replication methods, they are

• Synchronous replication
• Asynchronous replication
• Semi-synchronous replication

Synchronous replication:

In this replication method, once the master gets a write request from the application. first, writes data into the database then sends these changes to all replicas. Then the master waits till all replicas write the changes into their database and acknowledge and finally master responds success message to the application write request.

let consider write operation when the user request for the write request, the application sends a request to the master in time T1 and master database write the changes in Time T2 and send those request to the replicas.

Replicas receive the changes in T3 and T4 and populate data changes but that time master will be waiting for replica's response. As soon as replica1 is done with task send an acknowledgment to the master server which is T5 and master still waiting for replica2's response. At time T6 replica2 finishes the task sends acknowledge to the master server. Now master got the acknowledgment of all replicas. Now master will respond as the success message to the users.

you also can easily see that the problem is Time. From time T2 to t7 master is just waiting for replica's acknowledgment by the time the user also is waiting. It affects user experience as well and what if replica2 has some problem and it takes a longer time to respond so the master database is ideally waiting for a long time. this is an unnecessary waiting time for the user. In this method, Time will grow exponentially when replicas count getting increased because the master has to wait until all replicas to acknowledge.

Asynchronous replication:

In the Asynchronous replication method, the master sends the confirmation to the application as soon as it has received the message and written successfully into the database then it sends the replicate request to all replicas.

This looks great, we don’t notice any performance impact as the replication happens in the background after we already got a response and if the replica is dead or slow we won’t even notice it, as the data was already sent back to the client. Life is good.

but there are two problems with this method one is replication lag and another one is we are weakening out durability guarantees lets focus of durability issue first

our problem is that if the master fails before it sends the request to replicas then we lost the changes.

Yes, it may be totally fine to take the risk, but think about dealing with financial transactions? it is a nightmare.

Another issue is that there could be some data delays between master and replicas so that we cannot send read requests to not synced replicas, this is called replication lag.

Semi-synchronous replication:

There's some middle ground, We can define some replicas to replicate synchronously and others just use asynchronous manner. this is called Semi-synchronous replication

When to use what

There is no clear answer to this question; your choice depends entirely on your business priorities. Asynchronous replication works best with projects that span across long distances and are allocated a minimal budget. It is also suitable for businesses that can afford partial data loss. On the other hand, synchronous replication is performed when reliable and long-term storage is necessary and the business cannot afford to lose any critical data. Also, semi-synchronous replication can be used to achieve the best of both.

In the next article, we will talk about How to create database replication architecture for the Postgres database.

Master-Slave architecture also called Active-Passive or Active-Standby or Leader based replication architecture

The database request can be two types such as,

• Write request (Insertion, deletion, and updation)
• Read request

Note: I replaced all words slave with replica since it can be considered as offensive :p

Simple Master-Replica Architecture

Above diagram is the simple master-replica architecture contains one master and two replicas

Basically master replicates the database into multiple copies(also called replicas) through the replication stream.

All read/write request goes to the master. If any data changes happen in the master those changes will be streamed to replicas as well so master and replicas are in sync always. the lag between master and replica is called replication lag

Avoid downtime using replicas

Since all request goes to master then what is the use of these replicas? What happens when our master goes down for some reason then our application also will go down because there is no master to handles requests.

Using replicas we can avoid this. When the master goes down. there will be an election between replicas and one replica will be elected as leader and replace the dead master. as you can see in the above example since the master is dead replica-1 is elected as the new master.

In this way, replicas can be used to achieve high availability database.

Improve performance using replicas

We can also significantly improve the performance of our database by

• Redirecting all read requests to replicas

• Redirect only write requests to master

previously master handles both read and write but now we bifurcated the requests among master and replicas. this kind of architecture balances the load on our database server. In our example diagram, there are only two replicas but in actual application, it can be more as 100s of replicas based on application load so the read requests even more divided among replicas.

Now let say master goes down for some reason. now only our write requests will go down till master switch happens and users can still do the read requests so this will not be a single point of failure.

as said above even master goes down immediately the master switch will happen so there will be very little downtime for write requests.

also, we can tell our application to select the nearest replicas based on geographical locations for reading requests so network latency will be improved drastically.

In the next article, we will discuss how synchronization happens between master and replicas.

What is the replication

Replication is keeping multiple copies of the database.

Why replication is important

There are many reasons. I have taken three important reasons for having multiple copies of the database they are,

• Availability
• Latency
• Scalability

Let's see each one of them in details

Availability

The first thing is availability, the application needs data from the database or application needs to write/persist data into the database so it fires a request to the database server then database respect to that request. This is how the application and database server communicates.

Let's say we have a single copy of the database and the database resides on a particular server goes down for some reason like something corrupt on that machine, then what happens to the request which goes to the database? The database cannot respond to the application requests and our application will go down so the application will not be available to serve the users. This is called single point of failure.

If we have multiple replicas of the database, also we have some mechanism to redirect all requests to another machine so even one machine goes down another will serve the requests. This is one of the most important reasons for having multiple replicas of the database.

Latency

Assume our application is available in different geographical locations like the US, India, Australia and so on but our database resides in the server located in India. The person lives in the US who uses our application then all request network packets travel from the US to India to get data from the database and response packets will go back from India to the US. there is huge network latency is created because of the distance.

So if we keep a replica of our database in the US itself so whenever the user hits the request our application will go to the database which nearest to that particular geographical location. Our replication has reduced the latency caused by distance. Now you understand another important reason to have a replica of the database.

Scalability

Imaging our application is getting requests like millions per second and one single database cannot serve them all even it is managed to serve but it cannot give data in a fraction of seconds and users will feel the slowness of the application.

If we have multiple replicas of the database in different servers, we can balance the load into different servers using some load balancer and this is called load balancing. Now we have divided the requests to the different servers so the chances of overloading the servers are very less.

Another thing is that if we have multiple replicas we can do like one set of replicas takes care of write requests and others will serve read requests, in this way system is more scalable.

These are the most important reasons to have replication of the database. In the next articles, we will see Master-Slave replication architecture.

Update: Read Master-Slave replication architecture

• Open Sudo configuration file with the following command

sudo vi /etc/pam.d/sudo

Initially file content should look like this

# sudo: auth account password session
auth       required       pam_opendirectory.so
account    required       pam_permit.so
password   required       pam_deny.so
session    required       pam_permit.so

• Paste auth sufficient pam_tid.so on line 2 of the document (underneath the initial comment line)

After pasting contents should be like this

# sudo: auth account password session
auth       sufficient     pam_tid.so
auth       required       pam_opendirectory.so
account    required       pam_permit.so
password   required       pam_deny.so
session    required       pam_permit.so

• Save the file (Since this file is read-only, you may be required to do force save, Eg vim will require you to use wq! when saving)

• Now try to use sudo command on terminal and you should be prompted to authenticate with Touch ID as shown below

• If you click 'Cancel' you can just enter your password at the terminal prompt if you click 'Use Password' you can enter your password in the dialog box.

• If you SSH into your machine it will fall back to just use your password since you can't send your TouchID fingerprints over SSH

• If you're using iTerm2 (v3.2.8+) you may have seen Touch ID failing to work with sudo in the terminal despite having made the pam_tid.so modification as above, and it works in previous versions. This is down to an advanced feature that seems to be now enabled by default - this needs to be turned off here: iTerm2->Preferences > Advanced > (Goto the Session heading) > Allow sessions to survive logging out and back in.

Reference: https://apple.stackexchange.com/questions/259093/can-touch-id-for-the-mac-touch-bar-authenticate-sudo-users-and-admin-privileges

I found a great tool to ease the navigation in the terminal, called Apparix. It lets you bookmark a folder so that you easily can navigate to it just by typing

to nameofbookmark

To install apparix in Ubuntu, type

sudo apt-get install apparix

To install in Mac, type

brew install -v apparix or Run this Script

in a terminal window.

After installation, you need to set up the aliases bm for bookmarking and to for going to a bookmark by adding a few functions to your .bashrc file in your home folder (if you don’t have this file, you can create it yourself).

You’ll find the functions you need to add by issuing the command

apparix –shell-examples

in a terminal window. Copy everything below Bash-style functions except the CSH-style aliases. Paste this into your .bashrc file.

Open up a new terminal, cd to your directory of choice and type

bm mybookmark

to bookmark the folder. Afterward, you can go to any folder and type

to mybookmark

to go to your bookmark.

This tool is, of course, available for other Linux distributions too.

Reference: https://micans.org/apparix/

Those who want to become a Full Stack Developer their first choice is MEAN Stack because it has a lot of scopes and easy to learn as well but preparing is hard so Here's a Cheat Sheet - Inspired by The Technical Interview Cheat Sheet.md

This list is meant to be both a quick guide and reference for further research into these topics. It's basically a summary of important topics, there's no way it can cover everything in depth. It also will be available as on Github for everyone. Please feel free to rise a issue or PR if anything missing or any correction required.

What the heck is MEAN Stack

• MEAN is an acronym for MongoDB, ExpressJS, AngularJS and Node.js
• One of the main benefits of the MEAN stack is that a single language, JavaScript, runs on every level of the application, making it an efficient and modern approach to web development.

MongoDB

MongoDB Introduction

• What is MongoDB and where to be used ?

MongoDB is a type of NoSQL DB and used in the following applications such as unstable schema, need highly scalability and availability. Read More

• Difference between NoSQL and SQL ?

Read more detailed comparison on MongoDB vs MySQL

Install MongoDB

• How to Install MongoDB and Robo 3T?

Install MongoDB and Robo 3T (Robo 3T -formerly Robomongo is the free lightweight GUI for MongoDB enthusiasts)

• How to Install the mongoose node module?

Mongoose is MongoDB driver which connects MongoDB and Node.JS Read Document

Work with Mongoose

• Start with Schema?

Everything in Mongoose starts with a Schema. Each schema maps to a MongoDB collection and defines the shape of the documents within that collection.

 var mongoose = require('mongoose');
  var Schema = mongoose.Schema;

  var blogSchema = new Schema({
    title:  String,
    author: String,
    body:   String,
    comments: [{ body: String, date: Date }],
    date: { type: Date, default: Date.now },
    hidden: Boolean,
    meta: {
      votes: Number,
      favs:  Number
    }
  });

• Creating a Model?

To use our schema definition, we need to convert our blogSchema into a Model we can work with. To do so, we pass it into mongoose.model(modelName, schema)

var Blog = mongoose.model('Blog', blogSchema);

Read More Mongoose guide

Basic CURD functions

Mongoose models provide several static helper functions for CRUD operations.

• create()

Save one or more Documents to the database

• insertMany()

Shortcut for validating an array of documents and inserting them into MongoDB if they're all valid. This function is faster than .create() because it only sends one operation to the server, rather than one for each document.

• findOne()

Finds one document

• find()

Finds documents

• updateOne()

Updates one document in the database without returning it.

• update()

Same as update(), except it does not support the multi or overwrite options.

• updateMany()

Same as update(), except MongoDB will update all documents that match filter

• deleteOne()

Deletes the first document that matches conditions from the collection.

• deleteMany()

Deletes all of the documents that match conditions from the collection

Read more about Mongoose Queries

Aggregation

Aggregations are operations that process data records and return computed results

These are operations like sum, count, average, group etc where we need to generated grouped results out of collection. MongoDB exposes a pipeline based framework for aggregations, which looks something like below and Read more

Model.aggregrate([
   pipe1_operator : {...},
   pipe2_operator : {...},
   pipe3_operator : {...}
])

• $group

Count the number of Users Belonging To A Particular Region

• $match

$match acts as a where condition to filter out documents.

• $project

$project is used to add columns dynamically to the collection and use it for further aggregation.

• count

Count Number of User who belong to a certain region

• distinct

Find all distinct regions

There are many more pipeline operators than dicussed above, which can be seen here

Node.JS

What is Node.JS

• Node.js is a server-side platform (JavaScript runtime) built on Chrome's V8 JavaScript engine
• It is an open source server environment and free
• It runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)

Why Node.js

Asynchronous and Event Driven

All APIs of Node.js library are asynchronous, that is, non-blocking. It essentially means a Node.js based server never waits for an API to return data. The server moves to the next API after calling it and a notification mechanism of Events of Node.js helps the server to get a response from the previous API call.

Very Fast

Being built on Google Chrome's V8 JavaScript Engine, Node.js library is very fast in code execution.

Single Threaded but Highly Scalable

Node.js uses a single threaded model with event looping. Event mechanism helps the server to respond in a non-blocking way and makes the server highly scalable as opposed to traditional servers which create limited threads to handle requests. Node.js uses a single threaded program and the same program can provide service to a much larger number of requests than traditional servers like Apache HTTP Server

No Buffering

Node.js applications never buffer any data. These applications simply output the data in chunks.

Where to use Node.js

Following are the areas where Node.js is proving itself as a perfect technology partner.

• I/O bound Applications
• Data Streaming Applications
• Data Intensive Real-time Applications (DIRT)
• JSON APIs based Applications
• Single Page Applications

It is not advisable to use Node.js for CPU intensive applications

NPM

NPM is a package manager for the JavaScript programming language. It is the default package manager for Node.js and it is the world's largest Software Registry. It contains more than one million packages.

Install Node.js and NPM

Simply download the Installer directly from the nodejs.org web site or follow the instructions for platform specific.

Linux

Debian based distributions

Such as Debian, Ubuntu, Linux mint and Raspbian

sudo apt-get install nodejs npm

Arch Linux

pacman -S nodejs npm

MacOS

brew install node

Windows

Simply download the Windows Installer directly from the nodejs.org web site.

Techical Depth

Single thread

Single threaded processes contain the execution of instructions in a single sequence. In other words, one command is processed at a time. Read more about single thread vs multi thread

Event Loop

The event loop is what allows Node.js to perform non-blocking I/O operations — despite the fact that JavaScript is single-threaded — by offloading operations to the system kernel whenever possible.

Since most modern kernels are multi-threaded, they can handle multiple operations executing in the background. When one of these operations completes, the kernel tells Node.js so that the appropriate callback may be added to the poll queue to eventually be executed

Read the following links to learn more about Event Loop

The Node.js Event Loop

What the heck is the event loop anyway? by Philip Roberts - JSConf EU

Visualisation tool for event loop

JavaScript Engine vs JavaScript Runtime

A JavaScript engine is a program or interpreter which reads our JavaScript code, produces machine code, and finally runs the machine code. It is landed in JavaScript runtimes like web browsers, Node.js, or even Java Runtime Environment (JRE). Like any other interpreters, its job is to read and execute code.

JavaScript runtime is another software. It uses JavaScript Engine and provides some additional functionalities as needed. The most common example of the runtime is the web browser. Probably the second most widely used runtime is Node.js.

Read more here

ECMAScript

ECMAScript(ES) is a scripting-language specification standardized by Ecma International. It was created to standardize JavaScript and new standards is released on every year.

ES6 Features ES7, ES8, ES9 Features

Hello World in Node.js

Refer express for hello world program.

Some Common NPM Packages

• express
• body-parser
• lodash
• async
• moment
• request

REST API

What is REST API

• A REST stands for Representational State Transfer is an application program interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data.

• REST is a style of software architecture. As described in a dissertation by Roy Fielding, REST is an "architectural style" that basically exploits the existing technology and protocols of the Web.

HTTP Methods

RESTful APIs enable you to develop any kind of web application having all possible CRUD operations. REST guidelines suggest using a specific HTTP method on a specific type of call made to the server (though technically it is possible to violate this guideline, yet it is highly discouraged).

Use below-given information to find suitable HTTP method for the action performed by API.

• HTTP GET

Use GET requests to retrieve resource representation/information only – and not to modify it in any way

• HTTP POST

  POST methods are used to create a new resource into the collection of resources.

• HTTP PUT

Use PUT APIs primarily to update an existing resource.

• HTTP DELETE

As the name applies, DELETE APIs are used to delete resources.

• HTTP PATCH

PATCH requests are to make partial update on a resource

Read more HTTP Methods

Express

• What is Express

The fast, unopinionated, minimalist web framework for node.

• Installation

Follow this simple instruction by Express Community

• Create Hello World REST API with Express

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

This app starts a server and listens on port 3000 for connections. The app responds with “Hello World!” for requests to the root URL (/) or route. Read Express Guide to know more about Express Routing

Angular

</p>

Note: Always Refer Angular Docs for a detailed explanation

What is Angular

Angular is a TypeScript-based open-source web application framework for building mobile and desktop web applications

Why Angular

• Angular was written in TypeScript, a superset of JavaScript that implements many new ES2016+ features.
• Awesome Command Line Interface (CLI)
• Develop across all platforms
• Speed, Performance, and Scalability
• Incredible tooling
• Perfect for Single Page Application

Setup Angular

Step 1: Install Node.js

Angular requires Node.js version 10.9.0 or later. To install node.js, go to Install Node

Step 2: Install the Angular CLI

npm install -g @angular/cli

that's it you have installed Angular on your machine.

Angular CLI

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications. You can use the tool directly in a command shell.

Enter the following to list commands or options for a given command (such as generate) with a short description

ng help
ng generate --help

Know more about Angular CLI

Create and Run an application

Now it is time to create your first Angular application.

Create New Angular Application

Use the new command to create a new application.

ng new my-first-project

and enter into created application cd my-first-project

Use serve to run the application.

ng serve

In your browser, open http://localhost:4200/ to see the new app run. When you use the ng serve command to build an app and serve it locally, the server automatically rebuilds the app and reloads the page when you change any of the source files.

Fundamentals

Architecture

Angular is a platform and framework for building client applications in HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.

Module

The basic building blocks of an Angular application are <strong>NgModules</strong>, which provide a compilation context for components. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a root module that enables bootstrapping and typically has many more feature modules

Learn more about Angular Modules

Component

Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data. Every component consists of a selector, template, and style. Template and style can be inline or separate files.

Learn more about Angular components

Services and DI

Components use services, which provide specific functionality not directly related to views. Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient.

You can have sharable methods and data into services.

Learn more about Angular Services

Routing

Angular Routing helps to control navigation paths of an application. which helps to retain the application state as well.

Learn more about Angular Routings

Directive

Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives. A directive is a class with a @Directive() decorator.

A component is technically a directive. However, components are so distinctive and central to Angular applications that Angular defines the @Component() decorator, which extends the @Directive() decorator with template-oriented features

• Structural directives

Structural directives alter layout by adding, removing, and replacing elements in the DOM. For Example ngFor, ngIf, *ngSwitch and so on.

Angular structural directives

• Attribute directives

Attribute directives alter the appearance or behavior of an existing element. In templates they look like regular HTML attributes, hence the name. For example [style.color], [color], [(ngModel)] and so on.

Angular Attribute directives

Lifecycle Hooks

• A component has a lifecycle managed by angular.

• Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change and destroys it before removing it from the DOM.

• Angular offers lifecycle hooks that provide visibility into these key life moments and the ability to act when they occur.

Lifecycle sequence

After creating a component/directive by calling its constructor, Angular calls the lifecycle hook methods in the following sequence at specific moments:

• ngOnChanges()
• ngOnInit()
• ngDoCheck()
• ngAfterContentInit()
• ngAfterContentChecked()
• ngAfterViewInit()
• ngAfterViewChecked()
• ngOnDestroy()

Learn More about Angular Lifecycle

File Structure

You can see that your angular application has dozens of files and folders. lets see what is the purpose of them.

• e2e

the e2e folder has all unit test files and you should write unit testing inside this dir only.

• src/app

This folder contains all our application codes such as components, services and so on.

• src/asset

This folder is for asset files such as images, fonts.

• src/environments

This is for environment configurations such as Devopment mode, Production mode.

• src/polyfills

All browser compatibility stuff lies here.

• src/style.css

This style file is common for entire angular application. if you want to define a style for the whole app, you can do here, such as theming styles.

• src/karma

The unit testing configuration file

• package.json

Package.json contains all npm and script related stuff

• angular.json

This file contains meta related to the angular application

• tsconfig.json

Compiler Configuration for TypeScript

• tslint.json

Linter Configurations

• editorconfig

EditorConfig helps maintain consistent coding styles for multiple developers

Deep Diving

Components Communication

• Parent -> Child Via @Input
• Child -> Parent Via @ViewChild
• Child -> Parent Via @Output EventEmitters
• Child <-> Parent Via with Service

Sharing Data Between Angular Components - Four Methods

Pipes

Angular pipes let you declare display-value transformations in your template HTML. A class with the @Pipe decorator defines a function that transforms input values to output values for display in a view.

<!-- Default format: output 'Jun 15, 2015'-->
 <p>Today is {{today | date}}</p>

<!-- fullDate format: output 'Monday, June 15, 2015'-->
<p>The date is {{today | date:'fullDate'}}</p>

 <!-- shortTime format: output '9:43 AM'-->
 <p>The time is {{today | date:'shortTime'}}</p>

Data Binding

One way data binding from Component to View

• Interpolation - {{}}
• Property Binding - []

One way data binding from View to Component

• Event Binding - ()

Two-way data binding between Component to View

• ngModel Directive [()]

That's it. These are the most important topics of MEAN Stack, Please feel free to rise a issue or PR if anything is missing or any correction required.

Now go and Practice.

This is the second part of the Create Extension for VS Code series. You can also read the first part in My Dev Blog , or in dev.to :

In the first part, we learned how to create a simple Hello World Extension and the basic understanding file structure of extension.

In Part 2, We will go a little deeper and learn the most common extension feature such as

• Creating Menus
• Creating Settings (Configurations)
• Defining Keyboard Shortcuts (KeyBinding)

Come on Let's dive into it.

Creating Menus

Creating menus for the extension is pretty simple. The menu consists of three properties such as

• command - The command (action) which gets executed on the click
• title - Display name for the menu
• category - Just groupings for the menus.

Define menus in package.json -> contributes -> commands

Snippet

"commands": [
    {
        "command": "extension.helloWorld",
        "title": "Say Hello World",
        "category": "Demo"
    }
]

Demo

Creating Settings (Configurations)

The setting has the following properties.

• properties -> Key - An unique key which will be used to set/get values.
• type - Data Type for the setting.
• default - It will be set as the default value on the plugin activation.
• description - This note will be shown under the setting.

Define settings in package.json -> contributes -> configuration

Snippet

"configuration": {
    "title": "Hello World configuration",
    "properties": {
        "hello-world.customMessage": {
            "type": "string",
            "default": "Hello World",
            "description": "This message will be show on menu click"
        }
    }
}

Get current Value

We can get the current value of settings in Extension.ts with the help of vscode.workspace object and unique key (hello-world.customMessage) which is mentioned on package.json.

const msg = vscode.workspace.getConfiguration().get('hello-world.customMessage');

Demo

Defining Keyboard Shortcuts (KeyBinding)

We can trigger an action of our extension on specific keyboard shortcuts which is known as keybinding.

It has two properties they are,

• Command - Action needs to be triggered
• Key - Combination of keys

Define keybinding in package.json -> contributes -> keybindings

Snippet

helloWorld action will be executed on the keybinding of Ctrl+Shift+A + Ctrl+Shift+Z

"keybindings": [
    {
        "command": "extension.helloWorld",
        "key": "Ctrl+Shift+A Ctrl+Shift+Z"
    },
]

Demo

We have learned the most common extension features !!! 🎉🎉🎉🎉🎉

In the next part, We will see how to build and publish our extension on Visual Studio Marketplace

Thanks for reading!

Please provide your Feedbacks and comments.

They have really awesome documentation and sample extensions which are really helpful.

I could run my first Hello world extension in less than 5 minutes.

It is very easy and super simple, come on let's see how to develop one.

Installation

Install the following Node modules for Kick Starting new extension Yeoman and VS Code Extension Generator

npm install -g yo generator-code

Create New Extension

Execute this command yo code and select New Extension -Typescript (Which is most recommended one) to create a new extension then answer questions. It will create a Hello World boilerplate and also Install required node modules.

Extension File Structure

This auto-generated extension has dozen of files, refer following images to know more about file structure.

But we are going to focus on only two files in major which are

• src/exntension.ts
• package.json

Run Extension

Running extension is pretty simple, Just go to debug menu from the left side menu or hit Ctrl+Shift+D keybinding, Then click Run Extension.

It will open a new window where your extension will be running, To confirm that you can see "Hello World" on the right bottom.

Okay, But How Does it work?

VS code Extension is all event-based, we need to define all our commands (actions) in package.json

Package.json

you can package.json files in the root dir, which holds the all the events inside of contributes -> commands, In this case, we have only one command which is extension.helloWorld

"contributes": {
        "commands": [
            {
                "command": "extension.helloWorld",
                "title": "Hello World"
            }
        ]
}

We enable our events by adding our commands into activationEvents

"activationEvents": [
    "onCommand:extension.helloWorld"
]

main property holds file path which will be executed at first, once the extension is activated

"main": "./out/extension.js"

Extension.ts

Good to see that, this file has very detailed comments for better understanding.

• function activate(context: vscode.ExtensionContext) - This Function executed at first when extension gets activated and our all business logic will lie here.

• vscode.commands.registerCommand('extension.helloWorld', () => {}) - Registering extension.helloWorld event with callback function.

• vscode.window.showInformationMessage('Hello World!'); - It makes message box on the right bottom

Finally, we should push our registered command into context.subscriptions

Congratulations for your first vs code extension 🎉🎉🎉🎉🎉

In the next article, I will explain how to implement the most common extension feature such as menus, settings, keybindings and status message bar.

If you have any issues or question please comment, I am glad to help you :D

Thank you !!!

Read Part two on Dev Blog or in Dev.to

To avoid them database design should consist of the following properties

• No data redundancy
• Data integrity

No Data Redundancy in simple term No Repetitive Data

Data integrity in simple term Should able to CRUD without negative effect on other data

Normalization

Process of organizing a database to avoid data redundancy and ensure data integrity.

Normal Forms

The normalization process can be done by step by step process they are called Normal Forms (NF). Let's see first three Normal Forms.

1NF

• Each record should represent only one primary key

• One columns should have a single value

  The column should have atomic values in simple terms it cannot be divided any further

• No repeating groups

  The table should not have the same group of columns example phone_number1, phone_number2...phone_numberN

2NF

• No partial dependencies

  Non-primary columns should depend only on the primary column

Example: The teacher column is determined only by the class_id, not by the entire primary identifier of (student_id, class_id) and the following table will lead to data redundancy because of repeating teacher name

Solution: create a separate table for Teachers

3NF

• There are no transitive dependencies

A transitive dependency is when the following happens:

• A determines B
• B does not determine A
• B determines C

Example: Following to table will lead to data redundancy because of repeating teacher name

id and class_name determine teacher but the teacher does not determine the id or class_name This is because a teacher could teach multiple classes.

Solution: isolate those related columns (teacher, office) and move them into a separate table

Referenced from Adam McNeilly's post

People start worrying about data structures. This occurs because everyone has heard that a good knowledge of data structures is important for technical interviews and so people get obsessed with trying to learn these topics. They don't realize they'd be better served by implementing them rather than just read about it.

So I have started this series to focus on each data structure and how to implement them in Javascript.

In this article, we will be implementing a Singly LinkedList data structure in Javascript.

What is Singly Linked List

A linked list is a linear data structure, in which we can add or remove elements at ease, and it can even grow as needed. Just like arrays, but elements are not stored at contiguous memory locations. The elements in a linked list are linked using pointers.

Implementing Singly Linked List

class Node {
    constructor(element) {
        this.element = element;
        this.next = null;
    }
}

As in the code above, we have two properties elements which holds the data of the current node and next holds the pointer (address) of the next node which initialized to null.

class SinglyLinkedList {
    constructor() {
        this.head = null;
    }
}

Above code shows a SinglyLinkedList class with constructor, the Linked list has a property called head which will hold the first node of the linked list**.

Adding element into list

add(element) {
    //create new node
    let node = new Node(element);

    let current = null;

    //If head is empty then insert at first item
    if (this.head == null) {
        this.head = node;
    } else {
        current = this.head;

        //iterate to end of list
        while (current.next) {
            current = current.next;
        }


        //Finally add new node
        current.next = node;
    }

    this.size++;
}

In order to add an element, in the end, we should consider the following :

• If the list is empty then add an element and it will be head

• If the list is not empty then iterate to end of the list then add an element to end of the list.

Removing element from the list

removeElement(element) {
    if (this.head === null) {
        throw Error ('List is empty');
    }

    let current = this.head;
    let prev = null;

    //Iterate over the list
    while (current != null) {

        if (current.element === element) {
            //If prev node is null then first node is required element
            if (prev === null) {
                this.head = current.next;
            } else {
                //if prev node found then unset current node
                prev.next = current.next;
            }

            return current.element;
        }

        prev = current;

        //iterate to next node
        current = current.next;
    }
    return 'Element not found';
}

• this.head === null If List is empty then throw an error `
• while (current != null)` Iterate list till find the element
• prev === null If prev node is null then first node is required element so make second node as head
• If prev node is found then prev.next = current.next detach current node from list

That's it we have covered basics of Singly LinkedList.

Unit Test

var assert = require('assert');
const LinkedList = require('./single.linkedlist');

describe('Single Linked List', () =>{

    const linkedList = new LinkedList();
    it('Should add an element', () =>{
        linkedList.add(10);
        let result = linkedList.get('list');
        assert.equal(JSON.stringify(result), '{"element":10,"next":null}')
    })

    it('Should add two element', () =>{
        linkedList.add(20);
        linkedList.add(30);
        let result = linkedList.get('list');
        assert.equal(JSON.stringify(result), '{"element":10,"next":{"element":20,"next":{"element":30,"next":null}}}')
    })

    it('Should remove an element', () =>{
        linkedList.removeElement(20);
        let result = linkedList.get('list');
        assert.equal(JSON.stringify(result), '{"element":10,"next":{"element":30,"next":null}}')
    })
})

Check Github Repo for full source code.

Stay Tuned for the next story.

Installation

Arch Linux:

sudo pacman -S powertop

Debian based (Ubuntu, Mint, Raspbian ..etc):

add-apt-repository ppa:eugenesan/ppa
apt-get update
apt-get install powertop -y

PowerTOP has been installed, you can use the following command to know more about it.

powertop --help

Profile battery usages

Following command will generate the HTML file called powerreport.html Open the report in your favorite web browser.

sudo powertop --html=powerreport.html

powerreport.html file will be stored on DIR where you are running this command.

Tuning

sudo powertop

The Tuning tab of the report shows the actual parameters suggested by the tool to apply to save power

For more information: https://wiki.archlinux.org/index.php/powertop

Get your php.ini

Next output your php.ini information into a file or place you can get the information from. I like to save mine to a file called php-info.txt

sudo php -i > ~/php-info.txt

Use the Xdebug Wizard

Send the text file information into the wizard at Xdebug Wizard. Then follow the instructions the wizard supplies.

Install php-xdebug

This will connect the php with xdebug to the editor also you can configure like editors and remote configurations.

Debian based distributions( Debian, Ubuntu, Linux Mint)

sudo apt install php-xdebug

Arch Linux

sudo pacman -Sy xdebug

Edit xdebug.ini

Now edit the xdebug.ini

sudo nano /etc/php/7.0/mods-available/xdebug.ini

Then paste the following configuration

xdebug.remote_autostart = 1
xdebug.remote_enable = 1
xdebug.remote_handler = dbgp
xdebug.remote_host = 127.0.0.1
xdebug.remote_log = /tmp/xdebug_remote.log
xdebug.remote_mode = req
xdebug.remote_port = 9005 #this can be modified

Restart the services

sudo systemctl restart php7.0-fpm
sudo systemctl restart nginx

Configure the editor

In my case, I am using Sublime Text 3 so installed xdebug package using package control

Restart the sublime text.

That’s all. You have configured Xdebug successfully !!!

If you have any issues, Just comment below