Tomas' Personal Website

Useful Webpack DefinePlugin Usages

Tomas Alabes — Tue, 03 Jan 2017 12:30:16 GMT

What the plugin does

The Webpack DefinePlugin allows you to create global constants which can be configured at compile time and used in your webpack bundle.

Example constant definitions:

plugins: [
  //...
  new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(true),
      VERSION: JSON.stringify("5fa3b9"),
      BROWSER_SUPPORTS_HTML5: true,
      TWO: "1+1",
      "typeof window": JSON.stringify("object"),
      env: {
        DEVELOPMENT: JSON.stringify(false)
      }
  })
  //...
]

These are different ways of setting variables.

When Webpack runs the build, it will replace the exact definitions occurrences (PRODUCTION, TWO, typeof window) with the correspondent value (true, "1+1" and "object").

Let's see some real-world use cases and why this might be useful.

Possible Usages

Client-Side Logging

Server logging is very common and important in all applications. OWASP has a very good wiki for what should be included and what shouldn't: Logging Cheat Sheet. But when it comes to client-side logging, it's a bit different.

In the case of web apps, logging is something that you might want during development but avoid in production.

Production client-side logging might:

Expose info that you don't want to expose (everything in the client is already "public", logging would it make much easier to get...)
Affect your application performance
Trigger an error if trying to be accidentally executed in an old browser without the console object

One way to avoid production logging would be setting an env variable for when our build is for development.

Assuming you have different webpack configs for the environments, this is a way of writing the DEVELOPMENT variable:

webpack.config.dev.js

plugins: [
    new webpack.DefinePlugin({
        'DEVELOPMENT': JSON.stringify(true)
    })
]

You can also check for the node process env variables with something like

new webpack.DefinePlugin({
    DEVELOPMENT: JSON.stringify(process.env.NODE_ENV === 'development')
})

And then calling webpack like NODE_ENV=development webpack ... (I use the configs separation approach).

Later in the code you would reference this variables as such:

var Logger =  {
    log: function (msg) {
        if(DEVELOPMENT)    console.log(msg);
    }
    // etc
};

Logger.log("Hello!");

This way, in development this code would be transformed to:

var Logger =  {
    log: function (msg) {
        if(true)    console.log(msg);
    }
};

Logger.log("Hello!");

and in production to:

var Logger =  {
    log: function (msg) {
        if(false)    console.log(msg);
    }
};

Logger.log("Hello!");

If in production your are using UglifyJS and the dead_code optimization, those branches will be removed from the code, because obviously those logs would never be ran.

If you don't care about your console calls at all, you can also use UglifyJS drop_console optimization where it removes all the calls to the console.

Using ESLint? You can add the /* global DEVELOPMENT */ comment to ignore the error, or add the globals: { DEVELOPMENT: true } in the .eslintrc file.

Feature Flags

You want a feature to not be seen in production, or even not appear in the bundle (again with the UglifyJS optimization on):

plugins: [
    new webpack.DefinePlugin({
        'NICE_FEATURE': JSON.stringify(true),
        'EXPERIMENTAL_FEATURE': JSON.stringify(false)
    })
]

Services URLs

During development you want to hit a Service URL to test your app, and in production you want to use the real thing:

webpack.config.dev.js

plugins: [
    new webpack.DefinePlugin({
        'SERVICE_URL': JSON.stringify("http://mockservice.com")
    })
]

webpack.config.prod.js

plugins: [
    new webpack.DefinePlugin({
        'SERVICE_URL': JSON.stringify("http://realservice.com")
    })
]

The same could apply with users or tokens or whatever you use for communicate with services in dev/prod.

EnvironmentPlugin

This plugin will allow you to reference environment variables through process.env

new webpack.EnvironmentPlugin([
  "NODE_ENV"
])

In your code:

var env = process.env.NODE_ENV;

It's a shortcut that allows you to refer to node environment variables using the DefinePlugin internally. It would be the same than doing:

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
          'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }
    })
]

Do you have more uses of this plugin? I would love to here them in the comments! See ya

Webpack and the Public Path Config

Tomas Alabes — Sun, 11 Dec 2016 12:30:16 GMT

You have your app bundled with webpack and some resources (like images) that are outside that bundle, and your app can be used in your domain or consumed by someone else in his site.

This post is meant to explain how to manage the url to the resources that are not part of your webpack bundle, so that it works in your site and in your consumers' sites.

The Case

You might have a webpack configuration that uses the url-loader to manage images, possibly with a limit, so that images smaller than X kbs are inlined into the bundle and the rest are requested by webpack dynamically when necessary.

This configuration would be something like this:

// webpack.config.js
module.exports = {
  entry: './main.js',
    output: {
      path: './build', // This is where images AND js will go
      publicPath: 'http://mysite.com/', // This is used to generate URLs to e.g. images
      filename: 'bundle.js',
      library: 'myApp',
      libraryTarget: 'umd' //loaded via commonjs, amd or globally
  },
  module: {
    loaders: [
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, // inline base64 URLs for <=8k images, direct URLs for the rest
      { test: /\.css$/, loader: 'style-loader!css-loader' }, // loader for css, imgs will be loaded
      { test: /\.html$/, loader: 'html-loader' } // loader for html, imgs src attrs will be loaded
    ]
  }
};

And the output of your app would be like:

- ./build/bundle.js
- ./build/myBigImg.jpg
- ./build/myBigImg2.png

All the images smaller than 8kb are bundled as base64 strings in bundle.js, the rest are requested to output.publicPath + image.

If you see the Network Tab when your bundle is loaded, you might see the requests to:

http://mysite.com/myBigImg.jpg
http://mysite.com/myBigImg2.png

And that's cool! Webpack managed this for us. But...

http://myfriendsite.com wants to use my app too, and when he loads my bundle, a request to http://mysite.com/myBigImg.jpg is done! And although it a completely valid request, if I were him, I wouldn't want to rely on mysite.com to have the component working. I would want the images to be requested to my server.

How do I change the publicPath property to point to http://myfriendsite.com?

Here's where the __webpack_publicPath__ property comes in, and the good willing of the app author to open the door to customizing the publicPath (or you can always fork it and add it yourself ;) )

This means that the author of the app should have a function to receive the new publicPath as part of its entry:

// This is the app entry "main.js". I'm using a CommonJS syntax but you can use what you want 
module.exports = {
  load: function(publicPath){
    if(publicPath) __webpack_publicPath__ = publicPath;
    // else the one in the webpack.config.js will be used.

    // continue loading the app
  }
}

It is important that this option is part of the app entry, not any file inside the app.

Like this, the other site can use it like:

var app = require('myApp'); // output.library config in webpack.config.js
app.load('http://myfriendsite.com/'); // this can be absolute or relative
// do whatever you want with the app

When loaded, you will see the network requests as:

http://myfriendsite.com/myBigImg.jpg
http://myfriendsite.com/myBigImg2.png

Nice.

Hope it helps, if you know a better or cleaner way please share it in a comment!

Bye!

Working with Webpack and CSS Loaders

Tomas Alabes — Tue, 13 Sep 2016 12:30:16 GMT

As you know, Webpack use Loaders to manage different type of web resources, like css. Being css files so important for web applications, there are more than one way of handling this. There are different loaders and different combination of loaders that will help you have the right behavior for you app.

We will take a look at these loaders:

css-loader
style-loader
style/usable-loader
css-modules

And then I will mention some other tools that can help with css development.

css-loader

This is the plain css loader. It will return the css code interpreting the resources inside, but it will not add it to the page.

With this loader @import and url(...) are interpreted like require() and will be resolved. Good loaders for requiring your assets are the file-loader and the url-loader which you should specify in your config.

Then what you do with that css code it's up to you. The next loader will help you with it.

style-loader

This loader adds CSS to the DOM by injecting a '); // and work with the js that uses the styled DOM }); } });

The only disadvantage that I see it that I will bundle all the css with the rest of the app when perhaps I won't use them all. But I don't mind adding 0.5 kb to the file to improve the UX of the app.

This isn't really rocket science but in production I didn't want to wait for external css to be loaded when the rest of the app is already in the client. So I found these easy and simple solution to it.

By the way, I was using grunt for all these, I know webpack has this already built-in but I didn't have the chance to use it.

That's it, thanks!

How to register your library or component in Bower

Tomas Alabes — Mon, 03 Jun 2013 12:30:16 GMT

Bower is a package manager for the web. It offers a generic, un-opinionated solution to the problem of front-end package management.

Bower depends on Node and npm. It's installed globally using npm:

npm install -g bower

To register a new package:

There must be a valid manifest JSON in the current working directory.
Your package should use semver Git tags.
Your package must be available at a Git endpoint (e.g., GitHub); remember to push your Git tags!

You can use bower init to generate the valid manifest json

bower init

It will produce something like this:

{
  "name": "appName",
  "version": "1.0.0",
  "main": [
    "app.js"
  ],
  "ignore": [
    "**/.*",
    "node_modules",
    "components"
  ],
  "dependencies": {
    "myDep": "latest",
    "myDep2": "2.0.0"
  }
}

Then to register your app:

bower register [app name] [git endpoint]

// example:
bower register raphael.backbone git://github.com/tomasAlabes/backbone.raphael.git
Registering a package will make it visible and installable via the registry.
Proceed (y/n)? y
registered backbone.raphael to git://github.com/tomasAlabes/backbone.raphael.git

And now your library is ready to be used via bower :) Use my library as an example if you want: backbone.raphael

Enjoy!

SVG/VML views in your Backbone app with Raphael

Tomas Alabes — Tue, 28 May 2013 12:30:16 GMT

Hi! Now:

Presenting backbone.raphael

You may already know the famous Backbone javascript library that lets you build an MV* architecture in the client. And perhaps you also know Raphael, that gives you the opportunity to abstract you from the browser you are using and let you work with SVG o VML indifferently.

In Backbone, the V was thought for html views, but with the flexibility that backbone offers and a little bit of ingenuity we can extend backbone and let your app embrace the vectorial images in your browser.

For this, I created/am creating a Backbone extension that easily lets you do that, called backbone.raphael. It is a simple tweak of how Backbone handles Views events, and how Raphael does it. How do I use it?

Add backbone.raphael.js after backbone.js in your html

<script type="text/javascript" src="backbone.js">script>


<script type="text/javascript" src="backbone.raphael.js">script>

This will enable you to use the new Backbone.RaphaelView

How to use it

First:

//Raphael root element
var paper = Raphael(0, 0, 300, 640);

// Usual backbone model, why change it if the View is the new thing?
var CircleModel = Backbone.Model.extend();
Now we create the view
//This view extends from Backbone.View
var CircleView = Backbone.RaphaelView.extend({

    initialize: function(){
        var model = this.model;
        this.listenTo(model, "change", this.render);

        // Create raphael element from the model
        var circle = paper.circle(model.get("x"), model.get("y"), model.get("radio")).attr({fill: model.get("color")});

        // Set the element of the view
        this.setElement(circle);
    },

    events: {
        // Any raphael event, no selector needed
        "click": "sayType",
        // Or any custom event
        "foo": "sayType"
    },

    sayType: function(evt){
        console.log(evt.type);
    },

    render: function(){
        var circle = this.el;
        var model = this.model;

        //When the model changes, so the element
        circle.attr({
            cx: model.get("x"),
            cy: model.get("y"),
            r: model.get("radio"),
            fill: model.get("color")
        });
    }

});

Now is time for creating some real objects:

var model = new CircleModel({
    x: 100,
    y: 150,
    radio: 50,
    color: "blue"
});

var view = new CircleView({
    model: model
});

Then in your app you can trigger the custom events you binded:

view.trigger("foo");

In my github repo it is the source code and a more complex sample app for you to see. This extension is still in development but is usable today.

Enjoy!

Introduction to RaphaelJS

Tomas Alabes — Wed, 13 Mar 2013 12:30:16 GMT

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

I made this presentation to introduce this library in the easier way I can, hope that anyone interested like it and learn from it. Enjoy!

Raphael from Tomas Alabes

Book review: Learning Raphaël JS Vector Graphics

Tomas Alabes — Wed, 13 Mar 2013 12:30:16 GMT

Book Review: Learning Raphaël JS Vector Graphics

Learning Raphaël JS Vector Graphics is Damian Dawber's new book about Raphaël. It was released on May and has been written for anyone with an interest in frontend browser technologies with little or no knowledge of vector graphics drawing.

The book starts introducing the library and the background of vector drawings, explaining how it was done in the IE times, how it is done now, and how the SVG spec is evolving. Into the core of the book it goes over almost all library functionalities, from the basics like the canvas, basic shapes, text and images, to paths, transformations and animations. In general, it gives basic examples of the functionalities, not going into too much depth. One of the things that stands out are the examples of custom attributes, in my opinion, a really nice functionality that is not very used. All examples are uploaded in the book samples page.

Then it has a specific chapter for working with existing SVGs, a chapter worth reading if you are going to work with SVG not generated by Raphael.

Finally the author creates a suite of social media visualisations using all the things explained in the previous chapters using jQuery for DOM interaction. He mixes paths, custom attributes, animations, and DOM interaction for building widgets with social media data. Complex enough for all the concepts explained before. And then to finish, explains where Raphael is going and mention some supplementary material.

In summary, great book to get to know Raphael and become an experienced user, but not enough to build a complex app with it. I would have liked a more "app example" than a widget example.

Do you want to start using Raphael? This is definitely a good start.

Handling attackers in your web application

Tomas Alabes — Wed, 13 Mar 2013 12:30:16 GMT

Anyone designing an application for which security is remotely important must assume that it will be directly targeted by dedicated and skilled attackers. A key function of the application’s security mechanisms is being able to handle and react to these attacks in a controlled way.

Handling Errors

However careful an application’s developers are when validating user input, it is virtually inevitable that some unanticipated errors will occur. A key defense mechanism is for the application to handle unexpected errors gracefully, and either recover from them or present a suitable error message to the user. In a production context, the application should never return any system-generated messages or other debug information in its responses. Overly verbose error messages can greatly assist malicious users in furthering their attacks against the application. In some situations, an attacker can leverage defective error handling to retrieve sensitive information within the error messages themselves, providing a valuable channel for stealing data from the application. Effective error handling is often integrated with the application’s logging mechanisms, which record as much debug information as possible about unanticipated errors. Maintaining Audit Logs

Audit logs are valuable primarily when investigating intrusion attempts against an application. Effective audit logs should enable the application’s owners to understand exactly what has taken place, which vulnerabilities (if any) were exploited, whether the attacker gained unauthorized access to data or performed any unauthorized actions, and, as far as possible, provide evidence of the intruder’s identity. An effective approach is to store audit logs on an autonomous system that accepts only update messages from the main application. In some situations, logs may be flushed to write-once media to ensure their integrity in the event of a successful attack. Alerting Administrators

Audit logs enable an application’s owners to retrospectively investigate intrusion attempts and, if possible, take legal action against the perpetrator. However, in many situations it is desirable to take much more immediate action, in real time, in response to attempted attacks. In most situations, alerting mechanisms must balance the conflicting objectives of reporting each genuine attack reliably and of not generating so many alerts that these come to be ignored. Anomalous events monitored by alerting mechanisms often include the following: Usage anomalies, such as large numbers of requests being received from a single IP address or user, indicating a scripted attack Business anomalies, such as an unusual number of funds transfers being made to or from a single bank account Requests containing known attack strings Requests where data that is hidden from ordinary users has been modified In any security-critical application, the most effective way to implement real-time alerting is to integrate this tightly with the application’s input validation mechanisms and other controls. Reacting to Attacks

In addition to alerting administrators, many security-critical applications contain built-in mechanisms to react defensively to users who are identified as potentially malicious. Some applications take automatic reactive measures to frustrate the activities of an attacker who is working systematically to discover any application defect. Although these measures will not defeat the most patient and determined attacker, they will deter many more casual attackers and will buy additional time for administrators to monitor the situation and take more drastic action if desired. Reacting to apparent attackers is not, of course, a substitute for fixing any vulnerabilities that exist within the application. But placing further obstacles in the way of an attacker is an effective defense-in-depth measure that reduces the likelihood that any residual vulnerabilities will be found and exploited. Conclusion

These mechanisms often incorporate a mix of defensive and offensive measures designed to frustrate an attacker as much as possible and give the application’s owners appropriate notification and evidence of what has taken place.

This have been partially extracted from a wonderful book about web applications security: The Web Application Hacker's Handbook: Finding and Exploiting Security Flaws. If you would like to dive deeper into any of this subjects I encourage you to buy it.

Have this mechanisms in mind and use them if you can.

Tomas Alabes

How to get the latest tweets of a group of people with Twitter REST API

Tomas Alabes — Fri, 08 Mar 2013 12:30:16 GMT

This seems like a easy or at least common task of twitter right? Well...I thought so, but it gave me a headache for half an hour.

I first tried to use the twitter search API (I recommend you using this API Tester for testing the api from twitter itself) , using queries like "from:tweeterA or from:tweeterB" but I wanted from like 50 people, pretty big query... And:

Twitter's search is optimized to serve relevant tweets to end-users in response to direct, non-recurring queries such as #hashtags, URLs, domains, and keywords. The Search API is an interface to this search engine. Our search service is not meant to be an exhaustive archive of public tweets and not all tweets are indexed or returned. Some results are refined to better combat spam and increase relevance.

So definitively this was not the answer... It HAD to be easy! Googling and googling I found the answer to my humble question: lists.

For a collection of recent Tweets by more than one user, consider creating a Twitter List and leveraging the list timeline. A list is a curated group of Twitter users. You can create your own lists or subscribe to lists created by others. Viewing a list timeline will show you a stream of Tweets from only the users on that list. More on lists.

So in my twitter account made a list, add all the people I wanted to follow and use the GET list statuses service.

Here is the obligatory data the service needs, of course you can view more info in the official documentation of it.

Now to the code.

I'm using nodeJS in my server (remember we now have to authenticate to use even some of the simplest services of the twitter API), the configuration or how to query the server can be seen in other post of mine.

An example of use would be the following:

var config = {listId: "86236722", ownerId: "tomasAlabes", count: 10, slug: "poli-tweets-com-ar"}
exports.getLatestTweetsFromList = function(config, callback){
    oauth.get("http://api.twitter.com/1.1/lists/statuses.json?"+
"owner_id="+config.ownerId+
"&count="+config.count+
"&list_id="+config.listId+
"&slug="+config.slug, access_token, access_token_secret, function (error, data) {
        var result;
        if(error){
            result = {error: error};
        }else{
            result = data;
        }
        console.log(data);
        callback(result);
    });
};

Don't know how to get your list id? Check this.

Hope it helps, Enjoy!

Convert SVG to Raphael in one step

Tomas Alabes — Sun, 17 Feb 2013 12:30:16 GMT

Perhaps you have heard of the Raphaël library. Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. It's open-source and its one of the most famous libraries on github, the most popular for svg manipulation on the browser.

As the library wraps all svg elements into raphael objects, it wasn't posible at first to convert an svg file to those objects, and it was a really requested feature for the library. Well, the author didn't add to the project but he did a tool for it, called rappar.

Here its an example of how to use it: First of all you must have node installed. Then you would download the official repo but it has a bug with the latest node version, so download mine which has the fix. Now is time to convert your svg file, I took this svg as example:

(pretty cool huh? you can find the free svg here)

Execute

node rappar.js path/to/eagle.svg

This will output the svg code, but perhaps we could do this in a cleaner way:

node rappar.js path/to/eagle.svg > myCode.txt

Now you have it in a separate file. Want to add it to your web? Like this:

var paper = Raphael(0, 0, 1600, 1600); //I'm using an arbitrary width and height
paper.add(your_code)

And you are done! Easy right? Now you can add any svg file to your browser converting it with this tool. Check the raphael documentation for more info on the library.

Enjoy!

Using NodeJS oAuth module to communicate with Twitter REST API 1.1

Tomas Alabes — Wed, 06 Feb 2013 12:30:16 GMT

Hi, lets see how to use the 'oauth' module in nodeJS, for getting information from the Twitter API.

You should start by installing the module:

$ npm install oauth

And add it to the package.json of your app:

"dependencies": {
    "express": "3.1.0",
    "ejs": "*",
    "oauth": "*"
  }

Then, in the file where you will add the twitter retrieval logic, import the module:

var util = require('util');
var OAuth = require('oauth').OAuth;

Once you created your app and got your data in https://dev.twitter.com/:

var oa = new OAuth("https://api.twitter.com/oauth/request_token",
    "https://api.twitter.com/oauth/access_token",
    "YOUR_CONSUMER_KEY",
    "YOUR_CONSUMER_SECRET",
    "1.0A",
    null,
    "HMAC-SHA1");

var access_token = 'YOUR_ACCESS_TOKEN';
var access_token_secret = 'YOUR_ACCESS_TOKEN_SECRET'

Then I will give you a couple of examples of how to get stuff from Twitter:

exports.getLatestTweets = function (tweeter, count, callback) {
    oa.get("https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=" + tweeter + "&count=" + count, access_token, access_token_secret, function (error, data) {
        var result;
        if(error){
            result = {error: error};
        }else{
            result = data;
        }

        callback(result);
    });
};

exports.getLatestProfilePicture = function (tweeter, callback) {
    oa.get("http://api.twitter.com/1.1/users/show.json?screen_name=" + tweeter, access_token, access_token_secret, function (error, data) {
        var result;
        if(error){
            result = {error: error};
        }else{
            result = JSON.parse(data);
        }

        callback(result);
    });
};

To use it, import it from other js

var twitterUtil = require('path/to/twitterUtil');

Now go get Twitter data and use it for good!!

Enjoy!

Turn off the lights! getUserMedia API experiment

Tomas Alabes — Thu, 24 Jan 2013 12:30:16 GMT

Hi folks, 2nd post here :)

I've been getting to know the new HTML5 Web RTC project and the getUserMedia API through this great HTML5Rocks article by Eric Bidelman.

Don't know what Web RTC is? Quick definition from the projects Web: "WebRTC is an open framework for the web that enables Real Time Communications in the browser. It includes the fundamental building blocks for high quality communications on the web such as network, audio and video components used in voice and video chat applications. These components, when implemented in a browser, can be accessed through a Javascript API, enabling developers to easily implement their own RTC web app. "

The navigator.getUserMedia() API allows web apps to access a user's camera and microphone.

Playing around with the javascript API, I made a simple website where, through your webcam, you can take snapshots, add filters to them, and whenever you want (this is my new thing) turn off the camera by covering it with your hand (or whatever). To show you what I mean, this is the web site.

I would like to show you how I did this, hope you enjoy it. Boilerplate

First I downloaded the last html5 boilerplate, this gives all you need to get started. In the template you will see this comment:

There is where you start adding things. The first html element you need now is the following:

"">

This tag will be where the camera will stream its content. Feature Detection

Then, following Eric's article, I started the feature detection and asking permission for the video. "The getUserMedia() API is still very new. In Chrome < 21, you need to enable the feature by visiting about:flags. If you're using Chrome 21, you can skip this section." You can see other browsers compatibility with this feature here.

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || navigator.msGetUserMedia;

var video = document.querySelector('video'),
    localMediaStream;

if (navigator.getUserMedia) {
  navigator.getUserMedia({video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
    localMediaStream = stream;
  }, onFailSoHard);
} else {
  //You can add a fallback here if you want, I didn't.
  //video.src = 'somevideo.webm';
}

Notice that you can use 'audio: true' also in the first parameter of the getUserMedia() function, but it isn't necessary as we only want to take photos or analyze images.

I'm only going to explain the part about covering the webcam, as the filters part is well explained in the html5rocks article.

First, taking frames snapshots

To do this you must add a canvas element to the html:

This canvas will be one where our images will be taken secretly, the width/height can be anything you want.

How do we take a screenshot of the camera? Here:

function snapshot(canvas) {
    if (localMediaStream) {
        var canvasContext = canvas.getContext('2d');
        canvasContext.drawImage(video, 0, 0, 440, 320);
    }
}

You can see the drawImage function here, but the parameters can be easily understood with this image:

Analyzing the images

To analyze the images I used a very simple algorithm, comparing 9 points of the images, this ones:

This is how:

    darkyImage: function (canvas) {
        var canvasContext = canvas.getContext('2d'),
            i, j,
            x, y,
            image, data;

        for (i = 1; i < 3; i++) {
            for (j = 1; j < 3; j++) {
                x = canvas.width / j - 1;
                y = canvas.height / i - 1;
                image = canvasContext.getImageData(x, y, 1, 1);
                data = image.data;
                if (!this.darkyPixel(data)) {
                    return false;
                }
            }
        }
        return true;
    }

What about that 'darkyPixel' function? Simple (really, VERY simple), I chose a color limit (20) and a redOffset, this offset is because as your palm has a reddish color, the red part of the pixel generally was 20/25 points higher, so this adjustment did the analysis a bit better.

darkyPixel: function (rgba) {
        var offColor = 20,
            redOffset = 25;
        return ((rgba[0] < offColor + redOffset && rgba[1] < offColor && rgba[2] < offColor));

Of course any algorithm you would like to suggest is welcome! Reading the camera

Now, when the user accepts us to use their camera, we need to start reading the camera taking snapshots every N seconds/ms, I choose 700ms.

function startReading(){
        var ghostCanvas = $('#ghostCanvas')[0];
        setInterval(function(){
            snapshot(ghostCanvas);
            if (darkyImage(ghostCanvas)) {
                stopWebCam();
            }
        }, 700);
    }

This should be inside the navigator.getUserMedia(), like this:

 navigator.getUserMedia({video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
    localMediaStream = stream;
    startReading(); //here!!
  }, onFailSoHard);

How do I turn off the service when you cover the camera? You covered the webcam! Shut it down!

    function stopWebCam(){
        video.pause();
        localMediaStream.stop();
        $('video').fadeOut(500);
        $("#ghostCanvas").hide();
    }

Well, that's it! Here it is all together:

$(document).ready(function(){
    window.URL = window.URL || window.webkitURL;

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia || navigator.msGetUserMedia;

    var onFailSoHard = function (e) {
        console.log('Reeeejected!', e);
    };

    var video = $('video')[0];
    var canvas = $('canvas')[0];
    var localMediaStream = null;

    function stopWebCam(){
        video.pause();
        localMediaStream.stop();
        $('video').fadeOut(1000);
        $("#ghostCanvas").hide();
    }

    function snapshot(canvas) {
        if (localMediaStream) {
            var canvasContext = canvas.getContext('2d');
            canvasContext.drawImage(video, 0, 0, 440, 320);
        }
    }

    function startReading(){
        var ghostCanvas = $('#ghostCanvas')[0];
        var intervalId = setInterval(function(){
            snapshot(ghostCanvas);
            if (darkyImage(ghostCanvas)) {
                stopWebCam();
            }
        }, 1000);
    }

    darkyPixel: function (rgba) {
        var offColor = 20,
            redOffset = 25;
        return ((rgba[0] < offColor + redOffset && rgba[1] < offColor && rgba[2] < offColor));

    darkyImage: function (canvas) {
        var canvasContext = canvas.getContext('2d'),
            i, j,
            x, y,
            image, data;

        for (i = 1; i < 3; i++) {
            for (j = 1; j < 3; j++) {
                x = canvas.width / j - 1;
                y = canvas.height / i - 1;
                image = canvasContext.getImageData(x, y, 1, 1);
                data = image.data;
                if (!this.darkyPixel(data)) {
                    return false;
                }
            }
        }
        return true;
    }

    if (navigator.getUserMedia) {
        navigator.getUserMedia({video: true}, function (stream) {
            video.src = window.URL.createObjectURL(stream);

            localMediaStream = stream;
            startReading();

        }, onFailSoHard);
    } else {
        alert('getUserMedia() is not supported in your browser');
    }
});

I know that my site has a couple of more things like modules and dimming the background while covering the webcam but I'll try to make another post with them.

Here is my github repo with my web site source code.

Enjoy!

Palette behaviour with RaphaelJS

Tomas Alabes — Sat, 03 Nov 2012 12:30:16 GMT

Hi all, welcome to my new blog! For my first entry I chose RaphaelJS, an svg library to manipulate SVG with javascript in a easier way than directly with the SVG DOM, but of course losing some of the svg spec capabilities. I've been working with Raphaeljs for a while now and I would like to share some code with you for a nice behaviour, the palette behaviour.

First of all, in what consists my palette behaviour? It's like in many editors, where you have elements on the side that you can add by drag and drop to a 'canvas'.

I will assume that we already have the rectangle representing the palette and the elements inside, and I will explain to you how to give them the correct behaviour. For this we will use the drag() function that Raphael gives us, using some functions that give us the feeling of d&d new elements to a canvas.

You'll have to add to every palette element this startFunction:

//DragFunctions is the object that has all the 3 d&d methods, clearer in the complete file
paletteStart:function () {
    // keep the relative coords at the start of the drag
    this.ox = 0;
    this.oy = 0;

    // as we are dragging the palette element, we clone it to leave one in his place.
    var newPaletteObj = this.clone();

    //we give the new palette element the behaviour of a palette element
    DragFunctions.addDragAndDropCapabilityToPaletteOption(newPaletteObj);

    //nice animation
    this.animate({"opacity":0.5}, 500);
}

Now we need the function while the element is being dragged:

move: function (dx, dy) {
    // calculate translation coords
    var new_x = dx - this.ox;
    var new_y = dy - this.oy;

    // transforming coordinates
    this.transform('...T' + new_x + ',' + new_y);

    // save the new values for future drags
    this.ox = dx;
    this.oy = dy;
}

And finally, the function executed at finish dropping:

paletteUp: function(){
    if(!DragFunctions.isInsideCanvas(this)){
        this.remove();
        //notify the user as you want!
    }else{
        //Giving the new D&D behaviour
        this.undrag();

        //give the element the new d&d functionality!

        this.animate({"opacity":1}, 500);
    }
}

2 things to comment here, when the element is dropped, you will have to remove the palette behaviour and give it another one (a plain d&d functionality), if not, it will continue cloning elements all around. Here I give you some nice behaviour to give them:

start:function () {
    // keep the relative coords at the start of the drag
    this.ox = 0;
    this.oy = 0;
    // animate attributes to a "being dragged" state
    this.animate({"opacity":0.5}, 500);
},
    //same move function
    up: function () {
        if(!DragFunctions.isInsideCanvas(this)){
            this.animate({transform:'...T' + (-this.ox) + ',' + (-this.oy)}, 1000, "bounce");
        }
        this.animate({"opacity": 1}, 500);
    },

    //and the method that gives the behaviour
    addDragAndDropCapabilityToSet: function(compSet) {
        compSet.drag(this.move, this.start, this.up, compSet, compSet, compSet);
    }

And as you may also see, we have a validator that sees if the element is inside the canvas, it is a very useful function, here:

isInsideCanvas: function(obj){
            var canvasBBox = //get your 'canvas'
            var objectBBox = obj.getBBox();
            var objectPartiallyOutside = !Raphael.isPointInsideBBox(canvasBBox, objectBBox.x, objectBBox.y) || !Raphael.isPointInsideBBox(canvasBBox, objectBBox.x, objectBBox.y2) || !Raphael.isPointInsideBBox(canvasBBox, objectBBox.x2, objectBBox.y) || !Raphael.isPointInsideBBox(canvasBBox, objectBBox.x2, objectBBox.y2);
            return !(objectPartiallyOutside);
        }

Finally, the place to call to give the element all this behaviour:

//this works for elements and sets
addDragAndDropCapabilityToPaletteOption:function (compSet) {
    compSet.drag(this.move, this.paletteStart, this.paletteUp, compSet, compSet, compSet);
}

A demo of this is in a website I created to play with raphael, called comoformamos project The hole code is in a github gist or hosted on github so if you want to get a little deeper in the code feel free to do it.

I hope you find this helpful, til next time!

Testing in Agile Teams

Tomas Alabes — Thu, 16 Feb 2012 12:30:16 GMT

I have just read this book: Agile Testing: A Practical Guide for Testers and Agile Teams by Lisa Crispin and Janet Gregory, and I would like to share this presentation I've given at work about it.

From the book description:

Testing is a key component of agile development. The widespread adoption of agile methods has brought the need for effective testing into the limelight, and agile projects have transformed the role of testers. Much of a tester’s function, however, remains largely misunderstood. What is the true role of a tester? Do agile teams actually need members with QA backgrounds? What does it really mean to be an “agile tester?” [...] In Agile Testing, Crispin and Gregory define agile testing and illustrate the tester’s role with examples from real agile teams. They teach you how to use the agile testing quadrants to identify what testing is needed, who should do it, and what tools might help. The book chronicles an agile software development iteration from the viewpoint of a tester and explains the seven key success factors of agile testing.

As a developer is really helpful to know the point of view of agile members whose mainly job is testing and worrying about the product internal and external quality. I recommend it. "Quality is not negotiable."

Agile testing from Tomas Alabes