Tag Archives: HTML

Milestone Hangout 0.2.0 Reached

For months I’ve been doing weekly Hangouts where I walk through the HTML Specification, and most recently the CSS 2.1 Specification. This has served as a means by which I can help others get a better understanding of the core technologies behind solid web development, as well as an opportunity for myself to retrace some of the forgotten roots of these ubiquitous languages.

Recently I wrapped up episode 20, or 0.2.0, which covered Counters, Automatic Numbering, Lists, and Backgrounds in CSS. It was a great episode since I had never actually used counters in CSS to begin with. This was one of the benefits of retracing those old roots – there is a surprisingly amount of stuff that isn’t common enough that I ever learned about it in the past.

After roughly 21 hours of live hangouts I am about to start a series of JavaScript hangouts. These will take place at the same standard time, Thursday evenings at 7:30pm Eastern. If you’re new to web development, or don’t feel all that confident with JavaScript, please feel free to attend. You can login with your Twitter handle and ask questions in realtime.

If you want to drop through some of the older hangouts, they’re organized in two playlists:

HTML Hangout Concludes after 16 Hours

For months I have been doing a weekly HTML Hangout where I work, slowly, through the W3C Specification for HTML5. I’m pleased to say that after 15 videos, and 16 hours, we’ve gotten to the point where we can progress on to bigger and better things.

HTML is now taken care of, and we will now move on to making this a weekly CSS Hangout. If you’d like to watch the HTML5 lessons, you can do so by viewing this playlist of YouTube: http://www.youtube.com/playlist?list=PL3IYnZmsleiXRVk1G-dcX4AJ_9kcSIO99.

If you’d like to join us in the future, simply show up to http://learn.sampson.ms on Thursdays at 7:30PM Eastern. Broadcast usually starts about 10 minutes early, and we open up the last 10-15 minutes for questions and answers.

Polyfill for Reversed Attribute on Lists

Lists in HTML typically appear in decimal fashion, starting from 1 and going to n. Sometimes these are instructed to appear in reversed order via the reversed boolean attribute on the ol element.

<ol reversed>
    <li>I am number two.</li>
    <li>And I am number one.</li>
</ol>

Some browsers don’t understand the reversed attribute, and thus will not reverse the list. Although you cannot reverse the entire list in some browsers with this attribute, you can manually override the value associated with each list item in most browsers via the value attribute.

<ol>
    <li value="2">I am number two.</li>
    <li value="1">And I am number one.</li>
</ol>

Using jQuery, we can quickly create a short polyfill that will give us reversed functionality in browsers where it’s not natively understood.

(function () {
    if ( $("<ol>").prop("reversed") === undefined ) {
        $("ol[reversed]").each(function () {
            var $items = $(this).find("li");
            $items.attr("value", function ( index ) {
                return $items.length - index;
            });
        });
    }
}());

The code should be fairly straight-forward, but let me explain what is going on just to be on the safe side.

We start with an IIFE (Immediately Invoked Function Expression) which runs our code instantly, as well as keeps all declared variables out of the global namespace.

Next we kick things off with a quick feature-test on a freshly-made ol. In browsers that understand the reversed property, the default value is false. In other browsers, the property is undefined.

We then grab a collection of all lists that have the reversed attribute. Next we cycle over this collection of lists, assigning the list items from each iteration to the variable $items.

We then take the $items jQuery collection and begin an implicit loop setting the value attribute of each item in the collection to collection.length - itemIndex. If there are five items in the list, and we’re on index 0 (first item), five will be returned as the value. When we enter the second iteration, and the index is 1, (5-1) will be returned, resulting in a value of 4.

Voila, we have polyfilled reversed. There are some shortcomings; this won’t work on lists created after this code runs. You could however put this logic into a function declaration and call it after the DOM has been updated asynchronously, so as to handle any new lists that might have populated the document.

One very important note when using jQuery as a means to polyfill older browsers, you will have to use jQuery 1.8.3 or below. Around the release of jQuery 1.9, a lot of antiquated code was removed that once propped up older browsers. jQuery 1.9 and forward are meant for modern browsers, and as such they will fail in carrying your polyfilled functionality back to older browsers like Internet Explorer 6, and its contemporaries.

Free Web-Development Course

I have recently started offering a free web-development course both in person and online. The title of this meetup is “Home-Brew Web Development” and it takes place every Thursday evening at 7:30pm Easter Standard Time (unless otherwise stated). Each meetup is streamed live online at http://learn.sampson.ms, and archived on YouTube immediately afterwards.

We will start by learning HTML, followed by CSS. Eventually we will get into more advanced topics but I plan to keep it simple for now. This course is intended for those who have zero (or very little) experience in web-development, but are interested in it as a hobby, or a career-opportunity.

If you would like to receive regular updates regarding this course, future meetings, and more, you may subscribe to the newsletter via the link below. If at anytime you wish to stop receiving emails and stop attending the meetup, you’re totally free to go – it’s your call :)

Subscribe: http://eepurl.com/u_A61
Episodes: http://www.youtube.com/playlist?list=PL3IYnZmsleiXRVk1G-dcX4AJ_9kcSIO99