porch icons and github thoughts

I was kind of irritated with my past self for not socking away a Processing program to generate house icons (w/ identifiers for each location) someplace where my current self could find it and reuse it this year, so I had to make it from scratch.

It brought to mine how I'm a bit slow to use Github (or equivalent) for source control.  I guess I'm a bit of a cheapskate, and don't want to pay Github for private repositories, while being a little shy about airing my "dirty laundry" to the world. (Though I have a few projects with a more public face there already.) I guess bitbucket might provide some free private repositories, but even then I'm worried about conflicts with my use of Dropbox for more seamless synching.

When I mentioned my reticence on Facebook,  my buddy Kay Rhodes wrote

Stick it on GitHub, add a README that clearly states it's an unfinished work in progress (and what it is). Others can still benefit.

I guess that points to some of my skepticism about some types of code sharing in general... Github really feels more geared towards collaborative sharing on ongoing projects than for distribution and installation of mostly ready to go stuff. Even when a project is using it for the latter, it's even odds whether the README.md will actually provide a clear path to installation and use.

I was riding in a van of a friend whose kid is obsessed with Jurassic Park, so on the second or third playthrough I started thinking of how Github sites are kind of "just the DNA" repositories for software, but one of the reason cloning and software installation is so hard is that you need guidance on making the right environment for the stuff to grow. I've seen few Github repository homepages that were adequate substitutes for a standalone websites, but plenty of projects that assume they are. (Sometimes you just want a Download Now link...) Similarly, tech blogs and stackoverflow seem to be much more human ways of sharing code information in a way humans can understand. (And if people were REALLY reading code regularly, stuff like the heartbleed bug wouldn't have been able to hide away for years.)

Anyway, for what it's worth, here's a Processing program that will make batches of house shaped icons and pointers. It shows off a few techniques like generating transparent PNGs in Processing and drawing shapes. (I really should shift gears so my website uses a sprite sheet for these...)


ArrayList<Point> housePoints = new ArrayList<Point>();
color LITEORANGE = #FA8072;
color DARKORANGE = #804000;
color WHITE = #FFFFFF;
color BLACK = #000000;
color PURPLE =#9a88cd;
color GREEN = #BAD579;
color LITEGRAY = #c5c5c5;
color DARKGRAY = #5b5b5b;

int WIDTH = 28;
int POINTERHEIGHT = 34;
int HEIGHT = 28;

PFont myFont;

void setup() {
  size(WIDTH, HEIGHT);
  myFont = createFont("Arial-Black", 12);
  makeHousePoints();
  drawSetOfHouses(null);
  drawSetOfHouses("T");
  drawSetOfHouses("H");
}

void drawSetOfHouses(String badge){
  String postfix = "";
  if(badge != null) postfix = "_"+badge;
  drawHouses("icon_on"+postfix, false, true, badge);
  drawHouses("icon_off"+postfix, false, false, badge);
  drawHouses("pointer_on"+postfix, true, true, badge);
  drawHouses("pointer_off"+postfix, true, false, badge);  
}


void drawHouses(String folder, boolean pointer, boolean active, String badge ) {
  background(200);

  int h = HEIGHT;
  if (pointer) h = POINTERHEIGHT;
  PGraphics g = createGraphics(WIDTH, h);
  g.beginDraw();

  g.strokeWeight(2);
  
  
  
  g.textFont(myFont);
  // g.smooth();
  for (int i = -1; i <= 99; i++) {
    String fileName = String.valueOf(i);
    String display = String.valueOf(i);
    if (i == -1) {
      fileName = "blank";
      display = "";
    }


    color textColor;
    if (active) {
      g.fill(LITEORANGE);
      g.stroke(DARKORANGE);
      textColor = DARKORANGE;
    } 
    else {
      g.fill(LITEGRAY);
      g.stroke(DARKGRAY); 
      textColor = DARKGRAY;
    }
    
  if(pointer){
     g.line(WIDTH/2,h/2,WIDTH/2,h); 
  }
    
    
    g.beginShape();
    for (Point p : housePoints) {
      g.vertex(p.x, p.y);
    }
    g.endShape(CLOSE);

    g.stroke(0);
    g.fill(textColor);
    g.textAlign(CENTER, CENTER);
    g.text(display, 14, 14);

    if(badge != null){
      g.noStroke();
      g.fill(PURPLE);
      g.rect(16,0,13,13);
      g.fill(WHITE);
      g.text(badge,22,4); 
    }



    g.endDraw();
    image(g, 0, 0);
    g.save(folder+"/"+fileName+".png");
  }
}

class Point {
  float x, y;
  Point(float px, float py) {
    x = px; 
    y = py;
  }
}


void makeHousePoints() {
  addHousePoint(14, 2);
  addHousePoint(0, 13);
  addHousePoint(5, 13);
  addHousePoint(5, 24);
  addHousePoint(23, 24);
  addHousePoint(23, 13);
  addHousePoint(27, 13);
}

void addHousePoint(float x, float y) {
  housePoints.add(new Point(x, y));
}

economics, culture, and electronic communication preference

Voice Memo'ing is insanely popular in Buenos Aires right now. It's the confluence of several factors, including economic: in many Latin American countries they still charge you for each SMS, but WhatsApp voice memos is effectively unlimited with a data plan. (I remember when my AT+T plan had an infuriatingly low # of texts per month, given what I knew about what it was costing them.) Over time, the choice of communication format becomes a cultural norm and develops its own accepted patterns of behavior.

My first thought was that it looked too much like a flurry of little voice mails (which I kind of hate), but I realize the UI presentation is very different because each conversation is collated, it's not the big "voicemail inbox" I try to ignore as much as possible on my phone.

The article lists several advantages to the form:

• it's expressive, and voice carries nuance and feeling that might be lost in text (or made up with emoticons ;-)
• there's a facility to send the same voice memo to a group of people
• they're easy to generate while walking or driving
• they carry their own validation of who is speaking, though this might be a downside in terms of plausible deniability for some...

It reminded me of the Filipino Texting Phenomenon - observed as far back as 2001, it was partially the result of a deal where calls cost money but texts were unlimited. (Again, this probably was in line with the actual cost to the telecommunications company.) A decade later it put the islands ahead of much of the rest of the world for electronic payment in the real world.

I suppose of the culture I swim in made the switch I would follow, though I'd have to learn to be more concise in my speech on the spot, as well as tolerant of other people's pace. (By nature I like to skim and jump back to things, which is not as trivial with audio as with written text.)

emoticons and emotional fidelity

I'm in favor of emoticons (or smilies, as we used to call them) -- IMs and Texts (and to a lesser extent email) form a blended form of communication, mixing the format of traditional writing with the more casual aspects of spoken speech. Emoticons are ways of pasting over the lack of tone and inflection that the latter enjoys.

(I've noticed some people just sound harsher in email and text. I'm not sure if it's a lack of exclamation points or what- in the case of my Aunt, for example, her friendly intent was more clearly expressed to me when she started using emoji signoffs at the end of her texts)

I like emoji well enough, but I've never been a fan of chat interfaces that used cartoon equivalent for typed smilies, especially when the UI automagically swaps out a :-/ or :) with the yellow-faced "equivalent". I think AOL-IM started doing this in the 90s. I could never figure out if it felt more like a UI engineer showing off or if someone was really afraid people might not get the typographical pun involved. (Perhaps it was just a way of cutting the Gordian Knot around whether the canonical smilie had a dash nose, :) vs :-)  (Not to mention the issue of whether the smile count as the closing parenthesis for a parenthetical aside!)

There's been a lot of interface inconsistency over the years, like whether it was the sender or receiver that was "supposed" to do the conversion-- with extra points off for programmers when a code sample gets ); or :D "helpfully" converted.

And last week I discovered that Facebook adds an extra terrible wrinkle, with a bad inconsistency in the web and iOS form of its chat client. Here is what a :-P looks like on the web:

and here is its appearance in the iOS client:

That's a very different mood, even if the expression is technically the same. (The web version is closer to what I was aiming for, and the set of the mouth closer to what I feel a :-P conveys.)

I feel Apple iMessage gets it about right, leaving typed smilies well alone, but providing an easy interface for adding in a range of smilies (including ones that would lack a typed shortcut equivalent, like rolling eyes) and other fun, goofy little cartoons.

Semi-relevant International Fun Fact: according to my 2007-era self:

it seems common for Russians to forgo the eyes on smilies but multiply the smiles, and just do something like )))) 

Semi-relevant International Anecdote: (this being my my 2003 self)

I learned two new things playing Pictionary with Germans. One thing is that for them, Aladdin's lamp is more of a vase looking thing. The other thing, though, is really big, and might also be a Europe/USA thing, not just English vs German...the Germans have no word for the opposite of smile. And maybe neither do the British. If you look up "Frown" in the Oxford English Dictionary, it talks about wrinkling the forehead, and doesn't mention the mouth at all! They would never come up with a phrase like "turn that frown upside-down", it just wouldn't make sense. I'd love to hear from any British or European folk who can confirm this; it has kind of big implications for the iconography of the different cultures. (Like in Pictionary, the Germans will spend a lot of time drawing wrinkled foreheads...)

Of course, there's a lof differences in how different culture do Emoticons - like the Japanese who orient stuff vertically, ala (^_^) - and of course got into expanded alphabets, allowing seriously fun stuff like ¯\_(ツ)_/¯

what is code?

Paul Ford on a whirlwind from start to finish What Is Code

Had some nice bon mots:

"Code is inert. How do you make it ert? You run software that transforms it into machine language."

Some parts hit home:

Programmers carve out a sliver of cognitive territory for themselves and go to conferences, and yet they know their position is vulnerable. They get defensive when they hear someone suggest that Python is better than Ruby, because [insert 500-comment message thread here]. Is the next great wave swelling somewhere, and will it wash away Java when it comes? Will Go conquer Python? Do I need to learn JavaScript to remain profitable? Programmers are often angry because they’re often scared. We are, most of us, stumbling around with only a few candles to guide the way. We can’t always see the whole system, so we need to puzzle it out, bit by bit, in the dark.

I was interested on his view on frameworks, he kind of argues both sides, con-:

So what’s the downside? Well, frameworks lock you into a way of thinking. You can look at a website and, with a trained eye, go, “Oh, that’s a Ruby on Rails site.”
[...]
Frameworks have an obvious influence on the kind of work developers can do. Some people feel that frameworks make things too easy and that they become a crutch. It’s pretty easy to code yourself into a hole, to find yourself trying to force the framework to do something it doesn’t want to.

but then pro:

Frameworks can feel a little insulting, because they anticipate your problems and are used by thousands of people. They imply that yours are common, everyday problems, rather than special, amazing mysteries that require a true genius to solve.

Good stuff. 

easy-peasy html 2 pdf

PDF can be an annoyance at times, but it's usually not terrible. It's convenient because it is widely viewable and can embed images and styles and what not. If you're distributing information via email, those factors can make it a win.

Pdfcrowd is an easy way to make a PDF from an html file - it seems to be pretty darn robust in the HTML it handles, from my 15-year-old HTML of my blog to a scheduling table that used a ton of absolute positioning for elements.

The site can be used as simply as entering a URL, but the page I wanted was password protected. So I "Save Page As"d in chrome, then made a new folder containing the html document and its supporting files, zip'd that, uploaded at pdfcrowd and got something like this:

(or rather, that's a screenshot of a PDF reader looking at a parallel process for my public site.)

The free version adds the watermark/site name at the bottom and doesn't have many formatting options, but for quick and dirty it can't be beat.

In the comments Jeremy pointed out that the standard OSX Print dialog has a "Save as PDF" option which is even more convenient, but makes a printer-friendly ink saving version, where colored backgrounds get replaced with outlines. Good to have both techniques in mind!

useful functions in js

7 Essential JavaScript Functions. I really like how this one shows you the code, rather than just bundling it in some kind of library. Transparency is such a good thing.