SVG Tests

Thu, 14 Aug 2008

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:

Browser Passed
Total number of tests 276
Opera 9.51 246
Safari 4 218
Firefox 3.0.1 160
Internet Explorer 0

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

  Announcing RaphaelJS.com

Tue, 12 Aug 2008

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.

  S×SW

Mon, 11 Aug 2008

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.

  Raphaël—JavaScript library

Fri, 08 Aug 2008

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.

  Programming Brain Teaser

Tue, 08 Jul 2008

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);

  One Amazing Business Card

Mon, 07 Jul 2008

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.

  My WebDU 2008 Presentation

Wed, 02 Jul 2008

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.

  Simple Cycle

Wed, 02 Jul 2008

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]);
});

  JavaScript Without “if”

Tue, 01 Jul 2008

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.

  Web Directions South ’08

Wed, 28 May 2008
Web Directions

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!

  JavaScript Nuance

Tue, 27 May 2008

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 == "";

  Firefox Table Bug Workaround

Fri, 09 May 2008

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

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

  One Pixel Rounded Corners

Thu, 08 May 2008

After reading blog post of CSS Guy about one pixel rounded corners at Google Analytics web site which is done by using some additional <b> tags I realize that I was using this technique long time ago, but without additional elements. Here is the HTML code:

<ul>
    <li>
        <a href="#">One</a>
    </li>
    <li>
        <a href="#">Two</a>
    </li>
    <li>
        <a href="#">Three</a>
    </li>
</ul>

And here is the CSS:

ul {
    padding: 0;
    margin: 0;
    width: 20%;
}
li {
    background: #000;
    border-bottom: solid 1px #ccc;
    border-top: solid 1px #ccc;
    list-style: none;
    margin: .3em;
    padding: 0 1px;
    position: relative;
}
li a {
    background: #e5e5e5;
    border-bottom: solid 1px #000;
    border-top: solid 1px #000;
    display: block;
    margin: -1px 0;
    padding: .2em;
}

Demo is here.

  AJA* (AJAX, AJAH, AJAJ, etc)

Tue, 06 May 2008

I am sick of all this AJA* things (AJAX, AJAH, AJAJ, etc). If I can dictate the fashion I say “Call it AJEX—Asynchronous JavaScript-based EXchange” or something as generic. AJAJ just sound stupid.

  Australian English in Mac OS

Fri, 02 May 2008

Just to remember this next time I will set up new environment: terminal command to force spell checker to respect australian English.

defaults write -g NSPreferredSpellServerLanguage "en_AU"

  HTML 5 & JavaScript

Thu, 01 May 2008

Why the hell we have JavaScript code inside HTML spec? Canvas sub-spec in HTML 5 spec

  Fibonacci function

Fri, 18 Apr 2008

I have requests to publish answers to my JavaScript questions. And surprisingly most requested was Fibonacci function, so here we go. My vision of this function:

function fibonacci() {
    if (!("numbers" in arguments.callee)) {
        arguments.callee.numbers = [0, 1];
        return 0;
    }
    var len = arguments.callee.numbers.length;
    arguments.callee.numbers.push(arguments.callee.numbers[len - 1] +
        arguments.callee.numbers[len - 2]);
    return arguments.callee.numbers[len - 1];
}

The most important thing is to remember that function could be anonymous.

  Optimus 0.5.3

Thu, 17 Apr 2008

After long discussion at µf mailing list it looks like people came to decision about JSON format for µf parsers. So, I am trying to follow here. Optimus hits 0.5.3 with improved JSON support.

  Optimus 0.5.2

Tue, 15 Apr 2008

Today morning I was fixing two bugs in Optimus: one is huge and one is small. I started with small, fix it and turn my head to the big one. And for my big surprise it was fixed by the fix of small one. Amazing. I love such a moments. So, Optimus has been updated to 0.5.2 version.

  JavaScript Tasks

Mon, 31 Mar 2008

Recently I did a small workshop in the company I am working. I thought it could be interesting for someone to take a look at Javascript tasks I created for my colleagues. It was a bit of challenge for me, because all of them are pretty experienced in Java already. Here are some of them:

  • Find the biggest element in the array of numbers. Use function Math.max for this;
  • Transform array of numbers to array of functions that will alert that digits;
  • Sort array of objects by number of object properties;
  • Write a function which will return you first two times 1, then 2, then 3, then 5 and so on (Fibonacci numbers). Don’t use any global variables.
  • Make this syntax possible: var a = (5).plus(3).minus(6); //2
  • Make this syntax possible: var a = add(2)(3); //5

If you know the answers, located in Sydney and looking for a job, drop me a line.

  Optimus

Mon, 08 Oct 2007

All right, after some hard hours and debugging I could introduce you Optimus—microformats transformer. In short, it transforms HTML to XML or JSON. I would like to send special thanks to John Allsopp for inspiration, support and hosting, Brian Suda for idea with XSLT and Cameron Adams and Kevin Yank for inspirational speach at Web Directions ’06.