Awaitable http(s) request in Nodejs and Pulumi

Pulumi is a great tool for quick and easy deployment to cloud. It provides nice abstraction above several cloud providers, such as AWS, Kubernetes or Azure. But it also has some drawbacks. The biggest plus is that you can define your lambdas, tasks etc in single index.js file and import dependencies from other npm packages. Pulumi will then gather all those dependencies and compile then into single script. That script is then deployed to the could. The drawback is that Pulumi can not compile some native functions, such as [Symbol.iterator]. When you rely on some 3rd party npm package, which iterates with …

Continue Reading

Angular (click) not fired and how to fix it

Sometimes, very rarely, you can run into situation then Angular does not fire the (click) event. Or it fires later, on the 2nd click. It can be really hard to debug and figure out what causes it. So here are my two cents. This can be caused by view being updated while user clicks. What happens under the hood is this: Click event consists of mousedown event followed by mouseup event. That is important to remember! But when the view changes, then the mouseup event is fired elsewhere, so the click event never happens. It can even be, that the …

Continue Reading

Workaround for ExpressionChangedAfterItHasBeenCheckedError in async pipe

Imagine that you have this piece of code, where userInfo$ is Observable and it value is not yet emitted. <app-change-email [currentEmail]=”(userInfo$ | async).user.email”></app-change-email> The code works, but it will report error ExpressionChangedAfterItHasBeenCheckedError to the console (only in dev mode). That is because the component has received the value, but the value has changed later. Angular does not like it. I googled for solutions, but could not use them, or it would be too complicated in given setup. Workaround is easy <ng-template #loading> <div id=”loading”></div> </ng-template> <ng-container *ngIf=”userInfo$ | async; let userInfoState; else loading”> <app-change-email [currentEmail]=”userInfoState.user.email”></app-change-email> </ng-container>

Continue Reading

Angular custom event bubbling

Custom events in Angular by default do not bubble up. It is because they are not really events, they are based on EventEmitter, which is similar to pub/sub mechanism. You can read lengthy discussion about it on Angular’s Github. Unfortunately the examples provided by Angular team often mention $event as named parameter in the event listener, which only adds to the confusion. There are valid use cases when you really need the custom events to bubble up. Luckily, you can still create DOM-native custom events, and they will bubble up as expected. import { Component, OnInit, Input, ElementRef, Renderer } from …

Continue Reading

Google’s ReCaptcha not appearing?

Recently I had a weird problem that Recaptcha has not rendered at all in most of the cases. It seemed random however, but most of the cases it failed. Later I’ve figured out, that it was caused by some network race conditions. The solution was then quite straightforwad: manual initialization of ReCaptcha after the script has been loaded. I’ve wrapped the whole solution as Angular directive, so everything is in one place. Feel free to use it .directive(‘recaptcha’, [‘$window’, function ($window) { // // The actual directive definition object // return { restrict: ‘AE’, scope: { sitekey: ‘=’ }, template: ‘<script …

Continue Reading

In defence of literate programming

We tend to write code differently when we know that someone will be reading it, don’t we … [Josh Johnston, X-Team] The thing is, you should always try to write (and rewrite) your code so that it is as clear as possible. Not only because of your possible code-reviewer, but also because of yoour future self. What may seem obvious to you at the time when you are writing code, might be quite unclear at the time when you read it half a year later. You will spent long time just trying to understand your old code. So, next time you …

Continue Reading

Download files via POST request in AngularJs

There are times when you need to download file but the download is initiated via POST request, because the request contains too much parameters to fit into limited GET request. In my case I needed to generate ZIP file. First you need to define custom method on your $resource which will handle the download method, like in the example below. Have a look at the transformResponse method. It creates a Blob from the server response (binary representation of the Zip file) and tries to extracts the file name from response headers. Then you need to define method on controller. User clicks button “Download ZIP”, your …

Continue Reading