August 22, 2013

Handling attackers in your web application

Leave a Comment

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

Read More...

August 12, 2013

Book review: Learning Raphaël JS Vector Graphics

Leave a Comment
Moved review to http://tomasalabes.me/blog/_site/2013/03/13/Book-Review-Learning-Raphael-JS-Vector-Graphics.html
Read More...

June 17, 2013

The Bond, James Bond effect

Leave a Comment

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!
Read More...

June 3, 2013

How to register your library or component in Bower

Leave a Comment
Bower is a package manager for the web. It offers a generic, unopinionated 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!
Read More...

May 28, 2013

SVG/VML views in your Backbone app with Raphael

Leave a Comment

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

Read More...