skulls!

I finally got print copies made of my comic on coping with mortality So You're Going to Die:

After the PDF drafts came back, I realized the blank sheets for the inside covers were kind of bland, so I made up a processing program to make a nice skull-themed pattern for some faux endpapers:

The thing scales completely, just by changing the initial width and height. (Plus my artist complimented my choice of colors)

Here's the code- a little hackish in terms of the loops etc but like someone said "the nice thing about making static computer graphics is, if it looks right, it's right":

color tan =#d1b48c; 
color pale = color(255, 255, 180);

int beat = 6;

float sz;
void setup() {
  strokeCap(SQUARE);
  size(500, 500);
  sz = width / 30;
}

void draw() {
  background(tan);
  stroke(pale);
  fill(pale);
  strokeWeight(width/100 * .4);

  for (int i = -beat*4; i < beat*4; i++) {
    line(i * (width / beat), -height, i * (width / beat) +( width*3), height*2);   
    line(i * (width / beat), -height, i * (width / beat) -( width*3), height*2);
  }


  noStroke();
  for (int x = 0; x < 10; x++) {
    for (int y = 0; y < 10; y++) {
      drawSkull(width/beat * x, width/beat * y);
      drawSkull(width/beat *( x+.5), width/beat *( y+.5));
    }
  }
}
void drawSkull(float x, float y) {
  noStroke();
  pushMatrix();
  translate(x, y - sz*.2);
  ellipse(0, 0, sz, sz);
  fill(pale);
  drawEye(-1);
  drawEye(1);
  drawNose();
  drawJaw();
  popMatrix();
}

void drawEye(float mul) {
  pushMatrix();
  fill(tan);
  translate(mul * sz * .2, -sz*.1);
  ellipse(0, 0, sz*.25, sz*.4);
  popMatrix();
}

void drawNose() {
  pushMatrix();
  fill(tan);
  translate(0, sz*.1);
  drawNostril(-1);
  drawNostril(1);
  popMatrix();
}

void drawNostril(float mul) {
  pushMatrix(); 
  translate(mul * sz*.125, sz*0);
  rotate(1.2*mul);
  ellipse(0, sz*.1, sz*.25, sz*.125);
  popMatrix();
}

void drawJaw() {
  fill(pale, 255);
  float xs = .9;//map(mouseX,0,width,0,2);
  float ys = .3;//map(mouseY,0,height,0,2);
  translate(0, sz*ys);
  float z = xs * sz*.9;
  rect(-z/2, 0, z, sz*.3); 
  stroke(tan);
  strokeWeight(sz*.08);
  drawJawLine(0);
  drawJawLine(-sz*.225);
  drawJawLine(sz*.225);
}
void drawJawLine(float x) {
  line(x, 0, x, sz*.3);
}

exponentially

"The two things you need to know about exponential growth: it lets you get to large numbers very quickly. And it always runs into physical barriers."
--Maciej Cegłowski in Web Design: The First 100 Years which points out we've reached some stability in what our devices can do, and that echoes how the airline industry plateaued. We COULD build supersonic passenger jets and moonbases, but we don't. Similarly, in college in the 90s if I didn't get a new computer every year or two I was qualitatively behind in what my machine could do. Nowadays, I would barely notice issues with a laptop that was 5 years old. (And my hopes for a "techno rapture of the nerds" Singularity is diminished every time I have an interaction that reminds me of how there's just no there there with Siri...)

 Not that there's not still a lot of room for change: self-driving vehicles are going to be super-disruptive.

Also: I really like seeing transcriptions of this kind of presentation, where I can skim/read at my own pace but still enjoy photos that half the time just provide general feel and a sense of being rooted. Electronic text often lacks that; I think that's one of the reasons comprehension and retention lags with electronic readers. But to me it feels like "arbitrary" images returns some sense of the physicality that would be otherwise lost.

bookmarklet: standup timer redux!

A while back I made a web-based two minute timer (which I found useful for managing time during scrum standups) It was ok, but frustrating when I was sharing my screen, because I'd prefer to run the JIRA board maximized, and that webpage wasn't very space efficient.

I decided to make a bookmarklet that would inject a super minimalist timer into whatever page I was looking at: a tiny button in the topcorner, a red bar when time has expired (after two minutes) .

It's a little tricky to add a bookmarklet; I find it easier to bookmark any page, and then edit it, copy and pasting to replace the URL with this code:

javascript:
(function(){
    var targetTimeInSeconds = 120;
    var startTime;
    var timer;
    var timer_restart = function(){
        elemDiv.style.backgroundColor = 'transparent';
        elemDiv.style.width = 'auto';
        startTime = Date.now();
        if(timer) clearInterval(timer);
        timer = setInterval(update_timer_display,100);
    };
    var update_timer_display = function(){
        var time = Math.floor((Date.now() - startTime)/1000);
        elemInput.setAttribute('value', secondsToMSS(time));
        if(time >= targetTimeInSeconds){
            elemDiv.style.backgroundColor = 'red';
            elemDiv.style.width = '100%';
        }
    };
    var secondsToMSS = function(time){
      var min = Math.floor(time/60);
      var sec = time % 60;
      var sec = sec.toString();
      while(sec.length < 2) sec = "0"+sec;
      return min+":"+sec;
    };
   
    var elemDiv = document.createElement( 'div' ) ;
    var elemInput = document.createElement("input");
    elemInput.setAttribute('type', 'button');
    elemInput.setAttribute('value', 'timer');
    elemInput.addEventListener("click", timer_restart);
    elemDiv.appendChild(elemInput);
    elemDiv.style.position="fixed";
    elemDiv.style.left='0';
    elemDiv.style.top='0';
    elemDiv.style.zIndex='20';
    document.body.appendChild( elemDiv ) ;
})();

There's a lot of little things that went into making this: make it a self-executing function made a lot of sense, so it wouldn't interfere with anything on the page. And it's a good exercise in DOM manipulation without jQuery.

It's meant to be easily customized, if you didn't like the color or CSS or if 120 seconds isn't your ideal time...

chrome developer quickie: find that script

I'm dealing with one of those framework labyrinths with tons and tons of .js files.  I was having trouble locating a specific .js file I wanted... after closing every script file open under "Sources" in chrome's developer tools, I got prompted that cmd-P would do a file name search. Good to know.

headline of the moment

Headline of the Moment: Computer Programming To Be Officially Renamed “Googling Stackoverflow”

It makes me wonder how Stackoverflow succeeded where, say, http://experts-exchange.com/ failed (maybe because it was one dash away from looking like "expert sexchange").

Also, I'll bet you few people specifically google for Stackoverflow, it just tends to be near the top of Google results, and generally reliable.

ah, sweet javascript...

The problem of Javascript, from Cube Drone:

to sleep, perchance to sort

A kind of fun Quora, What is the dumbest code ever made that has become famous? introduced me to sleep sort:

procedure printNumber(n)
sleep n seconds
print n
end

for arg in args
run printNumber(arg) in background
end
wait for all processes to finish

So if you have a list of n integers, it will launch n threads, and each individual thread will finish after whatever the number of seconds it is. When all the threads are done, you will have finished printing your sorted list!

This is obviously a terrible idea, but I kind of love how it moves the usual "work" of sorting to a side-effect byproduct. 

cool text spirals and hearts

You can make "word art" like the stuff on the left (not to mention a more valentine one, with a heart) at http://www.festisite.com/text-layout/

Pretty cool concept!

I also learned that you can make bullets on OSX (in most typefaces anyway) by hitting option-8

easy mobile browser detection

Based on stackoverflow's What is the best way to detect a mobile device in jQuery? and 3 ways to detect mobile device in jQuery this seems to be pretty effective:

function isMobile(){
    if(! window.matchMedia) return hasTouch();
    var test = window.matchMedia("only screen and (max-width: 1000px)");
    return test.matches && hasTouch();
}
function hasTouch() {
  try{
    document.createEvent("TouchEvent");
    return true;
  }
  catch(e){ return false; }
}

As you can see at the stackoverflow link, it's a contentious topic. In a perfect world, a responsive design would Just Work for everything... in the case of http://jpporchfest.org/ if I'm dealing with a very small screen I want to switch into a mobile-app like mode that dedicates the whole screen (save for a tab bar at top) to the map or band list. (The fact that the map is encouraging its own scrolling and zooming relative to the page means some of the ways and means of typical responsive design don't quite cut it.)

BONUS: I've been a long time user of Chrome's built-in dev tools, but didn't notice until it was pointed out to me last night that it has some pretty decent device emulation built-in; from the developer console (which admittedly I usually active with a humble right click / "Inspect Element") click the little device-looking icon. (Which I hadn't noticed before.)

odd little idea for javascript constants

Sometimes "magic numbers" in code are kind of unavoidable, especially if you're using basic CSS and js, and need to tell the js about some values that are hardcoded in the CSS.

Traditionally in coding, constants are represented in ALL_CAPS. In my http://jpporchfest.org project, I decided to bundle my constants as follows:

var CONST = {
    SCHEDULE : {
        ROWHEIGHT : 40,
        HEADERHEIGHT : 20,
        PORCHWIDTH : 200,
        MINUTE2PIXELRATIO : 2,
        SPACER : 3
    },
    HOUSEICON :{
        HEIGHT: 26
    },
    POINTER:{
        HEIGHT:34
    }
    
};

So the width of the porch column in the schedule is CONST.SCHEDULE.PORCHWIDTH. The cool thing is that with autocomplete, it makes it easy to find exactly what name I gave to any other constant, plus I have some semantic grouping here.

#applefail

Oh, Apple. If I "Arrange by Size" I'd really like to sort by size, not in a chunk of "From 1 MB to 100 MB"

Plus, please straighten out that thing where newly added files sometimes get shown as "No Date" in finder. That's serious amateur hour crap.