Cameron McKay

Cookies are ubiquitous on the web. They’re used to store usernames, login tokens, shopping cart contents, and so on. In libraries, cookies are typically modeled as name-value pairs. An API consumer requests a cookie using a known name (e.g. $.cookie('user') in jQuery with the Cookie plugin) and the library returns a string (e.g. alice). Sometimes, however, just plain old name-value pairs aren’t enough. In this article, we will take a look at how to bake multi-valued cookies in JavaScript that are compatible with the Values property of ASP.NET’s HttpCookie class.

Read more »

In most programming languages like Java, JavaScript, C and C#, the boolean operators && and || perform short-circuited evaluation. Essentially, this means that a program, when evaluating boolean operators, will only evaluate as many arguments as is necessary to determine the value of a boolean expression. Sometimes, however, this is not the behaviour we want.

In this article we will look at how to implement non-short-circuited or “eager” versions of the JavaScript boolean operators && and ||.

Read more »

In the last installment of How to do an AJAX search with jQTouch we looked at how to setup a jQTouch interface with the goal of performing an AJAX search. In this article, we will write the necessary JavaScript to perform that AJAX search, as well as a PHP script to respond to those calls.

This article assumes you have read the first part of this series.

Read more »

You may not know this, but whenever you use jQuery commands like fadeIn, slideDown, and delay, you are implicitly making use of a jQuery queue behind the scenes. That queue is named fx, and it is the default queue that all animations use unless otherwise specified.

In this article, we will look at how jQuery animation queues work, how to create and manipulate them, and how to use them in a meaningful way.

Read more »

For his 1986 book The Blind Watchmaker, Richard Dawkins developed a program that created “biomorphs”: virtual creatures created by a computer simulation. The simulation, called Biomorph, was developed in order to demonstrate the power of natural selection.

Recently, in an effort to better understand how the Biomorph program worked, I decided to implement it myself in JavaScript using the HTML5 canvas element. The result of this endeavour can be found here. Read more to learn how to use the Biomorph program.

Read more »

Webble is a pure HTML/CSS/JavaScript implementation of some of the core features Wezzle game engine. By “pure” I mean that there are no external plugins like Flash used. Furthermore, Webble does not make use of the HTML5 canvas element: all the animation is done purely by moving around HTML elements using JavaScript.

Writing a simple game engine using the DOM and JavaScript poses some interesting problems that are atypical to regular website development. In this article I will discuss a few of the problems that I encountered while writing Webble and how I solved them.

Read more »

jQTouch is a pretty nifty little jQuery plugin for making websites look like native iPhone apps. Unfortunately, beyond a bunch of examples included with the distribution, there’s not a whole lot of online documentation written for jQTouch. Having started to use jQTouch for a professional project, I thought I’d help remedy this deficiency by posting what I learned along the way.

We’ll start with something fairly straightforward by making a jQTouch app that makes an AJAX call to a PHP script to search a database. It then displays the results of that search in the jQTouch app. This article is split up into two parts. The first part deals with the jQTouch UI and the second part deals with the PHP script and the supporting JavaScript.

This is part 1 of a two part series.

Read more »

If you’ve ever needed to do more complex animations than fades and slides, then you’ve probably encountered the jQuery animate function. The animate function allows you quite a bit more flexibility than just using fadeOut or slideDown. In fact, the oft-used fades and slides simply wrap calls to animate.

If you’ve ever looked at the jQuery animate docs at api.jquery.com you might have noticed that one of the optional arguments you can define is step which is defined as:

A function to be called after each step of the animation.

…and that’s it. If you search for “step” on the page, you won’t see another mention of it.

Read more »

The first page to use JSS in the wild has recently been launched: reneelung.ca.

The page was designed by my fiancee Renee Lung and programmed by me. You’ll notice if you look at the source that there is no JavaScript in the traditional sense. The page consists of three JavaScript files: the jQuery library, the JSS plugin, and a JSS stylesheet.

I hope this gives people an idea of the power of JSS. Read on for an annotated version of the JSS stylesheet used on that site (as of June 29th 2009).

Read more »

I’m proud to announce the release of JSS 1.0.0-beta2. Here are the changes:

• Fixed the way that {attributes} are handled when not using a selector. They should now properly grab the attribute from element that fired the event.
• Made it so each time a declaration block is applied, all the event handlers bound by JSS to the elements returned by that selector are unbound.
• Fixed the semantics of the {@attr} syntax. It now means that the eventTarget should always be used, regardless of whether or not a selector is defined. In order to access the attributes of a selector use {@attr} now.
• Added two new commands: set-data and remove-data. These commands use the jQuery functions data() and removeData(). They are similar to set-attr and remove-attr except instead of storing the information in an attribute, they are stored in a table. Data is accessed by using [data] syntax, similar to the {attr} syntax.
• Added new event property: setup. This event is fired when the JSS stylesheet is loaded (setup). This is useful in certain cases where the user wants to setup some variables using set-data.
• Made it so you can now set scroll-top and scroll-left via the set-attr command.
• Added trigger command. It can be used to trigger event properties on elements.
• Fixed bug where you could put a string | in a binary command due to the
  simplistic implementation. The new version requires any | to be escaped with \|.
• Added fade-to command, based on the jQuery.fadeTo() command.
• Added show and hide commands.
• Fixed issue with data and attribute replacements not working correctly (i.e. the first event would replace them for all events).
• Callbacks may now take string parameters. For example, “fade-out (#target) normal !callback str1 str2″.

I’ve also started writing documentation for the JSS commands. It is only partially completed but can still be helpful. Check out the JSS homepage for other documentation.