Starting a digital declutter 3/19/19

By Chris Johnson

Over the weekend, I finished Cal Newport's latest book, Digital Minimalism: Choosing a Focused Life in a Noisy World. In the book, Newport lays out a convincing argument that we have become captives of our digital tools, and that we need strategies to regain control of our time and attention. Over the next 30 days, I'm going to give his advice a shot.

Personally, I know that social networks have slowly replaced a lot of my free time in the evenings and on the weekends. Scrolling through posts on Twitter or Instagram seems fun, and it's easy, but I never feel quite satisfied when I'm done. Newport thinks that to truly feel satisfied with how you spend your free time, you need a mix of true solitude 1, deep social interactions 2, and working with your hands.

For a digital declutter, Newport suggests taking a 30 day break from all of your non-essential digital services. I'm personally dropping Twitter, Facebook, Instagram, RSS feeds, and reducing my podcast consumption. At the same time you're supposed to have a plan for how you'll spend your newfound free time in the real world. I'm still working on the hobbies I want to pursue, but I'm considering photography, cooking, and writing for this blog.

When the 30 days is up, the plan is to reintroduce the tools and services that add value to my life, and consider better ways to use them to efficiently get the value I want out of them. For example, I'm considering reducing my Twitter and Instagram feeds to just the people I have conversations with, and removing all celebrity and meme accounts.

I'll let you know how it goes over the next 30 days. Wish me luck, and if you want to get in contact, use the form on my About page.

Update: My friend Chuck Grimmett, is joining me in the digital declutter. Check out his blog post for a deep dive on why and how.


  1. Newport defines solitude as being free of the input from other minds. So you're not truly in solitude if your alone in a cabin in the woods, but listening to a podcast, or reading a book. 

  2. Think phone calls or talking face to face, instead of likes, emails, and text messages. 

My 2018 media diet 1/20/19

By Chris Johnson

For a few years now, I’ve been keeping track of the media I watch, read, and play. This is my list for 2018 in ascending chronological order:

Books

  • Dune Messiah ★★★☆☆
  • Attention Merchants ★★★★☆
  • The Underground Railroad ★★★★★
  • James Bond: The Man with the Golden Gun ★★★★☆
  • Thrawn ★★★★☆
  • James Bond: Octopussy and the Living Daylights ★★★★★
  • Margin ★★☆☆☆
  • Hamilton ★★★★★
  • How to Be Miserable ★★★★★
  • Ancillary Sword ★★☆☆☆
  • Creative Selection: Inside Apple's Design Process ★★★★☆
  • Children of Dune ★★★★★
  • Summer of '49 ★★★★★
  • Radical Technologies: The Design of Everyday Life ★★★★★

Movies

  • Jodorowski’s Dune ★★★★☆
  • SCORE: A Film Music Documentary ★★★★☆
  • What We Do In The Shadows ★★★★☆
  • The Defiant Ones ★★★★★
  • National Treasure ★★☆☆☆
  • Ghostbusters (2016) ★★★☆☆
  • The 36th Chamber of Shaolin ★★★★☆
  • Shine a Light ★★★★☆
  • Solaris (2002) ★★★★★
  • Taken ★★★☆☆
  • Black Panther ★★★★☆
  • Se7en ★★★★★
  • Alien 3 ★★☆☆☆
  • (500) Days of Summer ★★★★★
  • Ant-Man ★★★★☆
  • Split ★★★★★
  • Alien: Resurrection ★★☆☆☆
  • Gods of Egypt ★★☆☆☆
  • Anatomy of a Murder ★★★★★
  • Wanted ★★★☆☆
  • Mom & Dad ★★★★★
  • Three Billboards ★★★★☆
  • Intolerance (1916) ★★★★☆
  • Some Like It Hot ★★★★★
  • It (2017) ★★★★☆
  • The Shape of Water ★★★★★
  • Cocktail ★★☆☆☆
  • Avengers: Infinity War ★★★★☆
  • Point Break ★★☆☆☆
  • Baywatch (2017) ★★☆☆☆
  • 2001: A Space Odyssey ★★★★★
  • Lady Bird ★★★★★
  • Jennifer's Body ★★★★☆
  • Girls Trip ★★☆☆☆
  • American Made ★★★☆☆
  • Hoosiers ★★★★☆
  • Justice League ★★☆☆☆
  • King Kong (1933) ★★★★★
  • Ingrid Goes West ★★★★☆
  • Blazing Saddles ★★★★☆
  • I Kill Giants ★★★☆☆
  • Chaplin ★★★★★
  • Mission Impossible: Fallout ★★★★☆
  • Highlander ★★★☆☆
  • Valerian and the City of a Thousand Planets ★★☆☆☆
  • How to Train Your Dragon ★★★★★
  • Lilo & Stitch ★★★★☆
  • BlacKkKlansman ★★★★★
  • How to Train Your Dragon 2 ★★★★☆
  • I, Tonya ★★★★☆
  • Solo ★★★☆☆
  • Raising Arizona ★★★★☆
  • War for the Planet of the Apes ★★★★★
  • Phantom Thread ★★★★★
  • Kingsman: The Golden Circle ★★☆☆☆
  • The Death of Stalin ★★★★★
  • Rams (Dieter Rams documentary) ★★★★☆
  • Cutthroat Island ★★☆☆☆
  • Spider-Man: Into the Spider-Verse ★★★★★

Plays

  • Bright Colors and Bold Patterns ★★★★★
  • Parisian Woman ★★★★☆
  • John Lithgow: Stories by Heart ★★★☆☆
  • The Boys in the Band ★★★★☆
  • The Ferryman ★★★★★

Video Games

  • Star Wars: Battlefront 2
  • Titanfall 2
  • Mario + Rabbids Kingdom Battle
  • Spider-Man
  • Call of Duty: Black Ops 4

Testing my new Olympus M. 40-150mm Micro 4/3 lens 11/25/18

By Chris Johnson

I traveled with Andrea out to a cold and overcast Pelham Bay Park to test out an Olympus 40-150mm F4.0-5.6 lens I recently purchased for our Olympus OM-D E-M10 camera 3. Between quick bursts of snow and rough wind, there was sunshine and gorgeous views to enjoy.

The following photos are unedited. Click on the images to view the full size versions.

Photo 1

Photo 2

Photo 3

Photo 4

Photo 5

I'm pleased with the results, especially considering the lens was only $100 at Amazon. It isn't the fastest lens out there, but it worked well enough in daylight and with a maximum focal length of 150mm I could really zoom in on faraway places like the island in the third photo above.

In case you're wondering what the lens and camera combo look like, here it is along with the kit lens in the background:

Olympus OM-D E-M10 camera with Olympus 40-150mm lens


  1. Camera and lens names can be quite a mouthful. 

iPad Pro 2018 wish list 10/26/18

By Chris Johnson

According to rumors, Apple is likely to announce new iPads on Tuesday. As an owner of an iPad Pro from last year, I’ve been thinking about what upgrades I’d like to see in a new model, and I’ve come down to two big wishes. Now to be clear, I’m not making predictions, this is purely me dreaming.

Precision pointer support

I’ve enjoyed using keyboards with iPads for years now. Typing is less error prone and the ergonomics are far superior to using the on-screen keyboard. Mostly that’s because you aren’t forced to look down at the screen while typing. However, one big ergonomic wrinkle remains, you can’t place your iPad at the proper height or distance from your eyes while still comfortably reaching the screen for touch input.

Precision pointer support would fix that issue. Ideally we would get a trackpad on the Smart Keyboard, and support for external Bluetooth trackpads and mice so we could be as far from our iPad screens as we’d like.

There would be other benefits aside from ergonomics. Text selection would be much faster. It also opens up the possibility of using external monitors that wouldn’t necessarily have touch capabilities, and perhaps most importantly it would allow for ...

Mac Safari

In some ways, the iPad is the best way to browse the web. Safari on the iPad is fast and fluid. Scrolling a page with your finger is satisfying in a way that using a mouse wheel or track pad is not. However, the experience is not without downsides. Many websites classify the iPad as a phone type device, and deliver mobile optimized sites when it’s not necessary and actually hampers the experience. Sometimes these mobile websites have cut down content, overly compressed images, and navigation hidden behind hamburger menus even though the iPad has the screen real estate and speed for the more expansive.

It would be great if we could get these websites to all change their ways and stop degrading their sites on the iPad, but I think it’s far more pragmatic to come from the other side. Apple should have a mode, a separate browser, or something that allows iOS Safari to act like it’s Safari cousin on the Mac.

Precision pointer support is a key prerequisite here. Lot’s of desktop websites and web apps assume you have the ability to hover over links and buttons, and that’s not possible without a pointer.

Bringing over Mac Safari could have other benefits as well, like the ability to use powerful web apps like Figma, Google Docs 4, Pixlr, and Cloud 9. Apple could even bring over the inspector tools and make web development possible on an iPad.


  1. Or is it Google Drive now? I can’t keep it straight. 

Stuff I like: DHH’s On Writing Software Well 3/6/18

By Chris Johnson

David Heinemeier Hansson, aka DHH, aka the guy that created Ruby on Rails, has recently started a YouTube series titled "On Writing Software Well". Each episode has been a deep dive into DHH’s programming style and the way he thinks about crafting software. If you are a developer, especially one that works with Ruby on Rails, I recommend checking it out.

Here is the first episode:

Check out the full series here.

My 2017 media diet 1/5/18

By Chris Johnson

For a couple years now, I’ve been keeping track of the media I watch, read, and play. This is my list for 2017 in ascending chronological order:

Books

  • Post-War
  • Ancillary Justice
  • A Sport and a Pastime
  • James Bond: On Her Majesty’s Secret Service
  • Revolution In the Valley
  • Old Man’s War
  • Call for the Dead
  • You Are Not a Gadget
  • Sapiens
  • The Wind-Up Bird Chronicle
  • Julius Caesar
  • The Far Side of the World
  • Means of Ascent: The Years of Lyndon Johnson, Vol 2

Movies

  • Unstoppable
  • Batman: The Dark Knight Returns
  • Hell or High Water
  • Boogie Nights
  • Batman v Superman: Ultimate Edition
  • Magnificent Seven (2016)
  • Suicide Squad
  • Steve Jobs
  • John Wick 2
  • Kills on Wheels
  • X-Men: Apocalypse
  • Unbreakable
  • Finding Dory
  • Ghost in the Shell (1995)
  • Fate of the Furious
  • 42
  • The Nice Guys
  • Logan
  • Guardians of the Galaxy Vol. 2
  • Chicken People
  • The Thomas Crown Affair
  • Wonder Woman
  • Get Me Roger Stone
  • The Godfather Part 3
  • Becoming Bond
  • Bull Durham
  • Dawn of the Planet of the Apes
  • Dunkirk
  • Sicario
  • Arrival
  • Kong: Skull Island
  • Mother
  • Popstar: Never Stop Never Stopping
  • La La Land
  • Nightcrawler
  • Blade Runner 2049
  • Appaloosa
  • Murder on the Orient Express (2017)
  • Thor: Ragnarok
  • Get Out
  • LEGO Batman: The Movie
  • Superman II: The Richard Donner Cut
  • Spider-Man: Homecoming
  • Jackie
  • The Fly (1986)
  • Star Wars: The Last Jedi
  • Baby Driver
  • Lawrence of Arabia
  • Bright
  • Zodiac

Plays

  • Avenue Q
  • The Great Comet of 1812
  • Sweat
  • On Your Feet
  • The Government Inspector
  • Torch Song

Video Games

  • Donkey Kong Country Returns 3DS
  • Zelda: Breath of the Wild
  • Uncharted 2
  • Sonic Mania
  • 7 Days to Die
  • Destiny 2
  • Mario Odyssey

My Favorite Podcasts, 2017 Edition 12/11/17

By Chris Johnson

My favorite podcasts of 2017, in no particular order:

The Weeds. Featuring Matthew Yglesias and other contributors from Vox.com, The Weeds is a twice-weekly show that discusses the deeper policy side of American politics.
Accidental Tech Podcast. Programmers Marco Arment, Casey Liss, and John Siracusa discuss the latest technology news with a focus on Apple. Always thoughtful and funny.
Do By Friday. Ostensibly, Do By Friday is a weekly challenge show with Merlin Mann, Alex Cox, and Max Temkin. However, each episode is more like a dark comedy that touches on politics, culture, and sometimes tech.
The Bill Simmons Podcast. Sports analyst and former ESPN star Bill Simmons discusses sports and pop culture with a regular roster guests and the occasional celebrity. If you’re a NBA fan, the episodes with Kevin Durant are worth finding in the archives.

Honorable mentions

The Ezra Klein Show. Ezra Klein, from the Weeds, interviews leaders in various fields. This year, I thoroughly enjoyed his episodes with Ta-Nehisi Coates, and Cal Newport.

The Vergecast. Nilay Patel and a rotating cast of characters from The Verge discuss the latest in tech and gadgets. Episodes are usually lighthearted and funny.

Sound Opinions. An hour of music news, interviews, and reviews by Greg Kot and Jim DeRogatis. These days I skip most of the interviews and listen to the news and reviews.

Past picks

This is my fifth year writing up my favorite podcasts. If you’re curious, you can read the lists from 2016, 2015, 2014 and 2013.

Preparing your website for the iPhone X 9/27/17

By Chris Johnson

Apple’s latest and greatest iPhone, the iPhone X, will be here soon and it’s going to change how we design and develop for the web, whether we like it or not 5. The iPhone X screen is no longer square, it has a notch at the top that houses a camera and other sensors, a floating home indicator at the bottom of the screen that replaces the now-defunct home button, and rounded corners at the edges of the screen.

iPhone X notch and home indicator

Don’t panic, By default your site will look OK (especially in portrait) but there are some techniques we can use to make our sites adapt better to the non-square screen of the iPhone X.

Dealing with the notch in landscape

The notch isn’t a problem for your website until you flip the phone to landscape, then your website will have white bars on the sides to leave space for the notch.

iPhone X landscape pillarboxes

If you want to extend your site’s background color to the sides, the simplest technique is to put a background color on the body or html tag in your CSS.

.body {
    background-color: darkred;
}

iPhone X landscape pillarboxes

Look great right? But this pretty much only works with solid color backgrounds. If you have different colors for your headers and footers, you’ll want to check out the next section.

Dealing with the home indicator and the rounded corners

If your website background isn’t simply a flat color from top to bottom, start by adding viewport-fit=cover to your meta viewport tag to stretch the page content to the edges of the screen:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

iPhone X landscape viewport-fit=cover

As you can see, now our content is stretching to the edges, but it’s also being overlapped by the notch and coming uncomfortably close to the rounded corners. It’s up to us to use some new iPhone X specific CSS environment variables safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom to position our content.

For my test webpage, the following CSS did the trick to keep the text away from the notch and rounded corners while also preventing the home indicator from overlapping the footer text. You’ll need to figure out exactly how to use the environment variables for your layout.

.container {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.footer {
    padding-bottom: env(safe-area-inset-bottom);
}

iPhone X landscape fixed

iPhone X landscape fixed footer

Testing

Until the official release of the iPhone X, the best way to test is with the simulator included in the latest version of Xcode. Xcode is free, but you will need a computer running MacOS to use it.

Further reading

If you’d like to learn more, check out Stephen Radford’s blog post where I first learned about these techniques, or read the official Webkit primer on the iPhone X.


  1. iPhones are simply too popular to ignore. 

Get Featured Images from the WordPress REST API 6/26/17

By Chris Johnson

WordPress has a REST API. Really! There is even a pretty good official handbook on how to use it.

It’s a much cleaner and straightforward solution to dealing with WordPress content from JavaScript than the old Admin AJAX functionality. But there can be a few gotchas. One I recently ran into was having to make a separate query to get the source URL for a post’s Featured Image 6.

Standard request

Let’s look at a normal post endpoint. For our example, we’re going to retrieve information about a post with the ID 521 7.

GET /wp-json/wp/v2/posts/521

In return you’ll get a JSON object with the data from your post.

{
  "id": 521,
  "link": "http:\/\/chrisltd.com\/demo-post-3",
  "title": {
    "rendered": "Demo post 3"
  },
  "featured_media": 507,
  "_links": {
    "wp:featuredmedia": [
      {
        "embeddable": true,
        "href": "http:\/\/chrisltd.com\/wp-json\/wp\/v2\/media\/507"
      }
    ],
  }
  ...
}

All you get back is the ID of the Featured Media and a href where you can get more information. Now, you can use that href to find the URL of the image, but that requires firing off another request for each and every post you pull. But there is a better way.

_embed to the rescue

Simply add ?embed to the endpoint and WordPress will include the Featured Media object inside of your post object.

GET /wp-json/wp/v2/posts/521?_embed

Now, you’ll get all the information you might need about your Featured Image, including URLs for each size.

{
  "id": 521,
  "link": "http:\/\/chrisltd.com\/demo-post-3",
  "title": {
    "rendered": "Demo post 3"
  },
  "featured_media": 507,
  "_links": {
    "wp:featuredmedia": [
      {
        "embeddable": true,
        "href": "http:\/\/chrisltd.com\/wp-json\/wp\/v2\/media\/507"
      }
    ],
  },
  "_embedded": {
    "wp:featuredmedia": [
      {
        "id": 507,
        "date": "2017-05-31T14:51:05",
        "slug": "my-featured-image",
        "type": "attachment",
        "link": "http:\/\/chrisltd.com\/test-image",
        "title": {
          "rendered": "my-featured-image"
        },
        "author": 1,
        "caption": {
          "rendered": ""
        },
        "alt_text": "",
        "media_type": "image",
        "mime_type": "image\/jpeg",
        "media_details": {
          "width": 1624,
          "height": 1080,
          "file": "2017\/06\/my-featured-image.jpg",
          "sizes": {
            "thumbnail": {
              "file": "my-featured-image-150x150.jpg",
              "width": 150,
              "height": 150,
              "mime_type": "image\/jpeg",
              "source_url": "http:\/\/chrisltd.com\/wp-content\/uploads\/2017\/06\/my-featured-image-150x150.jpg"
            },
            "large": {
              "file": "my-featured-image-1024x681.jpg",
              "width": 1024,
              "height": 681,
              "mime_type": "image\/jpeg",
              "source_url": "http:\/\/chrisltd.com\/wp-content\/uploads\/2017\/06\/my-featured-image-1024x681.jpg"
            },
            "full": {
              "file": "my-featured-image.jpg",
              "width": 1624,
              "height": 1080,
              "mime_type": "image\/jpeg",
              "source_url": "http:\/\/chrisltd.com\/wp-content\/uploads\/2017\/06\/my-featured-image.jpg"
            }
          },
          "image_meta": {
            "aperture": "11",
            "credit": "Chris Johnson",
            "camera": "NIKON D3200",
            ...
          }
        },
        "source_url": "http:\/\/chrisltd.com\/wp-content\/uploads\/2017\/06\/my-featured-image.jpg",
      }
    ],
  },    
  ...
}

  1. WordPress veterans might remember that Featured Images used to be called Post Thumbnails. 

  2. The WordPress handbook has more information on the endpoint for retrieving a post. 

Now on Craft CMS 6/15/17

By Chris Johnson

Over the last couple weeks, I’ve migrated ChrisLTD.com from Jekyll to Craft CMS. Jekyll continues to be an amazingly quick platform for static sites. However, as I move to doing more writing on my mobile devices, I want the ability to publish from those devices as well. My current Jekyll workflow requires building the site using a Mac, and I’d rather not deal with an on server build process. That meant moving to a traditional database powered CMS like Craft.

Craft CMS in action

Why Craft?

I chose Craft for a few reasons, but mainly because it's something new for me. I’ve built sites in Rails, WordPress, Django, Drupal, ExpressionEngine, and other frameworks, but never in Craft. I knew Craft would be a quality system thanks to a couple of recommendations. I’ve also used other excellent tools built by Pixel & Tonic, specifically their essential plugins for ExpressionEngine.

Aside from pure novelty, Craft has a few other things going for it. It uses Twig for templates, which is similar to the one used by Jekyll. That meant the site conversion was relatively painless. Compared to WordPress, Craft is a more barebones system. I ended up building up and adding the exact features I needed 8 without the cruft and complexity of things like a commenting or pingback system. Also, because Craft isn’t as popular as WordPress – and will likely never be – it’s less of a target for hackers.

Performance

One of my big worries when moving from Jekyll to Craft was that the site would end up loading much more slowly. So far, my fears have proved to be unfounded. Craft is slightly slower, but thanks to Craft’s aggressive caching the load times are pretty close between the new site and old. These are my top line results from WebPageTest.org:

Old site (Jekyll)

Site speed results: Jekyll

New site (Craft)

Site speed results: Craft

The future

Now that the site is in Craft, I’ll be adding Micro.blog functionality, and freshening up some of the non-blog content. If you have any questions or comments, ping me on Twitter @ChrisLTD.


  1. I even ended up writing a simple Craft plugin that replaces a token in your content with the current site url.