Weeks 5 and 6 of HTML5 with the W3C – New inputs! Forming forms! All the APIs!

The HTML5 class ended a few days ago. The last couple of weeks were a whirl-wind of new information, covering Forms and APIs.

The new APIs are really interesting, allowing you to cache data (sans cookies), manipulate files, use geolocation, and more. Forms, on the other hand… I mean, they’re Forms. No matter how you dress that up, or how clever you try to get with it, you’re still just collecting information from someone. YAWN

So here are a few things that piqued my interest these last couple weeks.

Contents

Pseudo-classes

When you validate input fields using some client-side constructs, browsers automatically assign pseudo-classes to those fields. When validation passes or fails, the browser automatically applies a :valid or :invalid class. All that’s left for you is to apply styling to the pseudo-classes:

input:valid { background-color: lightgreen; }  
input:invalid { background-color: pink; }  

To see how it works, enter an email address here. The input is marked as “required”, so it’s invalid if left empty. One label, one input, and two lines of CSS.

This makes for a good first line of defense, and some easy UI feedback to the user, but I'd absolutely compliment it with good server-side validation, which is more fully within your control.

Web Storage

The new APIs that are available are awesome. Each one could’ve been a week’s lesson by itself. I can’t imagine what kind of hurdles developers had to jump through before, but there’s a tremendous amount of functionality built in to the browsers now, hiding much of the complexity.

Implementing web storage can be handy for downloading a website (i.e. a game) to run locally, and then saving data locally (i.e. user preferences or a list of high scores). I’m sure it has more practical (aka boring) uses too.

Using it is as simple as storing a value and then retrieving it later on, like this:

localStorage.name = "Grant";  
localStorage.age = 150;

var name = localStorage.name;  
var age = localStorage.age;  

Here are a few fields that are cached locally. Fill in a value and refresh the page to see if they get cleared.

Somewhat relatedly, I imagine conflicts between local caching and server-side autosaves is the reason I occasionally get this prompt in WordPress..?

wordpress restore the backup prompt

Data URLs

Not quite sure where this one fits, but Michel covered Data URLs too. Create an encoded string representation of an image and embed it in the markup in your page, instead of referencing a separate URL.

Open this link (an image) in a separate tab and check out the URL. Not what you expect? Check the source code for this page too. You can create your own data url using a tool like DataURL.net.

I’ve heard this has advantages, though I don’t yet know what they are. I suspect there’s some amount of overhead in using this, either in the browser having to render the image from the code, or perhaps increased size due to additional information having to be encoded. Might be worth some research…

Final Thoughts

The course was extremely informative, and I’m thankful Michel and the W3Cx team put so much effort into it. From the course eval, it looks like most people felt the same way, which hopefully means we can expect more courses soon!

I felt like I could’ve spent three times as much time as I did on the class, looking at all of Michel’s examples, then the other students’ examples, then all the external links to other tutorials that Michel included.

Thanks to Michel for being so responsive to the class. Every time I popped into the forum, he was answering our questions and complimenting our varying attempts at implementing what we were learning.

My only complaint is to edX.. I wish they’d improve the layout of the forums. They’re tough to navigate. Conversations are too easily hidden and awkward to get to. Because of that, I seldom go in there, even though when I did it was usually rewarding.

The interactive/social aspect of a MOOC (especially one that is on a schedule, forcing thousands of people to participate at the same time) is what stands it apart from say, a simple tutorial or a Pluralsight course. Assuming that's your thing...

almost had to socialize

Subscribe to Weekly Updates!

Get an email with the latest posts, once per week...
* indicates required