quick thoughts on Vue.js

A few of the jobs I'm applying to are either Vue.js-centric, or a mix with some Vue and some React.

I ran through Vue Mastery Intro to Vue.js course. It's interesting how this series of courses seem so officially endorsed - and they are pretty great! Like Wes Bos React course, they have a nice  player to go through a series of videos starting with a basic core and adding complexity- but with this course, each lesson has a codepen set up and ready to go, with the lesson's code already entered and a challenge still left to do.

It seems like that "just run it!" setup is easier to do in Vue - it's impressive that you can just include one script tag and all the basics work. (Vue also has a pretty extensive build system, while React seems a bit more roll your own webpack or what not - or use the giant beast create-react-app.)

In some ways, React felt like a maturation of the best parts of jQuery, and similarly Vue feels like a bit like AngularJS. Specifically, React + JSX let you plunk bits of DOM in your JS without guilt, and so lets you use regular Javascript control structures. Vue and AngularJS take the approach of integrating conditionals and iteration into the tags. Instinctively I prefer how JSX feels more like "plain old HTML", but I could get use to Vue's approach. I still find stuff like

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.message }}
  </li>
</ul>
a little odd - the way the "for" is sort of a child attribute of what is properly "inside" the loop. (But it seems like Vue avoids forcing the developer to have all that weird mandatory infrastructure javascript to make the tag logic magic happen that AngularJS demanded)

I also love how Vue wraps a component - it's a bit opinionated, but you build a map-like object with data:, method:, template: etc keys -- they may well have found a sweet spot of opinionated but not TOO opinionated. I think the approach is quite favorable to React's file-component conflation.

Similarly, "emit" for having a child communicate back to the parent seems pretty keen. It's a basic idea that scales up well, to the eventBus model, or more advanced things using Vuex - a smoother ramp up then React's "either deal with children/parent state via props or use Redux"

Still, I'm not quite sure if Vue is quite as... I dunno, industrial strength as React - that might be because I've only seen tutorials for it, not real code. And admittedly the list of top sites built with React seems a bit more impressive than the top sites made with Vue.js. But both seem to get plenty of love in the 2019 "State of JS"...

input type="tel" regex pattern for US 10-digit phone numbers

HTML5 has a <input type="tel"> but it's not very restrictive, in particular if you have an international audience, you need to think carefully.

For Porchfests, I think it's ok to assume "US", and my partners wanted some additional data validation. Building off the example on the MDN <input type="tel"> page:

<form>
      <input type="tel" id="phone" name="phone"
       pattern="\(?[0-9]{3}\)?[-\.\s]?[0-9]{3}[-\.\s]?[0-9]{4}"
       required>
      <small>Format: 123-456-7890</small>
      <button>go</button>
</form>

Optional parens around area code, and then space, dash, dot, or nothing between the 3/3/4 digit sections. That will allow variants like "(555)123-1234", "555-123-1234", "555.123.1234" or straight up "5551231234".

es6 goodness

Prepping for job interviews, you become aware of the overlap between things you use on a regular basis (even daily) and things you might still get caught up on feeling the pressure of an interview... if you're a cautious, highly-iterative programmer like I am, there's a lot of knowledge you don't quite have in your head, but you know the basic idea and even the gotchas and you carefully test and move forward.

Anyway, I'm reposting Amber Wilkie's Everything I learned from ES6 for Everyone, which along with ECMAScript 6 - New Features: Overview & Comparison are great reminders of how not to look like an old JS fuddy-dud - lots of examples showing the old and new way of doing things.

I do think I need to up my game in staying up with hackernews and what not - ECMAScript is still evolving though mercifully the "big bang" of ES6 seems singular.

bouncing blocks in 8-bit

An online friend of mine, Matt McIrvin was talking about a cassette with some simple public domain-ish games he got as a throw-in when he got his first Atari 8-bit computer. It made me think of one of my favorite software toys, "Jane's Program":

(I keep forgetting the name of it, looking for it to be "Jesse's Program" "Jane's Game" or something like that.)

It was made by Douglas Crockford, who worked on a lot of Atari stuff including Lucasfilm's games, and later he became famous in the Javascript world - partially by helping to popularize the use of JSON, showing how simple collections and maps were much easier for humans to understand than all the pointy and obnoxious bits of XML.

(It's interesting looking at his career trajectory vs, say, Jim Butterfield, whose tech career seemed to rise and fall with the 8-bit Commodores he established his name with.)

Ha, though I just realized Crockford was not also the "De Re Atari" guy- that was Chris Crawford... an easy enough mistake to make.

Anyway, "Jane's Program" is lovely, and honestly would be a tricky thing to replicate even with today's abundance of processing power - it's not immediately obvious what kind of data structure would best capture the blocks as whole objects (with elasticity and velocity) as well as a chunky particles "blocking" columns and supporting or colliding with particles from other blocks.

the bad ux of a bottle of bleach

So Bleach expires, yet Clorox likes to pretend that "E620050 MD2 5 18" is a good enough code to let us figure out how old it is. I think that means "made at factory E6 in the year '20 on the 050th day (i.e. mid-February) but dang, why are they being so obscure?

Making it worse it sounds like sometimes the year is one digit? and sometimes they glom on two digits at the end, before the day of year. This is a bad time for not providing an online calculator or using a more human friendly system.

looking for my next gig

So, I got caught in a round of layoffs at my last job.

I'm moderately proud of my online https://kirk.is/resume/. In 2016 I came up with the interactive bit, that you could hover or click on technologies or jobs and the corresponding job (or technologies) would highlight.

I was also smart with my media queries so I can just save to PDF and get a lovely print version

For 2020 I cleaned up the code (still jQuery, which has a funky smell for many folks but is probably a decent tool for a document-based microproject, and it didn't seem worth redoing all the animations in CSS... jQuery really took care of a lot of little things.) and added some graphics in the same style as my header:

So, if you are reading this and looking for a top-notch UI developer, let me know!

yoinkbot

Interesting - yoinkbot is a Slack bot for managing shared resources. I don't have a strong opinion yet about if I dig it... if we're going to use it for QA machines, I feel like it should have more options for timing out a lease rather than just letting it sit, but still.

the atari portfolio

I ran into this video on the first "Palmtop PC", the Atari Portfolio - sort of a precursor to the "netbook" that came out, or maybe a bit smaller than that...


It even ran a version of MS-DOS... I was an early adopter of "taking notes in class on a laptop" (pretty rare in the early 90s) and had this beauty, the Tandy 1100FD


it didn't even have a hard drive - but the text editor was hardwired in and worked pretty well. But a Palmtop might have been even cooler.

By the end of college, I was getting into PDAs as well... someone sold me this skinny beauty, the Texas Instruments PS-9500 TimeRunner:

I got one with a neat "Clip-in Frame" that secured it in a 3-ring Binder.

That PDA was what I first started collecting thoughts and notes in - a "Commonplace Book" that eventually moved to the PalmPilot, and then morphed into my going-on-2-decades daily blog.

Getting back to the Atari Portfolio - I would love a PDA with an "Atari" button (kind of a precursor to the Windows button... isn't it weird how a software company got every hardware maker to put in a special key?) The Atari button makes me of the alternate reality in the Atari Force comic books, set in that far-off, post-apocalyptic time of 2005, where the Atari Technology and Research Institute is one of the few surviving institutions after the "Five-Day War":

UX gripe blog - Apple's iPhone PIN entry screen

So in the Age of COVID, it's almost a bummer that Apple leaned so hard into facial recognition, when everyone feels a bit safer behind a mask. (Of course, I suppose they could be wearing gloves too, but that's not quite as common.) PIN unlock becomes more necessary, and the flaws in Apple's implementation become more obvious:

First, is the lack of haptic feedback. People want to type in PINs in a hurry - both so any onlookers don't get an eyeful, and just because it's annoying! But then, it's easy to miss a beat and only enter 5 numbers when 6 were called for... I think it would be an obvious place for a confirming haptic bump as each number gets registered, but Apple doesn't agree.

And in that "I only hit 5 numbers" scenario-  most people will want to hit delete and start from scratch because they aren't sure which one was missed... so if they just start jamming on the Delete link in the lower right corner, if they hit that area one too many times, the "Delete" becomes "Cancel", and the PIN entry slides away.

So that's some Bad UX! The user is clearly annoyed, trying to just open their dang phone, and Apple's (presumably inadvertent) interpretation of "I entered most of the numbers, then hit Delete a lot" is that the user changed their mind, and want to give up unlocking their device.

UPDATE: I've been thinking about if I judged this too harshly. The trick to happier usage of it is to press one more button, get it "wrong", and then all the numerals will clear out for another try.

Also, Kudos to Apple for doing an update that recognizes a mask faster, and offers to switch to PIN that much sooner.

spreader is better

At work I joined a book club for Simplifying JavaScript: Writing Modern JavaScript with ES5, ES6, and Beyond - mostly it was fullstack engineers but the review was good for me... Like in last month's case, we had a BIG list like

const filters = [
'filter1',
'filter2',
'filter3',
'filter4',
'filter5',
];

and I wanted to conditionally add a filter in the middle (one that we were testing out)...

const filters = [
'filter1',
'filter2',
'filter3',
...(isTestRunning()?['filterX']:[]),
'filter4',
'filter5',
];

The spread operator is such an interesting answer to an asymmetry that has long bothered me in most languages with a C-like syntax - that, classically, a function can take in many named arguments, but only returns one thing. Obviously you can work around that by returning some kind of compound object, but the spread operator is really a conceptually interesting way of opening up a kind of a parallel pipeline for inputs and outputs.

(I would also give Javascript credit for really making JSON work... I mean it's a little stupid that all  valid JS isn't valid JSON but still, the elegance of the syntax, the fact that SO much in programming life is just sets (ordered or no) and maps, and that if you make those two things really concise, you can make an endrun around more nerdy, controlling syntaxes based in XML, with all those pointy tags.)

the dumbness of smartquotes

A while back I wrote on upgrading my blog's search function so that it could search phrases in quotes - having studiously recorded quotes and thoughts for two decades, the search is a tremendous resource for me, it's a real delight in being able to reliably retrieve and correctly cite half-remembered passages and repost old links (when they're still viable, sigh.)

I tried to use my blog's search via Safari on my iPad this morning to search for the author "Karen Armstrong"... but got no results, which seemed unlikely. I then realized that searching for both terms separately came up with results that should have returned in the first search... and that the first search was working fine if I ran it from Google Chrome my laptop.

Turns out iPadOS was "helpfully" converting my typed quotes into smartquotes, and that was choking the search. This function from the Inteist website cleared it right up:

function remove_curly_quotes($text) {
    // First, replace UTF-8 characters.
    $text = str_replace(array("\xe2\x80\x98", "\xe2\x80\x99", "\xe2\x80\x9c", "\xe2\x80\x9d", "\xe2\x80\x93", "\xe2\x80\x94", "\xe2\x80\xa6"), array("'", "'", '"', '"', '-', '--',
        '...'), $text);
    // Next, replace their Windows-1252 equivalents.
    $text = str_replace(array(chr(145), chr(146), chr(147), chr(148), chr(150), chr(151), chr(133)), array("'", "'", '"', '"', '-', '--', '...'), $text);

    return $text;
}

I have guilt about my disdain for smartquotes - much of my professional life is balancing my engineer side - the part of me that's a little insensitive to nuance (rendering me if not faceblind at least a bit face-myopic) but very sharp on recognizing the crux of things and how systems interact - with my wanna-be designer side, that has some knack for wanting to make things look good.

If I was more of a designer, I would be horrified by how many sites and applications are content to use "inch marks" instead of proper, curled-in quotes. But the engineer in me really doesn't like the "Guess What I Mean" interface of a program doing the translation from they key I typed into what the computer believes is "proper"... and inch marks seem to get the job done pretty well in terms of delineating quotes.

(I actually admire some quotation marks used in other countries, especially « » which I just found out are called Guillemets.)

Of course, fighting against autocorrect is probably not a worthy battle. Autocorrect was a secret sauce in the original iPhone, letting our clumsy fat fingers pluck out words from these tiny virtual keys. And while I used to strongly prefer the typographical puns of :-) over the less clever 😀 - especially since different emoji sets can convey different nuanced moods - now I admit that the standard emoji banks have a lot more expressiveness and do a lot to emotionally warm chilled text to in-person conversation standards.

fun with zoom virtual backgrounds

I am a little astonished at how completely Zoom has become the default for team video conferencing, almost at the risk of becoming a genericized verb, in a way "to google" has, or "skyping" was.

One popular feature are the virtual backgrounds, using crude but effective algorithms to treat any workspace backdrop like a greenscreen and replace it with... well, anything, including moving images now. Some people go for the whimsical, some for the aspirational (like a beach scene), others are a bit more droll (the "This is Fine" dog)

I wasn't a fan at first, but they've grown on me - they can be a bit glitchy, and I just like the honesty of seeing people's home offices. But now I realize they can provide an important layer of privacy, maybe not every Zoom user is sitting in front of a scene they wish to show all of their peers all the time.

During a casual "virtual happy hour" hangout, we got in a "virtual background" more and I made this goof:

Not only is it playfully self-absorbed, but that is my most pretentious hoodie, from David Byrne's recent American Utopia live show.

Here it is in action:

It was pretty easy, I stood in front of a reasonably blank wall and had my partner Melissa take a bunch of shots, then I used PhotoScissors 6 to clip out the backgrounds, and assembled them in Acorn.