Blog

Honored

2010-08-26T11:51:38Z

Late last week, the nominees for the 2010 .net Awards were announced and I was amazed to find myself nominated for not one, but two awards.

The first nomination I received is for “Standards Champion.” It's an absolute honor to have been nominated alongside Derek Featherstone, Molly Holzschlag, Jeremy Keith, Jeffrey Zeldman, and a handful of other folks who've not only played a pivotal role in the widespread adoption of web standards, but who’ve also contributed greatly to my development as a web professional and educator.

The second nomination I received was in the category of “Mobile Site of the Year” for colly.com. As some of you probably know, I wrote a little article on adaptive layouts with media queries for .net’s Summer Issue (#205). In that article, I gave the homepage of Mr. Simon Collision a makeover for the iPad and iPhone. Colly was so excited with what I'd done that he used my changes as a baseline to convert the remainder of his site to employ adaptive layouts. The adaptive redesign turned quite a few heads and became an oft-cited example of adaptive layouts in practice.

While I've received numerous awards for my work over the years, these two nominations were greatly appreciated. I offer my sincerest thanks to those who put my name in the hat. Win or lose, I can honestly say that I'm a very happy man.

Of course it wouldn't hurt if you voted for me though. ;-)

Public voting ends on 12 October 2010.

Full disclosure: I am also a judge in the .net Awards (as are several other nominees), but I did no lobbying to become a nominee.

Be a good localStorage neighbor

2010-08-02T13:17:28Z

Most JavaScript developers are keenly aware of what they add to the global object and do their best to namespace their work or sequester it in closures. Namespacing and closures reduce the likelihood that necessary functions and variables will be accidentally overwritten, causing errors to be thrown and interfaces to break. Unfortunately, the localStorage API (available in most modern browsers) doesn't inherently support creating isolated caches for each script because the cache is site-specific and consists simply of key-value pairs. Internet Explorer's userData behavior (which is available all the way back to IE5) does support sequestering the cache to a degree because you need to provide a name for it, but the API doesn't make a whole lot of sense and isn't at all equivalent to localStorage.

Using the native APIs, it's quite easy to accidentally overwrite an existing key in the cache. Beyond that, a simple call to localStorage.clear() will wipe out not only your own data, but anything else stored in the local cache. It's not good.

While working on eCSStender's implementation of client-side caching, I came to realize the problems with the current state of things and sought to address them by implementing faux namespacing via prefixed keys. I've since copied that code out of eCSStender and created a small library named Squirrel.js that not only evens out the differences between localStorage and userData, but also makes it easier to manage your client-side data store in a manner unlikely to cause issues with other scripts also using client-side caching.

Here is a quick rundown of how Squirrel.js works:

{exp:gist id="504869" file="Squirrel-examples.js"}

For more, check out the Github page. Feel free to let me know your thoughts on how easy it is to use and how it can be improved.

Brooke Valentine’s Celebrity Girl Fight Game

2010-07-24T13:54:33Z

If you made something that was used by over Ten Million people, would you/it be a success?

Over the last 10 years I have made countless Flash games for various agencies and independent artists. I do the job and move on. Sometimes they barley rise to any notable or worthy existence and other’s get viral and do well for a while.

From time to time I perform various searches out of curiosity to see if anything still lives. Today I thought I would hunt down a game I made back in 2007 for Brooke Valentine called Celebrity Girlfight. It’s a boxing game where you battle against Paris Hilton, Jennifer Lopez, Lindsay Lohan, Lil Kim, Beyonce Knowles and Ciara. I was stunned to see “About 691,000 results” from Google.

Clicking on the first result brings me to y8.com. It’s one of those Flash game sites that collects them and offers them up for free, surrounded with advertisements. On this one site the game had been played 2,371,316 times with 110,043 positive votes (87.15%) vs.16,224 negative. Over two million, wow!

I continued through one whole page of Google results, 10,000, 9,000, 20,000 plays, on and on and on. I bet if I was to go through more of the sites, the count would exceed ten million. That’s awesome I thought.

Now in most situations, the Flash programmer does not put his name on the game and remains anonymous. That's fine, I realize the focus here is the artist, but I thought it would make an interesting blog post from the perspective of a developer. If I had 1¢ for every time it was played I could have made upwards of $100,000.

It's food for thought.

Give a hoot

2010-07-19T20:06:57Z

As any competent JavaScript knows, it’s not cool to litter the global namespace with variables, functions, and the like. It’s far better to encapsulate your code in an object, a series of objects, or even a closure, exposing only what you absolutely need to via the global namespace. This helps reduce the potential for collisions that will probably cause your site to break.

Occasionally, however, even closures won’t help you trap a given variable. Case in point:

{exp:gist id="479723" file="pollutes.js"}

If you’re familiar with languages like PHP, you might think this simple closure creates two variables with the same value, but you’d be wrong. It creates a local variable, a and a global variable b, both of which have their value set to 0.

{exp:gist id="479723" file="example.php"}

In PHP this means of sharing the value assignment of variables is perfectly legit; the difference, however, is how JavaScript and PHP treat variable scope. By default, every variable declared in PHP is scoped to the function it is called within. Global variables only come into play when you use the global declaration or the $_GLOBALS array. In JavaScript, by contrast, any variables not instantiated with a var are added to the global namespace. Hence the namespace pollution in the above example.

Revisiting the closure, it's best to rewrite it in one of two ways to maintain the variable scope:

{exp:gist id="479723" file="scoped-option-1.js"}

{exp:gist id="479723" file="scoped-option-2.js"}

Which solution will work best is dependent solely on context. If you're minifying the code and the value being assigned is anything more than a single character, the latter is probably the way to go.

To help you discover and mitigate pollution in your own scripts (or to help you see what additions your standard JavaScript libraries are making to the global namespace), I’ve created a little script called EmissionsTest.js. It’s pretty easy to use, you simply include it as the first script on your page (preferably in the head of your document) and it does the rest. It will attempt to report its findings to the console (if your browser has one) or it will create a floating notice at the top of the page.

You won’t want to include this script on a production site and it’s still pretty basic, but it could be very useful for tracking down any accidental emissions in your script.

Monitor Your Websites with Notifications

2010-07-16T12:02:35Z

If you’ve ever been surprised to find out that one of your websites is down, you’ve no doubt tried to figure out a good way to monitor their health. There are many services on the internet that will check in on your sites periodically and let you know when there’s been a problem, but often these aren’t real time enough. After a recent DDOS to one of the sites I run, I put together a simple Python script to check in on my sites and let me know if any of them return anything besides “HTTP 200” as the response code.

Notifications

I’ve built in support for Growl notifications and iOS push notifications via Boxcar. You could also modify the script to send emails, etc.

Growl

If you’re running Growl on your Mac (maybe Windows as well, I haven’t checked), you can receive Growl notifications by setting the USE_GROWL variable to True in the script. You can optionally then use Prowl or Howl to pass the same notices on to your iOS device, following either app’s provided instructions.

Boxcar

Unlike Prowl and Howl, Boxcar doesn’t require Growl (meaning it could work on a Linux box) and doesn’t cost anything. To use Boxcar, you need to become a Boxcar provider. Once you’ve registered your provider, fill in the script’s BOXCAR_API_KEY and BOXCAR_API_SECRET variables with the ones Boxcar gives you. Finally, set BOXCAR_EMAIL to the email address you registered with Boxcar and USE_BOXCAR to True.

Installation

{exp:gist id="460331" file="check_site.py"}

Save the contents of the script to a file called “check_sites” somewhere in your path) and make the file executable (chmod +x check_sites). Edit the sites variable, creating an entry for each site you want to check. You can test the script by running check_sites on a command line. Finally, you need to set up a cron job to periodically run the script. For example 0-59/5 * * * * /path/to/check_sites >& /dev/null will run the script every five minutes. (You need to edit “/path/to/check_sites” to be the actual path of the script.)

That’s it. Now you’ll be alerted whenever the script finds an error with one of the sites in the list.

Cross-posted at http://dryan.com/articles/monitor-your-websites/

Template-based Asset Munging in ExpressionEngine

2010-07-11T13:28:57Z

In our years of working with ExpressionEngine, we've tweaked our standard setup quite a few times. We generally handle most every asset, including CSS and JavaScript, as a template. Being a bit obsessed with organization and overall maintainability of code, we separate out our styles and scripts into separate templates for each major concern (e.g. typography, color, screen layout, etc.).

A while back, it was not uncommon for us to include each of these assets into the document separately, but, as website optimization and performance folks will tell you, all of that separation leads to a lot of additional overhead because the browser must request each of those files individually. In the interest of streamlining the download process, we decided to merge all of the stylesheets together at the template level before sending them over the wire. Here's the simple recipe we devised:

{exp:gist id="471560" file="main.css"}

This framework allows us to pull in each template in the optimum way for progressive enhancement with only a single download on the user end, which is much faster. And server-side caching only adds to the speed improvements. Beyond that, we can continue to add new @media blocks (including media queries) as necessary either within the embedded files or in this master one.

We use a similar setup for our JavaScript:

{exp:gist id="471560" file="main.js"}

In this particular example, we're including two jQuery plugins: FunctionHandler and hoverIntent, along with eCSStender before adding our page-specific code in FunctionHandler registrations. (jQuery itself is loaded in from Google.)

Using ExpressionEngine’s template system to manage the munging like this is dead simple and (from our experience evaluating other people’s EE setups) often underused. Give it a shot on your next project.

Subtree merge as an alternative to submodules with git svn

2010-04-05T11:45:12Z

We use Subversion as our version control system for all client work here at Easy because we absolutely love Springloops' hosted Subversion service, but we use Git for all of our open source projects because, well, Git is a lot more fun to work with and we love the community that's built up around Github. In order to have the best of both worlds when working on client projects, we use git-svn as our front-end to Subversion. It's a great tool, but it's not without its limitations. One such limitation is its inability to translate Git submodules into svn:externals. Thankfully, Git offers an alternative that is comparable and plays nicely with Subversion: the subtree merge.

When attempting to dcommit a Git repository containing a submodule, you'll likely receive a message like this:

952bee47201e87b0b0e851bcbe6c8940d429cda0 doesn't exist in the repository at /usr/local/git/libexec/git-core/git-svn line 3787 Failed to read object 952bee47201e87b0b0e851bcbe6c8940d429cda0 at /usr/local/git/libexec/git-core/git-svn line 480

That annoying message is the painful reminder that you need to find another way to add content from another project into your repository. Subtree merge to the rescue!

If you've already hit the error, go ahead and delete your submodule folder(s) and the .gitmodules file and commit the changes to your repository to make the path available again. Next, from a shell within the root of your Git repository enter these commands at the prompt (replacing the capitalized phrases with your relevant information):

git remote add -f LOCAL_NAME PATH/TO/GIT/REPOSITORY
git merge -s ours --no-commit LOCAL_NAME/BRANCH_NAME
git read-tree --prefix=PATH/I/WANT/IT/IN/ -u LOCAL_NAME/BRANCH_NAME
git commit -m "Merge of PROJECT"
git pull -s subtree LOCAL_NAME master

To provide a fully fleshed-out example for you, I used the following to merge the master branch of eCSStender into the path vendors/ecsstender within another project.

git remote add -f eCSStender git://github.com/easy-designs/eCSStender.js.git
git merge -s ours --no-commit eCSStender/master
git read-tree --prefix=vendors/ecsstender/ -u eCSStender/master
git commit -m "Merge of eCSStender into the vendors directory"
git pull -s subtree eCSStender master

The beauty of this is that you can use that last line to pull in the latest version of the external project and then all you have to do is dcommit the changes to get them into Subversion. Problem solved.

iPhone Controlling Flash with TUIO and UDP

2010-03-19T13:54:33Z

I am in the middle of constructing a FTIR table and I am going with the laser approach after less than satisfactory results using Infra Red LED’s. It’s going well and I have had some success with Fiducial tracking using my infra red modded webcam cam, plexiglass and such. I had been building the apps in Quartz Composer but I am not too familiar with Quartz yet.

Until my lasers arrive I decided to try and get some output from my iPhone, after all it’s a great touch screen and a change from building apps in Flash, which I know better. How do you get Camera or iPhone touch data out over the network to your MacBook and then have Flash read it??? Long story. If you are interested in going down this rabbit hole, check out these links:

As I recently discovered, there are a few different methods of tracking and a bunch of lib’s on google code for such things. After trying most of them and trying a couple of different table designs, I decided to go with UDP-Flashlc Bridge for UDP speed and TULO-AS3 for TUIO or Blob tracking in Flash and OSCemote to track iPhone touches.

I find that sending the data over UDP using udp-flashlc-bridge is way faster and more efficient than XML- or TCP-based approaches. There is virtually no lag at all.

I modded my sea creature to work with a simple touch setup. Here is a crappy movie for now. I will do some nicer movies when I finish my table.

{exp:easy_html5_video path="/img/posts/" file="iPadFlashUDP_SeaCreature" width="320" height="256"}

The next thing was to get some multi touch functionality. This one took some head scratching and it still needs refinement. I started thinking about moving photos around, rotating, scaling and such. I realized I needed special movieClip class I had created for my last big Flash project. A movieClip class can be assigned a dynamic registration point and it’s globalToLocal coords work no matter how deeply nested it lives. This allows for the first finger touch to be set as the registration point for the photo and the next touch to be used as the operator for scaling and rotating. Here is another crappy movie.

{exp:easy_html5_video path="/img/posts/" file="iPhoneTrack2" width="320" height="256"}

EE Tip: Counting the results of a nested query

2010-03-17T19:16:25Z

If you've built anything remotely challenging in ExpressionEngine, you've no doubt discovered things that are easier done in native PHP than in EE tags. A lot of it has to do with how ExpressionEngine parses templates and what gets parsed first.

One recent bugbear I ran into was trying to use the {count} "magic" variable from a call to {exp:query} that resided inside a {exp:weblog:entries} loop. I needed the {entry_id} from the entry in the SQL statement, but {count} (despite being used inside {exp:query}) was evaluating as the {exp:weblog:entries} count and not the {exp:query} count. To solve the issue, I came up with the following:

{exp:gist id="335632" file="gistfile1.phtml"}

You'll notice I'm using {exp:query} twice. The first time is to establish a variable in the SQL connection. Then I am free to use the variable in the second query and the count (returned as {query_count}) will be a count of the inner loop instead of the outer one.

It is important to note, however, that MySQL will evaluate the variable's incrementation before paying attention to any ORDER BY clauses, so your mileage may vary. Regardless, it's a handy technique.

Audio Spectrum Analysis in JSON

2010-02-23T13:54:33Z

I have been unsuccessful so far in syncing animation drawn in canvas using Processing.js & audio played using the browser audio tag with audio spectrum data I create from a ByteArray in Flash. It works in Flash due to the fact that the spectrum analysis and animation are executed together in an onEnterFrame event. The drawback to not having real time audio spectrum analysis from within the browser is the need to supply all the data to Processing.js at initialization. It can be rather large and I have yet to perfect syncing the reading of the array with the current time of the audio. Some sort of progressive data stream and excellent timing system?!?

It may be I just have to wait until this feature is implemented into browsers. In the meantime, I thought I would post the source for the the Spectrum Analysis tool I created for anyone wanting a quick way to get some data from their favorite tune and perhaps figure out a way to use it in a optimized fashion. The tool is very simple and outputs JSON with Left and Right channels as floating point numbers between 0 and 1.

You can use it to make stuff move to the groove. It has a simple execution of this in the ui for you to see. Download the Flash and PHP and throw it on your local server.

The process of accessing audio data from within the browser is quite beyond me, I really just want to see what I can create visually in Processing.js and canvas. Until it’s available in an easy-to-use API, I just have to keep looking for a way to get spectrum data quickly, hence this contraption. Have fun.

A Twitter Search Visualizer in Processing.js

2010-02-19T13:54:33Z

I jumped over from Raphael back to Processing again today. I have said it before: us Flash guys might get frustrated trying to pull off some simple stuff in either Processing or Raphael. Just keep in mind that they are young languages and the future looks bright.

Anyway, another attempt to do something here with Processing. It took a me minute to find an elegant way to get Twitter JSON data into Processing without being too sloppy. The visualizer works perfectly in Safari and Chrome, but it’s completely hosed in Firefox.

Canvas, Audio, Raphael & Twitter

2010-02-16T13:54:33Z

Last week I worked up an audio visualizer in Flash for a friend that yielded some nice results. The ActionScript 3.0 ByteArray and computeSpectrum are powerful and have many potential uses. Doing the same thing with canvas and JavaScript requires a more roundabout method that is less accurate but more gratifying from a coding perspective.

My journey down this rabbit hole led me to almost doing this. I got myself a copy of Minfield and read up on how to build my own audio patched version of Firefox… yeah, not going to happen.

Needing more of a quick fix, I came up with two solutions. My first attempt at a solution was to build a Flash audio sampler that piped out the -1 to 1 floating point numbers to a file and use them in a JS array to manipulate coordinates of sprites on a canvas. It worked quite well but the synchronization was off. I have not fixed this in that version but in the interim I got sidetracked and found another way to get some data. Quite simple really: load up an mp3 into Audacity and go Analyze -> Time -> Beat Finder. Set the tolerance to about 55 and this will generate beat labels. Export those to a text file and then clean up the numbers to get an array of milliseconds for your JS setInterval().

Granted this is not spectrum data—it’s simpler beat info—but in a way it works better for animating sprites because it’s cleaner. Spectrum data is very granular and works nice in widgets designed to show this (e.g. Graphs and Histogram visuals).

This test shows twitter searches on an HTML5 canvas and moves them around in time to the beat of the music loaded in an audio tag. It’s not very exciting at this point but it’s got me thinking of some fun stuff to do. Every experiment like this is a step closer to moving away from Flash. I still can’t settle on using Processing or Raphael though.

See Creature

2010-01-21T13:54:33Z

I took a day to extend the tentacle class to work on 360° and secondary motion from a parent node, but here it is, the first critter for my ocean. Thanks to Keith Peters book ActionScript 3 Animation, useful formulas section for getting me through this. It kicked my butt and fried my brain, but it’s so clear now. Onwards!

A new “onload” scheme

2010-01-18T23:30:45Z

A few projects back, I decided to rethink our JavaScript organization strategy and came up with a new technique that, I think, helps us better manage behaviors from page to page.

For years, when I needed page-specific interactions, I would either embed the JS (unobtrusively, of course) at the bottom of the page or externalize it to a separate page-specific file. In some sites, that became a difficult setup to manage because we were juggling so many files and we were also forcing our users to download each of those files individually.

Looking for a better way to manage all of the code, I built FunctionHandler. This script takes lets you declare blocks of JavaScript and then target them at pages based on the id attribute on the body element. When the targeted id is encountered, the code block is executed on DOM ready. Here's a quick example:

{exp:gist id="313553" file="gistfile1.js"}

As you can see, using it is pretty simple: you make a call to FunctionHandler's register method and pass it two arguments. The first is an array of the id values you want this code block to execute on and the second is an anonymous function that wraps your code block.

What we've found really nice about this setup is that it encourages you to create discrete JavaScript components while, at the same time, easily allowing you to adjust the pages that those components run on by simply adding to or subtracting from the id stack. You can even blanket every page with a given script by supplying a string value of "*" as the initial argument:

{exp:gist id="313553" file="gistfile2.js"}

Anyway, I just wanted to take a brief moment to share this script because we've found it pretty handy. Perhaps you will too.

PS - FunctionHandler is available in 3 flavors: native JS, jQuery, and Prototype.

Logarithmic Spirals

2010-01-11T13:53:33Z

I spent last evening coding some circles & spirals in Flash. I love spirals!

A logarithmic spiral, equiangular spiral or growth spiral is a special kind of spiral curve which often appears in nature. The logarithmic spiral was first described by Descartes and later extensively investigated by Jakob Bernoulli, who called it Spira mirabilis, “the marvelous spiral.”

This kind of simple Math and lengthy tweaking of geometry animation is akin to whittling a piece of wood for me, whenever I have some free time and get the urge to write some code with no particular objective. It’s very relaxing.

It went through numerous iterations over the weekend and truly came to life when I started using Vectors and local3DToGlobal to convert the x,y,z coords to draw the 2D lines. Throwing in some random offsets from time to time helps keep it interesting. I used Math.sin and Math.cos a lot with random offsets to create smooth undulating motion that sometimes reminds me of jelly fish or some sort of under water plant waving around in the current. Other times it takes on a galaxy formation.

Watch it for 10 minutes or so and you will see some interesting spiral explosions. I can stare at it for 20-30 minutes.