Joan Llenas

Reactive programming with RxJS

Joan Llenas — Fri, 08 Apr 2016 22:20:26 +0000

RxJS is a set of APIs that unifies the way you interact with collections and events.
The main actors are Observables and Observers, but the full power of the library is the rich set of operators and schedulers that you can combine to achieve really complex data processing and orchestration in a very expressive and declarative way.

Observables push values to subscribers.

You can convert different data types to Observables.

There are a few shortcut operators to create common special Observables.

To stream values over time you can use schedulers.

Finally, you can unsubscribe from an Observable to stop recibing data.

That just scratches the surface of what can be achieved with Observables.
To find out more about RxJS check the RxJS github repo.

Mocking jQuery selector calls with Jasmine

Joan Llenas — Thu, 17 Sep 2015 13:42:59 +0000

It looks like you can mock jQuery selector api calls by spying on $.fn.find or $.fn.init. In the case of #ID selectors it works different and document.getElementById() is used.
I have proof:

Testing constructors

Joan Llenas — Mon, 29 Jun 2015 21:52:20 +0000

When you need to test what is happening inside a constructor it’s not obvious how to do it, because it looks like you can’t spy the SUT when you haven’t even created an instance.
Well, thanks to JavaScript’s prototypal nature you can spy on the prototype object directly, just like you would do with any instance:

Jasmine spy.and.callFake scope

Joan Llenas — Thu, 25 Jun 2015 16:18:40 +0000

When using Jasmine’s spy.and.callFake, the function execution happens within the spied instance.
This fact is not documented elsewhere but it’s interesting anyway, because it allows some neat tricks.
Some tests to illustrate the scenario:

Cordova projects and npm modules

Joan Llenas — Wed, 07 Jan 2015 10:18:19 +0000

It may sound obvious but I did it wrong for a while…
When you create a Cordova (Phonegap) application and you want to use npm modules don’t add them within the www folder, use the Cordova project root instead, otherwise the generated node_modules folder will get compiled and added to your build.
The final project structure (as of Cordova 4.0) should look something like this:

+---MyCordovaApp
|   \---hooks
|   \---node_modules
|   \---platforms
|   \---plugins
|   \---www
|   \---config.xml
|   \---package.json // npm project config file
|   \---gulpfile.js // Gulp config file
|   \---karma.conf.js // Karma test runner config file

The node_modules folder is safe here, it won’t be added to the app build.
The only thing that you have to bear in mind is that configuration files paths have to be prefixed with www.

The (sometimes) annoying Chrome dev-tools Inspector tooltip

Joan Llenas — Mon, 29 Dec 2014 23:26:32 +0000

When you are inspecting the DOM in Chrome Dev-tools there’s a yellowish tooltip that displays information about the currently hovered HTML node.

To get rid of it just press CMD (OSX) or CTRL (WIN) while hovering the Element’s panel in dev-tools.

Happy inspecting :)

ng-click and stopPropagation()

Joan Llenas — Sun, 23 Nov 2014 13:12:11 +0000

I have a calendar grid where each grid cell has an ng-click handler that takes me to the day’s detail view.
At the same time, each grid cell can have an indeterminate amount of events associated, each with an ng-click handler associated that displays the selected event details on a popover.

As you can see there’s a conflict here. When you click on a calendar event there will be two ng-click handlers executed (because the event is bubbling), one will display the popover and the other one will go to the day’s detail view. Not what we want.
Thankfully ng-click scope exposes the $event property, which is the DOM event being propagated.
You can use the DOM event stopPropagation() method to stop event propagation.

Related:

Git: change filename case

Joan Llenas — Sat, 08 Nov 2014 18:24:26 +0000

Whe you modify a filename by just changing to upper/lowercase Git won’t detect it (at least on OSX). When you want to perform such action you have to explicitly tell Git what’s changed. Say we have the helloWorld.js file already commited but we want to actually call it HelloWorld.js. The following Git command will do … Continue reading

Frameworkless full-height mobile app CSS layout

Joan Llenas — Fri, 26 Sep 2014 21:20:08 +0000

A few CSS tricks to emulate a native mobile application layout.
I hate the fact that inline-block elements don’t support spaces between them, it’s weird…
(view fullscreen)

Related:

AngularJS Loading Bar

Joan Llenas — Thu, 25 Sep 2014 08:08:46 +0000

An automatic loading bar using angular interceptors.
It works automatically, so simply include it as a dependency and it will automatically display the progress of your $http requests.

Related:

Demo: https://chieffancypants.github.io/angular-loading-bar/
GitHub repo: https://github.com/chieffancypants/angular-loading-bar