Arrow Function Quirks

  • Below are equivalent
    • var smartPhones = [
      { name:’iphone’, price:649 },
      { name:’Galaxy S6′, price:576 },
      { name:’Galaxy Note 5′, price:489 }
      ];
      var a = function(y) {
      console.log(y)
      }
      smartPhones.map(a) // is same as smartPhones.map(r =>a(r))
  • an arrow function with a block body does not automatically return a value. Use a return statement for that.
  • Arrow functions do not have their own this value. The value of this inside an arrow function is always inherited from the enclosing scope.
    • Use non-arrow functions for methods that will be called using the object.method() syntax. Those are the functions that will receive a meaningful this value from their caller.
    • Use arrow functions for everything else.
  • arrow functions are anonymous, which means that you won’t have a self-bound lexical identifier to self-reference, for recursion, event handler unbinding, etc. Yes, ES6 has “name inference”, but that only assigns an internal .name property to the function object — it provides no lexical relief.
  • wrapping object literals in parentheses is the only trick you need to remember
    • all the new ES6 parameter forms, like default values, destructuring, rest params, etc… all those force you to use ( ) around the param list, even if only using the one param.
    • There is one caveat when using arrow functions to create plain objects. Always wrap the object in parentheses:
      // create a new empty object for each puppy to play with
      var chewToys = puppies.map(puppy => {});   // BUG!
      var chewToys = puppies.map(puppy => ({})); // ok
      

      Unfortunately, an empty object {} and an empty block {} look exactly the same. The rule in ES6 is that { immediately following an arrow is always treated as the start of a block, never the start of an object. The code puppy => {} is therefore silently interpreted as an arrow function that does nothing and returns undefined.

      Even more confusing, an object literal like {key: value} looks exactly like a block containing a labeled statement—at least, that’s how it looks to your JavaScript engine. Fortunately { is the only ambiguous character, so wrapping object literals in parentheses is the only trick you need to remember.

Bl.ocks: Gist Viewer

http://bl.ocks.org

Bl.ocks (pronounced “Blocks”) is a simple viewer for sharing code examples hosted on GitHub Gist. For example, if your Gist URL is:

https://gist.github.com/mbostock/1353700

Replace “gist.github.com” with “bl.ocks.org” in the URL to view it:

https://bl.ocks.org/mbostock/1353700

The main source for your example is in index.html. This file can contain relative links to other files in your Gist, such as images, scripts or stylesheets. And of course you can use absolute links, such as CDN-hosted D3, jQuery or Leaflet. To explain your example, add a README.md written in Markdown. (You can omit the index.html if you just want to write, too.)

subjects in rxjs

RxJS Subjects different take on the GoF Observer Pattern Subjects, but their API duck-types as an Observable. In fact, in RxJS, Subjects even inherit from Observable. The advantage here is that all Subjects then have the same operators and methods available to them as Observables do.

Probably a more important distinction between Subject and Observable is that a Subject has state, it keeps a list of observers. On the other hand, an Observable is really just a function that sets up observation.

While Subjects are Observables, Subjects also implement an Observer interface. That is to say, they have next, error, and complete methods. These methods are used to notify their counterparts on observers in the subject’s internal observers list. This means a subject can be used as an observer to subscribe to any observable.

// To "share" the observable tick$ with two observers,
// observer1 and observer2, we can pipe all notifications
// through a Subject, like so
const tick$ = Observable.interval(1000);
const subject = new Subject();
subject.subscribe(observer1);
subject.subscribe(observer2);
tick$.subscribe(subject);

The example above is “multicasting” the observable tick$ to two observers: observer1 and observer2. This is actually what almost all multicasting operators in RxJS do internally. For example publish, publishReplay, multicast, share, etc. Really, this is the primary use case for Subjects in RxJS.

Subjects Are Not Reusable

In RxJS, Subjects cannot be reused. That is to say, when a Subject completes or errors, it can no longer be used. If you try to next on a Subject that is closed due to it’s complete or error method being called, it will silently ignore the notification. If you want the Subject to loudly and angrily error when you next to it after it’s done being useful, you can call unsubscribedirectly on the subject instance itself.

// The death of a Subject
const subject = new Subject();
subject.subscribe(x => console.log(x));
subject.next(1);    // 1
subject.next(2);    // 2
subject.complete();
subject.next(3);    // silently ignored
subject.unsubscribe();
subject.next(4);    // Unhandled ObjectUnsubscribedError

HTML Scrapping Options

  • Do it on server side using any language
    • Not interested
  • Do it on nodeJS using Javascript
  • Do it in the browser
    • One way is to get a JSON aka JS Object representation of this HTML snippet and then query it as required
    • Another way is to query HTML using JQuery

ref: http://stackoverflow.com/questions/2861/options-for-html-scraping

WebVR API in Chrome

https://blog.chromium.org/2016/12/introducing-webvr-api-in-chrome-for.html

 

Chrome 56 for Android is now available in beta, and web developers can sign up for an Origin Trial which enables the WebVR API and GamePad API extensions. The WebVR API provides access to the input and output capabilities of virtual reality devices such as Daydream View. It also provides access to the user’s position and orientation, so that web apps can render a stereoscopic 3D scene to the headset’s display. The Gamepad API extensions provide access to input from motion controllers, such as the Daydream controller, and enables natural interactions in VR.