Tuesday, December 27, 2005

It can't be so hard...

Do you remember my last post about my javascript compressor?

Óscar Frías, from Trabber fame asked me for my opinion on the dojo javascript compressor, and my reply was along the lines of: "slightly better than mine, as it compress inner variables / functions names". As this seemed a trivial to overcome difference, I coded this compression in my yet unnamed compressor.

There are only two cases that I have not handled:

  1. If you have variables named _1, _2, ... things will break, quickly. This is a pretty trivial bug that I have to fix asap. I guess that dojo gets that right.
  2. If you have "with" statements, things may break.


I wonder if dojo handles that second point. Let me elaborate with an example.


function a()

{

function getElementById(a) { return "hi"; }

with (document) alert(getElementById("xxx"));

}

a();


This code should show an alert dialog box with "null". If we compress it, renaming inner variables / functions, we get:


function a()

{

function \_1(a) { return "hi"; }

with (document) alert(\_1("xxx"));

}

a();


(Note the compressor doesn't know that the getElementById inside the with statement was in fact document.getElementById, and thus it changes it to _1.)

This new code will show "hi" instead of "null".

Despite this corner case this new compression is worth enough to have.

But I didn't build a new compressor just to be a shadow of dojo's one. I want to build the best compressor ever, and such a compressor should fix what I consider a growing problem in the javascript community.

Javascript frameworks are growing in number / quality / size. Dojo, prototype / scriptaculous, rico. You name it!

Some frameworks are already weighting in the megabytes, and to make the download manageable to users, they split the framework in several files. The developper should then pick the javascript files with the code that he will finally use. But it's not working.

If I want to use a simple smooth blink effect with scriptaculous, I should bring the whole effects.js file and the whole prototype.js file, even when I'm obviously only using a little part of these files. Bigger pages very quickly start using all the scriptaculous files, even when they are "only" using an Ajax.Request here and a little effect there.

An approach to cut the bloat is to do manual surgery on these files to build a new page with the minimum needed to run, for instance, some effects (as moo.fx does). But this is time consumming, requires a careful human expert to cut down bloat and yet get something useful, and it should be done on a page per page basis. At the end, it boils down to copy & paste parts from your framework on separated file. But that is too much work to use a framework without putting an unaceptable burden in the shoulders of our users.

The approach that I have in mind is akin the previous one, but done automatically. A program parsers your pages, and it sees exactly what's the minimum javascript needed to do what you are doing. It then rewrites your page / javascript to use this minimum.

So, in short, my goal is to prune dead code of javascript files, as linkers do in other languages.

Unfortunately, due to the highly dynamic nature of javascript, this is impossible to do without building a full javascript engine. Remember that functions are also objects in javascript, and thus they can be freely copied in variables. When you do "a()", you have to evaluate "a" to know what is getting called.

At this point some part of my brain started to think "well, it's just a javascript engine, it can't be so hard..." and somewhere, a few days ago, it convinced the other part of my brain. So here I am, with a javascript engine that evaluates all the javascript statements but for's, switches, try / catches and functions, and all the javascript expressions but constructors, function calls, arrays and objects. You can call it the most overengineered calculator, ever. But I felt really great when I wrote 1 + 1, and it replied: 2.

The really big missing part in this engine is the ECMA object system, that I failed to implement correctly in my first try. I will still need a full day or two to finish it, and then I hope the remaining parts will just fall in place.

When I will finish the javascript engine, I will have to figure out how to do dead code prunning with it. I'm thinking of using a garbage collector like algorithm, but doing it without falling in an exponential explosion of cases seems not trivial. Well, I will cross that bridge when I will get at it, I guess.

Oh, btw, MERRY CHRISTMAS!!!

Tuesday, December 13, 2005

"Link to this page" no longer needed

I finally killed an old "bug" in Panoramio, shared with any other Google Maps page I have seen.
It was difficult to extract a link to the thing you were seeing.

Google Maps has a "Link to this page" link. The URL of this link is dynamically updated to reflect the current status of Google Maps, so I did the same thing in Panoramio.

It is, however, difficult to discover to novel users, and it is yet one more thing in the interface. And I want anything superfluous out of my interfaces.

So I finally put back the current where it should be, in the URL the browser is showing you. I have to encode the status of Panoramio in the hash part of the URL, to prevent the browser reloading the page upon changes.

I hope people will find it easier to use Panoramio links now.

Monday, November 28, 2005

Javascript compressor

Let's see if you are a real hacker.

Your problem: a web page somewhat slow, with lots of javascript code.

You can:


  1. ignore the problem
  2. activate mod_deflate in the server for javascript code (be careful with old browsers!)
  3. use a javascript compressor to remove any extra spaces, new lines, comments, etc.
  4. take an existing javascript parser, and make it rewrite your javascript code, as above, without comments, spaces, etc. safely renaming internal variable names.
  5. download the ECMA standard, build a full javascript parser from scratch, and make it rewrite your javascript code as above. Extra points if you implement some extra size optimizations.


After a full week-end working on this thing, I had a parser "almost" working. Some more evenings and I had a compressor, but without renaming variables (yet).

Now I'm trying to finish the parser. As always, the latest 5% takes 90% of time. My parser is compliant except for:


  • Virtual semicolons
  • Regular expressions


We all know that in javascript you have to separate statements with semicolons, but you can ignore them in some cases. Among others, you can ignore them if put separate the current statement from the next one with at least a new line, and these two statements combined as one would raise an error. And actually somebody thought *that* thing would make javascript easier to understand (?!)

I have only modified my grammar so it is able to add virtual semicolons before '}' and before the end of file. These are the two most useful points where you can unambiguosly do not put the semicolon.

Regular expressions are also a bit hard to parse with a LALR(1) grammar. I'm thinking of matching a '/' or '/=' token for a primary expression, and then switching the lexer so that it can parse the regular expression and parse it, all in the action of these two tokens. (At least that is what Rhino does.)

If I fail, I will rewrite the parser to a LL(1) one. I will have the same problems, but this time the parser will be hand made, and thus I should be able to put inside these hacks as I need them.

The good news are that my code is fully parsed and written back correctly, except for the two regular expressions I use. I will then start working on most advanced compression features, not yet available anywhere else.

I will keep you posted!

User areas of photos

He asked, I deliver.

Do you have a ton of photos that you want to show in a map? Worried your pictures will soon fade away from the home page of panoramio to some hard to find page?

Now you can restrict the photos in panoramio to those of a particular user.

See for instance, the pictures taken by Eduardo. Or see them in a single page if the map thing does not suit you.

If you found hard to follow the comments people dropped on your photos, you only have to check now your Panoramio page (sign in and then click on your name in the home page). There you will see your latest pictures and the comments people have done to your photos.

Enjoy!

Friday, November 25, 2005

Web 2.0 definition

Best definition of Web 2.0 to date, directly from The Devil's Dictionary:


Web 2.0, proper noun



The name given to the social and technical sophistication and maturity that mark the— Oh, screw it. Money! Money money money! Money! The money’s back! Ha ha! Money!

Thursday, November 17, 2005

Direct Manipulation

In Panoramio you can move your photos dragging its red pin over the map. That is direct manipulation.

Imagine the old system: first, select "move photo", second, introduce a new location, and third, save the new location. Thus every feature needs explanations, controls and several steps. Adding features make the interaction more complex, slower and difficult.

In the old system, the easy way of keeping interfaces usable is reducing the number of features. However while "less is more" is a nice slogan, doesn't really mean good interaction design. That is the point of Donald Norman in The truth about Google's so-called "simplicity". Norman thinks Google is simple just because they hid everything else, but the search box. He believes "simplicity" doesn't mean good interface. It looks simple, because it has few links. However there are a lot of different contents together under them, so these links aren't clear and lack information scent . For example, where is Google Scholar, under "Advanced Search" or "More"?. (more examples in Norman's article).

It's true there are websites with too many unnecessary buttons and options. But it's also true there are too many useful elements that you just can't hide. The easy way isn't enough here.

Direct manipulation can solve some of this problems. Direct manipulation is nothing new, but came to the web with Ajax. In Flickr or Basecamp you just need to click over a title to edit it. Since you don't edit titles very often, you don't need a permanent "Edit" link beside every title, using space and crowding the interface. Also direct manipulation is better than hiding the "edit" feature under a vague general "settings" link.

Direct manipulation is not easy to design, there are still no standards to follow. You can't use direct manipulation for everything, but it can be very useful sometimes.

Tuesday, November 15, 2005

New page to see the photos

I have done a new page to see the images in Panoramio. There were several problems with the previous one, and also some advantages.

It was not really a new page, but just a bit (a big "bit") of javascript that showed and hide some parts of the main page. It was very fast to lurk the latests photos posted in Panoramio, and each time you changed the photo, only the essential of the web page changed. Switching between the photo and the map view was also very fast, as it was only a "show this, hide that" operation.

This was its advantage, and it was also its major problem.

The code was hard to grow, and the layout of the page severely "inspired" by the layout of the main page. The page was not stored in the navigator history, the back button to go back to the map did not worked, and linking to the page was as hard as linking to a particular place in the map. Some of these things were fixable, but the "hard to grow" and the layout problem were the two real, big problems that I wanted to fix and was hard to do with the current code.

When mkling asked for comments on the pictures, a feature that we had already discussed and pushed back in the TODO list due to these problems, I decided to redo the whole page, and split it from the main map.

The relayout let me show all the relevant info in the same page, without the need to scroll to see the contextual maps, to have comments on images, and to be able to navigate through the photos of the user that posted the image and through the photos in this region of the planet.

The downside is that now is slower to go back to the map. I'm putting Panoramio on a javascript diet, and I will try to pull all the needed data in the minimum number of queries possible, to speed up the "show the map" operation.

I'm also playing with the implementation of some features suggestted by Eduardo, as showing the name of the city where the photo was taken. I hope to have something to show you in the next days.

Wednesday, November 9, 2005

Friends

I knew our friends Juan and Estela, were visiting Joaquín this weekend in Paris, but I couldn't expect them to post their pictures rowing in the lake of Versailles Palace in Panoramio.com. Cool!

Thursday, November 3, 2005

US cities

I have finally merged the USGS data about the US cities in our search tables.
So now you can jump to any place in the world but those in the Antarctica (they are in yet another database).

Enjoy!

Monday, October 31, 2005

A new religion has born

It had to be done.

Now that the Kansas state finally seems to be receptive about teaching alternative "theories" about the origin of men, it is our duty to do not limit these alternative theories to Intelligent Design, as there are other equally valid theories that can be taught.

I, for one, welcome our new Flying Spaguetti Monster overlord.

Priceless.

Sunday, October 30, 2005

Explorer system error: -1072896658

Don't you love when explorer express its griefs in such a clear and helpful way?

I was putting the last touches to the new "Search place" code, and it was working beautifully in Firefox and in Explorer, when I faced a problem in Safari. The query to the database that retrieves the name of places that match the user search came back with the accents garbled!

Safari thought the received page, that I was retrieving with XMLHttpRequest behind the scenes, was encoded in ISO-8859-1 (or most probably, -15) when I was serving it in UTF-8.

Fair enough, I just have to put the header "Content-Type: text/plain; charset=utf8" in the reply, and sure enough, Safari was now working like a charm.

But then, the search stopped working at all in Internet Explorer! I was getting a weird error in the status bar:

Explorer system error: -1072896658

This thing popped when I tried to access the responseText of the request object. After I googled a bit this error code, I found that it was due to the XMLHttpRequest control receiving a reply on an unknown encoding. Please guys, next time put a message like:

XMLHttpRequest requested document was in the unknown "utf8" encoding. See the list of accepted encodings.

It turns out the charset should be UTF-8, and not utf8. Fixed it, and now it is happily working on these 3 browsers.

Update: Attentive reader Johan Sundström pointed out that I was missing the "text/plain; charset=" part on the Content-Type. I should really double check my blog entries before posting them.

Monday, October 24, 2005

Basecamp + Writeboard

I said before that 37signals is one of these companies that "get it". I do not think however that they have got absolutely everything right.

Point in case, they integrated recently their new Writeboard with Basecamp.

For those not in "the known", Writeboard let's you manage the life of a document. You can see and compare older versions, see who changed what, etc. Basecamp is a web application to manage your proyects. You can see who has to do what, what has to be done before the next milestone, messages related to the proyect, etc.

Basecamp was structured in several parts. You had:


  1. Messages

  2. To-Do lists

  3. Milestones

  4. People



Now you have a fifth item, Writeboards.

Do you see the problem?

With the arrival of Writeboards we have two different classes of documents: messages and writeboards. What is the difference? You can track the changes to writeboards, and you can not track the changes to messages.

If you are a paying customer, there are zero reasons to use a message instead of a writeboard. Yet they are completely different things in the Basecamp interface.

Coming from a company that strives to make less, this one more tab to make a split that users could not care less about is bugging me.

Panoramio after three weeks

We are surprised about the evolution of Panoramio since the soft launch three weeks ago. Bloggers have been very nice posting about Panoramio. Panoramio also appeared in two major technology news sites (Digg and Barrapunto). From that a lot of traffic came, 536.595 page views until today. As a result already 2.940 pics have been posted, some of them are really amazing and most of them have been located exactly in the rigth place.

Many bugs have been fixed and some features added to Panoramio, but like our friend Ubaldo from Loquo, told us "the hard work starts right now".

Saturday, October 22, 2005

Panoramio + Google Earth

Stefan Geens suggested to publish a KML Network Link with the latest pictures of Panoramio.

I did not know what is a KML Network Link, but it sounds cool, so I looked up the documentation, and implemented a KML Network Link for Panoramio.

How does it work?

You just install Google Earth on your computer, and click on our network link.

Your browser will ask you what do you want to do with this file. You should open it. Google Earth will start up, and then you just have to go somewhere in the planet. When you stop moving, Google Earth will download pictures of this place of the planet from Panoramio.



Enjoy it!

New logo

And we have a logotype!


Panoramio


The father of this logo is Mike Rohde, of Makalumedia.


I will blog more about the whole process soon, but I wanted to share first the news with all of you :-)


Technorati Tags: ,

Friday, October 14, 2005

Review of Panoramio (1/2)

Eduardo has contacted some pals in the usability field, and Christopher Grant and Albert Ribera sent back to us a review of Panoramio. They found a lot of little and not so little problems, so I decided (with their permission) to post it here along with my replies. I will start with the problems found by Christopher, as they were already in english. Happy reading.

BUG: I search for “Accra, Ghana”. On the one hand I get an error message “No places match this name” but the searching animated icon does not disappear.


Recomendations:

  • Fix bug

  • When place is not found send mouse focus back to search field

  • Write error message in red.




Yup, the search is horribly broken. I will be working on it next week. Good idea to put the error message in red.


Login, register, help, blog, forum and link to this page links don’t make sense together


Recomendations:

  • Add username and password fields to toolbar area. Include links for register and forgotten passwords. Include help link in toolbar area but seperate it from login area with a divider.

  • Move help, blog and forum links to upper right-hand corner. Group blog and forum together. Help should be seperate.




Yeah, right now it's a bit of a mess. My preferences are however different:


  1. Remove the "Link to this page". Only experienced users now how to copy an url out of a link, or what it means at all. My plan is to update the real url in realtime without reloading the page. It should also put each movement in the history of the browser.

  2. Group together Help, Forum and Blog, as these three links are useful to people looking for help / more info.




Register is not a very “webby” word.


Recomendation:
use the same terminology as Yahoo, Google, Flickr, etc.: Sign Up (Darte de alta), Sign-up (el alta), Sign In (logarte)


Done. But I have not yet taken a hard decision on this one. The old wording may be worse in english, but I'm sure it was much clearer to our non english users. I may revert to the old wording even if only until I internationalize Panoramio.


When I’ve signed up or signed in, the help link disappears.


Recomendation: don’t remove this link. See point #2 “login and link” placement.


Done, good catch.


BUG: I upload a photo of Chicago, but when I search for other photos of Chicago, I am shown a map of Belize.
I also search for Cincinnati, USA and the search box recommends “Cincinnati, Zimbabwe”.


US and Puerto Rico places are not yet indexed. That’s explained in the help, but obviously I should give a proper error message, and it should say “No places matches”. (Or start working and add US cities to the database.)


Search feature is very uncomfortable, I can’t tell when it’s started or stopped searching.


Recomendation: add “Search button”. Don’t show the animated searching icon until the user has clicked on the button.


It was thought as a mean to give the user feedback about the different places in the world that can match its query, in real time. Obviously it's not working, so I either make it much much faster or I will have to ditch the whole idea.


I click on the help link and am taken to a new page with no link back to Panoromia.

Recommendation: place help content in a pop-up window.


I don’t like pop-ups, but a link back to the home is indeed needed.


I didn’t bother to read the text in the toolbar and had a very hard time figuring out how to upload my pictures.


Recomendation: don’t expect the user to read the toolbar text. Include a large “Add your photos” which opens a bubble that explains how to upload pictures and how to navigate from place to place using the map.


I don’t like the “big links” approach. It sometimes makes links even easier to dismiss, as they start looking like logos or ads. But your concert is very real… I put the relevant text in bold, as is by far the most import in the whole toolbar. Maybe I should put it in the last place in the toolbar, because there is less clutter in the middle of the page (over the map) than in the left side (over the previews).


BUG: When I try to upload a PNG the system takes 2 to 3 minutes to tell me that only JPEGs are accepted.


It also says that only jpegs are accepted in the Upload picture balloon. I will put an additional client side test to ensure that the file ends with .jpg or .jpeg.


BUG: When browsing other people’s pictures I see a delete link which allows me to delete pcitures that aren’t mine.


Wow. That thing is of course also checked in the server, but it’s disturbing anyway. It's fixed now.


While browsing other people’s pictures I decide to search for Athens, Greece. The “searching icon” appears but I am not shown the results until I click on the “Back to map” link.


Recomendation: as soon as the person begins a search, automatically jump back to map and show the location searched for.


Yup, good suggestion. It was also on our to-do list.


While browsing other people’s pictures I am constantly scrolling down to see the map and locate the place the picture was taken.


Recomendation: move the map above the fold.


If I do so, I fear you will be constantly scrolling down to see the picture. I tried to put the satellite mini map to the right of the picture, but there was not enough free space to put it on 1024x768. Eduardo suggested to put the mini map at the bottom of this page, and I think it looks better there.


It’s not clear which pictures appear in the left.hand column.

Recomendation:

  • As soon as the user clicks on a picture in the left hand column, show the picture in the right-hand column, zoom in on the surrounding region and show all of the pictures from the selected region, not just the picture that has been selected. Use colors and borders to distinguish between the spot where the selected picture was taken and the spots marking other available pictures from the selected region.

  • When the user mouses over a spot marked on the map, show aa thick red border around the picture that corresponds to the place on the map. Then, when the user moves the mouse off of the market spot, remove the red border.




I will take a look at this suggestion later. My brain seems to not be able to digest it right now :-)


BUG: When I try to go back or forward I see the following error message:

[Very weird error message™]


Never seen it, but I will try reproduce this. Note to my dear readers: The image was not readable, so just believe that it was a very weird error message..


I can’t tell how many pictures are available throughout Panoramio or just in the region I’m browsing.


Recomendation: Include the total number of pictures uploaded in Panoramio’s history and today. Include the number of pictures available for a given region and show me where I am within the search results (“25-50 of 310 pictures”).


Yup, done. But I still want to improve a bit more. A link to each “page” of pictures would be better.


I can’t “reset” the app, ie. I can’t get back to the very first screen I saw with a view of the whole world.


Recomendation: Include a “reset” or “zoom out” or “home” link.


The “Panoramio” word is a link to the very first screen. I hope when we have our logo ready this will be much more evident.

Tuesday, October 11, 2005

Our to-do list

We are now working in browser compatibility. Explorer 6 and Firefox 1.0.7 should work okay. It's still not possible to post pictures with Safari and there are some bugs in Opera and Firebird, but we are fixing them. If Panoramio doesn't work properly in your browser, please report it to the support forum.

Today we made some minor changes in the search engine in order to make more intuitive the "suggest" system. Now the code to upload the pictures is also a bit more robust. We also raised the upload limit up to 5 Mb pictures.

We have been asked for other features like personal areas, editing personal data, photos urls, GPS and rotation EXIF tags, etc. They are all included in our to-do list.

Friday, October 7, 2005

Less is better

Some big names are redoing their webmail interfaces, in response to GMail. They are redoing the whole thing using a richer interface.

Basically, both of them are building something akin Outlook on html / javascript. And they are so wrong.

GMail has show us that you can implement responsive applications on a browser. It raised the bar. But people is not loving it because it uses XMLHttpRequest. Nobody knows what the hell is XMLHttpRequest.

It is because its interface is BETTER than anything else. Excuse me, but I already have Outlook. Why
do I need another Outlook in my browser? I don't want new applications, be it for the web or the desktop to be clones of what I already have.

There is somebody that has got the point. 37signals keeps pumping out little gems.

Excuse my french, these guys have balls! They have done a web page so you could have to do lists! And it's working!

37signals have the gift to see the deep root of a problem, and to deliver an application that fixes this single problem. And then stop. Don't think about "what if"'s. It is done.

Good and bad news

The good news: Yesterday Panoramio appeared in some big sites and visitors came fast and furious. Hundreds of amazing pics around the world were posted; Moscow, Italy, California, London, Kizhi (Russia), etc. We added a small world map to the photo page in order to give an idea of where the picture was located. Posting pictures over Japan didn't work, but we already fixed the problem.

The bad news: We have discovered there are still problems with Safari, Opera and Firefox. In Safari you can not post new pictures (bad bad) and in Opera you can hardly see the pictures, as a big map is over them (very bad). Firefox is showing the drop down of the search under the images. We are working in all these problems, and fixing them as fast as we can.

Bugs, comments, suggestions... please, report them to the Panoramio forum.

Sunday, October 2, 2005

Panoramio 1.0, soft launch

Joaquín and me have been working in Panoramio the last weeks. Finally we believe Panoramio it's ready for a soft launch. Ideas, suggestions or bugs are welcome in Panoramio forum.

Using Panoramio

The Pico Turquino trail (Cuba), Cape Of God Hope (thanks eSHa) and North Cape and Mageroya island (Norway) are some examples.

I even have seen someone posting a McDonalds restaurant in Chicago. Some small cities like Konstanz (Germany) or Callosa de Segura (Spain) can give an idea of what it's possible, but it depends very much on the availability of high resolution pictures from Google Maps.

Next uses are to come, experiments are welcome.

Tuesday, September 27, 2005

Embedding Panoramio in your site

Some people have asked in the forum for a way to have Panoramio on
their site. So I went for an easier solution for all of you. I just
cooked a mini panoramio version, ready to be used on iframes outside
Panoramio. An example is:



This is what you need to write in your site:

<iframe src="http://www.panoramio.com/plugin.php?
lt=43.406295&amp;ln=-2.686586&amp;z=3&amp;k=1" width="446px" height="300px"></iframe>


You must pass these options as you will do for a GET request, and the
name of these options is lt (for latitude), ln (for longitude), k (for
kind of map, 0 = map, 1 = satellite, 2 = hybrid), z (for zoom level, 0
is the maximum zoom, 17 is the minimum), zm = 1 to activate the zoom with the mouse wheel and user (for the user email).
All of these options are optional.

You can of course tweak the size of this frame using its width and/or
height attributes.

I will improve this mini Panoramio over time, specially so it can show
pictures at a decent size.

Sunday, September 18, 2005

onload event

You can use the onload event on images to know when the browser has finished the download of an image.

I have used it for the upcoming version of Panoramio, where I only show the images after they have been fully loaded.

There is however a subtle difference between Internet Explorer and Firefox related to this event.

If you set up the handler to this event after setting the src of the image and the image is in the cache, Internet Explorer will not fire the onload event.

Internet Explorer fires this event inmediatelly if the image is in the cache, so you should do:


img.onload = onLoadHandler;
img.src = "foo.png";


instead of


img.src = "foo.png";
img.onload = onLoadHandler;


or your code will not work on Internet Explorer for cached images.

Monday, September 5, 2005

More differences between Internet Explorer and the other browsers

Directly from mir.aculo.us. Internet Explorer does not like certain names for the id of your controls.

People using "tags" as id are having problems to print the page (?). Explorer also gets confused if you use "options" as id, but this time you will probably get a javascript error. To make good things better, it also has problems if you use as id the name of another control.

Another example of problem that will not be discovered with any w3c test.

Test early, test often, and with as much browsers as possible!

Friday, September 2, 2005

Hurricane Katrina

If you are (like me) not from the USA, and you want to help people affected by Katrina, you can do so through the
Blogcritics Hurricane Katrina Relief Fund.

Remember that the United States people have always been there to help us when we needed it. It is time to give
them back a little bit of help.

Tuesday, August 30, 2005

Loading Google Map's page with many markers slow in Explorer

As anybody that has visited Panoramio will say to you,
it may take an awful long time to load markers on a Google Maps page.

I didn't know what was going on. I mean, Firefox was much much faster on this page than Internet Explorer, on the same connection, same computer. Why?

A very long thread over this issue was running on the Google Maps API discussion group without any clear work-around or explanation. So I took the plunge.

I fired Fiddler, a wonderful little application done by Eric Lawrence, one Program Managers of Microsoft Internet Explorer 7. Fiddler spies the WinINET calls, and logs all the HTTP requests and responses done and received by your computer using the WinINET library.

The reason Internet Explorer was so much slower than Firefox was obvious, Internet Explorer was querying the browser for the marker image, but it was doing it once for each marker! That means the server was sending out the same image over and over again.

It turns out Explorer may cache the image, but it needs a bit of time to cache it. If you just ask for 500 markers directly, it will try to download 500 times the five images that compose a marker.

Depending on your IE options, and on the headers your server sends along with your images, you may find this bug only the first time you open the page, and then it may vanish, or not, or appear again when the cache expires, to vanish again after that, or remain there (again, in function of your exact headers).

So if you have to read multiple markers in google maps, before doing so make sure Internet Explorer has put the needed images in the cache:


<script type="text/javascript">function onLoad() { ... your code here ... }</script>
<body onload="setTimeout(onLoad, 100)">
<img href="http://www.google.com/mapfiles/marker.png" style="display:none">

<img href="http://www.google.com/mapfiles/shadow50.png" style="display:none">

<img href="http://www.google.com/mapfiles/markerTransparent.png" style="display:none">

<img href="http://www.google.com/mapfiles/markerie.gif" style="display:none">

<img href="http://www.google.com/mapfiles/dithshadow.gif" style="display:none">

Friday, August 26, 2005

First Mac Mini experience

Last week-end I bought a Mac Mini because

1. I wanted to test Panoramio on Safari
2. I want to start developping any new application also for Mac
3. It looks cute as hell!

So far the experience has been great. Most things just work, and the whole interface is very slick.

There vere however several dark spots.

First, I took the old version of Mac Mini, preloaded with MacOS X 10.3 (aka Panther). A few months ago Apple released MacOS X 10.4 (aka Tiger). If you want to upgrade you have to pay 129€. No discount for previous users.

I doubt that Microsoft will make you pay an upgrade of this size. MacOS X 10.4 have some nice improvements, but it looks like a big Service Pack to me. But that's debatable. Spotlight and the new 3D infrastructure certainly look like quite major changes.

The thing that let me puzzled is that some software already *required* MacOS X 10.4!

Point in case, I can't use Java 1.5 because it's only available for Tiger. As I understand it, they made some changes and Java now needs to use the new 3D stuff available only in Tiger, but com'on! was there really no way to port Java 1.5 to Panther? There is a lot of interesting things in "Java the language" that are new in Java 1.5, and they are completely unrelated to the base system.

Same problem with Dashboard or the new Safari. I'm sure it would be *hard* to port these things to Panther, and I can hardly remember a Microsoft product that obsoleted a previous Microsoft OS, except those that were truly *old*.

Remember that I just unpacked a shinny new computer, and its OS is already not supported! We are not speaking of a ten years compatibility here, just compatibility with products that are still selling!

I returned the MacMini and will bought instead the new MacMini that is already announced in Apple. It seems they will receive the first boxes next week.

The good news are that Panoramio was working well with Safari 1.2 (the Panther one), except for pictures not disappearing when the marker on the map disappears.

I quickly tested Panoramio with Safari 1.3 on an exposed Power Mac in the store, and the bad news is that it was not working so well. The first problem is that the default latitude and longitude was "NaN" and "NaN", instead of the position of Madrid. It seems to be a problem with my getCookie function. I worked around this problem hand crafting an url to center the map at Madrid, and things worked like in Safari 1.2, except that I managed to crash Safari. (So far, I've managed to crash Internet Explorer and Safari.)

I will keep you posted when I'll get my hands on a new Mac Mini and fix these Panoramio problems.

Friday, August 19, 2005

Why Panoramio is not XHTML/CSS valid?

In my previous post Fade in and out I said that I didn't care about Panoramio not being xhtml/css valid.

If that sounds weird, it's just because people have forgotten the real goal of validating a site. Validation is a mean, not an end.

The goal is to have a site as cross browser as possible, so that any potential user is able to enjoy it. Validation is a tool to use towards this goal, but it is not the only tool, and not even the most useful one.

Even if people where using fully compliant browsers to see your site (and we all know they are not), there are an awful lot of things that are just not in the specification and can ruin the look of a perfectly valid page. For instance, the standard is silent about the default margin, color and font that a browser should use for any element. There are very good reasons to not specify such things. Font names are not the same between different systems, for instance. But the point is that if you don't really test your page against different browsers, no matter how much does your page validate, it may still look awful for a lot of your visitors.

You can also experience the reverse. You can have a non valid page that is perfectly usable on a 100% standard browser. And I don't mean that “almost everything will work”, I really mean perfectly usable! The XHTML / CSS standards says how a XHTML / CSS document should look, and it also says how a compliant browser should behave in the presence of certain invalid documents. For instance, unknown attributes should be ignored.

It is thus perfectly legal to invent new attributes, and give them a particular meaning with javascript (just remember that your user may not have javascript activated). Any compliant browser will render your page without a glitch. The only downside is that your page will not be anymore XHTML valid. But if you concern is to have webpages that can be read and used with any browser, you will not have a single problem with this strategy.

This trick is used in our login and register forms in Panoramio, to explicit what test should be run by the client on each field before the form is submitted. E-mails should be real e-mails, some fields are mandatory, that kind of thing. The result is much cleaner than adding these tests ad-hoc in javascript. (Note that this framework is not yet finished, and thus the javascript code still does some tests in an ad-hocist manner.)

Thursday, August 18, 2005

Turquino trail in Cuba

It wasn't that easy, it was difficult to remember the right places after two years, but at the end I could submit the pics of Turquino trail, the highest peak in Cuba.

It takes you two days to walk 41 km up and down, a real rompepiernas trail. Sad it's forbidden to take photos in La Comandancia de la Plata, the main basecamp of the Cuban revolution that is included in the route. By the way, right at the top, there is absolutely no view, too many trees. Anyway you can enjoy wonderful views along the whole trail.

Differences between Mozilla and Internet Explorer

Some time ago I read an article pointing out how to migrate apps from Internet Explorer to Mozilla. The articule is well written and worth a read, but it falls short on explaining all the real problems you can find when making a webapplication that works on both browsers (let alone something that works on Opera, Safari and Konqueror).

So I decided to blog about some of the inconsistencies that I've run into.

For this first post, one of my favorites, innerHTML support depends on your browser.

innerHTML is not part of any blessed W3C standard, it was introduced a long time ago in Internet Explorer. It's so damn useful and so handy compared to using the DOM interfaces that this property was replicated by other browsers.

There is however a difference that you must be aware of, in Internet Explorer you can not change innerHTML on objects of type COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE or TR. You can do it in Firefox.

If you develop a site looking first how it works on Firefox and fixing it later in explorer, you may fall on this trap, thinking that everything is working ok, just to see that it's not working at all when you check it later in explorer.

If you want to support several browsers, better do it from the front up, or there may be some design decisions that may be hard to overcome when you discover that this or that trick doesn't work on one of your browsers.

Tuesday, August 16, 2005

Still very much work to be done

There is still very much work to be done in Panoramio; many bugs, usability problems and lack of features. The to-do list is very long. We are fixing them, but if you have any comment, suggestion, complaint or idea, just leave a comment here or at the forum. We would be happy to hear from you.

Fade in and out

Playing with the effects in script.aculo.us I added a new little effect to switch from an element to another one smoothly.

Better see it in action, go to Panoramio, register as a new user, and see the little fade out of “Login     Register” and the fade in of “Hi Foo Bar”.

Sure enough, it was not working on IE. It's a documented problem, the Opacity effect didn't work on elements without layout. The “layout” is some kind of karma that IE throws on certain elements, and you can activate it manually if you use the right CSS incantation.

So here we go, I apply height: 1px; to my two spans to no joy, it still didn't work. Let's try zoom: 1... on the money! zoom is not a valid css property, but my page didn't validate anyway (and no, I don't care) so I'm sell on zoom.

But now I have another problem. If you have cleartype activated the result is ugly beyond belief. Pssst. Well, nobody said that's going to be easy.

Another google search, and we see this lovely blogger giving us a work-around. Just put an explicit background color to this element. Luckly enough I'm using an uniform background for this part of the site, so I just added a background-color: white; and now I have something that works like a charm at the very least on IE6 and on Firefox.

I can now take my breakfast.