Friday, February 3, 2023

the mysterious case of the switch(true) statement

 At work, the PO (who honestly probably has the best overall view of the Designers in Figma, Devs in CSS that is the heart our project) came up with some complex logic to deal fixed widths and heights vs flexbox (Figma is still at its heart a vector tool, and while it has some powerful tools like "hug" (i.e. stretch to fit your children) vs "fill" (i.e. stretch to fill your own parent) that map up sort of ok with CSS's flexbox, there can be a lot of weird edge cases.

One of the developers encouraged the PO to rewrite the nested if() statements as switch/case. But he came up with an interesting design that I hadn't heard of before, rather than

switch(someVar){
  case 'someValue1':
  break;
  case 'someValue2':
  break;
}


He did something like 

switch(true){
  case (someVar == 'someValue1' && someOtherConditional):
  break;
  case (someVar == 'someValue2' && someOtherConditional):
  break;
}

I had to set up a codepen to answer "does that even work?" but javascript being javascript, of course it does. (I suspect the older langauges like C wouldn't allow such shenanigans)

This article goes over some of the pros and cons... you can absolutely do some stuff that's more readable than a pile of nested if/else structures, and being able to run a function rather than compare to a primitive function might be useful.

Thursday, February 2, 2023

the ease and the lerp

I've talked about easings before, a decade ago in a jQuery context and then five years ago based on Processing.

So an easing is a way of translating a linear motion into something smoother and more organic. In general they work as a function, taking in an input from 0.0 to 1.0 (generally a value that's been changing linearly, 0.0, 0.1, 0.2, 0.3...) and outputting a corresponding "where are you at now" value (with some easings, this won't be limited to be stuck between 0 and 1, which allows for a little overshoot and correction)

Easings.net is a cute little site with a pile of these functions. (If you're writing in plain old javasript you will have to remove the "number" typings...)


P5 provides a nice function called lerp() to ease translating the "between 0 and 1ish" values to the actual start (i.e. 0.0) and end (i.e. 1.0) value you want:

lerp(startX,endX,easingFunction(timerValue));

I set up a small p5 sample, and you can replace easePatakk (from this tumblr post) with easing.net's "easeOutElastic"

Easings are also available in CSS. I admit I use them a lot less now than I did back in the jQuery days - there's always something a little weird about treating an verb + adverb (like easing) as a noun (CSS descriptor).

Friday, January 27, 2023

is it time to party like it's windows 95?

Over a decade a go I wrote why windows' taskbar beats osx' dock. In the intervening years I've gotten pretty used to the Mac Dock, (using SizeUp for awesome and intuitive keyboard based window management, and then HyperSwitch to fix the DUMBEST thing in MacOS, because switching to an application with no windows open should open a default window when you switch to it with cmd-` just like it does if you click on its icon in the dock) but just recently I realized there's an app called uBar that lets Mac have a very Windows 95-y/XP-ish button bar.

You can set it with window titles ala Windows 95, or just icons, and with our without the "grouping by app" that later Windows copied from Mac.

Conceptually I like it. I've gotten used to App, then Window thinking that Mac encourages, but honestly I leave a LOT of windows, especially browser windows, just hanging out. (Combine that with how both the Mac and browser assume I want to reopen everything whenever possible, which honestly is totally missing the point of restart/reboots, and it's significantly annoying) Seeing a button or icon for each window helped me keep things neat.

There were enough small annoyance (some programs used wonky icons or would open up a gratuitous second uBar icon even if only one window was visible) that I probably won't stick with, but I found it cleaner and more straight forward than Ventura's Stage Manager. One icon per window still makes a lot of sense. (I guess in the mean while I'll try to remember to ctrl-down-arrow a lot to see how many windows I have lying around, and then cmd-w to close so they won't try and reopen en masse)

public service announcement

I just backed up my computer and my website - kinda the old fashioned way, dumping a single root (or two) - ~/data on my Mac, ~/sites and ~/data for my website - onto an external solid state HD. I guess I prefer that to those more automated systems, just like I don't really trust my photos to iCloud (and anything I consider important I make sure is in ~/data/photos )

Just a friendly reminder to pick a backup plan and run it :-D

working with europeans

 My new team is based in Western Europe. I enjoyed seeing this entry for tags in our design system:



Wednesday, January 25, 2023

$5,000 hammer

I spent a workday getting understanding of a complex Figma to JSON recursive translation process. And the fix was one line. it made me think of this joke:

The Graybeard engineer retired and a few weeks later the Big Machine broke down, which was essential to the company’s revenue.  The Manager couldn’t get the machine to work again so the company called in Graybeard as an independent consultant.

Graybeard agrees. He walks into the factory, takes a look at the Big Machine, grabs a sledge hammer, and whacks the machine once whereupon the machine starts right up. Graybeard leaves and the company is making money again.

The next day Manager receives a bill from Graybeard for $5,000. Manager is furious at the price and refuses to pay. Graybeard assures him that it’s a fair price. Manager retorts that if it’s a fair price Graybeard won’t mind itemizing the bill. Graybeard agrees that this is a fair request and complies.

The new, itemized bill reads….

Hammer:  $5

Knowing where to hit the machine with hammer: $4995

Hammer time!

Sunday, January 22, 2023

"good enough" guid/uuid in PHP?

So once upon a time I used 

$key = time().".".getmypid();   

For a UID (unique ID) in PHP. Maybe I wanted things to sort a bit? But of course there's always plain old
 
$key = uniqid("",true);

(which says "" for prefix, and more entropy.)

if(preg_match('/[^\.a-z_\-0-9]/i', $id)){
    echo "bad id";
}

could be a check if you're using this for a filename, and want to make sure it's not too dangerous to try and open... (shenanigans changing the folder or escaping out)