This presentation by Christian sheds a lot of light on how to create re-usable, maintainable scripts.

• HTML5 structure—div, section & article – Oli.jp
• HTML5 – Wikipedia
• Dive Into HTML5
• The Best HTML5 Slides Ever
• HTML5 Forms
  • Have a Field Day with HTML5 Forms – 24 Ways
  • HTML5 Forms Spec – W3C
  • Improve your forms using HTML5 – Dev Opera
• The HGroup Element HTML5 Doctor
• HTML5 id/class name cheatsheet – Oli.jp
• Preparing for HTML5 with Semantic Class Names – John Tan
• 12 resources for getting a jump on HTML 5 – Authentic Boredom
• HTML5 Doctor
• HTML5 Gallery
• HTML5 video, canvas accessibility, microdata – Bruce Lawson
• Why browsers treat HTML5 elements as inline
• HTML 5 elements test – Bruce Lawson
• HTML5 Superfriends – Zeldman
• HTML5 structure—nav, aside, figure & footer
• HTML5 on Delicious
• HTML5 Reset Stylesheet HTML5 Doctor
• CSS3 Gradients
  • CSS3 Linear Gradients- Dynamic Drive
  • Quick Tip: Understanding CSS3 Gradients – Steven Azari
• CSS3 Fonts
  • CSS3 Web Fonts spec – W3C
  • Delicious – a free font to try – exljbris Font Foundry
  • CSS3 Embedding a Font Face – Zen Elements
  • The Potential of Web Typography – Craig Mod
  • Beautiful Fonts with Font Face – Mozilla
  • Typekit – A font hosting service for web developers
• Brain Dump of Real Time Web(RTW) and WebSocket – Bamboo Blog
• CSS3 Info

Related articles by Zemanta

• W3C HTML Working Group Publishes New Drafts (blogs.msdn.com)
• HTML5, document metadata and Dublin Core (downes.ca)
• HTML5 Resource: HTML5 Doctor (last-child.com)
• Microdata support for Rich Snippets (googlewebmastercentral.blogspot.com)
• 5 Must See HTML5 Sites (thenextweb.com)
• Flickr announces HTML5 video playback on iPad (toddrjordan.com)
• Mefeedia rolls out with HTML5 Video, the standard for new Internet browsers and the iPad (techstartups.com)
• Gmail HTML5-optimized for the iPad (tuaw.com)
• Brightcove supports HTML5 video officially (ubergizmo.com)
• HTML5 Forms. What support is there? (ajaxian.com)
• Why HTML5 is worth your time (radar.oreilly.com)
• HTML5 Forms. What support is there? (ajaxian.com)
• Why HTML5 is worth your time (radar.oreilly.com)

Television shows have featured captioning for many years. It’s sometimes the only way to figure out what they are saying on South Park. However, captioning standards are all over the place, the quality of text is questionable, and the industry is not supporting new innovations. This sucks.

Joe Clark is working on a new standard to fix these issues. He probably knows more about captioning than any other breathing creature in the world CaptioningSucks.com is the new home to the future of captioning. Perhaps it is time to buy the domain: CaptioningRules.com, for hopefully it won’t suck much longer.

Related articles

• Yahoo Video classifies porn as “Health and Beauty” [Nsfw] [via Zemanta]
• Flickr Video beta due in April [via Zemanta]
• Yahoo is less prudish than Google [Health And Beauty] [via Zemanta]

This problem was solved a few years ago by a series of layouts donated to the greater good by wonderful developers. This gave me the ability to ignore layouts and concentrate on semantic, structural markup and using CSS to turn this into a great set of modules on the page. This is the stuff that makes web development fun for me.

Over the years, new layouts came and went and cross-browser layouts developed to a science. It’s now even easier for you to build a web site layout that is predictable, flexible, and lightweight.

The YUI-Grid

Just because I work at Yahoo!, doesn’t mean I immediately jumped onto the YUI-Grid when it was released. I’ve built several sites without it since its launch. A developer becomes comfortable with a solution and change hurts. However, I recently began working on a very simple, small gallery site and gave this tool a try.

First, a bit of an explanation on some of the nomenclature. The YUI has laid down the law on some naming conventions, and while it may seem a bit bloated, the resulting hooks allow a site to easily incorporate the YUI JavaScript and CSS.

Each main container div has three children, class=”hd” for the header, class=”bd” for the body, and class=”ft” for the footer. You can delete the hd or ft if they are not needed, but you need to at least have the body element. The main portions of the page use the same naming conventions, although with id instead of class. The header has id=”hd”, the body container: id=”bd”, and finally the footer has id=”ft”.

YUI flexibility

Nate Koechley, the man behind the grids, has created a series of rules that let you change the width of your grid, the number of columns, position of columns, and how nested columns divide the avialable space by simply changing a few classes on the parent containers.

It’s a very powerful set of controls. Here’s an example of how the classes change the widths of nested divs.

The standard grid-unit interplay always divides space in two, evenly. To create layouts of more than two units (e.g., three), and to create layouts divided unevenly (e.g., 66% and 33% or 75% and 25%), we employ special grid holders. While “yui-g” tells the two children each take up half the space each, “yui-gc” tells the first unit to take up two-thirds of the space, and the other unit to take up one-third of the space. Everything else remains the same: units live within grids, and the first of a set must be indicated.
Nate Koechley – Yahoo! UI Library: Grids CSS

Help?

Now, if you are like me, your head has begun throbbing after reading the YUI Grid CSS page several times, making notes on how it works, and reading it a few more times before figuring out how to start. The package is complex and yet easy to work with once you dive in.

However, it’s easy to skip most of the headaches and begin building your site immediately. Dav Glass, also of the YUI team, created a great Grid Builder that makes it sinfully easy to build your complicated layout. Not only does it generate the HTML for your basic page, it also incorporates the full YUI CSS library.

This means you also get the YUI Base CSS, YUI Reset CSS, as well as the excellent YUI Fonts CSS. All of these are combined into one CSS file that has been akamized for faster downloads. This means your final site CSS can focus solely on the things that make it unique. You’ll be surprised how small your custom files will be when all of these issues have already been dealt with.

Take it one step further

I was prompted to write this post after seeing the latest extension of the Grid CSS from the outside. Christian Heilmann just published a simple javascript, Enhancing YUI grids with equal height columns, that builds on the established nomenclature of the Grid CSS. It’s a demonstration of the power afforded by a standardized class and id naming convention.

Christian’s javascript also utilizes the basic YUI Javascript library to take all of your nested divs and make them the same height. So, with the addition of one more js script, you now have complete control of your grid layout and your nested divs are all the same height.

Here’s how Christian describes the simplicity.

All you need to do is to add YAHOO, YAHOO Dom and YAHOO Event (easiest with the collated yahoo-dom-event package) and the script in the bottom of your document’s body. The script automatically equals all columns in nested grids. If you don’t want all of them to be equal, define only those that need fixing by adding a “columnfix”CSS class.
Christian Heilmann – Enhancing YUI grids with equal height columns

Future flexibility

This powerful package of YUI CSS and standardized nomenclature for establishing the building blocks and the YUI JavaScript library for building interactions will allow developers to spend more time creating the elements that make their site unique and reduce the cross-browser issues caused by individual mistakes. We’ll see more extensions from within and outside the YUI developers as the usage becomes more universal. They YUI libraries are not doing the work for me, they’re just making it a lot more fun and productive.

So, here’s my request. What pages do you routinely visit for web design ideas, design, programming content, etc that are not among the same 20 euro/US-centric blog lists? Leave your favorites in the comments section and we can all begin expanding our horizons.

1. A good old fashioned food poisoning at Google. Nothing too dangerous, just a good case of random explosive diarrhea to wipe the “we get free gourmet food” smile off their faces. I can imagine the perky blonde TV news reporter describe Googlers pooping all over their swimming pools, snack rooms, and massage chairs.
2. A Perl vs. PHP knife fight like the one in West Side Story. The Ruby on Rails guys could sit on the side line and watch the battle as they reward their superiority
3. Watching Oracle and Ebay employees argue at Starbucks about which company generates the most nightmares.
4. Seeing my name in Valleywag, preferably tied to some naughty scandal with missing money, illicit photographs, and a red Ferrari.
5. VC hawks battle on Hot or Not for a startup
6. Hotshots from “the City” hanging out in San Jose because it’s cool
7. An official “Dress Like Steve Jobs” day. Although this seems to be a daily ritual in some circles

Things I did get to see before leaving

1. Google, Yahoo!, Sun, Adobe, Microsoft, IBM, and other shops getting together to make web sites more accessible.
2. The best taco shop period: El Galope in East Palo Alto
3. Del.icio.us and Digg founders one upping each other at a SIG
4. Ask.com getting the biggest oohs and ahhs at an online maps SIG
5. Older men with bald heads and pony tails on every corner
6. Garlic Festival, Artichoke Festival, and the most flavorful: Folsom Street Fair
7. The temperature dropped 30 degrees within 15 miles, driving southbound 1 towards the Golden Gate Bridge
8. A geeky high-schooler dressed head to toe in valleyschwag looking mighty impressed with his insider self

Future Semantics

So far we’ve seen that there are three sources of semantics in HTML

• The built in semantics of HTML itself – its elements and attributes
• The ad hoc semantics of developers inventing their own vocabularies, which is typically “injected” into HTML largely using the class and id attributes of HTML
• Semi structured approaches to developing richer semantics, in particular the microformats project.

It would make sense that future semantic developments of HTML would come from these or similar sources or approaches. In this article I want to focus on each in turn, and consider the benefits and shortcomings of each approach to developing richer semantics for HTML.

I’ll begin with the second approach, “bottom up” semantics, which I considered in the first article, and have paid no small amount of attention to with previous research. In short, despite the success of bottom up ontologies, what Thomas Vander Wal terms “folksonomies”, where common vocabularies for describing things emerge through ad hoc usage (well known examples are Flickr’s tags, and Del.icio.us), vocabularies for describing common data on the web simply haven’t emerged. This is not just an assertion, as my previous research indicates. It should in fact not come as a surprise, because class values, for example, are “hidden”, while tags at del.icio.us or flickr, by comparison are visible giving rise to a positive feedback loop – when I as a user see a tag for a particular kind of thing, I am more likely to use it myself for similar kinds of things. Over time, particular terms appear to “win”, and become the conventionally accepted tag for that kind of thing. With class and id values on the other hand, we simply don’t get the network effect to anoint particular words as the names of things.

Semantics in HTML Part III – Towards a semantic web

I’m the first to cringe when someone discusses Star Trek or Star Wars in reverential tones. The theme alone is enough for me to think twice about this event. However, this night at the Yahoo! campus will bring out the big guns of the browsers (Chris Wilson from IE, Mike Shaver from FireFox, and Håkon Wium Lie from Opera are members of W3C).

The three of them will discuss the DOM object, the future of browsers, and more. Here’s a snippet of the announcement.

Attack of the DOMs is very relevant in this Browser Wars Episode II as Web 2.0 increasingly utilizes AJAX in interface design, functionality and web applications. Each browser implements its supported DOM. IE7 is known to suffer in performance from memory leaks that are related to its inherited DOM architectural design. Firefox quickly gains popularity with its DOM strategy among Web 2.0 communities with faster loading time. DOM Level 2 CSS allows programs and scripts to dynamically access and update the content and of style sheets documents. No designers can deny the importance of the interaction between CSS and DOM in rendering site design properly across browsers.
Web Sig

If you are in the Silicon Valley, hurry up and reserve your seating today! This will fill up quickly and you shouldn’t pass up the opportunity to see Håkon Wium Lie, the inventor of CSS and one of the original creators of the “internet”. The event is free to attend and Yahoo! will provide snacks and free sodas.

Understanding the virtual buffer is essential for empowering screen reader users, particularly considering the number of Web 2.0 applications that depend on Ajax. Screen readers typically take a snapshot of a web page, and place the content in a virtual buffer to allow the user to interact with the content.
Gez Lemon and Steve Faulkner – http://juicystudio.com/article/improving-ajax-applications-for-jaws-users.php

Gez and Steve Faulkner have just released a set of javascript functions that refresh the virtual buffer by working with setAttribute. They discovered this function triggers JAWS 7.1+ screen readers to grab a new snapshot of the page.

The scripts are fairly simple. When the page loads, insert a hidden form input. When your AJAX application completes its duties, change the value of that hidden input with the setAttribute function. This setAttribute activity will refresh the buffer and the screen reader will announce the content that has been changed via an AJAX call.

The updateBuffer function presented here extends the limited improvements in JAWS 7.1 and later, by providing a mechanism to update the virtual buffer for other interface elements, that works regardless of input device. This means that users of JAWS 7.1 and later do not need to explicitly update the virtual buffer in order to interact with Ajax applications.
Gez Lemon and Steve Faulkner

As I also predicted, I believe the YUI Connection Manager will incorporate this type of functionality. This will give enhanced accessibility to thousands of web sites instantaneously.