joubin's Kardz


npm commands

Update npm itself

npm install -g npm

Check npm version

npm --version

Install a package

# Local
npm install package-name

# Local + make an entry in package.json as dependency
npm install package-name --save

# Install specific version of a package
npm install package-name@1.2.3

# Global
npm install -g package-name

Un-install a package

# Local
npm uninstall package-name

# Global
npm uninstall package-name -g

Get package info

# Home page
npm home package_name
# Github repo
npm repo package_name

Check for outdated packages in package.json

# Local
npm outdated

# Global
npm outdated -g

# Production only
npm outdated --prod

Remove un-used packages from node_modules folder

npm prune

Update all packages listed in package.json

npm update

npm --depth 9999 update

Remove duplicate packages from node_modules

npm dedupe

References:

Shared by joubin on Fri Apr 12 2019

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.

References:

Shared by joubin on Wed Dec 19 2018

Editing, Saving and Quitting Vim

Once you're in a Vim editor:

  1. Type 'i' to switch to 'insert' mode. Modify the file now.
  2. Hit 'esc' to return to the 'normal' mode
  3. Type ':wq' - w - 'write' and q - 'quit'

The 'normal' mode of a Vim editor: all key presses are interpretted as a command. To get into an editing (ie insert) mode, press 'i'

References:

Shared by joubin on Wed Apr 10 2019

Access modifier, TypeScript

In TypeScript each member of a class is public by default. You can still explicitly set a member to public.

References:

Shared by joubin on Tue Apr 09 2019

hasOwnProperty, JavaScript

hasOwnProperty returns a boolean value indicating whether the object has a property with the name of the argument.

Example: obj.hasOwnProperty('prop1')

Shared by joubin on Tue Apr 09 2019

Add multiple columns to a table, TSql

ALTER TABLE table_name
ADD {COLUMNNAME} {TYPE} {NULL | NOT NULL},
ADD {COLUMNNAME} {TYPE} {NULL | NOT NULL},
...
ADD {COLUMNNAME} {TYPE} {NULL | NOT NULL};

Shared by joubin on Thu Apr 04 2019

Flutter app anatomy

Think of widgets as configurations for pieces (called elements) of an app's UI.

An element is a widget that’s been made real and mounted on-screen.

The element tree represents what is actually displayed on the device at any given moment. Note that there is also a parallel widget-tree.

An app has two trees, one that represents what’s actually on the screen (the elements), and one that holds the blueprints they were made from (the widgets).

A Flutter app is at its root, a StatelessWidget the main function calls the runApp on.

References:

Shared by joubin on Mon Apr 01 2019

Material.dart & Cupertino.dart

Material.dart

Cupertino.dart

Shared by joubin on Mon Apr 01 2019

Jank

The degree of any stuttering or choppiness of a software UI responsiveness.

References:

Shared by joubin on Mon Apr 01 2019


CSS Viewport-Percentage lengths

These units are used to specify a percentage of the viewport's width or height.

  • vh: viewport-height
  • vw: viewport-width

Example:

10vh - means 10% of the viewport height

References:

Shared by joubin on Tue Mar 26 2019

AspNet.Core CORS - WithExposedHeaders

By default, the browser doesn't expose all of the response headers to the app.

By default, an enabled CORS will make the 'simple headers' available:

  • Cache-Control
  • Content-Language
  • Content-Type
  • ...

To make other specific headers available, call the .WithExposedHeaders - in Startup.cs

References:

Shared by joubin on Thu Feb 21 2019

Resetting a local Git repo to the remote origin

Resetting a local Git repo to the remote origin

git fetch origin
git reset --hard origin/master

References:

Shared by joubin on Thu Feb 21 2019

Setting commit user email, Git

Global Git configuration: (Windows) c:/users/{user}/.gitconfig

git config --global user.email "email@example.com"

Single Repository Level: /.git/config

git config user.email "email@example.com"

References:

Shared by joubin on Wed Feb 20 2019

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.

References:

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.

References:

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.

References:

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.

References:

Shared by joubin on Mon Jan 28 2019

_.without

_.without(array, object)

This function returns the array removing the object.

Reference:

Shared by joubin on Mon Jan 28 2019