Here’s a quick little fact: I hope to someday come up with a game idea and build it using HTML, CSS, and JavaScript. I don’t want to use jQuery or one of the (awesome looking) front end game engines beginning to mature, I want to build it from scratch.

That should help put the scope of this dream game into perspective: something super small that will act as a great learning experience for game-centric front end development.

Games are a unique breed, and I don’t want to cheapen the respect I have for the industry by saying “oh I think I’ll build a game some day” because what’s kept me from doing it so far is the talent, knowledge, time, and devotion it requires, as outlined in The top 20 HTML5 games from .net magazine.

I like to take note of existing games out there in hopes of dissecting them as a method of self education. This list seems like a great place to start.

Advertise here with BSA

Quite an impressive open source implementation of HTML5′s video. It aims for a cross-browser, consistent implementation of a modern video player. It’s fully featured and includes a lightweight Flash fallback (yes, that’s still both applicable and important).

Additionally, you can piggyback the CDN-hosted version, or go ahead and do it yourself. Lots of good included here.

Advertise here with BSA

This is pretty neat, and a good promotion from the IE team. To help promote the platform preview, they’ve recreated the popular iOS game Cut the Rope in HTML5.

Even more interesting though, is the entire subsite dedicated to development of the game. To develop the game, the Objective-C was ported to JavaScript and the graphics from OpenGL to canvas. There are lot of details on how the performance was adjusted, and also a lot of information on the (IE) tools used in development.

In contrast to many overall Microsoft marketing efforts, the IE team is really coming together.

Advertise here with BSA

We’ve been working with audio and video for some time now, but are you taking advantage of the progress element? Chances are you may not even know of it’s presence, but it’s wicked sweet.

With Web apps becoming more and more advanced, visual feedback is important. Until now, we’ve often resorted to a spinner or some other sort of infinite loop indicator that does little more than express “hold on a sec”.

What better way to up the UX ante by providing even more worthwhile feedback for processes that take a decent amount of time? I can see spinners sticking around for a long time because many times we’re making a request that’s just waiting for a response, there isn’t that much work taking place. By the time a progress bar was presented in those cases, it would likely prove to be more confusing than helpful.

For those cases where a measurable amount of work is being performed, progress is a great choice.

Advertise here with BSA

Recently, Instagram released their Engineering Challenge: The Unshredder which challenged developers to de-shred an image.

These guys did it in HTML5. Definitely worth viewing source on this one.

Advertise here with BSA

I woke up today to check out the W3C-sponsored HTML5 logo. It’s more-or-less a marketing campaign to spread awareness about HTML5. There are lots of opinions flying around about the design of the logo itself, but I’d like to skip that in favor of talking about the premise.

I’m all for spreading the word about HTML5, and having a movement like this come from an organization like the W3C, in my opinion, is a great thing. Sure, we may have been talking about HTML5 for years, but the fact of the matter is: the more press the better.

Don’t get me wrong, I won’t be plopping this logo anywhere near client sites, but should any of my hobby projects see the light of day, I wouldn’t be opposed to tossing something like this on there to help get the word out to newcomers.

Regardless of a specific design opinion, I’ll be looking forward to getting some HTML5 stickers in the future.

Advertise here with BSA

Edge is touted as “A tool for doing HTML5 animations” but personally I’m guessing this is how Adobe plans to handle the whole “Flash” situation as time goes on.

A number of things struck me as I watched the video:

Layer palette “is the DOM” which (directly?) translates into divs which are given the properties defined in other parts of Edge (e.g. the name is the id). That’s an interesting approach, but I’m curious to see how quickly (if) things get out of control on a markup level.

Timeline based. Edge is actually timeline heavy which is a turn off for me, but it’s simply gravitational for new users. Adobe is attempting to lower the barrier for entry with HTML5 animations and become a leading company through the masses.

Uses Webkit, which is credited for providing the HTML5 features Edge is based upon. We’ve all been waiting for a tool that is a true-to-life WYSIWYG preview of our work. I don’t mean WYSIWYG in the terms of the lameness that earned the name WYSIWYG, but a pixel-accurate view of what our work will look like in browser.

Edge requires jQuery and a number of other jQuery-based dependencies. It’s great to see jQuery satisfying another need.

I’m curious how far Adobe will take Edge. We all know that as great as HTML5 is, tools like these can produce the same junk we have no problems complaining about on a daily basis. We’ll see what happens.

Advertise here with BSA

This rocks pretty hard. I’ve got a ‘new site’ framework I use on each and every project consisting of the latest WordPress release and all of my favorite plugins. I maintain the framework on a consistent basis and it lets me get up and running with a customized WordPress install from the start. Also included is a custom, empty theme I base every website on.

Site frameworks are a very smart way to save time. If you’re not using one, you’re doing yourself a disservice by spending your time downloading and re-downloading the same set of files every time you start a project. Getting a development site up and running the way you like shouldn’t be a half day affair, it should be a half minute affair.

This whole HTML5 thing has caught on like wildfire, you should review the HTML5 Boilerplate by Paul Irish and Divya Manian because that smartness should not go un-recognized. If you don’t use the Boilerplate completely, I’m quite sure they’re doing a few things you should be.

I’ll be checking this out in detail as soon as possible and applying what’s appropriate to my New Site Framework.

Advertise here with BSA

We’re hearing more about HTML5 as each week goes on, and it’s not without reason. If HTML5 isn’t something you’ve determined as important enough to deserve your attention, that’s problematic. HTML5 is way more than <audio> and <video> and it’s so much more than saying ‘Flash stinks.’

The number of blog posts, articles, and other writings surrounding HTML5 must far outnumber those on any other single Web design-centered subject so far this year, and I’m happy to say that most are very informative and forward thinking. There is still the issue, though, of some designers not truly understanding what we should expect as HTML5 becomes increasingly prevalent.

HTML5 for Web Designers

Enter HTML5 for Web Designers, the first A Book Apart written by Jeremy Keith. As summarized by A Book Apart:

The HTML5 spec is 900 pages and hard to read. HTML5 for Web Designers is 85 pages and fun to read. Easy choice.

HTML5 is the longest HTML specification ever written. It is also the most powerful, and in some ways, the most confusing. What do accessible, content-focused standards-based web designers and front-end developers need to know? And how can we harness the power of HTML5 in today’s browsers?

In this brilliant and entertaining user’s guide, Jeremy Keith cuts to the chase, with crisp, clear, practical examples, and his patented twinkle and charm.

I can confirm that the HTML5 spec is quite long and arduous to take on in an reasonable amount of time if you’re expecting to learn the big picture surrounding HTML5 and how it will affect you and your work. HTML5 for Web Designers is a supreme alternative if I may say so myself.

What you’ll learn

In all honesty, HTML5 for Web Designers is a fantastically comprehensive introduction to HTML5, and it keeps everything to 85 pages. If you’ve read about HTML5 here and there and you can’t stop hearing other people talk about it, HTML5 for Web Designers will get you into those conversations.

This is not a technical book by any stretch of the word. I say that as someone who has been working with HTML for a number of years and knows the basics; it’s a markup language, certain elements are meant for certain things, and elements have attributes that change various characteristics about said elements.

This book is not for someone learning HTML, it’s for someone who currently writes either HTML or (X)HTML by choice and has an opinion for doing so. It’s aimed for professionals looking to educate themselves on the next version of the most important markup language in the world.

What you won’t learn

Continuing on the basis that this is not a technical book, you’re not going to hear mention of the really geeky stuff surrounding HTML5. Web Workers, WebSockets, Web SQL and Storage, and geolocation (to name a few) are nowhere to be seen, but it’s not without reason:

The JavaScript APIs in HTML5 are very powerful. They are also completely over my head. I’ll leave it to developers smarter than me to write about them. The APIs deserve their own separate book.

Truth be told, there are a number of misconceptions surrounding a number of those technologies, some of which have absolutely nothing to do with the HTML5 spec in the least. I’m super glad Jeremy took this approach. That decision alone made HTML5 for Web Designers the top notch book to overview and introduce someone to HTML5 without becoming overbearing.

Overall impression

I honestly loved the book. It’s small enough (85 pages) that you can read it in a sitting or two and it’s written in such a style that doesn’t come close to that of a lethargic textbook. If you’ve had the opportunity to read any of Jeremy’s other books (DOM Scripting, Bulletproof Ajax) this definitely follows suit, but with a bit more personality. Definitely a bonus.

I liked that the book went into more detail than the spec alone. It talked about actual application as well. There were bits and pieces about how we’ll be able to style these new elements which is super important. There was also some advice given regarding certain element attributes surrounding best practices which will steer readers in the right direction from the get-go.

Additionally, Jeremy devoted just enough time to the history of HTML5, how it came to be, and even touched on the politics surrounding its development. These facts are important to know if you’re looking to truly harness and refine your knowledge.

You’re going to learn a ton from this book, and I definitely recommend picking it up if your job title is Web Designer, Web Developer, Front End Developer, or anything else that has you writing HTML at any point in time.

Giveaway details

It’s that time again. Giveaway time. I last caught wind that the book was sold out currently, so I’m hoping to send the book to someone who didn’t get an order in before there were none left. Rules for entry are again quite simple:

• You must live in the continental US (or be willing to pay shipping otherwise)
• You can enter by leaving a comment below explaining what you’re most excited about when it comes to HTML5

• You can enter a second time via Twitter if you’d like by tweeting the following:

  Looking to get a free copy of HTML5 for Web Designers from @jchristopher! /x/23 #MBNhtml5

Entries via Twitter are not required but a comment here is. An entry via Twitter is just doubling your chances. Entries will be open and accepted until August 9, 2010 at 11:59am EDT. Good luck!

Advertise here with BSA

A Book Apart is a new take. Print? Yes print! The venture was founded by none other than Jeffrey Zeldman in conjunction with Mandy Brown and Jason Santa Maria. Not sold yet? Jason took the time to outline some of the thoughts he went over as he designed the series, and it looks great.

HTML5 for Web Designers

I’ve already pre-ordered two copies of the first book, one of which will be given away when the review gets published. The book is titled HTML5 for Web Designers and was written by Jeremy Keith. I’ve been reading from Jeremy Keith for quite some time now and every time I do I’m thankful he wrote what he did. His publications are always excellent and I couldn’t wait to order a team based publication given the names involved.

I’m really looking forward to this series of books. I will admit that Jason mentioning he designed the series in such a way it looks nice sitting together on a shelf has me committed already.

Advertise here with BSA