santa baby, virtual antibody puppets in p5

 My friend Sophie likes making music videos, lately in the context of the pandemic: Everything's Closed, Two Darn Shots, and most recently with a Christmas theme, Antibodies (to the tune of "Santa Baby"):

Early on I was helping her punch up the lyrics and the script direction was 

Chorus of ten little antibodies singing “Jingle Bell Rock” on a neutral syllable so sweetly.  With a background that might be inside a human body?

I came up with a virtual puppet prototype - use the mouse to swing 'em back and forth, and either click or press space to have them open up their mouths.

I liked the idea of a synchronized choir like that! Her collaborator/puppeteer Alex had enough greenscreen mojo to create a similar effect for the final video, but using the same puppets (which admittedly was a better style match, though Sophie would have been ok with the switch of style for the "inside view")

Anyway, it's so gratifying to be able to throw something like that together in like 30-90 minutes! 

If Sophie had gone this route I would have looked for ways to make things a little less in lockstep, like a little bit of random delay before mouths opened/shut and some tweaks to the angles, so it looked a bit less mechanical. Also I might have replaced the background I stole from some google search with something more illustrated looking, maybe moving - maybe the effect I had with blurble...

today's tools back in the 90s...

What today's WFH life would have looked like on Mac OS9
(more background here )

css 2021

The State of CSS 2021 - conclusions are here, the summary from the newsletter "Frontend Focus" said:

• When it comes to frameworks, Tailwind CSS usage is up 13% year-on-year, but Bootstrap still takes the top spot.
• 46% of respondents detailed how they actively use Firefox for development.
• Over 80% of respondents have now used CSS Grid.
• A near 99%(!) of those filling out the survey have used Flexbox.
• Curiously, nearly 50% of respondents are said to be 'happily using one or more CSS-in-JS library'.
• Details on rise of CSS Custom Properties, and much, much more — this is all well worth digging into.

I get Frontend Focus sent to me as a newsletter, it's usually worth skimming through at least

a deep dive into very clever and very evil hacking

A deep dive into an NSO zero-click iMessage exploit: Remote Code Execution - the attacker sends a "GIF", but it's not really a GIF, it's these ancient weird file formats that do such wacky compression that they can be broken and allowing memory to be written where it shouldn't... 

truly global radio

Want to listen to radio stations from all over the globe? With a real globe? So cool!

notes for future tiny gif animations for backpacks

 I bought a Pix backpack, it has a 16x20 grid of squares on its surface and comes with an app you can sideload looping animations from, as well as edit your own.

Recently I've had fun success using it band events; as a standalone billboard, or as part of my costume (for halloween or for Winter-y "blinky light parades". 

But I just realized: A. there's a feature to load an arbitrary GIF animation into the app (but it has to be sized to 16x20) B. this bag can display far more colors than the 16 that are baked into the app's editor. 

This is exciting! I have enough tools w/ P5 and what not to make my own animations. The Pix app also lets you just type in some text to scroll, but it's rather plain and boring. 

16x20 is going to be a serious challenge, though... like just over a quarter of the pixels I had in my 40x30 small gif cinema.

Anyway, I don't like talking about projects when still in nascent stages, but I just wanted to grab some links before closing my browser window for now - here is a tutorial for making smoothly looping animations (in Processing, I'm sure the same idea is easy to switch into P5) and more importantly here is making GIFs in P5. 

the 3 pillars of modern CSS

 Modern CSS in a nutshell mentions flexbox, CSS Grid, and newest to me, CSS Custom Properties that seem like they can do variables ala SASS... but even better they are dynamic.

ctrl-s or cmd-s listeners to save in vanilla js

 I'm rewriting my blog's homebrew content management pages.

One idiosyncratic feature I like for my own use: my brain sometimes assumes "cmd-s" (ctrl-s in windows speak) should save the current entry, just like I saving a file in a local editor, the fact that I'm working in a browser be damned.

Here is the code I came up with. (I wrote similar stuff a long while back, but it was tied into JQuery, and now I'm all about the Vanilla baby!)

First, adding a listener when the page is loaded:

document.addEventListener('DOMContentLoaded', setupCmdSListeners, false);

Now on my page I have different fields that submit to different forms, so I'll just have it so the main textarea for each content type fakes a click on the submit button for that page:

function setupCmdSListeners(){
    setupCmdSListener('rawguts','submitraw');
    setupCmdSListener('quickguts','submitquick');    
}

We have to curry a function so that each listener knows which submit button is relevant

function setupCmdSListener(textareaid, submitid){
    document.getElementById(textareaid).addEventListener('keydown', 
                (event) => {cmdSListener(event,submitid) });   
}

And here's the actual listener:

function cmdSListener(event,submitid){
    if((event.ctrlKey || event.metaKey) && event.which == 83) {
        document.getElementById(submitid).click();
        event.preventDefault();
        return false;
    }
}

Pretty simple! A page could also just set up the listener for the whole page, and avoid the currying. Sometimes it's easier to write some code than train my brain and hands not to expect something like ctrl-S/cmd-S to work.

quick note to self: php mkdir has recursive mode

I was all set to make a half-assed (like, Unix slashes only, choking on filenames that had escaped slashes, etc) recursive directory maker (i.e. for /foo/bar/something , make foo if it doesn't exist, then foo/bar if that doesn't exist, etc) but realized it's built into PHP mkdir:

mkdir($finaldir,0755,true);

The final param is whether to do it recursively.

It's stuff like this that make me appreciate PHP a bit... like more so Perl or a lot of other languages / toolkits, thoughtful useful stuff is built in...

quick note: download files via curl, with redirects

To download a file via curl:

 curl -L https://someurl/somefile --output somefile

The -L is useful if there are redirects. 

defending php with the importance of context

I found a pretty good article discussing Why developers hate PHP. (Spoiler: it starts seeming to support the negative vibe, but then comes around to a more balanced position.)

You can tell I'm getting defensive about PHP when I link to Taking PHP Seriously, but it has been interesting exploring why it is sometimes hated with such vehemence. (That last article, it reminds me of the old old rant Object Oriented Programming Oversold! , except OOPO is punching up and the anti-PHP stuff is generally punching down.)

(That said... some of PHP's stickiness has to do with WordPress, and... I do not enjoy configuring or making up custom widgets for WordPress...)

As I ponder on it... yeah, there's much I can't disagree with - the API is a mess, and I am completely reliant on Google to relookup every function - some of that is my age/learning style and some of that is the style of the times, but still. (On the other hand, so many of the edge-case-y "how can you live like this" parallel critique of javascript, like when equality and null/undefined and implied type conversion get weird... and this drives some people nuts but I am unconvinced it causes that many problems in real environments.)

But I still think that developers who hate it SO MUCH... well, it reminds me of my friend Jon, who recently dabbled with a toy project to learn TypeScript a bit. He didn't like TypeScript, and when I looked at his code, I saw he was trying to bring over the same OO principles from his other work, and I agreed that was a terrible fit for the language. (I didn't try to convince him that OO was indeed oversold, but as I think about it... the idea of bundling data and operations kind of goes against the grain of functional programming, and its love of immutability?) Basically, it's the wrong tool for the job, or at least for the mindset.

Anyway. My current lens for looking at the world, especially the world of tech, is "Holism vs Reductionism". Reductionism as a term has a bit of a stigma, but it's absolutely a critical half of programming- taking a complex problem and breaking it into steps is the bread and butter of programming, and functional programming and avoiding side effects - isolating - are all critical bits. 

But Holism is important too, because it is understanding how all the parts come together. ("Bugs are an emergent property" is my current thinking, so if you're not looking at things how and where they connect, you do not understand the system.) And I think a lot of the classic developer type discounts the need for the holistic and context sensitive understanding.

So, it's all about context. And I think that applies to PHP - deployment is acknowledged as its sweet spot. And I wouldn't want to do big engineering with it, but man... keeping simple things simple is so critical, that it makes up for the sometimes glaring flaws in the language. That wonky API... I mean it sometimes seems aggressively and gratuitously inconsistent, but having so many functions handy compares favorably to, say, bad old days of Perl (where everything was a install from CPAN) or even modern React (where create-react-app pulls down gigs and gigs of libraries, just in case, each having its own set of documentation if it IS the part of the kitchen sink you've learned about and want to use.)

Of course it's a mix of language and API/toolkit. I mean, it's weird that PHP is a language per se... that's where its immaturity most shines through. 

I mean, maybe if Rust or some other language was quite as easy to deploy, and had outputting DOM bits so baked into it, it would be worth checking out, but I'm not sure if such a thing exists, or would have enough of an audience to be worth learning (and figuring out how to install on my cheap rented webspace, which honestly is a big part of my loyalty to PHP...)

Heh, besides refactoring my blog's backend editor from - gak- ancient Perl CGI to PHP, the other thing that got me going here was working up a quick and easy page to display a pile of memes I had collected: kirk.is/memes/ - I feel like this one would might have been useful a full times as i read through the PHP hate pages...

edge is the new sleaze

Man, Microsoft's Edge browser has gotten really sleazy. It's one thing to know that Google, FB, et al are tracking you - depending on how uptight you are about privacy you might not care that much - but to ally with a "buy now pay later" company is downright bizarre, and then when you try to leave you get hit with slogans like 

“Microsoft Edge runs on the same technology as Chrome, with the added trust of Microsoft.”

“That browser is so 2008! Do you know what’s new? Microsoft Edge.”

“I hate saving money,” said no one ever. Microsoft Edge is the best browser for online shopping.

Yikes. 

storybook: consider changing your default viewport (mobile view to default)

 Just a quick note... Storybook defaults with a way of quickly switching between viewports, good for bouncing between Desktop-ish vs more mobile or tablet sizes:

The trouble is it resets when the page is reloaded, so since I'm working on a mobile-scale problem, I'd prefer to (at least temporarily) change the default.

Easy enough according to the storybook docs - I didn't really want to modify the menu item, just figure out what the defaults were named, so the only code I needed to add to our preview.tsx was

export const parameters = {
  viewport: {
    defaultViewport: 'mobile2',
  },

I suppose a team should figure out if responsive, full-width is the best starting default always, or if they want to lean into being more "mobile-first" by changing the default. It's all too easy for developers to get into a mode of "well it looks good on my large laptop in chrome, so it's probably fine." (of course narrowing the viewport is just one factor of proper mobile testing - but an important one.)

(Of course, I could have gotten similar results by using Devtools' device toolbar, but then there are other complications in terms of the rest of the Storybook trimmings around the content.)