Using JQuery and QTip to Make an Image Map with Tooltips

I’m trying to meet everyone at the office and thought about marking down in an office plan the people already met, what they do, etc. This turned out to be very easy to do with JQuery and QTip. Here’s how:

First of take the image you want to use and head down to this site to produce the image map automatically (that’s one handy tool I tell you):

http://www.maschek.hu/imagemap/imgmap

After that you can use the ‘alt’ attribute to put the tooltip text. The end result looks like this, some of the spaces are still empty so you’ll have to find the ones that aren’t :)

http://tech.morgadinho.org/cowork/

Enjoy!

Lips for GMail

I was watching the other day our good men Steve Jobs doing a demo of NeXT back in 1990 and marveled at the “lips” service which he uses (around 1m50s) to reply through a voice message to an email. I thought, what the heck, it’s 2010 and we still don’t have this?!? And they had it back in 1990! Needless to say I was puzzled. Next step was I searched the web a bit to find the solutions out there that allowed me to integrate something like this in GMail. The ones I found were hum.. not that good. So I build this simple GMail gadget using the HTML5 Speech attribute. If you don’t know how it works it’s basically a speech-to-text input box.

To use it you’ll need one of the latest versions of the Google Chrome browser. To install first go to GMail Settings -> Labs  and enable ‘Add any gadget by URL’. Then go to Settings -> Gadgets and add the gadget url:

http://tech.morgadinho.org/codebits2010/lips.xml

You should then see it installed, something like this:

It currently uses a script on one of my servers to deliver the e-mails since I couldn’t find a way of telling GMail itself to do it (if you do let me know). But ideally what I wanted is to able to reply to a message via this feature all from within GMail and using speech-to-text. Now Google please implement it right and make it beautiful :-)

You can find the code on github:

https://github.com/nunomorgadinho/lips4gmail

And here’s the demo:

Here’s the video I mentioned of our dear Steve:

GMail Sent Mail in Inbox

For quite some time now I’ve been getting my sent messages through GMail in my inbox for no apparent reason. Today I finally decided to take the time to look it up and found that the problem was I had a filter saying “don’t file messages from my address as spam”. As soon as I removed it the problem was gone.

Viral Things Travel Fast

Two funny things happened this past days..

Rob Hawkes did an HTML5 version of the Google bouncy balls logo and got tremendous amount of buzz, traffic to his website, massive increase in his Twitter followers and coverage by some media giants like CNN.

Succeeding the launch of Google Instant on Wednesday, Feross Aboukhadijeh did YouTube Instant , a site that lets you search across YouTube in real-time. Needless to say he also got an tremendous amount of buzz but the funny thing is he also got a job offer from YouTube CEO Chad Hurley over Twitter.

Ah, isn’t the Internet great?

CAPTCHA Alternatives

Have you seen something like this before? You probably have.

It’s called a CAPTCHA and it’s supposed to help stop spamming on websites. What happens though is that they are a bit annoying and in the end you might not need one.

Annoying and broken pretty easily

Josh Fraser blogged some time ago on “Why you should never use a captcha” and I subscribe entirely to what he says:

“CAPTCHAs are annoying, you probably don’t need one and even if you did it could still be broken pretty easily.”

Alternatives

Two nice and simple alternatives:

1. Hidden field using CSS: Josh himself points to this solution:

“add an extra field with a tempting name like “email” to your form that is then hidden using CSS. Humans can’t see the field and as a result will never fill it out. Any request that comes in with the field completed can easily be eliminated as spam. The beauty of this is you have a pretty effective spam-stopper without ruining the user experience or adding any friction to the process. A simple technique like this is probably enough to stop the majority of spam bots.”

2. A slider: Joe Stump tweeted about this one (which Josh also mentions) and it’s a really nice one I must add.

Time to move on from captchas? I think so.

http://www.onlineaspect.com/2010/07/02/why-you-should-never-use-a-captcha/

http://twitter.com/joestump/status/16503358737