Getting Started with HTML5

I’m working on a project now were we’ve decided to go with as pure HTML5 as posible, and it’s a breath of fresh air. Things work more or less how they should, and Internet Explorer is even playing along, with a little help. Getting started was a bit of a trick, though, as it can be hard to find information on how HTML5 works without diving into specification documents, which is never fun, or easy, (if you don’t want to read the story, skip straight to the resources).

I hadn’t been following the development of HTML5 with more than a passing interest. I figured that when it was ready, then I would start using it. I also understood that there were different parts that may reach completion at different times, and was keeping my eye open for some sort of “completion” signal. 2009’s 24 Ways was that signal for me. There were several articles on using HTML5 features along with their CSS3 counterparts, and enough evidence that browser support is there to start my investigation.

Here’s the deal: Basic HTML5 support is pretty good in webkit-based browsers, alright, (read usable), in Gecko, and kind of lacking in Internet Explorer. However, if you can rely on Javascript being present, (which I can in my project), there’s an HTML5 Shiv Javascript by Remy Sharp that makes it so that you can style HTML5 in Internet Explorer. Add it using a conditional comment and you’re good to go.

So, we have useable cross-browser support, but where do we turn to learn about which tags are in, which are out, the correct doctype and mime-type, and all that? We could read the specification, (and we will have to read a bit, at least), but it would be nice if there was an introduction to HTML5 somewhere. It turns out that Robert Nyman has written an Introduction to HTML5. It’s detailed enough to get you started, but not so detailed that you get lost, (like the spec), and if you’re looking to be convinced of the value of HTML5, check out HTML5: Tool of Satan, or Yule of Santa?, Have a Field Day with HTML5 Forms, and Breaking out the Edges of the Browser from 24 Ways 2009.

Once you dive a little deeper you’ll find that there are elements of HTML5 that you need more in-depth information for, so it’s time to turn to the spec. However, there are 2 groups, (W3C and WHATWG), working on HTML5, and therefore 2 spec documents, (fun!). Fortunately, the two groups have the same editor, so they’re more or less working on the same thing. I find the WHATWG HTML5 document easier to read, but if you prefer the W3C version, go nuts.

Finally, the whole content-type debate that’s been going on for what seems like centuries is still a mess. In HTML5 you’re supposed to include a Document Type Definition and there should be no namespaces on the HTML element if you’re serving as text/html, and you’re supposed to serve in application/xhtml+xml if you want to use namespaces, or force XML validation, or anything like that. The problem is that Internet Explorer really doesn’t like application/xhtml+xml, (it shows the raw XML document), so if you need a namespace for some reason, (for example, you want to use Facebook Connect on the site), you can’t serve valid markup.

So, that’s it. HTML5 has arrived, or at least parts of it. If you can rely on Javascript being present, or rely on IE users not using your web app, you can go ahead and start using it. Here’s a quick recap of the resources:

Why the Keyboard is Here to Stay

There’s been a lot of fuss recently, (and not so recently), about multi-touch interfaces and alternatives to keyboard and mouse as input devices for computers, but I believe that the keyboard, at least, is here to stay.

The keyboard is the best instrument we have, and the second best instrument that I can think of, to get text quickly from my mind into a computer. It’s been around for about 181 years now, and while there are some strong arguments to change the way it works, there is no really good reason to get rid of it.

As Scott Berkun said the other day:

Most technology doesn’t change much. The wiring that powers your home, the plumbing that brings you water, the roads you go to and from work on, work in mostly the same way they always have. This is ok. Lack of upgrade is not a sign of failure.

He is right, and the keyboard belongs right in there with plumbing, elictricity, and roads. How else are we going to get ideas from our minds into a computer? (I have an idea, I will come to it shortly).

Multi-touch has been the darling of the UI world for a little while now, and we keep hearing about the possibility of multi-touch enabled full-size screens. BumpTop has released a version of their software, (which is really cool, by the way), that has multitouch support. Do you really want to spend your day at a desk or counter, with your arms extended in front of you touching a screen? Try it right now for sixty seconds. Just reach out and put your fingers in front of your screen. I’ll wait. Finished? How do your shoulders and arms feel? A little tired? Now imagine your whole workday like that. Yes, we will become accustomed to the feeling, and we’ll get more endurance in our shoulder muscles, but we’re not meant to spend eight hours a day with our arms out like zombies.

How about voice control? It works pretty well in Star Trek, but if you have ever had to speak for an extended period of time you will know that your voice can get tired and sore just as your shoulders and arms can. Even if voice recognition technology was good enough to correctly transcribe what we say every time, with the correct grammar, (and it’s not, as Fred Wilson’s Dictated Post clearly illustrates),we would still end up talking all day. Imagine what it would sound like in an office, and how would students take notes on their laptops? Because of voice fatique and noise levels, voice control is not a viable solution for entering large amounts of text, or for doing long periods of computer-based work.

Multi-touch and voice control are great for short messages and commands. Even my ancient Motorola lets me use a voice command to call my fiancée, but for entering a lot of text, or for long sessions of work, they suck.

What’s the solution? Thought control. Hook the computers up to our brains, then whatever we think will become what is written, or drawn, or whatever. Imagine the possibilities, no more typing, no more trying to draw something that you see in your mind using Illustrator, because your computer sees it too. Also, we won’t need computer screens because hey, if the computer can see what’s going on in our minds, surely it can show things to us as well. However, even if we include the Firefox, controlling a computer with my thoughts is still a dream and will remain a dream for many years to come. The solution for today is the keyboard. It lets us enter text and commands very quickly, often faster than we could write them using pen and paper. It lets us do so quietly. And it’s a worldwide standard.

Using Spaces to Work Around VMWare Fusion’s Limitations

It appears that when running Windows as a virtual machine in VMWare Fusion, (I’m using version 3.0.1), any windows programs that I am running with elevated permissions, (“run as administrator”), don’t appear in the OS X dock with Fusion in unity mode. What’s more, if I can see a portion of the window and I click it, it doesn’t come to the foreground.

My workaround for this, which worked very well, was to run Fusion in fullscreen mode in another Space. Then I was able to do my OS X testing in one space, flip to Windows to make changes very easily, (The default to move between spaces is ctrl + (arrow key), but I changed it to cmd + (arrow key) and it is much easier for me), and keep my E-mail & stuff open in a third space.

If you don’t have spaces active, in OS X 10.6 they’re in System Preferences > Exposé & Spaces > Spaces then just check the box that says “Enable Spaces” and adjust your shortcuts at the bottom of the window, if desired.

Test ASP.NET apps on your Mac with VMWare Fusion & DD-WRT

Today I needed to test and fix mac-specific bugs in a website that is written in ASP.NET, but I generally use a Mac. When I work on the ASP.NET site I boot into Vista using Boot Camp, and the rest of the time I spend happily in OS X. I needed a solution to run both at the same time, and on the same computer, (this is the only mac I have, but my development environment for the .NET site is on my Boot Camp partition). It was time to see if Virtualization has gotten any better. It has.

There are two reasons that virtualization is better: VMWare Fusion 3.0 was released, and I doubled up my RAM, (now at 4GB). With these two changes, and Aero turned off on the Windows side, Vista runs ok under VMWare Fusion on my ageing Macbook Pro. Now to see changes made in Vista from OS X.

The simplest way I found to make this happen was to use some of the DHCP features DD-WRT on my router to assign a static IP address to my virtual machine and to map a URL to that IP. I’ll do this in steps:

  1. Before starting your VM in VMWare, go to the settings for the VM > Network and choose “Bridged” then open the advanced section and click the button to generate a MAC address. Copy the generated MAC address.
  2. To to Services > Services in your DD-WRT web interface and in the DHCP Server box assign a static IP to the Mac address you just copied
  3. In the DNSMasq box enter the following:address=/the-url-you-want-to-map-to-the-vm/THE.IP.YOU.JUST.SET entering, of course, the real values.
  4. Hit Apply and Save at the bottom of the page
  5. Start up your VM
  6. Make sure that Windows Firewall is set up to let HTTP connections through
  7. Type the URL you created in your browser in OS X and you should get the web page served by Windows

    8. Now, there should be a way to make this work without the router, using NAT network mode for the VM and some hosts file edits in OS X. I’m going to try to figure out how, but for now I just need to get some bugs fixed in the .NET app. If anyone has any ideas how to make this happen without involving a router let me know, (or blog about it and leave a note in the comments).

Blog Launch: Fascinating Names

Today I’m announcing the launch of a new blog: Fascinating Names. A while ago I was reading about a street with a strange name and thought that a blog that had some of the stories behind that kind of name would be a pretty interesting read, so a couple of weeks ago I snapped up fascinatingnames.com, bought the Neutica+ WordPress theme, and got to work. I’ll be posting a new name over there every day or two, so check it out, subscribe, follow @fascinames on twitter, and enjoy.