JavaScript: The Bad Parts

Web Geek Warning

Last night I headed over to the Paypal/EBay offices to see a presentation by Douglas Crockford, titled Programming Styles and Your Brain

I'll admit that I was a little bit skeptical about coming away with much useful information (a general rule: be cautious around tech companies that have had near-zero evolution since, oh, 1995), but in fact the debugging bits were pretty illuminating. Here are some sketchy notes:

Your Brain

Crockford’s lecture had about five introductory minutes of broad speculation (he's earned the right!) mixed with notes cribbed from Daniel Kahneman

JavaScript

This was the expected real bulk of the presentation, a longer not-veiled pitch for JSLint and his book “Javascript: the Good Parts” -- especially about how to avoid the bad parts:

The Bad Parts?

So how does the Javascript on Botzilla stack up? Let's just say, it's an ongoing learning process!

In scanning the scripts here (and at Trion), there appear to really only be a couple of idoms that I need to stamp out from my code to make the analyzer happy. What's yet to be determined is if Javascript's scoping rules will ever really make sense...

JavaScript: The Bad Parts: posted June 22, 2012 | Comments (0)

Black

Fluid is the new Black goes the saying of the day, but for Botzilla the main message is: get over it.

By that, I mean that if the site needs to work on all possible screen sizes, for future-friendly leanings, then: the pictures are just going to have to be small. And there's the rub for a photo site -- when the pictures are reduced to being upgraded versions of the thumbnails, not the other way 'round. This is tough, and frankly I won't give up without a fight for getting the best possible photographic presentation into place.

At the moment, I'm getting cozy with this little bit of CSS:

img { max-width: 100%; }

Which is a trick to ensure that images are resized downwards as their containers shrink.

The obstacle on a site like Botzilla is that most photo <IMG> tags have both WIDTH and HEIGHT properties specified, so that when displayed on a small screen, "max-width" alone doesn't get you very far -- the images don't scale uniformly down, but instead simply compress horizontally, untill they're long tall sticks.

JQuery to the Rescue!

Including this as the first line in my ready() function does the trick:

$("img").removeAttr("height");
Black: posted June 06, 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.

All Minds Think Alike: posted May 21, 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...

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

HTML5 (& JQuery) vs Moveable Type, Part 2: 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:

HTML5 Canvas vs Moveable Type: 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?

Playing All Sides: posted May 02, 2012 | Comments (0)

Camputer

bjorke_Collected.jpg
Dogs and Lunches, etc

If It Has a Ringtone, It's Not a Camera. Panasonic Lumix's advertising slogan didn't last long -- not, I think, because there would soon enough be a Lumix-branded mobile phone, but because it's a slogan that can easily be interpreted either way: that a celphone is less than a camera, or (oops) that a camera is potentially rather less than a cameraphone.

It's also less than a "camera-puter," which is an aspect that is neither camera nor phone.

In the simplest sense, the camputer is a portal for images direct from your hand to the internet. But what about pictures before they ever leave the phone? If they ever leave the phone?

The utilitarian camera-as-scratchpad notion that's been spreading since the advent of home video (even, for a few, on Super 8) is now something that almost everyone takes for granted. End a meeting with a whiteboard full of scribbles that might be useful later? No time to copy them in a notepad? Use the camera phone. Want to keep a snap of the good-for-once haircut? Want to remember that the car is parked on Level 4 Blue zone? Easy and the photos just as easily cast off when they're done.

Camphone as agent of political change? The jury's out on its genuine effectiveness, but certainly it's had a huge and unpredictable effect on the relations of people, governments, politicians, and the media between them.

Beyond these "useful" applications, though, and beyond the camphone's replacement of point and shoots for a quick facebook-upload fix -- are there new ideas that might be useful creatively? The rapid spread of programs like Hipstamatic and Vignette (or even CamScanner) provide a hint to one other direction, closer to usual photographic practice -- the collapse/reversal of the traditional photo workflow. Sure, you could already take a digital photo and then push it through Photoshop to alter the character of the color and contrast, emulating the look of a particular film stock. The patterns were still the same: capture, process, and (potentially) presentation.

The advent of processing tricks in the camera application collapse the first two steps into one. Just set the camera on "Velvia" and go find some fall foliage. Heck, put the processing and border-generating on "shuffle."

Or even shoot with a different camera and import the images into your phone, rather than spend $500 on Photoshop: which is just what is happening here -- cited by Leica, no less. Established commercial photographer Laura Rossignol shooting on a D-Lux 5 (aka Lumix LX5), and then (after doing selects in Lightroom) "I like to take the post processing one step further and I will email a finished version to myself so I can open it in the Picture Show iPhone app. It allows you to add interesting effects and frames."

(Addendum: Adobe's John Nack made a similar post to this one, wondering: why would you edit on a mobile device?, just a few days ago....)

I used to think that the transparency or negative was the canonical object. As Ansel Adams wrote about it, the negative was like a musical score, to be interpreted by a darkroom performance for each new print. Throw that idea away. Immediate darkroom-ish styling on the fly: whether you think they're insanely great or sentimentally godawful, they're as fundamental a part of the New Beast's nature as is the thickness of oil paint or a trumpet's high notes. Get used to it, this is still just an early wave.

Camputer: posted February 02, 2011 | Comments (0)

Flashy Foods

bjorke_jan_28_food.jpg
What I Ate: 28 Jan 2011

The flash diet doesn't require using flash, and it isn't really a diet per se, but an alternative to keeping a food diary -- photograph everything you eat. A side benefit is that it gives you an excuse to make at least a few photographs every day.

For entertainment value I've given myself a little rubric:
    • Celphone only: twee "FX" apps okay
    • "One bullet": c'mon, it's time to eat
    • Context: ingredients, locations, companions

Here is a great thing about celphone cameras: they're not Hasselblads. They're more like a real "pencil of nature," in that a pencil has incredible range -- you can use the same pencil to jot down the grocery list or to draw a masterwork. The Hasselblad is more like oil paints -- wonderful for what it does, but too grand and technically involved for casual muddling.

Flashy Foods: posted January 28, 2011 | Comments (1)

eReading

bjorke_pdn.jpg

The pictures show a recent bargain toy -- a 7-inch Pandigital Novel eReader (aka "PDN," or "WPDN" to specify the white variant), re-flashed to expose its Android underpinnings and updated to Android 2.1 "Eclair." I managed to pick this one up during a recent clearance at the nearby chain store Kohl's for a tidy $59 (apparently, a few folks even managed to get a $20-off deal -- an Android tablet for $40!). Even at the more-usual price of $199 the Novel is no iPad, but at that price you could by three or four of them (or at the discount, a dozen or more!) for the price of a single iPad (Addendum: Apparently they sold 440,000 PDN's in 2010). So here's a quick review of my experience thus far:

Pandigital are known as much for their digital picture frames as for their e-Readers, and the Novel kind of feels less like a slowed-down computer and more like a turbocharged picture frame. This suits its designated purpose: as a full-color eReader. Not a game machine, or a media center, though in fact it's quite capable of playing YouTube videos or being a music player if the mood should strike you to use it that way. But really the CPU wasn't designed for rapid-fire screen updates. It's a device built around a slower, simpler, long-attention-span sort of experience.

I've got several different devices on hand for comparison, including current iPhone, iPad, a couple of new and old Android phones, and various other small computers, MIDs, readers, and so forth. Given this environment, these are the things that stand out about the Novel:


Resistive Screen

A good resistive screen, but it works best with the back-of-the-fingernail strokes rather than just the finger tips used on capacitive screens like the Nexus One or iPhone. This can throw you when moving back and forth between different devices.

Slow

Mentioned this before, but: it's okay. What I don't try to do is cram every possible use case into this device -- I am not expecting tons of animated bells and whistles or HD television or anything of that sort from it. This is one device among several, so I can let it just focus on what it does well. For my uses (more later), it's fine.

No Bluetooth

No Camera

No Phone or 3G/4G Connection

No GPS

If I thought it was really important for me to record my face and location while typing my Engadget responses from the beach, I suppose these omissions would be truly upsetting. Happily, the simple wi-fi connection covers any of the locations where I'm actually likely to be using the PDN, and I can always turn on tethering from my phone if I'm desperate to update my apps while tooling along through traffic on US 101.

No Pentalobular Screws

Easy open, and easy tweak, too -- I doubled the internal memory by simply sliding open the case and swapping a hidden microSD card.

Long Battery Life

I've accidentally left mine on all day and it's still solid later on. It's a charge-daily device, though, unlike, say a Sony E-Ink reader (which can last for many days -- again, designed for intermittent bursts of activity, rather than continuous on-screen spinning and sparkling).

Standard SD Card Slot

The PDN can accept SD cards up to 32GB, though I haven't yet filled the free 4GB card I picked up at MicroCenter (There's also the hidden internal slot mentioned above, for microSD).

USB Port

The device has one, but it's really only useful for communication with other computers via ADB (Android Debug Bridge)

The Case

Not many choices compared to iPad, but I found this book-style folder at Bed Bath and Beyond, also on sale (The PDN is very much not the sort of device you'll find in usual computer stores -- everything has come from the Housewares Dept so far!).

Having the case makes a huge difference in the comfort level (one of the pix above shows it without the case for comparison). It's much easier to hold and I don't worry about banging-up the screen. This cover compares somewhat to the base cover for the smaller and lighter (but less capable & monochrome) Sony PRS-300 E-Ink reader.

Size

The PDN is smaller and thicker than an iPad (which makes it feel heavy and dense, even though overall it's a bit lighter). I prefer this size, it suits my hand better, without being too small to read at a comfortable distance while reclining on the sofa (unlike the Sony, which needs the font size cranked up at that distance).

So what's it good for?

Principally, it's good for its chartered design tasks: reading eBooks and light web browsing. For these, it's excellent. By stripping-away the default Pandigital/Barnes&Noble skin (re-flashing doesn't delete these features, but simply makes them companion apps within the Android Home screen), the full range of Android apps can be seen and tried. I've found that the combination of wi-fi and Google books, Aldiko, & Kindle apps, along with Google Reader and the Skyfire browser, makes it more capable that any other reader save high-end tablets like the iPad or Galaxy Tab.


eReading: posted January 24, 2011 | Comments (0)

Less Net

bjorke_FxCam_1277588305354.jpg
Key Largo, 2010

I hear that del.icio.us and perhaps even flickr may go away soon. The new joke around the valley is: "if the US really wanted to kill Wikileaks, they'd have Yahoo acquire it."

In the mean time, you might like this.

Less Net: posted December 17, 2010 | Comments (0)

JokerPaint

bjorke_JokerPaint043-1.jpg

Speaking of painting and computers, I've been working off and on on "JokerPaint," a little let's-beat-images-senseless sort of toy made using Processing and with a lot of the heavy pixel lifting being done via chains of filters that I've made using the GLSL framework in Andrés Colubri's GLGraphics library. I expect that at some point I'll post it to OpenProcessing.

The image above was generated from the photo in this recent post. Unlike most paint-like image processes, JokerPaint's imaging is continuous and real-time -- never static. It's constantly revising and touching-up and I just picked a frame at random for this still picture.

JokerPaint: posted October 12, 2010 | Comments (0)

New and Contemporary

P1000352.jpg

There is little that can lead you to treasure good photography than to look at a lot of bad photography, interspersed with an occasional gem. Which is exactly what I was doing a few weeks ago on (where else?) flickr, where I was editing group pools.

When I started the New Black and White group, back in flickr's early pre-yahoo fog, there were no editing or moderation tools, it was slow and painstaking to remove each and every pic I felt didn't belong. And at first that was fine, as there were very few pics submitted. Two or three a day. I stopped messing with it, left it fallow -- came back to find a thousand pictures.

Edited those down to a few dozen, watched it fill up quickly again. Eventually the flood was far more than I could manage as anything less than a full-time job, so I ignored it for months until there were more than 55,000 photos in the pool, most of them "flickr noise" of the cute kitten variety.

Rather than even try to deal with all that, I started another group, Contemporary Black and White, and invited a few select members. I thought: at least I don't need to edit them (and I don't -- they've been contributing good stuff). But then I started wondering about the old one.....

...could I realistically edit-down the 50,000+ photos to a little kernel, throwing away 90% or more of them? Only one way to find out....

So I did. It took time, it took special tools, it took regular attacks. I worked in blocks of from 1000 to 3000 photos. As time passed, it was quick enough to see how many really endlessly-repeating tropes there were, each trotted out over and again and usually accompanied by plenty of enthusiastic flickr badges and boosting comments (especially if the photo involved a pretty girl).

As soon as I started deleting, of course, the hate emails started coming in. What was interesting, if not surprising, was that some of the worst "offenders" -- by that I mean people whose "NB&W" photos were dull, often not even black and white, and massively spam-posted all over flickr -- were the most strident of the protesters. A handful of them diffidently pulled their photos (by the hundreds) from the pool. Thank you for saving me so much time! I thought, but also couldn't help but believe that they genuinely thought they were doling-out a punishment, as if I would somehow be harmed by no longer being able to view (and congratulate) their hundreds of bare-tree-on-the-plains snaps ("Don't bother replying back as I'm blocking you." too).

Photography, especially as practiced socially on the internet, is as vulnerable as any craft to the curious backwards-expectation principle: that is, for any skill, the very best people are constantly self-critical and pushing, always knowing that they could do better -- while the weakest practitioners are quite securely smug in their belief that they've got everything licked, under control, no need to reflect or review except to roll in adulations.

In internet-style photography, this is reinforced to a staggering degree, if only because so much of photography, as generally practiced, is about flattery -- just like most online social networks.

In the aforementioned 1951 article, Berenice Abbott places the blame for photography's emphasis on flattery on the proto-pictorialist photographer Henry Peach Robinson, the creator of the famous Victorian melodrama photo "Fading Away," and most especially on his book Pictorial Photography (A sample: "It is an old canon of art, that every scene worth painting must have something of the sublime, the beautiful, or the picturesque. By its nature, photography can make no pretensions to represent the first, but beauty can be represented by its means and picturesqueness has never had so perfect an interpreter."). Personally I don't think he can quite be credited for human vanity, but the gun's still a little smoky.

It doesn't really matter where it came from, but the belief is rampant that "good" photography equals "flattering" (this was exactly the criterion given to me a recent local photo class, a class which also extolled the works of Yousef Karsh as expressing the highest of all photographic virtues). It's a flattery that aims both ways: if your pic is flattering, then it is "good" which flatters the photographer.

The cycle starts there: the photos are flattering, and deserving therefore of flattery, and flattery leads to flattery leads to flickr badges and group invitations and should a tiny shred of actual daylight get into the party the guests will be in a ruinous uproar over its harsh direct brightness.

Not that the angry messages bothered me after the first thousand photos. I stopped informing, just went at it deleting. Didn't look at the names, didn't look at anything but the pics. And saw the same two dozen shots over, and over, and over...

I started to catalog them for a while: "...cute cats, adorable soft-toned children, footprints in the sand at the beach, misty time exposures of water, streets and railroads stretching off into the distance, casual snapshots, rusting cars, ruined castles, silhouetted trees, tele shots of resting seabirds, trees and unidentifiable silhouetted figures in fog, photos of backs of heads, (abandoned) factories, tourist destinations, parked bicycles, wide-angle upshots of skyscrapers, cathedral ceilings and windows, photos of camera collections, geometric airport ceilings, exterior stairways, wistful old statues, people looking bored while drinking coffee, interesting architectural details in closeup, sunlit spiderwebs..." it was actually a relief to leave in at least a few flattering model shots, if only because they weren't another empty craggy landscape.

For the sake of completeness (no, just to be random) I kept some in place, throwing away the OTHER photos just to keep runs of clichéd ones: say, thirty black trees on white (URL approximate), or twenty men with hats, or 30 shots of animals -- in order. Moderators can't rearrange the photos, I could only do this by eliminating the pix between how many runs of shots were just the same, same, same.

What none of the protesters did is what would have redeemed them. Despite repeated patient invitations in the face of their ad hominem vitriol, not one of them was willing to say why their photo deserved consideration, why it was special or worth anyone's time to view. Not one.

I can't help but feel the person who has benefited most from the exercise, though the obvious result is a much better pool of photos, is me -- seeing in a deep way, night after night for weeks, just how many "gorgeous!!" photos are really not worth a second glance and how many of them are in the same narrow predictable range that have been little-changed since the 1860's. Now the real challenge: remembering to avoid them myself while still making photos. At least photos I'd bother putting on the web.

Caveat eyeball.

New and Contemporary: posted May 31, 2008 | Comments (2)

Kinda Busy

IMG_0562.jpg

Okay, I suck. Not a single post since my return from China. Of course, I have tons of excuses, including the fact that I was back in the office for less than one hour before hustling off to the airport for yet another business trip; or that GDC came in the middle of this period; or that I was sick in bed for weeks; or that it's beta time and much software needs writing; or that I keep catching myself putting my web energy into (giant sucking sound....) Facebook; or that a large slice of the remaining time has been happily spent on family and wonderfulness. All true.

Kinda Busy: posted April 05, 2008 | Comments (0)

Error Condition

I've been listening to session recordings from the recent Singularity Summit. One of the speakers, Peter Norvig from Google (just a few blocks from the Mountain View coffee shop where I'm now typing this) addressed the speculative concern that Google's vast array of computer systems might spontaneously combust into some sort of consciousness, a la movies like The Forbin Project or Ghost in the Shell.

To my surprise, they have already spent some billable time on this, thinking about what to monitor: unexplained and unattributed traffic between nodes, across disks, and so forth. In fact they seem to be ready to shut it down at any time. Which implies that to Google, which is itself an entity that's already behaving according to its own logic as a rational economic being: intelligence, in a computer, is an error condition.

Error Condition: posted October 17, 2007 | Comments (1)

Older Entries:

31 May — New and Contemporary
5 April — Kinda Busy
17 October — Error Condition
19 August — Timeless
26 June — Schmaprd
24 June — Flickd Off
5 May — Portrait Paradox
20 March — Separated @ Birth?
26 February — Five
23 February — The 9 Billion Spams
8 February — Second Job
7 October — Random(ized) Fix
10 September — cc
22 August — Short, Attentive Spans
30 July — Pop Smarts
25 April — More on Presentations, GDC, PDF, PPT
12 April — Random Ugly Colors
28 March — Benevolent Inventor
27 March — Durned Robots
8 March — Quantified
31 January — Three Lines
20 January — JFX... WTF?
1 January — Pop
25 December — White Xmas 2005
7 December — Musical Solo
2 December — iFriend i
23 October — Calling Dr. Me
21 October — Hacked-Up Life
20 October — NV.IDIO.TS 2.0
6 October — What's On My Treo?
27 September — Millions
23 September — WebZine 2005
15 June — flickr, Blogs, and Cattle (Appended)
12 June — Roundup
26 January — Rambling Under the Radar
19 January — Rust
4 January — Holidays Enough
18 December — readWrite
30 September — Yosemite Villas
24 August — Back At Last
3 May — Worm Food
31 March — Continuous Growth
30 March — Broadcast News
21 January — Filing Systems: The Virus
1 January — Coughing Up Blood
24 September — The Big(ger) Picture
21 September — Caught Up!
16 September — Flash Uses This Site
24 August — Can't Leave Well Enough Alone
12 August — Cut the Cards
9 August — Shuffle
16 June — Scorecard
10 June — Link Rust
28 May — Shopping Channel
23 May — The Ultimate PhotoBlog
14 May — Overblogged
8 May — Thimk
21 April — MF'ing Wine and Cheese
5 April — Beautiful Day in the Neighborhood
29 March — Old Ho's Last Laugh