Use nvm For Managing Dev Environments For Any Version of Angular

Install nodejs
1. Install xcode
$ xcode-select --install
2. Install nvm
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
3. Open another bash session to get settings from nvm install
4. List installed node versions
$ nvm list
5. Or list from the cloud (last 9 versions)
$ nvm ls-remote | tail -n9
6. Install v14.5.0
$ nvm install v14.5.0
7. Setup this version as default
$ nvm use v14.5.0
$ nvm alias default v14.5.0
8. Check node version
$ node -v
v14.5.0
9. Update npm
$ npm install -g npm
10. Check npm version
$ npm -v
6.14.6

Install yarn package manager
1. $ npm install -g yarn

Install angular cli on local project
1. Go to project base directory
$ cd ./project/ui
2. Add angular cli (with versioning if needed)
$ yarn add @angular/cli@9.1.12
3. Check version
$ ng --version
Angular CLI: 9.1.12
Node: 14.5.0
OS: darwin x64
Angular: 9.1.12

Revert back to previous Django Migration

This procedure is only for the development environment while actively working on changes. Say you have several migrations already created but since after making changes realized that some of them are unnecessary and you want to come up with just one migration before checking in code for production deploy. This procedure will revert back migrations to previous level and then will give opportunity to create just one migration file that can then be deployed to production. This can potentially damage databases if not applied properly so use your discernment.

1. Show migrations for an app
$ python3 manage.py showmigrations orchestrator
...
 [X] 0051_auto_20191217_2328
 [X] 0052_auto_20200212_2250
 [X] 0053_job_miscellaneous

2. If you want to revert back the last 2 migrations
$ python3 manage.py migrate orchestrator 0051_auto_20191217_2328
Operations to perform:
  Target specific migration: 0051_auto_20191217_2328, from orchestrator
Running migrations:
  Rendering model states... DONE
  Unapplying orchestrator.0053_job_miscellaneous... OK
  Unapplying orchestrator.0052_auto_20200212_2250... OK

3. Show migrations again
$ python3 manage.py showmigrations orchestrator
...
 [X] 0051_auto_20191217_2328
 [ ] 0052_auto_20200212_2250
 [ ] 0053_job_miscellaneous

4. Delete the undesired migration files
$ rm 0052_auto_20200212_2250.py 0053_job_miscellaneous.py

5. Show migrations again
$ python3 manage.py showmigrations orchestrator
...
 [X] 0051_auto_20191217_2328

6. Now make a new migration. This will have all latest changes in model
$ python3 manage.py makemigrations
Migrations for 'orchestrator':
  orchestrator/migrations/0052_job_miscellaneous.py
    - Add field miscellaneous to job

7. Now apply new migration
$ python3 manage.py migrate
Running migrations:
  Applying orchestrator.0052_job_miscellaneous... OK

Use CSS flexbox for elements to wrap automatically while centered

I learned from this post:

.flex-container-center {
  padding: 0 20px 0 20px;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

Getting Started with Angular NgRx

1. Install ngrx
$ yarn add @ngrx/store

2.  Install Redux Store dev tools
Install chrome browser Redux DevTools extension
$ yarn add @ngrx/store-devtools

3. Install NgRx Effects
$ yarn add @ngrx/effects

Typescript (Javascript) Cheat Sheet

1. Falsy values
false — boolean false
0 — number zero
“” — empty string
null
undefined
NaN — Not A Number

2. Immutability conversion
mutable:
this.currentUser.classes.push(classId);

immutable:
this.currentUser = Object.assign({}, this.currentUser,
     {classes: this.currentUser.classes.concat([classId])});

mutable:
user.classes = user.classes || [];
this.currentUser = user;

immutable:
this.currentUser = Object.assign({}, user,
     {classes: user.classes || []});

Bash script for switching branches in Git

This script follows my workflow of switching between different branches in my dev environment:
1. Stash changes in my current branch.
2. Checkout the other branch.
3. Apply previously saved stash on the switched branch.

#!/bin/bash

echo "Switching to $1 branch..."
BRANCH=$(git branch | grep \* | cut -d ' ' -f2)
STASHNAME="$BRANCH-changes"
git stash save "$STASHNAME"
git checkout $1
LATEST=$(git stash list | grep $1 | head -n 1)
echo "Latest stash: $LATEST"
echo "Do you want to apply this stash? [y/n]: "
read apply_stash
if [ "$apply_stash" == "y" ]; then
    STASHED=$(git stash list | grep $1 | head -n 1 | cut -d ":" -f1)
    git stash apply "$STASHED"
fi

Getting Started with NativeScript

Setup development environment using this post.
1. Install node.
2. Install NativeScript CLI
$ npm install -g nativescript
3. Test install
$ tns
4. Install iOS and Android requirements
$ ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)"
5. Source bash profile
$ source ~/.bash_profile
6. Verify
$ tns doctor
No issues were detected.

Create first app
1. Create Android Virtual Device(AVD)
$ sdkmanager "system-images;android-25;google_apis;x86"
$ avdmanager create avd -n test -k "system-images;android-25;google_apis;x86"
2. Create app
$ tns create HelloWorld --template tns-template-blank-ng
3. Run the app
$ cd HelloWorld
$ tns run android