Official Blog of Erkan Buelbuel (Webia1)

Lodash related Examples


Creates an array of values by running each element in collection thru iteratee., (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)   

Installing Angular2 RC5

npm install @angular/{core,common,compiler,platform-browser,platform-browser-dynamic,router,forms}@latest --save --verbose

Update Angular-CLI if you use this tool

npm install angular-cli @angular/tsc-wrapped --save-dev --verbose

Git: File Creation Date

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


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

MacOS Related

Show hidden files in finder

defaults write AppleShowAllFiles YES

Change Screenshots Folder

#in Terminal 
mkdir ~/Documents/Screenshots
defaults write location ~/Documents/Screenshots
killall SystemUIServer

Show the Path in the Finder Title Bar

defaults write _FXShowPosixPathInTitle -bool true; 
killall Finder


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: {{ }}
  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

« Older posts

Copyright © 2017 Official Blog of Erkan Buelbuel (Webia1)

Theme by Anders NorenUp ↑