No Mod Required

Lost in the past few years of IE6 based stagnation (and ensuing developer angst) is the fact that the Internet Explorer team have come up with some pretty cool enhancements to the way we build web sites over the past ten plus years.

So, while we’re cheering on Firefox’s growing market share, hesitantly eying IE8 and waiting for the ugly stepchild of the browser landscape, IE6, to finally die a painful (and hopefully immediate) death, I thought I’d lay out some of the innovations introduced by Internet Explorer to remind us of relatively positive days gone by*.

As a fun exercise, while you’re reading this, compare these innovations to the black hole left in the web development world by the long and terrible reign of IE6. It’s an interesting juxtaposition of help vs. harm. Here’s hoping future versions of the browser continue to trend closer to the “help” line as IE7 has and IE8 appears to be doing**

XMLHttpRequest

For those that don’t know, XMLHttpRequest (XHR) is an API used by JavaScript to transfer XML (and other text formats like JSON and plain text) data between a browser and the web server.

This one is obviously pretty big. While “Ajax” the phrase coined by Jesse James Garret of Adaptive Path, didn’t spring directly from Redmond, a large part of it, and therefore much of the recent innovation in the way web interfaces are programmed, does spring from the creation of the XMLHttpRequest (XHR) object. Originally an ActiveX object, XHR is so far entrenched into the way web works right now it’s not even funny.

Personally, without Ajax making JavaScript the hot language it is today, I wouldn’t be half as marketable as I currently am.

Introduced in Internet Explorer 5.0

innerHTML

This JavaScript property is a read/write interface to the HTML markup and content within a given element.

All day, every day I use the innerHTML property. Faster than the DOM methods for object creation and insertion setting innerHTML is normally my first choice whenever I do DOM manipulations.

Introduced in Internet Explorer 4.01

iFrame

Like a frame, an iframe (”inline frame”) is an HTML element that allows you to embed a HTML document inside another HTML document. The iframe is the earliest innovation this list, appearing all the way back in 1996.

Humorously (or tragically depending on where your allegiance lies- Mountain View or Redmond,) a good portion of the GOOG empire is built on the iframe as the search giant uses an iframe to deliver its advertising on non-Google properties (you can see one in action on this very page.)

Introduced in Internet Explorer 3

The favicon

A favicon (favorites icon) is an icon associated with a particular website or webpage. The favicon not be the innovation that affects me the most on a day to day basis, but judging by the chatter generated by Google’s new favicon, I think a lot of people notice that little browser accessory.

Introduced in Internet Explorer 4

overflow-x, oveflow-y

Maybe not the biggest impact, being able to set the overflow property in one dimension is an immensely handy thing to be able to do and I’m happy to have it in my list of tricks.

*This is 100% focused on only technology. Anti-competitive practices and killing Netscape are definitely NOT positive.

**it should be added that while I’m pleased to develop for IE7 in comparision to IE6, it still falls short of what I’d like to see in terms of standards support. Hopefully IE8 will knock it out of the park, but until that time, I’d much rather everyone just go with Firefox, Safari or Opera

Dave Shea says:

“Did you know that you can nest your divs so deep that Firebug stops working properly? I do now.”

From:

mezzoblue § Design Rants

Personally, I’m surprised because I’ve seen some savagely nested divs produced by systems like Drupal and while it was a singularly awful environment to work in, it didn’t actually cause Firebug to choke. Also, looking through his code, I see nothing that screams to me as being exceptionally deeply nested. I put a comment in. I’ll update with more info…

Answer: When it’s a unique identifier.

Check out this class attribute generate by my beloved Wordpress’ upload feature:

class="alignleft size-medium wp-image-4590"

See anything suspicious? I sure do. wp-image-4590 is a unique identifier being passed off as a class. Why? I actually have no clue as I’m not privy to the thought process behind that particular piece of code What I do know is pretty much demands to be an ID. When I teach this stuff to people, I say “If it’s unique, meaning there will ever only be one of them, make it an ID. If there’s more than one or it’s a general descriptor, make it a class.” So I look at that code block every time I upload an image and I frown. Then I blow away the whole class attribute away, since I use none of them.

This is just splitting hairs, I know. Using a class like that is basically harmless. But, truth be told, splitting hairs helps me solidify my ideas about the way these things should work. That, in turn helps me improve the way my crew and I do our thing. So? Hairs I split and everyone is happier.

I’m just doing my small part to make the web a better place one nitpicky, semantic post at a time.

For real! I ran through all of the primordial webmonkey tutorials* when I was starting out building sites (10-11 years ago now!) and if the newly relaunched site is half as helpful it will be a great boon to the community. Great info and a friendly, funny attitude made it the place for me to learn about the web thing back in the last century. Honestly, I owe a lot to the usefulness of those early tutorials. Looking back on it I realize that Webmonkey, coupled with the community that sprang up around Dreamweaver at the time**, was a great forge upon which to build up my web chops.

We’re Back! Webmonkey Relaunches, Rejoins Wired

The original web developer’s resource has returned. Webmonkey has been completely redesigned, and we’re ready to rock once more. Also, our entire content library is now hosted on a wiki, so every tutorial, reference page and code example is open for editing. Come on in and show us what you’ve got!

Webmonkey: the Web Developers Resource

*Some still exist: like Thau’s JavaScript Tutorial, which is over ten years old now.

**I’ve been a Dreamweaver user since Version 1.2.

Check it out.

Invesra | Invest in your Future

The company is called Invesra. It’s a financial services startup with backing from Village Ventures. I did a quick site for them to get their new brand* out the door for the FinovateStartup even in San Francisco this week. They’ve got a great team** and an interesting product so it’s been a pleasure helping them out during a crunch period. As it always does, working with a startup makes me miss those startup days myself.

Then I think back to what working for two at once was like (Boston’s Weekly Dig and Advisortech) and I like the agency life just that little bit more

*Tom O’Keefe’s excellent work

**My lovely and talented girlfriend is Director of User Experience

The difference, of course, is that Crockford should understand that things are a little more complicated than that, but the ideas that he thinks are good enough to announce to the world are no better than the ideas a 5-year old has before breakfast. “No more iframes! No more document.write!” he declares, blissfully unaware that his employer’s home page uses both. “Strict entity parsing!” he demands… in a page with unescaped ampersands. “UTF-8 is the One True Encoding!” he proclaims boldly… in a page that declares itself as ISO-8859-1. “No more javascript: URLs! In fact, let’s replace Javascript altogether! And I’ll be back to talk about CSS!” It just goes on and on, the awesomeness gradually swelling until it all folds back on itself like a Möbius strip of self-parody. It’s the Bolero of trolls. Everything he claims is secure isn’t, and everything he claims would increase security wouldn’t. Everything he wants to add to HTML would make it worse, and everything he wants to remove would also make it worse. Please, please tell me he’s shooting the moon to make the worst proposal ever. It just doesn’t make sense any other way, at least not from anyone older than 5.

The Bolero of trolls [dive into mark]

The Fixing HTML page itself.

If you’re feeling nerdy, you can check out the long-neglected comic book blog I run. It’s been redesigned and moved into Wordpress, which means I’m more likely to update it than I was when it was on Blogger.

The design is a “knocked out as quick as possible” special. I’ll be tinkering with it over the next few weeks until I’m fully happy with it. I just wanted to get it out there. It’s a full Wordpress site now, which is really the fun part- Valid HTML; a YSLow score in the upper 70s; easier to update; a fancy new sprite; S3 integration for all those cover scans…

What’s not to love?

Click. If you dare!

It’s All Just Comics

If you’re using Flash and you want the best possible coverage (meaning it works with users who don’t have JS turned on) while still using something like SWFObject where possible to get around the “click here to activate and use this control” ActiveX message in Internet Explorer, then take a look at the ridiculous pattern below.

Warning- not for the squeamish…

Here’s the HTML:

<!--[if IE]>
   <noscript> 
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1004" height="281">
      <param name="movie" value="_assets/flash/homepage.swf" />
      <param name="quality" value="high" />
      <embed src="_assets/flash/homepage.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1004" height="281"></embed>
</object>
</noscript>

<![endif]-->
<!--[if !IE]> <-->
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1004" height="281">
      <param name="movie" value="_assets/flash/homepage.swf" />
      <param name="quality" value="high" />
      <embed src="_assets/flash/homepage.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1004" height="281"></embed>
   </object>
<!--> <![endif]-->

Here’s the SWFObject script served to Internet Explorer and ONLY Internet Explorer

<!--[if IE]>
<script src="_assets/js/swfobject.js" type="text/javascript"></script>
<![endif]-->

And here’s the SWFObject call:

        //use conditional compilation to hide this call from non-IE browsers
	/*@cc_on @*/
        /*@if (@_win32)
	if ($("home")){
		var so = new SWFObject("_assets/flash/homepage.swf", "mymovie", "1004", "281", "8", "#336699");
	   	so.addParam("wmode", "transparent");
	   	so.write("messaging");
	}
	/*@end @*/

Before I go further, let me just say I’m counting the days until I can just dump a SWF into the page and be done with it. I hate all of these script based machinations to get a SWF out to the browser. This is code overhead that really bugs me…

Anyway, here’s the HTML logic.

• We use Microsoft’s conditional comments to show/hide content
• In the “This is IE” block we use a noscript tag to present a traditional embed to IE users who might have JS turned off.
• Every other IE user with JS turned on will see the SWF embedded by SWFObject so no “click to activate and use this control” will be visible to the user. Since the majority of people on the web use IE and the majority of them surf with JS turned on, most users will fall into this category.
• Then, in the “This is not IE” block, we just embed the Flash the old school way. Since the Eolas suit doesn’t come into play with other browsers, embedding the SWF the old way is fine (at least in terms of the “click here…” nonsense.) As an additional benefit there’s no concern over whether or not the user has JavaScript turned on. JavaScript or no, the only issue is whether or not they have the plugin. Whereas with SWFObject there’s a possibility (however slim) that a user could have the Flash plugin installed but be surfing with JavaScript disabled. As I mentioned, this is for the best possible coverage… Also, if they don’t have the plugin they get the “download this plugin” notification. I head reports that that wasn’t happening with SWFObject running* so getting that to work properly is definitely a bonus. It was actually that bug report that got me into this whole mess

As for how it works technically, the following

<!--[if IE]>

Is read by IE as a test (if the browser is Internet Explorer.) Every other browser reads it as an open comment. Since it’s an open comment everything up until the close comment (<![endif]–>) will be ignored by non-IE browsers. IE, on the other hand will go ahead and process that markup normally since it recognizes that pattern as a conditional and its test will evaluate to true.

As a note, I don’t like using this stuff all over the place**, but in a situation like this conditional comments are a great option to have.

On the flip side All other browsers read this pattern:

<!–[if !IE]> <–>

As a completed comment, opened and closed on the same line. Therefore everything that follows is rendered normally by Firefox, safari and all the rest. IE, on the other hand, reads it as the beginning of a “If the browser is NOT IE” conditional. Since that resolves to false, everything down to the end of the conditional endif (<!–> <![endif]–>) is ignored by Internet Explorer. That allows us to go back to the future and embed flash in the old school way for everything but IE.

Oh the pain.

Still, if you absolutely need the best possible coverage and want to use SWFObject, this is a way to go. Is it the best? Probably not, since it’s horrifyingly hack-y and won’t validate. But it might be useful for someone out there…

*and I could figure out how to make it happen…
**I mostly use it to attach IE specific style sheets. For those of you keeping track, that looks like this:

<!--[if gte IE 5.5]>
<![if lt IE 7]>
<link rel="STYLESHEET" type="text/css" href="_assets/styles/ie6.css" />
<![endif]>
<![if gte IE 7]>
<link rel="STYLESHEET" type="text/css" href="_assets/styles/ie7.css" />
<![endif]>
<![endif]-->

I like the sound of the Email Standards Project

The Email Standards Project works with email client developers and the design community to improve web standards support and accessibility in email.

Our goal is to help designers understand why web standards are so important for email, while working with email client developers to ensure that emails render consistently. This is a community effort to improve the email experience for both designers and readers alike.

I don’t do HTML emails very often any more (although they still sneak through,) but we still do a ton of them at Cramer so just for my co-workers’ sake I’d love to see email clients come together the same way browser vendors have (finally) come together in order to allow us to code clean, light, standards compliant HTML emails. If I never had to rely again on the dirty tricks we use to get HTML emails to render I would be a happy man. It would also save clients money since the unwieldy beasts we send out are a lot more difficult to maintain and edit than something with nice structure would be.

I’m constantly trying to come up with little markup patterns that make semantic sense and make it easier for me to create requested layouts without having to resort to a bunch of extra classes and IDs.

One common design element that I’ve been bothered by recently* but haven’t sat down and figured out looks like this:

Today I took a step back** and came up with this to represent it:

<dl>
<dt>Sessions focus on:</dt>
<dd>
<ul>
<li>Configuring, tuning and understanding hardware servers and software applications</li>
<li>Client side issues related to Mac OS X computing and management</li>
<li>Integration with PSx, UNIX, Telephony and other environments </li>
<li>Managing Macs in an enterprise environment</li>
<li>A Jump start for admin newbies</li>
<li>Best Practices for 3rd Party Tools IntegrationM</li>
</ul>
</dd>
</dl>

Which feels just about right to me- it captures the relationship between the lead-in (the lead in being the term defined) and the list (the list being the definition of the lead-in), and would allow me to style the whole thing with no additional markup.

I’ll just go ahead and file that one away.

*I’ve seen it on four or five different sites I’ve built in the past year and not so often before that. So up until recently it was never enough of a recurring pattern for me to even worry about.

**amazingly, since this markup will end up on a Drupal site. It’s a wonder I even bothered since Drupal is pretty much on the complete opposite end of the spectrum from my minimalist coding style.