Canvas UI for MooTools

Finally, a decent implementation of panels using MooTools, which means I can finish my migration from YUI+Scriptaculous to MooTools some time this year if time allows.

2 things you have to have

I’m back after a bit of a hiatus with vacation, Xmas and all, so lets get cranking, shall we?

I’ve been meaning to post about 2 tools that I’ve become addicted to over the past little while, so others could get high on them with me. Chances are you already know about both, but if you don’t you can thank me in the comments :)

Firebug (http://www.getfirebug.com)

Screenshots won’t do it justice, you *have* to check it out. Here’s a short (and incomplete) list of things you can do with it,

• Inspect and edit HTML (live!)
• Inspect and edit CSS (yes, live as well)
• Debug and profile JavaScript (you’ll use this a lot, admit it)
• Monitor network activity (much much better than Google’s page analyzer at that)
• … the list goes on, you have to see it to believe it!

I should point out, that even though its free (as in beer), please chip in with a small donation to ensure continuous improvement (I’m not at the receiving end of it, by the way, just spreading the word), this tool can really change the way you do web development (for the better).

Selenium (http://www.openqa.org/selenium)

SUnit for your web applications that runs directly in the browser(s), need I say more? ;)

Optimizing page load times

Here’s a very useful (although somewhat technical) study of page load times and factors that may influence them, all more relevant in light of skyrocketing (mis)use of Ajax on the client side.

It is widely accepted that fast-loading pages improve the user experience. In recent years, many sites have started using AJAX techniques to reduce latency. Rather than round-trip through the server retrieving a completely new page with every click, often the browser can either alter the layout of the page instantly or fetch a small amount of HTML, XML, or javascript from the server and alter the existing page. In either case, this significantly decreases the amount of time between a user click and the browser finishing rendering the new content.

However, for many sites that reference dozens of external objects, the majority of the page load time is spent in separate HTTP requests for images, javascript, and stylesheets. AJAX probably could help, but speeding up or eliminating these separate HTTP requests might help more, yet there isn’t a common body of knowledge about how to do so.

Hat’s off to Aaron Hopkins.

The Future of Web Apps

This could be a fun summit to attend if you want to get a perspective on where the web development is at currently and where it’s headed,

Two-day conference focusing on the development technology you’ll be using tomorrow

This is an exceptional opportunity to discover how the web’s most successful sites and applications were built, plus you’ll get expert practical advice from the best in the business on creating your own web app. Whether you’re a developer, business owner or entrepreneur, join us for this exclusive two-day audience with the biggest names in web development.

Check out the official website to see the (impressive) list of speakers.

Seaside/VisualWorks updated

As you can see by the lack of activity I’ve been pretty busy here working away on our online application. Nonetheless, I have just published updated versions of Seaside, SeasideAsync and SeasideScriptaculous to the Cincom Public Repository. Since this is my first stab at the port (many thanks to Michel Bany for providing enough instructions) please let me know if you find any problems, I’ve given it a bit of stress-testing with our application and things seem to be looking up nicely.

Seaside 2.6b1.58.0

• Small fix for button in application editor
• Changes to WAListener
  • made it work in 3.8, what probably breaks 3.7 comaptiblitly
  • improved the #startUp and #tearDown behavior
  • properly close the socket in case of time-out
• Toolbar’s “New Session” fix for cookies (Thanks to Boris Popov)
• Moved onKeyDown shortcut handler to where it belongs
• Send back an internal error if the session timed-out and the request was coming from the ajax world
• Two changes I’ve made to get our application to pass as XHTML 1.0 Strict, both don’t seem to affect the behavior or rendering, so it might be good to just include them at some point (Boris Popov)
• Three changes I’ve made to get WAListener more reliable, though still some more work is needed (Lukas Renggli)
• Add a comment to WAAnchorTag
• A fix to WADateInput from Boris Popov in his quest to XHTML Strict
• Similar fix to WATimeInput
• Corresponding tests updated
• Add WADispatcher>>removeEntryPointAt:
• Rename argument in WADispatcher>>removeEntryPoint:
• Add convenience methods to access preferences directly from components. No need to use: ’self session application preferenceAt:’ anymore.
• Moved counter to new rendering api. We should stop teaching the old api and start teaching the new one. Time and again people ask about the new api on the mailinglist. Examples using the old api are partially responsible for this.
• Removed seaside logo from counter, it should only be a minimal example
• Removed a lot of unneeded #with: in canvas tests
• Categorized methods
• Added #on:of: in three places where it makes sense, had to copy paste, traits would help a lot but this is no news
• Changed tests to make use of #on:of:
• Replaced ( to: ) do: with #to:do:
• Added missing super sends
• Changed assignments where I stumbeled upon them
• As you can guess by the changelog, a peer review would be a good idea

SeasideAsync 2.6b1.41.0

• Ensure lower case for all application and folder names
• Tidy #addMetaContentType

SeasideScriptaculous 2.6b1.122.0

• Added a lightbox test
• Added a couple of conveniance methods
• Repackaged after accidental inclusion into package
• Marked SUAllTests as a root component so it’ll show up in seasides config interface properly.
• Renamed test subdirectory from ‘Test’ to ‘test’
• Started with some simple components
• Ajax accordion and tab panel are fully working
• Fixed a rendering problem when using #on:of: for callbacks
• Improved WATag>>script:
• Allow to assign to a local/global variable
• Tried to manually merge the XHTML fixes from Boris Popov
• Properly convert instances of Character to Javascript

Ajax requests in expired sessions?

I found an interesting issue yesterday with my Ajax’y component used for all kinds of interesting reports here. The table containing the results includes an actions panel at the bottom, which gets updated via an Ajax request every time dataset’s selection changes so that various action buttons could re-evaluate their state. The updater is created via,

(html updater)
 id: 'actionpanel';
 triggerForm: fid;
 onSuccess: (SUStream on: '...javascript...');
 callback: [:r | r render: self actionpanel];
 yourself

This works great, but only so long as the session is not stale. As soon as session expires, subsequent Ajax request will result in a whole new copy of the home page being stuffed into the poor little ‘actionpanel’ div, and that’s not something I want to see. I haven’t given this a whole lot of thought yet as I have more pressing issues to attend to, but I’m sure I won’t be able to sleep as well knowing this is still not working quite right.

Here’s a brand new page – nothing selected,

Let’s select an item and have the action panel update itself,

Now, we’ll manually expire the session from the image and try to unselect the item to fetch a new version of the action panel,

Ooppss…