Friday, June 20th, 2008
Category: The Ajax Experience
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!
Category: 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):
JAVASCRIPT:
-
-
// Haskell:
-
// data Color = Red | Green | Blue | Yellow
-
// data Point = Pt Float Float Color
-
Color = Data(function() ({ Red: {}, Green: {}, Blue: {}, Yellow: {} }))
-
Point = Data(function() ({ Pt: { x: Number, y: Number, color: Color } }))
-
-
// Haskell:
-
// data Attrs n v = Attr n v
-
// data Node n v = Elem n (List (Attrs n v)) (List (Node n v)) | Text v
-
Attrs = Data(function(_, n, v) ({ Attr: {name: n, value: v} }))
-
Node = Data(function(node, n, v) ({
-
Elem: { name: n, attributes: List(Attrs(n, v)), childNodes: List(node) },
-
Text: v
-
}))
-
Now you have the types, you can do things to them:
JAVASCRIPT:
-
-
// With unfold you can easily generate algebraic data structures from other data. The following example shows how to generate a decreasing list of numbers.
-
var counter = List.unfold(function(n, c) n ? c.Cons(n, n - 1) : c.Nil)
-
-
// Fold is the reverse of unfold. It destructs data into a return value. Here is an example that multiplies a list of numbers.
-
var prod = List.fold({ Nil: 1, Cons: function(h, t) h * t })
-
-
// With map you provide a function for each type parameter. Here are 2 examples using the XML data types
-
var addPrefix = Node.map(function (name) "x:" + name, id)
-
var normalizeSpace = Node.map(id, function (value) value.replace(/^\s+|\s+$/g, ""))
-
And, a lot more.
Category: Ajax, JavaScript, 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:
JAVASCRIPT:
-
tree1.init($("#nested"), {
-
data : "nested.xml",
-
xsl : "nested.xsl",
-
languages : [ "en", "bg" ],
-
// other stuff omitted
-
});
and then in this case each node in the XML tree fed to the component specifies its language:
XML:
-
-
<name lang="bg" icon="images/f.png">Начало</name>
-
<name lang="en" icon="images/f.png">Home</name>
-
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.
Category: Fun
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?!!
Thursday, June 19th, 2008
Category: Prototype, Podcast
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.
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.
Category: JavaScript, Canvas
John Resig linked to Aza Raskin's Algorithm Ink which is an implementation of the Context Free Art project in JavaScript using Canvas.
You can draw immediately with clicks, browse other art, and save your work. You can also edit the code to tweak it:
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 }
}
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 ;)
Category: Examples, MooTools
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.
Category: Examples, jQuery, Widgets, Social Networks
Joining with the Web 2.0 "go-meta" business model that's so popular these days, iWidgets provides a service that lets you build widgets once and deploy them to various popular widget APIs and platforms.
At the heart of iWidgets is a "PowerPoint-like" widget builder that takes strong design cues from Yahoo! Pipes, but as Peter Yared (CEO of iWidgets) says:
then again Pipes looks a lot like Prograph (the original dataflow programming company, where I worked from 1992-1995)
The site transforms the widget you build into:
a native FBML or GoogleGadget/OpenSocial, which are two completely different architectures (serverside vs. clientside), and then call the destination-specific API's for things like persistence whenever possible.
The builder was constructed using jQuery and like Pipes renders the connection lines using <canvas>. Peter shared some of the back story behind building the application:
I wrote the initial builder in [another framework] and found it obtuse. After spending literally a week trying to turn the date picker into a color picker, I threw in the towel. A friend of mine turned me on to jQuery and I fell in love with how clean and fast it was, the way it separates the HTML from JavaScript is beautiful. So I rewrote the builder we had at the time in jQuery in a two week coding session! Soon after that I got funding from Opus Capital, and when I looked to hire people, I found 3 out of 4 of our engineers through the jQuery mailing list. It's funny how things like that work out; I ended up finding total rockstars because they were playing with a cool new library.
Peter also shared some details on the overall development process:
It took us 10 months to build the site, we have had one guy (Richard Hensel) full time on the builder UI with another guy (Jeremy Stanton) on it about 1/3 time, with the rest of his time on the overall site doing the wizards and getting things like the %#$# back button to work. Then there are two guys working on the backend, one on FBML and the other on Gadget/OpenSocial, and we just added a junior AJAX guy. We contribute back where we can, for example Jeremy contributed to the Selectable in jQuery UI. The iWidgets site itself is completely AJAX, data from the server is sent as JSON, and page fragments are rendered with Wicket. We persist the widgets you build as JSON and then transform them on the server into native Facebook, MySpace, iGoogle, etc.
The team has some future plans building on top of an already very cool site:
We have a bunch of features we are rolling out, such as calling JSON and piping the results into different components, repeating table, paging, cut/copy/paste, z-order control, live dataflows in the builder, a background process at amazon that sends out notifications like "joe just shot 2 over par at pebble beach" to newsfeeds to drive virality, more platforms such as the iPhone, etc.
I wonder if this should somehow integrate with Yahoo Widgets, Apple's Dashboard, and other desktop widget platforms... maybe emit a bundle you can download and install into these services?
Category: Standards
Some interesting news in the standards world. First, we have an updated HTML 5 working draft.
You can read the notes from what is updated or a visual diff which includes very low level details such as:
- API for the canvas element has been cleaned up. Text support has been added.
- globalStorage is now restricted to the same-origin policy and renamed to localStorage. Related event dispatching has been clarified.
- postMessage() API changed. Only the origin of the message is exposed, no longer the URI. It also requires a second argument that indicates the origin of the target document.
- Drag and drop API has got clarification. The dataTransfer object now has a types attribute indicating the type of data being transferred.
- The m element is now called mark.
- Server-sent events has changed and gotten clarification. It uses a new format so that older implementations are not broken.
- The figure element no longer requires a caption.
- The ol element has a new reversed attribute.
We also see that a new Acid4 is germinating:
Acid4 will be primarily a visual test, not especially scripted. Focus
will probably be on SVG, CSS, and mixing namespaces, probably with the
main document being an XML file with an SVG root element.
Lessons Learned
- don't include minor bugs
- don't ask for specific tests, write the tests yourself
- request feedback from early on (t=0) in the cycle, both publically and directly to specific people
- ask for feedback about what things to test
- don't actually show the test early in the cycle, to prevent people from targetting it while people are discussing what to test
- no performance stuff as part of the test (though as a separate competition is ok if you get everyone to sign off on the test being fair)
- make it have a pretty picture
Wednesday, June 18th, 2008
Category: Showcase, jQuery
Our Signal takes Digg, Reddit, Delicious, and Hacker News and creates a full page cloud visualization using jQuery.
The size of the box reflects the popularity, and the color lets you know the acceleration of that popularity. If the color is warm, it is on the rise, and vice versa for cool colors.
I like seeing alternative visualizations, but I have to admit I am not a huge fan of tag cloud style views. You?
Category: JavaScript, Canvas
What a great title. It is an entry in the JavaScript 20 liners call out:
JAVASCRIPT:
-
-
// chain( func )
-
// make func chainable by making it return itsReturnValue||this
-
function chain( func )
-
{
-
return function()
-
{
-
return func.apply( this, arguments )||this;
-
}
-
}
-
-
-
// initialize everything
-
onload = function()
-
{
-
// initialize the contexts and the fractal
-
window.fx =
-
{
-
'barCtx': document.getElementById('bar' ).getContext('2d'),
-
'fooCtx': document.getElementById('foo' ).getContext('2d'),
-
'logicCtx': document.getElementById('logic' ).getContext('2d'),
-
'renderCtx': document.getElementById('render').getContext('2d'),
-
'fractal': [0,0,0,0,2,0,0,0,0],
-
CanvasRenderingContext2D: (window.CanvasRenderingContext2D?CanvasRenderingContext2D.prototype:document.getElementById('bar' ).getContext('2d').__proto__)
-
}
-
-
// set( what, to )
-
// sets a property of the CanvasRenderingContext2D, making such operation chainable
-
window.fx.CanvasRenderingContext2D.set = function( what, to )
-
{
-
this[what] = to;
-
}
-
-
// switchTo( context )
-
// return another CanvasRenderingContext2D, making such operation chainable
-
window.fx.CanvasRenderingContext2D.switchTo = function( context )
-
{
-
return context;
-
}
-
-
// chain a bunch of CanvasRenderingContext2D methods
-
for( chainThat in {set:1,switchTo:1,clearRect:1,save:1,translate:1,rotate:1,drawImage:1,scale:1,restore:1,fillRect:1,moveTo:1,lineTo:1,beginPath:1,closePath:1,stroke:1,fill:1,arc:1} )
-
{
-
window.fx.CanvasRenderingContext2D[chainThat] = chain( window.fx.CanvasRenderingContext2D[chainThat] );
-
}
-
-
// let's get the party started
-
render();
-
}
-
-
-
// render()
-
function render()
-
{
-
// the time is now
-
var now = new Date().getTime();
-
-
// mutate the outer cells of the rug
-
fx
-
.
