A New Way to Work

Up until the middle of last year, my iPad spent most of its time next to my comfy chair. I’d bring it into the office whenever I needed to test an app on the device, but for the most part it stayed in our living room for reading and browsing.

What changed? I added this to the home screen on my iPad Pro:

Linea Icon

Gedeon Maheux and Troy Gaul worked on Linea for over a year. What started as an internal tool for our artists, became something that has fundamentally changed the way I do development work.

A simple start

I’ve been coding professionally for over 40 years and have always kept a notebook near my desk. It’s an essential tool that lets me capture thoughts and ideas in a way that lists on a computer cannot.

As I started beta testing Linea, my trusty paper got used less and less. My first work with the app was doing a rough outline for a chapter in my book on color management:

Book Outline

There’s nothing here that you couldn’t have done in the standard Notes app. It took me awhile to realize that Linea has a superpower you don’t get with the built-in app…

Discovering layers for ideas

To be honest, I didn’t use my Apple Pencil much until Linea came around. The Notes app didn’t do anything I couldn’t do on paper, and drawing apps were overkill for my needs.

This all changed when I discovered the power of simple layers for managing ideas. A few pictures are worth a thousand words, so let’s go through the process with a recent example: the testimonials section of Linea’s website.

In our line of work, we often get a design with no guidance on how to construct it. Here’s what the original design comp looked like:

testimonial-comp

It’s our job to figure out how to make these designs look and work right. And Linea is a powerful tool for that task.

Start by breaking it down

The first step is to break the design into pieces. I did a rough sketch of what I wanted on Linea’s bottom-most layer:

Testimonial Outline

So far, that’s pretty underwhelming. What’s the big deal?

Well, we’re about to encounter one of the three hardest things in computer science: cache invalidation and naming things.

Another layer for names

This is where Linea really starts to shine. Because it’s a hard problem, your first naming choices are rarely the best. If you’re like me, it usually takes a few tries to get the right ones. When you use a separate layer for your names, they’re super easy to change without wiping out the lines of the underlying outline:

Testimonial Naming

Because selecting colors in Linea is so easy, I like to highlight important names. While debugging the page, the two states of the img elements had a matching CSS outline.

It’s also when Linea starts to feel like a miniature whiteboard on your desk. The Touch Eraser is one of those things that is so natural that you use it without breaking your train of thought.

A notes layer above all

After getting the names you want, it’s time to start building! This is when I create another layer for things I want to keep track of. Again, you can add or remove notes without destroying the work on the other layers.

Testimonial Notes

My two favorite things in CSS are animations and Flexbox layout. And as much as I love them, you’ll see above that I can never remember the names of the timing functions or container properties.

(If you’re a web developer, take a look at the #testimonials source code on the Linea website: the images in the .picker Flexbox animate just by changing the CSS class on the <img> elements. Simple and elegant.)

Helping us stay organized

I also have a bad habit of keeping my drawings around forever — a lot of thought went onto the page and it’s hard to it throw away. Linea’s project management makes it easy to keep track of the old work and keep my desk clean.

It was a pleasure to learn that other developers are seeing the same benefits that I have. My friend Gus Mueller has this to say:

“Linea has been my go-to app for sketching out ideas and solving visual programming problems since the day I started using it. It’s now an indispensable tool for my work.”

My iPad Pro is still a great device for reading in a comfy chair, but now it makes a daily journey to my office. If you’re a professional developer, I bet Linea will become a fixture on your desk, too.

I invite you to take a look at the product website to learn more.

Making Sense of Color Management

Making Sense of Color Management Book Cover

After over two years of work, my book on color management is now available for purchase. People I know and respect are saying some really nice things about my writing. It makes me happy when doing hard things pays off.

Previously, I’ve written about how displays are changing and how color affects the things we build for these devices. Whether you build on the web, or with native apps, your work in the coming years will be affected. You can learn more about the book at the Iconfactory.

But don’t just take my word for it. Here’s what Mike Krieger, Cofounder and CTO at Instagram, has to say about the book:

For years, engineers and designers have mostly stumbled through color management, understanding it ‘just enough’ to ship an asset to the web or an app. As devices move to wide color, a deeper and more practical understanding is vital, and Craig’s book provides exactly that. In fact, I’ve put his advice to use for Instagram.

As a developer, you might be interested in taking a look behind the curtains at the book’s mini-site. You’ll find additional articles, new markup for the web, and sample code for both iOS and macOS. The book provides essential background for these examples, but it will give you a taste of what you’ll be learning.

I also have some more advanced code examples for iOS in the works. If you work with raw pixels in bitmaps, process photos with Core Image, or do analysis with vImage, this will be right up your alley, so stay tuned!

Apple’s Lenovo

To bring long-term value for clients, companies need to continually reinvent themselves.

This quote comes from an IBM announcement that it was selling its PC business in 2005.

IBM’s business was moving towards services, and it was less dependent on hardware sales. But it still needed hardware to provide services for its clients.

The deal let IBM focus on its future. Lenovo got the ThinkPad brand, engineering talent, and a sales channel. This was one of those rare win-win scenarios they teach in business school.

Apple is no stranger to reinventing itself. Thirty years ago, it was selling a $15,000 printer.

Laserwriter

It was a beautiful device that produced stunning output. It launched the desktop publishing revolution and established Adobe as a central figure in the software ecosystem.

And today you can’t buy a printer with an Apple logo.

Someday soon, we’ll look back wistfully at those beautiful displays Apple used to make. With the announcement of the new LG partnership and displays, we’re seeing another part of Apple’s business being outsourced.

Maybe it’s time that Apple does the same thing with the Mac Pro business described by Marco Arment.

Like IBM, Apple is in a bind. Its future and the bulk of its revenue depend on mobile devices. Yet we can’t make these products without the horsepower provided by the Mac.

Besides Apple’s own internal needs, there are many professionals creating content for mobile devices. These folks need fast and capable computers to create apps, music, and videos. We all need powerful Macs to enrich the mobile ecosystem.

John Gruber said it best, “It’s the heaviness of the Mac that allows iOS to remain light.” But will iOS pick up this heavy load by the end of this decade? I don’t see it happening with my own work.

Licensing just the operating system was a disaster for Apple. Professional customers don’t have the time to build and maintain their own Hackintoshes. Any partnership to build Mac hardware would need to be structured so that it benefits Apple, the partner, and customer alike.

Just like IBM and their clients have benefitted from Lenovo.

Leaving Last Betas

I just updated to macOS Sierra on one of my Macs and immediately encountered a problem: I was enrolled for beta downloads even though I had never enabled them on that machine. I’m guessing that there was an old download on that machine that somehow caused the App Store to enable the beta.

There’s a good reason why I don’t want the betas installed on that Mac: it’s the one that runs the version of macOS that most of my customers will be using. It’s also the machine that submits products to the App Store, and we all know how picky they can be about tool and OS versions.

There’s button in the App Store settings of System Preferences that lets you opt out of updates. The problem is that button doesn’t do anything if you’ve already checked for updates. This is very likely to happen since the first thing most people do after installing the new OS is open the App Store.

To turn off beta updates I first quit the App Store app and checked that there was a beta seed URL for Software Update using the Terminal:

$ sudo defaults read \
    /Library/Preferences/com.apple.SoftwareUpdate CatalogURL
https://swscan.apple.com/content/catalogs/others/index-10.12seed-10.12-10.11-10.10-10.9-mountainlion-lion-snowleopard-leopard.merged-1.sucatalog.gz

I then nuked it:

$ sudo defaults delete \
    /Library/Preferences/com.apple.SoftwareUpdate CatalogURL

(Thanks Cliff!)

After getting off the beta, I then cleared the Software Update catalog with:

$ sudo softwareupdate --clear-catalog
Changed catalog to Apple production

(Thanks franz!)

As I did that the App Store settings in System Preferences immediately showed “No check for software updates has been done yet”. Launching the App Store refreshed the catalog and did not show the beta update.

Yay. Time for a drink!

Sticker Accessibility

The popularity of Stickers was no surprise to us. What did surprise us was that these graphical elements are a hit with customers who have vision difficulties.

In retrospect, it makes sense. You want to let friends know that poo is hitting the fan even if you can’t see well. As always, Apple has thought about making their products accessible from day one, and the new features in Messages are no exception.

But it doesn’t work like you’d expect for the default apps created by Xcode. Take Parakeet’s excellent Snacks collection as an example. What would you expect to hear VoiceOver say with this configuration?

Bacon

Congratulations if you said “Bacon P-N-G Accessibility Label”. Technically, that’s the “same” as the Bacon.png file that was dragged into the Asset catalog, but it’s not what you or your customer expects. When you add “Bacon” in the Accessibility field as well, it’s read correctly and everyone wins. As you know, you can’t have too much bacon.

As for our own Sticker packs, we implemented custom view controllers and don’t suffer from this particular problem. We have identified some other small accessibility issues throughout our work and will be issuing updates soon. Parakeet will also be updating their release with improved labels.

If you’ve released Stickers for iMessage without Accessibility labels, we suggest that you do the same.