Category Archives: Javascript

Tarpo

Posted on by

A huge class of applications are nothing more than a bunch of relational database tables with a simple Create Read Update Delete (CRUD) user interface. More and more these applications are being built as web-apps, eg. the user interface is HTML/CSS/Javascript running inside a users’ browser, and the backend is a simple server-side layer (Perl/PHP/Ruby/J2EE/..) controlling access to an online database. This architecture is becoming increasingly easy to implement with the advent of server-side web/application frameworks (Catalyst/Rails/Spring) and database Object Relational Mappers (DBIx::Class/ActiveRecord/Hibernate,..) that remove most of the tedium, along with awesome Javascript libraries in the front-end (ExtJS/jQuery/Dojo/..) that let you make the user interface much more engaging and adaptable.

What happens, however, when your intended users have no internet access? I was recently faced with that exact problem: My Dad (Dr Ted Donelan) runs a pro bono dog health program in Maningrida, a self-governing aboriginal community in Arnhem Land (500km east of Darwin) where, unless you want to pay through the teeth for that Telstra NextG internet rubbish, there’s no easy access to the internet. And certainly no way of logging into a website while you’re riding around from house to house in a ute or carrying out surgery on an outdoor trestle table underneath the local grog-shelter. Dr Ted wanted a way to record the statistical information that he collects (dog body conditions, mange scores, fleas, ticks, etc..) along with his formal veterinary records of surgical cases, medical cases, etc.. All of which can be neatly captured in a handful of relational tables (attested by the fact that previously he had been recording his data in hand-written tables, later to be transferred to Excel). I suppose I could have stepped back into the C#/Java world and implemented a stand-alone app to solve the problem, but I’m not familiar enough with any frameworks in those languages to whip up something quickly. And that was the point, I only had a small amount of time to come up with a solution. And what I really wanted was a way to build him a stand-alone app using my existing HTML/Javascript/CSS-fu..

Cue Adobe AIR.. a desktop framework that lets you build traditional dektop apps using web technologies. Now I’m not the biggest fan of proprietary technology (Adobe Flash being a prime example) since it goes against the grain of the Open Web, but there’s really no open-source alternatives at the moment.

The first really awesome AIR app I saw was ExtJS creator Jack Slockum’s “Simple Tasks“. Check out the screen-shots and you’ll see why I was excited: here was a desktop application with an embedded (SQLite) database running pure HTML/CSS/Javascript. And not just any Javascript either. ExtJS shines most when used to create windows application-style interfaces, and as such it’s the perfect library to use in an AIR app when you really are building a desktop application.

Simple Tasks is released under GPL v3, so I decided to base my code on Jack’s. It was the right decision. With no prior experience with AIR it took less than a day to have a working prototype, and by working I mean a full database implementation, an editable data grid and an Add/Edit form for individual rows, all with the trademark ExtJS polish. That’s ridiculously fast.

After about 4 days with lots of feedback from Dr. Ted we had a finished app, named Tarpo, complete with polished input forms, reporting, backup, CSV/XML export, …


I’ll be releasing Tarpo under GPL v3. Until then I’ve got a little page where you can install it straight off the web and have a play. Dr. Ted is heading up to Maningrida next week so I’m excited to see how Tarpo goes on her first test-run. If everything works well we’ll make her available to other Vets running similar programs in other indigenous communities. One cool follow-on from this will be that vets running AMRRIC-endorsed programs could use Tarpo to submit their activity reports direct to the AMRRIC website (which I recently developed).

Andy (also of SDH) is whipping up a Tarpo logo for me, which I’ll post up here as soon as he’s finished inking it!

Multiple Columns Bookmarklet

Posted on by

Reading large chunks of text on a widescreen monitor can be a real pain if your eyes have to read across long horizontal lines. That’s why newspapers print articles in columns! Ideally, websites should too, at least when you’re trying to view them on a large monitor. Obviously you can’t expect webpage designers to predict the size of your screen, but if you’re using Firefox you can use this simple bookmarklet I wrote to reformat a selection of text (or the whole page) into multiple columns yourself.

How to use it the Multiple Columns Bookmarklet:
This is the link to my Multiple Columns Bookmarklet.

For starters, try it out yourself on this page! Select a few words in the first paragraph of this page and click the bookmarklet link. You should see it magically reformat into multiple columns 200px wide.

Now select two continuous paragraphs and click the bookmarklet link. You should see the entire article reformatted into easy to read columns. Cool huh?

If you want to use the bookmarklet on other pages, bookmark it now. When you’re on a page that you want to reformat select the chunk of text and click on the bookmarklet. voila!

If you select text a single paragraph, only that paragraph will be turned into columns. If you select multiple paragraphs, the containing DOM element will be reformated (this isn’t perfect but it usually does what you want). If no text is selected when you launch the bookmarklet, the entire page will be turned into multiple columns (that won’t look great on my blog, but it’s handy on pages with minimal styling)

If you add a keyword such as col to your bookmarklet link (Right Click > Properties), then you can launch the bookmarklet from the location bar by typing col rather than clicking on the link.

Finally, if you provide an argument of max, eg. col max then the maximum height of the columns will be set to the size of your web browser window. This is really handy if you’re viewing a long document and you don’t want the columns to scroll vertically for miles and miles (by setting the column height the columns will instead continue horizonally, just like a large-format newspaper).

In case you’re wondering, the bookmarklet is only intended for Firefox because none of the other browsers have implemented any column-related CSS features.