Category: Development (page 1 of 2)

Development related Topics

Using Shell Commands in JS-Projects or in Scripts in package.json

1. ShellJS

ShellJS is a portable (Windows/Linux/OS X) implementation of Unix shell commands on top of the Node.js API. You can use it to eliminate your shell script’s dependency on Unix while still keeping its familiar and powerful commands. You can also install it globally so you can run it from outside Node projects – say goodbye to those gnarly Bash scripts!

$ npm install [-g] shelljs

2. Shx

shx is a wrapper around ShellJS Unix commands, providing an easy solution for simple Unix-like, cross-platform commands in npm package scripts.

$ npm install shx --save-dev

Difference Between ShellJS and shx

  • ShellJS: Good for writing long scripts, all in JS, running via NodeJS (e.g. node myScript.js).
  • shx: Good for writing one-off commands in npm package scripts (e.g. "clean": "shx rm -rf out/").


Adding SASS Support in Angular Projects

Once the project is generated with Angular/CLI, set default style extension:

ng set defaults.styleExt scss

After you have generated a new component:

ng g c MyComponent

you will see MyComponent.scss in your MyComponent folder.

If you open the scss-file, WebStorm will ask you, if you want to add file-watchers for this type of extension. This procedure is normally not necessary, because angular/cliwill generate and update your project automatically.

Anyway, If you want to add file-watcher for SCSS (on McOS):

  1.  brew install ruby
  2. gem install sass

WebStorm will automatically recognize the installation path (on McOS /usr/local/bin/scss).

Simple RxJS Examples

import * as Rx from "rxjs";

let myArray = [1,2,'3','foo', 'bar', 'phi', 3,4,5, '7'];

let stream$ = Rx.Observable.interval(300).take(10)
    .map (x => parseInt(myArray[x]))
    .filter(x => !isNaN(x))
    .reduce((i,j) => {
    console.log(`Addition von ${i} mit ${j} = ${i+j}`);
    return i+j;

let result$ = stream$;

    x => console.log(x),
    err => console.log(err),
    () => console.log ('done')

Lodash related Examples


Creates an array of values by running each element in collection thru iteratee.

_.map(obj, (v, k) => ({key: k, value: v}))

mapValues & keyBy

mapValues Creates an object with the same keys as object and values generated by running each own enumerable string keyed property of object thru iteratee.

keyBy Creates an object composed of keys generated from the results of running each element of collection thru iteratee. The corresponding value of each key is the last element responsible for generating the key.

var result = _.mapValues(_.keyBy(input, 'key'), 'value');

Angular2 & stylelint: Unexpected unknown pseudo-class selector “:host”

If you use css-linters like stylelint in your build-system, you will probably need to ignore Angular2’s pseudo-class host and add the following rule:

"rules": {
    "selector-pseudo-class-no-unknown": [ 
        { ignorePseudoClasses: ["host"] } 

Angular2 & Bootstrap-Select

Activate Bootstrap-Select-Box after the data is here:

ngAfterViewChecked () {
    if (this.data_for_selectbox_ready) {  // <-- IMPORTANT!
      //noinspection TypeScriptUnresolvedFunction

Angular2: NgFor only supports binding to Iterables such as Arrays

Most probably,  the reason is a wrong assignment in the component and corrected into:

    (data:any) => this.store_it_here = data,  // <-- ONLY HERE
    (err:any) => console.debug('AGENCY ERROR:',err),
    () => console.debug(this.store_it_here)   

Pattern Library Generators

Pattern Libraries (or Style Guides) are a helpful tool in developing websites. Read more about Creating Style Guides at this A List Apart article.

Maintaining a static Pattern Library (in HTML/CSS) is hard work and errorprone. There are, however, various tools that help us generate a dynamic Pattern Library or ‘Living Style Guide’.

>> Read more and see the complete list here

Rendering Data from Observables

Elvis Operator within Template

{{ (__responseData | async)?.calculation | json }}

Or with ngFor

  selector: 'my-app',
  providers: [HTTP_PROVIDERS],
  template: `
    <div *ngFor="let calculation of calculations | async">
      Gross: {{ calculation.gross }}<br>
      Net: {{ calculation.net }}
  directives: [NgFor]
export class App {
  calculations: Observable<{gross:number; net:number}[]>;

  constructor(private _http: Http) {
    this.calculations = this._http.get("./data.json")
                            .map(res => res.json().calculation)

>> See plunker here


Copyright © 2020 EBIA

Theme by Anders NorenUp ↑