Setting up an HTML5 test area
If we're going to build new and exciting projects using HTML5, we need to set ourselves up for success. After all, we want to ensure that what we build will display and behave in a predictable way for ourselves and our clients. Let's build a test suite with a code editor and at least one web browser.
Getting ready
There are a few things we need to get started. At minimum, we all need a code editor and a browser in which to view our work. Seasoned professionals know we really need an array of browsers that reflect what our audience uses. We want to see things the way they do. We need to see things the way they do.
How to do it...
Many web developers say they're capable of writing code using nothing but plain text software like Notepad for Microsoft Windows or TextEdit for Mac OSX. That's great, but despite the bragging, we don't know a single web developer who actually works this way day in, day out.
Instead, most use some sort of development application like Adobe Dreamweaver (available for Windows and Mac) or Aptana Studio (available for Windows and Mac and Linux) or Coda (my personal preference, which is Mac only) or TextMate (also Mac only).
Let's start by downloading at least one of these applications:
- Adobe Dreamweaver: http://adobe.com/products/dreamweaver
- Aptana Studio: http://aptana.com
- Coda: http://panic.com/coda
- TextMate: http://macromates.com
Application icons for the most common web editors are shown here:
How it works...
In order for the code we create to render properly, we're going to need a web browser — probably more than one. Not all browsers are created equal. As we will see, some browsers need a little extra help to display some HTML5 tags. Here are the browsers we'll use at a minimum.
If you use OSX on a Mac, Apple Safari is already installed. If you're a Microsoft Windows user, Internet Explorer is already installed.
If you use a modern mobile device like an iPhone or Android for development, it already has at least one browser installed too.
Since we'll do our actual coding on the desktop, let's get started by downloading a few browsers from the following locations. Note: Microsoft Internet Explorer is PC only.
- Apple Safari: http://apple.com/safari
- Google Chrome: http://google.com/chrome
- Mozilla Firefox: http://getfirefox.com
- Microsoft Internet Explorer: http://windows.microsoft.com/en-US/windows/products/internet-explorer
Application icons for the most common desktop web browsers are shown here:
There's more...
Why do we need more than one browser? Two reasons:
- These applications have different rendering engines and interpret our code in slightly different ways. That means no matter how valid or well intentioned our code is, sometimes browser behavior is unpredictable. We have to plan for that and be flexible.
- We can't always predict which browser our audience will have installed and on which device so we need to be one step ahead of them as developers to best serve their needs as well as our own.
WebKit rendering engine
Luckily, Safari and Chrome use the same WebKit rendering engine. Mobile Safari for iPhone and iPad, as well as the web browser for Android mobile devices, all use a version of the WebKit rendering engine also.
Trident rendering engine
I just wanna tell you how I'm feeling. Gotta make you understand: Microsoft has changed and updated its Internet Explorer rendering engine named Trident several times over the years, making our lives as developers quite difficult. We often feel like we're aiming at a moving target. With Internet Explorer 10 on the horizon, it appears that won't change any time soon.
See also
Camino (Mac only) and Opera (for Microsoft Windows, Apple OSX, Linux, and mobile devices) both produce excellent alternative browsers that support many of HTML5's features. Consider adding these browsers to your test suite as well.
- Camino: http://caminobrowser.org
- Opera: http://opera.com
Application icons for the Camino and Opera web browsers are shown here:
Now that we have a development environment and more than one browser, let's create some code!
Tip
Progressive Enhancement
We're going to build our page using the concept of progressive enhancement, which means starting with plain old HTML for markup, then layering CSS for presentation and lastly adding a touch of JavaScript for behavior. One of the best analogies we've heard is that basic HTML is like black and white TV. Adding CSS is like adding color and adding JavaScript is kind of like adding high definition.