Archive for the 'GUI Development' Category
Okay, so Jack Slocum over at EXTJS has put together a very cool example on how to develop new Vista sidebar gadgets using the ExtJS Framework - opening up a huge realm of posibilities for developing advanced sidebar gadgets *without* ending up looking like so many of the tacky ones released on Windows Live. Take a look at this entry from Jack’s Blog:
Quote Jack’s Blog:
A while back in the Ext forums I mentioned a Forum Gadget I was working on for Windows Vista created with Ext 2.0. The gadget gives the ability to monitor the Ext JS forums (all posts or by individual forum), perform fast searches and supports both docked and undocked mode.
read comments (1)
Demo Girl (http://demogirl.com/) has put together a great screencast on website/application user friendliness. I’m currently working on a fairly large web application and usability is one of the key areas that so frequently suffers in web applications - both in part to inexperienced/lazy developers and/or “overly creative” designers.
Quote:
“I sign up and navigate through a lot of different Websites and services every single day so I can create screencasts to help my readers decide if they want to try them out or not. In doing this, I notice every little detail from arriving to the site, to locating my account settings, to signing out. It’s my job to know where the help pages are, how to change a password, and how to generally navigate through whatever site I’m currently creating a screencast for. I can’t tell you how many times I’ve ditched a service that I actually thought was kind of cool, but navigation was so horrible that I didn’t want to share it with you here - And that’s the topic of the screencast today. “
It’s only a few minutes long and well worth taking a look at if you have any influence over the design and development of web applications: if you care about your users experience anyway!
Interesting discussion going on over at the EXT forums at the moment re a new convention that has sprung up with putting the seperating comma at the begging of a line rather than the end with a list of value-pairs in an object - under the proviso that if an error occurs in Internet Explorer - the line that IE detects the error on will be the line with the surpurflous comma. Take a look at the thread for more info…
I was interested in profiling the differences between the two, as logically having the comma on the following line forces the javascript interpreter to have to do more guess work as to whether the previous line is supposed to terminate or continue (javascript automatically does this check for each line to enable developers to leave out semicolons). Thats the theory anyway.
Interesting though. From my ‘experiment’ it appears (as expected) that putting commas before items rather than after does have an effect on the interpreter - average 74ms on my quad core machine (in firefox). Keep in mind though that this object has 300,001 properties which is huge for a javascript object. I don’t think anybody is going to cry over a lost 74ms when creating an object with that many properties. Still - this kind of thing might have a larger impact on less powerful devices such as handhelds.
See below for the results of my experiment:
Okay… so I decided to do a little test over my lunchbreak. Keep in mind that with almost all profiling its completely subjective as cosmic rays hitting my processor could affect the results - but here is what I got anyway:
Code:
Average Min Max After 1434.8ms 1382ms 1498ms Before 1508.1ms 1434ms 1680ms
I ran the below tests 10 times each using the firebug profiler. Whilst there is a difference I doubt many people would be creating objects with 300,000 boolean properties :p
This was to create a simple object with 300,000 properties in both styles. The code I used for this is:
COMMA BEFORE:
PHP Code:
<html>
<head>
<title>JS Profile</title>
</head>
<body>
<button onClick=”eval(document.getElementById(’objectCode’).innerHTML);”> Click Me!</button>
<div id=”objectCode”>
var k = {
“First Item”: false
<?php
for($x=0;$x<300000;$x++){
echo “, \”item$x\”: true “;
}
?>
}
</div>
</body>
</html>
COMMA BEFORE:
PHP Code:
<html>
<head>
<title>JS Profile</title>
</head>
<body>
<button onClick=”eval(document.getElementById(’objectCode’).innerHTML);”> Click Me!</button>
<div id=”objectCode”>
var k = {
<?php
for($x=0;$x<300000;$x++){
echo “\”item$x\”: true, “;
} ?>
“First Item”: false
}
</div>
</body>
</html>