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…

unsubscribe in rxjs(angular 2+)

background In reactive world(rxjs/ng2+), it is common and convenient to just create some subject/observable and subscribe to them for event handling etc. It is like the gof observer pattern​ out of the box. issue One caveat we recently have is, we call subscribe() of some subjects from our service in our ngOnInit or ngAfterViewInit funtions we forget to…

sessionStorage/localStorage scope

Firstly, localStorage and sessionStorage are 2 objects on the window object. They tie to the origin of the current window. As a result they are bind to : protocol, http/https are different domain subdomain can share with parent by manually setting document.domain. xxx.capitalone.com cannot share with yyy.capitalone.com port Same thing apply to 302 redirect. The session/local storage value…

webpack custom plugin

Recently we work with a platform which need to use webpack to build some ng2/4 assets and also some custom steps to pull data from a headless cms(via gulp) and eventually render components. One problem here is we cannot do live reload/recompile that every time we make some change we have to run the npm…

debug hover item in chrome devtools

Chrome devtools is our friend, always. Today when I was developing an angular 4.x app with primeng library, i have to check the class set on the tooltip component. As we know the tooltip is hover event based, so if we hover on it to make it showup and then shift our focus to the…

A deeper look at event loop (micro/macro tasks)

One common question So why the result is 1,2,3,5,4 rather than 1,2,3,4,5? If we look at the detail, looks like the async of setTimeout is different from the async of Promise.then, at least they are not in the same async queue. The answer is here in the whatwg SPEC. An event loop has one or more task queues.(task…

Fighting with browser popup block

Background Recently in our project, we have a need of refactoring some old struct actions to rest based pages. This way we avoid multiple page navigation for our user so that all the stuff can be done in a single page. One example is file download. Previously in the struts based app, if a page have 12…

Long Text Wrapping in ie9/10 inside table td

Both IE 9 and 10 seem to have problem wrapping long text inside table td element, even we explicitly set the the word-wrap CSS property. Turns out the solution is we also have a set with and table-layout css to the wrapping table. HTML:

execution time of JavaScript code in page load processde

In that short period of time between you wanting to load a page and your page loading, many relevant and interesting stuff happen that you need to know more about. One example of a relevant and interesting stuff that happens is that any code specified on the page will run. When exactly the code runs…

form submit on enter when one input text

Got an odd behavior today when dealing with a form which has only one input. The input binds to a js function to judge if it is key==13, we do tweak the input params and submit. However everytime we hit enter, even before executing the js function, the form has already been submitted to the…

angularjs bootstrapui print iframe modal

1. Print modal fit in one screen If the content of the modal is in one screen, we could just put a css in the modal template to hide all other content Or put a wrap to the parent content and assign an id to it then in the print css, use the id and…

version compress css js with maven

One problem in release is the user still caches our resources that our new look/feel can not be presented unless user hard refresh the browser. To overcome this, several ways: 1. append a query string(like UUID) to the resource This is good if you want to user download a fresh copy each request. If we randomize…