Dmitry Baranovskiy’s Web Log vcard

This Saturday (11 of October) I am travelling to San Francisco, California for two weeks. If anyone want to catch up for a coffee or something, feel free to drop me a line, because I probably will be bored after hours. Hope to see you there.

Interview I gave to Andrew Tetlaw from SitePoint at Web Directions South this year. Check it out: Dmitry Baranovskiy Talks about Raphaël.

The amazing week of Web Directions is over. This year was significant for me, because I did a smooth move from listeners to speakers. My session was pretty good, without “Oh, shit!” moments and tricky questions. In fact questions were very different, yet very simple to answer. I’ve put together slides from the presentation on slideshare. All the demos are on Vimeo.

I should also mention that I won third prize at Web Jam 8 with my Raphaël presentation. You can watch video of it on Vimeo.

It also was nice to catch up with lots of people from virtual world of Internet. This was the first year when I am actually missed a lot of folks and didn’t chat with them. Sorry, I haven’t done it on purpose. The conference was too short and I can’t stay for after‐party. Looking forward for Web Directions South ’09. See you there!

The one chart left for GitHub project and it has been done: languages chart. This one takes all the data from HTML table, so updating the table will change the chart and without JavaScript you still can see the table.

Well, to be honest, I haven’t done a thing. New 2.1 Software Update add SVG support for iPhone & iPod Touch, so apparently all the demos for Raphaël now work on “iTouch” products. That is what happens when instead of supporting products you support technology. Go Web Standards!

This time I decide to go with punch chart from GitHub. This gives me good opportunity to find some bugs in my library and just have fun. Take a peek: Default look, vampire look and bright look.

Recently I was amazed by idea of GitHub impact chart. It is so visually powerful. There are two problems: you have to click on rectangular areas instead of the shape and it doesn’t work in IE. I decided to rebuild this chart using Raphaël. Here the result: Raphaël driven GitHub Impact Chart. I don’t know what sort of scaling guys use, so I went with logarithmic scale. Play around and send me some feedback.

New version of Raphaël has been released yesterday. Among other improvements there is ability to get attributes of objects by writing object.attr("fill"). Also there are many fixes for IE.

Another thing: I moved project to GitHub to socialise it better. Hope it will help you in your daily coding job.

I am pleased to announce that WebJam is live again. And pretty soon (25 September) it will rock again. I will definitely present my latest cool thing—Raphaël, so come along, have fun and vote for me.

I found recently that W3C published very good written tests for SVG. Today I spent my lunch time to run across these tests in different browsers. Here results:

Basically Opera is the best so far. Safari doesn’t support filters. Firefox has problems with fonts and doesn’t support animation.

I am pleased to announce that because of my bandwidth limitation I have to drop down Raphaël hosting.

But! There are always friends who can help in hard moment, so I am happy to introduce http://raphaeljs.com

Special thanks goes to:

• Lachlan Hardy: for the whole idea, amazing support and awesome spirit. He organised whole move.
• Andrew Krespanis: for awesome hosting and incredibly fast sysadmin setup.
• Lincoln Stoll: for whipping up the appropriate .htaccess file to redirect everything smoothly.

You can change you bookmarks now.

I have a dream. A crystal dream of attending South by South-West Interactive Conference. Today I become one step closer to my dream: my panel was accepted and took it place in voting system.

Go and check my panel description. It is called “JavaScript Ninja Secrets” and going to be awesome if it make it to the final. So please, vote for me and/or wish me a luck.

Today I am pleased to release my JavaScript library to work with vector graphics. From now you can create different shapes, rotate text or images by 30° (or more) with easy API of Raphaël. And, yes, it works in IE6 and 7 too. So, please welcome Raphaël and be kind with him. Today is his first day out. Check out the demos: rotation, reflection and another rotation. Write me any feedback.

Dustin Diaz put an interesting task on his blog. In short, you have an array:

var arr = ["a", "b", "c", "c", "d", "e", "e", "e", "e", "e",
"f", "e", "f", "e", "f", "a", "a", "a", "f", "f", "f"];

and it should be turned into string like this:

"a b c c d e e <span>e e e</span> f e f e f a a <span>a</span> f f
<span>f</span>"

First solution in my mind is this:

alert(arr.join(" ").replace(/([a-z])\s\1\s((\1\s?)+)(?=\s|$)/g,
"$1 $1 <span>$2</span>"));

But I feel like a cheater, probably I missed some limitation in the task. Will submit it and wait for comments from Dustin. In case I got it wrong, I will update the post.

Update

Just in case I have to use forEach function:

var arr = ["a", "b", "c", "c", "d", "e", "e", "e", "e",
           "e", "f", "e", "f", "e", "f", "a", "a", "a", "f", "f", "f"];
Array.prototype.forEach = function (f) {
    for (var i = 0, ii = this.length; i < ii; i++) {
        f(this[i], i, this);
    }
};


var res = "", isTag = false;
arr.forEach(function (item, index, ar) {
    if (!isTag && ar[index - 1] == ar[index - 2] && ar[index - 2] == item) {
        res += "<span>";
        isTag = true;
    }
    res += item;
    if (isTag && ar[index + 1] && ar[index + 1] != item) {
        res += "</span>";
        isTag = false;
    }
    if (ar[index + 1]) {
        res += " ";
    } else if (isTag) {
        res += "</span>";
    }
});
console.log(res);

Want to share my little excitement: my business card made it in “70 Amazing Business Cards”. That was a bit of surprise, because I am not a designer, and my cards are very cheap indeed.

I uploaded slides from my WebDU presentation on “Advanced JavaScript™ Techniques” to SlideShare. Not really as valuable without verbal part, but still could be useful.

In continuation of my previous post here is my implementation of times method of then Number object.

Number.prototype.times = function (f) {
    (function (i) {
        i && arguments.callee(--i) && f(i);
        return true;
    })(this);
};

The idea is that you should be able to write code like this one:

var a = [4, 2, 6, 1, 8, 0];
a.length.times(function (i) {
    alert(a[i]);
});

For some reason I have a question in my head: “Could I write code in JavaScript without ‘if’ statements at all?” Inspired by Chris Owen’s presentation on SmallTalk I created this implementation of SmallTalk-like pattern for working with boolean objects:

Boolean.prototype.ifTrue = function (f) {
    this && f();
    return this;
};
Boolean.prototype.ifFalse = function (f) {
    this || f();
    return this;
};

// so you can write

(4 < 5).ifTrue(function () {
    alert("It is true.");
}).ifFalse(function () {
    alert("It isn’t true.");
});

This example doesn’t have any practical usage, but from academic point of view this is an interesting example.

I am pleased to announce that I am going to speak at Web Directions South this year. I am very excited because it is first time I will share stage with such a web stars as Jeffrey Veen and Douglas Crockford. Not mention other 18 speakers.

I am happy to give you a promo code that takes $50 off the ticket price. “WDS08-DBA”. See you at Web Directions!

I would like to describe yet another JavaScript weirdness. Fortunately I didn’t face it before and was absolutely sure that function a(){} is equal to var a = function (){}.

I was wrong. There is a huge difference. Lets see the example:

var a = 5;
if (a == 5) {
    var b = function () {
        return "obvious";
    };
} else {
    var b = function () {
        return "never";
    };
}

if (a == 5) {
    function c() {
        return "expected";
    }
} else {
    function c() {
        return "surprise!";
    }
    function d() {
        return "how come?";
    }
}

alert(b());
alert(c());
alert(d());

You probably guessed; the output will be “obvious”, “surprise!” and “how come?”. This will be everywhere, but Firefox. If you define a named function it is defined in the current scope by runtime compiler will process it wherever it appears in the code. So beware of such a constructions and don’t forget to test in other browsers.

P.S. The other difference is that function c has a property name equal to “c”:

c.name == "c";
b.name == "";

Reminder to myself. Workaround for the bug: Bug 155955.

table {
    border-collapse: collapse;
    border-spacing: 0;
}
:root table {
    border-collapse: separate;
}