The Devel!

Lightbox, Thickbox, Greybox - Ugh

I dislike the increasing (still?) trend of websites deploying a lightbox (or thickbox) effect. Not so much for the strobing visuals, but more because it is nothing but an irrelevant technique dragged over from the desktop world to the web - just for the sake of familiarity.

Modal dialog boxes are those which temporarily halt the program in the sense that the user cannot continue until the dialog has been closed ^{link »}

Modal dialogs are generally regarded as bad design solutions by usability practitioners, since they are prone to produce mode errors . ^{link »}

- from Dialog box - Wikipedia, the free encyclopedia via sharedcopy.com

The web is free flowing and has no vertical constraint. And it's good that way!

My personal preference as a developer is to use div-expansion/collapse everywhere possible, until I can't. By introducing new content in-place, and reflowing the rest of the document, a user is not required to take action just to back out. If he choose to proceed, he can interact with the new content (usually a form), or simply continue browsing, scrolling down or click elsewhere.

Even if situation calls for a lightbox-ish design, it isn't too much to ask for [as much of the] surrounding content to be pushed aside whilst showing a thickbox at the centre of the screen. You get to reduce overlap & maintain document flow at the same time.

Try it, click on the Wikipedia quote above. Though the right columns of this blog is obscured by virtue of their floats, the content of this entry will remain in full view.

"Go away or I will replace you with a very small shell script" v2

 

Using a little bit of artificial intelligence, a computer program has been created that mimics the thought process of someone who would be responsible for doing such a study ^{link »}

It will then open a Word document and export the information into Word, just like a real author would out of their minds, so to speak, or spreadsheets ^{link »}

 

- from He wrote 200,000 books (but computers did some of the work) | Tech News on ZDNet via sharedcopy.com

Reminds me of this t-shirt.

Poor Man's Trends

I've just released my Poorman's Trends Rails plugin as an excuse to do something with my GitHub account. Much like its distant cousin, Poor Man's CRM, this software aims to be plug-and-play, self-sufficient and useful enough to make sense of existing data.

3 Steps to get it:

1. Install into vendor/plugins with
   ./script/plugin install git://github.com/choonkeat/poormans-trends.git
2. Add 1 line into your existing controller, e.g. admin_controller.rb
include Poormans::Trends
3. Point your browser to http://yourserver/admin/poormans_trends and Viola!

You should see a simple page greeting you, like in this screenshot:

Pick a Model class, and you should see some pretty graphs making their AJAXy entrance:

What's happening is that a few interesting columns are picked up from the Model's table and a few popular values are picked up from those columns. A count is done for all of them, divided up by weeks and spitted out as HTML tables. These tables are then turned into pretty charts using the nice HTML-table-to-canvas javascript library from Filament Group.

Without configuration nor knowledge of what your application does, is there any hope that it can make sense?

That's where the "picking of interesting columns" come in. Assuming zero domain knowledge of your application, I'd say the foreign keys are most interesting (in Rails convention, any column ending with "_id"), together with sub-classes ("type" and any columns ending with "_type"). The time aspect relies on the Rails convention of using "created_at".

The end result actually looks pretty good for something requiring no configuration! :-)

Ruby on Rails - Sharing Session for Singapore PHP User Group

Here are my slides to yesterday's talk. Thanks to all who attended, and Michael Cheng and gang for organizing it! I tried to make it more constructive instead of anything X vs Y

| View | Upload your own

No Template is the Best Template

Update 28 Sept 2008: checkout the working code at github repository, and a short video demo on vimeo.

I've been swimming in jQuery-bliss for a few months now - thanks Divya & Tien Dung for introducing me to it! I'm yearning to do it on the server-side.

But to enjoy the jQuery-bliss (aka "no special case pattern"), I'd need to be in a problem where I have a document to sculpt. My recent toys (cleartz and tryanslator.. and actually most Javascript apps?) for example, are built the via sculpting way: a very basic HTML structure, then Javascript comes in to flesh out its form and introduce function. A very pleasant development experience overall.

Aside: Back in Java days, I remember I used to hate XML DOM parsing a lot. NodeList? hasChildNodes? But XPath came and suddenly pain became pleasure.

On the server-side, Model (of MVC) stuff seems to fit (maybe sqlQuery( "people[gender='Male']" ).update({ salutation: "mister" }) ?) but ActiveRecord (& Ambition?) is already nice to work with, and I have no major problems there.

My gripe is with the View (and consequently the Controller). Views are generally powered by some templating system. These gnarly things are just a pile of bastardized HTML files good for neither designers nor developers. The best templating systems are only best because you'll choke yourself slower by using them. Anyways, pretend you agree that templates == bad.

Wouldn't it be nice if your web framework 1) loads up pure HTML as a document object, 2) you modify them in the jQuery-bliss way in your Controller, then finally 3) the resulting HTML is spit back to the client browser?

No nasty <? %> } or custom syntax for dynamic content, or loops, or if-else. Just pure HTML with dummy data baked in.

# display_user.html
<span class="tel">
 <span class="type">home</span>:
 <span class="value">+1.415.555.1212</span>
</span>

Then modify them before serving:

# inside controller
def display_user(doc)
  user = User.find( params[:user_id] ) 
  (doc/".tel .value").inner_html = user.phone_number
  return doc.to_html
end 

And because it is an in-memory tree instead of some opaque String, you can do everything programatically around the document: looping, if-else, removing nodes, replacing sub menus, partials? Furthermore, when you need to do dynamic behaviors on the client-side, the programming paradigm is exactly the same!

Designers can be happy churning out the HTML/CSS in whatever tool they like (be it Dreamweaver or notepad.exe), and developers just poke their DOM.

What say you?

PS: Oh well, I guess what I'm trying to say is maybe we should not waste time finding better ways of constructing webpages (i.e. templating systems) when we could approach the problem as "modifying a document" - which is much cleaner and (with the right API) much easier.

Tryanslator2!

Finally! Google Translate gets API-ed. I was glad to see a "detect" method provided - meaning you tell what language a piece of text is in. Weird that the actual Google Translate service still doesn't use it to improve their form defaults.

So I gave my old "Tryanslator" (try and translate) an update, and a new home:

Few notes

• No asking of "Translate From?" - if you don't know how to read it, you probably don't know what it is written in.
• Language to "Translate to" defaults to user's browser language.
• Language options are written in their own language (duh).
• Google provides a rigid list of "translation pair" (i.e. English to Chinese, but not Chinese to Spanish). Tryanslator2 does an extra bounce to Google's server, using English as the mid-way to obtain a any-to-any translation.
• No submit button, just type and wait.
• All important text on the page auto-translate themselves to the reader's language, including "Please wait..." :-)

Give it a try!

Information overload? Read Later!

There are so many things to read on the web - tech news, links from friends and blogs - and I’d open them, “hmm looks interesting, will read them later” but never could find time to do so in day.

grokked: hi, do you know any web service that can add arbitary web pages to an RSS feed? like i have a whole bunch of pages open in my browser and i want to just add them into google reader for review later
me: maybe can email urself the page or soemthing.. or maybe delicious them. that’s also an RSS
grokked: i was thinking more of the actual page appearing within google reader… this only give me urls
me: hmmm

And hence an experimental feature was quietly launched: The “read later” bookmarklet - Click on the bookmarklet and SharedCopy will stash the page somewhere for you to read later, in your favourite feed reader:

Try it out! You can find your own “read later” feed at the bottom of your account “Settings” page :-)

A Clearer Layout For Viewing Timezones

After putting up a job post for SharedCopy at the 37signals job board, I've gotten quite a fair bit of response and in turn, had to propose timings for Skype calls very often.

I hate timezones.

For my purpose (i.e. propose a time where all parties are at least awake!) I figure I'd just need a simple view of everybody's clock over a period of 1 day - which can be done in Ruby:

24.times do |hh|
  puts [+8, -7, -5].collect {|tz| Time.now.utc + hh + (tz * 3600) }.inspect
end

Functional, but a chore to run and the output is still a mess to pick out information from. Then I did a proper one in Javascript, in case I ever need to use it while on the move... ;-)

[Update] A few notes:

• The darker/shaded areas are ZZZ hours - so just look for horizontals where the "whites" align.
• Your own timezone should automatically show up - so most usage is only 1 click.
• URL changes as you add timezones - so you can even bookmark the page and remember a standard set of timezones.
• Day-of-week is subtly indicated just so you can tell if its the same day or otherwise.
• Name of location is used instead of numeric offset (and auto resized to fit) for a more humane experience

 

Try it out at http://dev.choonkeat.com/js/cleartz/index

Microhoo

There's a lot of opinions on Microsoft's decision to bid for Yahoo.. but Fake Steve, in his usual over the top commentary style, blabbered one that saw real blood:

It's like taking the two guys who finished second and third in a 100-yard dash and tying their legs together and asking for a rematch, believing that now they'll run faster. ^{link »}

He's not really a tech guy. He has a mindset that was formed in Detroit, where he grew up. He's a Big Three automaker kind of guy. And this is a Big Three move. It's Ford buying Jaguar and Land Rover and Volvo because they can't think of anything else to do. ^{link »}

Ballmer said he loved when his rivals merged, because whenever the also-rans in any market start teaming up they might as well be waving a white flag. Because it's over. You've beaten them. You've driven them to despair. They haven't been able to beat you on their own; there's no way they'll do it together. Then he told me that line about the hundred-yard dash. I'll never forget it. But I guess he has. ^{link »}

- from The Secret Diary of Steve Jobs: Monkey Boy's three-legged race via sharedcopy.com

Time to buy Google shares.

Singapore-RB meetup: OAuth4R Presentation PDF

Here are my slides for the OAuth and OAuth4R presentation I made this evening. Thanks folks.

| View | Upload your own