window.location = window.location; //refresh lol!

But you’ll get screwed if there is a fragment, like, say, http://example.com/index.html#section1. The page won’t refresh. Or rather, it will, but browsers won’t send a request to the server if the url contains a fragment. It will just try to navigate to that fragment within the document.

Solution: be awesome.

(function(){
  var refreshCookie = "mysite.refreshFragment";

  var refresh = function() {
    var url = window.location.href;
    var fragmentPosition = url.lastIndexOf("#");
    if (fragmentPosition >= 0) {
      if (fragmentPosition !== url.length - 1) {
        $.cookie(refreshCookie, url.substring(fragmentPosition + 1)); //store the fragment in a cookie
      }
      url = url.substring(0, fragmentPosition);
    }
    window.location.href = url;
  };

  var applyFragmentFromCookie = function() {
    var fragment = $.cookie(refreshCookie);
    if (fragment !== null) {
      window.location.href += "#" + fragment;
      $.cookie(refreshCookie, null); //delete cookie
    }
  };

  //reapply the fragment (if necessary) when the page is loaded
  $(document).ready(applyFragmentFromCookie);

  //expose to the public (you would of course properly namespace this, right?)
  window.refresh = refresh;
}());

//then, when you wanted to refresh the page...
refresh();

I use the jQuery cookie plugin, because all the kids nowadays are using jQuery. Substitute your own cookie handling framework, or roll your own (I’ve done it, it’s not enjoyable).

See it in action.

For my Linkurious project, I needed to get the computed style of an element in a cross browser way. I came up with an implementation that works in every version of every browser (within reason, the C64 is not supported), and is easy to use.

I’ll leave the details of how it works as an exercise to the reader. I will say that this is a good example of how to use a closure to improve the efficiency of a function. Notice that the cross-browser garbage is only executed once, not on each call.

//must be executed on or after the domready event, since it (may) require document.body to be non-null
var getComputedStyle = function() {
  var func = null;
  if (document.defaultView && document.defaultView.getComputedStyle) {
    func = document.defaultView.getComputedStyle;
  } else if (typeof(document.body.currentStyle) !== "undefined") {
    func = function(element, anything) {
      return element["currentStyle"];
    };
  }

  return function(element, style) {
    return func(element, null)[style];
  }
}();

//and use like so:
getComputedStyle(document.getElementById("foo"), "display"); //might return "inline-block"

A touch of JavaScript, and now they see this:

Just say NO to frames. And kiwis.

1. Recursion
2. Fixed point
3. Y-combinator
4. Memoization

It’s like a professor’s dream come true. I had seen the article a long time ago when I prepared a presentation for work about functional programming. Basically, it was an introduction to functional programming, and to help myself learn, I decided to take the extremely low-level paradigms in functional programming and implement them. JavaScript seemed like the natural language choice, since of the three languages I know pretty well (PHP, JavaScript, C#), it was the only one that supported closures in a convenient way. Sold.

Anyway, here’s the presentation. You just might learn something.

Reference articles:

• Implementation of Recursive Fixed Point Y-Combinator in JavaScript for Memoization (it’s a mouthful)
• Generating Church Numbers With JavaScript

Write a program that causes the url said (e.g. http://localhost:port/said) to produce a page with an input field and a submit button. When the submit button is pressed, that should produce a second page with a single link saying “click here.” When that is clicked it should lead to a third page that says “you said: …” where … is whatever the user typed in the original input field. The third page must only show what the user actually typed. I.e. the value entered in the input field must not be passed in the url, or it would be possible to change the behavior of the final page by editing the url.

I ignored the part about what the URL has to be, because that would just be annoying. The point of Arc is to write things in the most efficient way possible, and the whole language is built around helping you do that. The point of this problem is to illustrate that Arc does this very well.

In Arc, a solution looks like this:

(defop said req
  (aform [onlink "click here" (pr "you said: " (arg _ "foo"))]
    (input "foo")
    (submit)))

In PHP:

session_start();

if (isset($_SESSION['said'])) {
	echo 'You said: ' . htmlentities($_SESSION['said']); //prevent XSS lol
	unset($_SESSION['said']);
} else if (isset($_POST['said'])) {
	$_SESSION['said'] = $_POST['said'];
	echo '<a href="">Click here!</a>';
} else {
	echo '<form method="post" action=""><input type="text" name="said"/><input type="submit"/></form>';
}

And in JavaScript:

function getCookie(name) {
	var cookies = document.cookie.split(";");
	for (var i = 0, len = cookies.length, cookieParts; i < len; i++) {
		cookieParts = cookies[i].trim().split("=");
		if (cookieParts[0] === name) {
			return cookieParts[1];
		}
	}

	return null;
}

var said = getCookie("said"), page = parseInt(getCookie("page"));
if (said === null) {
	var input = document.createElement("input");
	input.type = "text";
	var button = document.createElement("button");
	button.appendChild(document.createTextNode("Submit"));
	button.onclick = function() {
		document.cookie = "said=" + input.value;
		document.cookie = "page=2";
		window.location.href = window.location.href;
	}

	document.body.appendChild(input);
	document.body.appendChild(button);
	document.cookie = "page=1";
} else if (page === 2) {
	document.cookie = "page=3";
	var link = document.createElement("a");
	link.href = "";
	link.appendChild(document.createTextNode("Click here"));
	document.body.appendChild(link);
} else {
	document.body.appendChild(document.createTextNode("You said: " + said));
	var expires = new Date();
	expires.setDate(expires.getDate() - 100);
	expires = expires.toGMTString();
	document.cookie = "said=;expires=" + expires;
	document.cookie = "page=1";
}

The cookie handling could probably be more compact, but whatever; the hideousness of that is far outstretched by the hideousness of the DOM. Try each of them out here:

• PHP
• JavaScript

Arc seems like a cool language. Too bad it’s based on Lisp, which means it will never get any traction in the demographics that don’t wear suspenders.

Anyway, I found myself dissatisfied with the state of jQuery’s DOM manipulation (hint: there isn’t any). You can traverse, and do stuff with events, but there’s no API to create elements and then append them to the DOM. So I looked at the jQuery plugins, and found this, which I tried and quickly learned to hate. Using JSON to create DOM elements is just as painful as creating them using the native DOM API.

So, like any good programmer, I rolled my own. And I called it FluentDom (or $dom for short). Tested in Firefox, IE and Opera. Licensed under the WTFPL license.

FluentDom.js

/**
 * Fluent DOM Manipulation
 *
 * @author  Tommy Montgomery <http://tommymontgomery.com/>
 * @license http://sam.zoy.org/wtfpl/
 */

(function(){

	var FluentDom = function(node) {
		return new FluentDomInternal(node);
	}

	FluentDom.create = function(tagName) {
		var f = new FluentDomInternal();
		f.create(tagName);
		return f;
	}

	var FluentDomInternal = function(node) {
		var root = node || null;

		this.fluentDom = "1.0";

		this.append = function(obj) {
			if (!root || !root.appendChild) {
				throw new Error("Cannot append to a non-element");
			}

			var type = typeof(obj);
			if (type === "object") {
				if (obj.fluentDom) {
					root.appendChild(obj.toDom());
				} else if (obj.nodeType) {
					root.appendChild(obj);
				} else {
					throw new Error("Invalid argument: not a DOM element or a FluentDom object");
				}
			} else if (type === "string" || type === "number") {
				root.appendChild(document.createTextNode(obj));
			} else {
				throw new Error("Invalid argument: not an object (you gave me a " + typeof(obj) + ")");
			}

			return this;
		}

		this.attr = function(name, value) {
			if (!root || !root.setAttribute) {
				throw new Error("Cannot set an attribute on a non-element");
			}

			root.setAttribute(name, value);
			return this;
		}

		this.text = function(text) {
			return this.append(text);
		}

		this.create = function(tagName) {
			root = document.createElement(tagName);
			return this;
		}

		this.id = function(value) {
			return this.attr("id", value);
		}

		this.title = function(value) {
			return this.attr("title", value);
		}

		this.cls = function(value) {
			return this.attr("class", value);
		}

		this.clear = function() {
			root = null;
			return this;
		}

		this.toDom = function() {
			return root;
		}

		this.href = function(link) {
			return this.attr("href", link);
		}

	};

	window.FluentDom = window.$dom = FluentDom;

}());

Usage

Some sample usage, also showing how to integrate with jQuery:

//let's make a list!
$dom(document.body).append(
	$dom.create("ul").id("menu").append(
		$dom.create("li").cls("menu-item").id("menu-item-1").append(
			$dom.create("a").text("List Item #1").href("#")
		)
	).append(
		$dom.create("li").cls("menu-item").id("menu-item-2").title("click to toggle").append(
			$($dom.create("a").text("List Item #2").href("#").toDom()).bind("click", function() {
				$(this).next("ul").toggle();
				return false;
			}).get(0)
		).append(
			$dom.create("ul").append(
				$dom.create("li").cls("sub-menu-item").id("menu-item-4").append(
					$dom.create("a").text("Sublist Item #1").href("#")
				)
			).append(
				$dom.create("li").cls("sub-menu-item").id("menu-item-5").append(
					$dom.create("a").text("Sublist Item #2").href("#")
				)
			).append(
				$dom.create("li").cls("sub-menu-item").id("menu-item-6").append(
					$dom.create("a").text("Sublist Item #3").href("#")
				)
			)
		)
	).append(
		$dom.create("li").cls("menu-item").id("menu-item-3").append(
			$dom.create("a").text("List Item #3").href("#")
		)
	)
);

Which creates and appends this DOM tree to document.body:

<ul id="menu">
  <li class="menu-item" id="menu-item-1"><a href="#">List Item #1</a></li>
  <li class="menu-item" id="menu-item-2" title="click to toggle"><a href="#">List Item #2</a>
    <ul>
      <li class="sub-menu-item" id="menu-item-4"><a href="#">Sublist Item #1</a></li>
      <li class="sub-menu-item" id="menu-item-5"><a href="#">Sublist Item #2</a></li>
      <li class="sub-menu-item" id="menu-item-6"><a href="#">Sublist Item #3</a></li>
    </ul>
  </li>
  <li class="menu-item" id="menu-item-3"><a href="#">List Item #3</a></li>
</ul>

Admittedly, it kind of looks like a lot of code, but it’s much easier to read than if you had used the native API. Compare that with what the same implementation would look like if you went native:

Native API Implementation

var ul = document.createElement("ul");
ul.id = "menu";
var li = document.createElement("li");
li.className = "menu-item";
li.id = "menu-item-1";
var a = document.createElement("a");
a.href = "#";
a.appendChild(document.createTextNode("List Item #1"));
li.appendChild(a);
ul.appendChild(li);

li = document.createElement("li");
li.className = "menu-item";
li.id = "menu-item-2";
li.title = "click to toggle";
a = document.createElement("a");
a.href = "#";
a.appendChild(document.createTextNode("List Item #2"));
$(a).bind("click", function() {
	$(this).next("ul").toggle();
	return false;
});
li.appendChild(a);

var subList = document.createElement("ul");

var subItem = document.createElement("li");
subItem.className = "menu-item";
subItem.id = "menu-item-4";
var subLink = document.createElement("a");
subLink.href = "#";
subLink.appendChild(document.createTextNode("Sublist Item #1"));
subItem.appendChild(subLink);
subList.appendChild(subItem);

subItem = document.createElement("li");
subItem.className = "menu-item";
subItem.id = "menu-item-5";
subLink = document.createElement("a");
subLink.href="#";
subLink.appendChild(document.createTextNode("Sublist Item #2"));
subItem.appendChild(subLink);
subList.appendChild(subItem);

subItem = document.createElement("li");
subItem.className = "menu-item";
subItem.id = "menu-item-6";
subLink = document.createElement("a");
subLink.href="#";
subLink.appendChild(document.createTextNode("Sublist Item #3"));
subItem.appendChild(subLink);
subList.appendChild(subItem);

li.appendChild(subList);

ul.appendChild(li);

li = document.createElement("li");
li.className = "menu-item";
li.id = "menu-item-3";
a = document.createElement("a");
a.href = "#";
a.appendChild(document.createTextNode("List Item #3"));
li.appendChild(a);
ul.appendChild(li);

document.body.appendChild(ul);

30 lines vs. 70 lines. Fluent == rad. Tell your friends.