Atomeo

Better Objects Using jQuery

2009-07-08T02:51:00.000-07:00

I've been working almost exclusively with JavaScript building single page applications recently. jQuery has made developing the apps enjoyable but one area I find a bit awkward is creating complex objects.

Classes work well but can be cumbersome when creating a user interface since the object reference returned from the constructor is not a DOM node but a JavaScript object. Therefore, in order to insert the user interface component into the page, a special method like getHTML must be available for that object. This isn't terrible but creates more complicated code. Here's an example user interface widget - a simple box displaying a name:

function Widget(name) {
   var container = $("<div/>");

   function setName(newName) {
       name = newName;
       container.html(name);
   }

   this.getHTML = function () {
       setName(name);
       return container;
   };

   this.getName = function () {
       return name;
   };

   this.setName = function (newName) {
       setName(name);
   };
}

And the code that uses it:

var nameWidget = new Widget("Dave");
var widgetNode = nameWidget.getHTML();
$(document.body).append(widgetNode);

This isn't too bad but gets a bit ugly when you need the ability to hide, show, animate, or do anything interesting. The choice is either to attach more methods to the Widget class or work with the jQuery object returned by getHTML. Pattern-wise, adding more methods to Widget is the cleanest but could require creating a lot of methods. Working with the jQuery object returned by getHTML is easy but leads to managing two objects in your code: nameWidget and widgetNode

What would be really nice is the ability to call any jQuery method on the nameWidget object PLUS all the methods specific to the Widget class. It occurred to me that this could be possible with the addition of a small jQuery Plugin I've dubbed Methods.

(function ($) {

 $.fn.methods = function (arg0) {
  if (arg0)
  {
   return this.each(function (i) {
    $(this).data("methods", arg0);
   });
  }
  else
  {
   return $(this).data("methods");
  }
 };

})(jQuery);

This plugin adds the methods method to jQuery. A collection of functions can be passed to methods to attach it to a specific jQuery object. Calling methods then returns the collection of functions. Here's a rewrite of the Widget class to explain this better:

function widget(tag, name) {
   var container;

   container = $(tag)
       .html(name)
       .methods({
           getName: function () {
               return name;
           },

           // Return "this" for chainability
           setName: function (newName) {
               name = newName;
               container.html(name);
               return this;
           },

           // Add the end method for chainability
           end: function () {
               return container;
           }
       });
   return container;
}

And the code that uses this:

var nameWigdet = widget("<div/>", "Dave");
$(document.body).append(nameWidget);

Now we have a nameWidget that directly corresponds to the user interface component and, using jQuery, can be inserted anywhere in the page. To access the object's specific methods, you simply call methods. Here's an example that shows the combination of the methods and chaining:

nameWidget
    .hide()
    .methods()
        .setName("Bob")
        .end()
    .show()
    .addClass("widget");

Since the Methods plugin uses jQuery's data method behind the scenes, the nameWidget can actually be retrieved through a DOM lookup.

var nameWidget = $(".widget")
    .hide()
    .methods()
        .setName("Sally")
        .end()
    .show();

And that's it. In the end, Methods is a simple jQuery plugin that lets you create complex objects with custom methods and closures and can still be used like a regular jQuery object.

Upgrading Dell Mini to Ubuntu 8.10 + Netbook Remix

2008-11-16T13:29:00.000-08:00

Since I want to upgrade to Ubuntu 8.10 and install the Netbook Remix, the first hurdle to overcome was the lack of a built-in optical. The folks at the Ubuntu Mini blog have a great post about upgrading the mini to Ubuntu 8.10 and provide details on installing Ubuntu from a USB Drive.

Unfortunatley, their instructions on using the built-in "Create a USB startup disk" resulted in a "Missing Operating System" error when trying to boot from the USB Drive. I think the USB Drive I bought was subject to this error. However, after a bit of searching, I came across the most excellent UNetBootin.

UNetBootin is not is the official Ubuntu repositories but the instructions on the site are easy to follow. In order to get UNetBootin to work I had to use synaptic to install the p7zip-full package. Other than that, the instructions on the site worked as expected and I ended up with a bootable USB Drive in minutes. And as an added bonus, I didn't have to fix the USB mounting problem after install.

I neglected to disable compiz in Preferences > Appearance > Visual Affects so when it came time to installing the Netbook Remix packages, the display was acting really wonky. Disabling Visual Affects after the fact made everything work fine but I would still recommend disabling them in advance. If the lack of visual affects is a turn-off, then you'll be pleasantly surprised with the nice visuals the Netbook Remix employs.

Dell Inspiron Mini Has Arrived

2008-11-16T08:29:00.000-08:00

The Dell Inspiron Mini I ordered back in mid-September (over 2 months ago) finally arrived. The wait time was atrocious and I don't really believe Dell's excuse about a global shortage of components causing the delay (other orders for the mini were still shipping much faster) but its water under the bridge. Plus I can vent in the customer satisfaction survey they sent me.

The size of the unit surprised me. Since it has a higher resolution display than the original Eee PC I played with about a year ago, I assumed the mini would be a little larger too. Not so, the mini is roughly the same size. The track pad is much easier to use, however, and the keyboard isn't nearly as bad as reviews make it out to be (but I haven't tried out every netbook either).

The next step is upgrade from Dell's version of the Ubuntu 8.04 to Ubuntu 8.10 and install the Netbook Remix packages. More posts on this to come.

Nice JavaScript Animation

2008-11-14T00:02:00.000-08:00

I just popped over to Ubuntu's site to download the Intrepid Ibex (Ubuntu 8.10) and saw a very well produced animation made entirely out of JavaScript. I'm not at all surprised to see that Flash was snubbed (given that Ubuntu is Open Source) but was impressed with the smoothness and quality of the animation.

Nicely done!

Enumerating Objects in JavaScript

2008-11-07T00:17:00.000-08:00

Enumerating through objects is something I only occassionally do in JavaScript, but when it does come up, I always find it a bit unintuitive. Here's some sample code for the future me that is faced with this task again:

var dataObject = {
    foo: "bar",
    one: "fish",
    hello: "world"
};

var key;
for (key in dataObject)
{
    document.write("Key: " + key ", Value: " + dataObject[key]);
    document.write("\n");
}

This code will produce the following lines:

Key: foo, Value: bar
Key: one, Value: fish
Key: hello, Value: world

Victoria Open Web

2008-10-22T21:35:00.000-07:00

The Victoria Open Ajax & Web 2.0 group held its first hack night earlier this month. Not a bad start and we figured out how to proceed with this loosely coupled group. In November we will be having another hack night and tackling Greasemonkey scripts. Hopefully we'll actually write some code and learn a bit at the same time. Meeting details coming soon-ish.

What is the purpose of the group? I suppose that is different for each member, but my main goals are to:

Expose myself to new technologies and techniques
Meet other Web nerds in Victoria

Also, since some participants are not Facebook users, we decided to use Google Groups instead. You can find us on google at, Victoria Open Web. The group is public so feel free to sign up.

Why Lenient Browsers are Evil

2008-10-17T23:43:00.000-07:00

Evil might be a strong word, but it accurately conveys my frustration with web browsers and how their overly forgiving parsing rules can lead to a lot of wasted time.

The particular browser leniency I am talking about is the auto-insertion of the <tbody> element into an HTML table. Given that I try to use semantic markup whenever possible, I rarely use tables and therefore my knowledge of table markup goes back to pre-web 2.0 to when every part of a page resided in a table cell. At that time, table markup typically looked like:


<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</table>

Yes, this is really simple and in reality would contain a table within table within table and nasty shims, but I think you get the point. However, what isn't apparent from this markup (and you are excused from forgetting) is that this is an invalid table because of the missing <tbody> tags around the table row. Instead of breaking the page though, the browser will just auto-insert the missing tags into its internal version of the page (a.k.a the DOM).

This doesn't seem all that evil yet and really just makes writing the HTML easier. However, fast forward this browser trait to the world of Ajax and manipulating the DOM and it becomes rather annoying. For example, take the same table and add some ids:


<table cellspacing="0" cellpadding="0" border="0" id="parent">
  <tr id="child">
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</table>

Then run some simple JavaScript to delete the table row:


var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.removeChild(child);

And boom! This doesn't work because the child element is not a child of the <table> element, but of the magically inserted <tbody> element. The DOM would actually look like this:


<table cellspacing="0" cellpadding="0" border="0" id="parent">
  <tbody>
    <tr id="child">
      <td>Foo</td>
      <td>Bar</td>
    </tr>
  </tbody>
</table>

The terrible thing is you would not know this unless you used a tool like Firebug to inspect the DOM and see that the browser inserted the <tbody> tag to "help" you.

Victoria Open Ajax & Web 2.0 Developers

2008-09-23T21:38:00.000-07:00

A new group of geeks is forming in Victoria known as the Victoria Open Ajax & Web 2.0 Developers. For some time now, there has been a Vancouver Ajax & Web 2.0 Developers group that would participate in regular "Hackathons" and organize other events for learning and information sharing. Being based in Victoria makes it difficult to participate in these events, but it turns out there are enough like-minded people here to create our own group.

The Victoria group is just getting started and we're using Facebook to get the word out. If you are interested, feel free to join the Victoria Open Ajax & Web 2.0 Developers group on Facebook and find out about soon-to-be-scheduled events.

Netbook Blogs

2008-08-19T13:23:00.000-07:00

Netbook is the latest term for the growing variety of small and inexpensive notebook computers that are taking the computer industry by storm. Naturally, as a web developer that beleives Web Applications will be the most common type of application a computer user interacts with, I'm interested in these gadgets too. So much so that I wanted to share two blogs that cover the industry and its products quite well:

Liliputing
EeePC.net (Not just about the eee pc)

Currently, I'm considering the new Dell Inspiron Mini as it has most of the features I want and looks sharp too. One feature that none of the current Netbooks have is a rotating screen (tablet style, like the OLPC). To me this seems like an obvious feature as these small machines could then double as ebook readers. Personally, I would pay an additional $50.00 to $100.00 for this features.

Update: Naturally, a day after lamenting over the lack of a tablet mode in in Netbooks, Intel makes shows-off the Classmate PC Tablet.

Google Hosting JavaScript Libraries - But Don't Forget the Hash!

2008-05-28T22:16:00.000-07:00

JavaScript libraries are great. Anyone that has done a significant amount of JavaScript development knows that using a library is the only sane way to develop an application. However, the downside has always been that the hefty size of the libraries leads to slower loading applications.

I've often discussed with colleagues that a potential solution is to have a "mega-performant" 3rd party site host the libraries. This way any website using the libraries could source them from the same domain leading to a higher chance that your users would already have the libraries cached in their browser. Well, it looks like this is no longer a pipe-dream now that Google has announced they are hosting several popular JavaScript libraries.

However, hosting libraries on a common domain isn't the only way to tackle the large download issue. Douglas Crockford has an excellent suggestion to improve library performance through the use of a hash code making it possible for browsers to reuse libraries regardless of the site hosting them. I won't go into the details of the his idea (follow the link for that) but mention that the one major flaw is that browsers must implement this. Even if the browser vendors do add this feature it would be years before it could be used by Web Developers.

This brings us back to the hosted libraries solution. It can be implemented now (not dependent on browser vendors) but comes with the downside that the site hosting the libraries is in complete control of what libraries are available. Google might not be overly evil but it probably won't host just any library. There are some simple solutions to this however.

Instead of Google hosting the libraries, a benevolent consortium backed by industry (Google, Yahoo, Microsoft, etc.) could provide the hosting and provide a very open means to upload any library. This is a bit idealistic and could be subject to abuse, but is probably doable.

The best and most realistic solution, however, is probably to push browser vendors to still adopt the hash attribute. Google has stated it will work with the browser vendors to possibly bundle the libraries with the browser, but this will create an even bigger obstacle to non-approved libraries. I like my web open and full of options and hope the hash solution is considered fully.

Update: Looks like Google will be providing secure access to the libraries as well. Nice move and something that Yahoo does not provide with YUI.

Tips to Drink More Water (and earn nerd points)

2008-05-13T08:51:00.000-07:00

Drinking water is good for you. However, this post isn't about trying to convince you of that. Instead let's assume, like me, you want to drink more water but find it difficult to consume eight 8-ounce glasses per day.

To help me drink more water I need a glass of water at my desk and a reminder to actually drink it. The reminder is a crucial part because I have had a bottle of water sitting at my desk for weeks and barely touch it. The problem is I tend to get engrossed in what I'm doing and forget to drink.

Fortunately, the solution is simple. All I need is a system that forces me to stop what I'm doing and reminds me to drink a glass of a water periodically. If you use Ubuntu or another Gnome distribution (I'm sure this can be adapted to work on any OS) you can set this up in a few easy steps with Gnome's session manager, the AT command, and a bash script.

Create drink.sh in your home directory (anywhere is fine but you'll need to adjust the instructions accordingly) and copy and paste the following code into it:


#!/bin/sh

if [ "$1" = "schedule" ]
then
    at 9:00am < $0
    at 10:00am < $0
    at 11:00am < $0
    at 12:00pm < $0
    at 1:00pm < $0
    at 2:00pm < $0
    at 3:00pm < $0
    at 4:00pm < $0
    at 5:00pm < $0
    echo "Drink reminders have been scheduled."
else
    /usr/bin/gnome-screensaver-command -l
fi

Don't forget to give this file executable permissions. One way to do this is to right-click on the file, select Properties, select Permissions and then check the "Execute" checkbox.

To verify this works, open a terminal (Applications > Accessories > Terminal), navigate to your home directory, and type ./drink.sh (WARNING: This will cause Gnome to lock you out of your current session and you will have to unlock it with your password). If this worked, go back to your terminal and type ./drink.sh schedule. You should see several lines of output and a final line, "Drink reminders have been scheduled." If you don't see this, stop and investigate.

Now that this is working, you just need to tell Gnome to run the drink scheduler upon logging in. To do this, go to System > Preferences > Sessions and click "Add" under the "Startup Programs" tab. Enter whatever you like for the Name and Description, just make sure the Command points to your drink.sh file and passes the "schedule" argument (e.g. /home/username/drink.sh schedule).

And that's all there is to it. Next time you log in to your computer the drink scheduler will run and tell your computer to lock your screen every hour from 9:00am to 5:00pm. If you want to be reminded to drink at different times, just adjust drink.sh accordingly (should be fairly obvious what to do). As an added hint that it is time to drink, I set my screensaver to Ripples.

Here's to better health!

P.S. I initially tried to set this up with CRON but ran into limitations getting CRON to work with Gnome, as best summarized in this thread. If you know how to achieve similar results with CRON, please let me know.

Get Ready for Google Apps Engine - Learn Python and Django

2008-04-09T08:53:00.000-07:00

I've recently began learning Python and the Django Web Framework for a project I am working on. And with Google's recent App Engine announcement it seemed like other developers might be interested in learning these technologies too.

My first bit of advice is keeping an open mind. If you have never written Python code before, but have a background in other languages like Java or PHP, you are in for a bit of a shock (or at least I was). Python's syntax is minimalistic (and not very flexible) with the goal of making Python scripts look very similar from programmer to programmer and thus understandable by all. After fighting syntax errors and swearing at gedit for auto-inserting spaces instead of tabs I've actually come to like Python a lot.

I have no experience with Ruby on Rails but hear rumors that Django has much in common. Regardless, Django is a lightweight framework that provides the developer with a lot of shortcuts and conveniences. Less configuration hassles and more code (the Python kind that is succinct and readable).

So with an open mind, here are some resources that should help you on your way:

Dive Into a Python - a freely available website that provides a good introduction to Python. As an added bonus you can download a PDF or HTML version of the book to read while (gasp) offline;
Python Tutorial - An indispensable reference;
Django - download the Django Framework and follow the 4 simple tutorials.
Django Book - I must admit, I just found out about this free resource and haven't had a chance to look through it yet;
DjangoSnippets - User contributed code snippets. Sometimes looking at someone else's code can be invaluable and save a lot of time;
Django Screencasts - I prefer reading through well-written documentation, but if you like fancy screencasts, these should help.

This short list contains all that you need to get going. Grab your favourite editor and marvel at how easy web development can be. You'll be mocking your J2EE-toiling friends in no time.

... and if you really want more to read, check out this Top 30 Django Tutorials List.

Open Web Vancouver

2008-03-30T18:11:00.000-07:00

Open Web Vancouver is coming April 14 & 15 to Vancouver Convention & Exhibition Centre. I'll be attending this year and I'm quite excited as I haven't had the opportunity to attend many web conferences in the past.

The sessions look great and I am particularly looking forward to:

Firefox 3 Beta 4 and Prism 0.9 Work Very Well

2008-03-11T22:31:00.000-07:00

As promised, here is a follow up on my previous post about running the latest version of Prism as an extension. Good news is: Prism on Ubuntu actually works now.

It would seem that installing Firefox 3 beta 4 from the Mozilla site solved a lot of the problems I was having. So far I haven't had any problems creating Webapp shortcuts for the Google Apps I use and as an added bonus it is easy to select an alternative icon (the favicon is a bit too small for some uses).

The most noticeable improvement is really not Prism related but due to the improvements in the Gecko Platform (see beta 4 release notes). Webapps start significantly faster now.

Another nice feature is that Prism instances run in a separate process now. It used be that all Webapps shared the same process. A poorly written Webapp should not be able to take down all Prism instances (in theory). Additionally, since cookies are isolated to each instance of Prism the chance of one Webapp running in Prism making an XSRF is greatly reduced since it won't have access to session cookies from other Webapps.

Happy Webapping

Prism: Now an Extension for Firefox 3

2008-03-07T21:30:00.001-08:00

Mozilla has announced that Prism version 0.9 is now available as an extension for Firefox 3. See the official Mozilla Labs announcement or Marke Finkle's Blog for more information.

Installing the extension is simple but does require Firefox 3 since it relies on Firefox 3's ability to allow other applications to use its XULRunner platform. ~~As an Ubuntu user, the simplest way to install Firefox 3 is to enable the Unsupported Updates Repository and use Synaptic.~~ Update: Save yourself some headaches with the Prism extension and follow the instructions at Tombuntu (still very simple and applies to Firefox beta 4 too). Once installed, start Firefox 3 and install Prism.

My first (and only) attempt at converting a website to an application failed. The problem was that the wizard wouldn't actually save the Web Application icon to the desktop. And without this I saw no way to launch Prism. I hope this is a Linux specific bug that will be ironed out soon. I'll post again once I get to play with Prism more.

As an aside, using Firefox 3 was nice. Compared to Firefox 2, it felt a lot snappier and faster at rendering pages. Hopefully some lagging extensions will support Firefox 3 soon.

Ubuntu Brainstorm For The Win

2008-02-29T21:25:00.000-08:00

The new Ubuntu Brainstorm site has been launched and is off to an enthusiastic start. In a nutshell, this site gives users the ability to submit and vote on ideas for Ubuntu. The site has been live for less than 2 days and has already received over 1500 submissions. It will be interesting to see how Ubuntu development balances the desires of enthusiastic users and Canonical's needs.

One novel idea (of the many good ideas) proposes a new system for installing fonts. If you would like to voice your Ubuntu ideas, head on over to Brainstorm.

Cloud Samurai: New look for Atomeo

2008-02-15T16:06:00.000-08:00

If you are reading this post from an RSS Reader, head on over to Atomeo to see the new "Cloud Samurai" theme. With previous blogging attempts I got wrapped up in the development and maintenance of the blogging platform (yes, I'm talking about you WordPress) and hardly posted to my blog. With my latest attempt at blogging I decided to use Blogger and focus on the content. So far this has been working out so I figured it was high-time I gave it a better skin.

I learned a lot about image creation from this project since the Samurai Kite image was created from scratch (hand sketched, scanned, GIMPed and Inkscaped). Knowing what I know now I think I could create a better image (I should have used Inkscape from the start) but I have run out of steam and want to move on.

Let me know what you think.

Douglas Crockford's Proposal for HTML5

2008-01-21T11:13:00.000-08:00

I was reading through a blog post and found a link to Douglas Crockford's Proposal for HTML 5. It's a quick read and very high level but interesting nonetheless. Overall, the theme is small tweaks to HTML that will have a big impact on making web application easier to develop and safer to use.

If you have a passing interest in understanding how this portion of the web might evolve, I'd recommend the read.

Update: Minutes after publishing this post, the W3C made the HTML5 proposal an official recommendation. Check out the differences between HTML4 and HTML5 for an even better indication of how the web might evolve.

Photos From Japan

2008-01-18T17:39:00.000-08:00

I wouldn't be much of a geek if I didn't snap this shot of a Red Panda (Firefox) at the zoo.

And here is a picture of a Tanuki (Japanese Raccoon Dog) at the zoo. Fans of Pom Poko should appreciate this. Getting a picture of this nocturnal animal required the zoo keeper throw some food into the pen and wake him up.

Get Bleeding Edge Apps for Google Apps For Your Domain

2008-01-09T08:14:00.000-08:00

If you are a happy Google Apps For Your Domain (GAFYD) user but miffed that regular GMail users (non-GAFYD) get the latest and greatest app enhancements before you, fret no longer.

This may be old news to some but I just found out that it is possible to opt into receiving the latest features for GAFYD at the same time as your non-GAFYD counterparts. To do this, go to your domain Control Panel, click Domain Settings, scroll down and check the "Turn on new application features before they are rolled out..." option.

Now wait.

Update: You might have to wait quite a while. When I enabled this feature I only noticed a bleeding edge version of Google Docs when a new update was rolled out for the first time. I.e. clicking this option does not seem to upgrade your Apps retroactively.

OpenWRT: Very Impressive

2007-12-08T13:39:00.000-08:00

Just a quick post to tell my two readers about the OpenWRT project. This is a Linux-based community driven project that provides an alternative Operating System for some routers. Wikipedia offers a pretty good overview of what the project is about.

Since you rarely interact with your router, except to configure it, you might not see a point to installing a new OS (firmware as it is frequently referred to) on it. But a router doesn't have to be as boring and feature limited as it comes from the manufacturer. By installing OpenWRT you can expand the capabilities of your router immensely.

Even if you don't care about adding any new features to your router, OpenWRT can simply provide you with a much nicer Web-based administrative interface. And since installation is so painless there really isn't a downside. I installed the version of OpenWRT provided by the X-WRT project. This project's goal is to make the OpenWRT firmware simple to install and more accessible to end users. They have achieved this rather nicely.

Upgrading the firmware on my Linksys WRT54G was as easy as downloading "openwrt-wrt54g-squashfs.bin" to my desktop, going to my routers existing web-based firmware upgrade page, and uploading this file to the router for installation. This went super smoothly and actually maintained my routers previous settings and passwords so my wireless access point was up and running in minutes. Make sure your computer has a physical connection to your router and be patient as the "success page" will display before your router is up and running.

Next time I have to buy a router, I will definitely make sure that it is supported by the OpenWRT project.

P.S. Yes, I'm procrastinating on painting my kitchen ceiling.

Semi-Transparent (Dithered) GIF Slows IE

2007-12-06T14:33:00.000-08:00

I recently had an odd page performance problem in IE6 & 7. The page redraw was quite slow on window resize and the page would react very slowly to mouse hover events. I spent hours investigating JavaScript bugs and possible mark-up issues with no success. In the end, removing a dithered GIF from the style sheet did the trick.

Once again, I was baffled by IE's shortcomings (did I mention all other browser's performed normally?) but had to move on and find a solution. I'm posting this article to take a break from ranting about IE to my co-workers and in the hopes that other frustrated developers might stumble upon this when trying to understand why a simple web page is performing so poorly in IE.

First, you might be wondering what I mean by a dithered GIF. It's a checker-board-like image that alternates between solid colour and full transparency. Below is an example of what this GIF "looks" like.

The grey squares represent fully transparent pixels (like only a GIF can do) and the white squares represent opaque pixels. The idea is that this image can be used as a tiling background image and allow images underneath it (from parent elements - think body background) to show through. This can create a nice effect and might sometimes be used to mimic alpha-transparency in PNGs when IE6 support is important. Or so I thought. Turns out the performance hit that IE 6 & 7 users take don't really make this a viable option.

I'm not sure why IE performs so poorly when using the dithered GIF as a background image but a pretty good solution was to replace the GIF with a white PNG that had its opacity set to 50%. This solved the IE performance problems and the real alpha-transparency looked better in IE 7. The only problem was that IE 6 rendered the PNG as solid grey. To fix this the star hack came in handy to set the background colour to solid white. The slight alteration to the page's design was far outweighed by the performance boost so this made the solution quite acceptable.

Alternative Solutions that Didn't Work

Reproducing the dithered GIF in the PNG format (keeping the binary transparency) does not improve performance
Adding full PNG support to IE 6 through the HTC file does not work on background images
Although it is possible to set a background colour for a PNG (I believe for the purpose of degrading when alpha-transparency is not supported), IE 6 ignores the setting and just defaults to grey

And there you have it. Hopefully this was helpful or at least interesting. If you have any insight into why IE performance is negatively impacted by the dithered GIF, please share.

Picnik For Linux Users

2007-12-05T08:38:00.000-08:00

Much of the blogosphere has been talking about Flickr finally adding ~~more advanced~~ some photo editing features through a partnership with Picnik. Advanced photo editing features have been on my Flickr wish list for a long time, so I was excited to take it for a test spin and see how well it works.

Having tried Picnik in the past, I was less than impressed as a Linux user. On my first attempt to upload an image I came across a Linux specific bug that prevented me from seeing any of my image files in their file picker. A month or so after reporting the bug I heard back from Picnik and the bug had been fixed (a bad regex was to blame). Great, now I can try Picnik again, or so I thought. Although I could select files, every attempt to upload failed (badly - taking Firefox down with it). So I reported the bug and promptly forgot about Picnik after being told it was due to a bug in Adobe's Linux Flash player and that I should take it up with Adobe.

Fast forward to today and Picnik is available through Flickr - and working much better on Linux (this is probably due to the fact that I don't have to use Picnik's file uploader since files are already on Flickr).

How is Picnik from a Linux users point of view? Awesome because it brings photo editing tools into the work flow of uploading and organizing photos in Flickr. Picnik also does a good job of making image editing tools more understandable than PhotoShop or the GIMP and increasing the chance that I will actually use them.

Picnik still leaves room for improvement however. The application (flash-based) took a long time to load (a full 60 seconds). For now, I'm attributing the slow load to poor Picnik server performance after the Flickr launch. This will be a show stopper if it doesn't improve though. Also, some of the image editing tools performed quite well while other tools made the application unresponsive and hard to work with. Perhaps these are rough edges in the Linux Flash Player or just problems with Picnik itself.

Overall, Picnik is a nice option to have integrated into Flickr. As I get more time to play with the tools, I'll post tips and tricks that might be useful.

Prism Available for Linux

2007-11-04T17:50:00.000-08:00

As previously posted, the latest version of WebRunner has been released under the name Prism. Until recently, Prism was only available for Windows users but now Linux and Mac users can use Prism too. Running Web Apps in Prism has three advantages:

Reduces the frequency of Firefox crashes. I'm not sure why Firefox crashes as often as it does but I suspect it has to do with all the extensions and running Web Apps like GMail all day long. Hopefully Firefox 3 will fix these problems, but isolating GMail to Prism has already helped a lot.
Reduces the chance of a cross-site request forgery (xsrf) since cookies from Web Apps that run for a long time are not available to malicious sites (assuming you would come across a malicious site using your regular browser and not using Prism)
Reduces needless browser UI elements, freeing up more space the the Web App itself.

I have been using WebRunner/Prism for a bunch of Web Apps I use and, generally, I have been happy with the results. The latest release under the Prism name has made some key improvements:

Spell checker works all the time. I'm highly dependent on the spell checking feature in Firefox in order to compose semi-intelligent email. Suffice it to say, using GMail in WebRunner made for confusing, if not humorous, reading on behalf of my email recipients.
The cursor is visible when composing email in GMail. Sounds weird but actually trying to write an email without a cursor is even weirder.
Prism start-up time is faster. Not only compared to WebRunner but Firefox 2 as well. It also seems that Prism is able to load the Web App faster, but I have no tests to back this up.
Favicons appear in the panel. Before the Prism release all Web Applications running in WebRunner used the same WebRunner icon. This improvement sounds trivial but is a big usability improvement, making it much easier to move between minimized applications.

There are a few annoyances/bugs with Prism worth noting:

Opening multiple Web Applications simultaneously throws errors
No Linux version of the favicon resizing/styling tool available to Windows users
General rendering weirdness due to the fact that Prism uses the still-evolving Mozilla 1.9
Lack of Prism documentation on webapp bundles that were used in WebRunner
Cookies are shared between all Web Apps running in Prism. This is the norm for a browser, but leads to the xsrf vulnerability. Although less of a concern since most Web Apps running in Prism will be trusted, it would still be nice to tighten the security. Perhaps Web Apps launched from a webapp bundle instead of a uri could keep cookies isolated to themselves?

If you are a Web Developer and interested in seeing how users might be interacting with your Web Applications in the future, definitely give Prism a spin. Tombuntu posted instructions on installing WebRunner on Ubuntu and these are still applicable to Prism. Personally, I extracted the Prism archive to /opt/prism and then saved all webapp bundles in my home directory.

WebRunner is Now Prism and an Official Mozilla Labs Project

2007-10-26T08:14:00.000-07:00

If you are a regular reader of Planet Mozilla this is not news to you. However, if you are not a reader but you are interested in seeing how Web Applications will evolve, then the news of Prism becoming an official Mozilla Labs project might interest you.

Prism is currently only available for Windows but this should change in the next week or so with the release of a Linux and Mac version. However, WebRunner (the precursor to Prism) is available for all platforms now. My advice is to wait until Prism is available on your platform as it has a number of bug fixes that have made WebRunner annoying to use (no spell checker being the biggest). My experience with WebRunner has been mixed. The idea is good, but the project was very much in its infancy and not ready to replace Firefox. The fact that Prism is an official project now bodes well for its future and I look forward to new versions.

The big question, however, is: how many more times will WebRunner/Prism be renamed?