Lately, I’ve been working on updating my old script. Since it was written, we’ve seen lots of major browser releases and the introduction of the V8 Javascript engine used by Google Chrome.

Updated browser compatibility

Browsers that are fully-supported and well-tested:

1. Firefox (and Iceweasel) 0.9+
2. UPDATE: Chrome 1+ now perfectly supported
3. Safari 3+
4. IE 5.5+
5. Opera 9+
6. Konqueror 3.5+
7. K-Meleon 1.5.3+
8. Epiphany 2.28.0+

Browsers that are supported in almost all cases but not as well-tested:

1. Chrome 1+ – One bug (feature?) that may be in Chrome reporting functions as anonymous when they aren’t. HOWEVER, Chrome’s stack gives us line numbers AND column numbers, so we can see exactly where our problem is – even in minified Javascript! Sweet! Chrome 1+ now fully supported.
2. Opera 7-8 – Opera is dead to me now. Opera 10+ has removed the error.stack info we needed and introduced error.stacktrace, but it seems very unstable. Argh.

More info about compatibility can be shown with the BrowserShots of the test suite.

Now socially coded

I’m not going to post the code here because the source and tests are now on the javascript-stacktrace project on GitHub. You can download it here.

Follow it, file bugs, and make comments there. If you have improvements to make, please fork the project and then contact me or do a “push request”. I’ll make sure you get credit ;)

UPDATE: Øyvind Sean Kinsey has added memoization (caching the implementation) for the mode and XHR bits as well as the ability to pass an existing Javascript Error and get a stacktrace. We’re working on tests and you should see project updates soon. Thanks, Øyvind!

var lastError;
try {
    // error producing code
} catch(e) {
   lastError = e;
   // do something else with error
}

// later...
printStackTrace({e: lastError}); //Returns stacktrace from lastError!

Try it out!

The code is in use on my blog. Click here to give it a spin.

function foo() {
    var blah;
    bar("blah");
}

function bar(blah) {
    var stuff;
    thing();
}

function thing() {
    if (true) { //your error condition here
        var st = printStackTrace();
        alert(st.join("\n\n"));
    }
}

foo();

Random note: one cool suggestion I saw was to assign printStackTrace to window.onerror. Pretty brilliant if you ask me.

I want to thank the guys who contributed to the script: Luke Smith, Loic Dachary and Johan Euphrosine.

I could use a bit of help getting the Chrome and Opera bugs worked out. I’m sure some of you guys who remember how to write software can help. Suggestions and whinings are welcome as long as they don’t get out of hand in the comments.

Javascript Stacktrace on GitHub

Related posts:

1. A Javascript stacktrace in any browser
2. Using Python to update your FeedBurner stats
3. Javascript: Measure those “em”s for your layout

Chances are that if you’ve done any significant Javascript work, you’ve run into a situation where part of the debugging process could be much improved if you just had the function call stack.

I’m going to give you some ways of doing this with and without the popular Firebug extension and have some examples of their uses.

Without Firebug and friends? Using IE?

Sometimes s**t only happens in other browsers. Here’s how to create/log your own stack trace. Put this code in an accessible place in your Javascript file(s) and call the printStackTrace() function inside any function.

function printStackTrace() {
  var callstack = [];
  var isCallstackPopulated = false;
  try {
    i.dont.exist+=0; //doesn't exist- that's the point
  } catch(e) {
    if (e.stack) { //Firefox
      var lines = e.stack.split('\n');
      for (var i=0, len=lines.length; i<len; i++) {
        if (lines[i].match(/^\s*[A-Za-z0-9\-_\$]+\(/)) {
          callstack.push(lines[i]);
        }
      }
      //Remove call to printStackTrace()
      callstack.shift();
      isCallstackPopulated = true;
    }
    else if (window.opera && e.message) { //Opera
      var lines = e.message.split('\n');
      for (var i=0, len=lines.length; i<len; i++) {
        if (lines[i].match(/^\s*[A-Za-z0-9\-_\$]+\(/)) {
          var entry = lines[i];
          //Append next line also since it has the file info
          if (lines[i+1]) {
            entry += &quot; at &quot; + lines[i+1];
            i++;
          }
          callstack.push(entry);
        }
      }
      //Remove call to printStackTrace()
      callstack.shift();
      isCallstackPopulated = true;
    }
  }
  if (!isCallstackPopulated) { //IE and Safari
    var currentFunction = arguments.callee.caller;
    while (currentFunction) {
      var fn = currentFunction.toString();
      var fname = fn.substring(fn.indexOf(&quot;function&quot;) + 8, fn.indexOf('')) || 'anonymous';
      callstack.push(fname);
      currentFunction = currentFunction.caller;
    }
  }
  output(callstack);
}

function output(arr) {
  //Optput however you want
  alert(arr.join('\n\n'));
}

UPDATE: A few others have taken and upgraded the script with a bunch of new features. His changes and mine are now on GitHub. Contribute!

It’s ugly, but this works for the latest versions of IE, Firefox, Opera, and Safari. Firefox and Opera give you file names and line numbers when they can, but I couldn’t find a mechanism to get the same from IE and Opera. Hopefully the inline comments describe enough of what is going on. If not, ask :).

Try it out

Give it a shot by clicking here. It will run the snippet below.

function foo() {
    var blah;
    bar("blah");
}

function bar(blah) {
    var stuff;
    thing();
}

function thing() {
    if (true) { //your error condition here
        printStackTrace();
    }
}

foo();

Obvious easy way: Firebug (and Drosera and Dragonfly)

You can easily get a stack trace at any time by calling console.trace() in your Javascript or in the Firebug console.

Not only will it tell you which functions are on the stack, but it will include the value of each argument that was passed to each function.

This is obviously the best way to go if you are using Firefox.

Furthermore, these tools allow you to dig deeper. Of course, we can’t count on them for ALL situations.

Conclusion

I hope you find this useful. If you have any suggestions/improvements I’d like to hear them! Also all kidding aside, I worked pretty hard on this function, so I’d really appreciate if you’d help me share this with more people. Thanks!

Related posts:

1. Javascript Stacktrace update
2. Javascript: Measure those “em”s for your layout
3. How to highlight search results with JavaScript and CSS

As you can see from my site’s lack of design (davidwalsh.name), I’m about 90% programmer and 10% designer. As someone that’s not a designer, I’m really grateful for websites like ColourLovers — websites that provide you palettes of colors that look good together. Let’s pretend for a moment that I do have a good design and I want others to know my palette. MooTools 1.2 has made that a reality.

Step 1: The XHTML

<input type="button" id="get-colors" value="Get Colors" class="button" /><br /><br /><br />
<div id="colors-wrapper"></div>

I’ve created two elements to begin with: a DIV that will serve as a wrapper for the color palette and a button that will trigger the color palette’s creation.

Step 2: The CSS

.dcolor     { height:40px; }
.dtext      {  }
.dwrapper { width:100px; float:left; padding:10px; margin:0 20px 20px 0; border:1px solid #ccc; }

The above CSS simply formats the elements that are needed to create the palette.

Step 3: The Moo 1.2 Javascript

//once the dom is ready
window.addEvent('domready', function() {

	//do it!
	$('get-colors').addEvent('click', function() {
		//starting the colors array
		var colors = [];
		var disallows = ['transparent'];

		//for every element
		$$('*').each(function(el) {
			//record colors!
			colors.include(el.getStyle('color'));
			colors.include(el.getStyle('background-color'));
			el.getStyle('border-color').split(' ').each(function(c) {
				colors.include(c);
			});
		});

		//sort the colors
		colors.sort();

		//empty wrapper
		$('colors-wrapper').empty();

		//for every color...
		colors.each(function(val,i) {

			//if it's good
			if(!disallows.contains(val))
			{
				//create wrapper div
				var wrapper = new Element('div', {
					'class':'dwrapper'
				});

				//create color div, inject
				var colorer = new Element('div', {
					'class':'dcolor',
					'style': 'background:' + val
				});
				colorer.inject(wrapper);

				//alert(val);

				//create text div, inject
				var texter = new Element('div', {
					'class':'dtext',
					'text':val
				});
				texter.inject(wrapper);

				//inject wrapper
				wrapper.inject($('colors-wrapper'));
			}
		});
	});
});

Once the DOM is ready, we start listening for a click on our “Get Colors” button. When the button is clicked, we store every element’s background color, border color, and text color. Once we have every color in our array, we sort the array and clear the wrapper DIV. For every color we’ve found, we create a DIV that displays the color and it’s hex value. That’s it!

The result? A sweet javascript script giving you a color palette of the current page. Click here to build a color palette of my example page!

Note: This script doesn’t accommodate images.

David Walsh is a Senior Web Developer residing in Madison, WI. He spends most of his day getting a monitor tan coding PHP, CSS, MooTools, and XHTML. When not tinkering with the newest version of Moo, David uses soccer, Rock Band, and movies to dull his coding pains.

Related posts:

1. Guest Post: Save Text Size Preference Using MooTools and PHP
2. Book Review: MooTools 1.2 Beginner’s Guide
3. A CSS-only speech bubble

It allows you to store your users’ text-size preferences in a cookie so that they don’t have to resize the text to their liking on every page. Check out the demo (remember to refresh the page to test the cookie!) and then check out how to Save Text Size Preference using MooTools and PHP!

Related posts:

1. Guest Post: change text size onclick with JavaScript
2. Guest post on caching and .htaccess
3. Book Review: MooTools 1.2 Beginner’s Guide

For this reason, I have created a simple Javascript function that you can use to poll any element on your test page and figure out what size an “em” is.

The Javascript code:

function getEmSize(el) {
  // If you pass in an element ID then get a reference to the element
  if (typeof el == "string") el = document.getElementById(el);

  if (el != null) {
    var tempDiv = document.createElement("DIV");
    tempDiv.style.height = 1 + "em";
    // Make a readable bar with the em measurement
    tempDiv.style.background = "#FF9";
    tempDiv.style.color = "#000";
    tempDiv.style.paddingBottom = 4 + "px"; // This makes the DIV text readable
    // Just in case the content of "el" takes up it's container's height :)
    tempDiv.style.marginTop = -1 + "em";

    el.appendChild(tempDiv);
    // Remember to take off the 4px we added earlier
    var emSize = (tempDiv.offsetHeight - 4) + "px";
    tempDiv.innerHTML = emSize;
  }
}

Explanation and Usage

This function will create a yellow bar below content within the element you pass in with the pixel value equivalent to 1 “em”. You can change it to print the value to the console by replacing lines 8-18 with:

    el.appendChild(tempDiv);
    console.log(tempDiv.offsetHeight + "px");
    el.removeChild(tempDiv);

You can easily use this function by calling:

    getEmSize("elementid");
    // OR
    getEmSize(elementReference);

from your navigation bar or Firebug console or of course within a loop traversing your entire DOM tree (watch out for those text nodes though!).

Caveats

You could improve this by implementing some CSS positioning to always be a the lower-right etc. of these elements. You could also use a loop as I said earlier and print out a nice DOM tree with pixel values. You could also have the function update a global variable while printing to console to prevent using document.createElement() so often (it’s costly).

I know that there are some improvements to be made here so I wanna see some in the comments! What other ways do you keep track of your “em”s in a fluid layout?

Related posts:

1. Quick Tip: Editing layout in Firebug
2. How to highlight search results with JavaScript and CSS
3. Use the table-layout CSS property to speed up table rendering

The structure of this book

ppk begins with a brief history of JavaScript and explains the “fat and thin” JavaScript cycle. I would agree with him on that we are in a fattening state right now, but I think the tides will turn soon (my guess is before 2010).

Then ppk gives a basic overview of accessibility (which he adds to later) before introducing us to the 8 real world scripts used as examples in this book:

• Textarea Maxlength
• Usable Forms
• Form Validation
• Dropdown Menu
• Edit Style Sheets
• Sandwich Picker
• XMLHTTP Speed Meter
• Site Survey

We then see chapters on browsers, how to prepare your markup for good JavaScript and a series of chapters that use his examples heavily giving light on several very diverse topics of JavaScript.

Bits of ingenuity

Here I am going to sum of a few particularly useful snippets of this book.

A section on object detection vs. browser detection explains that object detection is the better way to go in general. ppk makes a good case for object detection: browsers will change, and by using object detection we can determine if an action is executed by directly tying the action to its dependencies. A lot of good JavaScript coders believe in this but it cannot be stressed enough.

Koch also knows that we need other fundamentals of how to setup our HTML and CSS for good JavaScript. He makes a very appropriate example for this is his Sandwich Picker script in Chapter 4: Preparation He summed up his advice well by saying:

Obviousness is the key to creating HTML structures that will help your script instead of hinder it

Since we want to separate content from behavior, we need to develop obvious element hooks to neatly tie our JavaScript to our HTML and CSS. We learn that the id attribute is the best known and most popular element hook. Another great idea that ppk presents here, though, is using custom attributes, such as a rel attribute.

One last bit I’d like to mention here is that ppk’s createXMLHTTPObject() function in Chapter 10: Data Retrieval is really quite elegant and I think you might check it out here. Your homework is to make this function rewrite itself upon successful completion so that it doesn’t have to try different methods of creation after the first call. ;)

Conclusion

There are several reasons I highly recommend this book, and Koch’s site: quirksmode.org.

First of all ppk gives us a really good foundation in Chapter 5: Core, one that I would recommend even experienced JavaScript-ers read. He also covers the BOM, JavaScript Events, and DOM in great detail also keeping accessibility fresh in your head as you pick up JavaScript’s quirks and issues with different browsers. That said, I would say that the amount of history covered by the book may have been excessive but may be more helpful to other readers.

ppk on JavaScript is a good reference book that I keep as one of only 10 books within arms reach at work (I obviously have others but I don’t feel the need to keep many so close by). I think that more than a few of you would also benefit from keeping this book handy as well as checking out quirksmode.org for other bits.

Related posts:

1. Javascript Stacktrace update
2. Javascript: Measure those “em”s for your layout
3. A Javascript stacktrace in any browser

You see it in Google search results and a lot of other sites that have good search functionality. When you perform a search, your words or phrases are highlighted in the search results making it easy for you to find the most relevant content.

Today I’m going to show you a simple way to add this to your website or blog so your users can find what they need in style. I think that this kind of thing should be implemented more often for how easy it is to implement.

Search Results JavaScript code:

function highlightOnLoad() {
  // Get search string
  if (/s\=/.test(window.location.search)) {
    var searchString = getSearchString();
    // Starting node, parent to all nodes you want to search
    var textContainerNode = document.getElementById("content");

    // Informational message for search
    var searchInfo = 'Search Results for: ';

    // Split search terms on '|' and iterate over resulting array
    var searchTerms = searchString.split('|');
    for (var i in searchTerms) 	{
      // The regex is the secret, it prevents text within tag declarations to be affected
      var regex = new RegExp(">([^<]*)?("+searchTerms[i]+")([^>]*)?<","ig");
      highlightTextNodes(textContainerNode, regex, i);
      // Add to info-string
      searchInfo += ' <span class="highlighted term'+i+'">'+searchTerms[i]+'</span> ';
    }

    // Create div describing the search
    var searchTermDiv = document.createElement("H2");
    searchTermDiv.className = 'searchterms';
    searchTermDiv.innerHTML = searchInfo;

    // Insert as very first child in searched node
    textContainerNode.insertBefore(searchTermDiv, textContainerNode.childNodes[0]);
  }
}

// Pull the search string out of the URL
function getSearchString() {
  // Return sanitized search string if it exists
  var rawSearchString = window.location.search.replace(/[a-zA-Z0-9\?\&\=\%\#]+s\=(\w+)(\&.*)?/,"$1");
  // Replace '+' with '|' for regex
  // Also replace '%20' if your cms/blog uses this instead (credit to erlando for adding this)
  return rawSearchString.replace(/\%20|\+/g,"\|");
}

function highlightTextNodes(element, regex, termid) {
  var tempinnerHTML = element.innerHTML;
  // Do regex replace
  // Inject span with class of 'highlighted termX' for google style highlighting
  element.innerHTML = tempinnerHTML.replace(regex,'>$1<span class="highlighted term'+termid+'">$2</span>$3<');
}

// Call this onload, I recommend using the function defined at: http://untruths.org/technology/javascript-windowonload/
addOnLoad(highlightOnLoad());

Now, the highlighting CSS:

span.highlighted {
  background-color: #161616;
  font-weight: bold;
}
span.term0 {
  background-color: #161633;
}
span.term1 {
  background-color: #331616;
}
span.term2 {
  background-color: #163316;
}

Code explanation

First, the highlightOnLoad() function checks window.location.search to see if we need to be running any of this stuff, then calls getSearchString to get a sanitized search string so that nothing funky can happen if, say, the user searches for ‘<script>’. You should really be sanitizing all search inputs at least on the back-end anyway.

Then, the highlightTextNodes function uses a regex replace on our textContainerNode’s innerHTML. The regex verifies that the text is between a > and a < (and not the other way around). Actually nice and simple!

Caveats

This may end up being a bit slow if you are doing this on a LOT of text, but for my blog text, it seems quite snappy to me. Also, the CSS does not bold text inside links, but the background color is there to make it obvious.

What do you think? Try it out on the search box on the upper-right. I’m hoping for some optimizations in the comments.

Related posts:

1. Javascript: Measure those “em”s for your layout
2. Javascript Stacktrace update
3. Guest Post: change text size onclick with JavaScript

Share your thoughts in the comments!

Make text bigger | Make text smaller
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Related posts:

1. Guest Post: Save Text Size Preference Using MooTools and PHP
2. Guest post on caching and .htaccess
3. Staples of the Bookshelf: ppk on JavaScript