DEV Community: Sibaram Sahu

Common mongo DB queries

Sibaram Sahu — Thu, 20 Jan 2022 07:05:11 +0000

Mongo DB

Mongo DB is a document oriented, cross-platform NoSQL Database.

Version check

mongod --version
mongo –-version

New in CSS

Sibaram Sahu — Mon, 10 Jan 2022 10:09:13 +0000

Declare Variable

:root {
    --global--primary-color: #29313e;
}


a {
    color: var(--global--primary-color);
}

@Supports

It allows you to do the same depending on what CSS properties and values the user browser supports.

@supports (display: grid) {
    .main-content {
        display: grid;
    }
}

content-visibility

It is a really cool new CSS feature to improve site performance. It basically works like lazy loading, only not for images but any HTML element. You can use it to keep any part of your site from loading until it becomes visible.

.sec-viewport {
    content-visibility: auto;
}

Scroll Snap

Scroll snapping gives you the option to lock the user’s viewport to a certain parts or element of your site.

.container {
    scroll-snap-type: y mandatory;
}

:is and :where

It allow you to reduce repetition in CSS markup by shortening lists of CSS selectors.

/* Before */
.main a:hover,
.sidebar a:hover,
.site-footer a:hover {
    /* markup goes here */
}

/* After */

:is(.main, .sidebar, .site-footer) a:hover {
    /* markup goes here */
}

:where(.main, .sidebar, .site-footer) a:hover {
    /* markup goes here */
}

Design Pattern in Javascript

Sibaram Sahu — Thu, 06 Jan 2022 12:08:20 +0000

What is Design pattern?

A design pattern is a general, reusable solution to a commonly occurring problem.

Out of all the patterns we are going to look few of them below.

Creational

Singletone Pattern

Ensure a class only has one instance, and provide a global point to access it.

Prototype Pattern

Specify the kinds of object to create using prototypical instance, and create new objects by copying the prototype.

Factory Pattern

Define an interface for creating an object, but let subclasses decide which class to instantiate.

Builder Pattern

Separate the construction of a complex object from its representation so that the same construction process can create different representations.

Structural

Adapter Pattern

Convert the interface of a class into another client except.
Adapter lets classes work together that couldn’t because of incompatible interfaces.

Proxy Pattern

Provide a placeholder for another object to control to access to it.

Composite Pattern

Compose objects into tree structures to represent part-whole hierarchies. Composite let clients treat individual objects and compositions of objects uniformly.

Decorator Pattern

Attach additional responsibilities to an object dynamically. Decorator provide a flexible alternative to subclassing for extending functionality.

Behavioural

Chain of responsibility

Avoid coupling the sender of a request to its receiver by giving more than one object a change to handle the request.
Chain the receiving objects and pass the request along the chain.

Command Pattern

Encapsulate a request as an object, there by letting you parameterise with different requests, queue or log requests and support undoable operations.

Iterator Pattern

Provide a way to access the element of an aggregate object sequentially without exposing its underlying representation.

Observer Pattern

Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.

Strategy Pattern

Define a family of algorithms, encapsulate each one, and make them interchangeable. Strategy lets the algorithm very independently from clients that use it.

Difference between Angular versions

Sibaram Sahu — Sat, 11 Dec 2021 09:25:09 +0000

Difference between angular versions till 11th Dec 2021.
Until now Angular Version 13 released.

Angular Js

It is referred as Angular 1 version.
It aim's to simplify the development and testing of application by providing MVC(Model-View-Controller) and MVVM(Model-View-View-Model) architectures.
It's written in Javascript

Angular 2

Angular 2 totally rewritten and used typescript.
It's supported in mobile.
You can write in ES6, JS or in Dart.

Angular 3

This version is skipped due to mismatch of @angular/core, @angular/compiler and @angular/router libraries.

@angular/router was already version 3.x with huge development. So to avoid the confusion they skipped this version.

Angular 4

Reduced the size up to 60%
Faster compilation
Better bug fix alerts.
Supported typescript 2.1 and more. (Earlier it was supporting typescript 1.8)
No need to write a pattern for email validation.
*ngIf/else Now you can use else as well .
Renderer 2 in place.
Animations being pulled out of @angular/core so as to remove the extra code being imported into our production bundle. Though you can easily add animation by importing {BrowserAnimationsModule} from @angular/platform-browser/animations into NgModule.

Angular 5

Compiler Improvements
RxJS 5.5 support (Added new router life cycle events)
Angular Forms adds updateOn Blur / Submit
Angular Universal State Transfer API and DOM Support.
By default enabled Build Optimiser.
Internationalised Number, Date, and Currency Pipes
@angular/http replaced with @angular/common/http library.
HttpModule is replaced by HttpClientModule of @angular/common/http inject the HttpClient service, and remove any map(res => res.json()) calls, which are no longer needed.

Angular 6

Its released with Angular CLI 6.X and Angular material 6.X
Add ng update and ng add
Angular Elements
Component Dev Kit (CDK)
Angular Material Starter Components
CLI Workspaces
Schematics
Library Support
Tree Shakable Providers
Animations Performance Improvements
RxJS v6

Angular 7

Its released with Angular CLI 7.X and Angular Material 7.X
Performance improvements
Virtual scrolling
Drag and drops
Content projection support in angular element
Dependency updates : TypeScript 3.1 RxJS 6.3 Added support for Node 10
Bundle budgets in CLI.
**CLI Prompts: **The CLI will now prompt users when running common commands like ng new or ng add @angular/material to help you discover built-in features like routing or SCSS support. CLI Prompts are also added in Schematics.

Angular 8

Its released with Angular CLI 8.X and Angular material 8.X
Differential Loading by Default: It is a process by which the browser chooses between modern or legacy JavaScript based on its own capabilities.
Dynamic Imports for Route Configurations.
Builder APIs in CLI: It is an exciting feature, using this we can customize angular CLI commands like ng build, ng test,and ng run.
Workspace APIs in the CLI
Web Worker Support
Angular CLI 8.3.0 has added new UX for an initial app created using ng new.
ng deploy is added in Angular CLI 8.3.0

Angular 9

It came up with most awaited IVY Compiler.
Ivy Compiler: From version 9 all applications are moved to Ivy compiler and runtime by default. (In angular 8 it was in opt-in mode).

It provides the following advantages

Smaller Bundle Size
Faster Testing
Better Debugging
Improved CSS class and style binding
Improved Type Checking
Improved build errors
Improved build times, enabling AOT on by default
Improved Internationalisation

New Options for providedIn property in @Injectable Decorator, In addition to the previous root and module options, you have two additional options.
platform : Specifying providedIn: 'platform' makes the service available in a special singleton platform injector that is shared by all applications on the page.
any : Provides a unique instance in every module (including lazy modules) that injects the token.
Component harnesses
Angular Material New Component
Youtube player Component
Google Maps Component
TypeScript 3.7 Support

Angular 10

Its synchronised with major release Angular CLI and Angular Material 10.
Date range picker added
Warnings about CommonJS imports:
Optional Stricter Settings
TypeScript 3.9
TSLib has been updated to v2.0
TSLint has been updated to v6
New Default Browser Configuration

Angular 11

Popular bug fixes
Automatic font inlining: During compile time Angular CLI will download and inline fonts that are being used and linked in the application. Which will make the application more faster.
Improved build and serve Reporting & Logging
Updated language service preview based on Ivy
Updated Hot Module Replacement(HMR) Support: Angular CLI has now added to support of serving application with HMR. Use ng serve --hmr
Faster Builds
Experimental webpack 5 support
TSLint and Codelyzer are deprecated
Removed Support of IE9/IE10 and IE Mobile.

Angular 12

Added Tailwind CSS support.
Passing context to HTTP Interceptors : No more dirty hacks for passing metadata to HTTP interceptors.
Now Supports inline Sass in styles property of @Component decorator
Added support of Tailwind CSS: Now you just need to install tailswindcss package and add tailwind.config.js to use tailwind CSS
Nullish Coalescing: power of nullish coalescing is now also available on Angular templates in v12!
Strict mode is enabled by default
The Ivy-based Language Service is moving from opt-in to on by default.
The Ivy-based Language Service is moving from opt-in to on by default.
Deprecated support for IE 11.

Angular 13

Creating dynamic components is easy now : The new API removes the need for ComponentFactoryResolver being injected into the constructor. Ivy creates the opportunity to instantiate the component with ViewContainerRef.createComponent without creating an associated factory.
IE 11 support is removed
Angular now supports the use of persistent build cache by default for new v13 projects, which results in 68% improvement in build speed.
RxJS 7.4 is now the default for the new apps.
Supports TypeScript 4.4
Accessibility improvements for angular material components
Dynamically enable/disable validators
Restore history after canceled navigation

How angular starts

Sibaram Sahu — Fri, 10 Dec 2021 10:07:38 +0000

How angular starts executing?

There is file name called angular.json which act like a configuration for the whole application.

Its looks like this

  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
        "outputPath": "dist/angular-starter",
        "index": "src/index.html",
        **"main": "src/main.ts",**
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": false,
        "assets": [
        "src/favicon.ico",
        "src/assets"
        ],
        "styles": [
        "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
        "src/style.css"
        ]
    }
}

The entry point will be mentioned in the "main" section.
Which is "main.ts" here.

The main.ts file creates a browser environment to run the app.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

Along with this it called a function called "bootstrapModule"

platformBrowserDynamic().bootstrapModule(AppModule)

In the above code AppModule is getting bootstrapped.

AppModule is looks like this

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    entryComponents: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

If you see in the AppModule AppComponent is getting bootstrapped.

The AppComponent is defined in app.component.ts file.
Which looks like below

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'angular';
}

These file interacts with the webpage and serves data to it.

After this its calls index.html which looks like this

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Angular</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <app-root></app-root>
  </body>
  </html>

The html template of the root component is displayed inside the <app-root></app-root>