Javascript Event Listener

DOM EVENTS:

LISTEN:

 

var a= document.getElementById('SearchBtn');
 var that  = this;
searchBtn.addEventListener('closeDetails', function a(e) {
     console.log("closing details as search triggered");
     that.closeDetails();
     searchBtn.removeEventListener('closeDetails', a);
     e.stopPropagation();
 }, true);



CREATE
 var myevent = document.createEvent('Event');
var searchBtn = document.getElementById('SearchBtn');
 (function () {

 myevent.initEvent('closeDetails', false, true);

 })();


RAISE EVENT

searchBtn.dispatchEvent(myevent);

NON DOM EVENTS:
function OnPrinterStateChanged(state) {
    var evt = new CustomEvent('printerstatechanged', { detail: state });

    window.dispatchEvent(evt);
}

NOTE that above is not supported in IE (even IE 11), so use this instead:
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent('myEvent', false, false, {});
window.dispatchEvent(evt);


//Listen to your custom event window.addEventListener('printerstatechanged', function (e) { console.log('printer state changed', e.detail); });
Advertisements

Cygwin Alternates

WhatCygwin is:

Cygwin is:

…isn’t it?

 Cygwin is not:

  • a way to run native Linux apps on Windows. You must rebuild your application from source if you want it to run on Windows.
  • a way to magically make native Windows apps aware of UNIX® functionality like signals, ptys, etc. Again, you need to build your apps from source if you want to take advantage of Cygwin functionality.

ALTERNATIVES

 

  • If all you want is the UNIX command line tools I’d suggest not installing Cygwin. Cygwin wants to turn your Windows PC into a UNIX Workstation which is why it likes to install all its packages.
  • Have a look at GnuWin32 instead. It’s Windows ports of the command line tools and nothing else. Here is the installer for the GnuWin32 diff.exe. There are offline installers for all the common tools. – http://gnuwin32.sourceforge.net/
  • MinGW, a contraction of “Minimalist GNU for Windows”, is a minimalist development environment for native Microsoft Windows applications. MinGW provides a complete Open Source programming tool set which is suitable for the development of native MS-Windows applications, and which do not depend on any 3rd-party C-Runtime DLLs. (It does depend on a number of DLLs provided by Microsoft themselves, as components of the operating system; most notable among these is MSVCRT.DLL, the Microsoft C runtime library. Additionally, threaded applications must ship with a freely distributable thread support DLL, provided as part of MinGW itself).
  • https://babun.github.io/index.html  – 270MB
  • https://github.com/bmatzelle/gow/wiki – 18 MB
  • http://cygwin-lite.sourceforge.net/faq.html – 80 MB

RxJS vs Redux for Angular 2 Apps

Both RxJS and Redux try to solve the same problem of handling state in the app changed by different components and sync/async actions.

While RxJS tries to handle AEg https://github.com/wbuchwalter/ng2-redux)synchrony of actions as streams, Redux converts all async/sync actions to Sync via the Action Dispatcher and Reducer (that simply takes the action and current state to generate new state)

That said, with Redux, there still is a place for RxJS when making n/w calls etc coz that’s how Angular 2 works by default (http svc returns observable). But apart from that, there isn’t much use of RxJS when using Redux (Eg https://github.com/wbuchwalter/ng2-redux)

Read More:

Advantage of Immutability in Angular 2 Apps

When using immutable data structures from ImmutableJS etc. in Angular 2 code, we can be sure that the values of properties in our objects will never change and whenever any prop needs to be changed, the library (like ImmutableJS) will create a fresh object and return the reference to it to us.

Hence, we can tell angular’s change detection strategy to not trigger until the reference to the bound object (object bound b/w template and model of Component) changes. This makes it way faster…

code:

 

@Component({

changeDetection: ChangeDetectionStrategy.OnPush

})

Class MyComponent {

}