joubin's Kardz

Change Angular server port number

To get the next available port:

ng serve --port 0

To change from the default port to another port, update the angular.json file:


     "projects": {

          "test002": {

               "architect": {

                    "serve": {

                         "options": {

                              "port": 8080

Shared by joubin on Wed Jan 30 2019

matTooltip, Angular Material

The Angular Material tooltip provides a text label that is displayed when the user hovers over or longpresses an element.


Shared by joubin on Tue Jan 29 2019

entryComponents vs. declarations, Angular app module

The entryComponents array is used to define only components that are not found in html and created dynamically with ComponentFactoryResolver. Angular needs this hint to find them and compile. All other components should just be listed in the declarations array.


Shared by joubin on Tue Jan 29 2019

Angular Material CDK

CDK: Component Dev Kit.

These are general-purpose tools for building components that are not coupled to Material Design.


Shared by joubin on Mon Jan 28 2019

Azure Artifacts

Create, host, and share packages with the team.

Create and share Maven, npm, and NuGet package feeds from public and private sources.


Shared by joubin on Mon Jan 28 2019


_.without(array, object)

This function returns the array removing the object.


Shared by joubin on Mon Jan 28 2019


_.findLastIndex(array, predicate, [context])

From the underscore.js library.

If the array is an array of objects, use the predicate to search on any object property.


Shared by joubin on Mon Jan 28 2019


GlusterFS as a persistent data store for Kubernetes container applications.

It's an open-source software-based network-attached filesystem that deploys on commodity hardware.

After RedHat acquired the company, it was first marketed as Red Hat Storage Server, but in early 2015 renamed to be Red Hat Gluster Storage

Shared by joubin on Sat Jan 13 2018

Visual Studio Code shortcuts

Ctrl + Shift + P => Command Palette

Ctrl + Shift + X => Extenstions

Ctrl + ` => Integrated Terminal (? Ctrl + J)

Ctrl + B => Toggle Sidebar (right)

Alt + Left Arrow Key => Previous cursor location

Alt + Right Arrow Key => Next cursor location

Ctrl + P => Go to file

F12 => Go to definition

Ctrl + F12 => Go to Implmentation

Ctrl + K, S => Save All

Shared by joubin on Tue May 08 2018

Package.lock.json, NPM

package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json.

It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.

This file is intended to be committed into source repositories, and serves various purposes:

  • Describe a single representation of a dependency tree such that teammates, deployments, and continuous integration are guaranteed to install exactly the same dependencies.
  • Provide a facility for users to "time-travel" to previous states of node_modules without having to commit the directory itself.
  • To facilitate greater visibility of tree changes through readable source control diffs.
  • And optimize the installation process by allowing npm to skip repeated metadata resolutions for previously-installed packages.


Shared by joubin on Wed Dec 19 2018

Angular Workspace files

  • angular.json
    • Is at the root level of an Angular application.
    • This workspace file provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI.
    • It references the main entry point - "main": "src/main.ts"
  • src/main.ts
    • bootstraps "AppModule" in './app/app.module'
  • src/app/app.module.ts
    • Is a @NgModule
    • It tells the compiler which component is the root component
      • bootstrap: [AppComponent] // which is listed and import in the declaration section
  • src/app/app.component.ts
    • centre of an Angular application

Shared by joubin on Sun Dec 09 2018

Lifecycle Hooks, Angular

These are interfaces that allows you to tap into the lifecycle of directives and components as they are created, updated, and destroyed.

Each interface has a single hook method whose name is the interface name prefixed with ng. For example, the OnInit interface has a hook method named ngOnInit.

Angular calls these hook methods in the following order:

  • ngOnChanges: When an input/output binding value changes.
  • ngOnInit: After the first ngOnChanges.
  • ngDoCheck: Developer's custom change detection.
  • ngAfterContentInit: After component content initialized.
  • ngAfterContentChecked: After every check of component content.
  • ngAfterViewInit: After a component's views are initialized.
  • ngAfterViewChecked: After every check of a component's views.
  • ngOnDestroy: Just before the directive is destroyed.


Shared by joubin on Sun Dec 09 2018

Triple Equal, JavaScript

The triple equals operator ( === ) returns true if both operands are of the same type and contain the same value.

Shared by joubin on Wed Dec 05 2018

Chai (testing framework)

Chai is a BDD / TDD assertion library for node and the browser that can be paired with any javascript testing framework.

Chai is a testing framework for Javascript like NUnit for .NET.


Shared by joubin on Wed Jan 27 2016

Lazy Initialization

Lazy initialization of an object means that its creation is deferred until it is first used.

System.Lazy<T> class

  • Assemblies: System.Runtime.dll, mscorlib.dll, netstandard.dll and System.Core.dll


Shared by joubin on Mon Nov 12 2018

Big-O Cheat sheet

Asymptotic Notations are languages that allow us to analyze an algorithm’s running time by identifying its behavior as the input size for the algorithm increases. This is also known as an algorithm’s growth rate.

Shared by joubin on Wed Jun 07 2017

Forming - Storming - Norming - Performing

Tuckman's stages of group development

The forming–storming–norming–performing model of group development was first proposed by Bruce Tuckman in 1965.

Shared by joubin on Thu Oct 11 2018

Executing Dynamic SQL

Use EXEC to execute a dynamically generated SQL statement or query.

Executes a command string or character string within a Transact-SQL batch, or one of the following modules: system stored procedure, user-defined stored procedure, CLR stored procedure, scalar-valued user-defined function, or extended stored procedure.

declare @sourceDb sysname = N'[dbSource].[schema].[SourceTable]';
declare @sqlCommand varchar(max);

-- get count of source database table
SET @sqlCommand = 'select count(*) from ' + @sourceDb;
EXEC (@sqlCommand)


Shared by joubin on Mon Oct 22 2018

Temp table, TSQL

  • Syntax: Create Table #UseTempTable
  • Temporary tables are created by prefixing your table name with a #.
  • To get a list of temp tables: select * from tempdb..sysobjects;


Shared by joubin on Thu Oct 18 2018