Dmitry’s Tumblr

Raphaël 1.2.1

Tue, 27 Oct 2009 10:29:00 +1100

In Raphaël 1.2 release I did two major changes that I want to explain: IE optimisation and animation revamp.

For drawing in IE Raphaël uses VML. VML syntax for path is different to SVG: it uses different letters for commands and it doesn’t support floating point numbers. So to insure correct work I have to replace commands and round the numbers. But this not the end, IE doesn’t support quadratic curves and arcs. To work it around I convert everything into cubic curves. Conversion takes time. In IE we facing world slowest JavaScript engine, so on big paths performance could go down to unacceptable level. In 1.2 I optimized it a bit. I convert path to curves only if it has cubic curves or arcs, otherwise I just replace commands and round the numbers. Unfortunately I can’t come with a better solution at the moment, but if you have any, drop me a line.

The animation in Raphaël was done not in the best way: for each animation I created separate timer, so in case if you animate multiple objects at the same time, they are moving asynchronously. I unite all animation under the same timer and it made animation smoother in Safari and more accurate in all browsers. But there is still an issue with the fact that when you animate a large group of elements it is impossible to start animation for each element at the same time. The worst JavaScript engine the bigger is the gap between animations and on long run it is quite noticeable. To fight this I introduced new method animateWith, which first argument is an element you wish to stick to. Raphaël uses it internally when you animate set, so I would say the easiest way to animate two elements synchronously is to unite them in set and call animate method on the set.

In the video I created 150 circles and animated them to the same X. You can easily see the difference.

The Emperor’s New Clothes

Thu, 01 Oct 2009 13:58:00 +1000

It was an argument in web standards talks for a while. Tables for layout, style attributes, JavaScript event attributes, inline script tags and even font tags are ok. Take a look at google.com. Right. Google.com is probably most visited page in the web, so if blah is smaller than correct semantic HTML and CSS, even by one byte, then it worth it. Because every byte counts. With such a traffic every byte of home page costs some quite visible money to the company. (I even heard a stories about some guy, who managed to reduce size of the google.com page by couple of characters and received a bonus from the company…) Google just put size of the page as a priority above valid mark up, right?

Not really.

If you look at the source code of the google.com home page, you will see that size of it could be decreased a lot. In particular inline JavaScript can be compressed at least by 10%.

Consider following example

This is code from google.com:

if(window.addEventListener)window.addEventListener("load",a,false);else if(window.attachEvent)window.attachEvent("onload",a);google.timers.load.t.prt=(new Date).getTime();

This is how it can be written:

var w=window,e=w.addEventListener,v=w.attachEvent;e&&e("load",a,!1);v&&v("onload",a);google.timers.load.t.prt=+new Date;

I just saved 51 byte! There are more, literally kilobytes of code to be saved, but it looks like nobody cares. Wait, if nobody cares about page size, why we have ridiculous font tags in the page? May be I don’t understand some obvious thing or may be the King is naked.

Raphaël 1.0 RC1

Thu, 10 Sep 2009 14:42:00 +1000

Recently I released Raphaël 1.0 RC1. The most noticeable change for users of the library is differences in the API: removing moveTo, lineTo and friends from the path object. Why did I decide to do this? The biggest drawback of these methods is that they apply immediately. That means that if you draw path consisting of three segments, path element is updated three times – each time with increased number of segments, so total number of segments drawn is 1 + 2 + 3 = 6. The more segments your path has, the longer it takes to draw. In geometric progression.

To avoid this I could introduce some method “draw” that could be called after you define all segments, but this doesn’t look like an elegant solution and doesn’t suit the library’s name. There is a soluton that is compact, simple and you could easily work with it. Say, you want to change some point on the path. There is no interface for this apart from SVG path, and I can’t think of any elegant and easy to grasp API for this. Manipulating strings is what JavaScript can do very well. So I removed these methods from the library to external plugin, which you could concatenate with the Raphaël if you really rely on them. I suggest you learn SVG path syntax: it is simpler than it looks.

Other big thing is adding support for angle in arc. This is very rare thing, and frankly, I haven’t seen it in the wild, but without it SVG path support wasn’t complete. To make it happen I rewrote arcTo for VML completely. Now it converts arc to bezier curve, because VML doesn’t have support for angles in arc segments. The same method is now used in animation (for SVG & VML), which makes animation more smooth. Conversion of the whole path into bezier curves let me do path bounding box calculations more precisely, especially in VML. In fact, Safari doesn’t calculate bounding box for path correctly either.

I also worked on improving performance by applying caching and simply optimizing code.

Mermaids & Fishermen

Mon, 03 Aug 2009 16:02:37 +1000

Imagine the ocean. The ocean where live mermaids and lots of fisherman are chasing their luck. If you ask mermaids and fisherman about ocean they will tell you the same story: “I love ocean. Ocean is my home. I live in breath of the ocean only…” etc. But in fact their approach to ocean is very different. Fisherman care only about money they will get for fish. Ocean is just a big reservoir for them. For mermaids it is truly their home. They care about balance and purity of the ocean. Some fishermen don’t even believe that mermaids exist, some haven’t even heard of them. Fishermen can’t see the ocean as mermaids do, some of them tried: put their head under the water, everything is blurred, they can’t breathe. Pull head back. Never did it again. Some mermaids are tempted by the money they could make as a fisherman, but they lost their magic and become just “yet another fisherman”. Fishermen are winning. Huge tankers crossing the ocean and are taking enormous amount of fish from the ocean ruining the balance. Mermaids can’t stop fisherman, because they talk different language and can’t understand each other.

This ocean is called “the World Wide Web”.

There are web developers, who care about web, standards, semantic, accessibility, etc. They are mermaids. And there are web developers, who care about result only. If the web page is a soup of HTML, inline CSS and inline JavaScript, that’s ok as long as performance tests show us that it is even 0.5 ms faster.

Who are you? Fisherman or mermaid?

We need to talk

Wed, 22 Jul 2009 13:59:26 +1000

I am very lucky person. I met personally so many great people, like Cameron Adams, John Allsopp, Lachlan Hardy, Russ Weakley, Tim Lucas and many more others who, I hope, will forgive my laziness. The problem is, I don’t remember when last time I was talking to any of them (except Lachlan who is my colleague at Atlassian). We proud of our community, we see each other on conferences and other events, but there is no time to talk there. I mean really talk, share ideas, search for advice, etc. This is only possible with some limited amount of people in the room. I know these guys for at least two years and I have never really talk to anyone of them. Ever. This is very sad. What to do about it? The simplest way is to grab the person you want to talk to and invite him for lunch. Most of us are working somewhere near CBD, so we should catch up more frequently. Send an e-mail to person you know for ages and invite him/her for lunch. Everybody will win. Do it today.

Objects in JavaScript (part II)

Mon, 27 Apr 2009 11:08:00 +1000

I will not write about prototypical inheritance in JavaScript today. Instead lets take a look at one misunderstanding:

“Changing prototype on the constructor will magically update not only new objects, but also all existing ones…”

This is totally wrong. Do not trust an author who uses word “magic” while explaining JavaScript (or anything).

function C() {} //constructor
var x = new C();
C.prototype.prop = 2;
var y = new C();
alert(x.prop);
alert(y.prop);

This code will alert “2” and “2”, which kind of proves quoted concept: object x gains new property prop after it was created. Magic? Not at all. Lets look at similar example:

function C() {} //constructor
var x = new C();
C.prototype = {prop: 2};
var y = new C();
alert(x.prop);
alert(y.prop);

This will alert “undefined” and “2”. Huh?

In the first case neither of objects (x or y) have property prop. What they have is a hidden reference to prototype. (Hidden, because only interpreter internally can access it.) When you ask for property prop JavaScript can’t find it in the object itself and look for it in linked prototype object, found it there and return it. So for you, as a programmer, it is no visual difference where property is stored: in the object itself or in its prototype. When you add new property to prototype object x didn’t change. When you ask for property prop JavaScript finds it in updated prototype.

In the second case we assign new object as a prototype. Now object x still refers to the old prototype, but object y refers to new. x and y do not share prototype anymore. Obviously old prototype doesn’t have property prop. Even worse, now you lost the only access point to it. Despite these two objects were created with the same syntax they are way different.

One more thing. As you know every object by default receives property constructor, which refers to its constructor (surprise). But just as prop constructor property doesn’t exists in object itself, but rather in its prototype. By rewriting prototype we rewrite constructor property as well:

alert(x.constructor); // "function C() {}"
alert(y.constructor); // "function Object() { [native code] }"

So, when you rewriting prototype you can’t rely on constructor property anymore. But rewriting prototype is a main technique of inheritance in JavaScript.

I will write about inheritance next time.

Objects in JavaScript (part I)

Thu, 16 Apr 2009 15:13:00 +1000

Recently I was talking to friend of mine about objects in JavaScript. He is writing JavaScript for living and very good at it, however I found that he doesn’t understand some core features of the language. So, in case you have this gap in understanding JavaScript, I’ll try to explain.

Friend of mine give cite me one book:

“The interesting thing about ECMAScript primitive values for Booleans, numbers, and strings is that they are pseudo-objects, meaning that they actually have properties and methods.”

I am really sorry, but this doesn’t make any sense.

First lets take a look at this example:

var a = 5;
a.t = 3;
alert(a.t);

It will alert “undefined”. Why? If “a” is a “pseudo-object” then why it doesn’t keep my property? The thing is, “a” is not an object. Not even “pseudo-object”. It is primitive number. It doesn’t have properties. As you know JavaScript convert variable from one type to another on the fly:

var b = "w" + a + [1, 2, 3];

In this example number “a” and array [1, 2, 3] will be converted to string on the fly. The same is happening with anything before “.” operator, JavaScript simply converts left hand side parameter to object. So, at the second line of the example JavaScript creates new object Number with value equals to “a” (5 in our case), then create new property “t” with value 3. But then this object is not assigned back to variable “a”, it is just disappear in garbage. Third line will again create new object and will try to read it property “t”, which is undefined.

Primitive types like boolean, number and strings are not objects, they could be converted to objects. What the rule? JavaScript has six built-in types: null, undefined, number, string, boolean and object. The conversion rule is simple: if input is object, leave it as is; if input is null or undefined, throw an exception; otherwise create new object (new Number(input) or new String(input) or new Boolean(input)). Hope this small bit will help somebody to understand objects in JavaScript a bit better. Next type I write about prototype and friends.

So, you think you know JavaScript?

Tue, 31 Mar 2009 12:09:00 +1100

Quick test for real understanding of JavaScript core beyond closures and scopes. Here five small scripts. Try to answer what will be alerted in each case without running them in the console. Then you could create a test file and easily check your answers. Ready?

if (!("a" in window)) {
    var a = 1;
}
alert(a);

var a = 1,
    b = function a(x) {
        x && a(--x);
    };
alert(a);

function a(x) {
    return x * 2;
}
var a;
alert(a);

function b(x, y, a) {
    arguments[2] = 10;
    alert(a);
}
b(1, 2, 3);

function a() {
    alert(this);
}
a.call(null);

Raphaël 0.7

Thu, 12 Mar 2009 11:39:22 +1100

New Raphaël release:

Plugins functionality (Raphael.fn.myshape = function () {};)
New method “set” as a replacement for depricated “group”
getBBox for text is fixed in IE
Added point of origin in rotation
Added support for “src” attribute in attr method
Added setWindow method for iframes support
Added setSize method, so you can resize canvas
Provide alternate simple syntax for gradients: “90-#000-#fff”, “‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›”
Added multiline text support
Added event handlers: Element.click(function), Element.unclick(function)

Washington Post Using Raphaël

Wed, 25 Feb 2009 14:27:03 +1100

As stated on Ajaxian Washington Post start using Raphaël. Frankly, this is company named Evri, who is working for Washington Post and creates fancy widgets for them, uses Raphaël for drawing purposes. Anyway, Raphaël is on washingtonpost.com and it is time to celebrate. To see it by yourself you can visit this page.

WSG Talk

Mon, 23 Feb 2009 17:23:00 +1100

On 11 March 2009 I will be presenting Raphaël at Web Standards Group meeting. Come and join me.

Raphaël 0.6—Animation and More

Thu, 08 Jan 2009 10:07:06 +1100

Now, when I finally updated the documentation page, I feel ok to introduce you to Raphaël 0.6. So, what is new in this version?

Ability to set rotation, translation and scale via attr method
Ability to set path via attr method. That means now you can change path without redrawing it. The only thing you have to learn how to write path string in SVG documentation for path data syntax
New method animate, which takes three parameters: new attributes object, milliseconds and optional callback function
rotate method now has optional isAbsolute parameter which make it rotate object to specified degree, not by degree.

You could see the test demo and chart demo.

Also I created the Google group for Raphaël, so if you need some support or have feedback, please join the group.

Mac Shortcuts Converter

Tue, 02 Dec 2008 17:57:39 +1100

When switched to Mac it was a real disaster to understand all these special symbol OS uses for control keys (⌘, ⌥, etc). After a while I used to them and now I feel sorry for people who have to write “Command + Option + P” instead of “⌘⌥P”. To solve this little aesthetic issue I wrote a little application. Use it for good and let force be with you.

iPhone Clock Web Application

Thu, 20 Nov 2008 11:20:00 +1100

Since last year WebJam™ I am proud owner of shiny iPod Touch. Yes, still shiny. What I found recently that while I am in the office my iPod just wasting space at my desk. Just for fun I decide to create simple web application that will turn my iPod to digital clock while I am in the office.

Just for fun I decide to emulate old LC clock without any images or vector graphics. To make it look like application I have to put special meta tag inside HTML (). The problem with this method is that page doesn’t react to device rotation, but benefit of having custom digits is you can rotate them easily. So, don’t be surprised to see clocks rotated 90° in your browser. Here is a result.

The question is, how I did all these fancy shapes without images? I was using borders. Take a look at fig. 1. If you apply wide border to some element and paint one side in different colour browser will solve graphical problem by creating “photo frame corner”. So, on fig. 2 I show idea: two narrow DIVs with wide borders will create a shape I need. Now in CSS I specify display rules depending on the value of the digit. I didn’t specify colour for borders so they could inherit colour from body text. Now to change colour of the clock I just need to change colour of the body. The rest is easy.

Hope you could pick up some interesting techniques from this example.

Update: Since iPhone/iPod software update 2.2 release had to update CSS a bit.

Raphaël Feed

Fri, 14 Nov 2008 17:13:04 +1100

I’ve created twitter account for Raphaël. All upcoming news and releases will be announced there. Feel free to follow @RaphaelJS or subscribe to RSS feed.

Web Directions South ’08 Wrap Up 2

Mon, 03 Nov 2008 15:56:44 +1100

Just want to point out that Web Directions crew finalised work on podcasts and podcast of my talk is available along with my slides at Web Directions web site, so look and listen if you feel like this.

Pie Chart Madness

Wed, 22 Oct 2008 11:58:38 +1100

With release of Raphaël 0.5.6b building pie charts become very easy task. Before I need to draw path with a hole inside, but now I can really draw every sector of the pie, because Raphaël finally has arcTo method. It was a bit of challenge to create it because VML has absolutely different interface from SVG. Fortunately Erik Dahlström from Opera point me to right direction. After that it was very easy to connect the points and have a good picture. Take a look at the demo of this lovely pie chart.

Image rotation on iPod with Raphaël

Fri, 17 Oct 2008 10:52:46 +1100

Image rotation on iPod with Raphaël

San Francisco

Tue, 07 Oct 2008 17:33:17 +1100

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.

My First Interview Ever

Thu, 02 Oct 2008 10:21:00 +1000

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