Posts

Redesign: Resets and blank slates

Before I redesign this site, I want it to look as default as possible, so its previous design won’t influence the look and feel of its next iteration.

This isn’t a normal” part of redesigning a website, but for the sake of this exercise, I thought it might be helpful.

When I begin any sort of redesign, I like to — at the very least — pretend the previous design doesn’t exist. If a redesign is called for, the previous design doesn’t solve the problem. First, we need to identify the problem we’re going to solve.

This is a rare case where I can actually wipe the slate clean. I can literally un-design my blog — so that’s what I’ve done.

As of today (June 2020), this site uses Georgia and your device’s default sans-serif, and the whole thing has a max width set up for easy reading. That’s it. 

Headers and paragraphs share consistent line heights and font sizes. This is not necessarily good design (although it certainly can be); it’s simply efficient. 

It is my hope that the current version of this site doesn’t look designed at all. 

Most of the site’s CSS just looks something like this:

p, h1, h2, h3, h4, h5, h6, li {
	font-size:1em;
	line-height:1.5em;
	margin:1.5em auto 0 auto;
	max-width:42rem;
	padding:0 1rem;
}

Apart from hacking away at the email sign up below, it doesn’t get much more complex than that. It’s only a couple hundred lines of CSS. (In all honesty, I wrote it very quickly, and it’s not well-written. It could be much shorter. But it’s functional, and it took me less than one afternoon.)

The point of doing something like this is to avoid re-using and regurgitating ideas I’ve had in before. Like every other designer, I’m guilty of recycling my ideas. But every problem is unique — even if this is the eight hundredth blog I’ve designed.

A reset removes the previous problems and allows me to focus on the problem at hand — so I can start thinking about the future.

More thoughts on racism

I have been thinking for weeks about how I, as a white person, can help move the needle forward on equality in society.

I am still listening, but I wanted to share some of what I’ve learned so far.

First, continue to listen and continue to learn. Read some books. Here are a few that I have seen recommended many times:

I am sure there are many others.

The second thing that we need to do is confront the racist people in our lives. I think we could place these people in one of two categories:

  1. People we know, who are either unaware of their racism or are hateful bigots.
  2. People we do not know who are in political or financial positions of power.

When it comes to people we know, it’s time to tell them they are racist. Don’t sugarcoat it. Don’t call them micro aggressive.” Say what it is. Give their racism a name, whether they intend it or not. If they are hurt, remember their words hurt more than their feelings at that moment. 

If you are uncomfortable with this, you’re going to have to suck it up. Change does not happen without discomfort.

When it comes to people in political or financial positions of power, you must vote with your dollar. If you can, vote them out of power. (If you are an American, that carrot you call a president is not a stupid idiot doing a bad job. He’s a cunning fascist who is hellbent on destroying your country and taking away your freedom. Vote accordingly.)

If the racist person is in a financial position of power, don’t spend money on their products. I know there are absolutely times when you have no choice. If I found that out that the CEO of Dole was a mega-racist, I would have to stop buying fruit from all the supermarkets in my neighbourhood. But I need fruit. I understand this has limits. But be aware that every time you spend money, you are implicitly supporting the people at the top of that organization.

If it is possible, spend more money on businesses owned by minorities. If you are in Toronto, I can make this easy for you: here is a list of 135 Black-owned businesses in the city you can support right now. And here’s another 100.

We need to move the needle forward on this. Until we live in a society that truly offers equality for all of us, there isn’t equality for any of us.

Black lives matter

I do not want to speak out of turn or say the wrong thing. I do not want to hurt or harm. 

But to be silent is to be complicit. I will be silent no more. 

Black lives matter. It needs to be repeated until we all agree. This is not about George Floyd, Michael Brown, Trayvon Martin, Eric Garner, Tamir Rice, Walter Scott, Freddie Gray, or so many others. This is about the systemic oppression and abuse that Black people have suffered for hundreds of years at the hands of white people. 

I am aware of my incredible privilege as a white man. Even if I am not intentionally complicit in this system, I am in it. I did not choose this role, but neither did those the colour of my skin has oppressed. The first step towards reconciliation is acknowledging my part in this system, and listening. 

It is also the time to acknowledge the grief of the Black community. It is time to enter into that grief with them. There are so many men, women, and children that have been taken from us. Imagine if it was your brother, father, son, uncle, partner, or daughter. 

As a Canadian, I admit I am weary of being told Canada doesn’t have a racism problem. We do. We’re simply polite about it. We are not immune to police brutality, racist police forces, and cold-blooded murder. The racism in this country is insidious, hidden behind closed doors and off-the-record legal settlements. Our police forces disproportionately target Black and Indigenous people. It keeps me up at night. 

These protests, and the police-instigated violence and cruelty, have also kept me up at night. The videos I have seen are disturbing, but no longer shocking. In the past ten years, I have seen many real videos of white cops murdering unarmed black men. It is insane to me that I have seen even one. 

It is not unreasonable to expect that police officers should uphold the law and protect people, rather than abuse it and kill people. If they are unable to fulfill their basic duties, they should be disbanded. (And once we’re done with that, let’s tackle prison reform.) 

Black people built America for free. They are owed much more than equality and justice. 

I do not know all the right steps to take. I am listening and learning. I am sure I will make mistakes, though I do not want to. I am aware of the ACLU, and the Equal Justice Initiative. Are there organizations in Canada that need support? I would love to hear about Canadian organizations focused on these issues that I can support. If you have suggestions, send me a message on Twitter. 

For now, I am listening. To my Black friends, and to the Black people in my community: I see you. Your life matters.

Redesigning in the open

A couple weeks ago, I opened my website and realized one of my blog posts was broken. Why? I don’t know. Wordpress, probably. I debated whether or not I just fix the issue, and continue to deal with Wordpress, or if I follow my heart.

I’m following my heart.

Inspired by a couple of my personal heroes, Jonnie Hallman and Frank Chimero, I am re-designing my website in the open.

What does that mean?

Frank Chimero explained it well, so I’ll quote him here:

Here’s the idea: I’m going to be redesigning my site, and I will document the thoughts, process, and decisions here. (This is largely inspired by my friend Jonnie’s redesign blog.) By writing about it, it may help both of us. I can further develop my methods by navigating the friction of explaining them. I’ve been looking for a way to clarify and share my thoughts about typography and layout on screens, and this seems like a good chance to do so. And you? Well, perhaps the site can offer a clearly explained way of working that’s worth considering. That seems to be a rare thing on the web these days.

I don’t think that my blog will be as useful to anybody as Frank or Jonnie’s undoubtedly was, but I do think it is helpful to write one’s thoughts down in a place they can be easily referenced. 

It is also helpful to our craft to discuss our work in more detail. Khoi Vinh was so perturbed by the lack of detailed design commentary available that he started a podcast with Adobe to address the need.

My hope is that, by documenting the design process, I might help those who are starting out in this field.

In addition to documenting the design process, I plan on documenting and open-sourcing my code as well. For a variety of reasons (I’ll save them for a future article), I plan on learning Vue or React and creating a static website, rather than a PHP-style blog.

But both React and Vue can be hard to learn. In the past, it was much easier to learn how to make a website. You right-clicked anywhere on the page and selected Inspect Element” from the contextual menu. That was how I taught myself basic HTML and CSS years ago: I inspected what other people had made. 

Unfortunately, there is no way to inspect somebody’s modern web app and see how the sausage was made. Inspect Element is basically useless. You can’t tell if you’re looking at components, or layouts, or pages, or routes. You don’t know if they built the whole thing with NPM, React, Vue, Gatsby, Gridsome, or — honestly — Squarespace.

I don’t know what tech stack I’ll use yet — apart from a headless stack of some variety — but I will document what I’m learning, and share open source the site once I’m done. I hope, by documenting what I’m learning, as well as open-sourcing my code, I can make a positive contribution to people who are just learning this craft.

The state of Apple’s laptop lineup

About a week ago, I realized my 2017 15” MacBook Pro’s speakers are blown. I rarely use the laptop without headphones, so I’m not sure when it happened. Now the laptop is unusable as a shared screen for Zoom calls, because we can’t hear the audio when we call our friends. Or rather, we can, but everybody sounds like they’re hanging out with Aquaman underwater. It’d be a cool sound effect, if it wasn’t unintelligible. 

If we were living in the Before Time, I would have simply taken the laptop to the Apple Store to have them assess the damage. Once the After Time comes around, I might still do that.

But I really don’t like this laptop. I hate the keyboard . It feels like typing on cracker wafers, and a single speck of dust can take out the whole keyboard — which is a design failure beyond understanding. I don’t like the obnoxious space grey finish. Silver is the right colour for a MacBook, turns out. I don’t like how large it is (more on this later). And now, the speakers are unusable.

All this got me wondering: if I were to buy a new portable machine from Apple today, what would I buy?

I say portable machine” because I don’t want to discount the iPad from this list. My 10.5” iPad Pro is a great little machine, and it is very good at certain tasks.

I am in the fortunate position of using an iMac Pro as my primary computing device. I don’t need to necessarily have the same power on the go as I do at my desk. When I’m mobile, I want a small, lightweight device that lets me easily get my essential work done — and it better have a good keyboard.

My laptop fails to meet some of those metrics. The large size of the 15” MacBook Pro seems absurd. It’s too large to comfortably sit on a lap, and every extra pound of weight matters a lot when I’m travelling (not that I’m doing much of that right now). Plus, the keyboard is a failure waiting to happen.

I would love to use the iPad Pro. It’s lightweight and ultraportable, and the Magic Keyboard looks like a dream. But for many reasons, the iPad Pro isn’t for me. The Verge offered some sage advice recently: Never buy hardware today based on a promise of software tomorrow.”

Which brings me back to the laptop lineup.

Apple’s laptop lineup, in all honesty, hasn’t looked this good in almost a decade. Now that they’ve replaced the butterfly keyboard with the Magic Keyboard, it’s easy to recommend almost any of their laptops. The 16” MacBook Pro is a wonderful machine, even if it’s too big for my liking (I trialled one in November). The 13” MacBook Pro looks very good.

If I had to buy one today, I think I’d buy the MacBook Air. It’s the lightest and most svelte option. I like the taper. It doesn’t have a Touch Bar (for me, that’s a perk). I don’t need power on the go often enough to justify the extra weight or cost of a MacBook Pro. Most of the time, I’m either pushing rectangles around in Figma or writing PHP or Javascript in Visual Studio Code or Sublime. These apps don’t need a lot of CPU power to be useful.

That being said, if the rumours are true, the Mac lineup is about to get very interesting. If Apple makes its transition to ARM chips next year, their laptop lineup should become stronger. ARM chips are what makes iPads as powerful and battery efficient as they are. If a MacBook Air got one, all-day battery life is a possibility — and the laptop would be much more powerful. The most recent iPads are so much faster than the current-generation MacBook Airs, it’s not even funny.

Hopefully, Apple will share more information about the plans for its chip transition in a month or so at their annual developer conference. But they’re a secretive company. They may not share that information with developers before next year, assuming the rumours are true. (And, of course, they might share information this year about getting development work done on an iPad too — which would change the equation for me again.)

All of this puts me in a peculiar situation. I’d love a smaller, lighter laptop. I’d love to get rid of the butterfly keyboard and Touch Bar, both of which make me more prone to errors and less efficient. But if I get this year’s model, I’m potentially getting the last laptop Apple makes before a once-in-a-generation leap.

One should never make purchasing decisions based on the rumours of future gear, but this aphorism is still true: there is never a good time to upgrade your kit.

Can I use an iPad Pro for professional creative work?

Every year around this time, just before Apple unveils the latest versions of their operating systems at their annual developer conference, I like to re-evaluate whether or not I can use my iPad to get work done.

The iPad Pro is really a perfect portable machine. It’s small, insanely light, and easy to use in almost any situation — even tight plane seats. You can even get a cellular-equipped iPad if you want consistent and reliable internet when you’re away from a wifi connection. (And the new Magic Keyboard is a wonder.)

I really like using my iPad, and I always wish I could use it to get more work done. And every year, I ask the same question: can I use it as a laptop yet? Can it be my only portable device?

There are a lot of people I know, follow, and admire who use the iPad as their only machine, or as their dedicated portable device. I trust each of these people; they each represent a different class of person who is well-suited by the iPad’s strengths. They are writers, photographers, and entrepreneurs. The iPad is great for those people.

Writers are blessed with the iPad. There are more writing apps for the iPad than I could count. It is the best writing device I have ever used.

Photographers can almost complete their whole workflow on an iPad. With apps like Affinity Photo, Photoshop, and Lightroom on the iPad (and the USB‑C connection on the latest iPad Pros), it’s never been easier to use the iPad for photography[^1].

And for entrepreneurs, it’s easier than ever to use the iPad as your only computer. It’s great for project management and email, and the cellular model makes it easy to manage your business anywhere.

For many people, the iPad is all they’ll ever need. But I am a designer, photographer, and writer who codes websites. This adds several wrinkles to this setup.

Somehow, the iPad is ten years old, and there still isn’t a great web design app available. Sketch and Figma are noticeably absent from the App Store, and Adobe seems uninterested in porting XD to the iPad.

On that note, we don’t have any great print design apps either. InDesign does not exist for the iPad. (I use InDesign on my Macs all the time.) Its competition, as limited as it is, isn’t on the iPad either. Publication design and professional page layout on the iPad is a non-starter. 

Even if InDesign or its competition arrived on the iPad, those apps require so many other simultaneous computing contexts that I’m not sure an iPad experience would ever be great. (I often have Photoshop, Finder, Illustrator, and InDesign open at the same time, all working on the same publication.)

Speaking of Photoshop: while you can edit photos with an iPad, I’m not sure anybody should manage them with it. The only DAM available for photography on the iPad is Lightroom. If you use Capture One, DxO, or any other alternatives, you can’t manage your photo library on the iPad. I’m currently a Lightroom user, but I don’t want to be bound to Adobe because of my hardware. (I’ve been considering Capture One for some time now.)

This isn’t necessarily about avoiding Adobe’s subscription fees. I am happy to pay for the tools I use to make a living. But as a working professional, I don’t want one option from one company. Competition breeds creativity and makes all the tools better. Philosophically, I don’t want Adobe to ever be the only option.

Finally, it’s also difficult to get web development done on an iPad. It’s not impossible, but without a desktop-class web inspector, and without local virtual machines or code compilers, the job becomes an arduous series of gotchas. (And the desktop-class Safari” on iPad works until it doesn’t. Without hover states or anything else we take for granted on a PC, the internet is a lot harder to use.)

Most people do not have jobs with requirements like mine. I’m sure many people can use an iPad every day for all their computing needs. And I’m sure there are some people in my situation who choose an iPad, and jump through its hurdles to use what is admittedly a more tactile device. 

But I just want to get work done. 

The real problems are edge cases. Many small tasks take much more effort on an iPad than they do a Mac. 

The other day, I made some quick edits to a Markdown document for a client. I needed to export the document as rich text and attach it to an email. This takes two clicks on my Mac; on an iPad, I had to fumble around for a few minutes until I got it done. 

My sister is a teacher. If she needs a new machine, she could very well use an iPad. However, if the website she uses to track student attendance and report grades doesn’t work on Safari in iPadOS, then it’s moot. She won’t install iCab to get the job done. She’ll be rightly frustrated, return the iPad, and get a Mac instead. 

I love my iPad. I genuinely like using it. I wrote this post as a way to talk myself into using the iPad more, but it slowly morphed. Here’s my basic problem, in a nutshell: if it’s faster to accomplish basic tasks with my laptop, I’d rather use that. I remain impressed by folks who use the iPad for their work every day, but for people like me, the iPad makes enough tradeoffs that I don’t think I could make the switch.

You can throw all the Magic Keyboards and Apple Pencils you want at this thing; it doesn’t make it any better at running the tools I need to get my job done.

[^1]: Because Lightroom CC relies on cloud storage, I’m not sure most professional photographers could rely on the iPad as their only computing device, but it can certainly be the mobile solution.

Quarantine diaries: 2020.04.17

Hildegard and I have been practicing social distancing for just over a month now. It’s been a long, unusual trip, and I suspect we’re just getting started.

Most days feel exactly the same. Wake up, shower, eat breakfast, meditate, get to work. Work until lunch. Eat lunch. Work until it feels reasonable to stop working, but hopefully not much later than 5. Sometimes 8 though.

It feels more pertinent than ever to share some of what we’ve been doing for fun. Somebody else might need a way to pass the time.

Games

We’ve been playing more video games than usual. Animal Crossing has proven to be joyful escapism. I’m also enjoying Outer Worlds (highly recommended for fans of Fallout 3 and Fallout: New Vegas) and Paper Mario on the Gamecube (which we still have in our house).

On that note, if you have a PS4, Sony has made Uncharted: The Nathan Drake Collection and Journey free for the next few weeks. Get both if you haven’t already.

If getting stressed out from playing a difficult video game will help you unwind and forget about real-world stresses (as it does for me), Sekiro is currently on sale in the PlayStation store. Dark Souls and Bloodborne are obviously great choices too.

Movies and TV

This is a great time to start watching or re-watch Parks and Rec or The Office.

We are watching a lot of movies. 90s Disney classics have gone down well. We’ve also enjoyed Burning, Onward, and Darkest Hour.

If you are interested in documentaries, some of Gary Hustwit’s work — the man behind Helvetica and Rams — is available for free right now. Every week, a different film of his is available to stream for free on Vimeo. This week, it’s Workspace.

Exercise

Indoor workouts have been very important to our health and sanity. Hildegard is following along with virtual exercise/​dance classes, and my uncle kindly sent me some prison workouts. Not quite the same as the gym, but it’s something to get you moving.

I have discovered the best time to walk, at least in our part of the city, is at 8 in the morning. Nobody walks to work anymore, and the foot traffic is almost entirely construction. Similarly, the best time to get groceries is 10:30 in the morning — after the morning grocery rush, before the lunch break.

Separating work from home

This has been very difficult, even for me — and I’ve been working from home for nearly a decade! Without leaving the house to go for a walk at the end of the day, or to get groceries, my routine feels disjointed.

Most days, when the workday is done, I have a beer. It’s helped me acknowledge the working day is over, and it’s also been a great reliever of COVID-induced anxiety.

I was a little concerned about this for a while. I typically have one or two beers every week — not one or two a day. But then I recalled CJ Chilver’s blog post on this very topic:

This worked so well on my anxiety and made my family so much happier to be around me, that it started to get me worried: what if I made a habit of this and became dependent on this small vacation every day of my life? I went on to overthink it and talk for 10 minutes about the worst possible outcomes. [My therapist] stopped me. Does it help your anxiety?” Yes. Then have a drink.”

For some people, this is not a great solution. Obviously, don’t do this if alcohol is a problem area for you. But for me, a beer or two a day has worked wonders on my mental and emotional health.

You need to find a way to separate work and home, as best as you can. If you can’t (or don’t want to) have alcohol, try putting on shoes at 9 and taking them off at 5. Or work at a standing desk during the day — put your laptop on your iron board, if nothing else will do. Or do your indoor prison workout.

Or maybe just stare out the window for an hour, watch the sunset, and spend an extended period of time taking deep breaths.

After all, we’ve all got the time.

How to force your MacBook Pro to use its discrete graphics card when it’s plugged in

Note: This is only relevant if you are using a MacBook with a discrete graphics card. This includes modern 15” and 16” MacBook Pros. This will not work on any MacBook Air.

Now that I’m used to the consistently excellent performance of my iMac Pro, using my MacBook Pro is an exercise in frustration. It’s not just the terrible keyboard (although that’s a big part of it), it’s also the consistent feeling of lag I experience whenever I’m using the device.

Many people who read this will likely already know, but 15” and 16” MacBook Pros have two graphics cards. One is the integrated card, which is part of your machine’s regular CPU. The other is the discrete graphics card. The discrete graphics card is the machine’s isolated GPU; it runs separately from the onboard CPU. It’s much faster, runs hotter, and uses way more power.

After some googling, I figured out that my lag problem is related to the laptop’s integrated graphics card. You may experience similar issues with your machine; it’s not uncommon. The solution is to use the machine’s discrete graphics card instead.

Because the discrete GPU uses more energy, I don’t want to use it when I’m on battery power. It would quickly drain the battery. When I’m on the go, I want to optimize for long-lasting battery above almost all else.

But when I’m plugged in and charging the laptop, I always want to use the discrete graphics card. It makes the machine run much more smoothly, and removes any scrolling or keyboard or lag I experience in regular use.

That being said, there is no setting to change this in System Preferences. If you want better laptop performance while plugged in, and your laptop has a discrete GPU (i.e. a 15” or 16” MacBook Pro), then you need to use the command line.

Here’s what you want to type in the command line (in the Terminal app):

sudo pmset -c gpuswitch 1

You’ll be asked for your password (sudo tells the machine you’re the administrator), and then you’re done.

For people who are new to the command line, here’s an explainer of how this works.

This command adjusts the power management settings for the laptop’s chipset using something called pmset. You can adjust the power management settings while you’re on battery (pmset b), while you’re charging (pmset c), and all at once (pmset a).

The above command began with pmset c, which tells the machine you want to adjust power management settings for situations when you’re charging. Then, it tells the computer to always use the discrete GPU while charging (that’s what gpuswitch 1 does).

To reset this, you just need to type the following:

sudo pmset -c gpuswitch 2

gpuswitch 2 tells the machine to automatically switch between discrete and integrated graphics.

You can also run sudo pmset -c gpuswitch 0 if you want to always use the integrated graphics card while you’re plugged in.

You can modify any of these settings for different battery status situations. If you want to make these changes for situations when you’re running on battery power, any of the following will work (note we’ve just swapped pmset -c with pmset -b):

# Always use the integrated graphics card while running on battery power
sudo pmset -b gpuswitch 0

# Always use the discrete graphics card while running on battery power
sudo pmset -b gpuswitch 1

# Switch between discrete and integrated graphics cards automatically while running on battery power
sudo pmset -b gpuswitch 2

And if you want to control this setting globally, whether your laptop is plugged in or not, you just need to change pmset -b to pmset -c.

# Always use the integrated graphics card
sudo pmset -a gpuswitch 0

# Always use the discrete graphics card
sudo pmset -a gpuswitch 1

# Automatically switch between discrete and integrated graphics card (this is your laptop's default setting)
sudo pmset -a gpuswitch 2

And now you have finer control over your laptop’s power settings! If you want to make sure this is working, you can open Activity Monitor and view the Energy pane. The Graphics Card setting near the bottom of the window will tell you which card is operating.

(And thanks to Reddit user Freneboom, who gave me just enough information in this Reddit thread to figure all this out.)

Let’s talk about something else

In an effort to talk about anything other than the novel Coronavirus, I thought I’d write about other things that happened in the past week or so that interest me. 

First: Animal Crossing: New Horizons is our for Nintendo Switch. It’s very good. I haven’t played one since the GameCube, but this has a loop which feels more interesting. It’s also, obviously, a perfectly timed escapist video game. Stuck inside all day? Go escape to a deserted island, make some animal friends, and slowly build your own village. Delightful. 

Secondly, Apple released a couple new products this week. This might be a bad time to announce luxury computing devices, but nevertheless, it’s a great time to be an Apple fan. 

The new MacBook Air looks fantastic. It has the new keyboard from the 16” MacBook Pro, which is a very good thing, because that keyboard is great. And now you can get a quad-core MacBook Air! That’s a nice upgrade. Plus, the price dropped by hundreds of dollars. That’s not a typo. Literally hundreds. If you need a new laptop for some reason (maybe you’re working remotely for the first time), this new MacBook Air is a safe and easy recommendation. 

Apple also announced a new iPad Pro. It’s got a faster processor, two cameras, and LiDAR support for… some reason. But none of that matters, because you can buy a keyboard for it that suspends the iPad Pro in mid air. This lets you angle the iPad whichever direction you like and raises it closer to eye level. 

I mean, look at this picture. Is this not the coolest thing you’ve ever seen? The keyboard is $350 USD, so this picture might be the closest I ever get to owning one, but it’s undoubtedly an impressive engineering feat.

Also, the iPad will have mouse and trackpad support in an update coming out to everyone sometime in the next week or two. Once iOS 13.4 drops, set up any wireless trackpad or mouse you have around the house with the iPad and give it a go. It could bring the iPad one step closer to replacing your laptop. 

Thirdly, and this news is a little older than a week old, but it’s been a slow” news week: Bill Gates stepped down from the board of directors at Microsoft. He hasn’t been CEO for a long time, but the man is a titan. This is the end of a pretty good run. He’s left to focus all his energies on humanitarian efforts. Good for him.

Finally, movie studios are releasing films that were currently in theatres digitally. This is obviously way ahead of their typical release plans, but the studios need to make money, and we all need something to watch. I’m looking forward to catching Pixar’s Onward, which will be available digitally in Canada on March 23rd.

Tips for working from home

For many people, this is their first week of working from home. Hi! Welcome to the club. We eat cookies whenever we want, because we’re always taking breaks in our kitchen.

I’ve worked from home since 2012, so I’ve socially isolated myself for my whole career. This can be a tough adjustment, so I’ve written some tips and tricks. Hopefully these are helpful for you! And if you have any other tips I should add, or any questions, hit me up on Twitter.

  1. Start the day with a standup call. If your team is used to hanging out in the office ever day, make a routine out of beginning the day with a quick 15-minute video call to catch up, say hi, and share what you’re all working on. Bonus points if you can avoid talking about the news, but since it weighs heavily on us all, don’t beat yourself up if it comes up.
  2. This might be a good time to try Slack or Microsoft Teams, if you haven’t already. But if you do use them, establish some rules. Let people log off once in a while to get real work done. We can’t be productive if we’re staring at a chat window all day.
  3. Start making lists. Small, approachable lists you can check off throughout the day will empower you and give you a sense of control and productivity. Trust me, this is helpful whether there’s a global crisis or not. We all need to feel like we’re accomplishing something.
  4. Don’t check the news or your email first thing in the morning, if you can avoid it. That includes Twitter. These things are poison to your happiness, and your productivity.
  5. You need to wear pants. Most of us are used to going to the work place and leaving work behind at the end of the day. That’s no longer the case. Now, you have to get into the work mode. So put on some pants. You can take them off when you’re done working. (I know some freelancers who wear shoes during the workday. If that helps you, don’t hesitate.)
  6. You need a routine. Workplaces thrive off routine. Your work mode needs one. I have a breakfast routine, lunch routine, daily gym routine, and even a caffeine routine. It keeps me stable (although my gym routine is definitely in flux right now, and I’m feeling it).
  7. Don’t take breaks at your laptop. You’ll stop associating your laptop with work, and then you’ll be on it all the time. 
  8. Music! Try and listen to some music. Shawn Blanc wrote about this a few days ago with some recommendations for instrumental music that keeps you in the zone. I’ll add some to the list: every Trent Reznor & Atticus Ross soundtrack (especially The Social Network, The Vietnam War, and Before the Flood), 65daysofstatic, Jon Hopkins, Ludovici Einaudi, Ólafur Arnalds, Nils Frahm, and Miles Davis. I could go on for a while, but you’ll figure out what you like pretty quick. The music (or a white noise app) will help you concentrate and get in the zone. If you need them, this is a decent time to invest in a pair of noise-cancelling headphones. Here are some picks from The Wirecutter. (I bought the Anker headphones they recommend as their budget pick, and they’re okay, but not great. This is a category where you get what you pay for.)
  9. Ergonomics are important for productivity — so get comfortable! I don’t necessarily think people should buy desks or chairs or anything — they can get wildly expensive. (But if you want a new chair or desk, I have so many thoughts!) If you need a bigger screen to be more productive, get a cheap monitor. If your laptop is too low on your table, get an external keyboard and pointing device and put your laptop on a stack of books. Don’t be afraid to budget a little bit of money to save yourself a lot of pain.
  10. Don’t forget to stretch at the end of the day!

Good luck with your new workspace. If you have questions, let me know on Twitter. If I’m following my own instructions, you won’t hear back from me before the afternoon.

The workspace

Over the past year, I have completely replaced my desk. At some point last summer, I realized that my entire office was designed based on assumptions I made ten years ago about the way I work — when I was still a university student. 

This is what my workspace looked like in 2014:

A Thunderbolt Display on a small desk, a couple cheap computer monitors, and a cheap IKEA chair.

After my wife and I got married a year later, everything about the setup changed. This is what the desk looked like by 2018:

An LG 5K monitor on top of a big IKEA desk sitting on two filing cabinets. The chair is now a Herman Miller Aeron.

Apart from the desk itself (and its enormous size), the core philosophy of this setup hadn’t changed much. I plugged a laptop into the nicest monitor I could afford, on a second-hand desk gifted to me by my parents or my wife.

This was a workspace I designed when I was in university. Back then, I had to go to classes, or visit clients, every day of the week. Portability was of the utmost concern. The workspace itself was an afterthought.

This is my workspace today:

An iMac Pro on a small sit/stand Husky workbench.

Obviously, a few things have changed.

The desk

The centrepiece of every workspace is the desk. I’ve wanted a sit/​stand desk for nearly five years now (I even mentioned it when I shared my setup with The Sweet Setup in 2018). After years of research, I settled on a Husky sit/​stand worktable from Home Depot1. It’s supposed to be a carpentry workbench, but it’s exactly what I wanted for my work. 

This desk can hold up to 300 pounds. It’s remarkably stable at max height, and its maximum height is a good standing height for me. The manual crank is smooth and solid, and after several months, shows no signs of giving out. We added a half-decent cable management system to the desk, so you don’t have to see all the different pieces of the setup. Finally, I added a custom keyboard tray with parts from Amazon and this IKEA shelf2. What more could you ask for?

You could ask for casters. Putting wheels on a desk probably sounds ridiculous, but I’ve quickly come to depend on this. A couple times every month, I end up doing small product shoots in my apartment. It’s very useful to be roll the desk out of the way and make more space in my office3.

I was particularly inspired by Jeff Sheldon’s post about his desktop stand, so I built something similar. It’s a lovely accent piece, and it stands 2” above the desk, which is just high enough to stow some notebooks, archive and backup drives, and my iPad Pro.

The desk shelf.

As a creative professional, your workspace should be no different from a master carpenter’s workshop. It should put everything you need within arm’s reach. It should be easy to use, but specifically customized to your liking. It should be as big as it needs to be, but not too big, lest it gets unwieldy. 

But mostly, a creative workspace should be reliable. No matter what situation the creative professional finds herself in, she should be able to rely on her workspace to get her through it.

That’s what this desk has become for me. It’s a place of solace — a place where, no matter how hard the work gets, I can be comfortable and productive. The desk lets me work how and where I want to work, and when it’s time to get down to business, it gets out of my way.

A vanity shot of the whole desk inside the office.

The computer

The same is true of the computer. Some time in the last year, I realized I had the wrong computer setup for me. I was tired of hearing my laptop fans spin up anytime I compiled any intensive code, opened Lightroom, or started adding a lot of layers in Photoshop.

After experimenting with the 16” MacBook Pro, I finally gave in. I returned the laptop and ordered a base spec iMac Pro with 2tb of storage.

I love this machine. It’s whisper quiet (I have no idea what the fans sound like), it never fails, and the keyboard always works. (In fact, as time goes on, the keyboard is getting more broken in, and becoming even nicer to type on.)

There’s not much to say about the iMac Pro that hasn’t already been said by smarter and more cogent people. It’s the best Mac for people who need power, but don’t require the amount of power the Mac Pro provides. That’s certainly been true in my usage.

To put it simply, the computer is a lot like the desk: it’s reliable, powerful, and does everything I need it to do. 

The best kind of technology is the kind you don’t really think about — the sort of technology that just works. More or less, that’s been the iMac Pro for me.

I like tools that are unobtrusive. I like tools that get out of the way and let me work without restrictions on my creativity. If you put me at this desk with a cup of coffee, I’m a pretty happy guy.

Footnotes
  1. Credit where credit is due: Tyler Stalman and Jonathan Morrison came up with it first.↩︎

  2. I’m not totally sold on the keyboard tray. If I position the keyboard tray at the right height, the iMac is too high. If I remove my iMac stand from the desk to compensate, the iMac isn’t high enough when I’m standing. Like everything in life, the keyboard tray is a compromise. I’m not sure it’s the right one for me.↩︎

  3. Also, my office doesn’t have any windows. On nice days, I like to roll the desk to the living room and enjoy some of the sunlight.↩︎

Behind the scenes of a photo heavy case study

First things first: there’s a new project in my portfolio. The client is Wycliffe College, a seminary on the University of Toronto campus who hired me to be their official photographer for the 2019 – 2020 school year. 

The case study is a photo-heavy page with a fresh, magazine-inspired gallery design and loads of animations. When I say it’s photo-heavy, I’m not joking: there are 36 images in the main body of the page, and nearly 40 images if you include the Related Projects” footer, website logo, and favicons.

Here’s a sped-up, low-res .gif of what it looked like before the design update. As you can see, the images are static, perfectly centred, and mildly boring to scroll.

The case study before I added animations

And here’s what it looks like today (again, as a low-resolution and sped-up .gif). This design is more fun to look at and more fun to scroll — although images are larger, and scrolling takes longer as a result.

The case study as images animate in

(To check it out in its high-resolution glory, simply visit the case study on the biggest screen you have.)

I’m really pleased with how this case study has turned out.

Of course, you can’t just throw three dozen high-resolution images on a website and call it a day. That was the first thing I tried, and it was immediately obvious that my new portfolio was ill-suited for displaying photos. I wanted photo grids, and instead I got a plain, vertical list of photo after photo.

I figured I had to make three things happen before I could share this in front of the world:

  1. A fresh design, especially on large screens. Scrolling through a long list of photos that perfectly line up with each other is kind of boring. 
  2. Animations. Scrolling through a list of static images felt lifeless immediately. The obvious answer is to animate them, to keep them interesting. 
  3. Finally, it takes a lot of bandwidth to quickly load that many images. So you need a way to cache them, and a way to load them only when they’re needed — just before they’re visible on screen. My website already does this, but there was obvious room for improvement. 

I thought it fun to share how I solved all these problems. 

A fresh design

The fresh design was the last thing to come together, even though it’s the first thing on the list. I started by adding different image sizes and galleries, but, when I started testing the case study, it became clear that wouldn’t be enough.

Eventually, the problem became clear to me. On large screens (like, 13” laptops and beyond), there was a lot of space to the left of the images. It felt like the margins were too large, and I’d missed an opportunity.

Fixing that was easy. I added a left-aligned” CSS class to images and galleries that I wanted to hang to the left. (I added this to the backend of the site, so I could do it on the fly. This was easy in Craft, and would still be relatively simple in many other CMSes. But you could very easily just do it in raw HTML.)

The left-aligned code is pretty simple. Here’s my SCSS code, if you’re interested:

.image-grids.wide.left-aligned, figure.wide.left-aligned {
	@media screen and (min-width:1400px){
		margin-right:calc((100vw - 1200px) / 2);
		// This is the inverse of the margin-left calc applies for regular .image-grids and wide right-aligned figures
		margin-left:0;
	}

	@media screen and (min-width:2000px){
		margin-left:calc(((100vw - 1200px) / 2) - 367px);
		// line up the images on the grid. This looks messy, but it calculates math based on the padding of image grids with three images in them.
	}
}

It just tells the browser to push some images further left than others. (Also, I use calc” a lot, because CSS is basically just math. I’m sure there’s room for improvement here.)

This layout should be obvious if you’re on any laptop or desktop that is more than 1400px wide (For content: 13” MacBook Pros and MacBook Airs have defaulted to a higher resolution than this for years, but most iPads are still not this high-resolution.)

Animating images and elements

The new design doesn’t solve everything on its own. Even though this is just a long list of static images, it needed some sort of motion to come to life. So it was time to animate the images.

I know a few people who say you should make all your own CSS animations. I think you should know how to write key frames, but for the most part, a decent animation library will get you there. 

I really like Animate on Scroll (AOS). AOS is clever: it uses vanilla Javascript instead of jQuery (which I love), you have an enormous amount of control, and you can easily code your own animations if you need to. It’s also pretty lightweight. Oh, and the animations trigger only once the animated element appears in the browser viewport.

Adding AOS to your site is as easy as you’d expect: add the script, init the library in the <footer> of your document, and add the CSS to your working files. But you can really optimize it for performance. 

I load the library and initiate the script only on the pages that require it. I’ve also adjusted the script initiation, so animations only begin after my images have loaded (and not on page load). If you’re curious, here’s what my configuration looks like:

AOS.init({
	  // Global settings:
	  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
	  startEvent: 'lazybeforeunveil', // name of the event dispatched on the document, that AOS should initialize on
	  initClassName: 'aos-init', // class applied after initialization
	  animatedClassName: 'aos-animate', // class applied on animation
	  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
	  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
	  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
	  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
	  
	  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
	  offset: 120, // offset (in px) from the original trigger point
	  delay: 0, // values from 0 to 3000, with step 50ms
	  duration: 1000, // values from 0 to 3000, with step 50ms
	  easing: 'ease', // default easing for AOS animations
	  once: false, // whether animation should happen only once - while scrolling down
	  mirror: false, // whether elements should animate out while scrolling past them
	  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});

Most of these settings are default, but the key change I made was to the startEvent. Typically, the start event is DOMContentLoaded, which loads animations as soon as the page is done loading. That was too soon for me. lazybeforeunveil is the event that my lazy loading plugin declares just before loading images into the viewport. Not only did this speed up page load times, but using lazybeforeunveil instead of DOMContentLoaded made scrolling feel much more responsive.

I’ve added animations to most of the images on my portfolio. You can see them in action in the new case study. AOS is such a nice library that I plan to use it on every project that calls for animations in the future.

Optimizing and lazy loading images

My website has optimized images with <scrset> for years, but I ran into a bug with my particular setup. For whatever reason, browsers would load images before they should. (I verified this by using the Network tool in Chrome, Safari, and Firefox, so it wasn’t just a browser bug.) At page load, instead of loading just the hero image, small versions of every image would get loaded before the DOM was visible. I had to fix this bug before putting up a photographic case study.

My portfolio was the first site I built with Craft. One of the things I love about Craft is the way it handles images: you can declare a focal point, resize and crop images on the fly, and create vastly different looking templates based on media queries and <picture> tags.

To make all this happen, I use a plugin called Imager by André Elvan. Imager generally makes this easy to use and accessible within your Craft templates. If you’re like me, and you need to follow a guide to get started, Andrew Welch wrote one that I found incredibly handy.

Andrew guides you (no pun intended) through the basics, and also teaches you how to set up basic lazy loading (with lazysizes, which I’ve quite liked). The problem is that, as of late 2019/​early 2020, the image source tag in that demo doesn’t work properly out of the box.

Here’s the sample code from Andrew Welch:

<img class="scale-with-grid lazyload"
     src="{{ craft.imager.base64Pixel(2,1) }}"
     data-sizes="100vw"
     data-srcset="{{ craft.imager.srcset(transformedImages) }}"
     alt="{{ image.title }}">

Here’s are the things unique to my setup in this code:

  1. The lazyload class initiates lazysizes.js.
  2. craft.imageer.srcset(transformedImages) fetches an array of images I had transformed with Imager. This just means I can automate asset creation in Craft, which is handy for dynamic image sizes.
  3. craft.imager.base64Pixel(2,1) is creating an SVG that’s 2 pixels wide and 1 pixel tall. 

Here was my problem: craft.imager.bas64Pixel(2,1) wasn’t creating an SVG. Which is why the browsers were (helpfully) grabbing images from srcset on page load.

After a lot of trial and error, I carefully read through the README file on Github for Imager.1 It turns out that base64(width,height) is deprecated. There was a new function that I needed to use in its place: placeholder(width,height). (Width and height can be whatever values you want, but as you’ll see, you can get clever with it.)

Using the same example variables as above, the new code looks something like this:

<img class="lazyload"
	src="{{ craft.imager.placeholder({ 
		width: transformedImages[1].width, 
		height: transformedImages[1].height 
	}) }}"
	data-sizes="100vw"
	data-srcset="{{ craft.imager.srcset(transformedImages) }}" />

That placeholder line is actually doing some very cool stuff. The transparent SVG it generates is the same height and width as the image it’s lazy loading. This prevents any scroll jankiness that might occur as the reader scrolls up and down, since image placeholders are the same size as the images themselves.

This, combined with the caching I have set up on Craft, makes the website blazingly fast — even faster than it already was (and it was pretty quick). The new case study, which has over 10mb of images on it, loads in less than a second.2

(As an aside: this new code helped me optimize the website and remove three other template files for galleries and images. I love this. There’s nothing better than deleting files.)

If any of this piqued your interest, I’d love it if you checked out the photos or visited my portfolio.

Footnotes
  1. I am aware I should have done this first. We all make mistakes. Please forgive me for this one. ↩︎

  2. There is one point of failure still, but it seems like that’s a bug with Flickity, my image slider of choice. I’m still sorting through that bug. After a series of Flickity bugs related to iOS 13 and Firefox, I don’t think I’ll be using it as much in the future. ↩︎

Redesigns in the open

Two of my favourite designers on the web are writing about the redesign process of their websites, as they’re designing them. The first to do this was Johnnie Hallman, who introduced the concept here. His posts have been enlightening, as always (he’s got me interested in Contentful, which is saying something).1

The second designer to take this on is Frank Chimero. I’ve been reading Frank’s writing religiously since 2013, when he was interviewed in The Great Discontent. It was obvious right away that he had a unique perspective on design, writing, and web development. I’ve read his blog multiple times over, studied every iteration of his website, and read his book several times. Needless to say, I’m a huge fan.

With all that being said, it’s been a delight to read through his thought process as he redesigns his blog. Many of his concerns regard typography, which is something I’m also obsessive about. Frank is sharing images of his process as he designs his website in the browser, and sharing how he approaches his work from the outside in,” as he often says.

Some of my favourite posts from Frank so far:

  • Perfect Trifecta: an examination of the moods and aesthetic Frank considers for his website.
  • Looking at Letters: in which Frank blows up typeface sizes and dissects, at great length, the way he compares the differences between similar typefaces (like Source Sans and National 2, or Scto and Untitled Sans). If you’re into type, or you’re a designer, this is the sort of writing from which we all benefit.
  • Scales and Hierarchy: Frank demonstrates the way he sets font sizes and line heights, and then talks about creating hierarchy with spacing, weight, colour, size, differing typefaces, and design accents.

Frank and Johnnie’s posts have illustrated what’s been missing in contemporary design writing, at least for me: none of us are writing about how we do the work. We’re sharing finished products and listicles. There is a dearth of education design writing that exists to do something other than market ourselves. 

I’m not redesigning my blog (yet), and I just launched a new version of my portfolio, but I’d like to start writing material like this myself.

Footnotes
  1. For those of you who don’t know, Johnnie also makes Cushion, a delightful web app for freelancers that helps them invoice clients and plan their projects. I have been a paying customer for years, and it’s very excellent at what it does.↩︎

The rock and the hard place for Wordpress

Let’s imagine you want to start blogging, or need to make a small website. Where do you start?

For many years, the default recommendation was WordPress. It was easy to install,” easy to update,” and easy to use” for people who weren’t familiar with CMS technology. But I’m not sure this is true anymore, and I no longer recommend WordPress to clients.

If you’re not a developer, WordPress is not where you should start with your website. You would be better served by Squarespace, Ghost, et al. Squarespace lets you design an entire website with drag and drop features, and Ghost lets you start blogging with beautiful themes and a premium hosted service. There’s no need to install anything with either platform. And if you need to set up an online store, both Squarespace and Shopify will make your life much easier than WordPress and WooCommerce.

I’ve also noticed something else in the past couple years: WordPress is not easy to use. The backend is a monster, and Gutenberg has made it harder for my clients to use — not easier. Almost any other CMS I’ve tried has been easier for my clients to grasp than WordPress.

If you are technically proficient, it’s getting harder and harder to recommend WordPress. Thanks to Gutenberg and the increasing use of Rest APIs and Javascript, along with the old PHP core, developing for WordPress becomes more nightmarish seemingly with every passing week. 

And if you have any opinions about web development at all, WordPress’s attempts to get you to code the WordPress way” will frustrate or anger you, depending on your tolerance levels. 

If you’re a modern PHP developer, you could use Bedrock to build WordPress, but it’s still WordPress. Bedrock doesn’t solve the problems that Gutenberg and the plugin architecture create. (Trust me: I built this blog with Bedrock, and as of January 2020, I plan on getting off WordPress as soon as possible.)

The problem is this: inevitably, nearly every WordPress site eventually becomes a mess of spaghetti code and plugins that make actually using the site impossible.

Developers (or technically-minded people) would be better off with almost any of the myriad CMSes that are available: Ghost, Craft, Kirby, Grav, Statamic, Shopify, and more are all typically easier to develop for than WordPress. (I haven’t even mentioned static generators.) The options are limitless.

All of this puts WordPress between a rock and a hard place. If developers and regular people should avoid it, who is it for?

I no longer have an answer.

Wildfire Studios on Typewolf

I am thrilled my new portfolio was featured as Typewolf’s Site of the Day on January 12th, 2020. Typewolf highlights what’s trending in typography on the web, and is one of the internet’s best resources for high quality design and type.

My work has been featured before on Typewolf, and in my mind, it’s among the highest honours one can receive on the web. My thanks to Jeremiah for featuring my work again.