Git bisect

Git bisect helps you find out the commit that introduced a bug. It has happened a few times that somebody discovers a bug that I knew used to work fine before. When this happens I go back to an arbitrary point in the git history and try to reproduce the bug. If the bug is still present I go back a little more, until I find a point where the bug is not there. Then I try to find the commit that introduced the bug by searching through the commits between the commit I know works and the one I know doesn’t.

Git bisect helps you do this more efficiently by using a binary search. Lets say you are now in the HEAD of your master branch and you know there is a bug in there. You can start a bisect session by running:

1
git bisect start<br /> git bisect bad
Read More

Introduction to docker

What is docker?

Docker is a a way to create “virtual machines” that contain your app(and its dependencies) and can be easily deployed to any environment. The thing about docker is that these virtual machines that it creates are not “complete” virtual machines. Docker uses a light weight virtualization technology that doesn’t need an hypervisor. Because it doesn’t use an hypervisor it can pack more virtual machines in a single server, which translates to more efficient use of hardware.

How does this compare to the traditional model?

In the traditional model you most likely get a server(or more), create a virtual server image with all the requirements for your app and then create all the virtual machines you need on your server. When you are ready to deploy your app you grab a build of the app and install it on all of the virtual machines.

Read More

Web components

Web components is a series of W3C specs that aim to give web developers the power to create custom reusable components. The specs that form part of the web components framework are: HTML templates, custom elements, shadow DOM and HTML imports. Together these standards give us the power to create, load and use custom components.

HTML Templates

HTML Templates allow you to specify templates that you can later reference with JS and insert where you see fit. Templates are an alternative to writing HTML strings inside your JS code. Instead of having to concatenate a bunch of strings to form an html snippet now you can write it in HTML inside a template tag and then just use its content.

Read More

Building modular apps with Angular - Part 2

In a previous post I explained how to start modularizing Angular apps.

I’m going to improve the app I built in my example so it now lazy loads the modules it needs when you change routes. The end result will be the main page only downloading main.js and whenever you change to /yours or /mine, the respective file will be loaded with its corresponding dependencies. This should be an easy task, but angular makes it really complicated.

Lets try the obvious approach. First of all we need to change main to not load mine and yours:

1
2
3
4
5
6
7
8
9
10
11
12
define([], function() {
  var app = angular.module('myApp', ['ngRoute']);
  app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.otherwise({
      templateUrl: 'templates/main.html',
      controller: 'MainController'
    });
  }])
  .controller('MainController', function() {});

  angular.bootstrap(document.getElementsByTagName('html')[0], ['myApp']);
});
Read More

Building modular apps with Angular

Building modular apps with Angular is not an easy task. Since I arrived into an Angular project a couple of months ago I’ve been struggling with our architecture, trying to make it modular in a way that makes sense, and it hasn’t been a walk in the park.

Lets try to build an example app to see what I’m talking about. For my example we are going to have a single page app with three screens:

  • Greetings screen – Contains links to mine and yours pages
  • Mine – Shows a list of my stuff and has a link to greetings page
  • Yours – Shows a list of your stuff and has a link to greetings page

These are the parts that will make our app:

  • App module
  • Greetings controller
  • Mine controller
  • Yours controller
  • Reusable list module
Read More

Maximum length palindromic subsequence

Given a sequence of characters, find the longest palindromic sub-sequence. A sub-sequence is any sequence that can be formed by removing 0 or more characters from the given sequence. For example, the possible sub-sequences for ABC are:

1
2
3
4
5
6
7
8
9
10
ABC
BC
C
B
AC
C
A
AB
B
A
Read More

Bash productivity tips

See command history

When I want to find a command I used in the past, but I don’t remember I usually use vim to search for it:

1
vim ~/.bash_history

This is useful because you get the whole list of commands in your history and all the power of vim to search for the command you are looking for. A faster way to show the list of the commands is with the history command:

1
history
Read More

Implementing Content Security Policy (CSP)

Content Security Policy is a browser feature that allows us to make our apps more secure by helping us prevent Cross Site Scripting(XSS) and content injection attacks. The way it does this is by giving us control over where resources will be loaded from and executed.

Even though CSP is supported by most browsers, you should always develop your apps thinking of the worst case scenario (The browser not supporting CSP). The golden security rule for web apps is: Filter input, escape output.

Enabling CSP requires us to configure our server to add a header to our document response. The most restrictive(and safest) value for this header would be:

1
Content-Security-Policy: default-src 'none';
Read More

The Fibonacci sequence

The Fibonacci sequence is a sequence of numbers starting with 0 and 1 and then adding the sum of the two last numbers at the end of the sequence:

1
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ...

The mathematical representation of the Fibonacci sequence is:

1
F(n) = F(n-1) + F(n-2)
Read More

Routing with angular

Angular’s ngRoute is useful when building single page apps with multiple views. It allows you to easily load a template into the screen and initialize the controller associated with it.

This is not only helpful to keep your code organized by having different controllers for different screens, but also gives your users a way to create bookmarks that associate a URL in the address bar with the current content of your app. This is a piece of functionality that has always been part of the web(links), so it is a good a idea to keep it there so users don’t run into unexpected behavior.

Read More