snip snip snippets

 

https://component-party.dev/ - a comparison of some different UI frameworks by showing little examples of how they solve the same general problem. I do appreciate snippets (like in the form of Cookbooks or Phrasebooks) as a way of getting the basic feel for something.

the visible noun and the functional verb

Here's an article about a minimalist library I find intriguing: 

Why Alpine is the new jQuery and Why that is an Awesome Thing.

The age old challenge of web-based dev remain: what is the best way to mix the visible noun (ie. the DOM) and the functional verb (script), and the balance between what happens on the server and what happens on the client.

The HTML noun vs Code verb was true even back in the servlet/JSP age. JSP (Java Server Pages) was where the body of the source code was akin to an HTML page, but then you could add in code parts. JSP had two ways of mixing the nouns/verbs: at first you could just duck into <? ?> tags, write in Java, then have the stuff in between still be DOM. Later, there were standard template libraries that let you do conditional logic in new HTML-looking tags.

Personally I preferred the former approach; I like that there was one language and syntax for conditionals and loops (i.e. plain old Java) - the way that code blocks looked like code and HTML blocks looked like HTML, rather than everything being flavors of tags.

jQuery's solution (in a pre-SPA time) was: assume the DOM from the backend was pretty complete, and then we're just decorating (actually one sweet spot for it was the visible adverb of animations - generally more straight forward than transitioning things via CSS animation, which to me is getting your nouns to be your adverbs.)

Angular came on the scene and leaned heavily into the all-is-a-tag - but especially with early Angular.js, you had to build a lot of pipework.

The declarative paradigm of React (et al.) is an interesting variant on all the noun/verb relation. Its main point is you set up a relationship so your verb makes your DOM noun (based on your data noun) and then you don't have to worry about the deltas when the data noun changes; it's always redrawing from scratch.

Over time, Vanilla JS got good. String templates are extremely powerful, and when combined with .map().join("") doing declarative programming in the browser without a framework is now a viable option. There are huge implications for people who like to make evergreen low-maintenance projects.

Htmx is an interesting throw back to letting the server do more of the work (and not caring so much about what language is running there). What I find odd about that is 90% of what it's known for was handled a decade earlier via jQuery's  $().load(); function, but those partial page updates didn't get much traction most places.

So finally, here is Alpine. It's back to that Angular way of using tags (or rather attributes) for binding and content. It seems pretty hip! One thing the Vanilla JS approach of declarative programming doesn't cover is the automatic re-render, but Alpine seems to have that covered.

(I posted this on LinkedIn, Stephen Wicks said

Have you seen this site? https://ahastack.dev/

I did a small experiment with Alpine once, but putting js inside html attribute strings felt awkward to me. Looks like the article you posted shows the more natural way to do it.

 So that might be worth checking out.)

on super pac-man

Thinking about the game "Super Pac-Man"... a bizarre, playful, abstract, convoluted, artistic mess of a sequel.

Most notably, alongside the normal power pellets that turn the ghosts blue and let you eat them, there are green super pellets... when you eat those Pac-Man doubles in size and can bypass the locked gates, while the ghosts stretch and squash and can be passed by unharmed.

I never realized that that was supposed to represent Super Pac-Man taking to the sky until I read it somewhere. The game doesn't doesn't have a lot of internal consistency about that; the gates can be flown over but the walls still confine movement, ghosts I guess are also being flown over but if you combine the flight with a normal power pellet they will be eaten (Super Pac-Man swoops down just to gobble them up, maybe? Doesn't seem extremely heroic) Similarly, I have trouble seeing the squish and stretch of the ghosts as a crude form of "perspective" from Super Pac-Man's aerial view... to me it all felt more like a big drug trip, with the ghosts just freaking out over this giant Pac-Man.

When you combine all that with the way each maze is full of items rather than the abstract dot pellets of the original... its status as the "truer" sequel (i.e. designed by the original creator Toru Iwatani) than the more subdued Ms. Pac-Man (which came out earlier the same year) is really something. Especially since the original Pac-Man was so beautifully minimalistic, and in fact they left Pac-Man abstract on purpose - as Iwatani says

There was the temptation to make the Pac Man shape less simple. While I was designing this game, someone suggested we add eyes. But we eventually discarded that idea because once we added eyes, we would want to add glasses and maybe a moustache. There would just be no end to it.

(That quote from an interview with him in "Programmers at Work", now available online)

Here's a good video going more into the history of it: At around 9 minutes in it gets into the intermission screens, which kind of match the abstract, artistic vibe of it all, playing with visual size and scale with narrative as more of an after thought. (I guess that reflects the original's approach, though Ms. Pac-Man told more of a story.)

elections and bad graphs

 

Many people are deeply curious about the demographics of yesterday's rather startling voting results.

I think back to Edward Tufte and "The Visual Display of Quantitative Information", and the importance of making intuitive visual charts I'd say this CNN piece ,while providing some critical insight, fails in terms of clarity - for example:

It took me some pondering to figure out what I was looking at: each rectangular block is an *overlay* of the two voting patterns (D/R). So the height of the "roof" is where you see the winner-in-that-demographic sticking up above the votes for the less popular side.

I was pondering how to improve that. One obvious choice would be a stacked graph. Admittedly with so many totals hovering around 50 it might be harder to see who actually won (and the top of the stack, where it failed to hit 100%, would be "who voted for one of the two major parties"). Or possibly glue one candidate to the "ceiling" - though choosing which partyis over the other might look like bias.

Another helpful tweak might be to change the key floating above, so that the sample blue w/ top outline, red with top outline bars were both in middle, and *partially* overlapping. That would make it more clear that each graph leaned on overlap, and so the purple blend was the point where the candidates were neck and neck, so to speak.

Here's another misleading graph:

I saw this posted with the sardonic caption "Thanks Dads!". But Trump voters were just 58% of only 13% of the voters, or about 7.5% - Men without children were "only" 53%, but at 34% of the voting population they were 18%. A good chart would provide a feel both the size of each demographic as well as showing the breakdown.

the joy of simple custom handcrafted webapps

For a long time my partner and I used a shared Google Doc for a grocery list - it was great that it was real time and all, but kind of fiddly - hard to click the little checkboxes, and Google Docs is slow on a phone. So I made up a simple grocery list webapp. 

 

I'm sure there's a billion of these out there, but I had some particular preferences:
* very easy to check off things on phone
* works on this ANCIENT iPad I now have set up as a permanent screen in the kitchen
* no chance someone is going to start trying to charge me a subscription
* items to get are sorted by the section of the store they're in
* you can add a comment to an item
* recently checked off items (in the last 60 minutes - arbitrary but effective) show up as crossed off items below
* checked off and older items are sorted alphabetically

In the interest of UI simplicity there are a few weirdnesses: no actual "checkboxes", you can only edit the section or note for an active item, and only delete an archived item, but honestly I think got the UI just right for our needs.

keeping an eye on those logs

 With ChatGPT's help I came up with 

#!/bin/bash

tail -f LOGLINK/error.log &

TAIL_PID=$!

while true; do

read -n 1 key

if [[ $key == "c" ]]; then

clear

fi

done

ctrl-l wasn't working to clear the screen, so I could get a fresher view of new errors, but now I can just press c.

good at making ui, bad at using it

I always joke that one reason I’m good at making UIs is I’m pretty poor at using them.

Case in point: I was always wanting a system-wide easy to use “audio output selector, independent of any app.

The closest was under that bluetooth thing, but even once this control panel was open, it was another tap to open the top left panel, then a long tap to open the bluetooth list.

Somehow I never saw the AirPlay icon I was hoping for, up there in the top right.

(it was drawn to my attention by a “how to get a damn Sonos speaker working” video, but the frustration with Sonos is another story)