The Learn HTML5 course, designed by the W3C for the edX platform, has over 60000 enrollees (myself included)! There’s obviously a lot of interest in the first major update to the spec in well over a decade.

I’ve run through a few MOOCs, but none from such an authoritative source. If you don’t know, the W3C is the governing body that oversees the development of the HTML spec, so who better to teach the material? It’s not just the reputation of edX lending credence to the course (and the certificate if you pay for it and pass), but the reputation of the W3C itself.

W3C is working on plans that will make your obtainment of (Verified) Certificates more visible to the industry. We will keep you informed as this is put in place in the coming weeks and months.

I'll update this post each week, sharing all the interesting new things I learn.


Week 1

Replacing <DIV>

This week we learned that some new tags replace the abused and overused <div> tag. There’s a clear pattern of people using the div tags for everything – headers and footers, navigations and side-bars, pictures with captions, etc. Tables were not meant to be used as extensively as they were, but replacing them all with div’s isn’t exactly ideal because it’s a generic container. You can easily attach CSS styles to div’s to make them look like headers, menus, whatever, but it’s nearly impossible for machines to consume them in a meaningful way (think search engines). Which div is a menu, and which is a header or footer?

A whole bunch of new tags were created to address the ambiguity (which the major browsers have already implemented), replacing the above examples with <header> and <footer><nav> and <aside><figure> and <figcaption>, and so on. Now it’s much clearer to see what a section is supposed to represent. Something in a <nav> is a navigational section, like a menu, whereas something in a <div class="menu"> is harder to interpret. So HTML5 brings clarity where it was lacking.

Microdata

The most interesting concept so far (to me) is that of microdata. I don’t why it interests me, exactly, but it seems like a neat concept. Along with the new markup tags that help machines make heads and tails of what each part of your website is doing, there’s also three new attributes called itemscope, itemtype and itemprop. You can apply these elements to a block of markup so that a machine can parse it out later and interpret it. You can pretty much add anything you want, making microdata up on the spot:

<div itemscope itemtype="Animal">
Your mother was a <span itemprop="name">hamster</span>.
</div>

Of course, that doesn’t mean anything to anything. For a system to be able to understand your microdata, it needs to have been predefined somewhere.

Google, Bing and Yahoo, for example, jointly produced schema.org. They agreed to define and recognize a set of microdata, such as a person, which you can use and set attributes for in your own markup:

<div itemscope itemtype="http://schema.org/Person">
Your <span itemprop="givenName">father</span> was an <span itemprop="jobTitle">elderberry farmer</span>.
</div>

There are tools to help you generate microdata, and, if your blog is hosted on WordPress like mine, WordPress plugins that generate microdata for you.

I settled on a highly-upvoted one named “Add Meta Tags“, which is capable of adding all kinds of meta tags to your WordPress posts (you choose which ones to include). Here’s what it added to one of my posts when I chose to include schema.org:

<!-- BEGIN Metadata added by Add-Meta-Tags WordPress plugin -->
<meta name="description" content="The code in this post is also available on Github. I had a requirement recently, to provide users with a field they could type in, in order to filter a ListView that could potentially hold a couple hundred names. Now, on the old WinForms platform, filtering used to be easier." />
<meta name="keywords" content="programming, collectionviewsource, listview, textbox, wpf" />
<link rel="publisher" type="text/html" title="" href="https://plus.google.com/117394062575708039380" />
<link rel="author" type="text/html" title="Grant" href="https://plus.google.com/117394062575708039380" />
<!-- END Metadata added by Add-Meta-Tags WordPress plugin -->
 
<!-- BEGIN Schema.org microdata added by Add-Meta-Tags WordPress plugin -->
<!-- Scope BEGIN: Article -->
<div itemscope itemtype="http://schema.org/Article">
<!-- Scope BEGIN: Organization -->
<span itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="" />
<meta itemprop="description" content="Learning should be fun! If it&#039;s not... what are you going to do about it?" />
<meta itemprop="url" content="http://grantwinney.com/" />
</span>
<!-- Scope END: Organization -->
 
<!-- Scope BEGIN: Person -->
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Grant" />
<meta itemprop="image" content="http://0.gravatar.com/avatar/919003b5767665e865f7b9cb63fbbfd9?s=128&#038;d=identicon&#038;r=g" />
<meta itemprop="url" content="http://grantwinney.com/author/grant/" />
<meta itemprop="sameAs" content="https://plus.google.com/117394062575708039380" />
<meta itemprop="sameAs" content="https://twitter.com/GrantWinney" />
<meta itemprop="sameAs" content="http://grantwinney.com" />
</span>
<!-- Scope END: Person -->
 
<meta itemprop="url" content="http://grantwinney.com/using-a-textbox-and-collectionviewsource-to-filter-a-listview-in-wpf/" />
<meta itemprop="datePublished" content="2014-12-07T09:13:17+00:00" />
<meta itemprop="dateModified" content="2015-06-02T16:44:02+00:00" />
<meta itemprop="copyrightYear" content="2014" />
<meta itemprop="inLanguage" content="en_US" />
<meta itemprop="name" content="Using a TextBox and CollectionViewSource to Filter a ListView in WPF" />
<meta itemprop="headline" content="Using a TextBox and CollectionViewSource to Filter a ListView in WPF" />
<meta itemprop="description" content="The code in this post is also available on Github. I had a requirement recently, to provide users with a field they could type in, in order to filter a ListView that could potentially hold a couple hundred names. Now, on the old WinForms platform, filtering used to be easier." />
<meta itemprop="articleSection" content="Programming" />
<meta itemprop="keywords" content="programming, collectionviewsource, listview, textbox, wpf" />
<meta itemprop="thumbnailUrl" content="http://i0.wp.com/grantwinney.com/wp-content/uploads/2014/12/arrmatey1.gif?resize=150%2C150" />
 
<!-- Scope BEGIN: ImageObject -->
<span itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<meta itemprop="name" content="arrmatey" />
<meta itemprop="url" content="http://grantwinney.com/using-a-textbox-and-collectionviewsource-to-filter-a-listview-in-wpf/arrmatey-2/#main" />
<meta itemprop="thumbnailUrl" content="http://i0.wp.com/grantwinney.com/wp-content/uploads/2014/12/arrmatey1.gif?resize=150%2C150" />
<meta itemprop="contentUrl" content="http://i0.wp.com/grantwinney.com/wp-content/uploads/2014/12/arrmatey1.gif?resize=287%2C337" />
<meta itemprop="width" content="" />
<meta itemprop="height" content="" />
<meta itemprop="encodingFormat" content="image/gif" />
</span>
<!-- Scope END: ImageObject -->
 
<!-- Scope BEGIN: ImageObject -->
<span itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<meta itemprop="name" content="winforms combobox filter" />
<meta itemprop="url" content="http://grantwinney.com/using-a-textbox-and-collectionviewsource-to-filter-a-listview-in-wpf/winforms-combobox-filter/#main" />
<meta itemprop="thumbnailUrl" content="http://i1.wp.com/grantwinney.com/wp-content/uploads/2014/12/winforms-combobox-filter.png?resize=150%2C82" />
<meta itemprop="contentUrl" content="http://i1.wp.com/grantwinney.com/wp-content/uploads/2014/12/winforms-combobox-filter.png?resize=275%2C82" />
<meta itemprop="width" content="" />
<meta itemprop="height" content="" />
<meta itemprop="encodingFormat" content="image/png" />
</span>
<!-- Scope END: ImageObject -->
 
<!-- Scope BEGIN: ImageObject -->
<span itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<meta itemprop="name" content="arrmatey" />
<meta itemprop="url" content="http://grantwinney.com/using-a-textbox-and-collectionviewsource-to-filter-a-listview-in-wpf/arrmatey/#main" />
<meta itemprop="thumbnailUrl" content="http://i2.wp.com/grantwinney.com/wp-content/uploads/2014/12/arrmatey.gif?resize=150%2C150" />
<meta itemprop="contentUrl" content="http://i2.wp.com/grantwinney.com/wp-content/uploads/2014/12/arrmatey.gif?resize=343%2C340" />
<meta itemprop="width" content="" />
<meta itemprop="height" content="" />
<meta itemprop="encodingFormat" content="image/gif" />
</span>
<!-- Scope END: ImageObject -->

data-rel="lightbox-0" title="">Here’s the data it added to support Twitter:

<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@GrantWinney" />
<meta name="twitter:site" content="@GrantWinney" />
<meta name="twitter:title" content="Using a TextBox and CollectionViewSource to Filter a ListView in WPF" />
<meta name="twitter:description" content="The code in this post is also available on Github. I had a requirement recently, to provide users with a field they could type in, in order to filter a ListView that could potentially hold a couple hundred names. Now, on the old WinForms platform, filtering used to be easier." />
<meta name="twitter:image:src" content="http://i0.wp.com/grantwinney.com/wp-content/uploads/2014/12/arrmatey1.gif?resize=287%2C337" />
<meta name="twitter:image:width" content="" />
<meta name="twitter:image:height" content="" />

And the Open Graph Protocol, which was designed by Facebook:

<meta property="og:site_name" content="" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Using a TextBox and CollectionViewSource to Filter a ListView in WPF" />
<meta property="og:url" content="http://grantwinney.com/using-a-textbox-and-collectionviewsource-to-filter-a-listview-in-wpf/" />
<meta property="og:description" content="The code in this post is also available on Github. I had a requirement recently, to provide users with a field they could type in, in order to filter a ListView that could potentially hold a couple hundred names. Now, on the old WinForms platform, filtering used to be easier." />
<meta property="og:locale" content="en_US" />
<meta property="og:updated_time" content="2015-06-02T16:44:02+00:00" />
<meta property="og:image" content="http://i0.wp.com/grantwinney.com/wp-content/uploads/2014/12/arrmatey1.gif?resize=287%2C337" />
<meta property="og:image:width" content="" />
<meta property="og:image:height" content="" />
<meta property="og:image:type" content="image/gif" />
<meta property="og:image" content="http://i1.wp.com/grantwinney.com/wp-content/uploads/2014/12/winforms-combobox-filter.png?resize=275%2C82" />
<meta property="og:image:width" content="" />
<meta property="og:image:height" content="" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image" content="http://i2.wp.com/grantwinney.com/wp-content/uploads/2014/12/arrmatey.gif?resize=343%2C340" />
<meta property="og:image:width" content="" />
<meta property="og:image:height" content="" />
<meta property="og:image:type" content="image/gif" />
<meta property="article:published_time" content="2014-12-07T09:13:17+00:00" />
<meta property="article:modified_time" content="2015-06-02T16:44:02+00:00" />
<meta property="article:author" content="http://grantwinney.com/author/grant/" />
<meta property="article:publisher" content="http://grantwinney.com/" />
<meta property="article:section" content="Programming" />
<meta property="article:tag" content="collectionviewsource" />
<meta property="article:tag" content="listview" />
<meta property="article:tag" content="textbox" />
<meta property="article:tag" content="wpf" />

The benefit here is that major sites around the web can now interpret your content and display more meaningful information about it.

The caveat is extra bloat, in the form of extra markup that may affect mobile devices with limited/restricted bandwidth. At least one person already raised the issue in the course forums.


Week 2 (Videos)

Week 2 kicked my butt. It’s my fault. I’m trying to not just passively read the material, but to put what I’m learning to use. The focus was on media elements, specifically the Video and Audio elements. Since Audio is basically a subset of the Video element, I focused on playing with the Video and seeing what kind of customization I could do to it.

Default Controls

One of the customizations we learned about in week 2 involved the “controls” bar at the bottom of the video player. You can use the default controls, or you can customize your own.

First, here’s the default video player, using the built-in controls. It’ll look different depending on the browser you’re using, as its ultimately the browser’s job to render the controls in some default fashion.

Using the built-in controls is dead-simple, but the caveat is that it allows for very little customization.

<video src="http://mirrors.creativecommons.org/movingimages/webm/GetCreative_360p.webm" 
       poster="http://rack.2.mshcdn.com/media/ZgkyMDEzLzEwLzAxL2U4L2NyZWF0aXZlY29tLjFmYTAxLmpwZwpwCXRodW1iCTEyMDB4OTYwMD4/ec501018/64d/creative-commons-logos.jpg"
       controls="controls" width="400" height="300"></video>

I only had to provide it with a few pieces of information:

  • The source of the video, in this case in the webm format. Ideally, I should provide several formats, since not every browser supports every format, but the major browsers support webm.
  • An image to use as a “poster” before the video plays (optional), instead of defaulting to the first frame of the video (in this case, a boring white frame).
  • The “controls” flag that tells it to display the built-in controls, and the size (so mundane it doesn’t get its own bullet point).

Override Controls

Next, I disabled the default controls, and designed my own. Based on my own limited experience, I’d say you’d have to have a pretty darn good reason for doing this. Once you disable the default controls, you’re committed to creating controls, wiring them up via javascript, styling them via css, and then duplicating efforts to make everything work between browsers.

Speaking of cross-browser compatibility, I did this in Chrome without the slightest consideration of other browsers. It should work in Opera (both use Chromium), but it won’t work (and will look fugly) in IE and Firefox. What can I say? Chrome rulez. :p

Here’s a screen shot – Chrome default on top; mine on the bottom. I was pleased with the results. I even included some closed captions, though only for the first minute of video because it’s really tedious trying to get the timing right.

html5-w3cx-video

You can view the entire html/css/javascript combo on JS Bin.

Okay, it may not look like much, but the last time I used javascript I was creating mouse trailing effects, on a geocities website that seemed to always be under construction...

This is turning out to be a great class; very thorough and lots of extra links in each area for exploring features further. Michel must’ve spent a ton of time putting all of his examples on JS Bin too, which is nice, since it shows all your code and markup at once, and previews your page for you too, and they’re easy to bookmark.

Resources


Week 3 (Canvases)

In week 3, we learned about the Canvas element, along with the shapes you can draw on it and how it can be manipulated. These work in the major browsers (except for IE... shocker).

Graph Sample

This first sample is a simple graph I created. It demonstrates manipulating the current context (such as translating, rotating and changing the opacity), as well as listening to events and taking action (in this case, the “input” events on the sliders).

It needs work – the top of the graph is cut off slightly, probably due to some faulty math in trying to calculate the sizes of the bars and everything.

Here's the code for the graph at JS Bin.

Floating Robot Head

As I started to get the hang of "translating" the context and manipulating the canvas, I added in some more rotations, played around with arcs (for the shape of the head), gradients (neck, mouth, antenna), a few math equations (for manipulating the eyes, for example), etc.

Here's the full script for floating robot head at JS Bin.

One more thing.. I happened across a site dedicated to the canvas element for those who want to read more:

HTML5 Canvas Element Tutorial


Week 4 - Interacting! Moving all the things!

The focus for week 4 was animation. We’ve been displaying a lot, but it’s been fairly static up to this point. This week, we learned about events, interacting via the keyboard and mouse, and the three steps of animation:

  1. Clear the canvas
  2. Draw the items on the canvas
  3. Move the items (won’t take effect until the loop iterates, and you clear the screen and draw again)

It sounds simple once you know it, but only in hindsight. I knew we were going to learn about animation, but wasn’t sure how exactly it was implemented. I figured each shape on the canvas was drawn one at a time, but instead we’ve been clearing the entire canvas, recalculating positions, and then redrawing them again at their new locations.

These 3 steps loop fairly quickly, about 60 times per second (equivalent to 60 fps), when using HTML5’s new requestAnimationFrame() function.

  • Here’s my graph again, but this time the bars “fill up” smoothly. Click the button below the graph to see the animation again.

  • Here's the graph yet again, but now you can interact with it. Click on a bar and drag up and down to change the value.

  • Finally, a simple bouncing ball. It changes color when it hits a wall and reverses its course. Click on the ball to speed it up. Press the "Reset" button to slow it down again.


Weeks 5/6 - New inputs! Forming forms! All the APIs!

The HTML5 class ended with a whirl-wind overview 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. 🤷‍♂

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