Take the First CSS Step

Concentrating on the credit portion, this bit of POSH code can be enhanced with even greater meaning by overlaying a microformat. For instance, one way to assign classes and pieces of information to the credit information might be:
<div id=””hcard-Robert-M-Cherny””>
<h3>About the author:</h3>
<h4><a href=””http://navigationarts.com””>
<span>Rob</span>
<span>Cherny</span></a>
<span>Lead Developer</span></h4>
<span>NavigationArts, LLC</span>
<span>
<span>
7901 Jones Branch Road</span>
<span>McLean</span>,
<span>VA</span>,
<span>22102</span>
<span>
United States of America</span>
<span>703.584.8920</span>
</span>

</div>
This example adopts the hCard microformat defined at microformats.org. The classes defined for vcard, given-name, additional-name, family-name, org, adr, and so forth identify key pieces of information. While on the markup-heavy side, it does, in a very granular way, specify the meaning of each element, which is of potentially great use.

In XML, tags give meaning to each field of information. With microformats, valid class and other attribute information can be added to the POSH code to enable understanding of the granular pieces of information.

There are two things wrong with this from a best practices standpoint. Both have to do with the naming of the classes on the

elements: rederror and bolduser both convey presentation information that implies what those elements look like. The standard practice is to avoid basing a name on a description of a “physical” or visual characteristic.

A better solution might be:

Warning: Username not found!

Username:

This example is a lot to digest. Take a look at each part of it in detail to see how it comes together. First, explore the markup of the document. I have included a <caption> element inside the table to house the name of the recipe:

<table class=’recipe’>
<caption>
Spicy Thai Peanut Sauce
</caption>
<colgroup>
<col/>
<col/>

I could just as easily have put the name of the recipe in a heading element like <h1> and placed it outside the table. I chose the caption so the name of the recipe is bound to the table of ingredients. Later, if I choose to, I can include the name of the website or a logo above the table of ingredients. Next, I’ve added <colgroup> and <col/> elements. These can be used to control the layout of each column, although I haven’t chosen to take advantage of this capability yet. Although you can use these elements, they are not absolutely necessary. I can leave them out, causing no impact on the table’s final rendered layout. Next, I added the table headings, placed inside <thead> elements, and I used <th> instead of <td> to house the contents of each cell:

<col/>
<col/>
</colgroup>
<thead>
<tr>
<th> quantity </th>
<th> measurement </th>
<th> product </th>
<th> instructions </th>
</tr>
</thead>
<tbody>

Only by going through real-world development with clients and attempting— successfully or not—to launch internal projects (often with punishing deadlines) do we hone our skills, learn our lessons, and, importantly, become strong enough and flexible enough to apply those lessons “the next time.” That’s striving for excellence, also known as professionalism.

Although learning specific skills and techniques and standards is critical to our becoming better developers, there are key areas that can be imparted only by working on actual Web development projects: communication, adaptation, and
persistence.

Communication

The Internet is about communication. The list of technologies that facilitate human contact goes on and on: instant messaging, email, VoIP when the telephone gets dated. Those meetings your colleagues describe as too long and pointless could instead be about finding consensus, focused on agreeing on the best solutions, if everyone has already discussed the problems before they reached the meeting room.

The remaining step in improving the sample page is to add dynamic elements after the page has loaded. Unless the elements of the document can serve some purpose when scripts are disabled, it may be best to add the elements after the page has loaded.

The W3C DOM includes a whole series of functions for inserting content and markup into a document. These are highly effective; however, for expediency, Microsoft introduced a proprietary DOM extension called innerHTML that inserts snippets of code into a document. As fate would have it, this method is not only faster to code, but performs faster in the browser as well. The benefits were difficult to deny, so every other major browser vendor that supports W3C DOM standards-based code has implemented this feature. That makes it exceptionally safe and convenient to use. Although some purists balk at its use because it is considered nonstandard, for our purposes here it is too convenient not to use.