the apple family

The Lost in Mobile blog (and its watch-based spinoffs) has be reformed as McGST, a very enjoyable read. In a recent post about his family, Shaun noticed how Apple-centric they all were.

I too am Apple-centric with most of my gear. I wrote:

Yeah, seems like it’s a mix of:
– loyalty / other competitive products decent but not having benefits worth re-learning (phone)
– anemic competition in the category (watch, tablet, laptop (at least if you like Unix-y things))
– prestige and/or superior design (wireless earpods)
– familiarity w/ and cohesion of the product line landscape

Alan Kay said “People who are really serious about software should make their own hardware.” – Apple has been doing that in a more cohesive way for longer than anyone. Samsung doesn’t do much in terms of software (tho their smart TV UIs had made tremendous strides, I’ve lived through) — Microsoft was late to hardware and never got the hang of mobile, Google has chromebooks and seems to not be excited about pixel….

laws of ux

 The Laws of UX has one of my favorite maxims that I learned from Larry Wall who invented Perl:

Postel's Law: Be liberal in what you accept, 

and conservative in what you send.

minimal react

 Kind of a nice intro to minimal React, with as few libraries as possible

the new hotness: design tokens

At work we've decided our next generation work for designers and developers will be based on Figma vs Sketch. Using Figma is a bit like using Google Docs instead of Office, in the sense of everything is browser-based and shared in real time, rather than passing files around (or using a supplemental program such as Invision)

I'm a little surprised that both programs are still fundamentally vector based, vs being grounded in like DOM elements or what not... though I guess this has a lot more flexibility, especially since it's not like web is the only target medium. 

Anyway, "Design Tokens" are the new hotness - in atomic design thinking, these are almost like the "subatomic particles", the consistent properties like color and padding that you'd expect to see applied across many different atomic units.

(Which really... is just designers discovering the power of key-value pairs. Some of my shtick is when I think what Perl showed me in the mid-90s, having only used C prior to that (along with some BASIC and LOGO) -- key-value pairs (associative arrays), duck typing, not having to manage memory obsessively, strings as first-class objects, and regular expressions - maybe key/value pairs was the most important...)

Anyway, this article goes pretty in-depth into the whole process of setting up design tokens in Figma and then the kind of js you would need to pull them out for use elsewhere, such as your CSS.

programming without programming

 

the new jargon file

New Programming Jargon - I especially like Pokémon Exception Handling, for when you just "Gotta Catch 'Em All!"

try {

}

catch (Exception ex) {

// Gotcha!

}

programming dbs for the people!

Paul Ford on how setting up little database systems is a very egalitarian form of programming:

 I've always loved that moment when someone shows you the thing they built for tracking books they've read or for their jewelry business. Amateur software is magical because you can see the seams and how people wrestled the computer. Like outsider art. So much of the tech industry today is about making things look professional, maybe convincing Apple to let you into the App Store to join the great undifferentiated mass of other apps. That's software. When people build their own Airtable to feed the neighborhood, that's culture.

[...]

I get asked a lot about learning to code. Sure, if you can. It's fun. But the real action, the crux of things, is there in the database. Grab a tiny, free database like SQLite. Import a few million rows of data. Make them searchable. It's one of the most soothing activities known to humankind, taking big piles of messy data and massaging them into the rigid structure required of a relational database. It's true power. Or mess around with Airtable or its no-code ilk. If you do it long enough and work with friends, you can do wonderful things. You can build data models that work well enough to feed people who need the help. That's real programming.

I think about something I heard about how in the 90s you could make a decent little business setting up little MS Access databases with custom Visual Basic front ends for small companies.

I've seen some of this with people using Google Docs and Google's survey tool - also I've seen some neat homebrew efforts for various Porchfests that often rival the results I've put into my sites for 'em, but took a lot less background knowledge.

I know I've gotten great utility out of a little Perl DB (later PHP, and overdue for a front end makeover) I made - just rows and columns and a customizable form, like a less-fancy, more functional Excel. I've made dozens of tables in it but mostly I use it record media I consume, coworkers I want to keep in touch with, and lately to assemble my monthly playlists.

css woulda coulda... shouldas?

The Languages Which Almost Became CSS - fascinating glimpse of alternate universes.

I think CSS ended up in a pretty good spot. I like the nesting you get with SASS+LESS, and variables, but selectors are a pretty solid idea. IMO. 

Pity it took so many years for flexbox + grid to get established! Those "no we musn't use tables for display! Here us this wacky hack" days were terrible.

a11y irony

 This was an entry on my LinkedIn feed. Can you spot the irony?

It's a pretty decent article by a buddy of mine.

we remember less taking in life through the damn zoom screen

The Covid-19 lockdown, after all, was full of new experiences. Some were grim: I lost a friend to the disease; I smashed my face up in an accident; we had to wear masks and avoid physical contact and worry about where the next roll of toilet paper was coming from. Some were more positive: the discovery of new pleasures, the honing of new skills, the overcoming of new challenges.

But I doubt I am alone in finding that my memory of the lockdown months is rather thin. No matter how many new people or old friends you talk to on Zoom or Skype, they all start to smear together because the physical context is monotonous: the conversations take place while one sits in the same chair, in the same room, staring at the same computer screen.

The psychologist Barbara Tversky, author of Mind in Motion, argues that our minds are built on a foundation of cognition about place, space and movement. That creeps into our language with phrases such as "built on a foundation" and "creeps into". Our brains started by helping us process our surroundings and the threats and opportunities they presented. Abstract thinking is an adaptation of those basic spatial capacities.

Tim Harford on how  We won't remember much of what we did in the pandemic.

A few thoughts: one is thinking about how I have already been oddly obsessed with daily notes - aiming for a daily blog entry (which I try to make less about me and more about stuff I find), a "mundane" journal entry, and for 7 or 8 years now a "One Second Everyday" video snippet. I guess I dislike that feeling of lost time.

The other is a tangent - I think the ambient details of surroundings is one of the reasons why RSS and other tools to retrieve "pure" content but with the same visual context each time never worked for me- the visual details surrounding an article give it a flavor that helps it land in my mind.

Finally - I wonder if there's a lesson in artificial intelligence like this. Tversky writes about how the human path to thinking about the world so often depends on the physicality of it all, of being an actor in a space and learning the principles of cause and effect (with ever present considerations like gravity and mass and texture) I read her book last year and actually corresponded briefly with her, very good stuff.

binary clocks (weird ways of showing time, and recreational programming)

Years ago I bought my Uncle Bill one of those geeky binary clocks... just for fun this weekend I made up a virtual version of that, along with a few variations...

I love both playing with different ideas of representing time and just being able to do recreational programming in general, take a few hours and make an idea like this a reality.

P5.js is such a good choice for that, for stuff you want to be able to run in a browser, and with maximum flexibility.

Because I knew I'd want multiple instances of clocks on a page with explanatory text in between, I had to use p5's "instance" mode. The structure got a little wonky but was kind of fun to see what code could be shared among the variants - I wanted to make sure both that things were efficient (and so not needlessly refreshing each clock at 20/30 FPS or whatever) but also that all the clocks were well in synch...

MacOS minimize paradigm

Almost 10 years ago I wrote how the Windows task bar was better than the OSX Dock but since then I've come around... Windows' alt-tab is between running windows only, regardless of app, while back divides it between cmd-tab for apps and then cmd-` within apps. I now think that double wheel nature is superior.

Another difference in behavior only now makes sense to me: what happens when you minimize a window. On Windows, it just gets the Window out of the way, but on Mac it tucks in the Dock - and it is no longer in the cmd-` cycle of windows, which contrasts with Windows where it's still in the loop.

It also doesn't popup when you close out all the other open windows in the app.

Now I use why it's like that- instead of just being a screenspace management thing, it's like a little safe storage box. You can put some a browser tab you want to get back later there without worrying about accidentally closing it, or you can have a long run terminal process there, stuff like that.

It's how long it takes me to realize little things like that that make me hesitate before trying Linux fulltime, since I'm sure there are dozens and dozens of little behaviors I expect that Linux may or may not support out of the box - or if there's a setting to control it, I'm not sure how to describe what I'm looking for to find it in settings...

history of the web

 Nice piece on Tim Berners-Lee, inventor of the web. My Kevin Bacon number for him is 2, my team lead was working with him a bit around SOLID, trying to think of the next generation of user-controlled information and connection.

random gripe - why are html checkboxes so 1997?

 In an HTML/CSS world that has grown into flexbox and grids and typeahead and disclosures (details/summary element) it is really bizarre that stuff like checkboxes don't have CSS styling, and if you want something pretty you have to build it up from div scratch (hiding the actual element but leaving it there for screenreaders)

typescript-y factoids

I need to up my typescript game so I've been reading the full docs.

I know a lot of people complain about about JS's loosey-goosey ducktype nature, but didn't realize til I read the TS docs that

1 < x < 4

is true no matter what numeric value x is.

Also, I was wondering if typescriptlang.org was the canonical site, with a name like that - guess so. Seems like Typescript is a 2007-2010 era CMS that grabbed the better domain...

Also I'm sort of glad to see that according to the excellent typescript playground, this kind of shenanigans will produce an error:

interface Person {

  name: string;

}

interface Teacher extends Person {

  id: string;

}

interface Student extends Person {

  id: number;

}

interface StudentTeacher extends Teacher, Student {

    catchphrase: string;

}

I remember an old compsci teacher, back when C++ was sort of new, warning us about diamond-shaped inheritance trees. Maybe more problematic when those members were functions vs variables? But still. 

turn.js for a highly skeuomorphic magazine page turn effect

Years ago I had a side project to make the web version of the WhiteWave Foods Company Annual Report - they request I use turn.js which makes an intensely skeuomorphic page flip effect, using the mouse or pointer to drag the page over:

A bit gimmicky but rather satisfying! It was pretty easy to setup if memory serves (it has been a while)

article roundup

Geri Reid has a good article on forms best practices

Charles Stover on Dan Abramov's React Suspense with the Fetch API

More on Suspense

conventionally committing

My current team has adopted the Conventional Commits standard, a way of bringing some of the chaos and messiness to heel.

The format is:

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

where type is fix: feat: build: chore:, ci:, docs:, style:, refactor:, perf:, test:, etc. And I think description is meant to be imperative, "do ___". So the example on that page:

feat(parser): add ability to parse arrays

(I'm mostly making this entry to remind myself of the name, "Conventional" has poor mental stickiness for me, and by putting something on my blog I have easy access to both the term and then the example...)

UPDATE: we started using commitzen to walk us through the format. `npm run commit -- --retry` has been a godsend tho, for when a test or lint thing makes the commit fail...

typeahead in html5 (datalist)

I was surprised to find out out html5 now has suport for "typeahead" - where you start typing and then get suggestions that match in a dropdown.


w3schools has a pretty good example:

<form action="/action_page.php" method="get">

  <label for="browser">Choose your browser from the list:</label>

  <input list="browsers" name="browser" id="browser">

  <datalist id="browsers">

    <option value="Edge">

    <option value="Firefox">

    <option value="Chrome">

    <option value="Opera">

    <option value="Safari">

  </datalist>

  <input type="submit">

</form>

gettin' old

Ctrl-Alt-Delete: The Planned Obsolescence of Old Coders - as a 46 year old, I think I'm lucky because I kind of "pass" younger, in outlook, life circumstance, and appearance. And I haven't had much drive to go into middle management. 

make the whole parent td clickable for a radio button (without jQuery)

TL;DR: if you have a radio button (possibly with a caption) inside of a table cell, and you click in anywhere on the cell to change the button, put it (and maybe the caption) in a label but use CSS to make the label "display: block;"

Making a simple "what songs should we play" survey tool for my band, something like:

I had put a label around the caption and the radio button in the table, something like 

<td><label>Yah!<br /><input type='radio' name='songname' value='1'></label></td>

Using label like that is the simplest way to make both the button and the caption clickable, but I noticed the empty space to the left and right of the radio button wasn't clickable... bad UX!

I Googled around for a solution, but most of the answers were jQuery. Bleh!

Eventually I realized, making the label display:block; would effectively have it take up the whole width of the table cell, and resolve my issue.

It took me a bit to get there - I mean, I knew this was a pretty decent case for a table (it is pretty much tabular data, after all) but I decided to try fixing it with a css-grid - that way I could make the label the equivalent of the table cells, and so the whole cell would be clickable.

It worked ok, I guess, but definitely reinforced that css-grid isn't a good replacement for a <table>... not having the equivalent of <tr> is pretty unforgiving if you leave out an item! It seems very strange to be relying on modulus arithmetic to make sure your columns are consistent...

(Of course, some of this all goes back to the allergic reaction against using tables for layout that made life kind of stupid when we had CSS to style things but  flex-box wasn't widely available...)