Merely Coincidence

bjorke_P1050806.jpg

That Isaac's choice of university is also near one of the best skate parks.

Posted May 31, 2012 | Comments (0)

Silver Efex Pro

bjorke_P1060066.jpg

Hard to look at B&W photos these days without suspecting the hand of Nik Software behind the curtain.

Posted May 30, 2012 | Comments (0)

All Minds Think Alike

I'm a bit annoyed at the realization that my most-recent post on fiddling with HTML5 canvas in Moveable Type looks and behaves in a way that's terribly similar to the page header on the official Google blog. I must have seen that before... we rarely know where our ideas and parts of ideas come from! Or is it merely "parallel evolution"? Still, it's not as if I'm launching a product, and hardly expect Google's IP lawyers to appear on Botzilla any time soon (hi guys).

And I like their "version" of the interactivity -- ONLY let the mouse have an effect when moving. Will have to check that out on a tablet.... of course, when they're creating a brand presence for a company with.. what, 30,000 employees? you would only expect that they'd take a little more time on polishing than my slice-of-a-Saturday attempt. Pat on the back, lads.

While not posting for a few days, I've been scraping at Botzilla's underlying CSS structure, so that I can rebuild it once more with CSS that will allow a fairly seamless multi-screen experience -- PC web or mobile phone/tablet. This has meant I've already had to update (internally) my use of jquery to use jquery-mobile, have started playing with Modernizr for those stodgy users who insist on running IE, and trying to make peace with myself over the idea that photos that I felt barely look okay 800+ pixels across will just have to be acceptable at mobile-phone sizes.

More to come as this gels.

Posted May 21, 2012 | Comments (0)

At Work

bjorke_P1060056.jpg
Posted May 17, 2012 | Comments (0)

791

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...

Posted May 05, 2012 | Comments (0)

None of These Mean: "Bikes Out of My Way!"

CA-BikeSafe-2012-15-botz.jpg
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!

Posted May 05, 2012 | Comments (0)

HTML5 (& JQuery) vs Moveable Type, Part 2

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.

Posted May 04, 2012 | Comments (0)

HTML5 Canvas vs Moveable Type

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 on the server! Download it 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.

Posted May 04, 2012 | Comments (0)

Playing All Sides

bjorke_MG_8267.jpg

Despite my belief that Facebook has been a large-than-deserved time sink for myself, I've finally managed to add proper "like" buttons to these pages. Took a little reminding myself how javascript worked, but now every entry has its own "like" button so that, well, so that Facebook can sell more ads.

I've also been poking at Google Currents as a distribution mechanism for mobile devices, in addition to puzzling over how to make botzilla itself tablet-friendly and how to best reduce all photos to 400 pixels (to bend the old saw about cameras, "the best photo gallery is the one in your hand"?).

What's a bit of a puzzle to me is how to best incorporate either of these with some of the other aspects of botzilla that I'm looking to enhance, especially heavier use of <canvas> tags using animation and where possible WebGL. Given that Facebook looks for static images to grab as thumbnails, and that Currents runs off of RSS, how to best show-off fun animation and interactive imaging experiments?

Posted May 02, 2012 | Comments (0)

 

All content on botzilla.com is 1994-2017 by Kevin Bjorke. All Rights Reserved.