One more for a Saturday -- see if you can push all the balls off-screen at once! (and no, it won't try to sell you car insurance)

Everything here, on the JS side, is set up using a shared array of initializer functions, just like the previous entry on that topic.

Next step might be to re-cast it as SVG... amazing that SVG seems really powerful, but compared to <canvas>, theres' almost no really good documentation...

May 05, 2012 — filed under Nuke Em from Orbit and Wire Service — Comments (2)

Press for a larger view

The state publishes a PDF containing the 2012 California Dept of Transportation Bicycle-Related Roadway Standards. It contained, across several pages, all of the current standards for bicycle-related signage (and much more). I've collected the signs together here for easier web reference (fabric patterns, anyone?).

Note that the vague legacy "Share the Road" sign seems to be fading out, to be replaced by the much clearer "MAY USE FULL LANE." About time!

May 05, 2012 — filed under The Open Conspiracy — Comments (0)

Following up on the previous post, here are the details on a simple way to add multiple dynamic scripts to a Moveable Type index page.

Like the previous post, try using your mouse on this one! Can you slow down the particles?

Basically, we just need to add an (initially empty) array of function references to the page templates, which we'll use to capture each blog entry's unique scripts (rather than letting them launch themselves), and then iterate on that array for the entire page, once it's loaded and ready.

I'm using jquery, so I declare the array and my $(document).ready() function like so:

var gRActions = new Array(); // initially empty array of functions...

$(document).ready(function() {
  for (var a=0; a<gRActions.length; a++) {
	gRActions[a]();
  }
});

Then in each blog entry, I write the same anonymous javascript function as I might write for $(document).ready(), but instead I just push it into gRActions:

gRActions.push(function() {
   draw_canv739();
   setInterval(draw_canv739,30);
});

Now the page, regardless of how many blog entries it might contain, will include all of them in its page initialization. Remember also to make sure that any "global" javascript values (including function names!) in this entry, and all HTML elements like <canvas>, have unique names so that they won't collide with other blog entries, should they for some reason both be presented on the same HTML index page someday.

Also, as we've learned from the previous post: put some human-readbale text into the post before the scripting portion of the post, otherwise Facebook becomes confused.

May 04, 2012 — filed under Nuke Em from Orbit and Wire Service — Comments (0)

With a little fiddling it's easy enough to use <CANVAS> (and jquery) in tandem with Botzilla's somewhat elderly (and modified) installation of Moveable Type.

Minor tricks:

• Remember to suppress Text Formatting -- no automatic <P> tags
• Between different blog entries, don't reuse variable names, or element names, if you think you might ever need to have multiple canvases on the same page (say, in index or search pages). You will disappear into the fourth circle of scoping hell.
• Likewise, if you think that multiple canvases per page is a real possibility, then put each canvas's prep and render code into a distinct function, so that you can move your "onload()" or "$(document.ready()" functions into the header template, not the body of the entry itself. In the header, declare an initially-empty array of functions, and have your "ready()" function iterate through them.
  Then in each scripted entry, add your entry-specific render function(s) to that array. This way, the "ready()" function can just know what's needing to be set up for the specific page, regardless of which entries are being displayed and the # of visible canvases (A perusal of the initial state of this entry will show that I don't always follow my own advice. But adding that feature to Botzilla is one of my next steps). Be sure to put that array and calling function into all of your index and entry templates!
• Linked sites like Facebook won't show <Canvas> or other animating elements, so if you want a good thumbnail, try adding a hidden image like so: <IMG SRC="/photo/journal//may03e-15.jpg" STYLE="display: none;" />
• MT's preview page doesn't have all this extra js etc built-in. I suppose you can add it, and I probably will over time -- but as a quick workaround, to get a preview, I save my entry, press "Publish," then immediately look at the front index page -- if there's anything wrong, immediately change the entry state back to "Draft" and save again. This will remove the entry from the front page and the RSS feed, but: the "permalink" actual page file (in this case, "/blog/archives/000738.html") will still be there! Download and debug locally, then transport your changes back into MT. A bit of a shuffle but it's a workflow that can get you from points A to B.
• Beware trying to test-post to Facebook, changing the contents of the blog entry (even for typos) and trying to post it to FB again -- FB caches everything the first time, so... if you want a change that will appear there, you need to make a new copy of your entire post, publish that, and hide the old one (how do I know this?).
• Google+ is smart enough to recognize the difference between javascript blocks and actual human-readable body text. Facebook is not, and may just insert blocks of random code onto any FB link you create pointing to your entry. Maybe they will learn.

May 04, 2012 — filed under Nuke Em from Orbit and Wire Service — Comments (1)