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

Thursday, April 13, 2017

2 recent projects

Two little projects I've worked on lately....

One was my company's April Fool's riff. The idea was a continuation of a finding a car is a bit like romance theme (as best exemplified by last year's Tinder-parody VINder where you could swipe to find the car you'd love.) This year, the idea was a messenger-like chat program to talk directly with the auto - or rather, allowing cars to find the driver they'd love.

I came up with an early rough UI prototype you can play with here- it had a few interesting bits - I think I did a good job with the "hopping dots" as a pure CSS animation. The window scrolling is pretty smart too... I realized that the "other person is talking" always has to occur beneath everything that has happened.  Also I used the trick outlined here to embed a horn sound directly into the page, without needing an external file. We ended up not going with that, but it's a clever idea to know about.

The other project I started in a bout of insomnia, caused in part by wondering if am my girlfriend's and my stuff would fit in the new medium-small apartment we're moving in to together.

I found a few so-so apps for iPad, for sketching out the apartment layout and then putting furniture in. The most attractive was one called Tiny Furniture - it had a great look, was fun to use and was even  easy to sketch out walls, but had some fatal flaws, in that "pinch to resize" was always enabled, so you couldn't lock down the size of a piece of furniture. Also it didn't really have the concept of making a "library" of furniture. I think a usable program would make it both easy to set up the walls like the space you're in and considering, as well as put up a host of pieces you own or might want to buy, and then you can freely drag those around.

So, you can see the first draft of what I made here: (the final version made some minor improvements and allowed saving and loading, but you get the idea) It's a p5.js app using the html5 canvas. It's definitely a rough MVP (Minimal Viable Product) / Proof of Concept but it actually was enough for us to play with layouts and find the one we wanted.

I made a simple form to let the user put in the width, height, and identifying name of a piece, which then gets jammed into the JSON. I made the JSON visible so it can be edited directly, and pushed back into the display. (This lets me also put in irregularly shaped pieces, like the oval tables or the L-shaped couch, without having to build a UI for every thing the program knows how to draw.)

(I've built a few UIs built on saving big blobs of JSON like that, often as regular form data. It's not a bad hack, actually)

The thing I most punted putting in room layout data. That's an interesting UI/UX challenge to thing about - how do you most easily let people (who are probably crawling around on the floor wielding tape measures) put in wall info that is both precisely measured and carefully placed? Do you lock a wall to the corner and then let them adjust the measurement? Do you let them enter a wall of a fixed length and then drag it around? or do you treat it like drawing a straight line in a paint program, but show the current length 'til the user gets it right? Combine with other issues like "walls have widths that probably aren't being measured") and it gets tricky!

As a further hack, I used the same code for a simple "will this dresser fit in our triangular shaped cubbyhole closet" problem - - in this case what was an overhead view is now a side cutaway for the closet and various drawers. (Also in apartmenter, a punt of one inch = one pixel worked well, but here one inch = ten pixels seemed more appropriate)

Anyway, it's nice when a homebrew program like this proves to be so useful in the physical world!

Wednesday, April 5, 2017

simple tool for running a regex on a bunch of lines

I used to be more reliant on my text editor's macro abilities...

I realized in some cases it would be easier to use regular expressions so I made a tool to apply the same reg ex to a bunch of lines of text: regexcellent

You can see some similar tools at Most of them are really old and perl cgi based. The one I use most often is tabtransform, that takes the tab delimited data I copy and paste from iTunes and puts it in a template for my monthly music playlist rundowns (I dig up the youtube URLs for each video and slap 'em in the links the script makes)

Monday, March 27, 2017

for the graybeards

Modern JavaScript for Ancient Web Developers. It reminds me a bit of that How it feels to learn JavaScript in 2016 that was making the rounds last year.

Sometimes I'm torn. I understand why Vanilla.js is so popular; when you cut your teeth on "all you need is a browser and a text editor", and you can get a perfectly lovely edit/save/reload/run loop, it's an article of faith that for serious work, you need these big guns. Or like I said the other year - some frontend developers won't feel like real developers unless it takes just as long to startup the frontend as it does the back.

Wednesday, March 22, 2017

weird chrome bugs and weirder chrome hacks: the case of the disappearing border-radius

For an April Fool's project at work, I hacked together circle avatar by having a border-radius set to the width and height. Thing ones, when the panel they were on grew enough to need scrolling on Chrome on my laptop, the boder-radius would be ignored! But NOT on the same version # of Chrome on a coworkers laptop.

Weird. Stackoverflow to the rescue as usual; putting a opacity:0.999; or a perspective:1px; made my system behave.

Saturday, March 18, 2017

i want my own website! now what? a guide for friends of kirk and others

Every once in awhile a non-techie friend will hit me up interested in setting up their own website but not sure where to start. I decided to summarize my usual advice and explanation here, to save myself typing in the future.

OK... websites! By website I'm going to assume you mean your own domain (or possibly, just subdomain)... i.e. (or in the case of subdomain, as opposed to .

There are 3 parts to making this happening:
1. Securing/Owning the Domain Name, saying that, in the whole wide world (or, rather, the whole world wide web) only you have the right to put stuff up at that web address.
2. Making the site, the layout and graphics and stuff.
3. Hosting the site, so that it sits on a computer that people can connect to with their browser.

There are two general approaches to this: DIY (maybe with some help from me), or using a service like or I'll try to talk about both ideas as we go over those 3 parts:

1. Securing/Owning the Domain Name
For a .com domain this can run around $10-$12 a year. Other .net, .org, .biz etc can cost a bit more or less.

For personal friends of Kirk, you might be able to have a "" or something based on one of the other domains I own, for free, but all the domain names are a little goofy or Kirk-centric (, , etc)

If you use a service like wordpress, sometimes they will give you a "" for free, but if you want "" to work you have to pay.

2. Making the site. 
There might be tools to help beginners assemble a site (in a layout language called html/css or sometimes html5) but I've been doing this long enough that I prefer to do it from fact generally it's easier for me to do something from scratch than to learn how to use a new tool, so I'm more willing to make a simple site for a friend than to teach them how to use a tool I'm not familiar with myself.

There are lots of learning resources available online for free - I kind of like the attitude has, they seem to be comfortable with expressing the idea that "yeah, this going to seem stupid and arbitrary and weird and fiddly, but that's the way it is and we have belief that you can do it".

Assuming you don't want to learn how to write html... or would be my choice for any site that updates regularly. Others like might be better for "static" sites where you're just putting up your personal info and contact info in a one time way (I think Wix also has business specific templates, like if you run a physical therapy or counseling type service?) I use a lot (this blog is on blogger, for instance, or as it used to be called blogspot) and honestly don't know a lot about the others, but here's a page that compares various site building services.

3. Hosting the Site. 
So it's not enough to write the site - if you're doing it on your own (vs using wordpress or blogger or wix etc) you need to put the stuff on a computer that's connected to the internet 24/7 (in theory you could host a small site at home over like a cable modem, but that's a more complex scenario)

Of course, if you're using wordpress or one of them, this step is taken care of.

I used to pay about $10/month for each domain at a site called - I'd recommend them highly if you want a lot of control over everything. I pay a bit more per month with them for a "Virtual Private Server" so I can run as many domains as I want (actually they were pretty good about letting me run extra domains even before I upgraded my account.)

If you are a friend of Kirk and don't need to update your site very often, I'd be happy to give you a "" style address for free, or if you want to pay $12/year for "" I can put those files on my server. But- you won't have much direct access to update those files often, it will go through me. And if you're a good friend of Kirk I'd even make a simple site for you. (If you're a REALLY good friend of Kirks maybe someday I'll come up with a system to let files be updated, but for now, no, if you need to update I'll be involved.)

So that's it! Friends of mine can reach me personally for more information.

Wednesday, March 15, 2017

iphone simulator

Just a reminder, for an even deeper experience than Chrome's Devtools Phone Emulator , on a Mac if you have xcode you have an even deeper iPhone simulator and can even do debugging by going into Safari.

Saturday, March 4, 2017

musical "development"

A bit off topic for this blog, but I made tutorial about the blues - specifically a guide to "The Blues Scale" and the "12 Bar Blues" pattern, right now oriented towards beginning trumpet and trombone players. (Which we have in abundance at the School of Honk)

Tuesday, February 28, 2017

fun with sounds from the terminal

Someone at work praised Linux and posted this oneliner "white noise machine":
play -q -c 2 -n synth brownnoise band -n 1600 1500 tremolo .1 30

It can run on MacOS; play is part of sox which you can get via brew:
/usr/bin/ruby -e "$(curl -fsSL"to install brew, then
brew install sox

It reminded me of the fun you can have with the 'say' command on Macs-- a lot of voices there, get a list by running 
say -v '?'
or better yet hear each one with this clever one-liner:
for voice in `say -v '?' | awk '{print $1}'`; do say -v "$voice" "Hello, my name is $voice."; done
(it only reads the first part of multiword voice name, but things still work.)

Monday, February 20, 2017

weirdbinary: fun (?) with an alternate binary packing

A friend of mine, Ken Bernstein, caught me at the end of the "Science and Spirituality" reading and discussion group we share and mentioned this idea to me, and was wondering if I could help him figure out if if i was useful or not. It involves binary numbers.

Typical positive binary numbers, the right most place is the "ones", the next one over is the "two's place", next one is "fours" etc. and it goes like this:
0000 = 0  (0*8 + 0*4 + 0*2 + 0*1)
0001 = 1  (0*8 + 0*4 + 0*2 + 1*1)
0010 = 2  (0*8 + 0*4 + 1*2 + 0*1)
0011 = 3  (0*8 + 0*4 + 1*2 + 1*1)
0100 = 4  (0*8 + 1*4 + 0*2 + 0*1)


But what if every other digit was flipped in value? Right most place is "ones", next one over is NEGATIVE twos, next one over is "fours", next one over is NEGATIVE eights...

First few counting numbers are like this
0000 = 0  (0*-8 + 0*4 + 0*-2 + 0*1)
0001 = 1  (0*-8 + 0*4 + 0*-2 + 1*1)
0110 = 2  (0*-8 + 1*4 + 1*-2 + 0 *1)
0111 = 3  (0*-8 + 1*4 + 1*-2 + 1 *1)
0100 = 4  (0*-8 + 1*4 + 0*-2 + 0 *1)

(At least I think this was the idea Ken was describing to be)

To be frank, I'm not very smart about thinking this kind of stuff through, but I can throw some computer work at, which I've done here:

That's some extremely loose and crappy code. For one thing I wasn't smart enough to write a "decimal to weirdbinary" converter directly, but I could go the other way, so I start by generating all the decimal values for a lot of binary counting and storing the result, keyed on the decimal value.

Then I could plot the bit ordering, if you're just doing decimal counting, what do the bits look like... and I got this:

The red column on the right is regular binary, the blue is weirdbinary. Regular binary has a nice pattern, once you know what to look for... the ones place toggles every line, the twos place toggles every other line, the fours place toggles every four lines, etc. Weirdbinary... I guess it's about the same, but the rows are kind of offset?

After that, I tried seeing how different translations from weirdbinary to regular binary looked, using regular binary as the "standard" for calculating the y position:

Ok, so for that, the diagonal red line is the trivial case: binary 000001 = 1 pixel up, binary 0000010 = 2 pixels up, 00000011 = 3 pixels up, etc. The blue is where I take the decimal values (1,2,3 etc), get the "weirdbinary" bits for it, and then plot those bits as if they were an ordinary binary number. (So every value there is positive, since I'm not using a regular binary notation that can do negatives)

I then added the green by going the other way around: I take the counting decimal values, convert to binary, then see what those bits represent if we read them as weirdbinary. This forms a complementary pattern, which makes some intuitive sense.

So, getting back to Ken's question, is this useful for anything? Well, it might be kind of nice that you can represent negative numbers without using two's complement (which requires a fixed number of binary digits to work). I don't know if there's an "easy" way to count in weirdbinary, or to do basic addition and subtraction. 

Any thoughts?

FOLLOWUP: I have some smart friends on Facebook!  Jeremy pointed out that this "weirdbinary" system can be explained as being "Base Negative Two"... Wikipedia even mentions a polish computer that used it. I guess the term is "negabinary".

Scott pointed out Gray Code, another binary encoding system which has a lovely property that subsequent numbers only vary by one bit - clearly a win for making signal more robust and less prone to big error. 

Friday, February 17, 2017

grumblesmurf: pointless css lint rules

I've already done my curmudgeonly grumble about linting, but today I ran into one lint rule that means especially pointless: length-zero-no-unit, that any length measure that's zero should not have units.

A zero length is a zero length of px, em, cm, or whatever, but for some reason some Lint-heads decide that a since a zero "CAN be an unlabeled" it "SHOULD be unlabeled" (which then gets parlayed into "MUST be unalabled", if your company enforces linting rules for builds.) This page tries to justify it as "saving bytes", which is a pretty weaksauce argument in a world minification and what not.

The other argument is "consistency", but actually I think it makes things more inconcistent: if you have a bunch of "px" values, but one of them happens to be zero, it's not allowed that it be a "0px" measure like its siblings.

In the chat though my department lead came down on the side of not establishing a mechanism for the group to vote down irksome lint-rules. I think it's less that this particular rule is defensible, and more that they want to avoid the quagmire of long debates about other rules that developers find pointless or excessively pedantic.

Monday, February 13, 2017

fun with word line art

I'm a member of BABAM!,  the "Boston Area Brigade of Activist Musicians", a loose affiliation of folks across various pre-existing HONK! groups.

In the past I've made up some stretchable tuba covers (pretty good custom site for them, there) that identifies the group I'm marching with - it's a convenient place to put a billboard, even though I don't like how it obscures some of the goofy Seuss-ian beauty of the Sousaphone.

Here's the new design:

I wanted to outline what the acronym stood for without nerdily just writing it out in big block letters. I also wanted to keep a bit of a homespun, lowkey look. My solution was to use a special tool in the iPad program "Sketch Club" that lets you draw with words, so to speak. I had to adjust and paint with "  ACTIVIST MUSICIANS BOSTON AREA BRIGADE " so that the lines were more clear, and start with leading spaces because of quirks in the line angle, but overall I'm happy with how it came out.

Tuesday, February 7, 2017

the aesthetic of the old and "worse is better"

At work we got to talking about craigslist as a site that has kept the same basic design for a long time. (And as such, is a frequent sample project for student designers who would propose revamps of it.)

It got me thinking about a blog entry that has stuck with me (now only available by the Wayback Machine) In it a designer (who comes across as rather pompous, to be frank) talks about an interview at what was probably "X10", the folks who graced the web with the innovation"pop-under" ad (now mercifully not much of a problem) in the 90s, with a bunch of scummy "put networked cameras all over the house! or your attractive neighbors - wink wink " ads.

The designer writes:
[The interviewer] said, verbatim, “You’ve probably seen our website, and as you can see, it looks pretty shitty. That’s pretty much how it’s going to stay.”

His explanation was that they were a direct marketing company who just wanted to push products [...] out the door. His description of the target customer was, “Men from around age 30-40 with a little extra money who like buying gadgets and aren’t too concerned if it doesn’t work too well.”
You don't want to sacrifice decent design and especially solid UX, but remember: you aren't necessarily your audience.

Anyway,  in thinking about how webdesign has changed over the years, I was trying to remember the URL for with a neat time slider for trends over the decades, but I also found a brief history of web design for designers outlining some of the biggest trends.

Saturday, February 4, 2017

note to self: custom pretty url path handling/redirect under apache

One popular trick is to make "pretty urls", so you can have something like
instead of

(On my site that's how I get stuff like working)

So, for reference to my future self, here's what you do:
In an .htaccess file in the webroot for the subdomain do something like

Options -Indexes
RewriteEngine On
RewriteRule ^band\/(.*)$ view.php?info=$1 [L]

And then a sample development view.php might start

$path = $_GET["info"];
$parts = explode("/",$path);
foreach($parts as $part){
  print "GOT ".$part."<br>";

You have options to do more work in the regex rather than in the script things land on, like if you want different levels of pathness to go to different files, but the syntax can be arcane.

Thursday, February 2, 2017

get offa my lawn grumbling about new school linting

From some Slack chat to a fellow "veteran" coder at work:

One paradigm that I think makes sense, but goes against some of the same feelings of "self-evident good" shibboleths as "triple equals" - personally I'd rather be allowed to say
if(something) doOneThing();
as long as that was one line, it's like a single thought. Or even
if(something) doOneThing();else doAnother();
Most of the arguments that insist on the curly brace frame arguments like "well what if you put in another command, and expected it to be conditional, but it wasn't?" but that would only apply if someone was doing
if(something)   doOneThing();
which to me is clearly wrong.

But people prefer the simplicity of the "always use brackets" rule, so that two liner example above will be 5 or 6 (depending on if you can "} else {" on one line, and it's not THAT big a loss, but still.

It's the principle of over-simplified linting rules that get to wear the cloak of "this is obviously better, you cave man graybeard" that bugs me a little -- again ala "triple equals is ALWAYS better" even for edge cases where it's demonstrably not.

(The fellow coder said he had been burnt by this after using the "to me clearly wrong" example of putting the conditional'd action on the next line line without braces, just indenting... so maybe we should just stick to braces everywhere, sigh.)

Monday, January 30, 2017

the power of humble a/b testing

I often joke that my company is "the engineers running the asylum" because there's not much "product management" as a separate discipline; engineering figures out what to do, and does it. But it's not as bad as all that; we are highly data driven, and have a solid A/B test system in place.

So one engineer had a thought that "Subscribe" with a pin wasn't the most clear UI, and that we might get better results with alternate wording. So we took the top bar of this:

And changed it to that:
A/B tests (called "view versions here") are enumated in a Java file, and then we have a page that lists them all, allows the developer to say what % of traffic should be sent to each one, and then an "assign to me" button that says the developer ALWAYS gets put in that group:

For each of those, within each percent (like 30) half of the % traffic gets sent to GROUPNAME as a test, and other half gets sent to GROUPNAME_CONTROL. Then you can pull up logs at look at results.

The results are often counter-intutive. Stuff that seems like solid UI wins get poorer results. (As happened here -  switching to a Bell and "email alerts" from a weird pushpin and subscribe got fewer clicks, and so did trying an email envelope icon and keeping the word "subscribe" ) Or- you might be looking at the wrong result. Like, maybe you don't want more sales leads if they're all crappy leads bumping down the overall conversion rate.

Still, it's good that not everything is just developer or product manager guessing...

Thursday, January 26, 2017

css spritesheets need breathing room

At work, I was seeing odd results with little blue underlines under some of the stars in our dealer ratings:

It was a bit mysterious - sometimes there, sometimes not. And as in that example, sometimes on the same page.

Through trial and error I realized messing with the browser width could make the underlines appear and disappear. Or even more reliably, changing the zoom level - that could get it to happen even on Safari, not just Chrome where I was mostly working.

The stars were <i> tags, fixed size (16px*16px) from a spritesheet:

I guess the takewaway is spritesheets need more breathing room, a bit more transparent space between elements, because browsers and screens are doing all kinds of tricks where a screen pixel is not a browser pixel. 95 times out of 100, that magic is transparent to the web developer, but sometimes the abstraction leaks a bit.

Wednesday, January 25, 2017

a rorschach lava lamp

A while back a person named Esteban Hufstedler made a really cool Processing program that made awesome, lava-lamp-ish moving patterns, much like the mask Rorschach wore in the movie "Watchmen". It included a mode to see how the effect was done, and some other settings to play with to get different results. I took the defunct-ish original and made the tiny changes to let it work in the browser: (albeit a bit more slowly than in the original Java mode)

See it at

Great stuff. has a bunch of neat creations, it's too bad there's a whole generation of stuff that doesn't run without tweaking.

(FOLLOWUP: I got in touch with the original author on Facebook, and he mentioned the general idea is based on metaballs (meta, not meat.))

Saturday, January 21, 2017

tidying the dropbox root folder and using it to restore settings and other mac tips

Lost in Mobile posted Jacob Salemla's Using Dropbox For An Easy Restore Of All Your Computer’s Settings but I was more intrigued by his suggestions Unclutter your Dropbox Root Folder using chflags on Mac - many applications that have a Dropbox storage option tend to jam a new folder on the root level of Dropbox, which is not a good look, and this lets you tuck them away elsewhere.

Anyway, Jacob Salemla's blog might be worth keeping an eye on skimming through the archive; lots of Raspberry Pi / AdBlocker/ Malware stuff with some Star Trek Tomfoolery as well. Some fun entries: MacOS's "say" command with various voices is worth keeping in mind though I haven't thought of a terrific use for it (though I did use to make the samples for my 7-minute workout app) Also opendiff is something I remember wanting way back when, doing a visual "diff" of two text files

Wednesday, January 18, 2017

further thoughts on innovation

This Lost in Mobile article about a Cult of Mac piece saying maybe Tim Cook's non-combative style is leading to a less innovative feeling Apple led me to this ramble:
Arguing with my sparring partner, we got to think about what innovation is, like the iPhone launch – if it was more the thunderbolt of a new idea, or incremental progress suddenly revealed. I think it’s both – someone high up gets a vision of “hey maybe we could do this if we have the tech” and then a team has to put in the hard, slow trudge of all the steps to make that happen. (Or maybe, someone in the middle-to-high level gets the idea and pitches it to the very highest, even ruffling some peer’s feathers – the process that this article says might be breaking at Apple)
I think usually that vision takes the form of a new interaction, something that wasn’t possible with the current configuration of stuff.
I think some of the current state of Apple is the lack of a big idea. Look at Jobs’ last big 3: iMac was a matter of presentation and wrapping – actually a freshening of the very original information appliance concept, but redone beautifully. iPod’s innovation was the clickwheel – and it was a great one. iPhone’s interaction innovation was putting the new type of touch sensitivity (already used in say laptop trackpads) and putting it behind glass. (And visual voicemail )
In this view, iPad really didn’t represent interaction innovation (to be fair, it represents the innovation that then got diverted into the iPhone, so by the time it came around it was kind of ho-hum, just larger) And the same for the Apple Watch. The interaction of “smaller and on your wrist instead of your pocket” doesn’t involve all that many new forms of interaction. What will the next interaction innovation be? Well if i could say for sure I might be rich. It might be in voice assist, where Apple seems to be lagging on execution a bit (some argue it’s because they’re more privacy conscious than their rivals?). Random pipe dream: what if clear touchscreens could remold themselves slight to provide tactile bumps? Like tell your thumb where the virtual cross pad was, or have faux physical slider points… no idea if the supporting tech for that is even on the horizon, but it certainly sounds cooler than edge to edge curved screens, doesn’t it?
So we turn to Microsoft. They made a bet that the future of laptops and tablets might be doable with one OS. And they paid the price for that, some of their earlier attempts were really painful to use, and even now the legacy aspect they lug along is offputting for some. But now there is some exciting interaction innovation; giant, desktop workspace touchscreens and intriguing tactile physical dials are making a hard press for “creatives” – it’s a historical shame Apple is falling behind supporting that group. (Compare to the iPad Pro message, where Apple is saying “you can do all your pro work without a real filesystem” which honestly I’m not sure I believe.)
If I thought Window was anywhere near as acceptable as MacOS I might be tempted to swapback, but I’m not willing to gamble 800 bucks and find out its not. (And that’s another way Windows might suffer from people like me who could potentially be persuaded to “switch back” – I tend to compare the hardware on my mom’s $250 cheapie Windows box to the $1000 hardware of my Macbook Air, and that’s clearly not fair.)
Sorry, a bit long winded there 😀

Tuesday, January 17, 2017

Richard Loewy's MAYA: better! different! but not TOO different...

The Atlantic had a nice piece on Richard Loewy's design aesthetic:
Loewy had an uncanny sense of how to make things fashionable. He believed that consumers are torn between two opposing forces: neophilia, a curiosity about new things; and neophobia, a fear of anything too new. As a result, they gravitate to products that are bold, but instantly comprehensible. Loewy called his grand theory “Most Advanced Yet Acceptable”—MAYA. He said to sell something surprising, make it familiar; and to sell something familiar, make it surprising.
Interesting stuff. It reminds me of "Zen and the Art of Motorcycle Maintenance" and its description of how we know "Quality", the Tao, how something is good at being whatever it is, in a circular way: we learn define the quality as we recognize the quality in the instances of the thing we're defining.

Monday, January 16, 2017

game design ala nintendo

Kottke had a post about Nintendo's game design which featured two videos.

This is the one that resonated more deeply for me:

I'm bummed I don't make many microgames any more, but when I did, they followed that idea of "make a new mechanic", have some fun with it. (I used to do Glorious Trainwrecks' two hour game jams, where you'd make the best worst game you could in 2 hours, and then hop online and play what everyone else made as well - a new fun mechanic was about all I could hope for. You can see some of the best of results on my game page (currently my 2015 advent calendar) and then a pile of other stuff here)

There should never be Game Police saying what games can and can't or should and shouldn't be, or are or aren't, but I do think you can make an argument that video games as a medium are especially interesting when they're playing to their unique strengths - things you can't easily do in other media, like for example making "physically" interactive microworlds. Lots of formats can tell stories, many of them can even bring the reader/viewer into the story.... (and video games always have to deal with "ludonarrative dissonance, where what the player wants to do may or may not make sense with what the character wants to do). And many, many types of games lets you address strategic fun, and even model their own little "worlds" in the process. But making an entertaining interactive/reactive new reality... that came first for games, and is where my focus tends to brought.

The other video presented another Nintendo-ish view, and reminded me what my attempts at gamemaking sometimes lack:

 For me the most important quote was Miyamoto saying this:
I think that first is that a game needs a sense of accomplishment. And you have to have a sense that you've done something.
Challenge and accomplishment do bring a lot to a game. (Of course games have gotten a bit more friendly and forgiving over the years - sometimes I worry that reward time spent rather than skill built...)

I have mixed but mostly sad feelings about not making or playing games much these days. I have some friends that argue I've spent too much of my life with them already, and they serve as a distraction from the important things, and certainly some of the things I've been doing more of (especially playing in some street bands) has given me great rewards as well.

Sigh, being a grown up.