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>
<html>
<head>
<title>fun with p5js to svg</title>
<script src="p5.js"></script>
<script src="p5.svg.js"></script>
</head>
<body>
<script>
function setup() {
    createCanvas(600, 200, SVG); // Create SVG Canvas
    strokeWeight(2);
    stroke('#ED225D');
}

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;
        save(name);
    }
    
    if (frameCount > 100) {
        noLoop();
    }
}
</script>
</body>
</html>

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.

FOLLOWUP NOTES:
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.


PREVIOUSLY:
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>
<html>
<head>
  <title>SVG.js</title>
<script src="svg.js"></script>
</head>
<body>
  <div id="drawing"></div>
<script>
// initialize SVG.js
var draw = SVG('drawing')
// draw pink square
draw.rect(100, 100).move(100, 50).fill('#f06')

var a = document.createElement('a');

a.download = 'mySvg.svg';
a.type = 'image/svg+xml';
var blob = new Blob([draw.svg()], {"type": "image/svg+xml"});
a.href = (window.URL || webkitURL).createObjectURL(blob);
a.click();
</script>
</body>
</html>

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

debuggin'

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 : {
  bottomroom:{
    offset: [120,492],
 walls:[
   [0,0,0,176],
    [0,0,115.5,0],
         [115.5,0,115.5,92],
    [115.5,92,150,92],
    [150,92,150,176],
    [150,176,0,176],

    //top door
    [20,0,40,10],

            //closet
    [150,176,176,176],
    [176,176,176,134],
    [176,134,150,134],
    //closet door
    [150,134,140,144],
    [140,144,148,152]
 ]
},
[...]
}

(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: http://stuff.alienbill.com/apartmenter/. (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 - http://stuff.alienbill.com/closeted/ - 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 http://tools.kirk.is. 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. yourname.com (or in the case of subdomain, yourname.someoneelse.com) as opposed to somesite.com/blahblah/yourname/ .

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 wordpress.com or wix.com. 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 "yourname.alienbill.com" 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 (.kirk.is, porchfest.info , etc)

If you use a service like wordpress, sometimes they will give you a "yourname.wordpress.com" for free, but if you want "yourname.com" 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 scratch...in 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 http://www.html-5-tutorial.com/ 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... Wordpress.com or Blogger.com would be my choice for any site that updates regularly. Others like Wix.com 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 Wordpress.com/Blogger.com 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 phpwebhosting.com/ - 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 "yourname.alienbill.com" style address for free, or if you want to pay $12/year for "yourname.com" 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 https://raw.githubusercontent.com/Homebrew/install/master/install)"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)

etc.

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: http://kirkdev.alienbill.com/2017/weirdbinary/

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

and
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 http://fabianburghardt.de/webolution/ 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
http://chat-o-tron.alienbill.com/band/jphonk
instead of
http://chat-o-tron.alienbill.com/viewband.php?name=jphonk

(On my site http://kirk.is/ that's how I get stuff like http://kirk.is/2017/01/01/ 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

<?php
$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 http://stuff.alienbill.com/rorschach/

Great stuff. https://www.openprocessing.org/ 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.

Thursday, January 12, 2017

the stuck-in-traffic problem

tl;dr: The traffic isn't against you. It's just the traffic.

In Cat's Cradle, Kurt Vonnegut introduces the concept of a "wrang-wrang": a person who steers people away from a line of thinking by reducing that line, with the example of the wrang-wrang's own life, to an absurdity.

I'm trying to make Homer Simpson my wrang-wrang. Specifically this clip:


A sudden irrational and disproportionate fury at somewhat trivial things that are out of my control. In some circumstances I'm almost too controlled, many of my potential feelings of desire have to be vetted by my inner judge before they're allowed... but the feeling of "this is just wrong" rises up in a sudden furious tantrum, and I don't like that about myself. (It's gotten me into trouble in previous jobs; it's not that I rant and rave endlessly, it's just that one moment of exposed anger, even if directed at a system and not an object, can make people very uncomfortable.)

The issue has been on my mind for a while. In 2008 I wrote
"C'est la Vie!" / accepting that / "this should not be!" / but coping / more stoically; / philosophically-- / "C'est la vie..."

A few years later I read about William Irvine's modern application classical Stoicism, in "A Guide to the Good Life'; protecting one's equanimity and contentment at all costs, in part by triaging the world into things one has complete control over, no control over, and somewhere in between, and attending only to the first and last category, along with "negative visualization" - a meditative technique of thinking about how bad things could get, and then being happy when they're better than that; and realizing that you'd be able to cope even if they were that bad. So that was helpful, but just recognizing that a situation was out of my control didn't actually help my equanimity all that much.

Other approaches suggested themselves. I wrote this in 2015:
Recently a conversation with Derek gave me the idea of approaching the world with a kind of cheerful pessimism- assume that "a bit screwed up and annoying" is kind of the natural state of the universe, that things WILL be messed up, but generally not irretrievably so, and then be extra cheerful when the dice roll your way. "Lousy minor setbacks" that could otherwise be absolutely and inappropriately infuriating become almost soothing reminders that Murphy's in His Heaven and all's right, or wrong in the right way, with the world.

Again, that sounded better on paper than in real life, in terms of not being upset. I don't really want to be all that dour all the time.

In early 2016, I stumbled on "Amor Fati" - still a concept that resonates for me, a call for the cultivation of love of one's fate, even the parts that are unpleasant, that you wouldn't have it any other way. As Nietzsche put it:
"My formula for greatness in a human being is amor fati: that one wants nothing to be different, not forward, not backward, not in all eternity. Not merely bear what is necessary, still less conceal it--all idealism is mendacity in the face of what is necessary--but love it."

I felt - still feel - that much of the problem is that our monkey brains are so good at daydreaming up these alternate realities that are just like this one, but better - this same roadway, this same car, not all these other cars - but those realities don't exist in our world, except for the power we give them to make us unhappy.

Later in the fall I also stumbled on the idea of using empathy to make situations more palatable. In its more extreme form, this is a kind of hippy-dippy "we are all one thing", but even without going to that extreme, if you see yourself on a common team of humanity, someone cutting you off might be a win you can share in. Of course, this doesn't apply to traffic jams so much, at least when everyone is equally stuck. (Remember- you're not 'in' a traffic jam, you 'are' the traffic jam)

But now I've found what seems the strongest counter-formula yet... the recognition of this weird animism humans tend to have, that we look for intent and purpose even in things that are just accidental and emergent. The first stage of the this realization was that "it is absurd to take traffic personally". And yet I do. Later, in the movie "Mistress America" I found the even wider application: "The path isn't against you. It's just the path." I've been finding that a very useful mantra lately.

The other nice thing is that these various view points are complementary, they don't really undercut each other that much. (I've been told that's characteristic of Eastern religions, in general they are less combative, and defensive of their "unique path to truth" sense, than many Western outlooks.)

The traffic isn't against you. It's just the traffic.