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


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:\/\/\/demo-post-3",
  "title": {
    "rendered": "Demo post 3"
  "featured_media": 507,
  "_links": {
    "wp:featuredmedia": [
        "embeddable": true,
        "href": "http:\/\/\/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:\/\/\/demo-post-3",
  "title": {
    "rendered": "Demo post 3"
  "featured_media": 507,
  "_links": {
    "wp:featuredmedia": [
        "embeddable": true,
        "href": "http:\/\/\/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:\/\/\/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:\/\/\/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:\/\/\/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:\/\/\/wp-content\/uploads\/2017\/06\/my-featured-image.jpg"
          "image_meta": {
            "aperture": "11",
            "credit": "Chris Johnson",
            "camera": "NIKON D3200",
        "source_url": "http:\/\/\/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 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.


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

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 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:


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.


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.


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.


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.


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.


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. 

My 2016 media diet 1/16/17

By Chris Johnson

These are all of the books I read and movies I watched in 2016.


  • Doc
  • Star Wars: Lost Stars
  • Being Nixon
  • You Don't Know JS: Scopes & Closures
  • James Bond: Thunderball
  • Epitaph: A Novel of the O.K. Corral
  • Dead Wake: The Last Crossing of the Lusitania
  • The Path to Power: The Years of Lyndon Johnson, Vol 1
  • You Don't Know JS: This & Object Prototypes
  • You Don't Know JS: Types & Grammars
  • James Bond: The Spy Who Loved Me
  • The Yard
  • So Good They Can’t Ignore You
  • A Stitch In Time
  • Deep Work
  • The Age of Absurdity


  • Kung Fu Panda 2
  • Ex Machina
  • Jurassic World
  • Kingsman
  • James Bond: Tomorrow Never Dies
  • Silver Linings Playbook
  • James Bond: The World is Not Enough
  • James Bond: Die Another Day
  • The Big Short
  • Wild
  • Man from U.N.C.L.E.
  • Battle Royale
  • Star Trek Beyond
  • Zoolander 2
  • Ride Along 2
  • The Bourne Legacy
  • Creed
  • The Hateful Eight
  • Her
  • Straight Outta Compton
  • Zootopia
  • Mad Max
  • Bottle Shock
  • Inherent Vice
  • Spy
  • Deadpool
  • Kung Fu Panda 3
  • Doctor Strange
  • Fantastic Beasts: And Where to Find Them
  • 10 Cloverfield Lane
  • Rogue One: A Star Wars Story
  • The Town
  • The Sunshine Boys
  • St. Vincent

Here is my list for 2015. As I said last year, I’m shamelessly stealing this media log idea from Steven Soderbergh.

I’m supporting 1/9/17

By Chris Johnson

Manton Reece, a prominent developer and podcaster in the Apple community, has a Kickstarter project up for a new venture called The idea is pretty simple, it's a distributed version of Twitter. Instead of your content being stuck on Twitter's servers, you have the opportunity to own and host your own posts.

In Reece’s own words, from the Kickstarter page:

I want to encourage more independent writing. To do that, we need better tools that embrace microblogs and the advantages of the open web. We need to learn from the success and user experience of social networking, but applied to the full scope of the web.

I first set out to build a new service just for microblogs. It has a timeline experience like a social network, with replies and favorites, but it’s based on RSS, with the main posts pulled from independent sites.

If you don’t have a microblog yet, there’s a full publishing interface with Markdown support and a native iPhone app.

With services like Medium and Twitter falling on tough times, it’s becoming clear that our writing should be ours and not in danger of disappearing if a company has a bad year financially. That’s why I’ve backed and I look forward to seeing how it evolves in the months ahead.