site diff tool with puppeteer

Background   We recently have a requirement to do a site diff tool so that we can compare our pages in qa and prod to make sure the changes go in is expected. Existing Stack There used to be a version that works but a bit complicated. The existing stack is user provides a list…

pipe operator in rxjs

Pipe is introduced so that we can combine any number of operators. const source$ = Observable.range(0, 10); source$ .filter(x => x % 2) .reduce((acc, next) => acc + next, 0) .map(value => value * 2) .subscribe(x => console.log(x)); Above can be converted to: const source$ = Observable.range(0, 10); source$.pipe( filter(x => x % 2), reduce((acc,…

debug typescript mocha and server in vscode

We recently are developing a graphql api using apollo server and Typeorm on top of Aws Lambda. Code-wise is kind of straightforward with schema defined, then resolvers then service layer then dao layer then model defined typeorm with its annotations/decorators. However there are 2 issues related to debugging, unit test and run graphql local. unit…

href # does not always do nothing

Today we were facing an issue that the angular universal generates an anchor element with href=”false” so before the js is loaded, the anchor would lead user to /false. My first thought is to just put a href=”#’ so that it does nothing. Our url is something like http://www.c1.com/local. After adding the #, the click always navigate…

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…

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…

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…

npm dev dependency not installed

When running npm install, the dev dependencies are usually also get installed. However today, we have a build runs inside a docker container which requires a test result to be generated and we cannot get test run. Turns out the Karma packages in the dev dependencies are not installed. The reason is the container in which…

exclude file from karma coverage report

We have some files that is not so testable (like animation related, or things like polyfills) to be excluded from the karma coverage report. With angular-cli looks like it is straightforward that we can include the below config: However since we are not using cli , we need to tweak ourselves. Found the PR that implements the…

execute async call sequentially

fix number of calls Today, i need to figure out a way to execute a bunch of http call sequentially. The problem first looks simple if we have known number of calls so that we can easily put them in callback one by one or chain the promise. number of calls varies However if what…

angular change detection notes

Was reading some angular change detection related articles trying to understand it. some note. Angular can detect when component data changes, and then automatically re-render the view to reflect that change. NgZone ngZone is an angular verison of zone.js, which patches the browser async calls like user event(click/keyup etc), settimeout/interval, XHR.  It is similar to…

Angular Rxjs Error Handling flow

In Angular 2+, http are all RX based. so the error flow is quite different from what we used to have in angular 1.x’s promise based way. consider the code So the basic flow is if anything exception happened, the error handler function in the catch block will be called first. That function should return an…