(Originally posted 2010-01-04.)
First of all, a happy and prosperous 2010 to one and all.
As with most vacations it’s been a time partially filled with playing with technology and learning stuff there isn’t (legitimate) time to learn about during the rest of the year.
So, lest the rest of this post make you think I ONLY play with web stuff 🙂 I present to you a short list of REALLY good other things from the past few weeks:
- Avatar in 3D (as the great Doctor Brian May recommended).
- Uncharted 2 (on the PS3).
- Beatles Rock Band (also on the PS3).
- Neil Gaiman’s "American Gods".
- The company of friends and family.
Now onto the "geek stuff": 🙂
My Performance Management tooling (standing on the shoulders of giants, as it happens) produces reports and charts as Bookmaster and GIFs, respectively. (Actually the GIF bit I built mid-year 2009.)
Some time in late 2009 I installed Apache on my Thinkpad – with PHP support. That enabled me to treat my laptop as an automation platform. I also installed Dojo and B2H. (B2H is a NICE but old piece of REXX that takes Bookmaster output and converts it into HTML.)
So this PHP code allows me to download all the GIFs and Bookmaster source and display it on my laptop.
In November I wrote some PHP code to selectively bundle the GIFs into a zip file – to make it easier to share them with colleagues and customers. (If YOU get one from me I hope you can readily unpack and view its contents.)
In mid-December I took this zip code and modified it to create OpenOffice ODP files from selected GIFs. Although legitimate ODP files OpenOffice couldn’t read them – but KOffice on Linux COULD. And when written out again by KOffice OpenOffice was then able to read them. (I’ve not got to the bottom of this but it’s something to do with some assumptions OpenOffice makes about XML.)
Vacation Learning and Developing
I think it’s fair to say I’ve been using "interstitial" time to play with stuff and get things built.
Learning How To Hack The DOM with jQuery and Dojo
The first thing I did was to install jQuery and buy the excellent O’Reilly "jQuery Cookbook". This introduced me to a better way of parsing HTML / XML. It uses CSS selectors as a query mechanism – which is REALLY nice.
The second thing I did was to see if Dojo could do something similar. It turns out that dojo.query is pretty similar and converging on jQuery’s capabilities. (1.4 adds some more.) If you’re wedded to Dojo (as I am) I recommend you look at dojo.query and (related) NodeList support. It’ll make "hacking the DOM" much easier. (And later developments built on this.)
(If you’re looking for a good introduction to Dojo try Matthew Russell’s “Dojo: The Definitive Guide”, also published by O’Reilly. It could do with updating for the next release but it’s perfectly fine for 1.4.)
Using PHP To Simplify Dojo Development
One problem I wanted to solve was to prettify the HTML that B2H generates. It’s at the 3.2 level and is really not at all "structural" so CSS styling would prove to be a bear. (It has no class or id attributes, for example.)
Dojo can automate (with xhrGet) the asynchronous loading of files from the server. So the first thing I taught my PHP code how to do was to load some HTML and then to insert it (via innerHTML) below a specified element in the web page. (At first I used "id" as the anchor but then used dojo.query (see above) to allow the HTML to be injected ANYWHERE in the page.)
(Because not all the data I want to display in a page is HTML I added a "preprocess the loaded file" capability. So, for example I can now take a newline-separated list of names and wrap each name in an "option" tag.)
So, I can now pull in HTML from a side file. The point is to be able to work on it…
Injecting a CSS link was easy. It’s just a static “link” tag.
But some parts of the dragged-in HTML aren’t really distinquishable from other parts. So I can’t style them differently. So I wrote some more code to be able to post-process the injected HTML (once it’s part of the page). So, for example, a table description acquired a “tdesc” class name – and so CSS selectors can work with that. To do the post-processing I leaned heavily on Dojo’s NodeList capability – as it made the coding MUCH easier.
So now, if I show you an HTML report based on your data it should look MUCH prettier. (I’ve been showing customers their machines and LPARs as pretty ugly HTML.)
Dojo TabContainer Enhancements in 1.4
Some time over the vacation I installed Dojo 1.4 and converted from using 1.3.2.
I hadn’t expected this but the dijit.TabContainer widget that I was already using to display GIFs got enhanced in 1.4…
- Instead of multiple rows of tabs you (by default) now have one – with a drop-down list to display all the tab titles. (Amongst other things this means a PREDICATABLE amount of screen real-estate taken up by the tabs.)
- Scroll forwards and backwards buttons to allow you to page amongst the tabs. (Actually left and right arrow keys allow scrolling as well.)
Altogether it’s a much slicker design. I’ve opened a couple of enhancement tickets:
- Support first-character navigation of drop-down tab list in TabContainer.
- TabContainer: support keyboard selection of first / last tab in TabContainer.
These really are “fit and finish” items but they would help with a11y (Accessibility) as well. (I’ve made contact (via Twitter) with IBM’s Dojo a11y advocate and she’s aware of these two tickets.)
This has been a long and winding blog post. But I think it illustrates one thing: Through small incremental enhancements (done in “interstitial time”) you can make quite large improvements in code. But then, this IS hobbyist code.
I’d also like to think I learnt a lot along the way.
Now to go explain to my manager why I’d like (as a mainframe performance guy) to become a contributor to the Dojo code base. 🙂