In case you missed it the latest Internet Explorer 9 Platform Preview is out and it’s a thing of beauty. It added Canvas support so the first thing I did was run it through some demo code. It’s faster than Chrome. Visibly faster. No benchmarks needed. It’s such an incredible difference from the current Internet Explorer family which are many times slower than the good browsers out there.

The good news doesn’t stop there. There’s actual standards support.

PPK enthuses:

In the past few days I’ve been revising the CSS compatibility table with information about the latest crop of browsers. There’s no doubt about it: this is IE9’s show. It just supports nearly everything. No hassle, no buts.

And then enthuses some more:
Read the rest of this entry »

I started doing some writing for Isobar/Molecular.

My first post:

An Introduction to HTML5

HTML5 is the latest version of the language that serves as the foundation of the web. It’s the first major revision in over 10 years and as it’s gotten closer to its final form and more and more browsers begin to implement its features it’s become a source of intense interest and contention in the technology community. This article hopes to explain the realities of HTML5, dispel a couple of myths and shine some light on the future of the web.

To begin we’ll need to define what we’re talking about when we say “HTML5.” There is a specification to refer to and much of what falls under the HTML5 name lives in that spec. In addition, there are several related specifications and APIs that are lumped together and called “HTML5″ when people talk about these things informally.

So, conversationally, HTML5 consists of the following:

New Semantic Elements

HTML5 has introduced several new elements. They aim to introduce more meaning to markup and codify existing web development patterns. Some examples of these new elements are nav (for navigation), article, header and footer.

Read the rest of this entry »

I also added a few bits and bobs to our our front-end development best practices, a doc which has been making the rounds a little bit over the past week.

Check ‘em out.

Forms. Forms are boring. 75% of all work you do with forms is exactly like all the rest of the work you do with forms. BO-RING.

But, they’re the gateway to making real money on the web, so they’re kind of important.

Hopefully, after today you’ll know all about forms and will love them.

Let’s take a look at our example form:

<form action="http://www.drunkenfist.com/304/wp-comments-post.php" method="post" id="commentform">
  <fieldset>
    <legend>Contact Info:</legend>
    <p>
      <label for="author">Name (required)</label>
      <input type="text" name="author" id="author" value="" tabindex="1" />
    </p>
    <p>
      <label for="email">Mail (will not be published)(required)</label>
      <input type="email" name="email" id="email" value="" tabindex="2" />
    </p>
    <p>
      <label for="url">Website</label>
      <input type="url" name="url" id="url" value="" tabindex="3" />
    </p>
  </fieldset>
  <p>
    <label for="comment">Comments</label>
    <textarea name="comment" tabindex="4"></textarea>
  </p>
  <div class="button">
    <input name="submit" type="submit" id="submit" tabindex="5" value="Submit" />
  </div>
</form>

This sample is based on the default WordPress theme. It’s maybe not as complicated as a sign-up form, but it does show the basics. On to it then.
Read the rest of this entry »

Before I jump into the proper way to use tables, I’m going to share an anecdote that should bring a smile to the face of anyone who’s done this stuff for a while.

A few months ago I was both pleased and surprised to discover a web developer who didn’t really know how to lay out a page using tables. He had a sense of how it might work, but had never really done it. I was having him help out with an HTML email (where tables are still the safest bet) and the whole thing was a novelty for him. Looking at it, this makes sense as he’d been at the job for only a few years so he learned entirely in the modern era and he was lucky enough to only learn from good sources. Still, it was a new phenomena for me- encountering a developer who was purely from a CSS-based layout world.

Yes! We’re winning.

If you don’t know what I’m talking about when I talk about tables for layout, move along. There’s nothing to see here.

Anyway, tables.

Tables

Tables are for Tabular Data

Here’s a table full of data.

Read the rest of this entry »

Last time out we looked at the Anatomy of a Web Page. Using that, let’s move on and look at the first of the two major sections, the head.

For the sake of this blog post, the head includes two pieces of code that are actually before the head. Sue me

Using the head from my (recently updated) starter assets project as an example, let’s look at the code in detail. First, what it looks like in total:
Read the rest of this entry »

I’m going to be posting a series of notes on the production of my first HTML 5 demo page. I’m doing a presentation on it at work (to be shared here, of course) and I want to capture my thoughts as I have them in the process of producing some fully formed HTML5 content.

One of the things I’m looking at with interest is the new Video element. Anything that simplifies embedding video on a web page gets a thumbs up in my book.
Read the rest of this entry »

Yesterday I was wondering why obj.getElementsByTagName wasn’t working in Safari/WebKit on a tag with a namespace prefix. I wondered, aloud, whether or not it was just something I was ignorant of.

It turns out that was the case. Dom Level 2 added new namespace specific methods to search through documents or document fragments for tags of a specific NameSpace. I’d just never had to use them before. Learning that greatly simplified the hacky code I wrote yesterday. Here it is, new and improved:
Read the rest of this entry »