Software Development

Since I’ve had to go re-watch WWDC20’s “Adopt the New Look of macOS” session (at around the 07:03 mark), I thought I’d note it down here – for anyone else late to the update-for-macOS-Big-Sur-game 😉

What we want to achieve is go from this UI (basically standard on any macOS before Big Sur):

Screenshot of Yoink's preferences on macOS Catalina and earlier

to this UI (new UI for Preferences windows on macOS Big Sur):

Screenshot of Yoink's Preferences on macOS Big Sur

And it’s fairly easy to do so. All you need to call is (pardon the Objective-C, Yoink for Mac (and iPad and iPhone, for that matter), is still 100% Swift-free..)

self.window.toolbarStyle = NSWindowToolbarStylePreference;

and update your toolbar items’ icons, and you’re all set.

Screenshot of Xcode 24 09 2020 08 48 22

 

 

– Matthias
mail | website | twitter | instagram | facebook

Read more

Screenshot showing Yoink and its update-timestamp on the Mac App Store

7 months. I look in disbelief at the Mac App Store’s timestamp of Yoink’s last update, and I’m deeply embarrassed.
As a user, I’d think the app is abandoned. As its developer, I know that’s not true, because soon after I’d released v3.5.8 of Yoink for Mac, I began working on the next one:

Yoink for Mac's GIT commit messages, showing the date of the v3.5.8 commit and the date of when work on the next update began (3 days later)

The user, however, doesn’t know.

The situation isn’t any better for Yoink for iPad and iPhone, either, where the App Store states 5 months since the last update (v2.1.6).
Here, too, I began working on its subsequent update the day after submitting it to the App Store:

Screenshot of GIT commit messages of Yoink for iPad and iPhone, showing the date of v2.1.6, and when work on the next update began, a day later

I cringe even mentioning ScreenFloat (10 months), flickery (11 months), Glimpses (11 months), or Transloader (5! years!).

The problem, I think, is that I do not plan ahead much. I give my attention to the app that – in my view – currently needs it most (which has been mostly Yoink for Mac, and Yoink for iPad and iPhone lately), and whenever I feel the update is done (an arbitrary line I draw spontaneously most of the time), I release it and move on to the next app (or the same one again, if need be).

I want – and need – to do much better here.

So here’s how I’d like to improve:

  • Release what’s ready once a month
    If there have been changes made to apps and those changes are ready for prime-time, release the updates
  • Unless absolutely necessary, after an update, move on to the next app, not keep working on the one I just released an update for
    Aside from the positive effect of giving other apps the attention they need and deserve, it also reduces the possibility of me getting burnt-out working on the same app all the time
  • Be more vocal about what’s going on
    I should be more transparent about what I’ve been and am working on – it’s fun to share!

Here’s hoping. Thank you all for bearing with me 🙂

– Matthias
mail | website | twitter | instagram | facebook

Read more

When creating a custom Quick Action for macOS Mojave’s Finder, you have the option to supply a custom icon:

Creating a custom Quick Action in Automator for macOS Mojave

Selecting an icon in Automator

But this is what happens when you supply an ordinary image in Dark Mode:

A Quick Action's icon without adjustments

or Light Mode:

Unmodified Quick Action icon

(in Light Mode, it’s obviously better, but still not as subdued as it should be, which is more grey than pitch-black, or whatever color your original icon file might have).

Tip #1 – Getting the icon’s color right

The trick is to have the file end in ‘Template’, like ‘MyWorkflowIconTemplate.tiff’. But that’s not all there is to it. When you add a custom icon through Automator, it automatically gets renamed into ‘workflowCustomImage.png’. So no matter what you name your file, it won’t matter.

To fix this, add a custom icon to your Quick Action in Automator, save, switch to Finder and navigate to /Users/yourname/Library/Services/, where your newly saved Quick Action will end up.
There, right-click your Quick Action, select ‘Show Package Contents’, and navigate into Resources, where your icon file will be. Rename it to ‘workflowCustomImageTemplate.png’.
Now, navigate into Contents and open Info.plist. Look for <key>NSIconName</key> and change ‘workflowCustomImage’ to ‘workflowCustomImageTemplate’. Save.

Now the icon will look like this:

Modified Quick Action icon in Dark Mode

Modified Quick Action icon in Light Mode

That’s much better. But there’s another issue we need to take care of:

Touch Bar with oversized Quick Action icon

The icon’s a bit too large, even though in Finder and the “More…” menu, it looks well-sized.

Tip #2 – Getting the Touch Bar icon to play nice

I thought I’d be smart about it, since the “append ‘Template’ “ trick worked, I’d have three differently sized images and append @2x and @3x. But it didn’t work.
The trick is to have a TIFF file with 2 (or 3, to be on the safe side) representations – one at 1x, one at 2x and one at 3x.
And voila, it worked:

Quick Action icon in Touch Bar with properly sized icon

To create the TIFF, I wrote a small app that takes my icon file, creates three NSBitmapImageRep objects from it and adds them to an NSImage instance. Then it writes the NSImage object’s TIFFRepresentation to disk.
Open that file in Preview.app and you’ll notice all three icons inside that one TIFF (you might have to select View – Thumbnails in the menu to show them)
Select the first and select Tools -> Adjust Size… in the menu bar.
Resize the image to 16×16 (which I found to be working nicely) and set its resolution to 72, if it isn’t already.
Select the next thumbnail and resize it to 32×32 at 144 DPI, and the third thumbnail to 48×48 at 216 DPI. Save.
Now repeat Tip #1 with this new file and you’re all set.

I hope this will save you some time, as it cost me plenty 😉

_____
Matthias Gansrigler | Founder & Developer – Eternal Storms Software
e: blog@eternalstorms.at
twitter | facebook | instagram

Read more