Category Archives: tips

Lessons from Teachersday.sg

There was a little apprehension when we first proposed the concept that all messages to teachers be in exactly six words. Some of us were afraid that the additional obstacle would prevent the younger students from writing in. They were valid concerns.

The concerns proved unfounded. Primary school students made up the majority of posters by far. This is consistent with Teachersday.sg 2006 when we had a free text box for messages. Primary school students are generally more expressive of their gratitude. Sure, many of their 6 word messages weren’t witty or poetic and many contained typographical and spelling errors, but the spirit of celebrating the work of our teachers was there.

Lesson number 1: Don’t underestimate your users.

The teachersday.sg form was created from scratch. We worked with web developer Deepak Jois who cooked it up in Ruby on Rails. After a month online and spam-free, we received our first boatload of nonsense input that contained hyperlinks. The spam bots had arrived. It didn’t affect us as there is a moderation queue all messages go through, but we are now more aware of the reach of spammers.

Over lunch in San Francisco last month, I spoke with Tantek Çelik about how the adoption of microformats made online information more easily harvested by spammers. His argument was that the spam industry already had all the tools to identify online content. I was skeptical at first, but now I’m pretty convinced that the spam industry is extremely savvy and active in seeking out places to insert spam and harvest information.

Lesson number 2: They are out there. We need to be a little more watchful about our online input mechanisms.

It’s been a fruitful project for us. From the feedback we’ve gathered, it’s worked out for students and teachers as well.

Inserting tick marks (or checks if you’re American)

The HTML entity for a tick (or check, but we’ll call it a tick since we’re using British English) is &10003; which generates &10003; for those of you using a browser outside of the immensely popular, but oh-so-last-millennium Internet Explorer 6. IE6 renders a placeholder box as it does not recognise the entity.

What it does recognise is that the letter “P” in Wingdings 2, which also gives us a nice tick: P for your IE6 users. Modern browsers like Firefox 3 will probably not render wingdings, even if installed on the computer.

So we have conundrum, and it seems the only way is to produce forked code, using conditional comments.

Doogal Bell has a good blog post on inserting tick marks, but I feel his use of the input field to generate a tick isn’t particularly semantic, so I’m sticking with Wingdings for the IE6 crowd.

So ultimately we have:

<![if !IE]>✓<![endif]>
<!--[if gt IE 6]>✓<![endif]-->
<!--[if lt IE 7]><div style="font:bold 1.2em 'wingdings 2'; text-align: center;">P</div><![endif]-->

If you’re not using an IE browser, feed the proper HTML entity &10003;. If you’re using an IE version greater than IE6, also feed the proper HTML entity. If you’re using an IE version less than 7, feed a div with inline CSS specifying Wingdings 2 as the default font, bold for a little extra weight and aligned centre. Yes I know the inline CSS is as evil as font tags, but if I’m going to be specifying the wingdings font, I may as well format it right.

Note to self: I should apply the same text formatting on the HTML entities, but in the system css files, targeting content inside table cells.

Capitalising the Necessary

It’s probably quite ubiquitous, but quite a number of government webpages use ALL CAPS to denote something important. Like someone’s name, or the title to a press release.

I recently had to recode a list of more than 300 names, which was given to me in capital letters. I could get someone else to retype those names line by line, but I couldn’t even bear the thought of giving this job to a sentient being of any sort.

Never thought I’d be saying this, but thank goodness Microsoft Word does these nitty gritty things like changing the format of all text. So I hit the shortcut key, do some major search and replacing to htmlise the content. Tadah, I have the page.

Rats, didn’t take into account the fact that some of the more illustrious names on the list have acronyms behind them, denoting qualifications or summat. Gotta be careful when using a sledgehammer I guess.