Nov·09·2017

Exclude Posts From RSS in Jekyll

Two different solutions depending on your circumstance

Let’s say you want to exclude a post from your RSS feed. How do you go about doing that? Well, there are a few ways. First, you’d need to add something to the front matter of your post:

# 01-01-2017-test-post.md
title: Test Post
exclude_rss: true

We can use the exclude_rss variable to then filter out posts we don’t want in our feed.

Solution One: if Statement

Open up your feed file, mine is called atom.xml.

<!-- atom.xml -->
{% for post in site.posts %}
  {% if post.exclude_rss != true %}
    <!-- entry stuff goes in here -->
  {% endif %}
{% endfor %}

This solution definitely works, and if your circumstances aren’t very complex, you’d be totally fine to use this. But this solution breaks down quickly if you want only a certain type of post in your feed.

Solution Two: where and where_exp Filter

Let’s introduce some complexity into our problem. Let’s say we want to limit our feed to twenty entries where the only entries are articles, and we can still filter out specific posts.

We’ll use the where and where_exp filter. You can read a little bit more about them in the Jekyll Docs. The reason we need these more advanced filters is because if we’re creating an articles-only feed with twenty entries, we’d want twenty entries of articles. If we were to use the if statement method, we wouldn’t get twenty entries of articles if in the last twenty entries only two were articles. That would only give us two entries.

Again, we’ll open up our feed file. The following is what mine looks like, but modify as you see necessary.

<!-- atom.articles.xml -->
{% assign posts = site.posts | where_exp:"post", "post.exclude_rss != true" | where:"custom_type","post" %}
{% for post in posts limit:20 %}
  <!-- entry stuff here -->
{% endfor %}

This code tells our for loop to only iterate on posts where post.exclude_rss is not equal to true and where the custom_type is post. This method gets us twenty entries of articles and excludes posts we don’t want in the feed.

I love this about Jekyll: there a few different ways of doing things depending on how complex you want to get.

Nov·07·2017

21st Century Fox Has Been Holding Talks to Sell Most of the Company to Disney: Sources | CNBC

David Faber for CNBC:

21st Century Fox has been holding talks to sell most of the company to Walt Disney Co., leaving behind a media company tightly focused on news and sports, according to people familiar with the situation.

Holy moly. Really trying to keep my composure and not get crazy excited about what this would mean. But let’s have a little fun. Imagine the Fantastic Four and X-Men being part of Marvel Studios. Marvel will finally be able to drop the façade of loving the Inhumans.1

I don’t know what would happen to Deadpool—or any other R-rated comic book film that Fox had in the pipeline for that matter. My gut says Disney would try those films at a PG-13 rating. I don’t think Ryan Reynolds would do anymore if that were the case. Personally, I think it would be foolish of Disney to kid-ify2 certain properties. The reality is not all comic books are for kids. What they’ve done with the different Netflix Series gives me hope that they understand this.

Also, as Cinema Blend explains, this could be great news for Star Wars fans too. It could mean that we get a pre-special edition version of the original trilogy without having to pirate it.3 Imagine that! We’ve been trying to give Fox our money, but they just don’t want it!

But, we’re totally getting ahead of ourselves here. It’s only a rumor. A rumor, I’d be interested in becoming reality.

  1. I kid. The Inhumans are pretty cool, but Marvel has tried to make them into the X-Men unsuccessfully. Kevin Feige didn’t want to do a movie about them, so they got downgraded to a TV Show… which bombed. The newer comics of the Inhumans give them very similar traits to the X-Men. Oh and the Fantastic Four don’t even have a comic book right now. 

  2. That’s a word… right? Right? 

  3. Did I say that? Fox, I would never pirate a film of yours that used to be better before George Lucas got his gruby hands on it. Never. 

Remove Table of Contents From a Jekyll RSS Feed

How is this not a post on the internet yet?

Note from the Editor: The following method will only work if you self-host your Jekyll site. GitHub Pages doesn’t allow custom plugins.


As you may have noticed, I added table of contents to appropriate posts. If you hadn’t noticed, take a look at the release notes from the latest version.

Having a table of contents on longer posts is awesome. Some of the longer reviews and development articles are much easier to consume by knowing what’s in the article. Adding a table of contents to a Jekyll post is a piece of cake with Kramdown:

* table of contents
{:toc}

All was fine and dandy with the new table of contents till I realized that they were being output in the RSS feed. 🤦🏽‍ I didn’t want that! After searching the vast internet cosmos for more than an hour, I wasn’t finding what I needed. Shocked and disappointed thinking that no one had written about this, I almost gave up.

Then, finally, I found it. Well… not really. The article is about removing footnotes from excerpts in Jekyll with the help of the nokogiri gem. This wasn’t what I was trying to do, but close enough that I could modify and make it work.

The Solution

Create a Jekyll Plugin

Go to your _plugins folder and create a new Ruby file. You can call it whatever you’d like, I called mine stripTOC.rb

# stripTOC.rb

require 'nokogiri'

module Jekyll
  module StripTocFilter

    def strip_toc(raw)
      doc = Nokogiri::HTML.fragment(raw.encode('UTF-8', :invalid => :replace, :undef => :replace, :replace => ''))

      for block in ['ul'] do
        doc.css(block).each do |ele|
          ele.remove if (ele['id'] == 'markdown-toc')
        end
      end

      doc.inner_html

    end
  end
end

Liquid::Template.register_filter(Jekyll::StripTocFilter)

This code creates a new filter that we can use to remove the table of contents from our RSS feed. If you noticed, we’re telling it to find any element with the #markdown-toc id. This is the id assigned to it by Kramdown.

Filtering Our RSS Feed

Now we want to open up our feed and use the filter. Mine is called atom.xml.

<!-- atom.xml -->
<content type="html">
  <![CDATA[
    {{ post.content | strip_toc }}
  ]]>
</content>

Now your table of contents is present on your articles, but doesn’t clutter up the RSS feed.

Nov·06·2017

The Meaning of AMP by Jeremy Keith

Jeremy Keith:

At AMP Conf, the Google Search team were at pains to repeat over and over that AMP pages wouldn’t get any preferential treatment in search results …but they appear in a carousel above the search results. Now, if you were to ask any right-thinking person whether they think having their page appear right at the top of a list of search results would be considered preferential treatment, I think they would say hell, yes! This is the only reason why The Guardian, for instance, even have AMP versions of their content—it’s not for the performance benefits (their non-AMP pages are faster); it’s for that prime real estate in the carousel.

Jeremy’s thoughts on AMP are pretty spot on for the best part. While I agree with his update—“well-meaning people work on even the fishiest of projects”—the way AMP is being pushed and then displayed in Google search is disingenuous.

At this moment, I wouldn’t use AMP in my projects.

‘Black Panther’ Official Trailer

I know this trailer came out a while ago, but I just can’t stop watching it! Black Panther looks, feels, and sounds very different to anything else we’ve seen in the Marvel Cinematic Universe. The music used to score this trailer—and the teaser—are perfect and have me excited to hear the complete score and soundtrack.

Black Panther debuts on February 16, 2018 in the US. Get hyped.

Nov·02·2017

Version 1.2.0

Notes on the latest release

I’ve been adding (and taking away) stuff on the site, and wanted to loop you in. Also, in case you were wondering how we’re back at the 1.x.x numbers, I started over when I renamed the site.

Bug Fixes

Most of these bugs were introduced by me for being careless with the codebase. Need to get better with that.

Fix ul and ol Styles

As usual, I was doing something with a completely different thing and broke something else in the process. (#23)

HOT FIX: Style tag list

Same as the issue above. I deleted some CSS that then broke the tag list. Not proud.

Fix Async Fonts

I did some work to asynchronously load fonts, but then found out I’d forgotten to load one of the scripts that makes that work. (#28)

Fix tags to use dashes instead of underscores

When tags have multiple words (i.e Site News), I want the links to use dashes not underscores to replace the spaces.

Development Fixes

Simplify Markup

There was a lot of unnecessary markup around the site that still remains from The Bold Report. I cleaned a lot of that up and made some changes to the topics page. (#21)

Migrate to New Paginator Gem

jekyll-paginate is no longer under development, and if I’m not mistaken will stop working in January. I figured might as well do this early. (#22)

Add MIT License to Project

I don’t know why I haven’t had a license on the code for this. I want anyone and everyone to take a look at the code and copy what they may need or want. (#26)

Updates to README and Pull Request Template

The README had some legacy Bold Report stuff in it. The pull request template was way too long and wasn’t using most of it. Now it just asks for the purpose of the PR and screenshots if applicable. (#27)

Site Enhancements

Revert to Old Style of Code Blocks

The full-width code blocks were distracting and interrupted the flow of the content. Now the code blocks are the same width as the rest of the text content. (#24)

Async JS and Fonts with loadCSS

I’ve known for a while now that I needed to address the problem of the fonts on this site. They were slow and blocked rendering. I did some research and found a great solution. (#25)

Add Heading Anchors and a Table of Contents to Appropriate Places

Something I really love about the reading experience of A List Apart, is that you can link directly to the section you want to. I’d wanted to add something like that to this site for a while to make linking easier. Also, longer posts now have a table of contents to help you find the appropriate section that much faster. This will be especially helpful for those longer reviews that I post every once in a while. (#29)


You can look at the release on GitHub too where you can inspect and judge the code I write.

Oct·31·2017

Performant Cloud.typography Fonts

Typography can look great and load at warp speed, Mr. Sulu

I’ve used fonts from Cloud.typography for about two years now. I love Hoefler & Co.’s family of typefaces—this site uses Whitney. But the problem has always been the performance hog these fonts are to serve.

On most days, it doesn’t bother me much because of my high internet speed. That’s a very privileged way of thinking, so it was time to fix things. I don’t run any analytics here, so I’m not sure how many people visit this site on a slow connection. Really, it doesn’t matter. Any one of us can have a slow connection at a moments notice.

The Solution

I’d done some searching, but I couldn’t seem to find an article on how to improve the load time of these fonts. Cloud.typography doesn’t load fonts via JavaScript, so it’s not as easy as adding the async attribute. Also, they don’t seem to let you truly self-host unless you have a crazy amount of pageviews.

After some digging, I found loadCSS, a polyfill from Filament Group to asynchronously load CSS. Perfect! That’s exactly what I needed to do.

How to Implement

We’ll do the following:

  1. Include loadCSS in our project.
  2. Include the Cloud.typography stylesheet in the recommended way
  3. Build in a fallback for users that don’t use JavaScript

Adding the Polyfill to Our Project

First, you need loadCSS. There a few different ways of including it, but I personally added it to the asset pipeline.

//= require ./vendor/loadCSS.min
//= require ./vendor/cssrelpreload.min

Include the Cloud.typography Stylesheet

Next we’ll use the markup that the loadCSS README suggests. Unfortunately, we need this polyfill because rel="preload" doesn’t have the greatest browser support yet.

<link as="style" href="https://cloud.typography.com/[…]/[…]/css/fonts.css" onload="this.rel='stylesheet'" rel="preload" />

Now for a Fallback

Some may not have JavaScript enabled in their browser, so we’ll add a fallback just in case.

<noscript>
  <link href="https://cloud.typography.com/[…]/[…]/css/fonts.css" media="screen" rel="stylesheet" type="text/css" />
</noscript>

Show Me Some Stats!

Not a ton of work, right? Now let’s take a look at the numbers to see if this helped.

Page Internet Speed DOMContentLoaded Load
Home (Before) 110mb/s 1.10s 1.10s
Home (After) 110mb/s 331ms 1.03s
Home (Before) 3G Slow 9.35s 9.35s
Home (After) 3G Slow 2.50s 5.29s
Article (Before) 3G Slow 9.01s 9.01s
Article (After) 3G Slow 2.30s 4.92s

Just as suspected, the performance improvements are astonishing. This is a huge gain, and I think the difference between someone staying on the site, or leaving.

The Future

I know there are even more optimizations I can make. I think a ServiceWorker might help. But I don’t know enough about it to tinker just yet.

For now, I’m kinda :shrug: about the FOUT because there still doesn’t seem to be a great way of handling it. Overall however, it’s a better experience with faster speeds without sacrificing beautiful type.


Update on 11/01/2017 at 9:31am CDT: Shout out to James Dinsdale who gave me a heads up that I needed to add the rel="preload" polyfill script too.

Oct·30·2017

Sexual Misconduct Claims, Suggests Accusers Motivated by ‘Peer Pressure’ | The Verge

Adi Robertson writing for The Verge:

Scoble, who apparently published this post against the advice of his lawyer, claims he did not have enough power over his accusers to sexually harass them. “If I were guilty of all the things said about me I would still not be in a position to have sexually harassed anyone,” he writes.

…his latest defense puts forward an absurd definition of sexual harassment and effectively accuses women of reporting it to fit in with the cool crowd, while claiming he’s writing in “a spirit of healing.”

Robert Scoble is not only an idiot, he’s scum. This dude thinks it’s ok to suggest that peer pressure is what motivated his accusers to come forward. Oh, and lest we forget, that wasn’t the worst part. After explaining how his multiple infidelities were “consensual,” he goes on to plug his new business. Despicable.

Saying Goodbye to Firebug | Mozilla Hacks

Jan Honza Odvarko:

Firebug has been a phenomenal success. Over its 12-year lifespan, the open source tool developed a near cult following among web developers. When it came out in 2005, Firebug was the first tool to let programmers inspect, edit, and debug code right in the Firefox browser.

So it’s sad that Firebug is now reaching end-of-life in the Firefox browser, with the release of Firefox Quantum (version 57) next month. The good news is that all the capabilities of Firebug are now present in current Firefox Developer Tools.

I was a bit late to the Firebug game. If I recall correctly, I started using it in 2007—two years after its release. Still, Firebug is a huge reason I’m a frontend developer today. Every site I’d visit would get inspected. In addition to CSS-Tricks, inspecting sites in Firebug taught me how to build websites.

While it’s sad to see the name Firebug retire, Mozilla still does an amazing job with their developer tools in Firefox. And in my opinion, still has the best CSS Grid inspector.

Transpiled for-of Loops Are Bad for the Client by Dave Rupert

Dave Rupert:

This story is just a personal reminder for me to repeatedly question what our tools spit out. I don’t want to be the neophobe in the room but I sometimes wonder if we’re living in a collective delusion that the current toolchain is great when it’s really just morbidly complex.

I am responsible for the code that goes into the machine, I do not want to shirk the responsibility of what comes out.

While the specifics of this example don’t apply to me, the lesson sure does. We’re responsible for what we put on the web and what that means for the people using it.