Archive

Archive for the ‘DOM’ 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:

Book Reviewed: JavaScript: The Good Parts by Douglas Crockford

June 7th, 2008

Weighing in at 140+ pages of content, JavaScript: The Good Parts [Douglas Crockford] cuts through the obscurities, pleasantries, and filler found in most technical books. Instead, this book dives straight into the heart of the JavaScript language. It presents the clearest comprehensive explanation of what makes JavaScript a great programming language that I’ve encountered to date. It nails the important concepts, like JavaScript’s: object oriented nature, its classless (pseudoclassical) nature, and functional nature. While covering the fundamentals like JavaScript’s: functions, lexical scoping, lambdas, prototypal inheritance, and functional inheritance.

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.

More on the perils of The ASP.NET AJAX Framework

June 3rd, 2008

There’s no need to whip a dead horse (I’ve probably been griping about the ASP.NET AJAX Framework for too long), but… Jon Galloway and a group of other notable gurus (K. Scott Allen, Scott Koon, and Kevin Dente) have started a podcast, their latest segment sparked my interest since it covered ASP.NET AJAX and AJAX Libraries / Frameworks in general.

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

Author: Adam Kahtava Categories: .NET, AJAX, ASP.NET, ASP.NET AJAX, CSS, DOM, JavaScript Tags:

Free: Win a Copy of Beginning CSS: Cascading Style Sheets for Web Design

April 24th, 2008

Beginning CSS: Cascading Style Sheets for Web Design by Richard York is a great book for any web developer looking to thoroughly understand CSS.

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!

Author: Adam Kahtava Categories: Book, CSS, Contest, DOM Tags:

The ASP.NET AJAX Learning Curve

April 9th, 2008

The ASP.NET AJAX framework comes with a lot of baggage err… I mean… a huge learning curve when compared to other AJAX Frameworks like JQuery, YUI, Dojo, Prototype / Scriptaculous.

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.

Author: Adam Kahtava Categories: AJAX, ASP.NET, ASP.NET AJAX, CSS, DOM, JavaScript, Software Tags:

How Well Do You Know JavaScript?

January 13th, 2008

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:

Books:

Links:

Author: Adam Kahtava Categories: .NET, AJAX, ASP.NET, CSS, DOM, Firefox, IE, JavaScript, Software, Videos Tags:

My first Greasemonkey Script: Goodbye ASP.NET Forum Ads

November 21st, 2007

Greasemonkey is an add-on for Firefox. Through JavaScript it allows anyone the ability to dynamically modify a page as, or after it’s being rendered in the browser. This lets anyone trim the DOM, remove ads, and modify page in anyway they see fit (it also opens up some serious privacy concerns with XSS). Anyhow, I spend a fair time on the ASP.NET forums, but the advertisements have always made for a somewhat negative, but tolerable user experience.

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. :)

Author: Adam Kahtava Categories: CSS, DOM, Firebug, Firefox, JavaScript, greasemonkey Tags:

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.

March 20th, 2007

I’ve been using Style Elements within the HTML Body tag to work around some of the design flaws presented in ASP.NET 2.0 Themes – see the second solution in this post for more details. I’ve been leary of using this method because it’s not a best practice, since it compromises the validity of the HTML / XHTML document. I decided to do a little more research on this subject and made the following discoveries.

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.

Author: Adam Kahtava Categories: .NET, ASP.NET, CSS, DOM, Firebug, Firefox, IE, Opera, Themes and Skins Tags: