Just in time for me to do it all over again tonight at the Boston JavaScript Meetup. Well, not completely all over again as it’s a new presentation tonight, but it’ll still be two times at NERD this week.
WordCamp Boston is less than a week away, and as part of my presentation I wanted to show the new elements in an environment that basically everyone that works on WordPress sites will recognize- the default theme. To that end, I mocked up a functioning HTML5ized version of the home page to use as an example. That was both easy and fun. Read the rest of this entry »
Everybody knows about web forms, right? Make a <form>, a few <input type=”text”> elements, maybe an <input type=”password”>, finish it off with an <input type=”submit”> button, and you’re done.
You don’t know the half of it. HTML5 defines over a dozen new input types that you can use in your forms. And when I say “use,” I mean you can use them right now — without any shims, hacks, or workarounds. Now don’t get too excited; I don’t mean to say that all of these exciting new features are actually supported in every browser. Oh goodness no, I don’t mean that at all. In modern browsers, yes, your forms will kick all kinds of ass. But in legacy browsers, your forms will still work, albeit with less ass kicking. Which is to say, all of these features degrade gracefully in every browser. Even IE 6.
We used the basic ones on the AWiderNet redesign. Quick review: I like them (by basic I mean email, url, etc) as they parallel the things I’ve been doing all along. Beyond the possible user agent enhancements, I’m happy to be able to target CSS using attribute selectors instead of meaningless* classes.
I’m really excited for support for the “fancier” new types. There’s a lot of code overhead out there in the wild for things like sliders and date pickers. Having native controls for very common elements is a big deal.
*Meaningless in that User Agents can’t infer anything from class="email". Clearly humans editing the code can guess what class="email" is all about…
We relaunched the Cramer blog today. It’s a soft launch. We’re hoping to shake out any kinks over the quiet time around the holiday. I did the initial HTML5/CSS3 templates and then shepherded the project for a couple of weeks* until I was freed up enough this past week to get the thing out the door. Read the rest of this entry »
I’m excited to announce that I’m going to be speaking at the 1st WordCamp Boston. I’ll be talking about the marriage of two of my favorite technologies: WordPress and HTML5.
The Future is Now: WP Themes With HTML 5
Excited about HTML5? Wish you could start using the new semantic elements right now? You can. In this presentation Rob Larsen will show you how to create cross-browser, HTML5 enhanced WordPress themes using nothing more than a little extra JavaScript, basic WordPress knowledge and some knowledge of the new elements.
Well, I’ve been doing this job, at a very high level, for a long time and I couldn’t code this by hand if you paid me $50,000:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I understand it, and I can’t remember it. That’s basically gibberish to most people. There’s no way anyone is going to remember that string.
This? This I can code by hand and pretty much anyone can “get” what it’s doing:
<!DOCTYPE html >
I do wonder if there’s been any backlash against that? I’ve seen a lot of backlash against HTML5 over the past year, but I can’t really remember anyone complaining about the doctype declaration.
The following is a test of this page of unstyled, generic markup performed in 81 browsers. I used browsercam to take screen captures, then imported the resulting captures into Photoshop. In Photoshop, I zeroed out the top/left coordinates of the HTML canvas (not to be confused with the Canvas element,) and then set the Opacity on each layer to 10%. For the second visualization I simply turned on the difference blending mode at full opacity.
Why? I thought it was an interesting illustration of why we use reset style sheets. There’s almost no consistency in the way these browsers handle even the most generic markup.
The following is what we use to lay down the most common text styles. This is honestly more than we usually need, but it helps ensure we don’t miss anything when real content is flowed into a design. I thought it might be useful for folks to use in their own projects.