Archive for March, 2009
TaskSpeed: More benchmarks for the libraries and browsers
by Ajaxian on Mar.31, 2009, under Ajaxian.com, Web development
I didn't want the TaskSpeed library task test suite to be lost in the Dojo 1.3 announcement. Alex called it out:
Pete Higgins has been working on a new set of benchmarks with the help of other toolkit vendors (to ensure fairness) called “TaskSpeed“. Dojo 1.3 wins by a wide margin. Across all the reported browsers so far, Dojo is at least 2 times faster than other toolkits on common DOM operations. We’ve worked very hard over the years to make sure that Dojo’s APIs don’t encourage you to do things that will hurt you later, and TaskSpeed finally shows how much this philosophy pays off:
Given that DOM is the primary bottleneck in most apps, these tests demonstrate how Dojo’s approach to keeping things fast pays off not just on micro benchmarks like CSS selector speed, performance improvements to single toolkit functions, or even file size - but on aggregate performance where it really matters. Dojo’s modern, compact syntax for these common operations doesn’t slow it down, either. For instance, if you go check out the TaskSpeed reporting page, you’ll see that where browsers are slowest (IE6/7/8, etc.), Dojo’s focus on performance pays off most. Why use a toolkit that’s going to hurt you when it really counts, particularly when Dojo so easy to get started with? Dojo’s Core has been designed from the ground up with APIs that encourage you to do things that are fast and keep you from doing things that are slow unless you really know what you’re doing. In some cases, we’ve made hard size-on-the-wire tradeoffs in order to keep actual app performance speedy. That hard engineering doesn’t show up in micro-benchmarks or single test release-over-release improvements or the “my toolkit is smaller” comparisons that some would prefer that web developers focus on. It’s easy to win rigged games, after all. It’s only when you see APIs composed together in real-world ways, across browsers, that you can start to see the real impact of a toolkit’s design philosophy. Dojo is designed to help you make things that are awesome for users, and that means they need to be FAST.
Other toolkits have released performance numbers of late, and most of them have been either reported badly or run without much rigor, so it’s exciting to see everyone finally pitching in to build end-to-end tests that show how library design decisions interact with real-world realities of browsers. The TaskSpeed tests have been designed to be both even-handed and reliable (no times below timer resolution, etc.). The reporting page is also designed to make the results understandable and put them in context. A lot of care has been taken to keep this benchmark honest. JavaScript developers have suffered at the hand of chart junk for far too long.
It is interesting indeed to see the browsers on the graph. I will let you guess which browsers are which, but the visual difference is astounding:

Dojo 1.3 Released along with Plugd
by Ajaxian on Mar.31, 2009, under Ajaxian.com, Web development
We have been using Dojo 1.3 release candidates for awhile on Bespin, and today the Dojo team released Dojo 1.3 just in time for Internet Explorer 8.1 (really? some people believed that? I know that it isn't quite April Fools......).
There are some nice usable APIs added to base such as:
-
-
// create a div.
-
var n = dojo.create("div");
-
-
// create a div with content and styles
-
var n = dojo.create("div", { innerHTML:"hi!", style:{ height:"200px" } });
-
// destroy the node safely
-
dojo.destroy(n);
-
-
// place an anchor somewhere, before the node with id="someNodeId"
-
var a = dojo.create("a", { href:"http://dojotoolkit.org" }, "someNodeId", "before");
-
-
// empty the contents of a node safely:
-
dojo.empty("someNodeId");
-
dojo.query(".nodes").empty();
-
-
// place a new LI in an UL at the first position
-
dojo.place("<li>Newly created DOM Node</li>", "someUl", "first");
-
-
// complex creation in dojo.query. passes through dojo.place
-
dojo.query("#myNode").addContent("hi there!", "first");
-
You can also choose between Acme and Sizzle as the engine that powers dojo.query.
Pete also announced Plugd a very cool plugin that "is available as a standalone "dojo.js" replacement (just throw it in your project on top of dojo.js!) or as a 2k adapter to load a bunch of solid additional base API's. We'll be continually working to merge the best parts of plugd back into Dojo land, but for the time being they are provided as a separate entity, and are fully documented."
With plugd you can write code like this:
-
-
$("p.baz")
-
.appendTo("body")
-
.addClass("bar")
-
.onclick(function(e){
-
e.target.innerHTML = "Wow, JavaScript";
-
});
-
Doesn't look like Dojo does it? :)
I blathered on about this and some other items when I discusses how Alex and Pete kindly indulged me in a scoping exercise that "should never be used in production!" ;)
The differences between Callbacks and Events
by Ajaxian on Mar.31, 2009, under Ajaxian.com, Web development
Dean Edwards has a subtle piece on callbacks vs. events where he calls out the issue of libraries that support custom events dying out when one custom event dies.
First, Dean sets the stage:
-
-
document.addEventListener("DOMContentLoaded", function() {
-
console.log("Init: 1");
-
DOES_NOT_EXIST++; // this will throw an error
-
}, false);
-
-
document.addEventListener("DOMContentLoaded", function() {
-
console.log("Init: 2");
-
}, false);
-
Which outputs the correct:
Init: 1 Error: DOES_NOT_EXIST is not defined Init: 2
However, with jQuery and Dojo, using their style of event handling apparently dies out too early:
Init: 1 Error: DOES_NOT_EXIST is not defined
And YUI swallow the error so you just see the two inits.
Prototype seems to win this one, but other frameworks support this in different ways (e.g. Dojo with pub/sub, and connect).
Picli.com ventures into dark age, returns with business model
by TechCrunch on Mar.31, 2009, under TechCrunch UK, Web development

Picli.com, a photo sharing community site launched in private beta in March 2007, has relaunched with a slew of new features and a more clearly defined business model.
Two years seems like a long time for a site to be in beta, and Picli’s developer/designer founder duo of Sam Street and Sean Miller acknowledge this in the FAQ, referring to 2008 as ‘the dark age’ in which, well, nothing much happened. Still, Picli managed to gather a passionate core user community of about 2,000 in this time, whose feedback has contributed to the recent refinements.
Picli’s a bit like Flickr meets Digg - users submit their photography under Creative Commons licensing, which then gets rated up or down by the community. The central focus of the site is the Showcase, a gallery of the most popular photos.
With the relaunch comes tiered membership packages, which the founders are currently soliciting user feedback on before any final decisions are made. There are plans to build upon the online advertising options, currently revolving aorund Google AdSense, and to implement a photo buying service where Picli users could sell usage rights on their images to picture buyers, using a commission-based system which Miller and Street call ‘targeted tagging’. The guys also plan to release an API that will encourage developers to extend the site’s functionality to mobile devices and web apps.
While on the face of it Picli may seem like yet another Flickr, the founders are adamant this isn’t the case - it’s less about acting as a giant harddrive for users to upload all their photos to, and more about community-driven quality control, where photographers share only their best work and take inspiration from others — not dissimilar to what FFFFound does for visual artists.
Miller and Street are bootstrapping Picli for the moment, and say they would love the site to drive traffic to members’ personal portfolio sites as a result of the interest generated on Picli. The site’s gone a ways in proving the concept around a free-to-use model. Whether or not it can compete with the likes of fotoLibra and Demotix will depend on how readily the user community coughs up for annual subscriptions, and whether or not picture buyers find on Picli what they can’t find elsewhere. Watch this space.
Shrinking HTML5
by Ajaxian on Mar.31, 2009, under Ajaxian.com, Web development
Anne van Kesteren has posted on the specs that are moving out of the large HTML5 mega spec, and into their own little ditties:
The current state of things is that the following editor drafts are separated out from HTML5:
- Server-Sent Events: Defines the
EventSourceAPI.- Web Storage: Defines the database, session, and persistent storage API.
- The Web Sockets API, The Web Socket protocol: Defines the
WebSocketAPI.Meanwhile DanC created an initial draft that will lead to splitting out the URL section as detailed in my last post. I did some testing on CSS URL handling and found out it uses exactly the same algorithm as HTML5 in user agents except that the URL character encoding is always set to UTF-8, just like it works for
XMLHttpRequest. In light of this it would make sense to simply revise the IRI specification to make more sense, but there are not enough proponents for that apparently as it would affect e.g. Atom. I guess creating a separate IRI specification (which is what the HTML5 URL handling is) creates less theoretical issues… I wonder though whether anyone has actually tested Atom clients. Do they really refuse to handle spaces in URLs? Do they really do the right thing per the IRI specification and normalize URLs when the encoding of the feed is not a Unicode encoding? Do any clients that handle IRIs do that properly? I doubt it.
Wikirank Shows You What’s Popular on Wikipedia
by WebAppers on Mar.31, 2009, under Web development, WebAppers

Wikirank shows you what people are reading on Wikipedia. It’s based on the actual usage data from the Wikipedia servers, which the Wikimedia foundation makes available as a public service. They take that data, process it, and give it back to you in a format that’s easy to use and share. Wikirank reveals emerging trends, and lets you embed relevant charts in blog posts and on social media sites.
From a technical perspective, the charts on Wikirank are based on logs from Wikipedia’s HTTP Squid proxy servers. That means every single page load is recorded, whether initiated by a human with a browser or a Web spider crawling through. Therefore, the numbers for a topic on a particular day can’t be considered absolute impressions the way, say, an ad server might count them.
The data of Wikirank indicates relative increases or decreases, so the shape of the charts is more important than the specific number of views. Comparisons are even more interesting, as relative interest in multiple topics can be ranked.
Requirements: -
Demo: http://wikirank.com
License: GFDL License
Sponsors
Dreamhost: Get $50 Off with Coupon Code: WEBAPPERS
15 Beautiful And Free Urban & Retro Fonts
by WebResourcesDepot on Mar.31, 2009, under Web development, WebResourcesDepot
A factor which cannot be overlooked when designing websites, brochures or e-magazines is the all important font type.
Designers need to carefully select the font that best fits the style of the publication, is legible and perhaps a little different from the norm.
There are plenty of retro and urban fonts available for download, however many are very expensive. For those on a limited budget, here are some amazing free urban and retro fonts.
Victor Moscoso
This funky retro font is based on the 1960’s psychedelic poster lettering of Victor Moscoso. It is hard not to think of Cadillac’s and American diners when looking at this font. Compatible with both Windows and Mac computers, it is free for personal use and contains a full set of characters and numbers.
Watson
Watson is a retro font that still has the wow factor but is also simple and elegant. The lettering is skinny and some of the characters appear three dimensional. Best of all it’s completely free to use, compatible with Windows and Mac computers and contains a full set of characters and numbers.
Thuphap
Categorised as a brush font, Thuphap looks like freehand writing. The ink weight varies on the curves of the letters, as it would naturally do if you were writing on a piece of paper. It is completely free to use, compatible with Windows and Mac Computers and contains a full set of characters and numbers, including several special letters.
Cinema
This retro font is a flashback to the 1950’s movie theatres as it uses the same style as the old billboards and posters. The cinema font set contains all the standard letters and numbers, as well as 17 additional characters. It would look great on a film review website.
JF Ringmaster
JF Ringmaster is simply stunning. This retro font is exquisitely designed, with suggestions of a carnival or circus. It is bold and sassy, and it would look equally at home on an Old Western Saloon sign. Completely free and available for download for both Windows and Mac computers, it contains the full standard character set and a few special characters but no extended letters.
Acorn Initials
All these letters are set in uppercase and behind each one is an acorn leaf. Beautifully sketched, these letters are quite busy but intricate and detailing. It is free to use, but Acorn Initials is only available for download on Windows computers.
Deco Caps
Simple in design but distinctly retro, the Deco Caps set is amazing. A serif font face with a twist, this set is extremely well crafted. The lettering isn’t overpowered by the design but it is still very arty. Free to use and compatible with both Windows and Mac computers, Deco Caps only contains standard lettering and no numbers.
Francis Mirtha
Another amazing retro font, the Francis Mirtha set gives the appearance of hand drawn lettering that has been filled in with ink. The ink weight varies within each letter, giving the overall ‘filled in’ look. Free to use, a full set of characters is available for download on both Windows and Mac computers.
Action Is
Bring back the swinging sixties with this funky font. This hippy style shouts flower power and is ideal for a fun website or blog. It is completely free to use and is compatible with Windows and Mac computers. It contains all the standard letters and numbers, however all the letters are in uppercase.
Aajax Surreal Freak
Categorised as decorative, this font set is fun and quirky. Belonging to the handwriting collection, it is bold, squiggling and will certainly catch attention. The font set is completely free to use and is compatible with Windows and Mac computers. It contains all the standard letters and numbers, as well as several other special characters.
Urban Sketch
The army styled lettering resembles characters created using a pencil stencil and it even looks like the letters have been filled in by pencil. It is completely free to use and compatible with both Windows and Mac computers. It contains the full set of standard letters and numbers, as well as several special characters like & and @.
AcidDreamer
AcidDreamer is certainly different. Its letters look like they were written by an unsteady hand, although they are all very legible. The shading also makes the lettering look embossed. Compatible with both Windows and Mac computers, the set is free to download. It contains a full set of standard letters and numbers, as well as a few special characters like % and $.
Urban&Slick
This font has only recently been made available for download. Most of the skinny characters either start or end in arrows, making the overall style interesting and different. The set is completely free to use and compatible with both Windows and Mac computers. Most of the letters are in uppercase, with the exception of the i, j and y.
Argor Got Scaqh
This stunning font wouldn’t look amiss as a newspaper header. Reminiscent of a bygone era when men wrote by candlelight using ink quills, this gothic font is simply beautiful. Compatible with both Windows and Mac computers, it contains a full set of characters and numbers, as well as a few additional letters.
Aenima
Messy calligraphy is the best way to describe the Aenima font set - some of the characters even have ink blotches. The set is completely free to download, however it is only compatible with Windows computers. It comes with a full set of standard letters and numbers, as well as several special characters like @ and %.
Special Downloads:
ScheduledTweets
Advertisements:
SSLmatic - Cheap SSL Certificates (from $19.99/year)
Dreamhost $50 Discount Code: WRD
Follow WebResourcesDepot At Twitter And Get More Resources!
Related posts
The VML changes in IE 8
by Ajaxian on Mar.31, 2009, under Ajaxian.com, Web development
We mentioned that a new excanvas was released to keep up support with IE 8. Well, Louis-Rémi Babe has detailed his travails finding out what what changed in IE 8 VML land:
Although the VML specification hasn’t undergone any improvements or modifications since its publication back in 1998, Microsft development team felt like considerably changing the way their own standard should be handled:
- The namespace declaration has to take a second argument to be functional:
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");
instead of simply:
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml');- The selector for the behaviour rules needs to be slightly modified (more information follows).
- For a standard compliance purpose, when setting dimensions or position of an element, the unit no longer defaults to ‘px’. It has to be explicitly specified
- It is no longer possible to create a VML element outside of the DOM:
var myFragment = document.createDocumentFragment();
myFragment.insertAdjacentHTML('beforeEnd',
'<v:rect id="myRect" fillcolor="blue" style="top:10px;left:15px;width:50px;height:30px;position:absolute;"></biv:rect>'
);
document.body.appendChild(myFragment);
This rect element will not be displayed! And don’t try to modify its CSS properties with the developer tool, you are likely to crash the tab or even the browser, if you’re lucky. Fortunately, there is an easy fix for this bug: you just have to copy the outerHTML of the element into itself:
var myRect = document.getElementById('myRect');myRect.outerHTML = myRect.outerHTML;
- It’s no more possible to use % unit! This one is my favourite. The advantage of vector graphics is that they can be scaled without quality loss. Now tell me how you scale a graphic from which all components dimensions and position are set in pixels! You have to resort to using the onpropertychange event to recalculate one after the other those values each time you want to resize your graphic. But there is a lot of case where you simply can’t fix this bug. For example, if you had an rectangle in a div: the div has no dimensions and scales with its content, and you want the height of your rectangle to scale with the div. There was a time when it was possible to simply set the height of the rectangle to 100% (providing the position of the div is relative, of course). But it was probably too easy after all.
Remarkably, none of this change has been announced by the IE dev team, as far as I know. The only announcement made about VML can be found on a blog post
MooTools Datagrid Component: OmniGrid
by WebResourcesDepot on Mar.30, 2009, under Web development, WebResourcesDepot
OmniGrid is a free grid component for MooTools that has advanced features.
Having inspired from Flexigrid (for jQuery) & sortableTable, OmniGrid offers a similar functionality.
Besides client-side sorting, with a serverside script (a PHP one is mentioned), it connects to the data & can easily sort/paginate an unlimited number of records.
Columns can be resized, multiple records can be selected (data inside is shown with an accordion), the look can be customized & more.
Advertisements:
SSLmatic - Cheap SSL Certificates (from $19.99/year)
Dreamhost $50 Discount Code: WRD
Follow WebResourcesDepot At Twitter And Get More Resources!
Related posts
Shock! Horror! iPhones don’t make a Top 20 popularity list
by TechCrunch on Mar.30, 2009, under TechCrunch UK, Web development
Here’s something from the department of Quelle Surprise: Bango (AIM: BGO) reckons the iPhone lags behind the top 20 mobile handsets most used in browsing and buying on the mobile web.
The Bango Top 20 handset list, based on Bango’s February statistics, puts the Nokia 3110c on top, followed by the Samsung M800 in 2nd and the Nokia 6300 in 3rd place. On the whole, smartphones account for 30% of handsets in the top 20. Bango detected a total of 1,811 different types of handsets accessing the mobile web in just one month.
The iPhone appears as 24th on the list, leading Bango to conclude that brands trying to reach the mass market on the mobile web need to look beyond that rarefied group of iPhone users whose buying is restricted to the Apple App Store.
The company’s stats are based on its own metrics from Bango Analytics, monitoring the activities of major brands and businesses as their consumers browse to mobile websites, and the number of sales of mobile content and services handled by Bango Payment.
While it’s not a comprehensive or comparative study, the stats and Bango CEO Raymond Anderson’s blog analysis will still make interesting reading for businesses that monetize their mobile content and services across a wide demographic.
Anderson’s point that companies that haven’t optimised their sites for mobile browsing or transactions are missing out is on the money, but this situation is not likely to remain constant. Come June, when new iPhones are launched, it’s likely to be at different pricepoints more suitable for the mass market.
















Greetings weary traveller to my personal website.