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.