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.

  WebDU, WebJam & More

Fri, 04 May 2007

I haven’t written a thing on my blog for ages, a bit slack I agree. But don’t think life has passed me by during this time. Actually, a lot has been happening. WebJam 2 for instance. I presented my latest JavaScript game (IE ignored) and my Flickr™ bookmarklet to those who attended. It was a great event… Pity I didn’t win again… :( Making matter worse is Lachlan just announced another WebJam which, unfortunately I cannot attend. It’s a shame.

In other news:

At the recent WebDU 2007 Web Developers conference I had the honour of giving a presentation on Microformats. You can view the presentation as a PDF. Surprisingly my talk received a lot of interest among peeps and as a result I met a couple of great guys.

As part of the conference WebJam 2½ was organised and was quite funny, frankly it was the funniest WebJam so far. I presented my Conference Schedule Creator which fitted in well with my Microformats speech the day before.

Upcoming Events:

As I mentioned previously I won’t be able to attend the next WebJam, but fear not my friends, I will be updating my blog with something that is sure to amaze.

On August 1st–3rd I will be giving a talk at the Open Publish Conference about mushups, APIs and stuff like that, hope to see you there.