Tuesday, June 25, 2019

cognitively loaded

Forget monoliths vs. microservices. Cognitive load is what matters.

I do think many engineers forgot about "cognitive load".

There's also a difference of opinion if brining in a tool kit is more likely to reduce the cognitive load ("hey look, this does the work for us so we don't have to learn it!") or, thanks to the Law of Leaky Abstractions, increases it (we still have to know what the toolkit is doing, and how it's doing it, all the way down, in case something goes wrong.)

For the user experience too... stuff like Fitt's Law gets all the attention from the stopwatch brigade, because the millisecond increase is easy to measure - but stuff like cognitive load tends to be trickier to track.

Friday, June 21, 2019

conditional classnames

at work we're switching from classNames to clsx for making a conditional-driven classNames string. Said to be much lighter weight. In both cases it seems weird how much the library lives the "be liberal in what you accept" mandate, like this example from classNames:
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

Tuesday, June 18, 2019

rant: MacOS modifier key hell and stupidity with the task switch

Rant I posted in the Lost In Mobile WhatsApp group:
Man, why are MacOS modifier keys such a hot ball of flaming fetid dumpster garbage? I was idly searching "is there anyway to get cmd-tab to act more like clicking on the dock and open a window if there is none"  (and that's a big design fail in MacOS I'd say- returning to the app from a quick cmd-space Spotlight command also does the logical thing of opening the main or a blank window if nothing is open... 
According to StackExchange you can "Cmd-Tab to the app, but then, before releasing Cmd, press Alt. Then release Cmd while holding Alt. The window should pop open." but that understates the complexity... "alt" is actually not its own damn key, it's an (ironically) alternate option for the option key - you have to hit "fn"! So, holding down fn-option-command-tab, and then release things in the right order to get it to work... what a mess.
And in exploring Keyboard preferences to see if maybe there's a way of fixing the shortcut, I see I can also "Tun Docking Hiding On/Off"  is  ⌥⌘D ... trouble is.... ⌥ is not even labeled on the modern keyboard, it's secret, old school code for "option".  What kind of esoteric nonsense is this? It's like a secret handshake just to understand what the preference means.
People suggested HyperSwitch, a cousin of the HyperDock app I've grown to dig (mostly for its window wrangling keyboard shortcuts)... that does the Right Thing of opening a new finder window or restoring the Calendar app window if I happened to close the window itself - which, again, should be a BLEEDIN' OBVIOUS thing to do especially since the dock and spotlight do just that, and the usecase for "switch to no window" is ridiculously small. Also HyperSwitch adds option-tab that cycles through windows instead of apps... I used to prefer old school Windows task/window centric approach but now I find it faster to use Mac's app-centric point of view.

sliding horizonal carousel

Colin Lord's How To Create Horizontal Scrolling Containers seems to be a thoughtful guide to making a horizontally scrolling panel, like for a carousel... (pretty good for a first pass, I think I might need something more advanced for the "snap-to" though)

Friday, June 14, 2019

what's old is new again, sort of, a walk down memory lane

At work someone mentioned a legacy code base used XSLT to transform XML. This caused me to recoil in horror: the fierce restrictions XSTL imposes (variables can't actually very, and they are super-tightly scoped, so sometimes you have jump through hoops and restructure to do the same thing with different inputs) made my developer life miserable for a number of months at a consulting gig.

But another engineer said he liked XSTL; in particular he couldn't think of many template things that allowed step by step debugging.

Thinking of other examples of debuggable templating, I remembered old school JSPs - the first generation, where you would jump back into java for your loops and conditionals and what not:

<div class="holder"> 
<!-- actually this might have been before CSS being widely used... -->
<% if(someCondition) { %>
    <b>IT IS SO TRUE!!!!</b>
<% } %>
</div>

Obviously that's a bit ugly, the mix and match of those code snippets, where the first one kind of leaves the open curly brace hanging...

But one cool aspect is the JSP would be converted into the .java code of a servlet (basically all the html got stuffed into println() statements)  and you could inspect it, and I suppose throw a debugger up in there.

Later, you got the JSTL. Here, the concept of "we can build fancy tags and stop having to duck into nasty old Java, so you ended up with code like
    <c:if test = "${salary > 2000}">
         <p>My salary is:  <c:out value = "${salary}"/><p>
      </c:if>
There's a kind of engineer would would say this a big improvement. I am not that kind of engineer. Where as that kind of engineer might see it as beautiful to be able to keep everything in the same mode of tags, I saw it as A. another syntax to learn (to use the tags) and B. another complicated API to use (when you wanted to write your own tags.)

Anyway, fast forward a decade, when more and more stuff is moving into the browsers... and you see Angular going down that JSTL path...  with slogans like "what html5 would look like if it were designed for making apps" (well, some slogan along those lines.) But it had the same two fisted problem of how every tag you make introduces its own syntax, and then the API to make those new tags was, again, very complicated.

And then React came into ascendency. As always, the whole trick to these things is "how do we mix in our DOM and our logic", and the preferred way with React is JSX, just letting the tags sit there (frankly, with later ECMASscript  ` ${coolstyle}` quotes, I don't think JSX is as important as it was at first, but maybe I'm just a heretic. But still, I see a positive similarity in this kind of React and early Servlets - with the exception that React encourages component based thinking, while servlets were page-based, and so each servlet would tend to carry its over head to display the header and wrapping code one way or another. 

I guess overall I think it's odd to have one mode, "tags", both for conditional logic and stuff parsed serverside or in js space (as with Angular) and other stuff with visual or semantic meaning that stays in the DOM. I don't mind lerping things as tags quite as much in React, because it is pretty steady where tags are nouns (i.e. DOM objects or things that become DOM objects) and not verbs (loops and conditionals)

Tuesday, June 11, 2019

trivial invoice tool hack

I've been doing more and more Porchfests, and most have some level of budget for my web design, engineering and hosting - which means I need to send out invoices.

There are several free online tools out there, but all with the little bits of UI weirdness that made me not like them, or they wanted me to sign up or some crap, so I decided to make my own simplistic hacky tool: https://kirk.is/tools/invoice/

The form populates itself from any GET parameters, and there's a button at the bottom to submit the current form and generate that GET/link for the current contents. All the inputs look like regular text, and so you can either make a screenshot and then send that, or put it in a PDF, or maybe print the page to a PDF file (the make link button will hide itself). Plus of course you can save the link with just your info, nothing specific to the client, and use that to start with each time.

Here's the link with the stuff filled in...

Again, no rocket science, but I think the idea of doing everything as a link is a little clever.


Thursday, June 6, 2019

MacOS hint: better cmd-space living through restricting what Spotlight searches

I'm messing with having the Dock autohide. I used to have strong feelings about the utility of the dock vs taskbar but now I realize the Dock is just taking up precious screen space and not offering much value, since I use Spotlight (aka "cmd-space") to launch everything, and usually cmd-tab to get back to open apps.

But I was a little irritated with the sheer amount of crap Spotlight was searching - I never think of it as a "document management tool", just an app launcher, so the plethora of obscure stuff it would present for a text search was a bit distracting.

Bob on The Lost In Mobile WhatsApp crew pointed out you can go to System Preferences | Spotlight and weed that down to something more reasonable:
Even here, the sheer number of options seems to point to some level of categorical confusion. Like, Calculator isn't an app? (oh, I see- I think it's the ability to type in a simple math problem.) Or "PDF Documents" and "Spreadsheets" are a separate category than "Documents".

It's interesting how Spotlight (and its equivalent from the start menu in Windows) is so powerful. In a way it seems like retrograde, like a return to the command line for everything, but it combines the fluidity of typing with the multitasking of modern computers, and the sensible and forgiving autocompletion of, say, a recent browser's Address bar...

Sunday, June 2, 2019

lifehack: sort your todos by benefit

M. Lazer-Walker tweeted:
I don’t remember who gave me the idea, but I’m SO much happier now that I’m framing my task manager in terms of what benefit I’ll get from doing things rather than having an endless list of tasks I “need” to do.
Interesting idea!

Saturday, June 1, 2019

inventory your 32-bit MacOS apps for when life becomes 64-bit only

If you're a Mac user, you may be getting used to seeing warnings like this:
Much like with what happened with iOS, 32-bit apps will no longer be supported.

(For someone with packrat tendencies, this is a bummer! Also I have a pile of indie games that will need special care to run in the future.)

Bob on the Lost In Mobile WhatsApp channel mentioned you can find out what apps are on your system now that might not easily run in the future:
1. Go to "Apple Menu | About This Mac"
2. On the "Overview" tab click "System Report..."
3. In the left column scroll down to "Software > Applications"
4. You can sort on the rightmost "64-bit" column and look for the "No"s.

Wonder when Apple will move away from Intel chips for Macs and what the transition will look like.

Tuesday, May 28, 2019

taking for granted: URL bars and spellcheck

Just a random thought- if I were timeshifted back a decade or two and had to use the browsers of the time: one thing is how much people got used to one input box that is both the URL as well as a search box. Also, it's kind of cool that spellcheck is now near ubiquitous - I guess that extends beyond the browser and into the OS.

Saturday, May 25, 2019

vs code extensions i like

I'm realizing that I really need to get my mojo of making small things in React from scratch (just for practice), I went back to my old Hello, World in Parcel - I was frustrated that my home laptop's version of VS Code wasn't trivial to set up so that it was prettifying like my work machine, and a few guesses at what extensions I might want were R O N G wrong.

So fwiw, at work I've been using:

  • Babel JavaScript
  • ES7 React/Redux/GraphQL/React-Native snippets
  • Prettier - Code formatter
  • GitLens - Git supercharged
And I've grown to love that editor.formatOnSave setting...

Friday, May 24, 2019

css gradients, fun and easy

PorchfestMV, Martha's Vineyard, is the latest addition to my small legion of porchfest websites.

They used one of those "Free Logo" sites (honstly, more like $30-50 if you want to actually use it) and came up with:
Not setting the design world on fire, but serviceable. And the use of color gradients provides an easy visual hook for the website:


To make that bar, I made sure the wrapper div has a style position:relative, and then something like
.colorbar {
    height:100%;
    width:10px;
    position: absolute;
    left:-20px;
    background-image: linear-gradient(green, yellow, purple, red, blue);
}
I avoided ROYGBIV order for now, and might go back to color pick the actual colors the logo uses, but for now it's pretty sharp looking, and easy to code.

Monday, May 20, 2019

weird flex but ok

Guess 'cause I'm still getting over this fever, but it took a few stabs for making a sponsors display like:
(Looking at it now I realized it would have been a decent candidate for grid or even table, though it's nice that flexbox means you don't have to think about lining up with a row-like object)

I admit I'm falling into bad habit of "px" and non-semantic markup, but Oh Well...

(it is sad that it's 2019 and centering vertically isn't an instant no-brainer)

Anyway: markup like this, with "texty" for a sponsor that has no img:

<div class="sponsors">

<div class="texty"><div>Barry's Village Deli</div></div>
<div><img src="/img/sponsors2019/fastsigns.png"></div>
<div><img src="/img/sponsors2019/Justnextdoor.jpg"><div>Just Next Door</div></div>
//...
</div>
And then CSS like


.sponsors {
    display: flex;
    flex-wrap: wrap;
    width: 845px;
    margin: auto;
}
.sponsors > div {
    margin:20px 2px;
    width:270px;
    height:270px;

    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    
}
.sponsors > div > div {
    text-align: center;
    width:100%;
}
.sponsors .texty {
    color:white;
    background-color:#2b809e;
    font-size:1.5em;
}
.sponsors img {
    max-width:250px;
    max-height:250px;
}

Saturday, May 18, 2019

Spacewar!, exclamation point and all

I am fortunate to be Facebook Friends with Matt McIrvin - as you can see on his blog we share interests in old video games and he has lots of interesting things to say on the topic, not all of which makes to his blog.

He recently posted this video on the PDP-1. The PDP-1 was a computer system of a lot of firsts, including the first programmed video game, "Spacewar!" (in the 1980s, may aspiring geeks learned the story of its development in Steven Levy's book "Hackers: Heroes of the Computer Revolution" - I'm also lucky enough to share a Science + Spirituality reading group with Jack Dennis, one of the characters in it.)

I cued up this video to the Spacewar! section:


The game had a huge influence; you see it's sense of space motion and blasting in the early 80s hit Asteroids and then its 1;1 combat explored deeply in the 1990 game "Star Control", to name the two most obvious examples.

I found some interesting blog posts by Owen Macindoe on the MIT Game Lab site, back in its heyday as Gambit, as they go on a deep dive of the old MIT code:
Investigating the Spacewar! Source
The Night Sky in Spacewar!
Reconstructing the Vector Graphics in Spacewar!

In the video, we see bullets colliding and cancelling each other out - that's a detail that cheap duplicates of the game often miss (possibly being computationally expensive!) but that adds an important defensive aspect. It's also related to something that's always bugged me about the game: if one rocket ship is short stubby and the other long and sleek, isn't that unfair to one player? The answer is probably related to this explanation given by undergraduate Kaivan Wadia in a final blog entry on their work to reconstruct the game on Arduino, The Peculiar Spacewar!:
We finally decided to implement the collision algorithm used in the original game. The original algorithm considered imaginary circles around the spaceship and detected whether any object capable of blowing it up was within that circle. This resulted in a slightly mysterious effect where torpedoes could pass through the spaceship occasionally. Sometimes two spaceships could pass through each other at certain angles. A spaceship could also be blown up by a passing torpedo that was not going to hit it, but was simply within the circle. 
That jives well with this line in the commented source:

 000016 006000 6000  / collision "radius"

from my experience handcoding a lot of games, that's usually a telltale of some fast to calculate but rarely distractingly inaccurate math to know when things hit.

don normalization of user friendly design

Don Norman on user friendly design for the elderly - previously I responded to his "How Apple is Giving Design a Bad Name". I have less to say about this, but I'm glad he's giving more attention to how things look, how superficially it's good when things seem sculptural and not like medical devices.

Don Norman is famous for his book "The Design of Everyday Things". Ironically it didn't originally follow its own maxim of "function over form", since I knew it as its earlier title "The Psychology of Everyday Things" - a clever name that let him use its acronym "POET", but one that created much confusion for bookshelvers, many of whom weren't sure if it was going under psychology or design or what.

Saturday, May 11, 2019

human physiology and the art of way too much bass

I needed some new headphones and when I was perusing the options at Best Buy I discovered Skullcandy Crusher Wireless Immersive Bass Headphones. These have powered built-in subwoofers and sport a physical lever that goes from "Not Quite Enough Bass" to "WAY WAY WAY TOO MUCH BASS" - like you're at the restroom at a dance club and the pile of dancefloor speakers is just on the other side of the cinderblock wall.

I'm a tuba player, and I don't know if my affection for bass springs from that, or if it's a special case of how I like things that are easy to "read" without paying attention to nuance. Research supports the idea that Bass makes you feel powerful, so I don't think it's too much of a stretch to say bass-y head phones (especially combined with my "Psyched" mix at work) is a form of self-therapy. (More on our love of and response to bass.)

Thursday, May 9, 2019

ux grumble: force touch

For me, the decade's biggest, dumbest "what feature can we add in this year so our new phones seem worth the upgrade" is Apple's Force Touch / 3D Touch.

Who ever thought "man, what I really wish I could do is have to jam my finger HARDER into this flat piece of glass"?

The fact that it's not on all iOS devices sets up the problem - it's not on any iPads, and Apple was comfortable leaving it off the iPhone XR. That means the gesture is always going to be for bonus features and extra functionality - never for the central interaction. iOS (and Macs) famously shun "right clicks", so some apps try to use the Force Touch for context menus - "shortcuts" that actually take longer because they are based on an uncomfortable gesture.

It also raises the question of whether including hardware support for this "feature" interferes with Apple's incessant drive towards thinner and thinner devices - if the need to put in this legacy thing is stifling other technologies that might theoretically be added - like Apple Pencil support... (a long shot, but a boy can dream.)

The trouble is, having to press extra hard intuitively indicates extra urgency, semantically it carries the idea of doing more - not extra foo-foo stuff. There's a fundamental disconnect in the gesture and its use. In apps that don't have a context menu, a simple tap will open up the item (probably with options to edit) while a hard jab pulls up a weird, read-only zoomed in version of what you were already looking at. But like if you're rearranging your homescreen icons... the old "tap then hold" gesture way to easily gets highjacked when the frustrated user presses in just a bit too hard - so instead of the old icons trembling with anticipation of their new home on the screen, you get a useless menu with a single "Share this app" item - probably the least useful, most weirdly self-promoting menu item in all off iOS.

It's a mess. Gestures are a minefield of unintended consequences on part of the user, and this half-implemented extra avenue of input just isn't helping.

UPDATE: looks like the gesture is on the way out anyway. Good riddance!

Wednesday, May 8, 2019

burn it with fire: css hacks for a js-free messaging client

Oh dear. css-only-chat is a bizarre project that creates a crude, click-each-letter asynch chat client without JS - just CSS.

The README explains the trick - CSS won't load, say, an imag for the active state of a button until the button is active. So we have an easy way of alerting a server a button has been clicked. Combine that with old-school "comet"-like never-really-finish-loading-the-page, keep-the-connection-open tricks and then we can update the page as well- both to see the other person's chat and to reset the buttons since they would otherwise be one-click-only wonders.

Similar CSS-lazy-loading techniques can be used for a crude keylogger or to track mouse movements even when js is disabled.

Thursday, May 2, 2019

programmatically making icons in p5

Last year for Porchfest, I made a little P5 to generate icons I could use in Google Maps.
https://editor.p5js.org/kirkjerk/sketches
Here is this years version of the code, that makes icons A-Z and P0-P9:
//maybe run at https://editor.p5js.org/ 

const targets = [];

function setup() {
  createCanvas(27, 43);
  
  //A...Z
  for(let i = 0; i < 26; i++){
    targets.push(String.fromCharCode(65 + i)); 
  }
  //P0 ... P9
  for(let i = 0; i <= 9; i++){
     targets.push('P' + i); 
  }  

  rectMode(CENTER);
frameRate(4);
}
let c = 0;
function draw() {
  clear();
if(c < targets.length) {
  icon(targets[c]);
  }
  c++;
}

function icon(t){

  stroke(255);
  strokeWeight(2);
  fill(128,128,255);
  
  
  beginShape();
  vertex(2,2);
  vertex(width-2,2);
  vertex(width-2,25);
  vertex(width/2,height-2);
  vertex(2,25);
  endShape(CLOSE);
  
  textAlign(CENTER);
  fill(255);
  noStroke();
  textSize(16);
  text(t,width/2,20); 
  let filename = "icon_"+t+".png";
  print(filename);
  saveCanvas(filename,"png");
}

the math behind hofstadter's law

Erik had a thought- or rather, a tweet:
I suspect devs are actually decent at estimating the *median* time to complete a task. Planning is hard because they suck at the *average*.
He then went on to explain Why software projects take longer than you think – a statistical model.

Very very roughly, it's the (almost predictable) outliers that will mess up your plan - easy stuff stays more or less easy, but the hard stuff gulps up all the time.

Thursday, April 25, 2019

ow it hertz!

Reading this tweet thread about Hertz suing Accenture for a failed massive project is interesting.

clever "nobr" for typography finesse in responsive design

Work is shifting to a more designer-centered approach.

On a new page, we had a headline with an ampersand, along the lines of:
Getting to Know Our Dedicated & Talented Professional Staff

Our Director of UX was wondering that if we could take the line that was breaking after the ampersand like this:
Getting to Know Our Dedicated & 
Talented Professional Staff

and switch it to the more typographically standard
Getting to Know Our Dedicated
& Talented Professional Staff

Easier done than said, right? Just put a <br /> in there after "Dedicated" and call it a day? Well, no, I realized after a little bit - there's a risk that mobile might have different ideas about the break:
Getting to Know Our 
Dedicated
& Talented Professional 
Staff

Whoops!

But what's the fix? I have tags and CSS to say "don't line break this" but not so much for "break here first if you have to". My first thought was "huh... maybe a media query so that linebreak only appears when the width is wide enough to be needed?" but that seems hacky.

Turns out "don't line break this" is what we want - we want to keep "& Talented" together as a unit, so either "Dedicated & Talented" all fits on the line, or "& Talented" starts the next one.

The oldschool, not-quite-standard way is to use <nobr> - a more modern way way (but still has non-semantic markup) is a span with the style "white-space: no-wrap;".

Wednesday, April 24, 2019

order in the court

Historically my company had the inmates engineers running the joint, but as the company has matured, we added specialized product managers, UX, and now, dedicated designers.

Designers and UI engineers have to establish the boundaries for "pixel perfection" vs. what is expedient in the current code base, and with ideas such as making things as responsive as possible, even when there are varying designs for mobile vs desktop.

In one job (which of course was part of a hair-on-fire we need to get this out tonight rush) the desktop looked like this:
And the mobile might collapse that into two columns:
The astute might observer might notice some tweaking going on - especially in the order, assuming these were flexbox'd or otherwise allowed to flow/ wrap.... from a designers point of view, it's maximizing (or rather, minimizing) use of space, and also with an eye toward keeping matching icon colors apart.  From an engineers point of view, it's a bit messy to have one code base that can do either...

Anyway, the short of it is, flex-box items can have an "order" CSS property that let me line up things in the most space efficient way. Now, my good engineer soul thinks that feels a bit awkward to have to apply to all items, but to get a little responsive mojo working it's pretty handy - there was already a parent class that was different in mobile mode (this part of the site is reactive though we are designing more and more in a responsive kind of way, so we could also use media queries) so just applying the order in the mobile case was easy.

Tuesday, April 23, 2019

imagemagick fixed heights suitable for thumbnail sheet

A while back I mentioned using ImageMagick to make CSS thumbsheets.

I do this for the Somerville Porchfest website and every year it feels like a wrestling match - with all these bandphotos some are "quirky", either portrait mode when everyone else is landscape, or else just "really weirdly long landscape.

My process is a bit clunky, but I use so many command-line-ish tools I'm not sure it's worth automating fully... instead I generated a webpage that constructs shell commands to run by hand.

The first step is to take the raw JSON from the Somerville Arts Council site and parse it into a file I call "bandjson.js". My webpage shows me a list of all band IDs and the corresponding thumbnail URLs that I can inspect by hand for any weirdness.

For each of those I extract the extesnion (usually jpg or png or JPG or jpeg or JPEG)  then I construct a
`wget -O ${bandid}.${extension} "${thumbailurl}"`;
which gathers all the files locally and normalizes the filenames to bandid.ext

I make a bit of .js then that maps bandid to bandid.ext

The painful bit for this year was working out this normalization, say for 46702.jpg:
convert '46702.jpg' -resize 100x67 -background white -gravity center -extent 100x67 '46702.jpg';

the background/gravity/extent arguments are what makes sure the image is at LEAST as big as those dimensions (centered on a white background in this case). Without that, I'd have to do weird work to read and track the size of each thumbnail separately.

After that I make a single honking big Imagemagick command line argument to glue them together, using \ at EOL so I don't overrun my shell's limit for single commands
convert \
 'bandid1.ext'\
'bandid2.ext'\ 
-append thumbsheet.jpg

I then build another js file mapping bandid to it's offset # in the sheet- I can then multiply that number by 67 (the height I requested on the convert operation) to generate the CSS - each image is width 100px, height 67px, and then the background for say the second one is:
background: url(thumbsheet.jpg) 0 -67px;

I'm not positive if all the work is worth it, maybe I should just have the 153 images on the page, but that feels weird to me still.

Friday, April 19, 2019

use your words, gadgets!

For a few year I've been partial to BeatsX headphones - honestly all wireless audio solutions lack gravitas - the Borg look of oldschool Bluetooth handsfree things, the double Uhura of Airpods - even over-the-ear big headphones look like earmuffs, or maybe Lobot from Empire Strikes Back. The "librarian eyeglass holder strap" look of BeatsX weren't so bad by comparison, and I liked how they use the same Apple W1 chip as Airpods - but you can take one out for a bit without having to hold it or put it away or have your music stop.

But I'd been through too many pairs - lost one, misplaced another, and then my main ones started losing sound on one side. (The build-quality / feel of them is great, but the durability just so-so.) So I went to Best Buy and discovered cheapish (~$30) earbuds of decent quality are now a thing! I bought a pair of Sony's WI-C300. This review agrees the sound quality is pretty decent, which is all I need - I tend to use other things for music, and have these for walking around to podcasts, and despite being a musician I'm not much of an audiophile.

Overall they aren't as comfortable as the BeatsX - the wire is a bit short, and that wire's skinniness is much less appealing than the Beats ribbon, and the buds don't have magnets (in theory useful to complete and secure the "necklace" feel when not in use, in practice it's just pleasing to have magnets to play with) but in one simple way it's much more comfortable - when you power them up, a chime plays and you hear a voice say "power on". As the things connect to your phone, another chime plays and it says "bluetooth connected".

That is SO much better than the little musical blurbles BeatsX play. There's kind of one that goes up to say "on" or something, and another to say "powering down", and maybe some chirp when it connected to the phone but I was always having to yank the control bit around to look and see if the little light on it was shining or not, because it was pretty ambiguous. (This is not helped on modern iPhones, where they don't have display area to spare to always show you if you're in headphones mode or not.)

Good old Bluetooth plus a voice explaining the status is way better than anything I thought I was getting from Apple's W1 chip plus nearly meaningless musical ditties! I think there's a simple UX takeaway here - just use words! (Ideally with an option to change languages, but I'd rather have a human language I didn't know than try to decode the musical language of Beats designers.)

(FOLLOWUP: After getting the Sony's, I also grabbed a pair of neon green iLuv Sound Air 2 - it also has simple voice feedback, but the connection wire is closer to the flat ribbon of the Beats, also a bit longer than the Sony one.)

(FOLLOWUP TO THE FOLLOWUP: having found the BeatsX I misplaced, I'm going back to them. Ultimately, the slightly greater length of their chord relative to the other ones, along with having two symmetrical battery-ish packs rather than one in the back, means they're more comfortable - especially when not in use - they will stay put as a "necklace" while the iLuvs will slip and slide off. Still, I wish there was an option to have a voice say power on/off or connected...)

Sunday, April 14, 2019

really old web design

I was looking at the late-90s rendition of my website, back when they were called "homepages" (Hooray for the Internet Archive Wayback machine! That site,along with the original versions of Google, Youtube, and Shazam, are things where the magnitude of what they were doing just flabbergasted me and still impresses.)

Anyway, I had to pull up the devtools inspector, because it wasn't clear at a glance how I achieved the layout of my photos page - it has a kind of pleasing irregularity to it. I knew it was tables, of course - turns out it's a rough two-column layout, with on-again-off-again use of the img align tag - I may have just been playing around with how to sort-of-align a set with portrait, landscape, and square cropped photos.

I'm thinking of this time in part because of the 25th anniversary of Tufts sQ!, my college acapella group. And I remembered that my early web designer self was strongly influenced by my camrade Erica's sQ Official Homepage - both the "columns but not rows design" and the use of transparent-background photo icons (in particular, the airplane on that page) were strong influences on my early sites.

Sometimes when I'm looking at my old raw HTML I'm delighted to see it all in caps - a habit I believe I got from Perl and other technical documentation at the time. )It's not clear if I had outgrown the habit when I designed that page)  These days it's unacceptably uncool (probably even deprecated, since xhtml-stuff was in all lower case, I think by mandate) - on par with using tables for simple flexible layouts - but honestly, in an age before fancy highlight editors, it made it very easy to discern what was content and what was markup...

Wednesday, April 10, 2019

the underbrush

As I go through and groom old blog entries and see just how many broken links predominate, how the old geek vision that "urls can be forever" is almost completely unrealized, but sometimes I can use a search engine to find a replacement for a yanked Youtube video, I realize that one purpose of Google is weeding out the underbrush of fallen sites, if search wasn't a constantly renewed process and we relied on old archives we'd be choked in a forest of dead wood.

Tuesday, April 9, 2019

UI hall of shame: Samsung NU8000 onscreen keyboard

Last December I bought myself a Christmas gift, a lovely 65" Samsung NU8000 television. (I miss my old projector, but given my space, this is the smallest size that still feels like a billboard, and Wirecutter likes the low-lag mode of these for videogames)

Overall its UI is pretty grand - much better than the older Samsung my mom has - all the apps are easy to get to and most are of good quality, and the shortcuts from the main screen generally make sense (and I'm not TOO worried about the data collection I'm sure this beast is running on me.) But the onscreen keyboard they use for some of their setup/config is THE #&$#(*$@& WORST, especially for entering a password. 

It's kind of a standard "use the cursor up/down/left/right, select the letters via an onscreen keyboard" (laid out like a normal typing keyboard) that video game console owners have put up with for a decade BUT -- 8 letters or so into typing a minium-length-8-character password, say -- once you select a letter, the space immediately to the left of the character you just typed becomes a checkbox, a short cut to "I'm all done".... so if you're bopping along, trying to efficiently enter your password, and it starts with "ireallyreally" in it... you enter the r of second really, that's the eighth character - meaning you've meant the minimal wifi password length, so then when you go to move the cursor to the left, you're not over the "e", you're about to select the "I'm all done" checkbox.

And you hit the center of the button thinking you're on the e, and the thing thinks you're done, and takes away the screen to try out your (of course incomplete) password, and you have no idea what is going on, but you're on a totally different screen entirely, and you don't know what the hell happened, so then maybe you repeat this dance two or three times, because it's such #$#(*@ STUPID HALF-BAKED DUMB@#$#@ INCOMPETENCE in trying to make a "helpful" - yet fundamentally unpredictable -User Interface

A core of "Tao of Programming" is the "Law of Least Astonishment", i.e. a program should always do that which surprises the user least - and this is a FLAGRANT violation of that very simple principle.

Of course, even once the user has overcome the surprise of a barely-useful shortcut showing up where there wasn't one before, to REMOVE the "helpful" checkbox you simply go select another letter and the checkbox goes away- but it comes back, so for the rest of the text entry if the next letter you wish to type happens to be to the left of the one you just entered, you have to wiggle the cursor around to shake off the dang uselessly premature checkbox.

Programmers. They need to learn the difference between "can" and "should"

(Mercifully, the searches on the various apps like Netflix and Amazon Prime implement their own keyboards, free of this half-bakerd crap.)

Monday, April 8, 2019

ecmascript 6 is fire. i mean, it should be burned. (safely destructure nested js objects)

ECMAscript 6 has a lot of features. One of them is Destructuring Assignment with Deep Matching which you can combine with Shorthand Notation... so you can do something like

var { foo, bar: { baz} } = someCall();
which is the same as 
var tmp = someCall();
var foo = tmp.foo;
var baz = tmp.bar.baz;
 
One interesting note when you use that kind of destructuring is that the intermediate variables aren't defined - e.g. you don't get a "bar" in this case - "bar" is just a signpost to the structure
 
The problem is, things are very unhappy if "bar" is undefined.

I'm not sure if there's any cool syntax that might say "please destructure this, and just give me back an undefined for nodes I am implying should exists even if they having missing parent" (Because "is not defined" errors are so much harsher than mere "undefined" variables despite the superficial similarity.) 

So the boring way is to break the destructuring into steps and use object matching default values:
var {foo, bar = {}} = someCall();
var {baz} = bar;

As I ask about this at work, it's interesting how many devs I hear express some dislike for all the new synactic hotness. And I agree, things (especially curly braces) are weirdly context dependent and then there are tricks like destructuring with renaming
var { foo : bar } = someCall(); 
//same as var bar = someCall()['foo'];
that feel like a weird mix up of left operand and right operands - as if the meaning of the : has done a 180 relative to a "normal" object creation (e.g. var foo = { bar : 123 })

Saturday, April 6, 2019

eric was right - sometimes declarative rendering is better

I had a great tech manager Eric last year. He shared some of my inexperience with React and Redux and the concepts that underlie them, but he attacked the learning curve with gusto.

He told me how he made a learning/side project for a trello-like system, and for grins he implemented it with React (or maybe one of those Build Your Own Baby React systems) and then with more traditional methods. And he said, the declarative rendering system was miles ahead in speed and ease of use.

I didn't believe him.

Woe is me!

For my Porchfests side project, I needed to redo the Hourtron - as you can see with the (fairly simplistic but clean) 2015 prototype for it, the idea is you have a bunch of rows representing porches, and columns that represent performance times, and then you can drag and drop bands unto performance times / locations.

So for the first real implementation (2015-2018), I had it save all the performances on the page (aka "gigs") at once as a giant blob of JSON. I wanted to better support one band having multiple gigs, as well as be a bit more robust and be able to save each gig as it was set - I did a from-scratch rewrite (also figuring I was too pure of heart for JQuery, which was ok-ish for the drag and drop but was weirdly infeasible for the Ajax POST)

It was harder than it looked. In particular, these DOM blocks I had sometimes representing an unplaced band, sometimes showing a band at its gig - the IDs for gigs were server generated, and linking that gig id with the block in such a way that moving the gig time or place didn't generate a duplicate gig, was way tougher than I expected, and I realized the declarative method of saying "this bit of memory represents state, and the DOM can just reflect that as quickly as possible would have been great"... also the jQuery-free version of drag and drop reminded me that the "ghost" I use to show where a band will be dropped could still be handled as plain old javascript, so kind of a hybrid where the main block schedule was React-or-similar but the drag and drop was separate would have been fine.

Ah well, live and learn. I need to rethink my side project setup... I still like renting a cheap VPS and putting everything there, but I need to build up tools so that I can use tech that plays better with some kind of build system, rather than being spoiled by the "I save the raw file, reload, and run". Stuff with watchers and what not can get that feel pretty speedily, tbh, and then I have more options about the babel-ization and what not I use.

Friday, April 5, 2019

you may need jquery after all

Grrrr. Just blew like an hour on a pressing project, thinking I was too pure for jQuery--
You Might Not Need JQuery claims that
$.ajax({
  type: 'POST',
  url: '/my/url',
  data: data
});

can be replaced with

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

On firefox and chrome, this does not seem to be the case

My test script was
<?
$res = array();
$res['msg'] = $_REQUEST['bandid'];
print_r($_REQUEST);
print json_encode($res);
?>
and looking at the network panel, the jQuery version does what I expect (using the print_r to mirror what I passed in (i.e. the 'data' parameter in both cases is a simple JS object) and the XMLHttpRequest version seems to send nothing. Probably missing something "obvious" but too tired and stressed to deal with it now.

Wednesday, April 3, 2019

unpopular opinion: 'developers do their own testing' doesn't scale

Almost two decades ago, I ran into Mr. Bad's Things to Say When You're Losing a Technical Argument. My favorite was the shortest, and first on the list:
1. That won't scale
So, keep that in your back pocket.

Sometime over the past decade, the concept of "We don't need QA as a separate discipline - we can trust our developers, fortified by automated testing".

Almost exactly five years ago I wrote a blog entry about joel on software and the quixotic nature of complete testing . I still stand by most of what I wrote there - especially about how hard it is to get coders to bruise their own ego, and think outside the box.

But the "No QA" policy is so hip and trendy in tech - and yet I know of at least two companies following that path that are really struggling with frequent emergencies. And of course, it's pretty smart and productive people espousing it.

My current theory is that the idea that developers know enough about the holistic system to do a good job of knowing what will break - not just coding to prevent it, but then taking the next step of meaningful tests well "outside the box" of where they've been codin - only works with a limited scale code base. As a team grows and codebase ages:
A. you probably have a smaller proportion of "rock stars" than you had early on
B.  the newer people haven't witnessed the growth from the simple core to whatever gnarly forest you now have, knowledge of which helps in intuition and sleuthing
and
C. just the number of connections is increasing, exponentially or at least geometrically. There's just more there there! Maybe- just maybe- "developers do their own testing" doesn't scale across time and space.

This is why my favorite work setups involved a small group of dedicated QA folk. They were engaged enough to ask good questions (different from that "oh we'll let offshore QA bang on it overnight" I've seen elsewhere), smart enough about the codebase - and at a high enough level - to have a gut feeling for where a new change might be problematic. It's a bit adversarial (but in a congenial style) in a way that a coder finding their own bugs isn't, even if the coder has a reputation to protect.

Tuesday, April 2, 2019

php notes: a directory full of json

Like I said in 2015,
Good lord, I know I'm not impressing anyone by digging on PHP, but man does it do a good job making easy things easy.
For a while now, I've liked doing my serverside plumbing in PHP and keeping my UI options open in javascript.

One of my favorite robust poor-man-db's paradigms is storing flat JSON files in directory - roughly, a directory is like a table, and each file is row. (GUID-ish filenames acts as a rowid). There are some downsides (it's not easy to rearrange columns, reading in a whole table is a large-ish amount of file reads, etc) but it's super-robust, hyper-portable, easy to implement and simple to operate on the data without simple text editors.

And sometimes, I just like to squirt a whole dang "table" like this into a page - here's some PHP that I'm sure I've recreated many times that does that:
    function dirOfJsonToFilesToJsonString($dir) {
        $files = array_diff(scandir($dir), array('.', '..'));
        $guts = array();
        foreach ($files as $i => $file) {
            $raw = file_get_contents("$dir/$file");
            $guts[$file] = json_decode($raw, true);
        }
        return json_encode($guts);
    }
That comedy gem wraps the full table contents as a JSON object/map string, and then I can let javascript do all the UI work.

Again, no one is impressed, but I'm one of those who believes in taking PHP seriously ;-)

Wednesday, March 27, 2019

nouns and verbs redux... or rather, react

For a long while I've been framing some of the difference between my mental modeling and that of another population of developers as the nouns vs verbs.

I thought of that today - my task was to put some analytics to monitor when our main "hamburger" menu was opened. I poked around the React inspector and at the source and couldn't see anything that looked like an "open menu" event. Investigating with the other inspector tools I shortly realized the trick employed was to have the clickable burger bit be a
<label for="anInvisibleCheckbox"> 
and then some CSS using the ~ sibling selector and the checked state put the sliding menu in the correct position, along with a easing/transition to let it slide gracefully into place.

It strikes me that the method they used was fundamentally "noun"-ish (i.e. the visible state depends on the checkbox) and that my thinking while hunting was fundamentally "verb"-ish - (the click causes an onpage action to occur) and so it took me a little longer than it might have to realize there was no onClick to be found.

I know I'm biased, but somehow the "invisible checkbox" feels like chicanery to me - not to mention, to do the analytics, I had to code to an imperative style, rather than the declarative pattern the invisible checkbox represents, anyway.

My thinking reflects my history as a web developer - from the bad old 90s when an entire HTML page would land as the result of some serverside CGI processing, and that's all you got, on to me  learning CSS and JQuery at the same time - a paradigm where the DOM is stable (more or less like the CGI days) but where Javascript with JQuery selectors could make changes to it at certain specific times, kind of an event-driven model.

This DOM stability is in sharp contrast to the Angular and React assumption that declarative nirvana is found by assuming JS memory is canonical, and that the DOM should be rejiggered as quickly and automatically as possible to reflect those structures. (And of course Redux swings back around to an event-driven way of thinking, but with formalizing manipulating the store/state of memory and not DOM.)

And making a smoothly transitioning UI (a critical bit of UX) uses those CSS transitions - still not my most fluent language, and still feeling a bit awkward. I guess it's because it's nouning a verb, so to speak-- or rather applying the adverb to the adjective....i.e. when you add an easing to a jQuery transition, you're clearly applying an adverb to a verb - change this state quickly, or bouncily, or whatever. Declaring it as a CSS transition - that when this adjective (e.g. the right: property) changes, it changes slowly, or mechanically, or whatnot.

I'm not saying my event-driven, DOM-centric, verb-ishness is superior - but knowing what my instincts are, and that they differ from those of some of my peers, helps me get in their heads a bit more and understand their presumptions and their code that much better.

Tuesday, March 26, 2019

the art of computer designing

The other week I went to a Boston Tech Poetics meetup (recommended if you're a coder or maker in the area!) One of the speakers was Zach Lieberman, who quoted this:
The work of past ages accumulates, and is remade again.
--Osamu Sato, "The Art of Computer Designing"
I don't think the book resonated as deeply for me as for him, but I could see it hitting the sweet spot if some creative person encountered it at the right age or in the right frame of mind. Used copies on amazon are like $600, but archive.org has a good copy online


Wednesday, March 20, 2019

crossbrowser regex danger (and the danger of chrome as your only test browser)

Today we found out the hard way that
return string.replace(/(?<!')'{2,2}(?!')/g,
(meant to replace double apostrophes with single, but leave 3 or more alone) will work on chrome but not Safari or Firefox.

Similarly, Firefox doesn't seem to support the //s operator for multiline matches.

So be careful. And don't just test in chrome!

Saturday, March 16, 2019

surf-tinged hardcore emo with a country twang and the problem of genres

The fundamental music genre list - my cousin Nathan posted this, I immediately thought of it in terms of a big problem for some of the porchfest websites I run - individual sites have to decide if "your band's genre" is a fill in the blank or a picklist. On the one hand I don't like to stifle bands (I mean, I guess in most of these taxonomies, the NOLA-influenced activist street bands I play in are... "Jazz", I guess?) but come on - "surf-tinged hardcore emo with a country twang" isn't really a genre people are likely to search on...

Wednesday, March 13, 2019

playful vr

This is a note I wrote to the group Boston Tech Poetics (formerly Boston Creative Coders)

Thanks to Adam and everyone who helped set up some great talks the other week!

I was so glad I shook off an urge to lose myself in my kindle until the "real" talks began - we have a nugget of this great little community doing really cool work here, and I'd love to see more - both what people are doing (like in the other thread) and also stuff, obscure or well-known, old or recent, that they think other Tech Poets should be aware of.

Zach Lieberman's work reminded me of two other artists I wish more people knew of: Some of his overhead projector / shadow stuff reminded me of Myron Krueger - he was working on amazing interactive stuff, most often w/ realtime silhouette / shadow data, and he started doing that when, like, "Pong" was the new hotness - but with a fervent dedication to keeping things real time. You can see a decent overview of some of his stuff here:
(Zach showing us Chris Sugrue's "Delicate Boundaries" was such a lovely extension of some of those ideas)

I like to see where ideas like these, either descendents or parallel thoughts, get commercialized. Way back in the PS2 era, "EyeToy" had some elements of that, of using simple webcam data to let you, say, fight off a big group of tiny ninjas leaping on you Maybe too this is all on my mind because I just got one of those PS4 VR setups, and some of the mini worlds play with some similar ideas...

At some point Zach was showing clips from software where people would draw something in a space, and that drawing would take on some kind of life - this reminded me of Takeo Igarashi's work.
He came up with this concept he called T.E.D.D.Y for making 2D sculptures by extrapolating from simple 2D doodles -
This got put into AMAZING commercial life with a game called "Magic Pengel". This was a PS2 joint project with Studio Ghibli (!!) and you didn't just draw static things, but fighting critters - as you drew, you indicated if this was a leg, or a wing, or a tail, or what, and then some super clever code animated what you drew and put it dancing and weaving in 3D space. Quite amazing! Unfortunately, the combat was just Pokemon-like Rock/Scissors/Papers turn-based battles. (A sequel, "Graffiti Kingdom", tried to make the creation system less loose and more engineer-y, I don't think it was an improvement.) Here is a Lets Play:

And while that video has loose, clay-lump drawings, apparently the sky was the limit in the hands of a skillful, determined artist:
I'm just blown away by this stuff. Going back to 2D, there was that "Crayon Physics" type games, and I see some more recent "2D physics from doodles" - but this 3D stuff was totally next level, and I'd love to see it in more applications - T.E.D.D.Y really bridged a gap from 2D inputs to 3D sculpture, and I don't even know what kind of black magic and animation genius about joints and physics Magic Pengel employed - I'd love to see a "Smash Bros" type physical combat with this idea (but I'm nowhere near smart enough to make it)

So what have you seen, either in the artists studio or gallery or on the store shelf (virtual or otherwise) that inspires you? What stuff based on Ollllld technology still inspires that "damn, how'd they do THAT?" And where would you like to try and put it in your own work?

Thursday, March 7, 2019

henry ford and the faster horse

UX Cliches and their honest explanations. My UX GF points out these are a bit free with denigrating users as "stupid" but other than that it's not bad.

Monday, March 4, 2019

css selectors cheatsheet

Decent little CSS selectors cheatsheet. Not sure I agree with the recommendations of not using ID selectors, and I think some of the example circles would have been better served by using class= and id= , but once you get to the more complex sibling-style partnerings it makes more sense.

Thursday, February 28, 2019

pac-man: get a grip!

Pac-Man: The Untold Story of How We Really Played the Game - intriguing description of how generations of right-hand Pac-Man players clutching the left side for leverage leaves its mark on the old upright cabinets.
Interesting how Pac-Man, which like Q*bert was button free, was ambidextrous. Nintendo famously put the crosspad under the left thumb, which may have heralded a switch in games away from being focused on rough movement and towards precision timing. (Continued with the WASD/mouselook arrangement favored by PC gamers- something I've never quite gotten into my skin.)

videogames and the modern ul techstack

On my "regular" (now almost two-decades-old) blog - Just Cause 3 as Psychological Self-Care. Interesting to think about how games' "you can do this and persistence is always repaid" might help counteract the frustration with UI tech stacks that don't do a great job scaling down into quick "throw these on your personal webserver" projects...

Monday, February 18, 2019

is dotAll you got? (frustrations with firefox multiline string matching)

There's growing discontent among developers with Chrome as a browser (and the risk of it becoming a kind of monoculture in the way IE was, albeit not quite as crappily and a bit more standards-compliant) and many are making the leap to Firefox. And recently I was delighted to see that the developer tools were pretty much at parity with Chrome's, and used many of the same UI patterns as well.

But I found Firefox was choking on some regular expressions I put into the backend tooling for my website.
SyntaxError: invalid regular expression flag s
That s flag, letting an expression like /(.*)/s match multiple lines (because it says to treat linebreaks as normal whitespace-ish stuff) was a critical tool going back to my Perl days...

So to quote T.J. Crowser in StackOverflow:
You are looking for the /.../s modifier, also known as the dotall modifier. It forces the dot . to also match newlines, which it does not do by default.
The bad news is that it does not exist in JavaScript (it does as of ES2018, see below). The good news is that you can work around it by using a character class (e.g. \s) and its negation (\S) together, like this:
[\s\S]
His examples then show `[\s\S]` replacing good old `.`. I'm happy to have the workaround, but man is that an ugly one!

I wish I knew more about the history here - feels like Firefox was sticking to the spec more righteously than Chrome, which I guess is fair enough, but why was such a critical piece missing from JS/ECMAScript in the first place? It smells a little bit like some religious war fallout, some coders didn't like multiline conceptually, or something...

p5 and figure-ground reversal fun

I have a notebook from when I was 18, the summer before college.

I had designed T-shirts for my high school's jazz band the years previous, and I guess the band was still the focus of tooling around with some design stuff, and so I made this:



I've always enjoyed handcrafting blockletters, and I believe I made these by drawing the 3D extrusion behind the letters and then just filling in the extruded bits on the page in front.


Anyway, I realized I can now have the mojo to get a computer to do most of the work for me, and so I made fgrtext: figure-ground reversal (the fancy word I saw for it on wikipedia's entry for negative space.) It's a little virtual toy to mess around with the words, colors and other factors.

I made it so you can bookmark creations - here are some designs I made for 222 Street Jazz:


BABAM!
 

and JP Honk:

You can view source on the page to see everything in one file. The core idea is pretty simple - keep drawing the letters repeatedly in the "foreground" color on a diagonal slant, and then switch to the background color and keep drawing the letters a few more times. There were some challenges in the P5 code for it - they have a library for DOM elements and oddly (to me anyway) you set their .parent() after creation of them, otherwise they just end up attached directly to the body of the DOM, which is kind of weird. (Also since they didn't seem to support textareas, it was pretty easy to manually set up the HTML for that and use vanilla JS onkeyup events to call my functions directly, a bit of mix and match.) One drawback to the sliders was I had to only pay attention to mouse moves withing the boundaries of the main canvas - slider adjustments were showing up as background/foreground movements.

Also I made creations in this system bookmarkable by putting all the parameters in a state object and then encoding the JSON stringified version of that as the hash at every draw(), and then reading the hash at start.

Another courtesy I do is using noLoop() to only draw when the state has changed - p5 is great for many things but processor efficiency isn't one of them.