Adobe releases Shadow beta

In this mobile crazy world we work and live in today, as web application developers one of the hardest things to do is testing. With all the various devices and all the various screen sizes, testing your web application to make sure it looks and works properly in various permutations can be a difficult thing.

Enter Adobe Shadow, an inspection and preview tool. Here is how it works. You link a device (phone, tablet) to your main computer and then as you browse your web site on your main computer, the same web site automatically appears on your linked device(s). Furthermore you can remotely inspect the DOM and CSS from the web browser of the device, make on-the-fly changes and see them take effect in real-time. This is a great way to do testing across different devices and get your web application just right. Check out the quick tutorial video to learn more!

Using Flex SDK with Intellij

A long time ago, I use to use JetBrain's Intellij IDE for all my Java development. But since then I have mostly used Eclipse to do so. But with all my HTML/JavaScript/CSS development lately I have been looking for a good IDE for such development so I am considering going back to Intellij in the neat future.

And actually, Intellij has supported Flex very well for long time, so that's a good thing as well. And now that Adobe has donated Flex to Apache, you might be inclined to download the open source SDK and play with it. And if you are thinking of doing so, there is a very nice demo of how to do so right here.

HTML5 Local Storage vs Session Storage

Some new features in HTML5 are really useful, like Web Storage, but you have to make sure you understand how it works and make sure you use it in the correct scenarios. There are actually two ways that HTML 5 Web Storage works: local and session storage. I ended causing some end-user confusion by using local storage all the time, so here is breakdown of how both work and when they should be used.

Local Storage

When using window.localStorage, the data associated to this object will never expire. So long as you don't uninstall your browser (or forcefully delete the data), the data held within this object will remain forever.

So a good example of using localStorage is when you have a web application where you create data and want to remember the last country selected, so the user doesn't always have to re-select it. So write your JavaScript code to remember the last country used and then retrieve it the next time the user comes to the page to preset the last selected country.

Session Storage

When using window.sessionStorage, this data will only be retained for a browser session. Meaning that once the user closes the browser instance, the data is gone.

This is useful when you have a search page and want to always retain and show the last criteria entered by the user. But once the user closes the browser, you want the data to be gone, so when he or she re-enters your application the next time, they start with a fresh page.

New Apache Flex Logo

With Apache now taking over the Flex SDK, one of the first order of business was to get a logo for the project. They did creating a contest and allowing people to submit their own creations. Well as of January 26th (yes I know I am late in posting this), a winning logo was voted upon and you see it here or in animated fashion here.

I think the logo is nice and I am eager to see how the future pans out with all the changes being made this year. Anyways, time will tell, in the meantime you can visit the official Apache Flex website here.

Editing CSS on the fly in Firefox 11

As a developer, designing the look and feel of an HTML site using CSS can be a tedious task. Trying to get the dimensions of components or the colors of elements just right, can surely take its time. Thankfully over time, on-the-fly editing of CSS styles has been added to browsers and this is a great help. If you use Firefox or Chrome, you know what I am referring too, where you can right-click on an element on a page and then select "Inspect Element" using the context menu allows you to see all associated styles, make changes and see the effects of those changes directly on the page. 

There is one complaint I have with this on-the-fly editing method and that is that the UI used to make the changes is too small and can be a pain to work with sometimes. However with the upcoming Firefox 11 release, there has been a new feature added, called the Style Editor. You can access the Style Editor by hitting SHIFT-F7. What it does is display a floating window (see below), that allows you to access all the CSS files associated with the currently displayed page and then make changes on the fly. So nothing new there, but it's more akin to working in your favorite editor and even allows you to save the CSS to a file. It also provides Import functionality, which allows you to quickly load different CSS files and see the effect they would have on how your page looks.

I believe this to be a great development tool going forward, so get the Firefox and give it a try!

Two great books to study JavaScript

Since I've been concentrating mostly on Flex development since 2004 and have been getting back to JavaScript development in the last year, I thought it would be a good idea to get a couple of books to refresh my skills. Thus I've listed below two books which I've picked up recently to this effect:

• JavaScript Patterns
• High Performance JavaScript

I've just started reading the second book and I must say both books are well written and are worth the dollars I spent. Both are for intermediate to advanced level and you sure do learn some little nuances of the language that go the extra step to help a developer write the most efficient JavaScript code. So go check them out and become and better developer!

Flash saved my hockey viewing

I've been meaning to write about this since the day it happened, but haven't gotten around to it until tonight. Call me buzy or lazy, doesn't really matter, but hopefully you will find this short story interesting.


I was at home a couple of nights before Christmas 2011 and the Canadian World Junior Team was playing that night. So, like any good Canadian I turned on my TV to watch in HD the fastest sport in the world. But alas there was a little problem. Since early December I had been experiencing problems with my HD receiver on a on-and-off basis. Unfortunately the problem occurred that night and watching the hockey game on my TV was simply impossible. At that same moment I remembered that TSN was streaming the game live on their website, so I went to my PC to watch the game. But sitting on a chair and watching a hockey game is not as comfortable as sitting on my couch. That's when the light blub went off in my head: "wait a minute, why don't I watch it on my Android tablet?". So sure enough, I turned on my tablet, surfed to the tsn.ca website and watched the game in its entirety - and while sitting in my bed now, which was even more comfortable :) 


Thing is, it didn't occur to me until the next day, that it was thanks to the Flash Player running on my Android tablet that I was able to watch the game streaming live. If I would have had an iPad, I would not have been able to comfortably watch the game that night. Just goes to show you, that in 2011 you still need Flash to get the full web experience and that HTML5 browsers still have a ways to go.