HTML CSS JavaScript

Here's the link I promised:

JavaScript 101: Adding Interactivity to Your Site Using the World's Most Popular Programming Language

*A note on the title- I'm just repeating what Douglas Crockford said. To remix the quote about IBM, no JavaScript developer ever got fired for quoting Douglas Crockford**

**Don't quote me on that

Again, I want to thank everyone that came out. It's always fun to attend the Boston JS Meetups and presenting there is even cooler.

Check it out:

JavaScript 101: Using JavaScript to Add Interactivity to Your Web Site

Rob Larsen will lead an interactive session outlining the basic steps to getting started with using JavaScript using modern techniques. For the beginner it will serve as a road map to using JavaScript with confidence. For the more advanced user it will serve and a forum to discuss fundamental best practices as Rob will be soliciting feedback and discussion throughout.

It'll be basically a step by step on getting JavaScript onto a page, in a modern, "best practices" way. Starting with attaching the script to the page using the script tag all the way through writing a function and attaching it to an element. Each step will be split into three levels of discussion:

1. For the beginners each will simply be presented as "this is how you do it"
2. For the intermediate user it will be "this is why we do it this way"
3. For the advanced user it will be a question- "where does this fall apart and how can we make it better"

It should be fun. I hope to see you there.

Crockford on JavaScript: a Public Lecture Series on JavaScript

Read the rest of this entry »

Don't ask why I'm poking around the wayback machine (that would spoil the surprise,) but if you've been around as long as I have and want to reminisce, or never got to experience Web 1.0 as a developer and want to see what all the complaints are about, you should really take a look at Netscape's JavaScript documentation from 1999.

Here's one that will confuse the hell out of anyone who started doing this after maybe 2003:
Read the rest of this entry »

Conditional Compilation is a handy, Internet Explorer specific method for forking bits of JavaScript. The nice thing about it is that real browsers don't notice it at all. It just looks like a comment block to any non-IE browser. Which saves the rest of the world from even having to if (IE) { } else { } . I like that.

Anyway, we use it to fix some of IE's shortcomings. One standard pattern is using it to fake the :hover pseudo-class on inputs in IE6. Something like this:

//IE6 HOVERS simplified//
//this would be a bit different in protection
//but you can see the idea
/*@cc_on @*/ 
/*@if (@_win32) 
var inputElements =  document.getElementsByTagName("input");
  var test =   inputElements.length;
  for (var i=0;  i<test; i++) {
         if (inputElements[i].getAttribute("type") == "submit"){
               inputElements[i].onmouseover = inputElements[i].onfocus =  function(){
                     addClass(this, "hover");
               }
               inputElements[i].onmouseout = inputElements[i].onblur = function(){
                     removeClass(this, "hover");
               }
         };
};
/*@end @*/ 
//END IE6 HOVERS// 

Read the rest of this entry »

I saw this tweet yesterday and was reminded , once again, of how misunderstood the return value of a DOM method like document.getElementsByTagName is. Normally, it doesn't matter that folks don't really understand the return value fully, because most of the time the code just works. Where it breaks is interesting, so it's worth taking a look at it in a little bit of depth.

Typically people do things like this:

var anchors = document.getElementsByTagName('a');
for (var i = 0; i < anchors.length; i++) {
      anchors[i].addEventListener("click", beAwesome, false)
}

Common pattern. Get a list of the anchors on the page, loop through and add an event to each.

If asked, I'd be willing to bet most people would assume that the list they're interacting with is an Array. It's got a length and you can index it- that's got to be an Array, right?

Surprise!
Read the rest of this entry »

Here are the books that sit next to me at work.

No, there are no HTML or CSS books. I haven't felt the need to dive into those subjects, in depth, since 1999. Based on the foundation I got from studying specs and experimenting in 1998-2000, I can read the occasional A List Apart article, look at Quirksmode and keep up to date.

I should add, I'm reading Dive Into HTML5 as it's released. That's what the first change in the specs in 10 years will do to a fellow.

In my "to read" pile:

Dive Into Python 3

I like Mark Pilgrim's writing, in general, and I want to learn more about Python.

Palm webOS

Read and build. Build and read. That's my fall, I hope. With the new changes to their app distribution program, I've decided I'm going to do something open source.

Read the rest of this entry »

I've been really itching to get started on something with WebOS. In general I'm dying to do something complicated with JavaScript and the announcement of the Pixi and the Nokia rumors have kept WebOs on my mind, so this news really got my attention:

Ben Galbraith and Dion Almaer to lead Developer Relations team at Palm
Read the rest of this entry »

Things are afoot. I'm building out the redesign of Drunkenfist.com, and we're working on an internal redesign at work. I've been toying with the idea of using the new HTML5 semantic elements for both and to that end I took some time to evaluate Modernizr, the small JS library that programatically exposes HTML5/CSS3 feature support (via classes on the HTML element) and "fixes" IE's style support for some of the newer semantic elements.
Read the rest of this entry »

There's a back story to this one. I once failed to get video progress tracking working with a Flash video player and Big Expensive Analytics Company™ code. It was a real pain in the ass. We missed the deadline, wasted about 8 hours and eventually just dropped the feature. A frustrating experience for all involved.

With that in mind, then, it should come to no surprise that I returned to the problem when exploring the <video> element and related APIs. What was a fruitless 8 hours of hoping the Big Expensive Analytics Company™ code would "just work," turned out to be about 30 minutes of light hacking to get it up and running with Google Analytics and HTML5.

By the way, between you and me the Big Expensive Analytics Company™ code never "just works," even though that kind of feature is one of the reasons they get the big bucks for their product. I don't really like working with Big Expensive Analytics Company™. I'm much happier with GA. It behaves as expected and is a lot easier to "get" right out of the box.

Anyway, here's what I did. It's hack-y, but works:
Read the rest of this entry »