Javascript
Douglas Crockford: “Programming Style and Your Brain”
On 13 January, 2012, I saw Javascript expert Douglas Crockford deliver a talk titled “Programming Style and Your Brain” on the campus of the University of Pennsylvania. The brain portion of the talk (which Mr Crockford said borrowed heavily from Daniel Kahneman’s book Thinking, Fast and Slow
For example, programmers have been arguing since the 1970s about the placement of curly braces. Some people prefer:
if ( true ) {
doSomething();
}
Others prefer:
if ( true )
{
doSomething();
}
Crockford says that if the compiler treats these 2 forms as equivalent, then there is really no difference (so long as you are consistent). These are Gut decisions. However, people will use their Head to try to rationalize their Gut decisions and come up with some ridiculous rationalizations.
OK, fine. What does that mean in practical terms, i.e. writing code?
› Continue reading
SharePoint user control to display a random image
The master page of a SharePoint site I work on loaded 7 photographic images, all over 50 kB each, to display at random as a banner adjacent to the site logo. The way it loaded the images was very inefficient: a default image was loaded in the HTML, and Javascript on the page created 7 image objects and returned one at random to overwrite the default. I decided to find a C# way to solve the problem.
› Continue reading
Opening links in a new window without the target attribute
Web developers often use the attribute target="_blank" to force a link to open in a new window. However, if you use an HTML validation service to check your web pages, you know that the target attribute is not valid in strict versions of HTML and XHTML.
There is a simple way to have a link open in a new window using Javascript. You may have seen code like this:
<a href="#" onclick="window.open('http://osric.net')">osric.net web hosting</a>
That method has some serious drawbacks, though:
- The user now sees # in the browser’s status bar instead of the actual destination URL
- The link fails if the Javascript fails (or if the browser has Javascript disabled
- Search engines may not follow the link
I’ve written a summary of the issue and the methods I’ve found so far that best address it. I moved it to a page outside this blog because of the Javascript examples, which were easier to include on a separate page:
How to best use Javascript to open links in a new window
More People Alive Today Than Have Ever Died
A few years ago, I ran across this quote:
“There are more people alive today than have ever died.”
As we contemplate overpopulation, a quote like that is quite thought-provoking and shocking. Could it be that the living today outnumber all of our ancestors? It’s astounding. However, I didn’t believe it. I still don’t believe it, and for good reason.
› Continue reading
JSONP and Sencha Touch
I was recently trying to get a Sencha Touch demo up-and-running, but my callback functions after requests for JSON data never ran, and Firefox would throw errors along the lines of “invalid label.” I didn’t understand why–until I read more about JSONP.
JSONP prefixes your JSON response with a function name, which runs when the response is retrieved. It’s a way of handling the data without a listener.
This means that your JSONP provider needs to detect a JSONP parameter, and then wrap or “pad” the response within the specified parameter value.
For Sencha Touch, the JSON returned should be wrapped in Ext.util.JSONP.callback();. If your JSON looks like this:
{"results":[{"name":"Chris"},{"name","Harry"}]}
then your JSONP should look like this:
Ext.util.JSONP.callback({"results":[{"name":"Chris"},{"name","Harry"}]});
Not that you should hard-code that function name anywhere in your JSON output–web-based APIs and services should pick up the function from your request and wrap the JSON for you. For example, the twitter search API accepts a callback querystring parameter.
http://search.twitter.com/search.json?q=fakecriterions&callback=myCallbackFunction
would wrap the JSON response inside
myCallbackFunction();
I ignored the extra letter in the acronym at my own peril–I figured it was just a trivial variation on JSON (which it is) that wouldn’t make any difference in how it was handled (but it does).
Parsing a URL Querystring with Javascript
Can you access a URL querystring with Javascript?
Yes. Just refer to location.search.
Why would you want to reference the URL querystring with Javascript?
A couple reasons come to mind. › Continue reading
Creating a Javascript Game (LetterLock)
I recently created a simple word game using Javascript, which presented certain challenges. The game displays 3 random letters to the player, who must then attempt to create a dictionary word in as few moves as possible by shifting the letters up or down in the alphabet.
There were several programming decisions or challenges that came up during the game’s creation, for which I was able to apply some of the things I learned in my recent computer science classes.
Hunt the Wumpus
I am taking a course in discrete mathematics this semester, and the professor suggested we take a look at a game called Hunt the Wumpus.
Hunt the Wumpus was originally created in the 1970s, and unfortunately, most of the versions you can find on the web today are easier and less interesting that the original. The original eschewed a square grid for the game board and instead used a “squashed” dodecahedron, where each game space was one of the vertices.
It is also noteworthy for introducing the superbat, a feature of other games (including Zork) that followed Hunt the Wumpus, and for the humorous feedback (e.g. “ZAP–Superbat Snatch! Elsewhereville for you!”) that many of my favorite games adopted.
At any rate, I decided to recreate a version of the easier and less interesting grid-based game in Javascript:
Hunt the Wumpus
Javascript insertAfter()
There is no Node.insertAfter() DOM function in Javascript, but it is clearly something that developers would like.
As the Gecko DOM Reference for Node.insertBefore() points out, this can easily be achieved with
parentDiv.insertBefore(nodeToInsert, nodeToInsertAfter.nextSibling);
If nodeToInsertAfter doesn’t have a next sibling, a NULL value will be returned and nodeToInsert will be inserted as the last child of parentDiv.
If you find it frustrating to type insertBefore when you want to insertAfter, that’s OK: you can add that function to the Object object:
Object.prototype.insertAfter = function (newNode) { this.parentNode.insertBefore(newNode, this.nextSibling); }
Now you can type:
nodeToInsertAfter.insertAfter(nodeToInsert)
Javascript textarea counter
I’ve been thinking more about the textarea counter issue that I mentioned in my previous post (“Users Paste Differently“).
First of all, I noticed that some of the textarea counter scripts date back to at least 2000, so this has been a problem that developers have been looking to solve for 8 years. I checked the HTML 5 specification and found that in HTML 5, the textarea element has a maxlength attribute. Presumably user agents will build in the most elegant solution.
But what is the current most elegant solution? › Continue reading
Pages
Archives
- January 2012
- December 2011
- November 2011
- September 2011
- August 2011
- July 2011
- June 2011
- May 2011
- March 2011
- February 2011
- January 2011
- November 2010
- May 2010
- March 2010
- January 2010
- December 2009
- October 2009
- September 2009
- August 2009
- July 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008