Connect to Google Cloud VM with SSH on MAC

On MAC, terminal app can be used to connect to Google Cloud VM with the below steps:

1. open terminal console, and generate the key pair with your user name (for example, student), and save it to a particular folder when promoted

ssh-keygen -C student 

2. open Google Cloud console, and open VM instance, click the edit link, and Add a new SSH Key section. Open the public key file generated in last step, copy and past the content to the public key text box in Google Cloud Console. The user name should show on left side of the text box. Save the change.

3. From the mac terminal, interactively connect to Google Cloud VM instance with ssl, with the parameter of private keyfile (master) and username (student) and VM public ip address as below

ssh -i /Users/mpro2/Documents/master student@35.224.168.51

ssh mynode -t bash

to execute a single command run below

ssh -i /Users/mpro2/Documents/master student@35.224.168.51 ifconfig

ssh -i /Users/mpro2/Documents/master student@35.224.168.51 ip link

Note, by default, the ip address of VM in GCP will change each time when VM restarts.

Set environment variable for JAVA_HOME

1. .profile for mac user

with the new update for mac os, the default terminal has moved from bash to zsh, so if you previously use .profile to setup the environment and path for current user, then you will need to change the file name to .zprofile, as zsh will load .zprofile, instead of .profile when a new terminal starts.

2.Display environment variable in console or terminal window

on Windows

echo %JAVA_HOME%

on mac, 

echo $JAVA_HOME

3. set environment variable for a particular terminal or console 

on windows:

set JAVA_HOME=C:\Program Files\Java\jdk1.8.0

Do not include quotation marks. This will not affect the JAVA_HOME environment variable setting in control panel's environment settings. 

Understanding popState and pushState of browser history

The pushState method and popState event can be used to manage browser history when user clicks browser's back and forward button. Although the way to use those methods are not very straight forward.

When a browser visits a url, that url showing on the browser address bar is the current state. If user clicks back button, or call history.back(), the browser will load the previous url of the browser.

If application calls history.pushState(newStateObj, title, url, param), then the current state and url shown in the address bar will be pushed into the browser history, and then the url and state parameters in the pushState call becomes the current state and url, the new url will also show on the browser address bar. However, the browser will not actually load the new url set by pushState method.

When user clicks back button, the popState event is triggered, the last state and url before the current state and url (the url showing on browser before history.pushState method is called) is loaded in the browser, however, the page content will not change, and the application must update the page content by implementing the logic in popState event handler.

Typescript polymorphism for Angular component

Angular project may have several components that have some shared methods and properties. It is better to create a common base component and then extends it to to other sub components. The base component has an empty html template and css style, and only contain typescript code.

Both base component and sub components need to be added into module declaration section.

The injected constructor parameter needs to be passed from subclass constructor to base class constructor as constructor parameters with public access.

Similar to Java, typescript uses runtime binding when deciding which method to be invoked, it does not matter what is the current variable type, instead it will invoke the instance object's last method implemented by the inheritance tree. If the subclass does not implement the method, then it goes up to find the implementation from its parent class.

When a method in base class calls another method, it will invoke the implementation of the subclass. The only way to invoke the parent class' method is using super.certainFunc().

Sample code:

class animal {

  public name: string;

  constructor(n) {

    this.name = n;

  }

  public makeSound() {

    console.log(this.name);

  }

  public run() {

    this.makeSound();

    console.log('animal run');

  }

}

class dog extends animal {

   constructor(dn){

     super(dn);

   }

   public makeSound() {

     console.log('dog call. ' + name);

   }

   public run() {

    this.makeSound();

    super.makeSound();

    super.run();

    console.log('dog run');

  }

}

call the method from a button event handler:

  onTempTest2() {

   const d = new dog('pa');

   d.makeSound();

   d.run();

   const a: animal = d;

   a.makeSound();

   a.run();

  }

 

Azure windows server virtual machine setup notes

When setting up Azure Windows server virtual machine, there are several issues to handle in order to make it work:

1. after creating the virtual machine, you can install iis by running the below command in windows server's power shell prompt

Install-WindowsFeature -name Web-Server -IncludeManagementTools

Note, in virtual machine's azure portal's networking blade, you must add an inbound port rule for port 80 with priority of 100 in order to connect the iis using the vm's ip address.

2. Disable IE enhanced to allow IE to download other apps

By default, IE does not allow you to visit or download anything, you will need to connect to VM from remote desktop to allow IE to download. To do so, open VM's server manager app in VM, and click on Local Server and then click on "IE Enhanced Security Configuration" option, turn the option to off for both Administrator and user.

3. download and install dotnet core

By default, dotnet core is not installed on Windows VM server, you will need to download and install dotnet core in order to create and build dotnet apps.

Browser tab, javascripte, and sessionstoage

 Some note about browser tabs, javascript and session storage:

1. On same browser window, each tab will create and have its own session storage, the data stored in session storage are not shared between tabs. To share the data, use localstorage.

2. Data in session storage are kept as long as the tab is not closed. If user navigates away from current url to other urls, and then navigates back to the original url later, the previous session storage data are still available. Session storage will only lose if user closes the tab.

3. When the browser window is not active, or the tab is not the active, the javascript still still runs in background, although the event are raised slowly than active window or tab, (about once per second).  

How to debug js code in third party npm package

Note

Before debugging the npm source code, you may want to try to run the npm command with verbose level log, the log may provide some details for you to solve the issue instead of debugging the code. To enable to verbose level log, run the npm command with below command

npm mycommand --loglevel verbose

When using third party npm package in your js app, sometimes you will need to debug the js code to figure out issues. 

Quite often, the third party npm package js code is minified, so as to load them faster. But during debug, you will want to load the no-minified js file. An easy way to do so is open the third party package.json file, and update main element's value to point to the debug version js entry point.

For example, to debug oidc-client.js, in package.json, make the below change

 "homepage": "https://github.com/IdentityModel/oidc-client-js",

  "license": "Apache-2.0",

  "main": "lib/oidc-client.js", "lib/oidc-client.min.js"

  "name": "oidc-client",

  "repository": {

    "type": "git",

    "url": "git+https://github.com/IdentityModel/oidc-client-js.git"

  }, 

How to view context.log content from azure portal

When implementing azure function app, it is quite often to call context.log method to write log for debug and trace function.

In order to view the log for a particular function in the Azure function app, first open azure portal, select the function app, and then select the function you are working on. Click the Monitor menu from blade, and select logs menu. 

A new console window will open and show "connected" when it is ready. Leave this portal window open, and from somewhere else triggers the function to be executed.  Then the context.log will show on the console window.