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 1. 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 2.

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 3.

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 4 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. 

WWDC 2017 Keynote highlights 6/5/17

By Chris Johnson

Today at WWDC, Apple announced a boatload of software updates and three new hardware products. These are my notes arranged by platform and appearance in the keynote:

TV

The Apple TV didn’t get much love, but I am pleased Apple and Amazon made a deal to bring Amazon Prime Video to the Apple TV. It was a minor annoyance having to switch from the Apple TV to my Playstation to watch Prime Videos.

Watch

The Watch didn’t see much love either, but it is getting a Siri watch face that tries to surface information you need depending on your location and time of day. It’s basically Apple’s take on Google Now. I’m willing to give it a shot, but I’m skeptical it will do much beyond increase my anxiety.

Mac

The software story for the Mac seems to be non-existent, but Mac users can look forward to some new hardware: faster iMacs, faster laptops, and new souped-up iMac Pro starting at $5,000.

Apple recently revealed that they are working on new displays and a new standalone Mac Pro, both of which cast a shadow on the new iMac Pro. The new Mac Pro will certainly be faster, and might even allow for hardware upgrades which will be nearly impossible with this iMac Pro.

iPhone

The iPhone is getting a new App Store modeled after Apple Music. Amazingly this new store seems to have even lower information density than the last version. Being one of the top couple apps in a list is going to be even more important than ever.

The new App Store

Apple added some welcome tweaks to Control Center allowing for customization of the icons and keeping everything on one screen instead of the weird paged Control Center we have now.

Augmented reality (AR) got a lot of stage time. Apple is doing the hard work to make it possible for apps to easily offer AR features in their apps. I’m not sure how useful AR will turn out to be, since at this point AR requires awkwardly holding an iPhone or iPad in front of your face, but the demos looked fun.

iPad

Apple replaced the 9.7" iPad Pro from last year with a 10.5" Pro. It’s only slightly bigger than the 9.7" Pro but has a much larger screen thanks to smaller bezels. Apple stressed that the new screen refreshes at twice the speed of the old screen which will make it look “buttery” smooth. Since my iPad died last year, I’ll probably end up getting one of these unless reviews reveal some kind of showstopping design flaw.

Apple also announced huge upgrades to iOS targeted at iPad users. The iPad now gets a MacOS like dock, the ability to drag and drop between apps, three app multitasking 5, and a Files app reminiscent of the MacOS Finder. These changes will make professional work much easier on an iPad, but I’m doubtful it will be enough to bring more professional class apps to the iPad. Apple may need to start developing their own, or bribe Adobe to make it happen.

HomePod

Apple also announced an Amazon Echo competitor called HomePod for $350. It has Siri built in and ties in to your Apple Music account. An Echo costs just $180, so Apple is justifying the $170 price premium with claims of superior sound quality. I have trouble believing that enough people care to cough up the extra dough especially since Siri and Apple Music don’t have great reputations. It’ll be interesting to see how it ends up selling.

Decide for yourself

If you’d like to watch a condensed version of the event, this video from the Verge is great:

The full video is available here from Apple.


  1. Technically four apps if you count picture-in-picture video. 

Goodbye iPad Mini? 5/16/17

By Chris Johnson

Apple is reportedly ditching the iPad Mini in favor of their new $330 regular size iPad line. If true, that’s a big bummer for me. The iPad Mini was the perfect size for reading or watching videos with the device in your hand. The “normal” 9.7" iPads have always been a little too big and heavy in this regard. I’d often prop them up on my knees or set them down on a table after a few minutes. While that isn’t the end of the world, it often means craning your neck, which can’t be good for the long term health of your spine.

To echo Michael Tsai, I hope the Mini isn’t being cancelled because of lower sales. Apple has only updated the Mini sporadically since introducing it, and I can imagine that hurt enthusiasm for the entire line.

Thoughts on the Mac Pro’s resurrection 4/4/17

By Chris Johnson

So, there will be a new Mac Pro. I'm honestly surprised. Apple has sold the latest iteration of the Mac Pro unchanged for three years, an eternity in computer component world. Making matters worse, Apple hasn’t lowered the price in all that time, even though the price of those three year old components have certainly fallen considerably.

The situation had gotten so bad that hardly a week went by without me reading about someone or another switching to Windows, or building their own Hackintosh in response to Apple's seeming abandonment of pro users. And after all that time, who could blame them? I certainly thought the current Mac Pro would be the last Mac Pro.

Much was written and said in defense of Apple’s strategy pro strategy or lack thereof. iPads are the future. Pro users are tiny a minority of computer users. iMacs can do everything anyone could reasonably want to do.

What was left unsaid in all these arguments and counter arguments is just how minor the demands of pro users actually were, especially for a company with the size and expertise of Apple. Apple doesn’t make the CPUs, RAM, or GPUs that go into these pro machines. All pro users wanted was for Apple to put these third-party manufactured parts together in a quiet and cool tower and update it once a year when Intel and AMD had faster components ready. Clearly not an impossible task for Apple if hobbyists can build their own pro-level Hackintoshes with off-the-shelf components.

But that’s all in the past. Apple has done the most un-Apple thing of all and announced a product coming at least a year away. They saw the community response to the aging Mac Pro and felt they had to do something. As someone who makes their living on a Mac, I’m relieved they did. I don’t personally need a $4,000 workhorse machine, but it should exist in the Mac lineup if the Mac is going to remain a viable platform for diverse types of work. And if my work changes, and I need a more powerful computer, I’m glad to know I’ll be able to do that work on a Mac.

Better posture, better breathing 2/1/17

By Chris Johnson

I always knew that slouching or bending your neck forward was bad for the muscles of your neck and back. I have pretty good experience with this from years of working all day on a computer. But I had no idea holding your head in front of your shoulders is actually harming your ability to breathe.

Try this experiment from the blog at MyFitnessPal:

Place your head in front of your shoulders, and take a deep breath through your nose. Now tuck your head gently back to where it’s balanced effortlessly on top of your shoulders, and try again. Did you feel that fuller breath? Breathing mechanics are optimal when the airway is straight and open. Better breath means you get more oxygen, more concentration and more peace of mind. This also means no leaning forward in spin class if you want to give it your all.

If that made you want to improve your posture, MyFitnessPal suggests this “head ramping” exercise:

  1. Take a seat with your spine tall.
  2. Tuck your chin so that your ears are straight above your shoulders.
  3. Inhale deeply through your nose, then exhale slowly out.
  4. Treat your neck as if it were made of something precious.
  5. Bring your head back so your ears are above your shoulders, with the least amount of effort necessary. Never force it.

Apple adding Night Shift to macOS 1/25/17

By Chris Johnson

Yesterday Apple released the beta for macOS Sierra 10.12.4, which includes Night Shift mode. Night Shift, if you’re not familiar with the iOS counterpart, gradually reduces the blue light of your screen after the sun goes down. Supposedly, this reduces eye strain and makes it easier to fall asleep. Anecdotally, I’d say this is true. However, I’m no scientist, so take my experience with a grain of salt.

In the past, I cheered on Apple for adding this feature to iOS, so I’m happy to see it coming to macOS as well. Apple is certainly "Sherlocking" the free utility F.lux 6 with this new Night Shift feature, but I think this is something that should be integrated into the operating system especially given the kind of adjustments it’s making to color output.

I’m also hoping this means Apple will soon add True Tone to the Mac. True Tone is currently only available on the 2016 iPad Pro.


  1. I’ve personally used F.lux for years now.