Dashing All the Way... Not

In programming, nothing ever just happens. There aren't any gremlins or magical incantations that cause code to work. Programming is about logic and good sound reasoning. If your code doesn't work, there's a really good explanation. The challenge is finding that explanation.

As a web developer, you sometimes see really weird problems like the one I saw today.

In HTML, how do you add a comment?

You'd do this --

<!-- This is a comment -->

and you'd be right of course, but what if you did this --

<!-- This is a comment -- at least I think it is! -->

Is that a comment? Well, sort of. In the HTML 4.0 specification, "--" or two hyphens is considered the comment close delimiter whereas ">" is considered to be the markup declaration close delimiter.

Here's the explanation directly from the spec --

White space is not permitted between the markup declaration open delimiter(""). A common error is to include a string of hyphens ("---") within a comment. Authors should avoid putting two or more adjacent hyphens inside comments.

Information that appears between comments has no special meaning (e.g., character references are not interpreted as such).

Note that comments are markup.

So, what actually happens when you use the hypens in the middle of a comment? Here's an example --



If you're using Firefox, you'd see this --

The comments are visible. On any other browser, IE, Safari or Opera, you'd see a normal page --

So, using hyphens in an HTML comment breaks pages on Firefox. Keep that in mind the next time you put in a comment.

Note that in our example, we're specifying a HTML 4.01 DTD. We're using a "strict" DTD, but the problem would still occur if you'd specify a "transitional" or "frameset" DTD.

If you don't specify the HTML 4.01 DTD, you won't see this problem in Firefox.

Additional information and discussion is found on Ben Buchanan's the 200ok weblog.

Have fun!

Augmenting JavaScript's String Object

A popular question to ask in interviews is string manipulation. In particular, string reversal questions are very popular.

Given a string,

1. Reverse the string
   
2. Reverse the words in the string
3. Reverse only the words in the string

With JavaScript, all three are easy to do. One way to solve it is to augment the String object. In other words, we'll add three new functions to String. We'll call them

1. reverseString()
2. reverseWords()
3. reverseOnlyWords()

To add the methods to String, we'll add them to the String's prototype property so that every instance of a String object or a string primitive will have access to these three methods.

Our definitions look like this

String.prototype.reverseString = function() {
var len = this.length, strArray = [], ct = 0;
for (var i=len-1;i>=0;i--) {
strArray[ct++] = this.charAt(i);
}
return strArray.join("");
}

String.prototype.reverseWords = function() {
var arr = this.split(" ");
var s = "";
while (arr.length>0) {
var element = arr.pop();
s += element + " ";
}
return s;
}

String.prototype.reverseOnlyWords = function() {
var arr = this.reverseWords().split(" ");
var s = "";
while (arr.length>0) {
var element = arr.pop().reverseString();
s += element + " ";
}
return s;
}

Remember that Strings are immutable so calling these functions never changes the original string.

So, doing this --

var s = "now is the time to do the work that must be done";
alert(s.reverseString());

results in the alert dialog displaying "enod eb tsum taht krow eht od ot emit eht si won", but if you display the variable s, you'll still see the string "now is the time to do the work that must be done".

Keep in mind that you can also use a string primitive --

alert("now is the time to do the work that must be done".reverseString());

As we noted in a previous post, the string primitive is converted to the String object.

Here's a test driver for the three functions. Simply type in a string and watch the functions do their thing.




Of course, you don't have to augment the String. You could instead create a singleton String utility that defines the three functions --

var MyStringUtil = {
reverseString:function(str) {
var len = str.length, strArray = [], ct = 0;
for (var i=len-1;i>=0;i--) {
strArray[ct++] = str.charAt(i);
}
return strArray.join("");
},
reverseWords:function(str) {
var arr = str.split(" ");
var s = "";
while (arr.length>0) {
var element = arr.pop();
s += element + " ";
}
return s;
},
reverseOnlyWords:function(str) {
var arr = this.reverseWords(str).split(" ");
var s = "";
while (arr.length>0) {
var element = this.reverseString(arr.pop());
s += element + " ";
}
return s;
}
}

Feel free to use the functions anyway you like. Here's the augmented string, the string utility and the test driver.

Have fun!

Browser Debugging Tools

We'll start off 2008 and talk about web browser debugging tools. It's a topic that we haven't visited before.

At Yahoo!, we have graded browser support and so, as a frontend developer you tackle the problems found only in the major browsers.

“Major” means IE, Firefox, Safari and to a small degree Opera ( if you’re interested in browser market share, check this out. )

I code on a MacBook Pro running OSX 10.4 though I have an XP box to tackle issues on IE6/IE7. I also have access to a Vista box to take on that version’s IE7.

I don’t run multiple versions of IE or use a virtual PC image. I have the luxury of running all the browsers in their native environments.

Browser debuggers allow you to view and manipulate the three components that make up a web page --

1. The structure ( HTML )
2. The layout and "look and feel" ( CSS )
3. The behavior ( JavaScript )

On Firefox, the defacto standard debugger is Joe Hewitt's Firebug. It's a great tool for debugging web pages on Firefox.


Firebug also supports add-ons like YSlow that analyzes your page and tells you why your page is slow based on Yahoo!'s 14 rules for high performance web sites.

I primarily use YSlow to see what I'm downloading. You'd be surprised at what you don't know you're bringing into the browser!

Similar to Firebug is the Developer Toolbar found for IE. Use it to inspect, change elements and styles on the page.


One of the features that I use a lot in the Developer Toolbar ( and in Firebug ) is the element inspector. With it, I can click on a DOM element and immediately see it's relationship with other elements and it's style. Understanding the structure and the CSS rules applied to it is critical to debugging a web page.

In Safari, you can use the Debug menu to inspect the DOM, but unlike Firebug or IE's Developer Toolbar, you can't live edit HTML or CSS. I suspect the Safari/Webkit folks will have this in the future. For now, it's the only choice you have for debugging web pages on Safari.


Starting with 9.0, Opera has the Developer Console. It's a DOM, JavaScript and HTTP header inspector as well as allows you to dynamically edit CSS.


A good list of browser debugging tools is found here though the list is always growing. Those found above are "must haves."

Have fun!