Eric Wendelin's Blog » Javascript

Continuation-passing and tail call elimination in Javascript

Eric Wendelin — Tue, 02 Nov 2010 08:00:44 +0000

I’ve been spending a lot of time recently tinkering with different constructs and methodologies in Javascript, and one of the most fascinating things I’ve come across is Spencer Tipping‘s use of continuation-passing style.

It’s ok if you aren’t familiar with CPS, but I think anyone hoping to make the cognitive leap to functional programming should study it. As a bare miniumum, you need to know that a continuation is:

[a reification of] an instance of a computational process at a given point in the process’s execution

Therefore, continuation-passing style is just:

a style of programming in which control is passed explicitly in the form of a continuation

NOTE: I have replaced my crappy examples just below with Outis’s much more reasonable (and correct) ones. I take no credit for the simple CPS code below. Thank you Outis and David for the suggestions.

Consider the naive implementation of the recursive fibonacci function:

function fib(n) {
    if (n < 1) {
        return 1;
    } else {
        return fib(n-2) + fib(n-1);
    }
}

Then, identify function calls and returns. For each such point, create a continuation and pass it to the function call or return it. For example, the continuation for fibr(n-1) + fibr(n-2) is:

function(x) {
    return x + fib(n-2);
}

and you get:

function cpsFib(n, _return) {
    if (n <= 1) {
        return _return(1);
    } else {
        return cpsFib(n-2, function(a) {
            return cpsFib(n-1, function(b) {
                return _return(a+b);
            });
        });
    }
}

Apply this process to the linear recursive fibonacci function and you get:

function cpsFib(n, prev, cur, _return) {
    // Key component: call escape function when done
    if (n < 2) {
        return _return(cur);
    }
    return cpsFib(--n, cur, cur + prev, _return);
}
// Note the use of an identity function here
cpsFib(1000, 0, 1, function(x) {return x});

The only problem with this, however, is that Javascript engines to not optimize tail recursion, so calling: fibonacci_cps(10000) would cause a StackOverflowError in some browsers.

function() {
	return [1000, 0, 1,
		function() { return [999, 1, 1,
			function() { return [998, 1, 2,
				... ]]
			}
		}
	];
}

However, by adding to Function.prototype and changing the way we pass continuations, we can fix this problem.

// Function prototypes heavily inspired by Spencer Tipping's js-in-ten-minutes:
//   http://github.com/spencertipping/js-in-ten-minutes
Function.prototype.tail = function() {
	return [this, arguments];
}
// Tail-call optimization
Function.prototype.tco = function() {
	var continuation = [this, arguments];
	var escapeFn = arguments[arguments.length - 1];
	while (continuation[0] !== escapeFn) {
		continuation = continuation[0].apply(this, continuation[1]);
	}
	return escapeFn.apply(this, continuation[1]);
}

// Note the use of "Function.prototype.tail()"
function cpsFib(n, prev, cur, escapeFn) {
	if (n < 2) {
		return escapeFn.tail(cur);
	}
	return cpsFib.tail(--n, cur, cur + prev, escapeFn);
}

function identity(x) {return x}

// We pass the escape function instead of a reference to cpsFib
cpsFib.tco(1000, 0, 1, identity);

// within while (continuation[0] !== escapeFn) {
[cpsFib, [1000, 0, 1, identity]]
[cpsFib, [999, 1, 1, identity]]
[cpsFib, [998, 1, 2, identity]]
[cpsFib, [3, 2.686e+208, 4.3467e+208, identity]]

// return escapeFn.apply(this, continuation[1]);
[identity, 4.34673e+208]

How CPS and TCO can be practical

All this talk about styles and optimizations can sound rather like “over-engineering” to those of us who aren’t familiar with these concepts. While it’s a risk, good engineers will know when it is effective. Here’s how I would recommend you use these concepts:

Processing large structures in a recursive way, perhaps recursing through an Object or HTML tree of indeterminate depth
You’re adding functional methods to iterable objects (adding Array.prototype.map())
Practicing uses of functional programming with Javascript

Conclusion

Knowing how to use functional techniques in Javascript will be more valuable as it moves to the server-side (due to the rising popularity of node.js) because doing more actual computation will be acceptable instead of blocking a UI.

I learned a lot from Spencer’s write-up Javascript in Ten Minutes, and would recommend you check it out. I’ve also found reading his other Javascript code and comments very insightful.

Please share other uses of functional Javascript you’ve come across.

Javascript Stacktrace update

Eric Wendelin — Thu, 28 Jan 2010 11:00:10 +0000

I started a Javascript Stacktrace project back in August 2008. The idea was to give additional debugging power to browsers where you don’t have good tools to work with. I’d like to give you an update on where the project is today.

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:

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

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

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

stacktrace.js on GitHub

A Javascript stacktrace in any browser

Eric Wendelin — Wed, 13 Aug 2008 12:00:58 +0000

UPDATE: This is now a mature project on GitHub! Please submit comments/issues there.

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 += ' at ' + 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. Their 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) {
    // some code
    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!

Create a Color Palette Using CSS and MooTools 1.2

Eric Wendelin — Thu, 15 May 2008 07:00:54 +0000

This entry was authored by highly-respected blogger and friend David Walsh. Learn more about David

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

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.

Guest Post: Save Text Size Preference Using MooTools and PHP

Eric Wendelin — Wed, 30 Apr 2008 13:40:19 +0000

I have posted a major update to my original post about Changing Text Size onClick with JavaScript at the David Walsh Blog.

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 toSave Text Size Preference using MooTools and PHP!

Continue reading → Related posts:

Javascript: Measure those “em”s for your layout

Eric Wendelin — Sat, 29 Mar 2008 04:08:24 +0000

For many of us designing fluid layouts, which are generally based in “em”s (pronounced like the letter M) you end up not really knowing how many pixels an “em” is while you are deep in the DOM tree. This is especially confusing if you increase/decrease text size with your browser.

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:

Old, busted way that supports Safari 2:

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 = '1em';
    el.appendChild(tempDiv);
    var emSize = tempDiv.offsetHeight;
    el.removeChild(tempDiv);
    return emSize;
  }
}

New hotness (from David Baron’s suggestion on StackOverflow):

function getEmSize(el) {
    return Number(getComputedStyle(el, '').fontSize.match(/(\d+)px/)[1]);
}

Explanation and Usage

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 using a loop as I said earlier and print out a nice DOM tree with pixel values.

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?

How to highlight search results with JavaScript and CSS

Eric Wendelin — Sun, 24 Feb 2008 05:29:54 +0000

Welcome to Eric Wendelin’s blog! You’re guaranteed to more great Javascript tutorials if you subscribe via RSS.

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 += ' '+searchTerms[i]+' ';
    }

    // 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$2$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 ‘