HTML5 / CSS / Javascript documentation

One of the best tools we have at hand when developing is online documentation. Online documentation is available for many programming languages such as Java, PHP, Ruby and can also be found for application frameworks such as jQuery and Spring.

For HTML, CSS and JavaScript, I typically go to the W3Schools web site to look something up and it has been a great resource for many years. Recently however, Adobe put forth a community drivin Web Platform Docs wiki site for all related web technologies. Although the site is currently in alpha form, it seems to have gotten off to a very good start. So I suggest you head on over there to take a look and contribute if you can :)

Other sites that I typically go to for such information is caniuse.com and the HTML5 comparison of layout engines.

Getting responsive design to work

I was recently working on a web site and wanted to make it work across several mobile devices. In my case I was testing on an iPhone 4, Android Tablet and an Android phone. So no big deal, I created three different CSS files to cover the range of devices, namely phones, tablets and PC. The low level details are that you create the different CSS files and then specify which one to use based on the screen size using CSS media queries, like so:

<link rel="stylesheet" media="all and (max-width: 320px)" href="site-max320.css"/>
<link rel="stylesheet" media="all and (min-width: 361px) and (max-width: 800px)" href="selene-max800.css"/>
<link rel="stylesheet" media="all and (min-width: 801px)" href="selene.css"/>

However, once I started testing on the phone and tablet something wasn't working right. It was like the mobile browsers were ignoring the media queries; they were auto-zooming out to display the web site in its entirety, which was not what I wanted. After some googling, I discovered that you have to tell the browsers scale the content to the width of the screen, this way the media queries will be taken into effect. To accomplish this, you have to put the viewport meta data tag in the head of your HTML document, like so:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>

Once I added this meta data tag, it all worked as expected :) A more detailed explanation about this meta data tag can be found here.

Adobe Inspire

Once upon a time, Adobe used to have something called the Edge Newsletter, which was renamed earlier this month to Inspire Magazine. Its actually a nice little web site, with some interesting articles about Fluid Grid Layouts in Dreamweaver 6 (on my to-do list), a post about web standards, web site design with Fireworks 6 and so on and so forth. So I recommend you head over there and check things out, you might find something interesting to read about!

Page caching and the HTML5 onPageShow window event

Just last week I was confronted with a problem that occurred only in Firefox. This is rare, since Firefox is very good at implementing HTML/CSS/JavaScript standards. Basically what I had was a report criteria page being displayed to a user and then once he hit the submit button, we pop-up a JavaScript overlay saying "Processing...". Thing is, if the user hits the browser's "Back" button (yes that horrible button), the overlay was remaining, even thought in the window onLoad event we were telling the overlay to unload itself.

I believe the problem starting with a recent version of Firefox where the browser implemented page caching. Subsequently, when the "Back" button is hit, the page is loaded from the cache and the onLoad event is not fired again. So our code to unload the overlay was not being executed.

The solution as I found it, is that in this scenario, Firefox is firing the onPageShow event, giving us a chance to do our clean up work. So we basically added the following line of code in the window onLoad event handler:

$(window).bind( "pageshow", function() { $.unblockUI(); } ); 

We still left the old code there so that it works for other browsers and older versions of Firefox.

More info on Adobe Shadow

In my last post I spoke about Adobe Shadow, their new tool for test web applications on various mobile devices concurrently. Since then, Adobe has posted a couple of short videos displaying the capabilities of Adobe Shadow. So what are you waiting for, click on the links below to check them out!

• Shadow Intro
• Remote Inspection

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!

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.

When is Javascript going to be updated?

Do you know since when has JavaScript been around? Well if you don't, I'm going to tell you. 1995. That's 16 years ago and since then, it feels like the language has not evolved one bit. Well at least it doesn't feel like it. Having worked with ActionScript allot over the recent years, it makes me yearn for the day that JavaScript takes on some of its characteristics. So here are a few random thoughts on the subject:

• Why is everything still loosely typed? Why can't I declare the data type of my variable. Once we are allowed to do this, it also means we have greater support for the language in our development tools, meaning less typo mistakes and shorter development times.
• When will we be able to finally declare a class like any normal person can. You know by using the class keyword. No more of this everything is a function mumbo jumbo. Proper class inheritance would be nice as well.
• How about having a compiler that can run through our code, to advise us in advance of any syntax errors. Rather than random discovery at run-time of any simple programming errors.

Times are changing: Flash and Flex

They say that the only constant is change. And another great example was given to us this week following Adobe's announcement (article 1, article 2 and article 3) about the future of Flash on mobile browsers - that basically there isn't any. For the last couple of days I've been thinking about how to write this blog post, so here goes :)


Were all the Flash haters right?
Anyone who "hates" is never right. They are most likely ignorant and perhaps even mis-informed. For 7 years now, since 2004, I've been developing web applications using Flex for my personal projects and at my job. At my job, I am perhaps one of maybe 3 developers who have used Flex at home and work and loved the capabilities the technology offers. Others used it cause they had too, and some wouldn't touch it with a 10 foot pole. That's fine, we are all different people. But you know what the most important thing is, I tried and I learned something new. I did something not many people can say they did and because of it, I am better developer today than was back in 2004. For 7 years, I have been ahead of the curve, doing things that were not possible or very time-consuming to do without Flex. Basically what I am saying is that I wasn't going to stand still waiting for HTML/JavaScript/CSS to catch up. And I must say that was thanks to Stacy Young for giving me a CD labeled "Royale Beta" back in the Fall of 2003.


What about my skills set, my job?
So finally in 2011, HTML/JavaScript/CSS have finally caught up. Well at least up to a certain point, there are still things you can't do in a browser that only the Flash Player can do. But with the rapid evolution of browsers these days, especially for Firefox and Chrome (IE is still slow), they will soon catch up, but it will still take some time. It might still take 10 years before browsers have totally replaced what the Flash Player can do it. So what does a Flex developer like myself do? Am I out of a job? Am I useless? Nope, au contraire, I have just spent 7 years acquiring knowledge in how to better develop web applications and I thus will continue to do so. Just means I am using different tools to do so. Actually over the past year I have already started doing more HTML/JavaScript/CSS developement than ever before and I have been applying  my Flex skillset to all the JavaScript development I have been doing. I have created my own jQuery DataGrid widget, you can set the columns to display and specify a labelFunction for each column object. Sounds familiar? :)


Let's no forget
Since 1996 we have been using the little plugin that could to stream and watch Dallas Cowboys games which were not available on national TV (ok, that was just me), share funny/sad/dramatic/historical/great/not so great moments with family and friends on YouTube, watch sport highlights and much more. Were would we be today without the Flash Player? Probably stuck in the web technology stone ages. The web is a better place cause of the Flash Player and hopefully the future will be better because of it.


What Adobe is saying
But don't just listen to me, some Adobe employees have made some posts as well in the days since the announcement. Mike Chambers has a great post here and then there is one here from a couple of product managers.


What's next?
Well, I'm going to keep doing what I've always been doing, creating great web applications. And I'm going to start by bitching as to why JavaScript hasn't grown in 15 years. Oh, but that's another blog post all in itself :)

Learning the basics of HTML5

Yes, yes, I know. This is my blog about Flex, but you know what, it is always good to learn and know as much as you can. Cause face it, HTML is here to stay and we need to know the most we can't about this latest specification (version 5). The version 5 specification is finally catching up to the things we already have in Flex, but I still don't understand why JavaScript is not strongly typed :(

Anyways, take a look at this video, which is a presentation from Adobe MAX 2011 from a Mozilla developer. He talks about the new tags, form elements, open video codecs and then some.

HTML5 Development and Flash/Flex by Coenraets

Just saw a very nice presentation given by Adobe Evangelist Christopher Coenraets over at InfoQ. The presentation was mostly about doing HTML5 design/development with Adobe products such as Illustrator and Dreamweaver. He also shows how to test your site for browser compatibility (for layout specifically) using Adobe BrowserLab. He then shows off some experimental technologies, you will have to watch the video for what exactly and finishes off by demonstrating some cool Flex/AIR features using various tablet devices.

Very cool presentation indeed, so what are you still standing around here for, go watch it!

Flex, HTML/JS Pros and Cons from a developers point-of-view

Having worked these last couple of months on a pure HTML/JS project at work, I'd thought I'd share a few pros and cons and random notes of working in both Flex and HTML/JS programming languages.

I'm not here to bash one or the other, enough people do that, just some thoughts for you guys to draw your own conclusions. Also this is from a developer stand-point, building web applications, not a web site with simple text and images...but an app, where you load, create and update data.

Note: Was using jQuery 1.4.2 for the javascript portion.

Flex
Pros

• AS3 is very similar to the Java programming language
• Development, build and unit testing is almost exactly like in Java
  
• Great IDE (Flash Builder) provides an easy and fast way to code in MXML/AS3
• Online documentation is excellent and thus helps newbies learn the language
  
• SDK is open source, so a developer can learn and extend the base classes himself if need be
• In Flex, you manipulate the data directly and send it back to the server for processing, no need to worry about re-drawning the UI
• No cross-browser, cross-OS issues
• Object layout is flexible and easy to do
• With its a default theme, the app can look good and professional
• Can create re-usable controls/classes
  

Cons

• Takes time for new developers to realize that the app is one entity that just sends data to/from the server and not a collection of pages
  
• Compile times can be long
• Developer can get into the bad habit of loading lots of static data (countries, provinces, etc..) up-front, that will never be used, thus causing an unnecessary long load time for the app
• You application SWF can be de-compiled
• If end user can to copy data from multiple controls (or from DataGrid) to paste into another app (say an email), you pretty much have to code this, where its a default functionality with an HTML page since 1975
  
• Dealing with timezones can be a chore (Flex loves to deal with it on its own)

HTML/JS
Pros

• Faster load times
• The development cycle is quicker: update the page and reload in the browser
• In some cases you can have a single page and use Ajax calls to get the data you need, no need for a page refresh
  
• End users have been working with browsers for a long time now so the default copy'n'paste functionality is very useful to them and almost second nature

Cons

• Cross-browser issues still exist!
• IDE support not great for JS third-party frameworks like jQuery
  
• In my case, no documentation existing for how to built a jQuery widget, had to find an online tutorial after searching. So no real API doc.
• Object layout is a pain - tables still the way to go - and inconsistent across browsers sometimes
• As a developer you need some design skills to make the app look good.
• Handling the proper z-order of objects can be a chore
• Reading someone's jQuery plugin/widget can be interesting (enough braces and commas for you?)
  
• The browser BACK button can take your app out of proper state

A final thought...I like working in both technologies, I love to learn new things and working with jQuery has made working with data in JavaScript a heck of allot easier that it used to be 10 years ago. But I still look at it this way, if you want to build something people are going to read, you use HTML/CSS/JS. If you want to build an application, you use Flex.

New Firefox 4 beta 7 is really fast

I just downloaded and installed the latest Firefox 4 beta 7 and man it is fast! The browser loads in an instant, not like beta 6 that took a minute to initialize and the pages come up in a flash! - couldn't avoid the pun :) There are also minor UI tweaks that are easy to notice.

You download it here.

HTML/CSS not as intuitive

So you have the root container of your application and want to center it on the screen (regardless of screen resolution). How do you do that in HTML? I use Dreamweaver CS5, so I thought the CSS code hinting would make this easy for me to figure out. "position" property? Nope. There is a "vertical-align" property, but not "horizontal-align" property. "float" property maybe? Nope. How about "display"? Nadda, again.

Finally after some google I found this and it worked:

.rootContainer {
width: 1000px;
position: absolute;
left: 50%;
margin-left: -500px;
}

So in essence a hack as I see it. The above CSS basically says take your container, makes it 1000 pixels wide, position it as 50% from the left border and then goes back 500 pixels (always half of the container's width) in the left direction. Basically it is doing a mathematical calculation for you. In 2010, shouldn't things be easier for you than this?

The equivalent in Flex you ask? If your container is nested within a Canvas, just set the horizontalCenter like so:

horizontalCenter="0"

Simplicity. I love it. And in the case that the parent was a non-Canvas type container, then you could use:

horizontalAlign="center"

Again, simplicity. You know just but looking at either one of those lines what the positioning of child elements is going to be.

The conclusion here is not to say that I don't want to learn, or that I am being lazy. Neither that a simple math calculation is beyond my abilities. It's to say that it is not intuitive! We use the word intuitive when talking about a user using a UI for the first time, how easy it is to figure out how to perform some task; well same goes for developers. In Flex it is easy to figure out how to position elements within a container, in HTML it is not so easily apparent.

Another one is the CSS "float" property. Allows you to push elements to the right or left. But top and/or bottom? No idea, haven't discovered that one yet :)

P.S.: Don't ever use the HTML <center> tag to center elements...it doesn't just center its immediate children, but children of children as well. Don't ask me what algorithm it uses!

Firefox 4 is the new Opera

Downloaded Opera 10.54 just now and playing around with it and couldn't notice that the upcoming Firefox 4 is going to look very much like it.

And the reason why I am toying with Opera? Well we are going to be doing some heavy re-work of of one website at work and it will be all done in HTML (using JQuery for coolness). So yes that means I need to test the site as I go along in the most popular browsers: IE, Firefox and Chrome. So then I thought why not Opera as well. Heck I should also try Safari I guess. The worse is IE, cause so many still use version 6.0 (27% of internet users as of 2009). What a pain!

Oh wait, with Flex you just have test once :)