AngularConnect 2015 London

Software Development
So I’ve been at the AngularConnect Conference these two days and these are some of the things I got from it: TypeScript You know something has become popular when all the speakers using javascript (and in this conf that was around 95% of them) use it. TypeScript is a language made by Microsoft that allows you to use classes and interfaces in javascript (and some other things) and then can be compiled into plain javascript. The reason for it to become that popular is that being able to create interfaces or classes is crucial when developing big apps, I have been finding it increasingly difficult to deal with the codes complexity as my company's project has grown and was starting to worry as it is to grow more, definitely, I…
Read More

First steps with Protractor

Software Development
Once installed in your computer, it's time to start messing with it :) First of all, we will use their websites tutorial test. Create this spec.js file: [sourcecode language="js" wraplines="false"] // spec.js describe('Protractor Demo App', function() { it('should have a title', function() { browser.get('http://juliemr.github.io/protractor-demo/'); expect(browser.getTitle()).toEqual('Super Calculator'); }); });[/sourcecode] That's just a basic test. Then create this config file to set up Protractor: [sourcecode language="js" wraplines="false"] // conf.js exports.config = { framework: 'jasmine2', seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['spec.js'] }[/sourcecode] Starting the webdriver manager To make it run you need to open the console and run the webdriver manager, so open it and exec: webdriver-manager start Executing the tests Now that the webdriver manager is running, open another console window, move to the folder where you created those two files and exec this:…
Read More

Installing Protractor

Software Development
First of all, make sure you have Node.js installed in a newer version than 0.10. Open cmd, exec: node -v If it's not the right one, go to node.js page and get the latest .msi for Windows. Install Python You are going to need to install Python 2.7, just get the installer from Python's download page and follow the steps. To make your life easier, you will need to add python as an environment variable, you can do this manually or check the option "Add python.exe to path" at the "Customize install" screen during the installation: select "Will be installed on local harddrive". Restart your cmd command window (close and open, changes on environment variables may not be effective if not). Note: You may need to restart your computer at…
Read More

Using Google Tag Manager with AngularJS

Software Development, Web programming, Web statistics
One would expect that being Angular a Google product and Google Tag Manager another of their products combining them would be quite simple and straightforward, but I personally had my doubts and not much documentation on how are we supposed to make them work. Should I just paste the code as usual or will that get into conflict with Angular? Is it going to register "page views" whenever I change the routing or not as it's not a standard page view? I checked some things and here are some of my results: Adding Google Tag Manager snippet into the page First of all, I didn't find any problem with just copy-pasting the code before the /body closing tag, but I wanted to angularize it and have everything in one piece…
Read More

Angular directives and scope

Web programming
When creating directives with angular, you can choose to use the parent's scope, create your own isolated scope for the directive or have an inherited one. Let's see what types of scope we have and how to work with them: Let's start by considering this main controller and template: [sourcecode language="js" wraplines="false"] var app = angular.module("testingDirectives", []); app.controller("mainController", function($scope, $timeout) { $scope.MainValue = "main"; $scope.ValueToOverride = "notOverridden"; $scope.ValueToOverrideOn6 = "notOverridden"; $timeout(function() { $scope.MainValue = "main updated"; }, 1000); }); [/sourcecode] [sourcecode language="html" wraplines="false"] <div ng-app="testingDirectives" ng-controller="mainController"> {{MainValue}} <directive-one></directive-one> <directive-two></directive-two> <directive-three></directive-three> <directive-four custom-att="attribute"></directive-four> <directive-five custom-att="attribute"></directive-five> <directive-six custom-att="attribute" custom-att2="overrided"></directive-six> <directive-six custom-att="attribute" custom-att2="overrided 2"></directive-six> <directive-seven custom-att="attribute" custom-att2="overrided"></directive-seven> <directive-seven custom-att="attribute" custom-att2="overrided 2"></directive-seven> <directive-eight from-parent="{{MainValue}}"></directive-eight> <directive-nine from-parent="{{MainValue}}"></directive-nine> </div> [/sourcecode] Using the parent scope In this case, the directive doesn't have a scope of its own,…
Read More

HTML Emails: GMail Andriod App

Web programming, Web standards
While it looks like most email readers are moving into accepting standards as much as possible GMail has a bit of a weak point when it comes to its Android App (not the website though). I got myself in trouble when trying to add a logotype image centered on the header and with a background color... Centering an element Looks like the CSS property "align:center;" won't make it when trying to align an image to the center of the table cell, instead, using the HTML property "align" on the table/cell does it: [sourcecode language="html" wraplines="false"] <tr> <!-- Logo --> <td align="center"> <a href="http://www.gaydar.net"><img alt="Gaydar" src=".../logo.png" border="0" /></a> </td> </tr> [/sourcecode] But you may not want to center everything inside that cell, you can create a row just for this logo…
Read More

HTML Email tricks and howtos

Web programming, Web standards
Tips to write HTML Emails that I've found. Note this post can be bsolete as email readers are constantly changing and evolving. Background images It is just not possible to add an image as a background at the moment. While most readers will accept it Outlook Office seems to have issues and Hotmail/LiveMSN just doesn't support it. So unless you don't mind some of your users not getting the image at all this doesn't look like a good idea. As a tip: None of the big companies I checked use background images on their emails, this included Amazon, Google, Ebay, HSBC, Channel4, BBC, ... that should give you a hint. Solutions You can use plain colors on the background using a table's BGColor property and the CSS property. Instead of…
Read More

Difference between faking, mocking, and stubbing

Web programming
Quick answer Stub - an object that provides predefined answers to method calls. Mock - an object on which you set expectations. Fake - an object with limited capabilities (for the purposes of testing), e.g. a fake web service. Test Double is the general term for stubs, mocks and fakes. But informally, you'll often hear people simply call them mocks. From Elijah Manor Test stubs are functions (spies) with pre-programmed behavior. They support the full test spy API in addition to methods which can be used to alter the stub's behavior. Mocks (and mock expectations) are fake methods (like spies) with pre-programmed behavior (like stubs) as well as pre-programmed expectations. A mock will fail your test if it is not used as expected. Source. From Martin Fowler Fake objects actually…
Read More

Spying with Mocha and Sinon.js

Software Development
Sinon spies Spies on sinon are redirected functions that will notify of any call to them. Let's see an example: [sourcecode language="js" wraplines="false"] var myGreatObject = { myAwesomeMethod: function () { console.log(1); //do something } }; it('test spies', function () { myGreatObject.myAwesomeMethod(); // 1 //Now let's reconvert it into an spy: myGreatObject.myAwesomeMethod = sinon.spy(); console.log(myGreatObject.myAwesomeMethod.called); // false myGreatObject.myAwesomeMethod(); console.log(myGreatObject.myAwesomeMethod.called); // true console.log(myGreatObject.myAwesomeMethod.callCount); // 1 myGreatObject.myAwesomeMethod(); myGreatObject.myAwesomeMethod(); console.log(myGreatObject.myAwesomeMethod.callCount); // 3 }); [/sourcecode] I think that's a good example of how spies work in Mocha+Sinon. We have an object and we can make use of it, as usual. We then redirect the object's method to an spy, this is, the method "myAwesomeMethod" is actually a pointer, so we point to a different function, that's all. If we check if the spy has…
Read More

Post template

Web design
This is a post to test how do styles look in my blog in case I were to change the theme, so I'm going to add some Lorem ipsum paragraphs with some stuff I usually have when I write a post: Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri…
Read More

Configuring Karma to test Angular apps using RequireJS

Software Development
Installing and configuring a testing environment for an Angular application hasn't been very straightforward for me but here are the steps I took (the right ones, at least). Configuring Karma First of all, we need to have installed and working: Node.js + Karma + Mocha + Chai + Sinon + Karma-RequireJs (the plugin for Karma, not the standard library). Once that works, we still need to configure it all to test our app, which is a big angular app and uses RequireJS to load its modules. First of all, we can configure Karma by executing "karma init" on the console (make sure you do that on the main folder of your project!!). That will give us a config file with the basic config done. We wanted to use Mocha, Chai…
Read More

Node.js

Software Development
Node is a javascript based server that allows to run javascript based applications in your computer without having to open or use any browser. This means that javascript applications can be run as desktop apps. You may now wonder why would anyone want to do that, but in any case, I'm not saying you have to build any JS app, actually, there are plenty of them already developed that you can benefit from, you only need to install node.js and start installing and running them. Those tools by the way, are mainly helpers to build your websites... in javascript. Which has a lot of sense, as many applications are now going into Knockout, Ember or AngularJS, which means client-side presentation apps made in javascript. So we are going to have…
Read More