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: Mon, Oct 16, 2017 at 11:09am. 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.

Code Smells in CSS Revisited by Harry Roberts

Harry Roberts:

Way back in 2012, I wrote a post about potential CSS anti-patterns called Code Smells in CSS. Looking back on that piece, I still agree with all of it even four years later, but I do have some new things to add to the list. Again, these aren’t necessarily always bad things, hence referring to them as code smells: they might be perfectly acceptable in your use case, but they still smell kinda funny.

Lots to learn here. I feel horrible saying this, but I’m guilty. I’m guilty of at least two of these. I know, embarrassing. But hey! Can’t let it get me down, we’re all trying to improve.

A real easy one to get better with is minimizing the amount of shorthand syntax you use. Harry focuses on background, but margin and padding should be avoided too unless you’re doing it intentionally.

// Don't do this!
.class-name {
  background: #fff;
  margin: 0 0 10px;
  padding: 0 0 0 5px;
}

// Do this!
.class-name {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 5px 10px; // You're doing something specific with this one.
}

Something small like this can save so much time. Really though, all of Harry’s tips will save you, your co-workers, or whoever else maintains the code you write, a lot of time.

CSS Grid Layout Terminology, Explained by Ire Aderinokun

Ire Aderinokun:

CSS Grid Layout introduces a lot of new concepts; there are 17 new properties to learn, and many more new terms to understand. This can make getting started with CSS Grid Layout difficult, as new terms reference other terms and you can get into a spiral of confusion. So, here are the basic concepts and terminology of CSS Grid Layout, explained.

Yep, the learning curve might be steep to learn this, but it’s important to do it. As Ire goes through the different properties, it’s easy to see how amazing CSS Grid is, and how much it will simplify our life. Don’t wait till “it’s more widely supported.” Learn it now, and the investment will be worth it. CSS Grid is coming.

This next part confused me, but after thinking about it more, it made sense.

.outlined {
  grid-area: outlined;
  border: 2px solid purple;
}

.grid-container {
  display: grid;
  grid-template-areas: "outlined outlined ."
                       "outlined outlined ." 
                       ". . ."; // The last one is empty because it's not part of the outlined grid area.
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

Each outlined corresponds to the first and second column, and the first and second row thereby creating a 200px×200px square. I’ve created a CodePen if you want to play around with it.

See the Pen ggBYzE by Tim Smith (@timothybsmith) on CodePen.

Version 5.1.0

Notes on the latest release

I’ve been doing some work on the site, and wanted to loop you in.

Bug Fixes

  • Update protocol on gravatar images (#168)
    Gravatar images were using http instead of https and that weakens the security of the site.
  • Update Bold Report avatar image in head (#171)
    There’s an image that the site passes to Twitter and Facebook when you share something, I’d completely forgotten to update this image with the new orange color.

Development Fixes

  • Switch to Google Analytics tracking code (#170)
    Previously, I was using a service called Segment to serve the analytics I wanted to use. I didn’t get much value from using what is essentially a middleman. I was using Google Analytics with Segment, and now I’m just using Google Analytics straight from Google.
  • Add jTag templates (#172) Since been removed.
    I was really excited to find Brett Terpstra’s jTag and thought it would be the ideal solution for me. I played around with it, and unfortunately I couldn’t get it to work. I’ve filled an issue, and hope Brett is able to look into it.

Site Enhancements

  • Redesign the Topics Page (#169)
    When I worked on version five, I didn’t really pay much attention to the topics page. I decided to revisit this page, and put it in the main navigation. I think topics will help you find more about topics you’re interested in. Working on this page reminded me how much content there is on here about a wide variety of topics.
  • Typogrify (#173)
    I found this great Jekyll plugin called jekyll-typogrify which gives you access to some great filters. One of them allows me to style all caps differently. For example, I can now write CSS, HTML, RSS, etc. without ruining the flow of the line. But that’s only one of the awesome filters it comes with. If you use Jekyll I highly recommend you check it out.

  • Add share buttons (#174)
    For a long time I’ve decided to refrain from having sharing buttons at the bottom of posts. I foolishly felt I was standing for some “moral highground.” I realized I didn’t understand what that so-called highground even meant. Plus, I was reading something on someone’s site the other day, and was frustrated without an easy way to share. So I’ve added sharing buttons. Share away!

If you normally, read via your RSS reader, I encourage you to visit the site today. Send me an email, and tell me what you think.

LG Has Redesigned Its 5K Mac Monitor So It Can Handle Being Placed Near a Router | Recode

Ina Fried reporting for Recode:

LG has found a fix for a problem that left its high-end Mac monitor unable to work properly when placed within a few feet of a router.

An LG spokesman told Recode that the company is adding additional shielding to newly manufactured models.

As it is, the options in the display space are pretty slim, but now this? How embarrassing. With the experience LG has making monitors, it feels downright stupid. I hope this ordeal gets Apple to rethink it’s departure from the display business.

Introducing Dropbox Smart Sync and New Collaboration Tools | Dropbox Business Blog

Rob Baesman on the Dropbox Business Blog:

As more people work together in teams, the need for storage space grows exponentially. This presents big challenges. But with our new Smart Sync feature, users can see all their files and folders right from their desktop, whether they’re stored in the cloud or synced locally.

Users working with just 128 GB of hard drive space can easily comb through terabytes of files to find exactly what they need—right from Windows File Explorer or macOS Finder. Now, they won’t need to take extra steps—like switching to a web browser—just to view files. And whenever they need to access files stored in the cloud, users can download them with a quick double click.

This is an unfortunate, bittersweet situation. While it’s great to see Smart Sync finally available (what Dropbox used to call Project Infinite), it’s a shame it’s only available for business users at the moment. I’d been thinking of upgrading to Dropbox for Business, but they make you pay for five licenses out of the gate. I’m not about to pay for three licenses I don’t need. I hope they make this feature available for their individual plan soon.

My Favorite TextExpander Snippets

Let’s begin exploring automation with these simple and helpful keyboard shortcuts

This post is part of a series on creating automation heaven.


One of the reasons I love technology is tinkering with it to make my life easier. I’m constantly automating tasks so I can either do them faster, or not have to worry about them at all. I felt writing a series on automation would be a lot of fun, not only because I love to geek out about stuff like this, but it might also be helpful to you.

For our first exploration into automation, we’ll start with TextExpander. For those of you who don’t know, TextExpander is an app that expands custom keyboard shortcuts into text or images. For example, you could type ;home, and it would expand into your full home address. A simple example, but I’m sure you can see how helpful it would be over time.

What’s greater, I can use TextExpander anywhere: on my Mac, iPad, and iPhone. Heck, TextExpander is on Windows too. With that in mind, I’d love to share some of my favorite TextExpander snippets.

Day One

Day One is an excellent journaling app. I love to keep a daily journal, as well as movie and restaurant reviews. In fact, together with IFTTT I automatically import Swarm check-ins and Instagram Photos, but that’s for another article.

By typing ;foodreview, I get a form that asks me if I’d go back, how pricey the restaurant was, who I went with, what I ordered, and a general summary.

Ever go back to a restaurant you really liked, but don’t remember what you ordered? No longer!

My movie review snippet is similar. By typing ;moviereview, I easily log movies I’ve watched. Some of those movies end up getting their own brief review here on The Bold Report, but for those that don’t, my thoughts are recorded somewhere. This one was originally made by David Sparks, but I modified it and formatted a few things in Markdown.

I watch a lot of movies, so giving these reviews some structure is very helpful.

My last Day One snippet is an end of the day summary. I downloaded this snippet from Chuck Grimmett and modified them for my use. I only do this once a day in the evening and it helps me remember key things that happened that day. A little reflection each day feels healthy to me, and reminds me there is so much to be grateful for.

This is so easy to fill out, and helps me reflect on the day

Download my Day One snippets.

Jekyll

For all the work that I do with Jekyll, you might be shocked to hear that I only have one snippet in this category. I probably need more, but I haven’t figured them out yet. The one I do have though, is ;jdate. This simple snippet expands into the date format needed in Jekyll posts, which looks like this:

# YEAR-MONTH-DAY HOUR:MINUTE (using the 24 hour clock)
date: 2017-02-03 12:39

This one snippet has saved me hours in the now 3 years I’ve been using it! I don’t have to remember the format, think about what the date is, or remember how you write four o’clock in the 24 hour clock.

Special Characters

TextExpander publishes Public Groups which you can subscribe to, and one of them is Accented Words. For example, I can type cafe' and it’ll expand into café. I write Spanish occasionally, so I’ve added some common used words with accents so I don’t have to worry about them.

Another use for this group is making it easier to type out modifier key symbols. Let’s say you wanted to write out ⌘⇧W. It’s a pain to remember how to type those characters, and I found myself having to Google search, then copy pasting them over and over. With TextExpander, I’ve matched each character with its own shortcut. ;command, ;shift, ;option, and ;control, all expand to the ⌘, ⇧, ⌥, and ⌃ symbols.

Code

When it comes to writing code, autocompletion has come a long way. I had to whiteboard a week ago, and realized I’m useless without my code editor. Atom autocompletes everything for me. Emmet is a huge help too. However, the one coding snippet I use is to create a comment block in SCSS. By typing ;bcomm, it expands into this:

// -------------------------------
// SECTION NAME HERE
// -------------------------------

It helps me keep my comment style consistent, and saves me time.

General

My general snippets group is usually where I put snippets that don’t belong in any of my other groups. Like :shrug: which expands into ¯\_(ツ)_/¯. For some reason, I seem to use this one a lot. Mostly to answer questions like “What should we do for dinner?” It drives Kelly nuts.

I also have one for 🖖🏼 (probably my most used emoji), which is just :spock:. Snippets for my email address and phone number are extremely useful too. You’d be shocked by how much you have to type those last two.

Conclusion

These are just some of my uses for TextExpander. The possibilities are endless, and I hope you see the ways you’d use it.

If you enjoyed this post and would like to talk more about TextExpander, have questions, or share all the cool ways you use it, send an email to tim@theboldreport.net.