Frozen global object

If your app uses global object as a config, you should make sure, that this object is truly readonly. So that an attacker can not modify it in dev console. This is how to do it. // example of frozen global object // freeze the config object properties const config = Object.freeze({ httpApi: ‘http://127.0.0.1:20003/v1’, wsApi: ‘ws://127.0.0.1:3000’, enableReduxDevTools: true, minLegalAge: 18 // in years }); // make sure that the config object can not be replaced Object.defineProperty(window, “config”, { value: config, configurable: false, writable: false }); PS: I assume that “window” is sufficient as a global object. If your app runs …

Continue Reading

Custom command line shortcuts with Doskey

I’ve learned this nice trick from Petr Horáček aka Besir while working on Nakamotox. So the credit goes to him. You can define custom commands via doskey (only on Windows) and then invoke them via command line. It is quite powerfull, because you can define alias for command with predefined attributes, so it save you lot of repetitive typing. Steps: Open any text editor and define your shortcut commands @echo off REM example shortcut for docker-compose doskey dcdu=docker-compose -f docker-compose-dev.yml up doskey dcdd=docker-compose -f docker-compose-dev.yml down Add path to file with commands to registry: open regedit go to \HKEY_CURRENT_USER\Software\Microsoft\Command Processor define AutoRun enter path to …

Continue Reading

Email validator for Angular

Angular has built in email validator, but it is very benevolent one. It allows for single letter domains, therefore email a@b is considered valid. Their motivation is that when used in intranet it can be perfectly valid email, because you can have custom domain names. But it does not make much sense in the broader internet. I would prefer if the built in validator would be stricter, or that there would be two validators, something like emailValidator and intranetEmailValidator. Here is my solution, hope it will help someone import {FormControl} from ‘@angular/forms’; // copied from http://emailregex.com/ export const emailRegexp = /^(([^<>()\[\]\\.,;:\s@”]+(\.[^<>()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; …

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

ES6 generators and async/await

Motivation for this blogpost was my initial ignorance regarding the upcoming ES6 and the generator function. Around christmas 2015 I was looking for a new job, and during one of the assigned test-jobs I had to use generator functions, the .co library, two different databases (one SQL and the other NoSQL)  and node.js. I failed, it was too much of new things to learn at once. But it planted the idea to really learn it and prove that I’ve mastered it. Hence this blog post 🙂 But there are some many new things coming to javascript land, that I still feel …

Continue Reading

Sticky header menu with animation using Javascript

The problem I needed to create animated menu, which will stay always sticked to the top and will collapse or expand as user scroll How it should look Click the image for a live version – Wisephora.com What do you need to implement it? You will need a little bit Javascript and CSS. There are several ways how to implement it, at first I wanted to do it purely by using CSS transitions, but I got whole bunch of weird bugs, so finally I implemented it using mostly Javascript. The main idea is that menu switches between two states, “expanded” and “collapsed”. I …

Continue Reading

Debounced actions in EmberJs

I was developing EmberJS component based on input field. It’s main purpose was auto-save when user stops typing. That is a typing use-case for debounce and should be easy and straightforward. Right? Well, since I am new to Ember, it was not so easy for me. It was more like a riddle and it took me a considerable time to solve. I finally found a solution using debounce from the underscore library. It worked, yes, but obviously it was not ideal, since Ember has its own implementation in Ember.run.debounce. But it is not very much documented and I could not find …

Continue Reading