Phine Solutions web work notes

Pre-ordered Snow Leopard and received it on Friday (the official release day) afternoon via Fedex. For a total order of $29 this is some treatment.

The upgrade was smooth for me. Just pop in the DVD and let it run the course. There are some nice interface tweaks, and not to mention the saved disk space. But a few enhancements that I like the best are:

• Access over local network are much much faster. I have a shared drive in the LAN and it used to be a pain to view large images and QuickTime movie files over the network. After the upgrade, the delay is gone and the video plays smoothly.
• The new QuickTime Player has the video, audio and screen recording built in now. Since my MacBook has the camera and microphone built in, making an video is as conveniently as making a few clicks and start talking.
• The Microsoft Exchange support. Works very well. Enough said.

I’m no Apple fanboy but sometimes I love using Apple product because it provides an “environment”. An environment that has a nice mixture and balance of great design and usability. For us web builders, this is both an influence and inspiration. It helps us, in a subtle way, to make product with good taste and also works.

So the new Yahoo home page has been rolled out for a few weeks. For the most part, I like the new home page. It provides more information with some seemingly moderate changes. However, there are a couple of design points that I think can be made better.

The first is the big flyout from the “MY FAVORITES” menu. Basically when you move your mouse over an item, a flyout will pop out. I know it has its own merit, and the feature gives visitors shortcuts under the main category. But a big flyout box that fills out most part of the web page can be quite annoying, especially sometimes it was triggered by an accidental hover over the links. Any most of time I just want to click on the menu and go to my favorite subject – with this flyout action, I have to deal with some “delay” before getting where I want to go.

My suggestion: make the flyout smaller, simpler and more importantly, to load quicker.

Same place, “MY FAVORITES” list can get longer and there is not enough slots to display all of them,  to find the rest of the favorites, I have to click on a little “>” button to sort of go to the second page of the favorites.

Why not make this one a flyout then? Definitely the right feature for the right place.

Update:

Looks like Yahoo just updated their page design. Now when you hover over the left menu, a much smaller flyout will show, which you can click on to open the quick view. Much better design than kicking open the annoying page view blocker directly.

Uploading files through a web page is supported in HTML, but with some serious limitations. Usually we set up a Multi-part html form which has an input field that automatically comes with a “browse” button for end users to select a file from local file system to upload, but only one at a time. During which the page will pretty much hang until the web server complete the uploading process and returns the next page. Certainly you can provide multiple input fields to add a little bit of convenience, but there is really no way to upload multiple files at once using just html, and it is quite a tedious process if there are a lot of photos to upload.

Recently I wanted to make uploading photos easier one my site. I want my user to be able to upload any number of photos all at once, and be able to view the uploading progress as well. Since the basic html does not provide this kind of capability and nor does the client side script like JavaScript, “plugins” have to be used. I basically have two options to use: Java Applet or Adobe Flash. Microsoft Silverlight is another tool which can create rich client on the browser, but since it is still a relatively new player in the field I didn’t put a lot of considerations in it.

Two real life examples are Flickr’s photo uploading tool and Facebook’s photo application. Flickr uses Flash and Facebook uses Java Applet respectively. Both of the uploaders are integrated nicely to match the style and flavor of their sites and most importantly are easy to use. In a quick comparison, Flickr’s uploader is light and straightforward. You can select multiple files and see the actual progress during uploading. But the Facebook counterpart lets you to view your computer’s file system from the tool so making file selection is easier. Plus it has some simple photo manipulation functionality like rotating the photos in place.

Flickr’s photo uploader

Facebook’s Photo Uploader

To choose which technology to use we have to look at pros and cons, which probably varies in individual situations. I’ll try to provide some key areas that I found useful to take into consideration when making the decision. Although I ended up choosing the Applet, the decision was largely based on the fact that I’m more familiar with Java and there is really no time for me to pick up Flash and go from there. For some, Flash might be a better choice.

Browser compatibility Plugin technology

Almost all the modern browsers today support Java and Flash. And there is no need to write different versions of application to deal with the browser issues. However, due to the fact that Java and Flash themselves are constantly being upgraded it is necessary to watch the code and make sure it is supported by different Java or Flash versions out there. I think when Adobe released Flash 10 there was some security implementation that broke a lot of Flash app. Sun has been very good on making the newer version of Java backward compatible. Although the newest Java technology is at version 1.6, it is backward compatible to 1.4 and 1.5, which pretty much covers all Java versions out there on user’s machines.

Both Java Applet and Flash requires the plugins to be installed so browsers can display them correctly. Sometimes they come with the browser installation by default. I don’t have any data but it seems both Java plugin and Adobe Flash plugin have good penetration on the popular browsers today (Firefox, IE etc.).

The slowness when loading Applet, at least the very first time.

Applet is slow to load because the browser has to start Java JVM first then start the Applet. A user’s machine may be hung for a few seconds to get over this. So if an applet is a beast and a user has a slow internet connection it won’t look to well. I would say this was a more serious problem a couple of years ago than now. Sun has been improving the Java browser plugin technology and the loading time has been much better with the modern browsers today. I noticed a significant difference between Firefox 3.5 and IE6 on the same machine, with FF beating IE hands down.

Flash, on the other hand feels much lighter, probably due to the fact that Flash is a smaller tool. But the smaller size also comes with limitations in terms of the application capabilities.

Nonetheless I’ll give Flash one point here.

Application capability

Since Applet is written in Java language it pretty much has everything that Java provides — minus those restricted by the security constraints of course. The rich GUI interface and user interactions and programming APIs are extensive. So it definitely has more capabilities than Flash can provide. Using the file uploader as an example, with Java I can develop GUI interface that user can only view and select multiple files from harddrive, but also drag and drop files to a certain destination, which is a pretty regular task on a desktop. With the rich image libraries available Applet can also have a lot more “pre-processing” power like reducing image size, rotating image to a certain orientation and converting images or adding watermarks, etc. Although it is debatable whether whether we should put this kind of the processing functionality on the client side, because it will most certainly make the client heavy to load and expensive to run, the capability is there. Choosing wisely, they are great additions to your web site.

Since Flash is lacking the capability on interacting with desktop things listed above are impossible to be implemented. So I give Applet a point here.

Code development and IDE

Java is a mature programming language and the development support reflects this. Learning the language aside, it is quite easy to set up a development environment and start coding. Flash on the other hand, has a smaller developer base and there is less information on the web that I can use to pick up this tool quickly. I might have a little bias here since I’m more familiar with Java. Flash to me, is a lot like a designer’s tools.

So I give my bias point to Java.

Available products

There are products already developed in both camps. Some of them are free and some of them require a fee. Nothing can beat free, but you get what you paid for. Especially for web apps, a nice demo is far from production. The paid product usually goes through better testing by the developer than Joe’s little free app.

I listed the ones that I found with good quality and support tracking record below.

- Applet

The free jUploader

The jUploader is developed by William JinHua Kwong and it can be downloaded from SourceForge. It seems to be actively maintained. The jar file for basic version is about 370k in size. I’m sure it can be reduced with Java bytecode obfuscator and shrinker software.

The app itself is quite good and documentation is sufficient. However the GUI interface is not as polished as the next candidate: JumpLoader.

JumpLoader – can be free, but will cost if you want the source

JumpLoader is developed by jmaster and it is the best I have seen so far. Depending on your requirement you can have a just simple file uploader or quite sophisticated pre-uploading image processor, you can see the demos here. The app itself it very customizable from the functionality to user interface. But it comes with a price. The “small” version is over 500k in size, which is still too large in my opinion.

- Flash

SWFUpload

This is the free Flash uploader that I like. And it looks similar to the one in Flickr. If you have the Flash development and don’t mind putting some work you might want to seriously consider this one.

Element-IT  MultiPowUpload

I didn’t download and try the product out myself. But based on the demo I like the features that MultiPowUpload provides. Notice that with the base code was under 100k in size. With some plugin, the Flash code is still in the 100k to 200k range.

Like I mentioned I generally prefer the paid version unless the software has enough open source developer support.

As web evolves the difference between a browser and a desktop application is less and less noticeable. Hopefully you find this post helpful to make a decision if you are in a similar situation. Also feel free to make a comment if I missed something here.

Bing is the new search engine from Microsoft, although they call it “Decision Engine” we all know it is just a branding trick. I used it a little bit and I was pleasantly surprised.

The feature I really like is the preview feature. For example if you search for “PHP tutorial” you get this page:

http://www.bing.com/search?q=php+tutorial&go=&form=QBRE

A page from php.net is listed as the first entry, which is in my opinion, beats the result from Yahoo. What’s more, you can hover your mouse on each entry of the result page, a little link will appear on the side and you can use your mouse to activate it to show a preview of the page. I tested several queries and the previews are very accurate. The preview also shows other links on the page that are relevant to the subject, which help to decide whether this page is “click through worthy”.

I don’t know if Bing can dethrone Google on web search, and as long as Google continues delivering the relevant results it is hard for anyone to make a legit threat on its dominance. But MS seems to have some nice things going in Bing just off the bat. Since Google relies on its search engine for most if not all its revenue, MS has an advantage here to make some bolder move, and be more innovative, like a real decision engine that was just released: hunch.com.

After watching some Google IO keynote videos I got interested in Google Web Toolkit and played with it a little bit. It is quite an interesting tool. Basically the tool helps Java developers to develop JavaScript using the familiar Java programming language on familiar development IDE such as Eclipse. And probably more importantly, it takes care of the nittygritty details such as browser compatibility and code optimization. So one can write it once and be pretty comfortable about running the code on different type of browsers.

Unlike other Java to JavaScript frameworks (jMaki for example) that require actually to be hosted in a Java VM container, GWT produces the client side JavaScript code as a final product. So Java, in this case, is just a tool, not part of the end result. Of course, if there is server in the backend to handle the RPC calls,  Java Servlets can be used to facilitate that, but it is not mandatory.

GWT is not just a tool for Java developers who don’t like coding JavaScript. It also put AJAX into better perspective by separating the client and service code in the code base. Using JSON as the messaging protocol between the client and server, a GWT client application can talk to any web server that speaks the language, which doesn’t have to be implemented in Java. GWT also provides a way to work around SOP – the Same Origin Policy.

SOP is the security policy that is in the web browser to stop a client script to communicate with web server that the script is not originally from, in another word, any arbitrary web server. This is a necessary security measurement, but it makes the client less distributive. For example, a web service provider would like to distribute a small version of client script, which can be embedded in any web sites, and get the dynamic information from the service host. GWT handles this by requiring server to return JSON output in a “<script>” tag, and a callback function will also need to be defined to handle the output.

With the advance of web technology, JavaScript will play much bigger part in rich web applications in the future. I think the biggest strength of GWT is its capability to scale up the size of a JavaScript project. Following the Java’s footprint a project created using GWT can be better managed, tested and collaborated among developers.

One drawback is that one has to be familiar with Java. And obviously there is a little bit of learning curve on those GWT GUI APIs. Nonetheless it is a great tool for Java developer to natually adopt and use to create some great JavaScript applications.

So all of sudden my wireless connection stopped working and I couldn’t “repair” it no matter what I tried. So I hit the reset button and guess what, Vista wouldn’t start. It just froze in the midway. I tried to repair the OS with the installation CD but it couldn’t fix it either. No errors reported, just stuck.

Luckily safe mode did work so I was able to back up all my files and made decision to re-install the OS.

I do have some decisions to make.

1. Re-install Vista. No way after this.

2. “Upgrade” to WIndows 7 RC. I don’t think I can trust this OS yet since it is just out of the oven.

3. How about Ubuntu? I do like it. However, I don’t want to have to load a “Windows” inside it so I can use some Windows Apps that I use every day.

So in the end I chose the good old XP.

It turned out I probably have a broken wireless adapter. It is a Buffalo WLI2-PCI-G54S card. In XP, when I tried to install the driver the system froze again and the installation screen shows “copying cbg54.sys”. Hard reboot is the only way to bypass this, but at least XP starts.

So the story pretty much ends here. It was probably a hardware issue and I don’t know if Microsoft is the one to blame here. Nevertheless it doesn’t seem Windows OS is handling this in a graceful way, or anyway at all. An OS with a good kernel should at lease prevent this kind of issues from making the whole system useless.

Oh by the way, I can’t believe I would say this, after a few monthes use of Vista, XP feels so clean and easy. I wouldn’t go back to Vista again even all the issues and concerns are addressed.

Being a half-baked JavaScript developer for a long time it wasn’t easy for me to grasp the concept like “selectors”, “traversing” and “utilities” in JQuery, and every time I started to write something using JavaScript it was always a series of events of Googling for sample code, checking the API, and Googling again for the right syntax if it doesn’t.

Recently I found this book “JQuery In Action” from Amazon and I was quite pleased after reading it. The information in the book is well organized and illustrated. And the authors explain the concept before digging into syntax and examples, so you not only know how to do code in JQuery, but most importantly, why to do it in this way.

My favorite subjects in this book are “understanding browser event models” (chapter 4) and “JavaScript that you need to know but might now”, the later is actually an appendix. They fill the gaps in my JavaScript knowledge and brought some new but important perspective on how it really works.

The lab code is great and it will probably help me quite a bit for my future projects.

So if you want to get serious about JavaScript programming, get this book. It’s definitely worth the read.

I had a couple of files on my Macbook which I accidentally deleted without knowing it until a couple of days ago. They are quite important files and without them I might have to spend hours to recover the loss. So I gave the Time Machine a try. It was simply amazing. I went into the Time Machine and typed in the key words that I vaguely remembered and hoped for the best. The Time Machine started to search all the saved points and in seconds it found those files out and I was able to restored them.

I keep my files on my machines regularly backed up, but I honestly can’t think of anything else that can do this good job on keeping different backup points of the system and make them easy to retrieve. I guess this is especially useful for me since I love doing cleaning up on file that I don’t recognize .

So I ran into this issue. It appears under certain set up, IE will reject a session cookie, or randomly drops them. I use PHP session to store user authentication information and some of my IE users were not very happy about not being able to log in or getting kicked out of a login session randomly.

The biggest challenge is to duplicate the issue. IE’s security and privacy settings can both affect the way it handles the cookie, and even the same settings on different PCs can have the different result. It is absolutely frustrating to have users shouting at you “This doesn’t work!” while everything works perfectly fine on my own machine.

After a lot of research I ended up completely abandon the session approach and use a database back end to handle the user authentication sessions. A regular cookie is still necessary to store a token (ex. a user id) to identify the user, but instead of using the SESSION variable, I use a database table to store the user token and the last access time. This will certainly complicate the setup – a cron job has to be installed to perform the database clean up; and the increasing the database queries – basically for each access from a “tokened” user I’ll need to update the last access time – will also add some tolls to the performance. However the payoff is also obvious. I don’t have to worry about the different IEs out there, who may behaves differently and sometimes in unexpected mysterious ways thanks to Microsoft, to reject my delicious cookies.

Just for the sake of discussion, there may be a number of reasons that cause IE to reject session cookie:

1. To many cookies from a site, or IE runs out of temporary space. There is a max number of cookies that a site can send. I think 20 is the limit. A lot of good discussions can be found on this thread.

2. IE’s P3P implementation might also have something with it. This is a good article about IE’s Eye of Sauron. There are some suggestions to bypass this by adding a P3P header, which is as simple as a line of characters to your pages. I don’t like the idea mostly because this is not the right way to fix a problem which shouldn’t exist in the first place.

3. There might be a slightly chance that your server time stamp is out of sync. For example when you set a regular cookie use something like “time() + 28400″ in your PHP code to specify the expiration time, wrong time stamp might put your cookie in the history already. This issue is a lot easier to spot since none of your sookies work, not just the session cookies.

It’s interesting. Firefox has problem loading a page with this line in the html header:

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=google_api_key” type=”text/javascript”></script>

At first I was suspecting Google server was down but it turned out the page would load just fine if I disable (suspend) Firebug extension (1.3.3).

However if I put the line toward the end of the page as inline Javascript everything seems fine even with Firebug on.