I recently had a customer that wanted a somekind of drop down similar menu, but instead of dropping down it dropped up, and horizontally paralell to the menu, let me show you:

In order for the menu to work, my UL element was positioned absolutely in the main div of the page (it's a 800px wide div that is centered in the browser window). Everything worked nicely, in Firefox... as always IE had problems rendering the menu, the whole menu was off to the right by the width of the page. The whole style of the menu was very complex and delicated, so touching something could make the menu to stop working on Firefox, so it was a very painful process.

After an hour of trying stuff, I found a solution. I tried wrapping the menu in a relative positioned div container element. To my amaze that worked fine, the relative positioned div was properly inserted in the flow of the page, and the absolute positioned menu was positioned relatively to the container div, this is normally called an absolute-relative positioned element. Everything was nice, until I tried scrolling... to my horror, the thing was acting as position: fixed! (which IE doesn't support btw).

After a while of trying things, and almost deciding it was impossible, I decided to try adding position: relative to the body element of the page. Guess what? That worked! I don't know why, but that made the relative positioned div to start scrolling along with the page.

In conclusion my css for this ended being something like this:

body
{
position: relative;
}

div.menu
{
position: relative;
margin: 0px;

overflow: hidden;
}

ul.menu
{
position: absolute;

height: 37px;
width: 780px;

padding: 0px;
margin: 0px;

font-size: 1.1em;
list-style-type: none;

background-color: #a55e40;
}

Hopefully this explanation might save someone else sometime, personally the fact that the div was fixed in the browser window without scrolling was incredibly confusing for me.

Novell has dug it's own tomb?

It seems to me that Novell has screwed itself unless they are planning to start selling greeting cards instead of Linux. According to their agreement with Microsoft their users are covered for patent infringement. Everything would be good unless someone claimed that there's a patent infringement, like Ballmer did last Thursday. So now that there's an allegation of patent infringement Novell can still distribute their software since they are covered by their agreement, but wait, the GPL states otherwise:

7. If, as a consequence of a court judgment or allegation of patent infringement or for any other reason (not limited to patent issues), conditions are imposed on you (whether by court order, agreement or otherwise) that contradict the conditions of this License, they do not excuse you from the conditions of this License. If you cannot distribute so as to satisfy simultaneously your obligations under this License and any other pertinent obligations, then as a consequence you may not distribute the Program at all. For example, if a patent license would not permit royalty-free redistribution of the Program by all those who receive copies directly or indirectly through you, then the only way you could satisfy both it and this License would be to refrain entirely from distribution of the Program.

So, even if there's another agreement, they can't get away from the GPL and since the GPL doesn't allow distribution of software under a royalty agreement (they are "paying" for an agreement to be able to distribute the software avoiding patent infringement) then they can't distribute GPL software at all, what are they going to distribute now? Baby dolls?

Firefox 2

Wow, 2.0 already... wow.

I've been using the 1.9 development versions (Deer Park) and the 2.0 release candidates for a while, but now it's final out, officially and stable. So what's so good about it?

Well, I will cut it down to just the things *I* found useful, I won't talk for example about RSS, since I rarely use RSS feeds in FF (I use my google.com/ig homepage for that).

Dead sessions
This is something epiphany had, before I switched to Firefox 0.9, and something that I always missed. Now Firefox 2.0 brings it back to my life. Sure you wont need this if Firefox didn't crash, but software crashes, it's part of their nature. Now when your Firefox crashes you won't lose your 20 something open tabs and have to figure out what you were looking at, instead you will get a nice dialog asking you if you want to resume the previous session, just click yes and all your tabs are back, nice!

Closed tabs
Did you ever close a tab by mistake followed by a "OH F**K", and you don't even remember what it was? I surely did. Now Firefox comes to the rescue with a nice Recently Closed Tabs in the History menu drop down. Another lovely feature.

Spell checker
Now this is a nice one, if you care at all about spell checking. Of c0urs3 if u r l337 u don care . But if you prefer writing properly, now Firefox will tell you when you made a typo underlining the wrong words. Just like any other software with spell checking that you might imagine, it shows suggestions, allows you to add it to the dictionary, supports various languages, etc etc etc. Did I say lovely?

Performance
Maybe it's just me, but I actually thing Firefox feels faster than previous versions... although some may say the contrary... you will have to try it.

Ok, that's about the coolest things I can think of over the top of my head, there's lots more cool stuff of course, even a new slick default theme, but overall I think that if you haven't yet, you HAVE to try it.

And by the way, if you use Firefox in more than one computer, you should try the Foxmarks extension.

Google speaks up

We all love Google, and we all come to love it's nice hidden tricks like the calculator, unit converser, dictionary, and other cool stuff, but what about hidden messages? It seems Google is trying to tell us something.

Go to Google dot com, type "miserable failure" in the search field and click I'm feeling lucky. You will notice that Google has no problem speaking out loud their ideals. Wonder how many other hidden words have some meaning for Google? Did someone knew about this already, or maybe I was the only one way out of the fashion wave?

Regards,
Xavier

IE Annoyance #1

Ok, today IE really pissed me off, and I mean it, REALLY. All the time I was fed up with it's ability (lack of) to render CSS properly, but that was kind of minor, after a little while you could tweak it to work properly. What really pissed me off today is it's total lack of a proper javascript DOM implementation. God, it sucks. So I'm starting this series of posts describing IE annoyances.

The Goal

I was happily implementing my XET framework for web development based on AJAX. The idea was that the client dispatched an event to the server, the server catched it and returned an XML containing certain actions to be taken, which could include some HTML tags to add to the DOM. So some client side javascript had the task of parsing the propietary xml tags and if needed append the html tags from the XML doc by using importNode. The importance here of importNode is that I'm copying nodes from one document to another, this involves changing the ownerDocument property of the node, so a clone wouldn't suffice, we have to IMPORT.

The problem

What do you think? IE doesn't support importNode. ImportNode has been in the DOM specs since the year 2000, yet the smart IE team has failed to implement it to date. And no, there's no other way, ownerDocument is a read only property, and IE won't allow you to modify it, so that makes cloneNode irrelevant. After some googling I found some guys solution of implementing a importNode function by creating new nodes in the target document and copying over all the attributes. So I gave it a try, and it worked, to an extent. It wasn't copying any of the css styles. After some more fiddling, browsing and hair pulling (I'm bald by now) I found out the problem. Maybe I should catalogue this as another annoyance, but anyway, IE doesn't recognize the attribute "class", for IE it has to be "className". At first I didn't realize this and was using insertAdjacentHTML to make the HTML parser parse the inserted HTML and that worked, must mean that the parser recognizes class and converts it to className for internal use, why the hell don't they just stick with class?

The solution

Ok, so in case you are wondering what the solution would be, here's the piece of javascript that makes it possible.

// IE HACK: Define _importNode for IE since it doesnt support importNode
if(!document.importNode)
{
document._importNode = function(oNode, bImportChildren)
{
var oNew;

if(oNode.nodeType == 1)
{
oNew = document.createElement(oNode.nodeName);

for(var i = 0; i < oNode.attributes.length; i++)
{
if(oNode.attributes[i].nodeValue != null && oNode.attributes[i].nodeValue != '')
{
var attrName = oNode.attributes[i].name;

if(attrName == "class")
oNew.setAttribute("className", oNode.attributes[i].value);
else
oNew.setAttribute(attrName, oNode.attributes[i].value);
}
}

if(oNode.style != null && oNode.style.cssText != null)
oNew.style.cssText = oNode.style.cssText;
}
else if(oNode.nodeType == 3)
{
oNew = document.createTextNode(oNode.nodeValue);
}

if(bImportChildren && oNode.hasChildNodes())
{
for(var oChild = oNode.firstChild; oChild; oChild = oChild.nextSibling)
{
oNew.appendChild(document._importNode(oChild, true));
}
}

return oNew;
}
}
// IE HACK (end)

With this small javascript you can then check for importNode and call _importNode if it's not available, or you could just call _importName importNode isntead, I just left it like this since it was more clear I was using a hack.

// This is for Firefox/Opera and the later for IE
if(document.importNode)
var elemClone = document.importNode(elemChild, true);
else
var elemClone = document._importNode(elemChild, true);

This was taken from the web, with a couple of my applied fixes since the original didn't work quite well. There yet a quirk, there's always one, IE will completely ignore the name attribute. That will be my next IE annoyance post, and to be honest I have found a solution but it doesn't work for me, not sure why not.

Until the next one

Web 2.0

Web 2.0, Is it here?

0. Foreword

Although I have tried to keep the level of complexity and technicism of the article in the low – medium range, and tried to explain almost everything I talked about, I might have slipped something. So if there's something you don't understand about the Technologies chapter, either skip it, and it might make sense later, or email me with any questions you might have, I will be glad to help.

1. Introduction

So we hear all the time people talk about the Web 2.0, but it's not really something, it's just a conception or group of things that make it sound like something different. The Web is the Web, and Web 2.0 doesn't mean that the Web changed and you need a new computer or a different browser. It just means that we reached a generation of web products that deserves (or maybe not) to be called in a way that distinguish it from our old first websites with HTML running in Netscape Communicator Gold and with blinking eyes GIF animations everywhere, yes I know you did that sometime ago.
In this article I want to try to give a glimpse to what, in my personal and humble opinion, conforms today's Web 2.0 technologies group. I'm gonna go over three areas, Technologies, Web software and Local computer applications (It's ugly when we have to start making adifference between local and remote applications, isn't it? =] ).

So, what's the whole point of Web 2.0? It's simple, simplicity.

The main goal here is to make surfing, acquiring and sharing information or data simple, and provide a wide spectrum of stuff to do with using a similar interface (your web browser). Every day you find yourself (if you use a computer, which I assume you do since you are reading this very article) doing several different tasks and having several different applications open to accomplish these tasks.

2. Technologies

2.1. Server side scripting languages

Server side scripting (or programming if you want) languages aren't really that new, but they are a key part on the evolution of our current web standards.

In the old days, web pages were just that, pages. Like the pages of a book, once printed they couldn't magically change, unless you bought a whole different book. Presenting the user with information based on their actions or preferences was impossible (well, almost). With the advent of server side programming languages we have a broad selection of new type of web pages, where we can start calling them applications, instead of pages. Examples of what I'm talking about are almost anything you do now a days on the web, buying stuff online, processing a credit card, checking your bank account and doing transfers for it, even searching for information on a search engine. Although this stuff could be done before, It was normally done using full blown programs in languages like C or C++ specially done to generate different HTML code based on actions. That's exactly what scripting languages do, only that they were designed to be easier to maintain, and mainly geared towards web application development. The two most popular languages I'm talking about are PHP (people love this one because it's free and open) and ASP.

Server side languages allow the user to choose from some data, send it back to server, then the server processes it, and replies with new data based on what the client first said. This new page (HTML) that the user receives, was generated in the server from a server side program.

Of course, you can already see the bottle neck of this, can you? It's synchronous, that means, the communication happens only one way after the other, not both at the same time.

2.2. The information exchange dillema.

Several technologies have arised to make information exchange easier, the main goal here being making the exchange of information between the server (the computer hosting the website you are visiting) and the client (that's, you guessed, you) transparent, almost like if you were running an application in your computer. Different companies have achieved this by different ways, for example Macromedia has invented Fusion, which is a set of GUI toolkit 'libraries' (if you are a programmer you will understand why I used quotes here, if you don't, then never mind) that make it possible to assemble interfaces similar to those of applications using just Flash. It also hoses an interesting information exchange link between the connected parties (that is server and client, not a party with beer) which makes it possible for the Flash animation running on the client's browser to look for information directly from the server. Although their approach is nice, it's still Flash, and I just dislike using 100% of my cpu to render a nice animation or propaganda banner.

The second most widely known technology now a days, isn't really a technology but an acronym for some old technologies put together to form something more powerful (and no, this isn't the power rangers either). Yes you guessed it, I'm talking about AJAX. Ok, if you didn't guess it, then you might need some more information about it, and sorry for flooding the article with jokes, but since the World Cup fever is on and all, no, I don't mean the soccer team Ajax. AJAX simply (pun intended) stands for Asynchronous Javascript and XML. Don't worry, I'm gonna beat some sense into that. Javascript needs to introductions I think, but just in case, it's basically a form of a scripting language executed by the browser client side (it never runs on the server, that would be Java, if you dare use Java for a web page) and is very old. In the old days it was normally used for doing stupid and flashy things like fish following your mouse pointer, flashy color changing text or backgrounds and ripple effects in images, in other words, it was pretty much useless. Another thing Javascript is responsible for are those annoying popups you get all the time? Yup, it's fault. Wait! Don't go murder Javascript yet, it has it's good.

With the overcome of new DOM (Document Object Model) standards, Javascript let's us the developers do funky things to our websites, on your side. Like modify it's contents dynamically (pages are no more static after it finishes loading) or communicate with the server, this is were it starts to make sense, right? Normally you would think that if you want new information from a website, you would click on a link (for example a category in a e-shop) and wait for another page to load with your results. With asynchronous connections to the server via Javascript and the ability to use Javascript to change the website contents this is no more so. Now you could click on a link and the content of the page would mutate to show you the new results, without reloading the whole page. This, of course, makes things a bit faster since the rest of the page never changed, so why should you get it again, right?

Now we can talk about asynchronous communication between server and client, where both are constantly talking to each other (unless there's nothing to chit chat about).

2.3. Prettying it up

So now we know, we have ways to get information from the server asynchronously (God, I hate that word), but what about new technologies for viewing this information? Yes, we have that too. With the advances of Web browsers (yes, browsers, don't tell me you didn't know there was something other than Internet Explorer please) the incompatabilities between them grew bigger and the need for settling the chaos so did too. That's how a set of standards was born, which are more like guidelines to be honest, that really don't affect our way of doing things, but it does set some things in stone for browser developers to keep in mind when doing their rendering routines. One of these wonderful standards is XHTML 1.1. XHTML is the mutation of HTML with XML (which was born thanks to HTML ideas) to make both languages compliant. At the same time XHTML innovates on lots of things that are now considered old from the original HTML language. On the other hand we have CSS 2.0 (that's, Cascading Style Sheets Two Point Syrup, I mean, Zero) which helps by moving all the final visible details of the website from the main HTML code, to a separate layout file, which defines the actual look of the page in the client's browser. By simply changing the style sheet you can completely modify the look of a well done CSS enabled web site, without touching a single line of the actual web site code. This becomes more interesting when you aren't doing plain HTML but doing more complex websites in languages like PHP or ASP were modifying a big file of code to just change the color or size of a font isn't practical, specially if you have one of those inferior types, the artists, doing the color change (just kidding, don't get all mad on me).

2.4. Another way of reading information

Another thing that's becoming more and more popular everyday are RSS feeds. RSS feeds are basically XML files with a specific format (just like HTML is and XML file with a specific format) that is used to transmit news. A typical RSS feed includes several articles, each with a header and a body. Since RSS is just an XML file, it has no attached way of how it has to be displayed (just like what I said before of separating HTML from the layout using CSS, in that case HTML is just an XML file, and CSS is the set of rules that tell the program how to render that XML data). RSS feeds are a very nice way of gathering news from several different sites and showing it all together using a common application, that could be a website (like Google's Personalized Homepage) or a program installed in your computer (like Blam!). RSS feeds bring a new way of gathering data to the Web 2.0 era and it's getting widespread, almost any news site today includes an RSS feed to syndicate it's news.

2.5. Binding it all up with duct tape

So, we have server side languages, we have ways of talking to the server after the page is loaded and changing content in it on the fly, and we have nice standards and tools for web design that make presenting the information to the user simpler and prettier. It sounds like we have all we need to develop full blown applications that run on a server and are controlled remotely by the user. If you want to know of some good examples of stuff done this way, check any Google's late developments, like Google Maps, Google Spreadsheet or Google Calendar. Also you can see most of these technologies applied on almost any pretty looking page, which are the main players of what we call Web 2.0. Other examples could be, Flickr, DeviantArt, Digg, Blogspot, and many, many more.

3. Web applications

3.1 The motivation

As with any big wave, there's a huge motivation behind it. The motivation of today's web is basically as I said before simplicity, but simplicity of what you ask? Sharing information of course! Making it easier for you, normal user, to share your photos, your thoughts, your rants, your favourites, your music and to basically communicate with people around the world in an easier way.

3.2. Bloggin' away

A huge boom today are the blog websites. People like to talk about what they think, freely and without anyone telling them to shut up. That's where blog sites come in. A Blog site allows you to have your own column space, where you can write several articles, maybe post a picture or two, receive comments, reply them and share any kind of information you can think of.

One of the big player's in this area is Google's Blogger. When you use Blogger you can instantly feel how comfortable it feels to navigate through the blog itself, and the publishing options available. When adding a picture to an article you can just drag it around as you would in a Word/OpenOffice.org Document, and WYSIWYG (What You See Is What You Get). Not only the site renders beatifully in any browser thanks to a well implementation of CSS and XHTML, it also makes many of it's action fast and transparent by using asynchronous communications between the server and the client to fetch for information.

In addition to all these nice features, Blogger, as many other modern web sites, have another way of communicating with applications, which is by using an API (Application Programmable Interface) which allows other applications (not necessarily a Web Browser) to communicate with the website to fetch and/or write information to it. So you could use an application installed in your computer to post a new entry to your blog without ever opening the Blogger website or another application (web or local) to read other's people blogs using RSS feeds.

3.3. Picturing it up

Another common thing you might find yourself doing, or trying to, is downloading those nice pictures you took with your friends at a party and wanting to share them with them. If you are and old shell, you might find yourself destroying your friends' email boxes with dozens of big pictures, that could take ages to send, and to receive. The new way of sharing this kind of information today is using web gallery services, like Flickr or Photobucket. This way you can upload the pictures and just share the whole gallery with a single link to your friends, making it easy for them to preview them, see them in a small size, download the full blown picture and make comments on your pictures. Some of these kind of sites have well developed applications that help you through the upload process by resizing your pictures before sending them, rotating them, adding tags to more easily find them and/or separating your pictures in categories.

Just like before, to talk about a leader in this area, I think I will personally pick Flickr. I haven't been an old fan of Flickr, just started it using recently because I wanted to share some pictures and my personal server was out of order, but what can I say, it does make your life easier. Some programs, like for example Picassa for Windows or F-spot for Linux, allow directly exporting your pictures to Flickr with the click of a button which makes sharing your pictures even easier, since you dont rely on opening your web browser at all, unless you want to take a look at the gallery before sending the link around.

3.4. Communicating

I'm sure you also write lots of emails, and chat a lot using some form of IM service like MSN, ICQ or Google Talk. I'm also sure that you've used sometime a webmail, and suffered from it's pitfalls, like being slow, ugly to navigate, hard to find old emails in it and also very limited in capacity.

Google has generously developed it's free web email service (with the optional feature to download it offline using a POP client) which changes the way you think of email. With Gmail tracking conversations is easier, since that's how Gmail treats replied emails, it shows them all together like if it was a conversation, making it really easy to re-read yours to see where the reply comes from. To make it even better, Gmail is purely based on the AJAX philosophy, so anything you do is done without reloading the page, in a very reliable and fast way.

To make it yet even better, recently Google has released it's new Google Talk service to compete with other IM services in the market. But not only the released a stand alone client based on the Jabber protocol (a widely know opensource instant messaging protocol) but they also integrated it with their Gmail services. This means that now your IM conversations are stored along with your email, since they are also conversations, you can receive and send messages in small popups in Gmail's website (this is were AJAX kicks in real good (tm) ) making your communicating experience streamlined and complete. As with any Google service you come to expect good searching capabilities, and that's where Gmail excels. You can search any of your conversations using Google's unique search technology, making revisiting old information a bliss, never lose old mails anymore.

4. Applications

4.1. Web enabled applications

I've talked about this a bit in the previous chapter, but let me mention it again here. One of the strong points of all this simplicity of sharing information goal, the barrier between local and remote is closing in. Everyday more and more web sites (or web applications if you would allow me, thank you) integrate better and look more like a normal application would, making the web application easier to understand and navigate. On the other hand, yet more and more local applications are being web aware, as in they include features to communicate with online services and make your tasks easier. For example you can directly upload some pictures from your photo management program to an online web gallery, upload some text to an online blog space, share your favourite links, upload and share videos or even send a picture from your photo management application to an online service to get it printed and mailed to your home address.

4.2. Next generation web browsers

I left the cherry of the cake for the last, because it tastes better now. So, you've read all the previous information, and now you know (if you didn't already) how applications can interact with web sites, and vice versa, and how many online services available today allow you to make information sharing easier. What more could you ask for? Well, the cherry of course. A next generation enabled web browser would combine all this tasks on it's own interface, to make all these things easier, without even having to remember or type the link of your gallery and or the web service. Such a web browser would not only allow you to surf the web, but to interfact with some famous web services directly, search in a broad range of search engines, and generally help you find or share information.

Such a thing already exists, it's a fork (that means they took the original program and modified it) of Firefox, and it's called Flock (www.flock.com). Flock innovates in a way never thought of before (or at least that I never heard of before), by integrating Blogs, Web galleries, RSS News, Sharing your Favourites (or Bookmarks for a Firefox user), among other things. Clicking on the photo icon in Flock for example opens a bar on the top where you can see your pictures, or someone elses, upload new ones, delete them and get notified when a friend of yours adds new pictures to his galery. Also, right clicking on some text you selected and choosing Blog this, quickly opens your configured Blog services's dialog to post a new entry to your blog using the text you just selected. It also makes it easier to upload pictures to blogging services. Favourites sharing allows you to use yet another free online service to share your favourites/bookmarks with other people, so they can see what sites you think are great, at the same time it allows to not only order them by categories but attach tags to them, for easier searching. Some sites can also be starred, so that when you open them a nice yellow star appears right next to the address bar, showing that this site is in your preferred visited sites.

5. Where do we go next?

You could go for a coffee, if you want. Oh, you actually meant Web wise, sorry. I see the future becoming more web centric. With more and more computer applications supporting some form of web service, and yet more and more web applications becoming more powerful and faster, I can only see a future were both things are completely merged into one. And no, I don't want to exaggerate on that as some people suggested before, I don't think the concept of running applications locally will disappear, nor the concept of opening a browser to look at web sites either. But I do think there will be a stronger merge, were almost anything you do on your computer has a possible link with an online service.

At the same time, with the coming of next generation Operating Systems supporting 3D effects on the desktop and more powerful computers, I also see a next generation of web applications supporting more interesting effects. For example I see Google Maps (an online service for browsing the globe and finding routes) becoming what Google Earth (a local online aware application that does the same but in 3D).

Of course, I'm no mage, and the future is open and no one's to take, but this seems like a plausible near future possibility to me, that's why I won't exaggerate on details of what could come next, like when someone decided to say that the world ended in the year 2000, I'm not that tragic. For now, let's focus on what we have today, find ways of improving it, and the future will come to us automatically.

I don't mean to have teached you everything, nor think I know everything, but hopefully this article could help some people understand what makes today's Web and maybe learn about some online services that they weren't aware of.

If you have anything to criticize, recommend and or add to this article, don't hesitate to email me, I'm wide open to hearing others people thoughts.

New development blog

I've opened a new blog, this time in pure english and dedicated exclusively to development, no personal crap of the kind you never want to hear about :)

I will move some articles from the other blog here, and start posting more development related stuff here. My two main activities right now are game development and web development. I will talk mostly about the later though, since it's what keeps most of my time being my day job, whilst game development is just a hobby, for now.