First steps into Angular 2 from Angular 1

Web programming
With the final version of Angular 2 just been released last month after the Release Candidate was released in May this year, we decided to get into it at our next project in my company and I decided to save some notes to myself in my blog as usual. First of: Angular's official Quick start guide. TypeScript? There are many changes in Angular2 compared with Angular1, one of those is the native possibility to use TypeScript, ES2015, Dart or plain javascript to code your app and transpile that later by just using Angular's config file to set so. This is part of the demo's config file at Angular's website where you can see how TypeScript has been configured to write the app: [js] (function (global) { System.config({ // DEMO ONLY!…
Read More

Setting up Selenium in C#

Software Development, Web programming
1. Download Selenium WebDriver for C# Go to SeleniumHG website and get into Downloads, scroll down until you see the different versions of the WebDriver and get the C# version. Extract the zip files into a folder. Create a project Create a Test Project using VS (File > New > Project > Test > Unit Test). Add the WebDriver libraries: References > Right click > Add Reference... > Browse > Take the right ones for your framework (35 or 40). Note: You can create a different type of project, like a Console App, but this other allows you to get test reports, config different suites of tests, etc. Start testing Now you can start testing, include the namespaces inside OpenQa. For example to test in Chrome: using OpenQA.Selenium; using OpenQA.Selenium.Chrome;…
Read More

Slipping images with AngularJS

Software Development
Lately there are many effects added to websites related to user's scroll down event. One of them consists on sliding elements across the page as if they were slipping up or down, Adidas did an awesome addition of such effect in their snowboarding section giving the effect that certain elements were slipping up and down only to return to their original place. I tried to copy part of that effect (without checking the scrolling speed) and this is what I got: First, let's add the listeners on our controller. One of these listeners is going to check for when does the scrolling happen and in which direction. By making use of Angular, we will add a flag the the scope to tell the element that we are scrolling in such…
Read More

Sublime is sublime!! :D

Software Development
I am a great fan of Visual Studio, but sometimes it lacks some of the lightness and flexibility you can get with other frameworks. It's too heavy on loading and has so many tools you aren't going to use just right now. And that's where Sublime seems to be doing it's best: it's light, very light, as it only comes with the basics for editing and you can then add plugins to it as need to customize it's features according to your needs. Just as a quick comparison, Visual usually takes around 200MB of memory, sometimes 400 or 500, Sublime seems to be fine with 50. Also, the opensource community seems to be quite into this project always adding new plugins for it with each new tool they make available.…
Read More

Mocking BackEnd with AngularJS

Web programming
I found myself on the need of isolating my FrontEnd AngularJS app from the backend so the app can continue working without Internet access or without access to the backend services. I did not want, though, to add anything too aggressive into the app, but a piece of code that can be attached or unattached very easily and without the app having to know about it at all, like an app extension. To do so, I found myself installing angular-mocks, creating a file that requests the library, attaches the $httpBackend to the app on run time, uses $httpBackend to mock the responses with some json files and forces the requests to be synchronous. Step 1. Installing angular-mocks First of all, to get access to $httpBackend we need to install angular-mocks,…
Read More

Including Google Maps into your AngularJS app

Web programming
I already did this in the past but things change and the plugin I was using has changed too. I use AngularJS with Angular-Bootstrap directives as to save me some time and make the best of Bootstrap stylesheets I'm already using. angular-google-maps is another directive int he same club of bootstrap friends and this is how to include it into your project: Installing packages I'm using bower to manage packages at the front end, so first of all let's install the required packages to make this work. I need the plugin angular-google-maps, which requires angular (obviously), lodash and angular-simple-logger to work. So just make sure you install all required packages using bower: [sourcecode language="js" wraplines="false"] bower install --save-dev angular bower install --save-dev angular-google-maps bower install --save-dev angular-simple-logger bower install --save-dev…
Read More

Upgrading WordPress blogs

Software Development
Once in a while you must do this and, if you end up lazy for years like me, may even feel nightmares about upgrading from version 2.x to version 4.x, luckily upgrading Wordpress is one of the easiest things you can do: Making a backup It's always wise to backup your site before you make such a change. Don't worry, you don't need to backup absolutely everything, but check which things you need to backup depending on your needs: 1. Your posts and comments: which is as easy as going to admin > Tools > Export and save an XML (maybe JSON in future?) file with all the relevant content. Whatever happens now, any wordpress version should be able to recover your most relevant data. 2. Your wp-content: usually you…
Read More

Managing packages with Bower

Web programming
Installing Bower Just do it globally so you can access it from anywhere. You need to have previously installed Node.js in order to install it, and Git in order to use it. npm install bower -g Have in mind you will also need to install it in your TeamCity server as you'll probably want to get the packages from there too. Installing packages Installing a package with bower is as easy as moving to the root folder of your project using the console and executing something like this: bower install angularjs You can also install a concrete version using # bower install angularjs#1.4.9 Or install more than one package with one command: bower install angularjs jquery bootstrap angular-ui Saving installed packages The main idea of bower is to keep track…
Read More

HTML5 caching: Cache API

Web standards
We can manage the browser's cache to save our website as an app in it. App cache file - To config the cache we use something similar to the robots: a txt file listing the urls to cache with some options. - The file must be served as "text/cache-manifest" mime type. To config it on the server use this extension: .appcache - We tell the browser where the file is at the <html> tag of our page using a new attribute: manifest="" <html manifest="myCache.appcache"> - You must include the manifest on each page you want to cache resources. - Without the cache manifest attribute the browser will use the default caching system. How the file is organized CACHE MANIFEST true/false This navigator property allows us to know if the browser…
Read More

AngularJS : Service vs provider vs factory

Web programming
Just copy-pasting this answer from Ben Clinkinbeard: Services Syntax: module.service( 'serviceName', function ); Result: When declaring serviceName as an injectable argument you will be provided the actual function reference passed to module.service. Usage: Could be useful for sharing utility functions that are useful to invoke by simply appending () to the injected function reference. Could also be run with injectedArg.call( this ) or similar. Factories Syntax: module.factory( 'factoryName', function ); Result: When declaring factoryName as an injectable argument you will be provided the value that is returned by invoking the function reference passed to module.factory. Usage: Could be useful for returning a 'class' function that can then be new'ed to create instances. Providers Syntax: module.provider( 'providerName', function ); Result: When declaring providerName as an injectable argument you will be provided…
Read More

WebApi and AngularJS: Mapping parameter objects

Web programming
Looks like the parameter behavior between MVC and WebApi is slightly different, mainly because WebApi can only get one parameter from the Body which forces us to use request models. I am working with Angular resources and I have found certain problems to connect to Web API services due to the different way of thinking or structuring the data. Let's see some workarounds: Sending an array of objects If you try to send an Array, in AngularJS you may assign the Body by forming it into parameters with something like this (just because it's the usual way we add them): [sourcecode language="js" wraplines="false"] myResource.post({ myItems: myItems }) [/sourcecode] Which results in a JSON like this: [sourcecode language="js" wraplines="false"] {myItems: [{"Id": 0, "Name": "Blah"}, {"Id": 1, "Name": "Bleh"}]} [/sourcecode] And this…
Read More

Using dotLess in .Net

Uncategorized
While I had a node.js system built to build my LESS stylesheets and even a less.js client-side generator I found that the client-side doesn't work quick enough on firefox and even the server side isn't the simplest thing when you are working with .Net and end up having the feel you have two parallel systems. So I searched for more options and decided to give another try to dotLess, which gives .Net a handler to use .less files and generate the CSS server-side. Installing dotLess First of all, install dotLess through NuGet: PM> Install-Package dotless That will install the library, add its references and make some changes in the webconfig, unfortunately looks like IIS7 doesn't like one of those changes: This is because IIS 7 uses http handlers from both…
Read More

Quick introduction to SVN

Software Development
SVN or Subversion is a source control repository technology that allows to save code statuses on a centralized server from which the developers can save the current status of their project, merge with what others devs have been doing, create branches of a project to develop new features or solve bugs in an isolated space and finally merge back to the trunk to include the changes into the next release. SVN also has some clients that connect to the centralized repository and help you committing changes into it or getting the latest changes from it: one of them is Tortoise. Getting a Repository You can use Windows explorer to handle everything, so getting a project from the repository is as easy as creating a new folder anywhere in your computer,…
Read More

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