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.

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:

13 div elements and 11 classes for a single item. What a stench! :)  View this markup in action.

The equivalent markup disease free:

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?

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?

• it helps make web sites more accessibile
• it provides a means to meet government mandatied web accessibility guidelines
• it’s a critical component for Search Engine Optimization (SEO) because the Google search engine is the biggest blind user on the web - Zeldman
• doing the right thing is the right way to do things - developers should have a sense of pride in being a craftsman :)
• did I mention Search Engine Optimization?

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.

This book’s size makes it approachable for all audiences, its style is terse and concise. This book has the potential to do for JavaScript, what Richie’s inspirational classic the C Programming Language did for the C language.

JavaScript is the programming language of the web (AJAX), and this book will guide you through the good parts of this often misunderstood language - while this book is an excellent reference, it is not intended to replace JavaScript: The Definitive Guide, you’ll do best to have both these books on hand.

If you enjoyed (or are considering) this book then you may want to learn more of what Douglas Crockford has to say, check out his great JavaScript video series on the YUI Theater.

I highly recommend this book. View my review on Amazon.

I share their sentiments so I thought I’d post a brief but choppy transcript:

[ASP.NET AJAX] … does offer some some nice features, they did try to take some of the common pieces of the CLR that [.NET Developers are] used to working with and move that down into a JavaScript library. So you get classes like a WebRequest class that wraps the XMLHttpRequest … and they have a StringBuilder, and they added methods that we’re more accustom with …

that’s wonderful, but I don’t find myself needing those extensions all that often. If you want to do strictly client-side programming then something like jQuery offers you a lot more capabilities to do things that you really want to do client-side like sorting and CSS selectors. … That stuff is easy to do with an Update Panel and ASP.NET, but Update Panels aren’t always the best solution to use. …

the goals with ASP.NET AJAX was to integrate into the ASP.NET server-side model … that’s great for ASP.NET, but it needs more client-side features. … It works if your thinking from the ASP.NET control perspective, but if you look at it outside the ASP.NET model there are a lot easier ways to do it. …

ASP.NET AJAX [development] seems to have come to a standstill I’m not seeing a lot of development in that area and the rest of these [AJAX] Frameworks are doing monthly releases. Every month that goes by [the ASP.NET AJAX Framework] falls further and further behind … it needs to evolve.

Listen to this podcast here: Technology Round Table Podcast #2 - AJAX Frameworks

This book was required pre-reading for my latest Technical Editing task - I'm editing Mr. York's newest book. So in the spirit of spring, de-cluttering, and giving. I'd like to give this book away. This book is like new with a couple minor dings (from an airport fiasco), it is in full color (like all good design books should be), and it's free!

Contest Rules:

• Comment on this post.
• Leave a valid email in the email comment field.
• The winner will be chosen at random and notified through email on Canada Day (July 1st).
• I pay for shipping.

Good Luck!

The contest has ended and the winner is Devin Parrish!

Here's a running list of the technologies, and concepts you'll encounter when digging into ASP.NET AJAX:

• ASP.NET
• The Page Life Cycle
• The Control Life Cycle
• Web Controls
• User Controls
• View State
• Session State
• Events
• .NET / Classical Language
• Interfaces
• Inheritance
• Delegates
• Multicast Delegates
• Assemblies
• Properties (Get / Set)
• Constructors

In addition to these, you also have the technologies universal to all JavaScript libraries:

• JavaScript:
• Closures
• Object Literals
• JSON
• Events
• DOM Manipulation
• Prototypical Inheritance
• Constructors
• XMLHttpRequest
• Cascading Style Sheets (CSS):
• Web Services

The ASP.NET AJAX Framework is more complex than other AJAX frameworks, I'm continually lost in it's ambiguity as it attempts to skirt around the JavaScript language - I think this learning curve (and all it's confusion) is precisely why Silverlight has so much potential.

I'm still diving into the low-level details, but my first impressions of the ASP.NET AJAX Framework are:

• Obscure, ambiguous, no clear vision - it offers multiple (resource intensive) ways to avoid writing JavaScript, but then requires that you write JavaScript anyways
• Too server centric
• Too heavy weight (I'm not appreciating how they're trying to turning JavaScript into a Java, C#, .NET clone, the overhead within the browser for these conversions seems like a huge performance bottleneck)
• Has the potential for poor performance

Most of the other AJAX libraries have been written with performance, browser responsiveness, and User Experience as their number one priorities - I'm still not sure about ASP.NET AJAX.

How many ways can we try to avoid writing JavaScript? If an AJAX library doesn't enhance the User Experience then why use it? Regardless, I'm still digging deeper.

JavaScript is probably the world’s most popular and misunderstood programming languages and for good reason.
When a developer claims to know JavaScript this generally equates to one or all of the following:

• “I know what JavaScript is, I can learn JavaScript in 30 minutes“
• “JavaScript is for kids, it’s a toy language, it’s easy”
• “I just copy and paste my JavaScript snippets / scripts from the internet”
• “JavaScript is just another programming language like C++, C#, VB.NET, or Java”

If thoughts similar to these have crossed your mind when sizing up your JavaScript knowledge, then you probably don’t know JavaScript.

I would argue that if you’ve never programmed in a functional programming language (like: Lisp, Scheme, F#), never read a GOOD book on JavaScript, or never watched a video on JavaScript, then you probably don’t understand JavaScript at all. JavaScript is starkly different than any other mainstream programming language.

When it comes to JavaScript, if you don’t understand the fundamentals then you’re only punishing yourself.

Here are some things every JavaScript developer should probably understand:

• JavaScript, Mocha, LiveScript, JScript, and ECMAScript are all essentially the same.
• JavaScript is a prototypically inherited (prototype-based programming) language which is very different than the classically inherited (class-based programming) languages like C++, Java, and most of the .NET languages - you know the difference between a prototype-based programming and class-based programming language.
• JavaScript is a loosely typed language - you know the difference between strongly-typed programming languages and weak-typed or loosely typed languages.
• JavaScript is a functional lambda language - you understand lambdas and that functions in JavaScript can be lambdas.
• JavaScript functions can be defined inside functions, inside functions, inside functions, and so on - you can demonstrate this.
• JavaScript uses function scope, has no curly brace ‘{}’ block scope - you understand that this is common attribute of most functional programming languages.
• JavaScript has no private, public, protected assessors, no classes, no enums, no structs - you understand that all these language features can be achieved through objects and function closures.
• JavaScript is classless, but instead it uses objects as general containers.
• JavaScript makes use of garbage collection.
• JavaScript uses truthy and falsy values - you understand which values are truth and falsy.
• JavaScript makes use of the ‘nan’ (not a number) and ‘undefined’ values - you understand the difference between these values.
• JavaScript has pretty good debuggers - you understand how to debug JavaScript from both IE (link) and Firefox (link).
• You appreciate recursion, and understand that recursion is a useful technique in JavaScript.
• You understand that JavaScript Namespaces should be used - you understand the importance of namespaces, and know how to create one (Namespacing Your JavaScript).
• You know how to avoid the JavaScript pseudo-protocol (<a href=”Javascript:alert(’hello’);”), and appreciate avoiding it.
• You know how to avoid embedding DOM Level 0 JavaScript events (<a onclick=”alert(’hello’);”) in your mark-up / document structure, and appreciate this technique.
• You know that JavaScript can make use of two different event models (event capturing and bubbling), but we should only ever make use of bubbling.
• You understand what JSON is and how it’s used.
• You know how to keep you JavaScript, CSS, document structure separate, and appreciate non obtrusive JavaScript.

If any of these points seem foreign, then it may be time to learn JavaScript. With all the hype and buzz around Web 2.0 and AJAX it could be a great way to augment your career while broadening your programming language vocabulary.

Great resources for learning more about JavaScript:

Videos:

• The JavaScript Programming Language: Part 1, Part 2, Part 3, Part 4
• An Inconvenient API: The Theory of the DOM: Part 1, Part 2, Part 3
• Advanced JavaScript: Part 1, Part 2, Part 3
• JavaScript: The Good Stuff: Link
• All these videos are available on the YUI Theater - all the videos are great, watch them all!

Books:

• JavaScript: The Definitive Guide by David Flanagan
• JavaScript: The Good Parts by Douglas Crockford

Links:

• MDC: A re-introduction to JavaScript
• Code Conventions for the JavaScript Programming Language
• JavaScript: The World’s Most Misunderstood Programming Language
• What ASP.NET Developers Should Know About JavaScript
• Best Practices: Implementing JavaScript for rich internet applications
• The seven rules of Unobtrusive JavaScript

Today I finally broke down and wrote my own Greasemonkey script - now formally known as “The ASP.NET Forums Beautifier” for lack of a better name.

The Script Before and After:

Before - usually the ASP.NET Forums look like this:

After - with my script running in Greasemonkey we get this:

note: the greasemonkey icon, and complete lack of fluff / advertisements on the second screenshot.

Creating this script was simpler than I expected. It was a matter of skimming through an article on How to write Greasemonkey scripts, using Firebug’s JavaScript Console and Firefox’s Error Console to test my code (after all, Firefox is the new IDE, Firefox as an IDE), and an hour later, Viola! No more ads.

The YUI blog and Douglas Crockford in particular, have inspired my JavaScript renaissance. JavaScript is really interesting, it’s a functional, loosely typed programming language that uses prototype-base inheritance. Developing in JavaScript is a real treat from some of the more statically typed languages.

Download Greasemonkey and “The ASP.NET Forums Beautifier” for yourself. :)

Discoveries:

1. Some of the more complex web sites (Amazon and Yahoo!) make use of Style Elements within the Body Element - see the source snippets below.
2. Gecko (Firefox, Flock, Mozilla, etc…) based browsers automatically move Style Elements found within the Body Element into the Head Element and render the page as expected - see the rendered Document Object Model (DOM) image below.
3. Internet Explorer doesn’t move the Style Element into the Head Element, but renders the page as expected.
4. Opera… well I wish I knew what Opera did, but the page renders as expected.

Source snippet from Amazon:

</table>
    </td>
  </tr>
</table> 

<style type=”text/css”>
.lol-hr-center { margin: 5px; border-top-width: 1px;
/* and so on… */
}
</style>

<div id=”listoflists_data” style=”display:none”>
Note how the Style element is located between the <table> and <div> tags.

Source snippet from Yahoo!:

<h4>
<a id=”paweather” class=”details” href=”r/wb/*-http://weather.yahoo.com/forecast/USKS0448_f.html”><span class=”icon”>Weather <b><strong>51&deg;</strong>F</b></span></a>

<style type=”text/css”>#patabs #weather .icon{background:url(http://us.i1.yimg.com/us.yimg.com/i/us/we/31/b/26.gif) 3px 2pxno-repeat;}</style>

</h4>
Note how the Style element is located within the <h4> tag.

A snapshot of the Document Object Model (DOM) as seen through Firebug:

Note the highlighted area references the Yahoo! source snippet from above.Â
Conclusion: Although the Style Element within the Body Element compromises the validity of a document, some of the leaders in web design and accessibility use this approach, so it may not be as big a work around or hack.

]]> http://adam.kahtava.com/journal/2007/03/20/in-favor-of-using-style-elements-embedded-style-sheets-style-blocks-style-tags-or-whatever-you-want-to-call-them-inside-the-html-xhtml-body/feed/ http://adam.kahtava.com/journal/2007/01/07/underscore-_-rendering-issues-with-cascading-style-sheets-css-in-internet-explorer-ie-firefox-and-other-browsers/ http://adam.kahtava.com/journal/2007/01/07/underscore-_-rendering-issues-with-cascading-style-sheets-css-in-internet-explorer-ie-firefox-and-other-browsers/#comments Sun, 07 Jan 2007 21:22:46 +0000 Adam Kahtava http://adam.kahtava.com/journal/PermaLink,guid,3ac7da1a-d857-4cdf-b81a-e62fe30d6ddd.aspx The World Wide Web Consortium (W3C) Cascading Style Sheets (CSS) 2 specifications introduced the underscore (_) as a valid CSS naming character, this allows CSS selectors like class selectors and ID selectors to be named like:

• ._menu_item_1
• #_menu_item_2
• .menu_item_3
• #menu_item_4

However; rendering inconsistencies remain among most popular browsers when Styles, Classes, or IDs are preceded by the underscore character.

Inconsistencies:

CSS Classes and IDs with an underscore immediately after their respective delimiter (’.’ Or ‘#’) are rendered by both Firefox and Opera, but NOT by Internet Explorer.
This CSS example will NOT work in Internet Explorer, but WILL work in Firefox and Opera:

._idTest1{
background-color: red;
}
#_id_Test2{
background-color: red;

Style entries preceded by an underscore are rendered by Internet Explorer (IE 6 & 7), but NOT by Mozilla / Gecko (Firefox) or Opera.

This CSS example will only work in Internet Explorer:

*{
_color: green;
}

This is a documented quirk and bug, see The Underscore Hack and IE Underscore Bug Test for more information.

The Results of our Underscored CSS in Internet Explorer:

The Results of our Underscored CSS in FireFox (rendered the same in Opera):

This CSS quirk came up in an ASP.NET forum, where a poster was having cross browser issues with his menu controls. We discovered that <xhtmlConformance mode=”Legacy” /> was defined in his web.config file which caused the ASP.NET Master Page control (ctl00) to be preceded by an underscore (_ctl00) which was preventing the CSS from being rendered in IE.

Related links:
The IE Underscore Bug Test
The original forum thread: menu control in master page does not get styles in ie 6.0.
ScottGu’s Blog: Gotcha: Don’t use <xhtmlConformance mode=”Legacy”/> with ASP.NET AJAX
View the complete source code for my Underscore Test or try it on your favorite browser here.

]]> http://adam.kahtava.com/journal/2007/01/07/underscore-_-rendering-issues-with-cascading-style-sheets-css-in-internet-explorer-ie-firefox-and-other-browsers/feed/ http://adam.kahtava.com/journal/2006/12/09/now-supporting-opera-9-and-other-web-development-css-related-notes/ http://adam.kahtava.com/journal/2006/12/09/now-supporting-opera-9-and-other-web-development-css-related-notes/#comments Sat, 09 Dec 2006 19:00:07 +0000 Adam Kahtava http://adam.kahtava.com/journal/PermaLink,guid,5efaf26f-23e5-410c-83c7-8177e09326c1.aspx I noticed that a couple visitors were using the Opera web browser, so I decided to check my site with this highly W3C CSS compliant browser - see the “Acid2 Test”.

To my horror, I found my CSS wasn’t working properly.

My blog in Opera (the CSS rendering issue):

I began debugging my site by starting up Firefox with the Firebug extension. Upon inspecting my Document Object Model (DOM) and my rendered CSS I found a syntax error (a bug).

Using the Firebug extension for Firefox to view the DOM and related errors:

My error; I had erroneously entered */ instead of /* for my CSS comment. After making the changes everything rendered as expected in Opera.

Conclusion; My site now works with Opera 9. As a rule of thumb, I generally do my CSS design in a more W3C CSS compliant browser like Firefox, Opera, etc… and then make the respective changes for proper display in IE. Firebug is amazing, the best web development tool I have seen in a long time. Firebug really makes debugging a breeze.

Other useful Firefox extensions:

• Colorzilla - Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
• del.icio.us - Keep, share and discover all your favorite things.
• FasterFox - Performance and network tweaks for Firefox.
• FireBug - Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
• Greasemonkey - Customize the way webpages look and function (hide search engine advertisements, tweak Gmail).
• Mouse Gestures - Allows you to execute common commands (like page forward/backward, close tab, new tab) by mouse gestures drawn over the current webpage, without reaching for the toolbar or the keyboard.

Other useful Internet Explorer extensions / toolbars:

• Internet Explorer Developer Toolbar Beta 3 - Tools for quickly creating, understanding, and troubleshooting Web pages

]]> http://adam.kahtava.com/journal/2006/12/09/now-supporting-opera-9-and-other-web-development-css-related-notes/feed/