Dockerizing Angular/Web3 app

Web development these days is often more about combining various npm packages then actuall programming. And the packages incompactibility can be extremely frustrating at times. When you add crypto to this mix, it becomes even wilder. Truffle framework promises to ease some problems with deployment of smart contracts, but it introduces other hard-to-debug problems. Recently I started developing small dApp on Angular and I’ve run into yet another issues. 1st issue – can not install web3 on Windows This is old one, and there is no 100% reliable solution. You will be recommended to install windows-build-tools, but the installation process itself …

Continue Reading

Insert script tags in Angular components

Sometimes you just need to insert 3rd party script tags into Angular Components. It is definitely not very common, and Angular does not make it easy for you. What ever script tag you define your component’s template, will be simply cleared out. Not even a html comment will remain. So I you really need to insert a 3rd party script into your component, you have to do inside the javascript part. It is actually quite simple. You create a script DOM element, set the src or innerHTML or text property and attach it to the DOM via renderer service. // 1. import dependencies import …

Continue Reading

Workaround for eternal problem with node-gyp on Windows

This is super annoying. Reliance on node-gyp on Windows is such a pain! The error description says the it can not find the Python executable, even though it is there. There is a workaround Open cmd as Administrator (Otherwise the installation fails, meh) run command npm install –global –production windows-build-tools This will install Visual Studio Build Tools (yes, I know, there is mismatch in names) This will also install Python again as a side-effect (meh) run npm rebuild in the project’s folder re-open cmd and run npm install all should be fine now

Continue Reading

Convert exponential numbers to decimal form in Javascript

As almost every developers knows, Javascript has notorious problems when working with really big or really small decimal numbers. The reason is floating point. Purpose of this article is not to explain why it behaves the way it does, there are much better resources dedicated just for that. You can read the explanation here or here. There are also various libraries dedicated to working with decimals and precise calculations, such as big.js. To ilustrate the problem, see the short video below. The input shows the text value, and on the right there is raw value as represented in Javascript. The issue it …

Continue Reading

Decimal number is not a number!

You have an input field, where user can enter decimal values. Problem is, that some cultures use decimal point “.” and some uses decimal comma “,”. So what is a valid number in one culture, is not a number at all in a different culture. You can see the full list of differences on wikipedia. There is no built-in validator for numbers in Angular, so we have built our own like this: import { AbstractControl, ValidatorFn } from ‘@angular/forms’; export class NumberValidators { static isNumber(): ValidatorFn { return (c: AbstractControl): { [key: string]: boolean } | null => { if (isNaN(c.value)) { return { …

Continue Reading

Angular – .map is not a function

I’ve encountered really weird error. After I’ve removed clearly unused code, our Angular app stopped working. It did however pass lint tests and also the production build passed without problems. The error occurred only during runtime. The error said something like “map is not a function at blablabla” and on the first glance it was totally unrelated to the code where it occurred. After long digging and googling I found the root cause. Somewhere in our app we used import ‘rxjs/RX’, which imported the whole RxJS library which is large. It has about 50+ operators. And because it was included in the bundle accidentally, …

Continue Reading

Invoke native element method with Angular 6

The useful method invokeElementMethod() has been removed from the new Renderer v3 in the upcoming version 6 of Angular. What does it mean? For example it is now harder to invoke focus() on input field or create custom native event, which bubbles up. The motivation of the Angular team is that this method has not been used internally, therefore they have removed it. I don’t think this was the best solution, because this method has been used by many. So now when you need to focus some input field, you need to write up your own renderer service. It makes the …

Continue Reading

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