Elf Sternberg

Blister packs of the birth control pills were rotated 180 degrees, which reverses the weekly tablet distribution. This packaging error could cause women to take pills in the incorrect order and could lead to unintended pregnancy.

Recently, I had the pleasure of attending another of those Seattle Django meet-ups.  This one was a potpourri event, just people talking about what they knew and how they knew it.   I revealed that I’d written my first aggregator, and that seemed to be an impressive statement.  Apparently Django Aggregators (database conditionals that perform sub-selected summarizing or filtering events) is something of a black art, much like Wordpress Treewalkers were a black art I figured out in just a few hours.

Aggregators consist of two parts: The Definition and the Implementation.  Unfortunately, Django’s idea is that these are two different objects, bound together not by inheritance but by aggregation (both the definition and the implementation are assembled in a generic context, one providing access to the ORM and the other to the SQL).   The definition is used by the ORM to track the existence and name of the aggregate, and is then used to invoke the implemenation, which in turn creates the raw SQL that will be added to the SQL string ultimately sent to the server, and ultimately parsed by the ORM.

I needed to use aggregation because I wanted to say, “For any two points’ latitude and longitude, give me the great circle distance between them,” and then say, “For a point (X, Y) on a map, give me every other place in the database within n miles great circle distance.”

The latter was not possible with Django’s Queryset.extra() feature.    You can add a WHERE clause, but not a HAVING clause, and this definitely requires a HAVING clause when running on MySQL.  Using an Aggregator with a limit forces the ORM to realize it needs a HAVING clause.  Besides, it was a good excuse to learn the basics of Aggregation. Ultimately, I was able to do what the task required: find the distance between any two US Zip Code regions without making third-party requests.

I make absolutely no promises that this code is useful to anyone else.  The Aggregator is definitely not pretty: it’s virtually a raw SQL injector.  But it was fun.  Enjoy: Django-ZipDistance.

I love being able to combine one of my favorite design techniques with my latest infatuation.  It makes my hair tingle.

“Gamification,” as any buzzword-compliant high-priced consultant will tell you, is the process of adding game mechanics to a website in the desperate hope that trivial reward mechanisms– badges, stickers, and made-up titles straight out of your D&D years– will encourage your customers to come back and visit your website again.  At least, that’s what gamification appears to be on the surface.  That is a shallow and useless description.  Badges, “experience points” and useless labels will not encourage anyone to use your website.

“Story cards” are a specification tool used in Agile and eXtreme Programming development.  A story card (usually a hand-written 3×5 card) describes the “happy path” of a user doing something useful with your software: “The user logs in,” “the user searches for a movie,” “the user watches a movie,” “the user likes a movie,” (here, “likes” is emphasized to record that “liking” is an application-specific verb).  (I use the example of a movie-selling website because I work for a movie-selling company.)  Before a development sprint, the team sorts the cards by priority, makes estimates as to how long it would take to write code that would fulfill each story, and then begins bargaining to establish who has responsibilities for each story, along with the usual ensuring that one developer’s track will not confound another’s.   A sprint is made, and then the developers assess.  A “story” is a small, atomic action a user can take with your software.

Deep, rich websites typically have dozens, if not hundreds, of stories.   Often, many of those stories will go completely ignored by your users.   They may be obscure or difficult to find in your navigation.; alternatively, their value to your users may not be obvious.  As a website owner, you want users to try out every story you have; you never know which constellation of the many stories your website supports will be the one that hooks any individual user to engagement.   If you don’t encourage your user to try out everything, you’re wasting your website.

Gamification helps prevent this waste.  It’s is an incredibly easy concept to grasp; you could write a Django app or Rails plug-in to support it in a single afternoon.   The gamify application looks like this:  For any given story (usually, “gamification experts” will call this a “user action”), the customer accrues a certain amount of currency. (Do not be confused by this word.  It does not imply money, or “virtual currency”; it’s merely a tally of whatever it is your tracking the accrual of: experience points, votes, the number of times a user has reviewed a movie, the consistency with which a user has visited your website.)  At some point (maybe even immediately), your software awards something to the user.

This is where the whole “badges, levels, titles” thing gets confusing– and annoying.  Because rarely does the user want a badge, a level, or a title.  What the customer wants is enlightenment. What you want is engagement. What your software awards to the customer should not merely be a badge, a level, or a title– your software should award the customer the information and tools needed to engage more.

Gamification is not turning your website “into a game.”  That’s stupid.  If I want a game, I’ll fire up the Playstation.  Better yet, I’ll go find my kids and a deck of Uno cards.  Gamification is the mechanism by which your website’s user manual is turned into easily digestable and entertaining awards, leading users by the hand from one capability to the next.

So get out your story cards and arrange them, not in the order in which they could be accomplished by the developer, but an order in which you want a customer to encounter them.   Sometimes, this order will be linear, but more often not.  Lay the cards on the table, with “sign up” at the top, and then the “natural” things the user would do as a second line of cards underneath, then more complicated things.  Maybe down at the bottom you could put the “epic win” cards of your website: the most popular filmmaker, or most respected reviewer, or whatever.   Now, for each card, you have to come up with a parallel game card: write down what currency we track in this story, and when the user has completed the story, what award will lead the user to other cards.  The award is a fragment of your user manual: “Now that you’ve done X, you can also do Y!”  Now, as an added layer, write a tracker for each event, tally the user’s currency, and design the award.

Gamification is the process of enlightening your users about how they can grow as users of your website.  If you have mild engagement (that is, the customer didn’t flee at the first sight of your home page), you have an opportunity to educate the user about what to do next.  You can do that with a Big Page Of Instructions, or you can do it incrementally, gradually, and with a sense of achievement.   The mechanics are easy.  So damn trivially easy I don’t see why VCs are giving third-party “gamification tracking” companies like Big Door and Bunch Ball millions of dollars.  The real trick to gamification is at the other end, at your website: your active customers know what’s epic and important about your website.  Do some analytics, figure out what your active customers already know, and then figure out how to lead new users down those same pathways in a gentle and entertaining way.

Every day, I have little stabs of envy when I see the Photoshop tutorials for zarious cool things people do with Photoshop, and wonder why we can’t do that with GIMP. Well, we can. In that spirit, I’ve taken How to Create a Stunning Vista-Inspired Menu and reproduced it with the GIMP.  So I tried to reproduce the results.  The work is pretty close.

1. Create a new canvas, 600 x 335, background white. Add two new guides (Image -> Guides -> New Guide), one at 285px and one at 310px.

2. Create two new layers, 600×25 pixels. Label them “upper bar” and “lower bar” (if you can’t figure out which is which, well…), and put them into the 25-pixel high gaps created by the guides.

3. Fill the top bar with a vertical gradient, light on top, dark on the bottom, #787b7d to #35393d. Fill the bottom bar with a vertical gradient, light on top, dark on bottom, #0c0c0c to #000000. Set the bars to 90% opacity, normal over the white background.

4. Draw a new line across the very top of the top bar, color #484b4d. To do this, from the top bar, select a 2-pixel high area at the very top of the bar (from the guide to guide +2) stretching the entire width of the area. Copy, paste as floating selection, then click “new layer” in the new layer dialog to make this its own layer. Fill with color. Duplicate this line and put it right under the first line; fill with color #9fa2a4.

5. Create a new layer, 2 pixels wide and 19 pixels high. This will be the top half of a separator bar for your menu. Place it so the bottom of this tiny layer rests on the second guide. Fill it with a gradient, #4d6672 #676a6d top to bottom.

Create a similar layer, 2 pixels wide and 21 pixels high. This will be the top half of the separator. Place it right under the other half, and just fill it with #43474b. You can merge this layer down with the one above, and just have a “divider.”

At this point, it might be wise to delete the guides. I found they weren’t helpful, and often misplaced the divider.

Clone the divider (Layer Dialog, duplicate button on the bottom) and place it at regular intervals, to make the menu. Fill the space between with text, color #ffffff.

6. Pick a background. I used Forest on a Foggy Day (CC Licensed), but you can surely find your own favorites from around the net. Crop and scale it to the size of our demo, and place it as the background layer. (You may choose to delete, or merely cover, the original white background.)

7. Now for the glassy see-through “Vista” effect. Click on the background layer. With the select tool, select a rectangle about 200×160, starting at 105px down and (here’s the tricky part) -15 pixels left. Select “rounded corners”, 15px radius. Copy, then Paste As New Image.

With the new image, do a Gaussian Blur, 10px radius, then up the canvas size by 10 pixels (Image -> Canvas Size), and using the same dialog center the image on the new canvas. Then, with the image, add a drop shadow (Layer -> Layer Effects -> Drop Shadow, Opacity 60%, Angle 135°, Distance 2, Spread 5, Layer knocks out drop shadow: Yes, Merge layers: Yes). Crop the image to its essentians (Image -> Autocrop).

Copy the new image, then go back to the other image and paste it. If you did it right, you left the old selection active, and the new selection will drop into place. If not, then you should paste it as a new layer and position it by hand at 0×105 (The part to the left was cut off in transit to the new image, remember?).

8. Add text to your glassy portion, and user the Layer Drop Shadow as described above on the words. You may have to mess with it a bit to get it right, but the angle must match the angle of the glass, or it won’t look right.

The free template for this Photoshop to GIMP experiment is available: Vista Style.

I recently implemented a new subsite for IndieFlix using LessCss, the Leaner CSS metaframework. LessCss is a programming language that abstracts CSS out into a hierarchal language, where instead of writing:

#header { ... }
#header img { ... }

You write:

#header {
    ...
    img { ... }
}

Which, believe me, makes a whole lot more sense. Even better, if you’re fond of the clearfix technique, then you’ll see why I fell in love with LessCSS. I had a long sidebar object, and I realized that I needed to make it clearfix to deal with some float issues. I had .clearfix { ... } defined already in my CSS, and I had my “.social-networks” class that I wanted clearfixed. LessCSS let me write:

.social-networks {
    .clearfix;
    ...
}

And it all worked the way I expected it to, without my having to clutter up the HTML with layout hacks.

Yes, this means that there are duplicates in the CSS LessCSS actually spits out, but that shouldn’t matter, any more than you care about bitsequence duplication in a large C++ program’s object code. I tend to look down on metaframeworks; my experience with using Ruby to write Scriptaculous code, or GWT, is that unless I want to jump through strange hoops I’m limited to expressing in Javascript only what can be expressed by the writers of the Ruby or Java-based framework.  This problem is made worse by the promise of not having to learn Javascript to be expressive in it.  I call shenanigans.   The win for using any framework has to seriously overwhelm the loss of expressiveness. I don’t bemoan losing the expressiveness of assembly language when I write in Python (although if I did have a problem that needed assembly language, I’d write in ASM, build a C wrapper, and compile the thing into a Python module… because I know all three of those languages^*), and the only thing I lose using LessCSS is browser hackery, which I shouldn’t be doing anyway.

The containerization of cascades is such a clear win for me that I can’t imagine going back to doing CSS by hand. Well, I can, I just wouldn’t want to.

LessCSS does not carry your CSS comments from its source file to the CSS output, so it’s inappropriate if you need browser hacks that rely on poor comment parsers (I’m looking at you, Opera) or have alternative uses for comments in CSS (such as Wordpress’s style.css file does).

A friend of mine pointed me to the website of CB Richard Ellis, a real-estate investment and management house with a big footprint here in the Pacific Northwest.

Their hiring website is a horror. No, really, go look, unless you’re an epileptic. (Sadly, the effect only seems to be present for Firefox users. Opera, Chrome, and IE6 didn’t show the evil.) Then go read The Federal Electronic and Information Technology Accessibility Standards, better known as “Section 508″, and document how they’re out of compliance. (Hint: Section 1194.21k).

I fully believe it’s possible to design very attractive websites that don’t violate Sec508. CBRE has failed on a galactic scale with this abomination.

If you’re not a Firefox user, here’s the horror: Every input button has this added to its CSS: text-decoration:blink;.

Yes, that’s right. Every input button is set to “blink.” I don’t know what’s worse: that the people who wrote their site thought that was cute, or that Firefox honors it.

I’ve been trying to do a design thing every week.  I doodle a lot, and make lots of scratches, and I might show you a few of those, but as a web developer I have to keep my hand into the design side of things.  Recently, the magazine Photoshop User had an article on doing “Multi-colored Box Tiles”, an effect they consider “a classic.”  It turned out to be significantly more difficult with the Gimp, but I did finally manage it.

Take your subject in front of a neutral background.  Here, I’ve put my daughter, Kouryou-chan in front of  a medium blue background with a slight lighting gradient.  Open the Layers dialog (Windows -> Dockable Dialogs -> Layers, or CTRL-L).  Now create four new layers (Layer -> New Layer) above your subject.  Select the first new layer, set the pen to color #cccccc.  Create a couple of random boxes, making sure that one encapsulates the head completely (otherwise it’ll just look weird).   In the second layer, do the same thing, but using pen color #999999. It’s okay if the boxes overlap.  In the third, again but this time with color #666666, and in the fourth with color #333333.  You should by now have completely obscured your subject.

For each layer, set the Mode to Overlap (On the layer dialog, Mode -> Overlap), and play with the opacities, and you’ll get a nifty mosaic effect.

Now for the 3D effect, here’s the fun part.  Create a new image, transparent background, big enough to hold your subject.  Go back to your working image, pull up the selection editor (Select -> Selection Editor).  Pick one layer and click on the selection editor.  You should see that layer’s boxes highlited– but the selection is inverted, so Select -> Invert Selection.  Now copy the selection and what it contains (Edit -> Copy Visible).

Now go to your blank image and Edit -> Paste As -> As New Layer.    If you’ve got a complete copy of Gimp, you should have Layer Effects installed, so you can just Layer -> Layer Effects -> Drop Shadow, but if not, drop shadows are simple: Duplicate the layer, go to the new layer and fill it with a dark grey, blur the edges (Filters -> Blur -> Gaussian Blur), then position in behind your existing layer as you like.  Once your drop shadows are nice, merge down the existing collection of boxes on top of its drop shadow layer, so you get a few random boxes and their drop shadows.

Do this with all four layers.  Now that you’ve got all four layers on your new canvas, it’s time to play puzzle, moving the four layers to construct the whole image again.  You can set the upper layer to 50% opacity; that’ll help make sure you’ve merged the textures correctly.  It’s just a lot of fiddling; up the magnification to 400% or 800%, that’ll also help a lot.  Once you’re done, set all four layers to 100% opacity again.

For the new background, I just picked a nice grey with a gradient, the glow centered behind the subject’s heart.