Thinking about Web 3.0

I'm in the mood for reflecting, and the topic my mind is currently hooked on is the future of the browser. We've seen lots of changes in basic technologies like HTML, XHTML, CSS and experienced how our beaten ugly child named Javascript has grown to be a proud, upright citizen in the country of recognized programming languages. It even got a child called XmlHttpRequest that people considered so beautiful that they changed the name of the internet to honor it and called it Web 2.0.

But the question that arises is 'where to now'? It's clear that the dividing line between the desktop and the browser is dissolving, you can count the number of GUI toolkits and offline APIs that have sprung from the ground over the last years if you're unsure. Almost every page you visit includes one or the other, starting from simple graphics effect libraries based on prototype.js or JQuery to full fledged widget collections with database abstraction layers like ExtJS.

The next logical step would be to integrate more and more of that into the browser itself, while laying out an open and investment secure standard. Just imagine writing fifty lines of code that show the user his calendar as neat as Outlook & Friends do, without him having to wait until the 1000kBytes of widgets have finished updating over the slow GSM mobile connection, and without you having to provide enough server power and network bandwidth to deliver those bytes to all your 1000+ users.

Making a local storage engine available and providing a complete offline runtime like Google Gears or Adobe Air do are in my opinion the first steps in the direction of bringing the graphics power of a desktop to the web. I'm curious whether my reasoning will meet up with reality, and if it does, then how long it will take.

Lightbox2 + Images + Automatic Scaling = Yay!

Recently I had the quick need for a floating image javascript and stumbled over Lightbox2. It's really easy to include in a web site and makes nice floating images with 'back' and 'next' buttons and smooth resizing between images.

However, the one feature that came up (and I found I'm not the first one with that need) is limiting the image size to something reasonable. So I've tweaked the code for the imgPreloader a bit to allow me to set a maxWidth and maxHeight property in the LightboxOptions.

        imgPreloader.onload = (function(){
            this.lightboxImage.src = this.imageArray[this.activeImage][0];

            var imgwidth = imgPreloader.width;
            var imgheight = imgPreloader.height;

            if( LightboxOptions.maxWidth ) {
             if( imgwidth > LightboxOptions.maxWidth ) {
              var factor = imgwidth / LightboxOptions.maxWidth;
              imgwidth = LightboxOptions.maxWidth;
              imgheight = imgheight / factor;
              this.lightboxImage.setStyle({
               width: '' + imgwidth + 'px',
               height: '' + imgheight + 'px'
              });
             }
            }

            if( LightboxOptions.maxHeight ) {
             if( imgheight > LightboxOptions.maxHeight ) {
              var factor = imgheight / LightboxOptions.maxHeight;
              imgheight = LightboxOptions.maxHeight;
              imgwidth = imgwidth / factor;
              this.lightboxImage.setStyle({
               width: '' + imgwidth + 'px',
               height: '' + imgheight + 'px'
              });
             }
            }

            this.lightboxImage.width = imgwidth;
            this.lightboxImage.height = imgheight;  
            this.resizeImageContainer(imgwidth, imgheight);
        }).bind(this);