Home
vgs_rss' Journal -- Day [entries|friends|calendar]
vgs_rss

[ userinfo | livejournal userinfo ]
[ calendar | livejournal calendar ]

Frank Sinatra, Flash, and Ajax: Deckmyplace.com [24 Jun 2008|05:21pm]
12:00 19.06.2008
Frank Sinatra, Flash, and Ajax: Deckmyplace.com

Scott Boyce wrote in with an interesting story about deckmyplace.com.

The site was originally designed as a Flash site, but when the mandate came from the top to use HTML instead of Flash, he had to see just how much of the original comps he could implement. And it turns out, pretty much everything.

We asked Scott to share some details on his experiences building the site:

When the mandate to drop Flash came, there wasn't time to redesign. My goal was to make it indistinguishable from Flash visually, but do so while employing valid markup, progressive enhancement, and Section 508 accessibility.

MooTools

I had previously used Mootools (and moo.fx prior to that) to add subtle animation to interface elements, but I had not built a site entirely around it (or any other JS library). I had also not created a site with such explicit positioning throughout, so there were CSS challenges as well.

I used a lot of Mootools' built-in assets: AJAX, tool tips, sliders.

Fancy Page Transitions

The page transitions are done with a combination of effects. Basically, there's three layers: the frame, the content, and the (ususally hidden) background. When the user navigates to a new page, the following occurs:

1. The background is switched to a blurred screenshot of the current page (instant; the image has been pre-loaded).
2. The opacity of the content area is reduced, revealing the blurred background image (300 ms).
3. New content is loaded via AJAX (each content page is about 1 KB; the lounge is about 4 KB).
4. The opacity of the content area is scaled back to 100% (300 ms).

The Development Process

The content was first laid out with HTML, using PHP includes to eliminate the need for any duplicate content. (Incidentally, the entry form and validation were also written in PHP.) The CSS was created alongside this framework, which resulted in the JS-disabled version of the site. Once we were satisfied there were no issues with the display or functionality in a few target browsers (Firefox, IE6, Safari, Opera, Lynx, IE6 + JAWS), I started writing event listeners.

Once the JavaScript was written, we tested again. In the end, I think the only thing we had to drop were the background music and some of the secondary animation (spinning knobs). Still, most people just assume it's Flash.

Firebug, YSlow, and the Web Developer toolbar for Firefox were invaluable tools during development

Stats

* Total JavaScript is 59 KB (51 KB for Mootools + 8 KB for the library)
* 30.9 KB of CSS (including 4.7 KB of CSS for MSIE loaded via conditional comments)
* 2.59 MB for the whole site (2.11 MB of images)

I love the legal disclaimer at the bottom:

The thought of a corporation owning a trademark on a given name... fascinating. I can only imagine the future litigation between the Dave Thomas' of the world.


read more at Ajaxian
post comment

Algorithm Ink: Algorithm-driven Painting with Sharing and On-line Editing [24 Jun 2008|05:21pm]
12:52 19.06.2008
Algorithm Ink: Algorithm-driven Painting with Sharing and On-line Editing

[Error: Irreparable invalid markup ('<a [...] http://ejohn.org/files/algorithm-ink.sm.png">') in entry. Owner must fix manually. Raw contents below.]

<lj-raw><small>12:52 19.06.2008</small><br>

<b><a href="http://feeds.feedburner.com/~r/ajaxian/~3/315402075/3763">Algorithm Ink: Algorithm-driven Painting with Sharing and On-line Editing</a></b><br>

<p><a href="http://ejohn.org/blog/algorithmic-ink-in-javascript/><img src="http://ejohn.org/files/algorithm-ink.sm.png" border="0" /></p>
<p>John Resig linked to Aza Raskin's <a href="http://azarask.in/projects/algorithm-ink/">Algorithm Ink</a> which is an implementation of the <a href="http://www.contextfreeart.org/">Context Free Art</a> project in JavaScript using Canvas.</p>
<p>You can draw immediately with clicks, browse other art, and save your work. You can also edit the code to tweak it:</p>
<pre>
startshape scale

rule scale{
SPIKES{ s .03 }
}

rule SPIKES {
SPIKE {}
SPIKE { r 90 }
SPIKE { r 180 }
SPIKE { r 270 }
}

rule SPIKE {
LSPIKE {}
}
rule SPIKE {
LSPIKE { flip 90 }
}

rule LSPIKE {
SQUARE {}
LSPIKE { y 0.98 s 0.99 r 1}
}
rule LSPIKE 0.005 {
SPIKE { r 90 }
SPIKE { r -90 }
LSPIKE { y 0.98 s 0.99 r 1}
}

rule MOUSECLICK{
SPIKES{ s .025 }
}
</pre>
<p>When I kicked it off in WebKit nightly, I got a nice "you aren't using a standards compliant browser" message, but it seemed to work fine ;)
</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=1LKnUI"><img src="http://feeds.feedburner.com/~f/ajaxian?i=1LKnUI" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=wCE9DI"><img src="http://feeds.feedburner.com/~f/ajaxian?i=wCE9DI" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=EENdRi"><img src="http://feeds.feedburner.com/~f/ajaxian?i=EENdRi" border="0"></img></a>
</div>

<br clear="all">

<p></p><small><a href="http://feeds.feedburner.com/~r/ajaxian/~3/315402075/3763">read more</a> at <a href="http://ajaxian.com">Ajaxian</a></small></lj-raw><div align="right"><small><a href="http://hiero.ru/rss2lj/" rel="nofollow">rss2lj</a></small></div>
post comment

Browser News: IE, FF, Safari, and Opera [24 Jun 2008|05:21pm]
13:47 19.06.2008
Browser News: IE, FF, Safari, and Opera

All eyes have been on the Firefox 3 launch, but there has been news across the board. PPK has been on the case and gives us this really nice writeup:

IE

No new version of IE has been released, but several important questions were answered in the past two weeks. IE8b2 is coming in August and a new IE=EmulateIE7 value will be added to the <meta> switch.

The first is obviously good news; I have my reservations about the second. My gut reaction is No, but I still have to figure out exactly why I think so; and I’m afraid that, too, will have to wait until next month.

Finally, ther’s supposed to be a new tool for running all IE versions simultaneously, and the current buzz indicates it performs as promised. It’s still in alpha, but this, too, will be worth a closer look in a month or so.

Firefox

Firefox 3 final is supposed to be released today, but right now there’s no download link yet. Maybe it’ll be revealed once morning comes around in the US—or maybe it’ll be postponed for a few days. In any case, it’s here.

In addition, a Firefox 3.1 Alpha (FTP) has been made available, and it’s supposed to support all CSS3 selectors.

Safari

Apple is supposed to have released a Safari 4 Developer Preview through the Apple Developer Connection, but unfortunately I haven’t been able to find an actual download link—and World of Apple doesn’t mention it either.

If you know where it can be downloaded, please leave a comment.

Opera

As expected, Opera released version 9.5; see this article for more information about the new release.


read more at Ajaxian
post comment

Audible Ajax Episode 27: SproutCore with Charles Jolley [24 Jun 2008|05:21pm]
21:39 19.06.2008
Audible Ajax Episode 27: SproutCore with Charles Jolley

SproutCore Photos

On the back of the iPhone 3G news at WWDC, the next biggest thing was the launch of Mobile Me, a compelling user experience to access Apple services using standard Open Web technology.

The application is written using the SproutCore framework, and I got to sit down with Charles Jolley, one of the founders.

We talked about the history of the project, how it differs from other frameworks that are out there, and where they are going. It is interesting that this podcast comes after the 280 North one, as they are both Cocoa inspired.

SproutCore is much more JavaScript focused though, and gives you MVC in the client in a simple and intuitive way. I found it interesting to see how the framework has developed, from its Rails plugin roots, to now (dispel myth: it has no dependency on Rails, just some build files are Ruby).

Charles talks about techniques that they use to give you fast applications (common global event dispatch seems key, and Prototype 2.0 is adding this) and how he feels that compelling rich browser applications will keep pushing the browser vendors to speed up, and shape up!

We have the audio directly available, or you can subscribe to the podcast.


read more at Ajaxian
post comment

Ajax Avenue; No Exit [24 Jun 2008|05:21pm]
06:43 20.06.2008
Ajax Avenue; No Exit

Thank god it is a Friday so I can post this bit of fun from New Zealand.

Stephen Colebourne found it and said:

This is a genuine street sign from Nelson, New Zealand. But perhaps its telling us that Ajax really is a dead end and we need something better?! Or that now we've started using Ajax there's no escape?!!


read more at Ajaxian
post comment

jsTree: jQuery-based JavaScript tree component [24 Jun 2008|05:21pm]
10:00 20.06.2008
jsTree: jQuery-based JavaScript tree component

Ivan Bozhanov walked us through his jQuery-based tree component recently. The state of trees out there is interesting. YUI! has a nice, stable tree control but Dojo's once feature-rich tree has been replaced with a fairly basic tree (i.e., doesn't appear to have in-line editing and drag-and-drop still seems flakey; Dojo guys, correct me if I'm wrong) at the moment and jQuery UI lacks an official tree component (though a few tree plug-ins are out there); as you might expect, Ext JS has a nice tree component.

Let me highlight a few areas where jsTree stands out. First, it has some basic features that many trees out there lack:

jsTree allows the user to create, rename, reorder, move, and delete note (which is realised in a file-browser manner - eg. inplace)

It also has a rich event API which is fairly standard across most editable tree components, though the event types are finer-grained than in most trees I've seen (not sure whether that's a good thing):

You can attach callbacks to almost every action:
- onbeforechange
- onchange
- onrename
- onmove
- oncreate
- ondelete
- onopen
- onclose

It also allows you to provide rules that govern what the user may or may not do based on the "type" of a node:

jsTree lets developers define rules for moving, selecting, deleting, and focusing nodes. The rules are based on developer-definable types of each node passed in the data (different sources define it differently). This limits the user in his actions. The developer can also attach inline rules which override global rules. One scenario in which these rules are useful is when you build a CMS and need a fixed number of top level nodes because of a design restriction.

While you could accomplish the same functionality with event handlers, it's nice to have a simple built-in scheme that can be easily data-driven.

These rules are applied real-time as the user attempts to interact with the tree:

When you drag a node around a pointer tells you where you are about to insert it, and prevents the user from dropping anywhere against the rules. The warning is real time - as you drag and drop the pointer is replaced by a red cross if the action is against the defined rules. I'm still working on displaying definable text messages.

jsTree can be configured to reference a custom property in each node object to determine its type.

It also has built-in localization support; you specify string identifiers corresponding to the different languages that the tree should support on construction:

PLAIN TEXT
JAVASCRIPT:
  1. tree1.init($("#nested"), {
  2.     data : "nested.xml",
  3.     xsl : "nested.xsl",
  4.     languages :  [ "en", "bg" ],
  5.     // other stuff omitted
  6. });

and then in this case each node in the XML tree fed to the component specifies its language:

PLAIN TEXT
XML:
  1.  
  2. <name lang="bg" icon="images/f.png">Начало</name>
  3. <name lang="en" icon="images/f.png">Home</name>
  4.  

In addition to XML data types, it also supports JSON and in-line HTML. But it also has built-in support for doing XSL transforms on XML data sources, including a scheme that lets you include flat data that it then makes into a hierarchy:

jsTree supports XSL transformations when using the XML data source option. This is a bit faster than javascript parsing. It includes an XSL stylesheet for transforming a flat list of entries into a tree. This can be useful if you use adjacency for maintaing a tree in a database. In such situations it is quite heavy on the server to dump the whole tree as you need N-1 queries where N is the number of nodes in the tree. With this XSL solution you can just dump the table flat out with id and parent_id attributes and the XSL will transform it into a nested structure.

Unfortunately, what jsTree is lacking is the visual refinement of many of the trees out there, but as jsTree is built on top of jQuery, we suppose Ivan can add that kind of polish easily.

For many data-driven applications, high-quality grid and tree components are really important; kudos to Ivan for some interesting ideas in jsTree. The docs are certainly better than some I've seen, but not as complete as I'd like.


read more at Ajaxian
post comment

Algebraic Data Types in JavaScript [24 Jun 2008|05:21pm]
11:12 20.06.2008
Algebraic Data Types in JavaScript

Sjoerd Visscher has written a library that lets you create algebraic data types in JavaScript for use in your functional programming world.

ADT.js is written in JavaScript 1.8 "which means that as of this writing it only runs in Firefox 3.0. I have chosen to keep it 1.8, because the code is a lot cleaner, thanks to the new expression closures. But there is nothing that cannot be made to work in ECMAScript edition 3. And I have no doubt that the same thing could be done in Python or Ruby."

Now you have the library, you can create types like this (with Haskell to compare):

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. // Haskell:
  3. // data Color = Red | Green | Blue | Yellow
  4. // data Point = Pt Float Float Color
  5. Color = Data(function() ({ Red: {}, Green: {}, Blue: {}, Yellow: {} }))
  6. Point = Data(function() ({ Pt: { x: Number, y: Number, color: Color } }))
  7.  
  8. // Haskell:
  9. // data Attrs n v = Attr n v
  10. // data Node  n v = Elem n (List (Attrs n v)) (List (Node n v)) | Text v
  11. Attrs = Data(function(_, n, v) ({ Attr: {name: n, value: v} }))
  12. Node = Data(function(node, n, v) ({
  13.   Elem: { name: n, attributes: List(Attrs(n, v)), childNodes: List(node) },
  14.   Text: v
  15. }))
  16.  

Now you have the types, you can do things to them:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. // With unfold you can easily generate algebraic data structures from other data. The following example shows how to generate a decreasing list of numbers.
  3. var counter = List.unfold(function(n, c) n ? c.Cons(n, n - 1) : c.Nil)
  4.  
  5. // Fold is the reverse of unfold. It destructs data into a return value. Here is an example that multiplies a list of numbers.
  6. var prod = List.fold({ Nil: 1, Cons: function(h, t) h * t })
  7.  
  8. // With map you provide a function for each type parameter. Here are 2 examples using the XML data types
  9. var addPrefix = Node.map(function (name) "x:" + name, id)
  10. var normalizeSpace = Node.map(id, function (value) value.replace(/^\s+|\s+$/g, ""))
  11.  

And, a lot more.


read more at Ajaxian
post comment

Ajax Experience 2008 Registration Open [24 Jun 2008|05:21pm]
12:00 20.06.2008
Ajax Experience 2008 Registration Open

We're pleased to announce that registration for The Ajax Experience is now open! The event is being held in Boston this year, from September 29 to October 1.

Mini-Events

In addition to the usual agenda full of interesting sessions and compelling content, we're pleased to announce that concurrent with the Ajax Experience, several of the most popular Ajax frameworks will be holding "mini-events" that are both open to attendees and the general public. We're giving space to representatives from Dojo, jQuery, and Prototype to hold half-day events focusing on their own frameworks. These events run at the same time as a special "introductory" track of content geared towards attendees who are new to Ajax.

We couldn't be happier about how this has worked out and we hope both attendees and others who are able to attend enjoy these mini-events. More details coming soon.

Cross-Browser Keynote

Another interesting new feature of the show this year is a unique keynote we're putting together with Peter-Paul Koch (ppk) of Quirksmode.org and folks from Dojo, jQuery, and Prototype. ppk is preparing a presentation detailing the top cross-browser compatibility issues facing Web developers today, and following his remarks, attendees will get briefings on how these popular Ajax frameworks help Web developers address the issues raised by ppk.

Every time we survey attendees and members of the community about what issues they care about most, cross-browser compatibility is either in the top slot or close to it. This should be a pretty cool dissemination of the best information on the topic.

Early Bird Registration Ends August 22...

...so stop on by and get yourself a seat at the show!


read more at Ajaxian
post comment

Preloading Images with jQuery [24 Jun 2008|05:21pm]
12:30 20.06.2008
Preloading Images with jQuery

Just the other day I was chatting with a colleague about how to go about pre-loading images before rendering a cool JavaScript-driven animation; Scott Jehl from the Filament Group wrote in to tell us about a jQuery plug-in that they use for just that purpose:

We recently put out a super handy jQuery plugin for pre-caching all images referenced in linked/imported CSS files.
It's particularly useful for apps with overlays, yet-to-be embedded content, etc. It sure beats maintaining arrays of image paths or making complex CSS sprites.

The script iterates through each rule in each stylesheet attached to the current page and if the rule's value contains an image URL, it loads the image, thus ensuring it's available in the cache when used in the document.

PLAIN TEXT
JAVASCRIPT:
  1. jQuery.preloadCssImages = function(){
  2.         var allImgs = [];//new array for all the image urls 
  3.         var k = 0; //iterator for adding images
  4.         var sheets = document.styleSheets;//array of stylesheets
  5.        
  6.         for(var i = 0; i<sheets .length; i++){//loop through each stylesheet
  7.                 var cssPile = '';//create large string of all css rules in sheet
  8.                 var csshref = (sheets[i].href) ? sheets[i].href : 'window.location.href';
  9.                 var baseURLarr = csshref.split('/');//split href at / to make array
  10.                 baseURLarr.pop();//remove file path from baseURL array
  11.                 var baseURL = baseURLarr.join('/');//create base url for the images in this sheet (css file's dir)
  12.                 if(baseURL!="") baseURL+='/'; //tack on a / if needed
  13.                 if(document.styleSheets[i].cssRules){//w3
  14.                         var thisSheetRules = document.styleSheets[i].cssRules; //w3
  15.                         for(var j = 0; j<thisSheetRules.length; j++){
  16.                                 cssPile+= thisSheetRules[j].cssText;
  17.                         }
  18.                 }
  19.                 else {
  20.                         cssPile+= document.styleSheets[i].cssText;
  21.                 }
  22.                
  23.                 //parse cssPile for image urls and load them into the DOM
  24.                 var imgUrls = cssPile.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);//reg ex to get a string of between a "(" and a ".filename"
  25.                 if(imgUrls != null && imgUrls.length>0 && imgUrls != ''){//loop array
  26.                         var arr = jQuery.makeArray(imgUrls);//create array from regex obj       
  27.                         jQuery(arr).each(function(){
  28.                                 allImgs[k] = new Image(); //new img obj
  29.                                 allImgs[k].src = (this[0] == '/' || this.match('http://')) ? this : baseURL + this;     //set src either absolute or rel to css dir
  30.                                 k++;
  31.                         });
  32.                 }
  33.         }//loop
  34.         return allImgs;
  35. }

Handy.</sheets>


read more at Ajaxian
post comment

Magic Toolbox: High-quality JavaScript Image Effects… for a Price [24 Jun 2008|05:21pm]
16:32 20.06.2008
Magic Toolbox: High-quality JavaScript Image Effects… for a Price

Jake Brumby of the European Ajax development shop Magic Toolbox recently pointed us to three of their creations: Magic Zoom, Magic Magnify, and Magic Thumb.

Each of these effects has a really nice implementation that works across a large number of browsers:

Compatibility chart for Magic Thumb

Jake shared some of their experiences building these effects with us:

Initially, our key challenge was making it work in all browsers. As usual, IE 6 and IE 5.5 gave the most headaches and we spent a long time finding workarounds. Getting the expand/contract effect to work smoothly in IE took quite a while. Getting the close/next/previous buttons to fade in and out in IE was also tough.

Another lesson is that when you are building a tool that will be used on many websites, you need to test under a lot more conditions than a script for a single website. One of our first customers used it on a site with Flash navigation. The Flash navigation continued to be visible after the image had expanded, which is not what you want. So we needed a way to keep the enlarged image above all the other content. No matter how much testing you do, there are likely to be small bugs after launch and you need to be able to react quickly to fix them.

To ensure the smallest possible script, they built it without using an existing JS library:

One other lesson was that for the best results, you need to code from scratch. We did an initial trial using MooTools and we achieved the effect we wanted but the source code was well over 100kb which we deemed too high. It was useful as a proof of concept, but the final version of the tool was coded entirely from scratch.

This is all well and good, but... are they worth paying for? Each of these three effects is sold separately. On the one hand, with such excellent open-source frameworks out there for doing Ajax effects, etc., having to buy these seems... weird. On the other hand, they are free for non-commercial sites and if you're an e-commerce site, if you apply these effects all across your site, they can have a big impact, and having someone else deal with all the cross-browser issues for you (or else you get your money back) seems like a good deal, along with the 30 minutes of free support they throw in.

I confess I have a soft spot for ISVs (Independent Software Vendors). I love to see small teams out there making quality software for a living, especially now that so many have to compete against free software. Do these products from Magic Toolbox compel you to consider purchase? Or do you feel the open-source stuff is good enough?

A final note from the Magic Toolbox team:

Magic Thumb provides a lot of customisation features that you don't get with other lighbox effects. It's also the only one we've come across that "grows" the image immediately in front of the user. It gives the user a greater feel of control and because it loads immediately it keeps them flowing through the website. That's good for usability.

Beautiful stuff, guys.


read more at Ajaxian
post comment

Endpoint Resolver: JavaScript Library to hunt for Location redirects [24 Jun 2008|05:21pm]
05:34 23.06.2008
Endpoint Resolver: JavaScript Library to hunt for Location redirects

Re-posted from my personal blog

Sometimes you can get in the zone just enough to be productive on a plane. On my flight to Mexico City yesterday, I created Endpoint a project that contains a server proxy, JavaScript client, and Greasemonkey Script with a mission. The mission is to take a URL, work out if it is a redirect (via a Location: header), and then return the final endpoint for it.

Why did I do this?

I was brainstorming functionality for a Twitter client with James Strachan (he is working on gtwit) and we talked about how annoying tinyurl / is.gd / snurl / you name it URLs are. They don't tell you where you are going, and you could get Rick Rolled (if you are lucky) or much much worse.

So, I wanted to create a library, and one client (Greasemonkey) to test it out. Then anyone else could use it too to resolve directly from their Web pages.

How does it work

You load up the JavaScript via script src and then you can call resolve, passing the URL and a callback that will get the result. A few examples:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. // Simple version
  3. Endpoint.resolve('http://snurl.com/2luj3', function(url) {
  4.   alert(url);
  5. });
  6.  
  7. // Using the original URL to work out if it has changed
  8. Endpoint.resolve(
  9.   document.getElementById('testurl').value,
  10.   function(url, orig) {
  11.     alert(url);
  12.     alert(Endpoint.isRedirecting(url, orig));
  13.   }
  14. );
  15.  
  16. // How it is used in the Twitter Endpoint Resolver
  17. Endpoint.resolve(url, function(resulturl, originalurl) {
  18.   if (!Endpoint.isRedirecting(resulturl, originalurl)) return;
  19.  
  20.   newtext = newtext.replace(originalurl, resulturl, "g");
  21.   jQuery(el).html(newtext);
  22. });
  23.  

Under the hood, a bunch of stuff is happening. I would love to be able to just use XMLHttpRequest to dynamically hit the URL and look at the headers, but the same-origin policy stops me.

This is why I have the server proxy, which returns a JSONP callback.

When you call resolve(url, callback) the script tag is created on the fly and added to the DOM. The callback function is all handled to allow multiple calls, and then the chain unravels.

Here you can see it all in action, showing how my Twitter stream will go through and the URLs will dynamically change from their tinyurl versions to whereyouaregoing.com:

I wanted to use App Engine to host the server proxy, but unfortunately I can't work out how to do that yet. You have access to the URLFetch API to access resources from App Engine. Unfortunately for me, one of the features is that it understands redirects and just goes on through to the full resource itself, with no way to get the endpoint from the headers in the response.

It was also interesting to read Steve Gilmor talk about these services all be it in a post that is hard to actually understand ;)

Also, Simon Willison just put up a simple service on App Engine, json-time, that "exposes Python’s pytz timezone library over JSON." I think that we will see a lot of these types of mini-Web services hosted on App Engine. Taking Python utility and making services from its goodness is an obvious choice.


read more at Ajaxian
post comment

Combobox Coolness by Giva Labs [24 Jun 2008|05:21pm]
12:34 23.06.2008
Combobox Coolness by Giva Labs

The team at Giva Labs were looking for a method to show off a complex hierarchical tree of options within their software applications and while there are many options in terms of UI controls, they needed something that would be intuitive and offer both mouse and keyboard entry. The requirements were challenging:

  • Menus must resize and position themselves to stay in the viewport. Options should not show up off screen where users would need to scroll to select them.
  • Quick keyboard entry. Many users prefer keyboard entry for speed of data entry, so efficient keyboard entry is a must.
  • Must be able to handle very large complex (deep) data trees, but work equally as well with very small sets of data.
  • Easy implementation.

Taking the “homegrown” approach, they came up with a very slick hierarchical combo box which they’ve called mcDropdown. Some of the features of mcDropdown include:

  • Creates a multi-column hierarchical select UI component
  • Binds a text input field or div element to a list element (included nested lists)
  • Menus are automatically split into columns as needed
  • Menus are positioned to always stay on the screen
  • Autocomplete keyboard entry (only valid options are allowed)
  • Menu automatically scrolls into viewport when opened

Although originally designed for internal usage, Giva generously released this jQuery plugin under the Apache License. They’ve also documented the extension clearly and provide excellent examples on how to implement the control.


read more at Ajaxian
post comment

Fluid.app gets another new build [24 Jun 2008|05:21pm]
12:35 23.06.2008
Fluid.app gets another new build

Full Screen CoverFlow

Todd Ditchendorf keeps on pushing with Fluid, the Single Site Browser system that does so much more by giving you rich integration points. Ben and I demonstrated how we use Campfire as a Fluid application that ties us into Growl and more.

The latest version includes the following new features:

Single Window Browsing Mode (General Preferences). Actually this is more correctly called “TargetedLinksCreateTabs” and means that any website which attempts to spawn a new browser window will create a new tab in the current window instead. The user may still create new windows with cmd-N.

True Full Screen Browsing Mode. cmd-opt-F. (Window menu -> Toggle Full Screen Mode)

Change to Embedded SSBs. Now they can be made to obey your “Spaces Behavior” preference (appear in all or not). This is cool cuz you can set a different Embedded SSB in each Space for a different background in each. Unfortunately, this means that by default Embedded SSBs don’t work with Expose quite the way I have demonstrated. However, you can reclaim that Expose behavior by changing the Spaces Behavior setting to “Windows Appear in All Spaces”

Thumbnail Plug-in: Significantly improved load time/UI response time performance, when refreshing the current page to reload the thumbnails, the selected index is preserved, and adding built-in URL Pattern for Microsoft’s live.com search engine.

Also, I noticed a screencast that Todd did, showing TinyURL integration that gives you a context-menu to do what I just did with Endpoint, it resolves the URL for you. Very nice indeed. I was going to do a bookmarklet for it myself.


read more at Ajaxian
post comment

Photo Collages with Canvas [24 Jun 2008|05:21pm]
12:49 23.06.2008
Photo Collages with Canvas

Canvas with Flickr

Ernest Delgado is having fun experimenting with canvas. He has posted on one of his tests which involved creating a photo-table-like system.

You can visit the demo that allows you to work with some photos and export them out. You can play with adding borders, show corners for rotation, all on the fly.

It is a rich example, and Ernest explained how he did it:

Implementing this in canvas presents two main challenges: drag & drop and performance. I tried several approaches to solving these problems, and ended up using a multilayer solution which renders only the active image on the top-most canvas layer. This allows us to have drag & drop without needing to redraw every image each time one of them is dragged.

You can check out the source code for yourself.

Ernest has some other fun things that he is playing with, which I hope to feature soon.


read more at Ajaxian
post comment

CNET Updates the Clientside MooTools Plugin Repository [24 Jun 2008|05:21pm]
13:00 23.06.2008
CNET Updates the Clientside MooTools Plugin Repository

The MooTools team recently announced v1.2 of their namesake JavaScript library and hot on the heels of this release is an update to the CNET Clientside MooTools plugin repository.

CNET has a very comprehensive set of controls and widgets that complement the MooTools library that provide such functionality as carousels, slideshows, date pickers and tabs. This update brings the plugins inline with MooTools v1.2’s updated architecture as well as adds several new features and fixes.

We’ve done a fair amount of QA (with the above listed test suites) and officially support Safari, Firefox (we haven’t done much testing in FF3 just yet but don’t expect any issues), IE 6, 7, and 8. We’ve tested in Opera and have found one or two small issues that we’ll address.

The updates are available in a couple of ways including:


read more at Ajaxian
post comment

Jiffy Firebug Plugin: Fine grained calculation of performance timings [24 Jun 2008|05:21pm]
14:15 23.06.2008
Jiffy Firebug Plugin: Fine grained calculation of performance timings

Today is the kick off of the Velocity performance conference, and we are going to see a fair share of performance news over the next day or two.

To start out, Bill Scott (Rico/ex-Yahoo/now Netflix) has announced a new Firebug plugin, Jiffy that adds a new tab showing fine grained performance data. You want to know the time between the onunload of the previous page, the first rendering, time until onload, time after, and more.

This is where Jiffy-Web comes in. Jiffy-Web is a fine-grained and flexible website performance tracking and analysis suite written by Scott Ruthfield and the team at Whitepages.com.

The Firebug plugin uses that data, which it gets from the DOM JSON object, to do the visualization.

Jiffy Firebug Plugin

Bill wrote a detailed post on Measuring User Experience Performance that goes into the details behind this tool.

He goes into detail on how to measure things, and what can get in the way. For example, onunload:

The most logical place to measure the start of a request (”from Click”) is on the originating page (see A in figure above). The straighforward approach is to add a timing capture to the unload event (or onbeforeunload). More than one technique exist for persisting this measurement, but the most common way is to write the timing information (like URL, user agent, start time, etc.) to a cookie.

However, there is a downside to this methodology. If the user navigates to your home page from elsewhere (e.g., from a google search), then there will be no “start time” captured since the unload event never happened on your site. So we need a more consistent “start time”.

We address this by providing an alternate start time. We instrument a time capture at the very earliest point in the servlet that handles the request at the beginning of the response (see B in figure above). This guarantees that we will always have a start time. While it does miss the time it takes to handle the request, it ends up capturing the important part of the round trip time — from response generation outward.

There are a number of ways to save this information so that it can be passed along through the response cycle to finally be logged. You can write out a server-side cookie. You can generate JSON objects that get embedded in the page. You could even pass along parameters in the URL (though this would not be desirable for a number of reasons). The point is you will need a way to persist the data until it gets out to the generated page for logging.

Note that the absolute time captured here is in server clock time and not client clock time. There is no guarantee these values will be in sync. We will discuss how we handle this later.

He also talks about practical issues that he has found implementing this at Netflix, and when the data shows you the real truth:

Recently we fielded a different variation of our star ratings widget. While it cut the number of HTTP requests in half for large Queue pages (a good thing) it actually degraded performance. Having real time performance data let us narrow down on the culprit. This feedback loops is an excellent learning tool for performance. With our significant customer base, large number of daily page hits we can get a really reliable read on the performance our users are experiencing. As a side note, the median is the best way to summarize our measurements as it nicely takes care of the outliers (think of the widely varying bandwidths, different browser performance profiles that can all affect measurements.)


read more at Ajaxian
post comment

YSlow now has Firefox 3 support [24 Jun 2008|05:21pm]
11:46 24.06.2008
YSlow now has Firefox 3 support

Keeping in the performance vein, YSlow put a new version out in time for Firefox 3.

The new version includes:

  • Firefox 3 and Firebug 1.2 beta support
  • improved and simplified check for javascript minification
  • different coloring for inline vs. external CSS and JS (”All CSS” and “All JS” features)
  • clickable list of resources as a Table of Contents (”All CSS” and “All JS” features)
  • improved colors and presentation in the “legend” of component pies under Stats
  • fixed a bug where the same hostname with different port number was counted as a separate DNS lookup
  • misc bugfixes and style tweaks

read more at Ajaxian
post comment

Clientperf: Simple Client-Side Rails Performance [24 Jun 2008|05:21pm]
12:08 24.06.2008
Clientperf: Simple Client-Side Rails Performance

Eric Falcao has released Clientperf, a simple client-side Rails performance plugin.

The tool came about as Eric is giving a talk on “14 rules of high-performance websites in the typical rails mongrel/nginx stack, the main idea being to focus on some of the important implementation details when it comes to client-side performance optimization.”

As I was planning, I realized that there was no simple as in the we’re-all-spoiled-with-rails simple way to measure client download times in production. Now, there is clientperf. It’s just a start, but decent enough to benchmark the actual client performance impact of any optimizations you make.

How it works

It injects javascript into the page that takes a timestamp at the top of the page and at the bottom of the page. Once the browser is done downloading, evaluating and rendering all assets, clientperf makes one last image request to your server with the start time, end time and the URL. Piece of cake.

Rails Client Performance


read more at Ajaxian
post comment

Rendering performance in Canvas compared to SVG and VML [24 Jun 2008|05:21pm]
13:59 24.06.2008
Rendering performance in Canvas compared to SVG and VML

Just after I posted about Ernest’s canvas experiment with photos he put something else up that tests the performance of rendering polygons with Canvas compared to other techniques.

The demo lets you run a live test, and view saved tests, comparing the Google Maps interface, which “currently draws polygons using VML for Internet Explorer, SVG for Firefox and image retrieval for Safari and Firefox linux.”

Canvas Rendering Compare

At first the results were surprising. The canvas version was magnitudes faster. However, then they worked out that the live Google Maps version is actually doing a lot more than just drawing the polygons, that being said, a commenter had a valid point:

If we analyze the rendering time of the markup alone, both SVG and VML are not necessarily slower than canvas and canvas+excanvas.js. So the difference in performance is due to the implementation of polygons before the markup is output which the canvas implementation is skipping.

That doesn’t make the experiment invalid. You didn’t show that Canvas is faster than SVG or VML.
But you did show that it’s possible to get much better polygon performance than the current API using a more direct to the metal approach - with whatever rendering engine. And people are crying out for faster polygons.


read more at Ajaxian
post comment

KITE: Keynote’s Internet Test Environment [24 Jun 2008|05:21pm]
14:55 24.06.2008
KITE: Keynote’s Internet Test Environment

Keynote has announced KITE their “Internet Test Environment.”:

KITE is a product that is used by Keynote customers today. But at Velocity we will be announcing the KITE Early Adopter program in which Keynote is allowing anyone in the world to sign up (at http://kite.keynote.com) to work with us to put this FREE product to use. Early Adopters will have in their arsenal a really strong and sophisticated product to measure, test and diagnose the performance of Web applications and sites.

KITE is a new desktop-based test and measurement environment for recording, editing and analyzing the performance of Web sites across the Internet cloud that is intended to bridge the gap between web application developers, QA teams, performance analysts and web operations.

KITE enables Web developers, QA professionals and others, to execute rapid performance analysis and validation to measure the end user experience of next generation Web 2.0 applications that include AJAX and asynchronously downloaded content with point and click ease. Scripts can be shared as benchmarks and to perform triage among all the web application life cycle groups, including developers, QA, performance analysts and Web operations/IT Departments.

Steve Souders had a preview and gave us a few thoughts:

  • Test scripts can include taking actions based on DOM events, such as the creation of a DOM element or even the contents of a DOM element matching a specified pattern.
  • An intuitive HTTP profile is displayed in the client app.
  • Tests can be executed at five cites worldwide on the Keynote backbone.
  • It’s free! You don’t need to be a Keynote customer to use it.

KITE Tweetwheel


read more at Ajaxian
post comment

navigation
[ viewing | June 24th, 2008 ]
[ go | previous day|next day ]