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.

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

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!

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

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?

bauhaus party

Here are 3 from a series of Bauhaus-based logo redesigns:


(via lost in mobile)

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.

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.