Friday, August 18, 2017


Async/Await Will Make Your Code Simpler... the next step beyond netsting pyramids and promise chains. It kinda just lets your async code look like good old fashioned terrible sync code!

(I always thought that the pyramid of doom could be somewhat mitigated if you didn't put a lot of logic in the pyramid itself, but left it as a structure to a lot of named callbacks instead of anonymous functions, but still, these new techniques seem pretty good.)

Wednesday, August 9, 2017

simple countdown timer

My cousin posted
Thanks for the birthday wishes, folks! Tech dorky friends- if you want to give me a gift, what I really need right now is a countdown timer that displays in its own window, without a lot of other crap in the window. The ability to set the font is a huge plus. 
It is *amazing* how hard this is to find through casual Google searching.
Well, I'M a tech dorky friend! So I did an exercise in quick and dirty vanilla js and made . Its default colors are black on green (I think he's doing a green screen process and using it as an overlay) but you can change the RGB for the starting color, and then what to show when the counter hits zero, like this

At any time you can click on the time and reset it. (I also added a font= parameter but anything that's not a monospace will wiggle a bit as the centered text changes width during the countdown)

Nice to have the mojo to be able to say "I got you fam, gimme ten minutes" though it was more like half an hour. It's not lovely code. Some small tricks used include this quick and dirty vertical centering and use of "vw" CSS units so that the display was scaled to the screen (I had to set the block's height to 1em for the vertical centering to work)

Sunday, August 6, 2017

visual design and the broadway version of frozen

Here's the poster for the broadway version of Frozen... the NY Times has an article with 7 other candidates and their strengths and weaknesses.
Great seeing some of the process of evaluation at work. And I dig the "is it a lamp or two faces in silhouette" they snuck in the final design.

Saturday, July 29, 2017

RIP microsoft paint?

MS Paint to be phased out, though reports of its death are slightly exaggerated.

...I love that video ("Can we... can we thin out the line? Can we make the line thinner-" "-No" "...Ok")

Old school Paint did one thing better than almost all of its peers, and almost every program today even, in that the the mouse pointer was actually the brush you were about to paint with. Between that and not having to worry about anti-aliasing, it was pretty cool for pixel art. (And then there are some folks who use it as an actual art tool apparently in a pixel by pixel way)

That said there was a revamp of it that made me like it a bit less than the original.

Sunday, July 23, 2017

file syncing / folder watching over scp (not ftp)

Just some technical notes to my future self...

I wanted a file syncer, so that I could edit some webstuff locally on my Mac and see it immediately on refresh of the website I'm working on.

(I have a kind of clunky but useful textarea based online editor for my websites based on markitup, but since it submits as an old fashioned form POST rather than something clever with AJAX, I'm always losing my place, plus I haven't researched how to give it more of the IDE-ish features like line numbering, autotabbing and parens balancing)

I wasn't having much luck with Yummy's "FTP Watcher", as far as I could tell it can only be set to poll as low as one second, which is a bit too slow. (My gold standard right now is IntelliJ - its cleverness is to notice that it has lost focus, and THEN run the file copy. This works much better and transparently than I would have expected for stuff that doesn't have a build cycle.)

The best bet I found was sshync -

(In turn I had to follow its instructions to install and run ssh-copy-id - but then it was asking me for my passphrase not remote password each time.  So I found some instructions on running ssh-add and now it does what I wanted.

The only other note is I misguessed how to specify the source and destination folders, I had thought it would be like
sshync ~/dev/website-folder/ username@server:/site-parent-folder/website-folder/
but instead it was
sshync ~/dev/website-folder/ username@server:/site-parent-folder/
i.e. the destination is kind of like the parent instead of the peer. And I wanted to avoid worrying about wildcards.

to be more specific, after using this setup on one system for a while, and then doing it on a different system...

I had to get and run ssh-copy-id, using
brew install ssh-copy-idand follow the instructions at - I already had by key generated, so I used ssh-copy-id on the public key in the folder.

Then my notes say I tend to have to run
exec ssh-agent bash
each time before starting sshync , otherwise it keeps asking me for my password

Tuesday, July 18, 2017

thinking about xml vs json

Seeing an XML config file at work got me to thinking why JSON feels so much better than XML for so many people. I find it a fascinating topic, maybe because it seems like the industry movement towards more JSON is validating my personal biases...  One friend of my mine paraphrases it "well, you see, XML has way too many sharp pointy bracket bits, it's hard on the eyes".

I guess it's weird that XML lets you enforce discipline about what CAN be said (via validating schemas) but has less to say about how a coder should what they'd probably want to say...  namely "I am likely to want to serialize a lot of lists and key/value pairs".

It reminds me of when I first learned Perl, coming from a background of C (with a bit of BASIC and Logo growing up) - the concept of maps, regular expressions, strings as "first class" participants (vs C's  not "arrays of characters"), duck-typing, and not having to micromanage memory use were revelations. But especially maps (key-value pairs) - a hugely empowering concept.... trivially simple yet enormously powerful, which is about the definition of elegant. And that elegance is something that JSON leverages so well.

Googling a bit I found Stop Comparing JSON and XML which, honestly, sounds a little defensive to me. For some engineers, XML's precision and control just feels better, but it sounds like some fans feel they're on the wrong side of the trendlines, so it opens up like this:
Stop it! These things are not comparable. It's similar to comparing a bicycle and an AMG S65. Seriously, which one is better? They both can take you from home to the office, right? In some cases, a bicycle will do it better. 
The not so subtle implication being that XML is more like the $220K Mercedes and JSON the bike.

I'm not sure I agree that "JSON is a data format, XML is a language". The article points out some standard tools that XML comes with: XPath processors for pulling things out of a chunk of data, XML Schemas for validating (I guess that one out over DTD?),  XSL for transforming (and OH what a pain that can be, trying to use a pure-functional "I can't even use a conditional to set the initial value of a variable, because once I'm out of scope the conditional set up the variable went away")... I don't see those things as being intrinsic to the format, however.

Moving on - take a look at the example that article gave, JSON vs XML
  "id": 123,
  "title": "Object Thinking",
  "author": "David West",
  "published": {
    "by": "Microsoft Press",
    "year": 2004


<?xml version="1.0"?>

<book id="123">
  <title>Object Thinking</title>
  <author>David West</author>
    <by>Microsoft Press</by>

(The article says that's 140 vs 167 characters, but I put the latter at 189) ... anyway, back to my point that XML is a bit worse at suggesting a "best practice" of how something should encoded - because you're so often not sure if something "should" be an attribute or a child element. The article puts id as "metadata", but that seems kind of an arbitrary distinction to me. (Trying to think of what the rule of thumb takeaway is - data is the information that would have to exist in a different storage system, but metadata is sort of specific to that system?) I've certainly seen other folks who would have done something like
  <published year="2004">
    <publisher>Microsoft Press</publisher>

and so coming into a place, trying to follow the previous developers' footsteps- the decision can be arbitrary, and thus hard to predict.

I remember thinking it weird how hard it was to write a Schema (or maybe a DTD?) that let the child elements be in any order; the tools I was using in the mid-aughts made it much simpler to insist on, say, "first title, THEN author, THEN published", rather then saying "there needs to be a title, author, and published but they can be in any order". It seemed odd to me, because the idea of maps were so in my head then, while this kind of stricter document definition felt weirdly like an obfuscated round of "fill in the blank".

Conversely, JSON is actually stricter - in the sense of it STRONGLY suggesting that keys of a map should be unique. It guides you to thinking in terms of maps and ordered lists (it's kind of interesting that there's not a strong concept of an unordered set in it, but obviously the interpreting system is free to ignore or embrace the order given.)

Still, I think a lot of the vehemence come from engineer's gut feelings, rather than any small set of arguments. Probably some of the same people who dislike duck-typing are more likely to prefer XML's style of strictness, and the ability to verify the semantic completeness of a document before having code interact with it. (Also worth checking out is stuff like my friend Leonard Richardson's O'Reilly book "RESTful Web APIs"; I suspect he feels the rise of JSON is a bit of a step backwards, in terms of making information available to all, and understandable by automated systems, and so he's interested in best of both world approaches that have the strengths of a JSON foundation while adding in some of the missing meta- aspects that tell you what you're actually looking at.)

You know I see a lot of the points I make here are often well covered in the comments of that Stop Comparing JSON and XML article. It's nice to have allies!

Wednesday, July 12, 2017

the robotic ruler of the river of no return

River Raid was one of the finest games produced for the Atari 2600. One of the first vertically scrolling shooters, this game was remarkably well designed. While the enemies (copters and boats and later small jets) could only threaten the player with menacing kamikaze moves upon approach, the constantly diminishing fuel supply would lead the player to recklessly hightail it down the "River of No Return" to pass over replenishing fuel depots, a tension-provoking detail most other games of the era couldn't match. And I am going to introduce you to the games indisputable conqueror.

First, a note about the game's author, Carol Shaw- the first professional female video game designer. This game is her singular masterpiece (I don't think many people really look back that fondly on "3-D Tic Tac Toe", and the 1-on-1 Pong-like action of her "Polo" tie-in game never saw the light of day...) This interview has her talking about her experience. But her peers thought she was great, designer Mike Albaugh said
I would have to include Carol Shaw, who was simply the best programmer of the 6502 and probably one of the best programmers particular, [she] did the [2600] kernels, the tricky bit that actually gets the picture on the screen for a number of games that she didn't fully do the games for. She was the go-to gal for that sort of stuff.
As a guy who wrote an original Atari 2600 from scratch in assembly , I know how tricky that kernel stuff is... (and true confession, my game ended up having its kernel tweaked by genius Paul Slocum anyway.)

One of the cleverest bits of River Raid is its use of pseudorandom number generators to generate section after section of the river - this let the game pack in a consistent, huge game playing field even though the whole cartridge was only 4K bytes of ROM. The levels alternated between straight sections and split sections and went on practically forever.

Over a decade ago I got to wondering about how far the river went, and got so far as having B. Watson generate this image of the first 4 sections, guaranteed to bring a bit of nostalgia to the 80's gamer heart:
(Of course the funny thing about posting this kind of image is that River Raid scrolls from the bottom, but webpages scroll from the top...) That project to map out more of the river never went anywhere, but this AtariAge thread gets revived from time to time... and I would say, the indisputable Ruler of the River of No Return (and one of the participants in that thread) is one "Lord Tom"

For starters, here's Lord Tom's map of the first 600 river sections...

And how does Lord Tom know what the first 600 sections look like? I contacted him at AtariAge (such a damn fine resource!) and he said
To make the map, I wrote a Lua script for use in the BizHawk emulator that essentially cheated through the game with the plane offscreen somewhere, taking screen-shots of each enemy/terrain slot along the way (32 per map section). I assembled these into the big map with a simple Java app.
But that wasn't enough for Lord Tom. He's a member of the "TAS Community" - Tool Assisted Speedruns, folks who learn how to let machines help them drive through to the ending of games faster than any human ever could. They don't cheat - the actual code of the game is sacrosanct - but by abusing every input available to them they're like the crew of the Nebuchadnezzar getting ready to dive back into the Matrix, mastering the code behind the world that lets, say, Mario move like a crazy drug-fueld Ninja, or in Lord Tom's case, to build a frickin' robot to play the game better than any human (or 'bot) in history ever has. Specifically, to get the maximum possible score of 1,000,000 (or in Activision speak, !!!!!!) That looks like this:

To give that robot a script, he built a replica of River Raid in Java, one that could reproduce all the twists and turns and boats and helicopters and fuel tanks that that little cartridge's algorithm could churn out with incredible precision, and then used it to power something like the "Many Worlds Interpretation" of Quantum Physics, plotting out a millions of possible futures for each frame, then pruning and working the best 150,000 or so, until he got a damn near optimal path. (And to give you an idea of this robot's skill about this, not only does this well-nigh perfect path take an hour twenty to get to that million points, Activision would send you a patch designating you a "River Raider" if you sent in a photograph showing that you got 15,000!)

So, in his own words:
Yes, due to the technique I used for solving the game, I had to write a Java simulator, which I think ended up being something like 10,000 times faster than trying to do the bot computations through the emulator. And I only simulated the game's logic/state; I didn't actually output a display or sound, though in the grand scheme of things that would have been easy enough to do.

The solving algorithm focused heavily on fuel and (of course) score. Since fuel is consumed at the same rate regardless of speed, it's best to almost always go full throttle. There are a few terrain exceptions, and the other main exceptions are slow-downs to get extra fuel or manipulate which enemies move/don't move to make them easier to kill.

For fuel, I basically looked at the map and plotted out how far I'd get for each life (once fuel becomes rare, it's better score-wise to die for a full tank than to keep slowing down to milk depots). Then for various points along the route (e.g. section 5, 10th enemy) I'd specify a minimum fuel to have -- any solution paths with less fuel would be killed.

The only non-survivable states in the game relate to fuel, and then very limited times when e.g. you can't slow down fast enough to clear terrain, or avoid an enemy that's about to hit you.

Other than that, it was pure heuristic; 30 times a second it would simulate paths with each possible input, eliminate duplicates and deaths, and periodically score them and keep the best several thousand. To handle islands, I stipulated that a certain # of paths would always be kept alive on each side of the screen. As I recall, the algorithm would score and cull several times each section; it never really "looked ahead" at all, just periodically compared outcomes for 500,000 or so input possibilities and kept the best ones.

I think all in all, I calculate the bot simulated over 2 trillion game states to complete the game. 
You can read even more details at his TASVideos Submission Page, but I think you get the idea here.

Amazing. I've done Atari coding and even some Java-based "tool assistants" (to get photorealistic images into the long-lost site pixeltime, or to remove the scrolling credits from still backdrops) but nothing that comes ANYWHERE NEAR what Lord Tom (or Carol Shaw, for that matter) has done.

the end of the genius bar

The Cambridgeside Galleria is a surprisingly durable shopping mall undergoing a makeover. (I assume to make it look less 90s brassy bling and more Star Trek/Apple Store-ish) Their Apple Store just reopened after a long time closed for renovations and expansion. Now it looks like this:

There's more tables, better use of the sidewalls for product display but, most strikingly: no Genius Bar at the back. They do have a bunch of these little cube stools:

and you can see one of the Genius-y worktables in the back, the worktables are where they actually do their magic. Reports are some of the idea is to remove that old counter as a barrier, and literally get the Genius on the same side as the customer.

It's an interesting idea, and maybe a gamble to get rid of that visible base of support. I've long thought that the Genius Bar was the secret sauce, the "unfair advantage" Apple sported its rivals Android and Windows. Microsoft has most obviously started to follow Apple's lead with its own stores, but since it doesn't control the hardware as much as Apple does, I wonder if it feels like more of a mixed bag. And for Android? The people at the various carrier's stores never seem like they're going to be quite as focused or with it as the Apple folk, though I'm sure some are quite good.

Monday, July 10, 2017

what's new with you?

At work I got to thinking about that if there's an international icon for "NEW" that doesn't use icons (new as opposed to used, obviously a plus sign is pretty common for "add another")

It reminded me of an old videogame, Captain Blood, where you had to travel a galaxy communicating with aliens, but you could only pick from a bank of 28 pictograph icons...
Interesting concept...

Thursday, July 6, 2017

porchfest poster cheats and tweaks

So this marks the 4th year of be doing the web (and print) work for the Jamaica Plain Porchfest.

Like I said last year, I'm not a print designer but I play one on the web - last year's innovation was splitting the collection of porches north and south and putting a map and performance list on either side of the print map, rather than having a big map on one side and making people flip flip flip to see who was playing where in the block schedule.

In general, this year's print map looks fairly similar to last's...

This year my energy was directed into making most of the website reusable on a year-after-year basis. Prior to this, I would start with a more or less blank slate and then copy in old files as needed. Also I tended to have all the data lumped in the same set of folders as the content. I knew I could do better.

The core of it is still good, reliable, rugged JSON files in directories, but this year I moved them (and the band photos) to a separate root folder from my main content, and so now every script looks at  a hidden ".dbroot" folder containing the path to that year's data.

I address one big usability issue: in prior years I had the webpage and poster number porches on a strict North to South basis. This had a big flaw: it was hard to follow when  sometimes house "n" would be way on the east side but house "n+1" would be on the west, and then house "n+2" would be back to the west. I wanted a more human-friendly way of clustering things, so a group of houses consecutively numbered would all be near each other. I wasn't feeling smart enough to teach a computer to do all that clustering work so I hacked an existing map display page so I could click each house in order, and that would assign it its number. (This will also make it easier to maintain ordering if a porch is added or removed late; the people running the event consider it important to keep the porch numbering on the print maps consistent with whatever is online, which wouldn't happen if the computer was reassigning numbers based on latitude every time the page loaded.)

Another issue is that sometimes one address is supporting multiple events, or maybe it is hosting musical performance (marked by an orange house icon) but is also one of the event sponsors (marked by a yellow circle with a letter). Previously I then made a new type of icon (yellow house) but this year I realized it was better to just adjust icons' positions, so they were abutting on the map rather tha overlapping. It's not like they icons need to be precise, we're not targeting drone strikes, just making sure people get to the right side of the street in the right area until they can hear and follow the music themselves.

I'd "cheated" latitude and longitude years prior for similar reasons, but it was a serious pain in the butt...  a single degree of latitude change is about 70 miles, so to make "one icon over" adjustments on a map you have to deal with thousandths of a degree, and it was terribly fiddly. Also it's hard to translate from x and y (i.e. what I'm looking at on screen) into Lat/Long, especially since North America is in the negative Longitudes, and I the developer would have to remember which way was positive and which was negative. BLEH!

So in my JSON database, I added a "xycheat" field as an array of two numbers which was then read by code like this
   var cheat = location.xycheat;
     location.long += cheat[0] / 2500; -= cheat[1] / 3500;

Those values meant xycheat = [1,.5]; would move a porch roughly one icon worth east, and half an icon's worth south. Much easier than the "tweak a value in the thousandth of decimal, reload, check where it landed, repeat".

Finally, I almost got bitten at the last minute by bitrot. Lacking print tools or the know how to use them, I tend to assemble the parts of the print map on a big webpage - map and block schedule, and then finesse the assemblage by hand. To get it at closer to 300 dpi for print vs the 72 dpi web standards are based on, I put a "zoom:3" on the body, then (as I described earlier) use the headless browser Phantomjs to make an oversized screenshot.

This year - and of course this is all at the last minute when I assume I'm on the finish line... phantom didn't work. I was getting

Assertion failed: (_consumed <= scratch_size), function _hb_coretext_shape, file src/, line 764.

No idea. Luckily downloading the latest version fixed it (I found it a little easier to get the latest via their download page rather than homebrew where I loaded it before.)

Once that was settled I was still getting this error:
ReferenceError: Can't find variable: google

Not sure if it was tied into me using https on all my sites now or what, but googling I found 
./phantomjs  --ignore-ssl-errors=true  phantom_view.js 
which seemed to fix it. Phew! I'm not sure what my plan B would have been - maybe just coping with screen resolution print - highly suboptimal.

The final site is looking a little long in the tooth (especially from the inside... panicked coding every 4 years doesn't always lead to the best engineering)  despite the still pretty decent mobile support. So next year maybe I'll focus on clean up, or even try (maybe) making some kind of app, though android support is going to be a pain for this Apple fanboy. 

Friday, June 30, 2017

feel over appearance

As you've probably been made aware, it's the 10th Anniversary of the iPhone going on sale.

I was a first week early adopter (I accidentally drowned my Palm device and cellphone kayaking on July 4th, and the timing seemed fortuitous.)

Slashdot's Coverage (speaking of things that may also seem like history) linked to John "Daring Fireball" Gruber's iPhone First Impressions.

As he mentions, probably the biggest lack in the first device (other than, arguably, the app store) was copy and paste. That was an interesting choice to punt on, to let it wait until a future generation of the product could get it right...

One of the biggest "WOW" factors though was the web browser- especially the scrolling which he describes as:
Real-time dragging is such a priority that if the iPhone can’t keep up and render what you’re dragging in real-time, it won’t even try, and you get a checkerboard pattern reminiscent of a transparent Photoshop layer until it catches up (typically, an instant later). I.e. iPhone prioritizes drag animation over the rendering of the contents; feel over appearance.
As the hardware has improved I haven't seen that checkerboard in a while, but yeah- it felt SO GOOD, the perfect compliment to how the capacitive touch screen was allowing much more vibrant finger interaction than the stylus-or-fingernail screens that came before it.

Thursday, June 29, 2017

parkie redux

There's some old line about "I'd rather spend hours writing a program to figure something out than ten minutes with a pen and paper"...

Anyway, a while ago I wrote about Parkie, a micro-webpage I made to calculate which side of the street I should park on.

Recently I updated it to cope with my new parking circumstance, with rules like "first and third Wednesday park on even side, second and fourth Thursday park on odd side".  (This is more complex than the rules in Boston which at least always did it on the same day of the week) as well as making it sort of customizable... if one person writes me that it would be useful for them, I'd make it so its config block

    restricts: [
        {dayOfWeek: 3, nth: 1, avoid: 'odd/our side', gofor: 'even/other side'},
        {dayOfWeek: 3, nth: 3, avoid: 'odd/our side', gofor: 'even/other side'},
        {dayOfWeek: 4, nth: 2, avoid: 'even/other side', gofor: 'odd/our side'},
        {dayOfWeek: 4, nth: 4, avoid: 'even/other side', gofor: 'odd/our side'}
was readable from the URL, as URLencoded JSON.  Until then I have to assume this will only be useful to me and my girlfriend so I won't bother.

The code is, admittedly, kind of nightmare of side effects and general poorly structured bullcrap. (Which is too bad, date calculations are kind of an awesome candidate for unit testing). The general question "which closest upcoming date (inclusive of today) matches a '1st/3rd Wed, 2nd/4th Thu' kind of rule?" is tricky! My approach was to take all the rules as outlined in "restricts", calculate which day of the month each represented for the current month, then walk forward from today to see which one matched first. (And being willing to jump to next month if need be...critical for the end of a month that ends on a Tuesday, say...)

So it's Vanilla.js. Besides using console.write(), kind of a forgotten way of constructing a page, The CSS used vviewport percentage widths for the character size, which got me nice, screen-filling (if a bit brutalist) results without fiddling with viewport stuff. (In this case the unit is 1/100 of the screenwidth, so 6 or 7vw would get a nice number of characters in per line.)

Wednesday, June 28, 2017

against the fixed position

Daring Fireballs has had some anti-"dickbar" ranting lately (social media "share me share me!" widgets, often fixed in place -- this one on best practices for sharing (tl:dr; emphasize sharing via the site the person CAME from) has a side note
You read that right: adding a locked toolbar to the small-screen experience shortened sessions and reduced page views. The very small increase in share-button usage was far outweighed by reduced site usage. (I can't explain why this is the case, but I've seen it elsewhere with locked toolbars, too. They chase small-screen users away.)
That jives with some "surprising" A/B results we found at my job, where we though permanent "Contact" buttons at the bottom would get more hits- some of our competitors were using them, so they might be a good idea, but apparently irritation from users at the sacrifice in free screen real estate overcomes the "hey look at this!" factor.

Wednesday, June 21, 2017

google maps style customizer is kind of a "style roller" for Google Maps. I like the "retro" style especially, and it's the easiest way to, say, hide business names or what not if you don't want them cluttering the view you're making.

on mac modifier keys

"Hot Take" time!

Ok, not that hot.

With all its dandy ports I still think my Macbook Air is gonna remain my main personal machine for a while, but I was still daydreaming over at, and I noticed both the "Adorable" Macbook and the new Macbook Pro have much better iconography for the modifier keys- displaying the ^ over control and the weird broken equals sign for option, so that both of those join command key and its little clover in actually showing up on the physical keyboard the same way they do for the top of the screen menus.

 A definite improvement! But it raises the question, why are Apple's modifiers keys such a hot mess? Don't get me wrong, it's a pleasure to be back in a shell and have cmd-c copy and ctrl-c break, but really, fn, control, option, command (not to mention shift) - so often arbitrarily thrown together in strange combinations by various programs for random shortcuts.

Windows had a much more coherent strategy (despite its weird legacy of "alt-f4", and various exceptions in various software titles) - there's only three keys down there, really: the hubristic "windows" key, control and alt. And control keys usually are tied into commands meaning "do this now" and the alt key was tied into menu pulldown shortcuts.

I suppose this disdain for keyboard menu operations flows from the Mac history of relying on the mouse; remember, the first Mac lacked even arrow keys, and there's never been the same menu pulldowns via keyboard that Windows has enjoyed.  But it's weird they went from such minimalism to such a multi-key mess.

Tuesday, June 20, 2017

github note - ignore whitespace

When doing a Pull Request via github you can add a ?w=1 to the end of a url e.g.  https://YOURCOMPANYSITE/BRANCH/pull/1785/files?w=1

Monday, June 19, 2017

tribute to two meta-artists

I've always liked software that let the user make something - from Bill Budge's Pinball Construction Set to the make-a-game fun without programming Klik N' Play, there have been some great examples of that over the years.

I want to write briefly about two creators, Toshio Iwai and Takeo Igarashi both of who made original UIs letting users exercise their creativity. Each creator's work was then used in separate commercial products in the 90s and 00s, products that deserve more recognition than they get.

Toshio Iwai is a multimedia artist. He may be best known for Electroplankton, a fairly early but very limited release for the Nintendo DS- his name appears on the packaging for it, an unusual-for-Nintendo recognition of singular artistic creation.

Electroplankton is not quite a game, not quite an instrument... it consists of ten different interfaces for making music and sounds of various types...

This was not Iwai's first multi-part collaboration with Nintendo - that would be the 4-part Sound Fantasy. One of those parts was based on his earlier work Musical Insects. This concept, 4 musical bugs, each one playing a different instrument that sounded at various pitches as the bug waddled over different colored tiles laid out on a blank canvas, got parlayed by Maxis into a nifty package called SimTunes. I guess this trailer gives you the overview about as well as anything:

This program was a terrific and playful mini-sequencer and paint program. Kids and Adults could focus on the sound, the look, or both. Just out of college, I remember setting it up with versions of Groove is in the Heart and "Alphabetter", a replacement for the alphabet song that I hope catches on but I'm sure never will. I appreciated that it had different palettes - for example, limiting the painted notes to a specific scale or modality, such as my favorite "Blues Scale" and an aspiring kid or adult could easily apply music theory they had or learn something new.

More recently Iwai collaborated with Yamaha to make the Tenori-On, a sequencer grid of lights. (I was almost ashamed at using a ThinkGeek knock off called the Bliptronic 5000, 'til I realized it was about 1/10 the price... and about 1/10 the functionality, but still.) I also found this overview of his art installations.

Takeo Igarashi seems to be more of a computer scientist than an artist, but his UI implementations are at least as impressive.  His academic homepage is of the ancient variety, and sadly most of his demos are a serious pain to get running in this day and age where Java on the desktop is all but forgotten. Still, his Smooth Teddy interface is remarkable; the user draws basic 2D shapes that then get rendered into 3D shapes.

The most straight forward descendent of the "Smooth Teddy" family is MagicalSketch 3D for iOS, a somewhat pricey (by app standards) tool, but one that promises to be an easy path to modeling for 3D print. (I haven't played much with Microsoft's "Paint 3D" but I think they would be well-served licensing out the core model.)

The finest rendition of this concept, however, is Magic Pengel: The Quest for Color for the Playstation 2. I feel it's a shame it didn't go by a more direct translation of its Japanese name, "Doodle Kingdom", because this project (a joint production with some collaboration from Studio Ghibli (of "My Neighbor Tortoro" and "Spirited Away" fame) deserves more attention than it ever got. (A "Pengel" is a Pen-Angel, I think a little helper sprite in the game. I'm not sure to whom they were trying to market with a name like that.)

Because not only can you doodle in 3D - your creations come to surprisingly charming life. Here's a Let's Play of it:

The editor works by letting you indicate what you're drawing (body, arm, wing, etc) - this knowledge is then incorporated to inform various animations (Walk, Tackle, Jump, Dance, etc) and the effect can be stunning- here's what a talented artist can make with its editor:

It's so delightful to sketch something out and then have it frolic around the "practice field".

Unfortunately, the game is horribly marred by ... well, too much game-ness. In some ways the body you construct doesn't do much to determine how your creation interacts with its virtual physical universe, it's just raw numeric material for a probability based monster battler ala Pokemon, with Rock-Paper-Scissors type strengths and weaknesses. Also, they limit the amount of "ink" you have to draw lines with, and then make the game about fighting monsters so you can get more ink to make your own creations that much more powerful, rather than creative.

There was a semi-sequel for the Game Cube called Amazing Island and one for the PS2 called Graffiti Kingdom. I remember getting absolutely stuck early on in Amazing Island and some utterly crap minigame, and if memory serves, Graffiti Kingdom tried to codify its editor too much, and lost much of the organic charm of the original.

Finally, I'd like to make one honorable mention for a game with a kind of brilliant editor built-in (though I don't believe there's a singular artistic vision behind it) - Banjo-Kazooie: Nuts + Bolts:

 This is by far the best "game" of everything I've talked about here - it starts with a gorgeous Mario 64-esque hub (looking like someone said "what if we ran all those pretty colors of the N64 into the kind of engine we can make today?)  with all these delightful themed subworlds, but each as if you can see the gears behind the walls work. Each subworld has multiple challenges that you build various vehicles to beat: cars, of course, but also boats and planes and flying balloons and sumo-karts etc. At first I thought all the creations were ugly and orthogonal-looking (VERY reminiscent of the old Capsela toys) but then the delight of making a car where the design really matters in a cartoon-physics kind of way takes over (and you can put on enough bolt-y bits to improve the look quite a lot.) And as you get more parts (there's that game-ness) you can go back and try for higher "medals", but the challenge level is generally well done, and the level of backtracking needed is negligible.

(And a small group of super-hard-core fans have really stretched the editor system to the limit, making these absurdly heavy jet-powered walking mechs in a game that was never meant to have any such thing...a joy to behold.)

Anyway, I love stuff like this, making a easy enough for a beginner but rich and engrossing enough to reward continued play (rather than a quick doodle and a "meh") is a tremendous feat. (Though I did once get a few people digging my own online Jack-O-Lantern maker) Both of these people and their works (and Banjo-Kazooie) deserve much admiration.

Tuesday, June 13, 2017

quick css throb effect with vanilla js

For a long time, I've been meaning to get back to the 30 Day Vanilla JS Coding Challenge. I learned a lot from the very first lesson even, which is a nifty little drum kit. Here's a kind of "throb" effect I picked up and modified from it, uss CSS transitions and transforms for scale: click the blue div to see it work...


Here's the code for that, most relevant bits bolded:
  #css_throb_button {
    padding:4px 20px;
    transition: all .1s ease;
  .throbbed {
    transform: scale(2);
<div id="css_throb_button" onclick="css_throb_test(event);">0</div>
  var css_throb_count = 0;
  function css_throb_test(e){
    var panel =;
    panel.innerHTML = ++css_throb_count;
  function css_throb_removethrob(e){
    if (e.propertyName !== 'transform') return;'throbbed');

  document.getElementById("css_throb_button").addEventListener('transitionend', css_throb_removethrob);  

So a couple notes:

  • there are a few ways of removing the class. You could also use setTimeout, but this is nice because it keeps you from having to confirm the timing (as set in the transition) in two places.
  • the scale transform doesn't work on inline elements - so when I started with a "span", I couldn't see the transform effect until I changed it to display:inline-block...
  • also to keep things simple I'm not doing anything special for making sure the document is ready, so I had to put the script tag after the div element in the page so the getElementById() would work
I like how it zooms in place. There are ways of tweaking the timing, size, and easing, but this seems like an easy way of getting attention to the element.

Friday, June 2, 2017

Thursday, June 1, 2017


A sysadmin-y friend of mine has helped me use Lets Encrypt to get my https mojo working on my virtual server.

One problem is that a page loaded on https referencing external scripts over http break.

One flexible fix for that is, with most of these URLs, the protocol can be left out, so instead of changing http:// to https:// I sometimes change it to // -- what we used to call wak-wak a few jobs alone. In effect your saying "load this with whatever protocol this is loaded". I guess it will break if the underlying site hasn't gotten around to offering https though...


from Pierre Buttin's Brutalist UI Redesigns:

I kind of love some of these. It reminds me of the same problem I have quantifying what exactly makes an old website look old.

Friday, May 26, 2017

css children

Nothing too rocket-sciency, but I decided to try messing with CSS for showing and hiding things based on if 1, 2, or 3 buttons are showing, rather than using scripting logic: the first one shows something different if the button is the only one, the second set is a way of saying "I have exactly two things here" (in this case, if there's only a single button it's not the one I'm worried about"

 .fixedButtonBar .fixedButton:last-child{
   border-right: none;

 .fixedButtonBar .fixedButton:only-child .multipleButtonCaption {
   display: none;

 .fixedButtonBar .fixedButton:not(:only-child) .singleButtonCaption {
   display: none;

 .hideWhenCramped {
   display:none; }

 /* when exactly two items */ 
.fixedButtonBar .fixedButton:nth-child(1):nth-last-child(2) .hideWhenCramped,
 .fixedButtonBar .fixedButton:nth-child(2):nth-last-child(1) .hideWhenCramped {

  /* when exactly two items */
.fixedButtonBar .fixedButton:nth-child(1):nth-last-child(2) .showWhenCramped,
.fixedButtonBar .fixedButton:nth-child(2):nth-last-child(1) .showWhenCramped {

I guess it might be a little too clever-clever. I liked it over the scripting approach in part because I would have had to repeat calculations to count which buttons were showing, but I'm not sure this css states its intentions very clearly

Thursday, May 25, 2017

sending via gmail smtp

Just some quick notes, nothing canonical:

I was trying to use PHP's built in mail, and my server's sendmail, and stuff to my work address arrives but stuff to gmail just got devoured; I guess they don't trust my server even enough to stamp stuff Spam!

I install Pear Mail and the NET_smtp thingy, and then I had Allow Less Secure Apps - and I think maybe Display Unlock Captcha.

Not crazy about having my private password so close to my source code, tbh.

Monday, May 22, 2017 of...

Helped my GF make up a version of Jeopardy for an ice breaker for her company using GameshowMaker (this newer version has a few skins to make it look like various other shows as well.) A little old, and some of the setup is fiddly (and kind of weird, how like the show-specific .ini file you load in for the skin overrides the settings you have in the main setup, and also by default the space allotted for Category names is WAY smaller than Jeopary standard) and it's all Flash, but still, if you need a quick thing that can be run locally or online, it is pretty solid.

Friday, May 12, 2017

when character encodings attack!

Last year I made up a new one-page-app version of the Somerville Porchfest Site, and it survived the onslaught of people hitting the site that day, unlike in previous years.

This year I ran into weird late minute problems as they changed how my files were served up. One was that the "bands.json" file was somehow turned into a html redirect message. My hack for that was to have the process that cleaned the JSON prepend a "var bandjson =" to it and then include the file as .js

But then things were still crashing and burning Autolinker.js, or rather. Autolinker.min.js , was crapping out in the console, with an "Uncaught SyntaxError: Invalid regular expression:" followed by a whole lot of goobly-gook.

Long story short the problem wasn't in how Autolinker.min.js was served, but rather the encoding used in the index.html page. When I got my apache server, it had the default of UTF-8 for everything in the headers, so it had a line like
Content-Type:text/html; charset=UTF-8
But their server only had text/html.

Adding this to the <head> seemed to fix it:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
seems a little weird this can be fixed either as a server config or a page thing, but that's the way of the world.

Thursday, May 11, 2017

the allure of facebook

I was thinking about the allure of Facebook. Previously I attribute it's dominance to a combination of "stream/wall" (ala Twitter, Tumblr, Instagram) with real identities, a strong bias to guide you to connect with people you know in real life vs anonymous internet strangers. But there's something else: the "also commented on X's post" notification. I just now posted a second comment on friend's post on feeling blue and the seemingly masochistic desire to watch or listen to sad stuff there, two passages relevant to the topic (this passage and the Mr. Blue thing it links to) and it feels great that I know people interested in that topic will get a nudge and probably see what I put there. Old school web forums have this feature but they don't have the stream that brings content front and center, or the "real world friend" aspect.

(Heh, I remember when I would read Usenet on an old academic account, I had a perl script that would scrape and find me continuations of threads I had participated in.)

Wednesday, May 10, 2017

unpaid plug - testing old browsers with ease

My company started using BrowserStack, that looks like its giving a full-browser-screen pass through to a little VM to test old browsers without setting up the damn OS. Super easy to use.

Also, I wrote their support suggesting that dialog would be improved with tooltips showing what % of the market different versions are, and what year the browser came out.

w3schools browser info shows that - wow, IE/Edge and Safari are both separately less than 5% of the traffic? Huh, wonder if that is desktop only though... I know a lot of companies see about a 50/50 desktop/mobile split, with mobile on the rise...

Tuesday, May 9, 2017

k.i.s.s.: too long command lines in bash etc

So for my porchfest work I was making up a thumbnail using ImageMagick, but there were so many files I was running into errors since it was bigger than whatever buffer bash was using. I thought I'd have to learn xargs or something fancy... But then I realized I could just make a bunch of short lines, each ending with a \\ and then a \n , and that copy and pasted fine.

Monday, May 8, 2017

a rant against arcane js syntax

Elements of JavaScript Style -- I'm having trouble wrapping my head around #2 there, "Omit needless code", where
function secret (message) {
  return function () {
    return message;
is considered blatantly inferior to
const secret = msg => () => msg;

I remember one of the reasons people starting dumping on Perl (and just dumping Perl) was because of arcane syntax...  I think there's a strength in looking like other languages.

Concise code is critical in software because more code creates more surface area for bugs to hide in. Less code= fewer places for bugs to hide = fewer bugs.
Concise code is more legible because it has a higher signal-to-noise ratio: The reader must sift through less syntax noise to reach the meaning. Less code = less syntax noise = stronger signal for meaning transmission.
This reminds me of a scifi story that talked about an alien language that was SO EFFICIENT that they could say in a single, accented, nuanced word what a human would need to say in a sentence or a paragraph.The trouble is that kind of sci-fi think misses the reality that redundancy in a language is a feature, not a bug; for example, it means the meaning is likely to be preserved over "noisy transmission" - like when someone isn't paying full attention, for example, or when fidelity over the wire isn't perfect.

I guess some of the problem is the trivialness of the currying example - even without the syntax that will be less familiar to people steeped in other languages the need for a curry (mm, curry) is a little arcane to begin with - and in this example, it's not even clear where functional code would sit! Like if the original was
function secret (message) {
  return function () {
    return message.split("").reverse().join("");

A coworker says that would boil down to

const secret = message => () => message.split('').reverse().join('')

There's something anti-egalitarian in use of this much bleeding edge syntax.

Thursday, April 20, 2017

programmatically generating svg files in bulk via javascript / p5.js

I'm tasked with making a series of graphic files (representing various cars' scores in a way that can be embedded on external sites).

We don't know exactly what size the sites will want, so SVG has been a good choice.

We have up to a hundred to generate, so that's an argument for doing things programmatically, rather than in Sketch or Illustrator. Plus I'm a little lazy about learning to new things and neither program jelled immediately for me in the past.

Today I Learned: p5.js has a completely fine SVG implementation!  You'll want to grab a matching set of p5.js and p5.svg.js from the releases page, then something like this will work:

<!doctype html>
<title>fun with p5js to svg</title>
<script src="p5.js"></script>
<script src="p5.svg.js"></script>
function setup() {
    createCanvas(600, 200, SVG); // Create SVG Canvas

function draw() {
    var x = frameCount / 100;
    var y = sin(x * PI * 2);
    line(x * width, height * 0.5,
         x * width, y * height / 2 + height * 0.5);
    if(round(frameCount) % 10 === 0){
        var name = "wave"+frameCount;
    if (frameCount > 100) {

You can see it in action here BUT - it will try to autodownload 10 SVG files to your system.

Anyway, I looked harder for the p5.js solution when I realized the SVG.js I looked at previously seemed to have weaksauce support for arcs, which were kind of important to what I was aiming for.

Use clear(); instead of background(); if you want to preserve the background transparency on multiple colors. (Kind of runs up how Processing is a generally more about "destroy things every frame and redraw" than traditional SVG... this might be an issue with animations etc)

If you want to display an external SVG (especially if you're going to save this as an SVG) you have to use loadSVG() (in the preload() of course) rather than loadImage(); - otherwise you get a horrible png conversion.

Before I found p5.js could do the task, I wrote this...

5 years ago (yeesh) I wrote about using Raphael.js to do some fun SVG animations, but right now I think SVG.js seems like a better bet.

Combining its basic example code with this advice about saving SVGs I came up with the following:
<!DOCTYPE html>
<script src="svg.js"></script>
  <div id="drawing"></div>
// initialize SVG.js
var draw = SVG('drawing')
// draw pink square
draw.rect(100, 100).move(100, 50).fill('#f06')

var a = document.createElement('a'); = 'mySvg.svg';
a.type = 'image/svg+xml';
var blob = new Blob([draw.svg()], {"type": "image/svg+xml"});
a.href = (window.URL || webkitURL).createObjectURL(blob);;

I think that should scale and fit in a simple loop without too much hassle.

Sunday, April 16, 2017

from "headcrash"

"I mean." Uberman cleared his throat, adjusted his necktie, and began delivering his morning whine, which is clearly what he'd been intending to do all along. "This is, what? The third network outage this year?"

I stopped. "We're having some problems porting your database to our server, sir." I edged one step closer to the exit.

"I mean," Uberman scowled, "if I can't depend on your network, I'm screwed. Just totally screwed, you know?"

Then how come you're not smiling? is what I thought, but "We'll have it back up as soon as possible," is what I said.

"I mean," Uberman whacked his PC with his newspaper again, "we never had problems like this before MDE acquired us. Dammit, our old Applied Photonics network never crashed! Not once!"

"So I've heard." And heard, and heard, and heard! And if you gave me just sixteen users in a one-floor office, I could make this network look pretty good, too.

--Bruce Bethke, "Headcrash", kind of a no-account cyberpunk-y book from the mid-90s... the technobabble is pretty clumsy, but for some reason this passage has stuck with me for 20 years so I thought I'd post it - from time to time, its reminder that little toy systems can get away with things that projects you want to scale can't is useful.

Friday, April 14, 2017


frontend debugging 101

what's easy to do with your toolkit and how it influences your ui

I woke up this morning thinking about Apartmenter. It seemed natural to make it a canvas app, mostly because I was thinking of the funky-shaped walls (like that bay window) of the apartment as a bunch of arbitrary lines, and arbitrary lines are easy to draw in p5.js and more difficult in, say, html5/CSS.

But you know, I think a html5 "draggable lines" (skinny rectangles with a border, most likely) might have produced a better UI, especially for wall layout. My 4am implementation was pretty simplistic, I treated each room as a grid (top left corner 0,0) and each walls as a series of 2 x,y coordinates
rooms : {
    offset: [120,492],

    //top door

    //closet door

(FWIW, I didn't group each wall as a pair of coordinates [[x1,y1],[x2,y2]] or better yet as a map {"start":{"x":x1,"y":y1},
"end":{"x":x2,"y":y2}} because of some minor typing convenience at the time. )

The thing is, when it came time to update the rooms with more refined measurements (we didn't do a great job with some of the the door placement, for example) this was a pain in the butt, I had to mentally put every wall back on that grid and figure out its endpoints from 0,0. 

If I had treated each wall as a draggable line of a fixed length, as I could have here, and surely WOULD have if I used an html5/css/div approach, life would have been easier, because it maps better to the physical nature of measuring a room with a tape measure.  The only challenge would be the bay window, since I don't easily know the angle to put the window at, but that's pretty easy to figure out with a little math, or trial and error if it came to it.

Counterpoint: the corner-based system I used was a bit nice in how the last x,y corresponded to the first x,y of the next wall, a feature a center-and-length system wouldn't have. Still, I think I could have made things "close enough".

The final version of my program got more sophisticated in drawing, for example, the backs and sides of couches, so they had a clearer orientation and looked different than a table of the same size. I wonder if I had tried a div-based approach if I would have tried to get fancy with CSS :before and :after stuff for such details, or maybe just glommed on some child divs.

Of course I would have had to have gone to stackoverflow for suggestions on movable/draggable divs... JqueryUI offered a fairly clean API for it, and there was this one non-jQuery approach that at first glance looks a little hacky but I haven't studied it deeply. 

Ah well. I don't have any plans to advance this beyond the functional-but-useful-for-me prototype stage, especially now that the layout for our place has been decided with the app's help. If I decided to use it again, I guess I could add a "corner and length" based approach to the canvas code without redoing it all as draggable divs...