Guestmap: a funny evolution of the guestbook
In version 2.0 of this website there was a simple guestbook application where everyone could leave a message.
I wanted to maintain this facility so everyone can write something even if is not interested (sounds impossible) in the topics and articles of the blog.
Of course I cannot simply use the old application, I wanted to do something more funny, so I came out with this idea (well, nothing new or not already seen indeed), a guest map, where everyone can pin himself or herself on and leave a message.
I've already studied something about the Google Maps API, but that was the first version of the API, the new one has many new and interesting features I wanted to try.
Some features I've implemented:
- on-the-fly geocoding of the given location with confirm of the coordinates for browsers with javascript enabled
- standard geocoding through a POST which uses the Google geocoding web-service for text browsers (or when javascript is not available)
- a click on each guest name centers the map on its location
- sidebar statistics by country and gender, a click on each link filters the guests shown on the map and in the main page
Some others are still somewhere in my brain, so there is a remote possibility to see them implemented in the future...
Now, after this long and boring blog post you can have some fun here dragging the map and searching for guests around the world, maybe you will find your neighbor... who knows?! ;)
Don't forget to pin yourself on the map and thus contribute to the growth of the population!
I love feeds
Yes!
Feeds are simple to use and many well known web sites provides web services with a lot of different feed's flavours, so it's simple for everyone to find the favourite format and use it on web pages.
Recently I've used the personalized feeds from last.fm and flickr.com for adding some fun in the sidebar of the main page.
last.fm
I've got a profile there and now I use the recent tracks feed for showing the last 5 listened tracks.
There is a little problem with this feed, I've seen that it has a sort of validity time, if you don't play something for a while the feed returned is empty.
As workaround I use a caching system, if the feed returns some valid data, it is cached, thus the last tracks played are always available.
flickr.com
I've started to use Flickr to store and organize my photos and now I use the personalized public photos feed for adding the last 5 photos in the sidebar.
I've choosen the RSS 2.0 format which provides also the links to the 75x75 px thumbnails! Cool!
For both I use 2 Perl modules, LWP::Simple and XML::Simple.
With the first I download the feed, with the second I parse it and extract the data I need to feed the sidebar template...
Simple uh?!
Form.Element.Resize published on JSAN
This javascript class is born in a lunch break (or two) at work.
For our framework we needed a facility for dynamically resize form elements such as text input and textarea fields with the mouse.
So I've started to experiment with this idea: if I put the form field inside a container I can use it as the element on which add some event listeners to catch the mouse movements and to compute the gap between the starting and ending point on both axis to use for the resize.
Initially I've used a <div> element, but I wanted to set the pointer shape with the CSS cursor directive differently for each border and corner, so I've choosen the hardest way: build a 3x3 <table> and put the form element in the middle cell.
Internet Exploder, as always, gave me some headaches, because the <table> does not appear if you don't create a <tbody> element inside it as explained in this article.
On each border and corner it is possible to activate the resize, the corners resizes both width and height, while the borders resizes only one dimension.
By pressing the SHIFT key while dragging a corner you can get a proportional resize based on the width.
There is also a double-click trigger on the element to restore its original dimensions, unfortunately this does not work with <select> elements in Internet Exploder and Firefox.
I've got some ideas for add some more features, like a min/max resize threshold, a configurable class name/id for the <table> element useful for customize its behaviour through a CSS file...
The official web page with a playable demo of this nice class is here.
There is also a dedicated page on JSAN here.