MacBook Pro Running Hot

How to improve performance and prevent early death

I’ve had an interesting history with my MacBook Pros. Most of them have needed to go in for service and have the logic board replaced under warranty or recall at some point during their lifecycle. Call me naive or whatever, but I’ve had a big breakthrough in the last few days that may make this a thing of the past.

Performance Issues

My current MacBook Pro is one generation old since the Touch Bar MacBook Pros were released. I picked it up in late 2015 so it’s around a year and a half “young” now. Late last year I started having performance issues with my MacBook. At times it would feel sluggish. Writing code (as I do) was painful. The computer was so sluggish, my text editor couldn’t keep up with me. I usually work in an IDE that does a lot of code evaluation and makes me aware of issues or problems, lints my code etc. That was even more painful. Sometimes I’d shut my system down and wait 5 minutes and come back. That would often fix the issue for a bit.

The issues have continued to the point where it’s difficult to get work done. One thing I noticed was that this mostly happened when I had an external display plugged in, as I often do.

I began to suspect problems with my GPU and I’ve been on the verge of taking the computer in to the genius bar. The genius bar is so hit or miss these days though. To top it off, I wasn’t confident I could replicate the problem for the technicians.

Monitoring System Temperature

Finally, last week, through the coaxing of a friend of mine, Derek, I purchased, downloaded, and installed TG Pro. TG Pro allows me to (among other things) monitor fan speed and temperature of various internal components of my system.

I found that everything was very hot overall. Not overheating, but hot. And, consistently, when the temperature was very high is when things would be sluggish and hard to work with. The system was throttling itself down to protect itself.

I knew prior to installing the software that the fans ran pretty much full blast constantly because I could hear them. In my mind, that’s just the way it’s always been. It was annoying, but the price I payed for having a system I could take anywhere at any time.

Cleaning It Out

I thought to myself, why would the system be running so hot? So, with the fans running full blast and the system so hot, I felt around at the airflow intake and exhaust. I couldn’t feel much. Not a great sign. I’ve only had this computer a little over a year, but it must be gummed up with dust and gunk, so I’ll just take the bottom plate off and blow it out, right? Wrong. Keep in mind I haven’t had the need to take the bottom plate off a MacBook Pro since the systems aren’t user upgradeable anymore. I was more than a little irritated to discover that Apple now uses Pentalobe screws to secure the bottom of the MacBook Pro. Because I’m apparently a bad geek, I don’t have a tool to work with these stupid screws. So I purchased one and waited 2 days for my Amazon Prime order to arrive.

After unpacking the new screwdriver, I removed the bottom of my laptop and was horrified to discover that my laptop was gummed up in a major way.1 It took me at least ten minutes with an air can and some TLC to get this thing cleaned out. I don’t work in dusty or strange environments, but I guess it builds up over time in those small spaces.

Running Cool(er)

After putting my system back together and running it for a few hours, the difference was astounding. The performance issues I’ve been struggling with for months were completely gone. The fans hardly ever ran more than about half speed, and I could feel the air moving through the intake and exhaust when they were running. Temps were down a good 15° F.2

A Laptop Cooler

Armed with this knowlege and information, I’ve taken an additional step to increase the life of my system and keep it running cooler. I mostly use my laptop like a desktop, while only occasionally taking it to work offsite, a convention, meeting, or what have you. So I purchased a CM Storm SF-17 Gaming Laptop Cooler for my desk. It’s a bit of a beast, but it just sits on my desk, and my computer sits on it. The fan is barely audible, and my system fans hardly ever run now. According to my temperature monitor software, I gained another good 7° F to 10° F cooling.

Moving Forward

I have a pretty decent GPU in this system. It’s a AMD Radeon R9 M370X with 2 GB of VRAM. But, while it’s a good GPU, I believe it’s prone to running hot. Combined with the gunk in the system, it was all a very bad combination of situations for a bad outcome. I plan to blow the gunk out at least once a month now. Combined with my new laptop cooler, I’m hoping to keep this system around much longer without GPU failure—which has been so common for me with Mac laptops in the past.

The moral of the story? Kids, take the back off your laptop and clean it once in a while. Consider a laptop cooler to keep your laptop running even cooler if you work at your desk a lot—and particularly if you use an external display. I believe you’ll increase the lifespan of your system if you do.

  1. I can only hope I have not done permanent damage or majorly shortened the life of this system—I’m not made of money. 

  2. Sorry, I can’t think in Celcius. I’m a stupid American. 

Another Way to Avoid Writing Unnecessary :last-child’s

The Lobotomized Owl Selector

About two weeks ago, I wrote a post on how you can use :not in your CSS to simplify life. Lots of people really liked the article, and I’m so glad! This method is pretty awesome.

One of our readers, Miler, wrote in to point me to this article that talks about the “lobotomized owl selector”. Funny name, but a fascinating approach, and quite honestly, way better.

In short, Heydon Pickering advises the following:

* + * {
  margin-top: 1.5em;
}

This particular approach makes so much sense, and I encourage you to read the full article. Essentially it adds margin only to the elements that have adjacent siblings. Heydon also uses the em here (which has its pros and cons) and demonstrates why this particular unit can be the right choice.

If we go back to the original example, each .post would already be correctly spaced, but to add our border, we’d do this:

.posts * + * {
  padding-top: .5rem;
  border-top: 1px solid #eee;
}

This only eliminates one line here, but possibly hundreds throughout our codebase.

As always, if you have questions or would like to discuss send me an email.

Filming Begins on Han Solo Star Wars Story

Here’s another one I missed while under the weather. From StarWars.com:

Cameras are rolling on the adventure-filled past of the iconic scoundrel and everyone’s favorite Wookiee; principal photography on the untitled Han Solo Star Wars Story officially began February 20 at Pinewood Studios, London.

The movie will explore the duo’s adventures before the events of Star Wars: A New Hope, including their early encounters with that other card-playing rogue from a galaxy far, far away, Lando Calrissian.

How exciting! I love how all these spin-offs are exploring backstory we’d never known before. Together with the announcement was the first cast photo too.

First cast photo of the Han Solo movie

The Han Solo movie comes out May 25, 2018.

Learn CSS Grid by Jen Simmons

Jen Simmons:

I am starting to see a bunch of simple introductions, link-baity false-narratives, and weirdly-wrong ideas to creep into the conversation about CSS Grid. They are not as helpful. Frequently they are actually wrong. Let’s please share the best work with each other — not exclusively work done by men because it seems more respectable / more authoritative / more bro-awesome! And especially, let’s not pass around the work published by people who simply copied Rachel’s work, badly, with mistakes.

Jen compiles a spectacular list of suprisingly mostly-free resources to learn all about CSS Grid. You can also keep an eye on the Grid Layout tag, since I’m trying to write as I learn how to use it. If you’re on the fence about learning it, please don’t be! CSS Grid is an amazing tool and will soon make our lives so much easier, opening up new creative opportunities for our layouts.

Star Wars: The Clone Wars, Season 1 | Retake

Familiar but animated characters everywhere — some liked, some not. The Clone Wars series brings us the great Obi-wan Kenobi, the mediocre Anakin Skywalker, and the terrible, awful, Jar Jar Binks — the worst thing to come from George Lucas mind. On this episode of Retake, Tim and TJ will analyze the first season of Star Wars: The Clone Wars.

You know how much I love to talk about Star Wars. This time, TJ Draper and I sit down to talk about The Clone Wars, a excellent TV series from 2008 you should definitely watch.

Under the Weather

Hello Dear Reader,

This past week was a sucky one for me. I got a cold. You know how it is when you get sick. You don’t want to do anything but sleep. Well, that was basically my week.

I’m feeling better now, so you’ll see some new writing on the site. I’m playing catch up so, you’ll see some stories from last week I wasn’t able to get to.

Hope you’re having a great day, and as always, thank you for reading.

Creating a Microblog with Jekyll

This post is part of a series on Microblogging with Jekyll.


I wanted to get away from Twitter. If you don’t get why, that’s ok. It’s not the point of this post. I want to talk about creating a microblog. What’s a microblog? In essence, it’s a place where you write small tweet-like posts, except the content lives on a server you pay for. You are in control.

Jekyll makes it easy to setup a microblog. I recently created my own microblog, and made videos about it. There’s a part one and part two. I thought I’d show you how I made mine. It’s not the only way, it’s just one way. Let’s get started.

Create the Collection

First, we’ll create a collection to hold all of our microblog posts.

# _config.yml

collections:
  microblog:
    output: true
    permalink: /microblog/:year/:month/:slug/

This bit of code declares our new microblog collection, outputs the documents we put in it, and defines our permalink structure to use the :slug instead of the :title since our microblog posts won’t have a :title.

Create a Page for the Microblog

Now we’ll create a page to display our posts. We’ll call it microblog.html.

---
layout: page
title:  Microblog
permalink: /microblog/
---
<section class="microblog-posts">
  {% for post in site.microblog reversed %}
    <div class="microblog-post">
      {{ post.content }}
      <footer class="microblog-post__footer">
        <small><time datetime="{{ post.date | date_to_xmlschema }}"><a href="{{ post.url }}" title="Permalink to Microblog post">{{ post.date | date: "%a, %b %d, %Y at %I:%M%P" }}</time></a></small>
      </footer>
    </div>
  {% endfor %}
</section>

Our microblog posts will now display in reverse chronological order (newest at the top), with the date displayed like this: Thu, Aug 17, 2017 at 10:16am. Sweet.

Create Layout for Each Microblog Post

Now we’ll create a layout for our individual posts. We’ll name it microblog-post.html in the _layouts folder. As with all of these names, you can choose to call them whatever you’d like.

---
layout: default
---

<div class="microblog-post--single">
  {{ content }}
  <footer class="microblog-post__footer">
    <small><time datetime="{{ page.date | date_to_xmlschema }}"><a href="{{ page.url }}" title="Permalink to Microblog post">{{ page.date | date: "%a, %b %d, %Y at %I:%M%P" }}</time></a> by Timothy B. Smith</small>
  </footer>
</div>

I wanted to display each microblog post with large text and in the center of the page. The .microblog-post--single class will allow us to do just that.

Write Styles for the Posts

Now let’s create a new SCSS file for our microblog styles called microblog.scss.

// -------------------------------
// MICROBLOG
// -------------------------------

.microblog-post:not(:last-of-type) {
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  p:last-of-type {
    margin: 0;
  }
  img {
    margin: 1rem 0;
    max-width: 450px;
  }
}

.microblog-post--single {
  margin: 6rem auto 0;
  max-width: 1000px;
  text-align: center;
  p {
    font-size: 2rem;
    line-height: 1.4;
    margin: 0;
  }
  img {
    margin: 1rem auto;
    max-width: 450px;
  }
}

.microblog-post__footer {
  color: lighten(#555, 20%);
  font-size: .9rem;
  padding-top: .5rem;
  a {
    color: inherit;
  }
}

This will style our list of microblog posts, the date that we published them on, and the individual permalink pages of each post. If you want to see these styles in action, take a look at my microblog.

Creating the Feed

Now let’s make an RSS feed so people can subscribe to our microblog. It’s just like any other RSS feed, except each entry doesn’t have a <title>. We’ll call it microblog.xml.

---
---
<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <link rel="hub" href="https://pubsubhubbub.appspot.com"/>
  <title>Tim Smith’s Microblog</title>
  <subtitle>By Timothy B. Smith</subtitle>
  <link href="https://ttimsmith.com/microblog"/>
  <link type="application/atom+xml" rel="self" href="https://ttimsmith.com/microblog.xml"/>
  <updated>{{ site.time | date_to_xmlschema }}</updated>
  <rights>Copyright © 2008–{{ site.time | date: "%Y" }} Timothy B. Smith</rights>
  <id>https://ttimsmith.com</id>
  <author>
    <name>Timothy B. Smith</name>
    <uri>https://ttimsmith.com</uri>
    <email>smith@ttimsmith.com</email>
  </author>
  {% for post in site.microblog reversed %}

  <entry>
    <id>https://ttimsmith.com{{ post.id }}</id>
    <link type="text/html" rel="alternate" href="http://ttimsmith.com{{ post.url }}"/>
    <title></title>
    <published>{{ post.date | date_to_xmlschema }}</published>
    <updated>{{ post.date | date_to_xmlschema }}</updated>
    <author>
      <name>Timothy B. Smith</name>
      <uri>http://ttimsmith.com</uri>
    </author>
    <content type="html">
      <![CDATA[
        {{ post.content }}
      ]]>
    </content>
  </entry>
  {% endfor %}
</feed>

Things I Haven’t Figured Out Yet

Cross-Posting Efficiently

The way posts appear on other social media is inconsistent. If I use an inline link, it won’t appear elsewhere. Also, since I’m using FeedPress to do the cross-posting, it’s not immediate.

Automate the Creation of Files

I want to easily create a new post with the right file name format, and have it auto-increase the number. For example, I could automatically create a post called 2017-02-16-01.md with the next one being 2017-02-16-02.md and so one. This is simple to do on my mac, but how would you do this on iOS? Problems like this are what come about with database-less systems.

Publishing from iOS

This is really tough. Jekyll has no API that I can hook into to publish posts and upload images. I almost feel that this completely disqualifies Jekyll as a viable solution for the microblog, but I’m giving it a shot for now. I may have to… use… WordPress. 😱

Conclusion

This is one of the ways to create a basic microblog. I’m sure there are things I haven’t thought of yet, which I’ll have to address down the road. Are you microblogging? What are you using for yours? Have you solved some of the problems I haven’t fixed yet? I’d love to hear all about it! Send an email to tim@theboldreport.net.

CSS Tip: Use :not to Save Time and Lines of Code

I saw this tweet from Matt Griffin:

Finally started making my life easier by using :not(:last-of-type) rather than overriding with a separate :last-of-type rule. Huzzah!

Mind. Blown.

mind blown

Why didn’t I think of this earlier? This small thing saves so much time and lines of code. Let me explain. Let’s say you’re styling a list of posts.

<!-- This is what your html would look like -->
<ul class="posts">
  <li class="post">
    <a href="/link-to-post/" title="Permalink to post">
      <h2>Post Title</h2>
      <small>Thurs, Feb 16, 2017<small>
    </a>
  </li>
</ul>

This is how I foolishly used to style this. Foolishly I tell you!

.posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post {
  border-bottom: 1px solid #eee;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  &:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

Lots of code just to space each post evenly, except for the last one. This is what :not was made for!

.post:not(:last-of-type) {
  border-bottom: 1px solid #eee;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
}

We’ve eliminated five lines of code here. Just imagine how much you’d save by using this throughout your code base! I made a CodePen for you to see this in action.

Hope this helps! If you have questions, send me an email to tim@theboldreport.net.

It Isn’t Millennials Who Are Entitled

Rachel Hosie writes on some thoughts from author and motivational speaker Brian Sinek:

And another problem is that we’ve been brought up to focus on having a healthy work/life balance - “the message is correct, but it seems to have been exaggerated and misinterpreted,” Sinek explains.

He believes the pendulum has swung too far the other way - while older generations may have felt chained to their desks, many millennials leave work on the dot of 5pm every day and refuse to answer work calls or emails over the weekend. This attitude is one of the reasons we have a reputation for entitlement.

I’ll be honest, I’m writing about this one just to tell you how utterly and fantastically stupid this is. If as my employer, you expect me to work outside of normal business hours on a consistent basis, the one who is entitled is you.

Employers can’t get away with abuse that used to be considered “part of the job” and the problem is with millennials? As is true with any person of any generation, respecting employees and their time will certainly result in a dedicated and hard-working workforce.

Wait, You Don’t Control Your Calendar? | Signal v. Noise

Jason Fried on controlling your calendar:

As many people know — and as I didn’t — in most companies people don’t really control their own time. Everyone can see everyone else’s calendar, and people can pick away at each other’s time.

“Ah, an opening! Let me grab it before someone else does!”

“There’s a gap… Fill it!”

“Someone blocked out 4 hours to themselves? Oh good! That means they’re available and not stuck in meetings… I can hit them up then.”

Almost every place that I’ve worked for had no respect for my time. If you get a calendar invite, you better damn well accept that invite. Anything short of that felt like insubordination. And here’s the thing: lots of managers theoretically understand that interrupting someone’s day with meetings makes them unproductive.

The problem comes in practice. “Meetings helps us all get on the same page.” Yea, well we could do that in Slack or Basecamp. Next excuse. “There’s nothing like face-to-face time to talk things out.” Uhhh… yea there is. Hours of productive time where I can actually do the work you pay me for.

But hey! What do I care? I don’t work full-time anymore. Thankfully, this type of crap doesn’t stress me out these days.