EBIA

Page 2 of 3

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;
},0);

let result$ = stream$;

result$.subscribe(
    x => console.log(x),
    err => console.log(err),
    () => console.log ('done')
);

Angular Testing Revisited – V4+

Introduction

Setup

ng new ng-testing --routing
npm start
ng test
ng test --code-coverage

Angular Testing 4+ Keywords

  • Isolated, Shared, Integration, Unit, E2E End to End Tests,
  • Mocks, Stubs, Spies
  • Sync, Async
  • Jasmine, suites, specs, expectations, matchers, tricks (.toEqual,  .toBe,..), beforeEach, afterEach, beforeAll, afterAll, refactoring repetitive code into the setup,
  • Angular, Components, Services, Http, Mock-Backend, Directives, Pipes, Routes, Observables, TestBed, fixtures, async and fakeAsync/tick, jasmine.done

Lodash related Examples

map

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": [ 
        true, 
        { ignorePseudoClasses: ["host"] } 
    ]
}

Angular2 & Bootstrap-Select

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

ngAfterViewChecked () {
    if (this.data_for_selectbox_ready) {  // <-- IMPORTANT!
      //noinspection TypeScriptUnresolvedFunction
      $('.selectpicker').selectpicker();
    }
}

Angular2: NgFor only supports binding to Iterables such as Arrays

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

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

Git: File Creation Date

git log --format=%aD <FILENAME> | tail -1

OR

with renames/moves

git log --diff-filter=A --follow --format=%aD -1 -- <fname> 

>>Discussion at Stack Overflow

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

« Older posts Newer posts »

Copyright © 2020 EBIA

Theme by Anders NorenUp ↑