Dev Hike

Handling attackers in your web application

2013-08-22T10:25:00.000-03:00

Moved article to http://tomasalabes.me/blog/web-development/2013/03/13/Handling-attackers-in-your-web-application.html

Book review: Learning Raphaël JS Vector Graphics

2013-08-12T12:11:00.000-03:00

Moved review to http://tomasalabes.me/blog/web-development/book-review/2013/03/13/Book-Review-Learning-Raphael-JS-Vector-Graphics.html

The Bond, James Bond effect

2013-06-17T19:40:00.000-03:00

007 effect

tl;dr? James Bond Effect and look at the github repo

Hi again, catching title right? After seeing the @ebidel Google I/O 13 talk about the awesome web coming, I really liked a 007's effect he did on stage and I wanted to give it a try and add a little of spice to it. Lets see:

The effect has 2 parts, the "aim" which is done with the clip css property, and for part 2 of the post, the shot effect, with canvas.

First the setup, in my case hbp5. I removed jQuery because I didn't need it. Then I found a nice 007 image of the famous gun barrel scene to apply the effect.

AIM

As I said, the aim effect is done with the clip css property. I used ebidel gist with the effect, I copy the adaptation of the script here:

(function() {
    "use strict";

    var background = document.getElementById("background"),
        titleHeight = 40; //h1#title height

    var radius = 120; // px

    function move(x, y) {
        // CSS clip path - http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html#the-clip-path
        background.style.webkitClipPath = 'circle('+x+'px, '+y+'px, '+radius+'px)';
        background.style.mozClipPath = 'circle('+x+'px, '+y+'px, '+radius+'px)';
        background.style.msClipPath = 'circle('+x+'px, '+y+'px, '+radius+'px)';
        background.style.oClipPath = 'circle('+x+'px, '+y+'px, '+radius+'px)';
        background.style.clipPath = 'circle('+x+'px, '+y+'px, '+radius+'px)';
    }

    window.addEventListener('mousemove', function(e) {
        move(e.pageX, e.pageY - titleHeight); // - titleHeight because the listener is the window and we want the coordinates relative to the backgound which is 40px down.
    });

    // Holding down SHIFT and scrolling grows/shrinks the circle.
    window.addEventListener('mousewheel', function(e) {
        if (!e.shiftKey) {
            return;
        }

        e.preventDefault(); // Prevent scrolling.

        var deltaY = e.wheelDeltaY;
        radius += -deltaY;
        if (deltaY > 0) { // up / shrink
            radius = Math.max(90, radius);
        } else {
            radius = Math.min(radius, window.innerHeight / 2);
        }
        move(e.pageX, e.pageY);
    });
})();

SHOOT

The shoot animation I will leave it to the 2nd part of the post, because I don't know how to do it yet :p

Any suggestions? Please comment!

How to register your library or component in Bower

2013-06-03T11:36:00.000-03:00

Article moved to http://tomasalabes.me/blog/web-development/2013/06/03/How-to-register-your-module-in-bower.html

SVG/VML views in your Backbone app with Raphael

2013-05-28T13:06:00.000-03:00

Moved to http://tomasalabes.me/blog/web-development/svg/2013/05/28/SVG-VML-views-in-your-Backbone-app-with-Raphael.html

Use RaphaëlJS with AMD (recent official feature)

2013-05-13T12:53:00.000-03:00

Hi all, I'm the collaborator of RaphaëlJS github repo. (Don't know SVG or Raphaël?? Check it out!, really cool things can be done with it).
Thanks to our contributors now it's easy to add the library using AMD, something difficult to do before.
Here is how and an example!

tl;dr? Check my raphael-boilerplate repo.

The example

First the html, we will use require.js so you need to add it in you project structure. The same with your main javascript file, where require will start to download the js.

<html>
<head>
 <title>Raphael Dev testing html</title>
 <script data-main="main" src="require.js"></script>
</head>
<body>
        <!-- Here is the container for Raphael -->
 <div id="container"></div>
</body>
</html>

We have in the body the div that will work as the container of Raphael, notice that there are other ways of creating the svg/vml root element.

Then the main.js file:

require([ "path/to/raphael" ], function (Raphael) {
    console.log(Raphael);
});

Here you set the path to Raphael and you are ready to go!

Or set this configuration in your configuration:

require.config({
  paths: {
    raphael: "libs/raphael"
  }
});

And you can require the module like this:

require([ "raphael" ], function (Raphael) {
    console.log(Raphael);
});

This is the simplest of the examples, in my repo I have some variants:

Global use (window.Raphael)
This example of AMD
HTML5 Boilerplate with Raphael

Enjoy!!

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

2013-03-08T16:12:00.000-03:00

Moved to http://tomasalabes.me/blog/_site/2013/03/08/How-to-get-the-latest-tweets-of-a-group-of-people-with-Twitter-REST-API.html

Introduction to Raphaël

2013-03-01T15:05:00.000-03:00

Moved to http://tomasalabes.me/blog/web-development/presentation/2013/03/13/Introduction-to-RaphaelJS.html

JS for newbies

2013-02-18T23:57:00.000-03:00

Moved to http://tomasalabes.me/blog/web-development/2013/02/18/Javascript-for-newbies.html

Convert SVG to Raphael in one step

2013-02-17T05:23:00.000-03:00

Moved to http://tomasalabes.me/blog/web-development/svg/2013/02/17/Convert-SVG-to-Raphael-in-one-step.html

Testing in Agile Teams

2013-02-16T11:58:00.000-03:00

Moved to http://tomasalabes.me/blog/_site/web-development/2012/02/16/Testing-in-Agile-Teams.html

Using NodeJS oAuth module to communicate with Twitter REST API 1.1

2013-02-06T22:28:00.001-03:00

Moved to http://tomasalabes.me/blog/web-development/2013/02/06/Using-NodeJS-oAuth-module-to-communicate-with-Twitter-REST-API-1.1.html

Turn off the lights! getUserMedia API experiment

2013-01-24T20:27:00.001-03:00

Moved to http://tomasalabes.me/blog/web-development/2013/01/24/Turn-off-the-lights!-getUserMedia-API-experiment.html

Palette behaviour with RaphaelJS

2012-11-03T19:58:00.002-03:00

Moved to http://tomasalabes.me/blog/web-development/svg/2012/11/03/Palette-behaviour-with-RaphaelJS.html