18Mar 2015 by Ruben Canton No Comments

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
13Mar 2015 by Ruben Canton No Comments

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
11Mar 2015 by Ruben Canton No Comments

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
06Feb 2015 by Ruben Canton No Comments

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
28Jan 2015 by Ruben Canton 3 Comments

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
23Jan 2015 by Ruben Canton No Comments

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
19Jan 2015 by Ruben Canton No Comments

Using LESS client-side

Other
You need to download and add to your project less.js and call it from the HTML page: <script src="less.js" type="text/javascript"></script> Then, add the call to the .less file/s making sure you set the rel="stylesheet/less": <link type="text/css" rel="stylesheet/less" href="MyStyles.less"> Tips: - Make sure you call the styles before calling less.js - When you link more than one .less stylesheet each of them is compiled independently. So any variables, mixins or namespaces you define in a stylesheet are not accessible in any other. Options You can set up some LESS options by using this code: [sourcecode language="js" wraplines="false"] <script> less = { env: "development", logLevel: 2, async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, globalVars: { var1: '"string value"', var2: 'regular value' }, rootpath: ":/Content/" }; </script> [/sourcecode]…
Read More
07Jan 2015 by Ruben Canton 1 Comment

Installing Node.js with Karma and Mocha for Visual Studio

Software Development
Node.js Please download the installer (.msi) from their downloads page. There's also an .exe but it didn't work very well to me. You need to install it as an admin, so open cmd as admin then go to the folder where the msi is downloaded and exec it (just write its name). That should install node. Testing that it worked Before going forward we can check that the install was successful, to test node, on the same cmd just type "node -v" and press enter, that should display its current version. You can also write just "node" to open the program. Now write "1+2" and press enter, that should output a 3. Ctrl+C to close node. (more…)
Read More
16Dec 2014 by Ruben Canton No Comments

The RESTful way

Software Architecture, Web standards
The idea of building your website services in a RESTful way consists on using the HTTP protocol to determine the Action you are going to perform instead than some Action name on the URL. This way, we can build APIs that are more standarized and easy to sue for everyone. But... what is REST? REST is an abbreviation for "Representational State Transfer" and, as its name points out, it's an "idea" (let's call it idea for now) to transfer the State of an object through a Network. But that idea is based on the HTTP protocol, in fact REST was born as a way of using HTTP properly, some type of "HTTP good practices", which we can call "an architectural style", or architectural pattern if you prefer. The point is...…
Read More
23Oct 2014 by Ruben Canton No Comments

Configuring local website domain and SSL using IIS7

Software Development
Creating your website This tutorial is not really about how to add your website to IIS, but just as a quick reminder: Open IIS, expand your Computer icon, right click on "sites", click on "Add new site..." and select the folder where it's placed. Remember that if it's a .Net website you may have to set the right Framework at the App Pool. Setting a website's domain Now that we have our website running but that we need to access it using localhost or 127.0.0.1, maybe using some port to have multiple websites like :8080 or :9999, you may prefer to set a domain and get rid of the port. Select your website on the left panel, now look for the "Bindings" option on the right panel and click it,…
Read More
10Oct 2014 by Ruben Canton No Comments

Style your map with Snazzymaps!

Web design
I just found this page by accident and looks so awesome: Snazzymaps. It has several templates to style your Google Maps on your page so that it looks more elaborated. You can adapt the map to concrete articles like the Midnight Commander style or use a Greyscale to give the map some "vintage" style, or even make it have tones related to your brand colors!! Just have a look. Ah, and in case you want to make your own template you can use this tool :) Some cool ones: Bobbys world Flat map with labels Too awesome to describe Mr Blue
Read More
Close Bitnami banner
Bitnami