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.)
In an effort to talk about anything other than the coronavirus, I thought I'd write about other things that happened in the past week or so that interest me.
Source: Nintendo
First: Animal Crossing: New Horizons is out for Nintendo Switch. It's very good. I haven't played an Animal Crossing game since the GameCube, but this has a loop which feels more interesting. It's also, obviously, a perfectly-timed bit of escapism. 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 is probably a bad time to release luxury computing devices, but nevertheless, it's a great time to be an Apple fan.
Source: Apple
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 while you're typing.
Source: Apple
I mean, look at this picture. Is this not the coolest thing you've ever seen? The keyboard alone is $350 USD, so this picture is probably the closest I’ll 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. So you can try it out too! 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.
Source: Netflix
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.
Source: Pixar
Finally, movie studios are digitally releasing films that were in theatres before this whole thing went down. 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 22nd.
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.
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.
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.
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.
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.
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.)
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).
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.
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.)
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.
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.
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:
After my wife and I got married a year later, everything about the setup changed. This is what the desk looked like by 2018:
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:
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 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.
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.
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.
Credit where credit is due: Tyler Stalman and Jonathan Morrison came up with it first. ↩
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. ↩
Also, my office doesn’t have any windows. On nice days, I like to roll the desk to the living room and enjoy some sunlight. ↩
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.
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.
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:
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.
Animations. Scrolling through a list of static images felt lifeless immediately. The obvious answer is to animate them, to keep them interesting.
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 init
ClassName: '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 are the things unique to my setup in this code:
The lazyload class initiates lazysizes.js.
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.
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:
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.
I am aware I should have done this first. We all make mistakes. Please forgive me for this one. ↩
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. ↩
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.
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. ↩
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 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 featuredbefore 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.
I’m super late to the party on this, but I’m a huge fan of Klim’s new(-ish) typeface, Söhne, as well as their amazing new website. Really, really clever website, and the face looks gorgeous.
Several years ago, I had just launched what was (I think) the third version of my portfolio. If I recall correctly, it was built with Siteleaf. It was one of the first websites I ever made. I was pretty proud of it.
Of course, that version of the website wasn’t very good. So I re-made it. And then I re-made it again, and again, and again.
I don’t know how I got to this point, but I’m excited today to show off the ninth (!!) full re-design of my portfolio.
This version of the portfolio is entirely new. Every case study has been re-written from the ground up. I took a ton of product shots that I hope make every case study feel a little more unique, and demonstrate some of my skills with a camera. In fact, there are a lot more images on this website than I’ve had in any version of my website, ever — but it’s also the fastest portfolio I’ve ever made.
All the images, words, and design work took time. I’ve been working on this website in my spare time for over a year and a half, and I’m excited to finally get it up and live.
In 2019, I completed half a dozen website projects. Only one of them is live today. Sometimes, that’s how the cookie crumbles: you work on something, the client’s plans change, and sometimes a finished project never sees the light of day.
One of those completed projects, though, was the portfolio. I didn’t put it live in December out of superstition. I wanted to come out swinging in 2020 with a new website for my business. I wanted to put a stake in the ground and get the year off to the right start. Here we are.
Some people like reading about the tech behind websites they read. If you’re not into that, skip this section and go right to the next.
If you’re curious about the new portfolio’s tech stack, it’s also all new. I’ve grown exhausted by WordPress and it’s insistence on building websites the way it wants me to build them. Time to try something new.
The new website is built on Craft CMS, which is amazing to work with. It’s insanely fast, thanks to Nginx caching, srcset, and lazy loading images. Craft even enables you to set focal points on images and change their aspect ratios dynamically. (You can even use plugins like Imager to do… magic things, seriously. Just read the readme on Github.) Because Craft is basically a Composer package, the whole production is streamlined from the command line now, too.
I also used Craft on the only client project that did go live last year. Here’s a link to that website and the blog post about it. I’ll repeat what I said there:
Images automatically crop themselves, change their resolutions, and adjust their aspect ratios and layout when the browser size changes. All this happens while the website maintains nearly perfect Google PageSpeed Insight scores.
Absolutely a mind-boggling system to work with. I love Craft.
I would like to thank…
I am indebted to the help of several people who beta tested this portfolio, and would be remiss if I didn’t thank them. To my friends Matt, Peter, and Kassandra, thank you for your feedback! To the family who checked it out, whether you live in Canada or South Africa, thank you. To my friend Jess especially: thank you for poring over every word, talking through some difficult semantics, and inspiring a late-game change that made the website many times better.
Finally, thanks to my amazing wife for spending what was probably an agonizing amount of hours listening to me talk through every single minor detail and decision. You are amazing — and very patient! I love you. Thank you for helping me make decisions when I seemingly cannot.
That’s it. That’s the whole story. If you’re still reading this, you’re probably bored, or dead, or part of some unfortunate science experiment (the cake is a lie, if you’re offered any).
