Sunday, June 30, 2019

MacOS: crop an MP4 video with MPEG Streamclip

My SO wanted to crop a screen recording video where it was a fullscreen browser, but the interaction was on a small part of the screen.

There are probably multiple ways of doing this but the most straight forward seemed to be good ol' MPEG Streamclip, a free Mac + Windows program from

I right clicked to open the MP4 video with Streamclip, selected "Export to MPEG-4", and there is a cropping section:

Turned out better not to mess with Frame Size (leaving it at "1920 x 1080 (Unscaled)") and then making sure the Cropping's final select was "Destination". I had to guesstimate the cropping numbers a bit, so I used "Preview" to check the work, and then interrupted that and did "Make MP4"

(Note: the version of MPEG Streamclip I use is threatening me with the "won't work with future versions of MacOS" warning (i.e. it's 32 bit vs 64) and it looks like its been a while since it has been updated, so Caveat Emptor or whatever Emptor is for someone grabbing free software.)

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>
<% } %>

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

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.

Thursday, June 6, 2019

MacOS hint: better cmd-space living through restricting what Spotlight searches

I'm messing with having the Dock autohide. I used to have strong feelings about the utility of the dock vs taskbar but now I realize the Dock is just taking up precious screen space and not offering much value, since I use Spotlight (aka "cmd-space") to launch everything, and usually cmd-tab to get back to open apps.

But I was a little irritated with the sheer amount of crap Spotlight was searching - I never think of it as a "document management tool", just an app launcher, so the plethora of obscure stuff it would present for a text search was a bit distracting.

Bob on The Lost In Mobile WhatsApp crew pointed out you can go to System Preferences | Spotlight and weed that down to something more reasonable:
Even here, the sheer number of options seems to point to some level of categorical confusion. Like, Calculator isn't an app? (oh, I see- I think it's the ability to type in a simple math problem.) Or "PDF Documents" and "Spreadsheets" are a separate category than "Documents".

It's interesting how Spotlight (and its equivalent from the start menu in Windows) is so powerful. In a way it seems like retrograde, like a return to the command line for everything, but it combines the fluidity of typing with the multitasking of modern computers, and the sensible and forgiving autocompletion of, say, a recent browser's Address bar...

Sunday, June 2, 2019

lifehack: sort your todos by benefit

M. Lazer-Walker tweeted:
I don’t remember who gave me the idea, but I’m SO much happier now that I’m framing my task manager in terms of what benefit I’ll get from doing things rather than having an endless list of tasks I “need” to do.
Interesting idea!

Saturday, June 1, 2019

inventory your 32-bit MacOS apps for when life becomes 64-bit only

If you're a Mac user, you may be getting used to seeing warnings like this:
Much like with what happened with iOS, 32-bit apps will no longer be supported.

(For someone with packrat tendencies, this is a bummer! Also I have a pile of indie games that will need special care to run in the future.)

Bob on the Lost In Mobile WhatsApp channel mentioned you can find out what apps are on your system now that might not easily run in the future:
1. Go to "Apple Menu | About This Mac"
2. On the "Overview" tab click "System Report..."
3. In the left column scroll down to "Software > Applications"
4. You can sort on the rightmost "64-bit" column and look for the "No"s.

Wonder when Apple will move away from Intel chips for Macs and what the transition will look like.