how to quickly fix "future version of React will block javascript: URLs as a security precaution. Use event handlers instead if you can. If you need to generate unsafe HTML try using dangerouslySetInnerHTML instead. React was passed "javascript:void(0)"

 when we implement a click event to trigger api call or dispatch an action in redux, we will like to use this simple syntax to handle it.

<a href="javascript:void(0)" onClick={clearFilter}>all posts</a>

we will see the following warming in the development tool windows

since React 16.9 update had deprecate the JavaScript URL, you can check out this link for more information

https://reactjs.org/blog/2019/08/08/react-v16.9.0.html

but the work around is quiet simple. we can fix it withe code below.

<a href="#" onClick={ev => {

            ev.preventDefault();

           clearFilter

            return false; // old browsers, may not be needed

            }}>all posts</a>

 

use This keyword with Arrow Function in Javascript implementation

 when we write JavaScript function with Arrow to eliminate the function key, we must be extra caution, since THIS keyword object reference will be determine during the runtime, if the function is in the global scope, then THIS will point to the window object. if the function is pointing within the object, then THIS will only point to the object itself.

here is a simple example.

print: (delay=3000)=> {
    setTimeout(() => {
    console.log(this === window)
    }, delay)
}

the output is true. since THIS is execute with under the global scope.

after I change the Arrow function to a regular function, then  THIS key is reference to the object level

function print(delay=3000){
    setTimeout(() => {
    console.log(this === window)
    }, delay)
}

though arrow function is very handy in the javascript implementation, but we still have use it with care.

how to launch a program with Run as Administrator privilege in powershell?

 when you in the powershell window, you want to launch another app with run as administrator right. here is a way to go

ex: launch powershell with administrator privilege

start-process powershell  --Verb  runas

 run visual studio with administrator privilege

  start-process devenv.exe --Verb  runas

How to add gwin to windows CMD or cmder?

it is very useful to use vi editor to compose yaml file for Kubernetes. we can launch the VI or VIM editor by typing vi or vim in the CMD or cmder.

 if you are not comfortable working with vi or vim. there is GUI version of vi call gwin.

you can download a copy of gwin for windows from the link below.

 https://www.vim.org/download.php#pc

1.  you should run the exe file with administrator privilege to ensure the file can install into the proper location.

2. second step you can either run this script in the powershell window

 Set-alias gvim "C:\Program Files (x86)\Vim\vim82\gvim.exe"

or add the application path (C:\Program Files (x86)\Vim\vim82\gvim.exe) to the Path variable in the Environment Variable Window

 

 

then you can launch gwin editor from CMD or cmder

 

 

 

how to setup Azure Kubernetes Service cluster and configure Kubernetes dashboard with AZ CLI?

it is very easy to create and run a  AKS cluster with few AZ CLI commands.

1. create a resource group for AKS

az group create --name dan-aks-rg --location eastus

2. create an AKS cluster

az aks create --resource-group dan-aks-rg --name dan-cluster

3.get the credentials for the cluster, this will download the credetenials and store in the config file
under this path C:\Users\admin\.kube

az aks get-credentials --resource-group dan-aks-rg --name dan-cluster

4. install the Kubernetes cli utility

az ask install-cli

5. install Kubernetes dashboard

kubectl apply -f https://raw.githubusercontent.com/kubernetes/dashboard/v2.0.0/aio/deploy/recommended.yaml

6. Access the dashboard. there are two way to access the Kubernetes dashboard.
 from AZ CLI

az aks browse --resource-group dan-aks-rg --name dan-cluster

it will automatically lauch in the web browser

http://127.0.0.1:8001/api/v1/namespaces/kube-system/services/https:kubernetes-dashboard:/proxy/


or we can use kubectl proxy to access the Kubernetes Dashboard UI. Type Kubectl proxy in the CMD windows, then hit enter and launch the web chrome and paste the following url in the url windows to launch the kubernetes dashboard.

kubectl proxy 

http://localhost:8001/api/v1/namespaces/kubernetes-dashboard/services/https:kubernetes-dashboard:/proxy/#/overview?namespace=default

7. Trouble shot tips

if you see an empty kubernetes dashboard with warming message
"secrets is forbidden: User "clusterUser" cannot list resource "secrets" in API group "" in the namespace "default"

it is permission issue. you can resolve this following steps, you need to replace the clusterUser with specific name that was shown in your error message.

• kubectl delete clusterrolebinding kubernetes-dashboard
  
  kubectl delete clusterrolebinding kubernetes-dashboard -n kube-system
  
  kubectl create clusterrolebinding kubernetes-dashboard --clusterrole=cluster-admin --serviceaccount=kube-system:kubernetes-dashboard --user=clusterUser

https://kubernetes.io/docs/reference/generated/kubectl/kubectl-commands#-em-clusterrolebinding-em-

how to use build-in debugger to debug a Node.js appliation?

it is very important to trouble shot an issue or bug in the application development. i will show you how to use the debug tools that built into Node, that let you step through the code.

step 1. add debugger; before the line that you want to debug

 show: (req, res, next) => {

    let userId = req.params.id;

    User.findById(userId)

      .then(user => {

        debugger;

        res.locals.user = user;

        next();

      })

      .catch(error => {

        console.log(`Error fetching user by ID: ${error.message}`);

        next(error);

      });

  },

step 2. run node --inspect-brk main.js command in your project's terminal window to launch the build in debugger

C:\code\Node\unit5\recipe_app (master) (capstone@1.0.0)
λ node --inspect-brk main
Debugger listening on ws://127.0.0.1:9229/d66cdcb4-12df-4f71-80db-43d9c5ba6adc
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.

step 3. launch the chrome browse and type chrome://inspect in the url window.

click on the inspect link. it will start breaking at the first line of main.js









you can either go to line by line with press F10 function or key or press the continue button to go the the line of code with debugger;

you can also go to the node tab under source section, then you can pick anything javascript files to set the breakpoint in order to inspect or trace the code and values

now you can easily fix the trouble code.

how to run a node.js application in debug mode?

it is very convenient to trouble shot a node.js application when we run it under debug mode.

here is the line that we can execute in the command line within the project folder in the CMD

set DEBUG=* & node main (for project with main.js as the start up file)

or
set DEBUG=* & node index (for project setting index.js as the entry point.

or we can add the following code to the script section in the package.json file.

"debug": "set DEBUG=* node main"


here is the sample from my node.js application.

  "scripts": {

    "start": "node main.js",

    "test": "echo \"Error: no test specified\" && exit 1",

    "debug": "set DEBUG=* & node main"

  },

then we can start the application with the following line

npm run debug