oauth grant types

Recently we need to integrate our frontend spa with oauth(call third party apis), Need to figure out which grand type fit which use case.

The specification describes five grants for acquiring an access token:

  1. Authorization code grant
  2. Implicit grant
  3. Resource owner credentials grant
  4. Client credentials grant
  5. Refresh token grant

So most common is 1 and 2.

1 is for use case with a server which can store the client id/secret which can be used to authenticate the server app itself. The response after app auth will contain refresh token that can be used to request new access tokens.

2 is good for client side app(browser) which cannot expose client id/secret in js obviously. As a result, it gets the access token directly. The drawback is no refresh token is available because client environment can not be trusted.

3 is for first party app which collects the username/password itself and get access token back.

4 is good for app to app so that the request just need to contain client id/secret, it will get access token back.

5 is obvious, just the use case in 1 if access token expires.


this post has more details


work with multiple files in vim

When working with multi files in vim, there are several options.


Was first trying to use the netrw which comes with vim installation. However it is not quite easy to use. :e. is to open the file explore, or :Exp, or : Vex, or :Sex.


Nerdtree is the de facto file explore. After the frustration with netrw, i decided to give it a a try and it has so many github stars for some reasons. Unlike a lot of custom config in netrw, most nerdtree config is out of box.

  • s to open a file in a file in a vertical spli
  • I to show hidden files in explorer
  • m to open menu with options to do CRUD.
  • Tabs also works nice with t open in new tab and gt or #NUMBERgt to navigate between them. and use ctrl + w to toggle focus.
  • ? to show the available shortcuts.

Vim plug

vim-plug is a new vim plugin management tool which seems to be better than others like vbundle. it allows lazy loading plugins which is awesome. The config is also easy, just add the desired plugin into .vimrc and run :PlugInstall. To remove plugin, delete the line in .vimrc and run :PluginClear.

super tab

super tab is nice plugin for word/code completion. it leverages the vim popup for completion and the index is also smart.

terminal in vim

if you have vim 8, then :term is built in. (`:echo has(‘terminal’)` will output “1”.). Same as tabs in NERDTree, use `ctrl+w` to navigate between terminal and other tabs.

in macos use brew install vim --override-system-vi to upgrade to vim 8.

javascript statement completion value

We all know how painful it is to write long and tedious cloud formation json templates. Cloudform is a nice little library to write cloud formation template in typescript and will compile it into json. Its types are all from amazon’s own library so it is easy to keep up to date without the maintainer having to write new code to support the new aws features.

As I was reading the source code of cloudform compiler where it eventually emit the cloud formation template via a eval() function, i was kind of confused how it works. As i dig deeper, find an interesting concept in js that I never heard of: statement completion value.

To test that, i did some test on the node cli:

const s0 = 'const f1 = ()=>1;';
const s1 = 'const f1 = ()=>1; f1();';
const s2 = 'const f1 = ()=>1; f2 = ()=>2; f1(); f2()';
const s3 = 'const f1 = ()=>1; f1(); "2"';

// output undefined
// output 1
// output 2
// output 2

So this means, it always take the last valid return value.

Another note is IIFE can also return value as long as you have return statement. And async is not well supported as the eval is executed synchronously, so logic executed in other ticks will not get a chance to return unless we do some monkey patching with async/await.

interesting reference on question by Paul Irish on Twitter on 01/2017 and answered by Brendan Eich: HERE

package json bin field

We can define some executable js file in the bin section of the package json so that during installation, npm will symlink that file into prefix/bin for global installs, or ./node_modules/.bin/ for local installs.

The file js need to start with the node flavor hash ban : #!/usr/bin/env node,  where the env will file the path of node in the system for us.

And npm will also add the ./node_modules/.bin into the PATH for its script section so if we define something like `{ “bin” : { “myapp” : “./cli.js” } }`. Then in the `script` we just need to define:

run-myapp: myapp. rather than run-myapp: ./node_modules/.bin/myapp.

you should never use WEP in router

Today I received another mail from Verizon saying my speed is upgraded to 75/75. However every time I test it is always 20/20. I also restart my router and even push the reset button at the back to do reset still no luck. So i decided to call them to see whether they throttled my bandwidth.

The tech support guy remote control my machine asking me to change the encryption type from WEP to WPA2. I was reluctant to do that since I have to change all my devices password again including all the laptops/desktop/phone/tablet/google-home/chromecast etc… Eventually I decided to follow him and made the change. And MAGIC happened, my speed jumps to 50/70. I really never could have thought the encryption type could affect speed that much. All I know previously was WPA2 is much more secure than WEP so I do not really care about my neighbor craking and using my wifi. Now knowing it would affect the performance so much, i would remember and never use WEP again. A good lesson.

What’s even better is if you have a 5Ghz, the speed will improve further according to this video.

more understanding on css transition

A transition occurs when a CSS property changes from one value to another value over a period of time.

You can create CSS Transitions with the transition property:

.selector {
  transition: property duration transition-timing-function delay;

The transition property is a shorthand of four CSS properties, transition-propertytransition-durationtransition-timing-functiontransition-delay.

.selector {
  transition-property: property;
  transition-duration: duration;
  transition-timing-function: timing-function;
  transition-delay: delay

  /* The transition property is the shorthand for the above four properties */
  transition: property duration timing-function delay;

transition-property refers to the CSS property you wish to transition. It is required in the transition shorthand.

transition-duration refers to the duration of the transition. How long do you want the transition to last? This value is written in seconds with the s suffix (like 3s). It is also required in the transitionshorthand.

transition-timing-function refers to how to transition occurs. You’ll learn more about this later.

transition-delay refers to how long you want to wait before starting the duration. This value is written in seconds with the s suffix (like 3s). transition-delay is optional in the transition shorthand.

Triggering transitions

You can trigger CSS transitions directly with pseudo classes like :hover(activates when mouse goes over an element), :focus (activates when a user tabs onto an element, or when a user clicks into an input element), or :active (activates when user clicks on the element).

/* creating transitions directly in CSS */
.button {
  background-color: #33ae74;
  transition: background-color 0.5s ease-out;

.button:hover {
  background-color: #1ce;

You can also trigger CSS transitions through JavaScript by adding or removing a class.

.button {
  background-color: #33ae74;
  transition: background-color 0.5s ease-out;

.button.is-active {
  color: #1ce;
const button = document.querySelector('.button')
button.addEventListener('click', _ => button.classList.toggle('is-active'))

Understanding transition-timing-function

The transition-timing-function governs how a transition occurs. All transitions have a value of linear by default, which means the property changes evenly until the end of the transition.

.selector {
  transition: transform 1s linear;

  /* OR */
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: linear;

The thing is, nothing moves linearly in life. That’s not how real objects move. Sometimes, we accelerate; sometimes, we decelerate. The transition-timing-function allows you to capture all of that.

Imagine yourself throwing a tennis ball into an open field. The ball leaves your hand with the maximum speed. As it moves, it loses energy, it decelerates and eventually comes to a halt. This is called ease-out. There’s a timing function for it.

.selector {
  transition-timing-function: ease-out;

Now imagine you’re in a car. It’s not moving right now. When you move the car, it accelerates and goes toward its top speed. This is called ease-in. There’s also a timing function for it.

.selector {
  transition-timing-function: ease-in;

Since you have ease-in and ease-out, there’s also a timing function that combines the two together, ease-in-out. (I advise against using ease-in-out in your transitions unless your transitions last longer than a second. Nothing eases in and out within a second. It simply looks weird.)

.selector {
  transition-timing-function: ease-in-out;

Transitioning two or more properties

You can transition two (or more) CSS properties by separating them with a comma in your transition or transition-property property.

You can do the same with duration, timing-functions and delays as well. If the values are the same, you only need to specify one of them.

.selector {
  transition: background-color 1s ease-out,
              color 1s ease-out;

  /* OR */
  transition-property: background, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;

You may be tempted to transition every CSS property with all. Don’t ever do this. This is bad for performance. Always specify the property you’re trying to transition.

.selector {
  transition-property: all

.selector {
  transition-property: background-color, color, transform;

Transitioning in vs transitioning out

Sometimes, you want the properties to transition in and out at differently. You want the duration, timing-function or delay to be different.

To do so, you write another set of transition- properties.

.button {
  background-color: #33ae74;
  transition: background-color 0.5s ease-out;

.button:hover {
  background-color: #1ce;
  transition-duration: 2s;

When you write transition properties in the triggering (pseudo) class, the transition properties in the triggering class overwrites the original transition properties you’ve stated in the base class.

So, in the example above, when you hover on the button, the background color takes 2 seconds to change from #33ae74 to #1ce.

When you hover out from the button, the background color only takes 0.5s to change back to #1ce because the transition-duration of 2s no longer exists.

FROM HERE, a great article!

debug nodejs in chrome

The new chrome ships with the about:inspect and a dedicated debugger for nodejs which is super cool! At least we do not have to rely solely on console.log() magic.

To do that, run script with an additional flag:

node --inspect myServer.js

This should fire up the app and then go to a new tab and enter about:inspect. Then click on the open dedicated DevTools for Node link, which opens a debugger for node. Now you can start to put break points etc…

More options HERE and a video intro.