Archive

Archive for the ‘Web Standards’ Category

Book Reviewed: Designing with Web Standards by Jeffrey Zeldman

July 20th, 2009

The title of Jeffrey Zeldman’s book (Designing with Web Standards) says it all – this book promoted accessible, usable, search engine friendly web design and development through the use of XHTML and CSS while debunking the myths surrounding web standards. Zeldman is a well recognized name among web developers and designers – he’s the the founder of A List Apart, and co-founder of The Web Standards Project (WaSP). His writing is entertaining, witty, easy to read, and insightful – it’s very much like the content we’re used to reading at A List Apart. It’s also fair to mention that this book has been edited by industy experts and influencial writers like Eric Myer. Any developer that works with the web should read this book along with JavaScript: The Good Parts by Douglas Crockford.

Author: Adam Kahtava Categories: Book, CSS, DOM, JavaScript, Review, Web Standards Tags:

Chronic Divitis And Classitis, What Are They?

July 15th, 2009

Jeffery Zeldman offers this entertaining definition for Divitis and Classitis:

Classitis is the measles of markup, obscuring meaning as it adds needless weight to every page. The affliction dates back to the early days of semi-CSS-capable browsers and the many designers’ initially childish comprehension of how CSS works.
Alas, many have not yet outgrown that childish misunderstanding of CSS … Classitis is as bad in its own way as the <font> tag ever was; rarely does good markup require it … At other times classitis is exacerbated by a still more serious condition … divitis … Classitis and divitis are like the needless adjectives with wich bad writing is strewen. They are the weeds in the garden of meaning. – Jeffrey Zeldman, Designing with Web Standards

An example of markup wraught with divitis and classitis:
googleexercise-divitis1
13 div elements and 11 classes for a single item. What a stench! :)  View this markup in action.

The equivalent markup disease free:
googleexercise-semantic
Cleaner, more meaningful, and with all the functionality of the former code. One div element and 3 classes for a single item.  ShamWow! View this markup in action.

Both of these markup snippets are visually and functionally equivalent. In the first example the divs, classes, and cryptic ids weigh down the page and pollute the meaning of the markup. In the later, a more semantic / structural approach is taken  Both these snippets were pulled from my attempts at the Google Web Developer Exercise.

Clean meaningful markup is the API that users and web crawlers consume – it’s important and easy to keep things clean, it just takes a little experience. Thank goodness for patterns like MVC that let us control our API (the markup).

What Is Semantic / Structural Markup and Why Does It Matter?

July 13th, 2009

I always found the definition of “Semantic / Structural Markup” murky on the intertubes. I thought Jeffrey Zeldman described it well in his book Designing with Web Standards.

What Is Semantic / Structural Markup?

Markup is “semantic” when tags are chosen according to what they mean. For example, tagging a headline h1 because it is the most important headline on the page is a semantic authoring practice. Tagging a headline h1 “to make it look big” is not. … I use the phrase “structural markup” to mean pretty much the same thing as “semantic markup.” (“Structural markup” takes its name specifically from the idea that the web document has an outline-like structure.) – Jeffrey Zeldman, Designing with Web Standards

Zeldman goes on to make many great points on why semantic markup matters, here’s my paraphrase.

Why Does Semantic / Structural Markup Matter?

If you’re interested in learning more about semantic markup then view A List Apart’s source code, or read their many online resources: Topics: Code: HTML and XHTML.

Author: Adam Kahtava Categories: CSS, DOM, JavaScript, Web Standards Tags:

RailsEnvy: Funny Geeky Videos on MVC and HTML

July 10th, 2009
Author: Adam Kahtava Categories: Videos, Web Standards Tags:

The Google Exercise Revisited: Semantic Markup with jQuery

July 9th, 2009

A couple years ago I tried getting a Web Developer position at Google. After a few interviews they had me complete their Web Developer exercise. I did it, and my initial submission would have made any respectable web developer ill – you can read more here: Getting a Job at Google: A Web Developer Fizzbuzz. I redid the exercise over a year ago, but today even that code stink.

I did the exercise yet again (the third time) because my last attempt needed some improvements:

  • it suffered from chronic classitis and divitis (too many classes, ids, and divs were making me itchy)
  • it wasn’t really using semantic / structural markup (all the extra divs etc… cluttered my markup, and some of my class names like container-borders are non-semantic altogether)
  • it performed poorly and wasn’t accessible (everything was being rendered in the DOM, there was no immediate rendered markup which kind of violated the idea of unobtrusive JavaScript, nor was it screen reader friendly)
  • it wasn’t making use of any JavaScript libraries to abstract browser inconsistencies out of the code
  • it suffered from my software ethnocentrism (my variable and object naming like GoogleExercise was mirroring statically typed languages and not the native language they were being written in)

Here’s my latest Google Exercise (addressing all the above concerns):
View this post outside your RSS reader to see it in action or view it here.

This attempt makes use of jQuery and uses 57 lines of JavaScript (almost 200 lines less from my last one).

You can view the code for this attempt here: google.contact.widget.js, index.html, google-contact-widget.css.

You can view the old code here: GoogleExercise.js, index.html, GoogleExercise.css.

If you think I can improve on my code then let me know. Oh yeah, and if you’re a recruiter from Google then hire me! :)

Web Standards are Important and Here’s Why

January 26th, 2009

It feels like Web Standards have always just existed, but they’ve only been around since the 90′s. Today, they’re the default for cross-browser compatible web applications. However; some people still like to talk them down – fingers are pointed at ambiguities within the written specifications, imperfections, and various edge cases between browser implementations (most of which can thankfully be resolved through test suites and browser vendor collaboration). Today, if you’re not embracing Web Standards, then you’re missing a bigger point.

The importance of Web Standards lies in its unified language. Web Standards offer a common paradigm, a starting point, they’re intended to be built upon / extended, and (like everything else we’ve created as a species) they’re not perfect. Web Standards and the Object Paradigm (Object Oriented Design / Object Oriented Programming) share these similarities. Eric Evans describes the value of the Object Paradigm to be its widespread adoption, not its technical superiority:

Today, the object paradigm also has some significant circumstantial advantages deriving from its maturity and widespread adoption … Objects are already understood by a community of thousands of developers, project managers, and all the other specialists involved in project work. – Eric Evans, Domain Driven Design

On a similar thought Bill Bryson describes the dark ages of chemistry – before standardized conventions and the periodic table was formed:

chemists for so long worked in isolation, conventions were slow to emerge. Until well into the second half of the century … Chemists also used a bewildering variety of symbols and abbreviations, often self invented … Despite the occasional tidying-up, chemistry by the second half of the century was in something of a mess … [Mendeleyev] began toying with a way to arrange the elements … thanks to Mendeleyev’s invention [the periodic table], chemistry was now on a firm footing. – Bill Bryson, A Short History of Nearly Everything

Today, Web Standards are understood by a community of thousands of developers, designers, project managers, and most of the other specialists involved in web work. Web Standards are our firm footing. Web Standards aren’t about being perfect, they’re about a common language, about working collectively towards (or at least embracing) a goal. Web Standards are here to stay.

* photo courtesy of Andrew Walsh
Author: Adam Kahtava Categories: Musings, Web Standards Tags: