Tag Archives: JavaScript programming language

Looping Animation with JavaScript and Raphaël

javascript, micro tutorial, , , , , , , , , , , , ,

Raphael is a popular JavaScript library helping you to manage vectors via SVG or VML in your browser. It is extremely helpful and very easy to learn and use. The interesting thing is that in the browser you can do very powerful things with vectors, but they remain very less known. However with such libraries like Raphael the task is really simple.

Animation

As I said animating some vector properties is as simple as:

var paper = Raphael('canvas', 1024, 500);
var c = paper.circle(50, 50, 6).attr({fill : '#f00'});
c.animate({r : 10, fill : '#00f'}, 1000);

Here we change the radius and the background color of the circle for 1000 milliseconds.

The same thing can be done with any property with any other JavaScript library as jQuery. But as in jQuery, Raphael or whatever library the animation is not looping. That’s natural you can just change a property by animating it, but the looping animation suggests at least two animations. So it’s a developers job to implement this. Here’s a simple way to do this.

Two Way Animation

The solution here is using two functions calling each other.

var paper = Raphael('canvas', 1024, 500);
var c = paper.circle(50, 50, 6).attr({fill : '#f00'});
 
function a() {
    c.animate({r : 10, fill : '#00f'}, 1000, b);
}
function b() {
    c.animate({r : 6, fill : '#f00'}, 1000, a);
}
a();

JavaScript Flexibility – Regex match()

javascript, micro tutorial, , , , , ,

Today after two posts [#1, #2] in the past days here’s something that shows again the JavaScript power. This is not a complete example, but it’s good to start.

var str = '/text/1/text/2/';
var a = str.match(/(\d+)/gi);
console.log(a);

in that example you’ll get an array with all the numbers in the string [“1”, “2”] – yet another flexible js snippet!

Flexible JavaScript – Replace in a String

web development, , , , , , , , , , ,

Here’s yet another example of the JavaScript flexibility. You can simply call .replace() on every string and pass a regex as a parameter!

var str = 'my simple string';
str.replace(/ /g, '-'); // now 'str' will contain 'my-simple-string'

Flexible JavaScript – Splitting Strings

javascript, micro tutorial, , , , , ,

After reviewing a chunk of my code for today I continue to admire the flexibility of JavaScript. It’s really powerful. In that example you can get a string split it by a given symbol to an array and than get the Nth element of it. All this on one line! Amazing!

var str = 'my-long-string';
str.split('-')[0]; // will contain "my"

the 1st and 2nd indexes contain respectively “long” and “string”!

Returning JSON in a Zend Controller’s Action – Part 2

micro tutorial, PHP, zend framework, , , , , , , , , ,

In a reply from my latest post after following the comments, there is a much elegant solution to this use case. Simply by changing the output with a JSON helper. This also changes the content-type of the returned response.

$data = array(...);
$this->_helper->json($data);