steve.fm

A work in progress

Today is Equal Pay Day

Lately, it seems like there is a day for everything, but Equal Pay Day is worth observing — and it’s a cause worth supporting.

Equal Pay Day was started by the National Committee on Pay Equity (NCPE) in 1996 to highlight the gap between men and women’s wages. Equal Pay Day is held every April to symbolize how far into the year women need to work to make what men did in the previous year, according to the NCPE. It is always on Tuesday to “represent how far into the next work week women must work to earn what men earned the previous week.” In other words, because women earn less on average, they must work longer for the same pay.

Absolutely bananas.

Read more about Society & Culture / /

The Food Lab: Real Texas Chile Con Carne

This past Christmas, my wife’s parents bought me The Food Lab by J. Kenji López-Alt. It’s definitely one of the best cookbooks I’ve ever owned. Kenji sets up a great foundation for every topic, and encourages experimentation to achieve better results.

The first full recipe I attempted was the Real Texas Chile Con Carne. Using whole dried chiles for the base made for an impossibly rich and smokey flavor. I shared it with friends this past February and can’t wait to make it again. From the recipe:

Real Texas chile con carne is made with beef, chilies, and not a whole lot else. This is the real deal. A bowl of hot Texas red with chunky, fall-apart tender beef chuck and fresh dried chilies.

Why this recipe works:

  • Using a blend of whole dried chilies delivers maximum flavor to the stew.
  • We sear whole chunks of beef chuck before cutting them into chunks. This ensures that the beef sears instead of steams, delivering better browning and more flavor in a minimal amount of time.

Note: This makes for a moderately hot to hot chili. You can vary the heat by adding or removing the hot chilies and the canned chipotles.

Read more about Cooking / / /

Re: Design

Redesigning things is one of my favorite things to do. While that can come at the expense of other creative pursuits, it can also have a positive effect – Blowing up and rebuilding designs enables me to do more. I hope this new format will be a step forward.

I want this site to be more than just a collection of posts about building the site. Instead of building a "meta-blog" about creating a blog, I'd want to create a site that lets me flexibly post things that cater to my interests.

In the future, I'm hoping to post more about photography, to share things I find, to post recipes I've been making, or to post updates to projects I'm working on. Caverly.co will continue to be my place to explore regular creative projects. The hope is that this site will be a home for writing, photographs, and sharing.

Defining the Problems

As I mentioned earlier, much of my motivation for changing a design hinges whether or not that design is working for me. This could be expressed in myriad ways, but it typically boils down to two things: first, a lack of features or functionality, and second, my desire to shake things up and try something new.

This time around, it was a bit of both. Recently, in my spare time at work, I've been working on tackling a few deficiencies with our WordPress deployment. It's not typically something that I get to do, so I was excited to get my hands dirty and solve some problems. Once I cleared those out of the way, I realized I had whet my appetite to solve some of my own problems.

In order to tackle problems, I find that it's helpful to define them. Primarily, I didn't think the format of the site lent itself to different types of content. Secondarily, I didn't like how unfinished things felt. I'm fine with having a site that looks like a rough draft for a little while, but the last time I tackled something was in September 2016. It was time for an upgrade to fix some of these issues.

Finding Inspiration

After I looked at the default WordPress templates, I started to think about the elements I would need for the type of site I was hoping to create. My favorite publications these days are newsletters like NextDraft, online and print magazines like The New Yorker, and mostly technology blogs like Daring Fireball. (I also spend far too much time on Pinterest and Instagram.)

In capturing the essence of my favorite sites, I wanted posts about the same topic to be more easily discoverable. I can read for hours by scrolling a feed of posts or clicking through to items that are truly related. WordPress has a great taxonomy for organizing content, so I decided to start there. I would continue with my long feed of posts, but create more meaningful links to related content. I would also build sections for popular posts, monthly archives, and popular categories to help generate more interest.

Now that I had figured out what components I wanted to include, i turned my attention to creating a visual design with more finish. Oftentimes, to overcome blank page syndrome, I'll look through photographs to find scenes or colors that inspire me and drop them right into an artboard. I used the above photo of the mountain from Unsplash and created this design. 2017 Redesign

Implementation

To be honest, there's probably a good amount of this design that I'll never implement – like that featured post section with the hero image; it's super snazzy, but having to click to "read more" isn't something I love making people do. If you're already here reading, I'm not going to stop you. There are probably parts I'll implement that aren't a part of this design as well – like pagination, and a footer that lets people know who made the site.

I spent the majority of my weekend coding the design into a new WordPress template. All-in-all, I'm happy with it. It's a great start.

Read more about Building Steve.fm / / / /

Issue with WordPress Plugins

One of the benefits of open-source software is that when things aren’t working as expected, you can fix it.

I noticed there was an issue with the accessibility of the site today when I tried to “tab” to the navigation menu. Whenever I hit the tab key, the focus would move to the first link on the page, not the navigation menu. Try as I might, I wasn’t able to access the menu via the keyboard even when I tabbed through the entire page.

When i looked at the site’s HTML, the answer became apparent very quickly: tabindex="-1". For posterity:

<li id="menu-item-1" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1 active">
   <a title="Home" href="https://steve.fm/" tabindex="-1">Home</a>
</li>

Since I wasn’t generating the menu items myself, I could only assume it had to do with the plugin. I did some quick traversing of the files for a place where it said tabindex="-1" and I found it in the nav-menu-walker.php file in the plugin directory for My Bootstrap Menu.

//Menu Item with no children
else {
    $inner_atts_array['href'] = !empty($item->url) ? $item->url : '#';
    /*Review here*/
    $inner_atts_array['tabindex'] = "-1";
}

Apparently, they even had a comment to review the code… Who knows? Anyways, there was no reason to set the tabindex value there… being able to put it in focus doesn’t benefit us in any way.

Read more about Building Steve.fm

WordPress Pagination

Initially, I had hoped on working on getting the code blocks to render better, potentially with some inline formatting — but then I realized that my older posts were no longer showing up on the page. Guess I’ve written quite a bit!

As usual, the WordPress Codex has the information I need. Their page on pagination references the next_posts_link() and previous_posts_link() functions that should do the trick. I’ll add this right before the get_footer() function in my index.php file.

<div class="row">
    <div class="col-sm-9 col-md-7 col-sm-offset-2">
        <nav aria-label="pagination">
          <ul class="pager">
            <li class="previous"><?php previous_posts_link(); ?></li>
            <li class="next"><?php next_posts_link(); ?></li>
          </ul>
        </nav>
    </div>
</div>

Wrapping them in Bootstrap, they generate exactly the HTML I want. For now.

Read more about Building Steve.fm

Bootstrap Javascript Not Loading

Remember that functions.php file we worked on awhile ago? I actually made a pretty big mistake in it that caused Bootstrap’s javascript and JQuery to not load.

<?php 
    add_action('wp_enqueue_scripts', 'add_theme_styles');
    add_action('wp_enqueue_styles', 'add_theme_scripts');

    function add_theme_styles() {
        wp_enqueue_style('stevefm', get_stylesheet_directory_uri().'/stylesheets/stevefm.less');
   }

    function add_theme_scripts() {
        wp_enqueue_script('jquery.min', get_stylesheet_directory_uri().'/bower_components/jquery/dist/jquery.min.js');
        wp_enqueue_script('bootstrap.min', get_stylesheet_directory_uri().'/bower_components/bootstrap/dist/js/bootstrap.min.js');
   }
 ?>

Basically, I created a function called add_theme_styles() and another function called add_theme_scripts(). When adding them to the built-in WordPress actions, I had accidentally used the tag wp_enqueue_styles instead of wp_enqueue_scripts, which isn’t actually called by WordPress. This resulted in my scripts not loading.

Once I updated my code to fix the mistake, things worked fine… but it had me confused for quite awhile.

<?php 
    add_action('wp_enqueue_scripts', 'add_theme_styles');
    add_action('wp_enqueue_scripts', 'add_theme_scripts');

    function add_theme_styles() {
        wp_enqueue_style('stevefm', get_stylesheet_directory_uri().'/stylesheets/stevefm.less');
   }

    function add_theme_scripts() {
        wp_enqueue_script('jquery.min', get_stylesheet_directory_uri().'/bower_components/jquery/dist/jquery.min.js');
        wp_enqueue_script('bootstrap.min', get_stylesheet_directory_uri().'/bower_components/bootstrap/dist/js/bootstrap.min.js');
   }
 ?>
Read more about Building Steve.fm

Using Bootstrap Navigation in WordPress

The navigation bar of a website, or nav bar for short, is typically a collection of links displayed across the top of a site.

Both Bootstrap and WordPress have opinionated ways for structuring the navigation of a site. There are definite benefits to using WordPress’s menu manager and functions to display the menu items you set up in the Admin panel. Because the functions provided by WordPress output to a different format than Bootstrap, there are a few options to proceed.

  1. We could manually create the navigation bar and its items.
  2. We could build our own styles based on the output of the menu manager’s functions.
  3. We could use a third-party plugin to translate the menu manager’s output into a Bootstrap-friendly format.

The first and second options, while attractive now, probably won’t be best long-term. First — While my site only has a few items now, I’ll save time when I need to add items later if I build a dynamically generated menu. Second — Rolling my own styles only feels like it will save time. Even though I’m planning to modify the Bootstrap nav bar, I’ll probably end up replicating most, if not all, of its responsive functionality in both CSS and Javascript.

After doing some research, it seems like there’s a plugin for WordPress that does exactly what I want: [https://wordpress.org/plugins/my-bootstrap-menu/]. When getting up to speed quickly, I find that it’s typically best to try before you buy, and buy before you build. If I followed my own advice on this project, I’d probably be using Medium, but I don’t just want to write — I want to build.

Once I have a menu in place, the My Bootstrap Menu plugin will let me use it and will automatically style it. To get a menu to show up in WordPress admin, I’ll have to register it within my functions.php file.

add_action( 'init', 'register_my_menu' );
function register_header_menu() {
        register_nav_menu('header-menu',__( 'Header Menu' ));
}

Now that I’ve built it in the admin, I’ll add it to my header.php file by using the wp_nav_menu() function.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Steve Carroll">

    <title>
        <?php echo get_bloginfo('name'); ?> &mdash;
        <?php echo get_bloginfo('description'); ?>
    </title>

    <script src="https://use.typekit.net/uqh7odo.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>

    <?php wp_head(); ?>
</head>
<body>
    
    <div class="page-header">
        <div class="container">
            <div class="row">
                <div class="col-sm-offset-2 col-md-offset-2 col-sm-10">
                    <h2><?php echo get_bloginfo('name') ?> <br>
                    <small><?php echo get_bloginfo('description') ?></small></h2>
                </div>
            </div>
        </div>
    </div>

    <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
    
    <div class="container">

It’s not Bootstrap themed yet, but it’s there. Now I’ll update the settings in the My Bootstrap Menu plugin to recognize that menu and convert it to Bootstrap’s navigation format.

It was that easy…

It is, however, not exactly how I want. I’d like the Home link to be aligned with my blog’s title and the content. Ideally, I’d also like the Caverly link to be right-aligned, but I can deal with everything left-aligned for now.

How’d we get there?

I added the following to my stevefm.less file:

.navbar-inner .navbar-collapse {
    .row;
    > div {
        .make-md-column(7);
        .make-sm-column(9);
        .make-sm-column-offset(2);
    }
}

Looking at the source code that My Bootstrap Menu generated for WordPress, I was able to apply some of Bootstrap’s mixins to the menu structure so it would align correctly. Basically, I made the generated elements behave like a .container class with a .row and .col-* classes depending on the screen size.

Read more about Building Steve.fm

Tinkering

If this is my first post on tinkering, I should get a medal. If not, well… that’s to be expected.

I tend to enjoy messing with things until I get them right.

Currently, I’m stuck in a bit of a hard spot. I want to get a few things squared away before my next post, but I might just post this one describing where I’m stuck now with the site, and we’ll see how we work it out.

The site has three priorities right now, as I see it:

  1. Get navigation up and running.
  2. Figure out good typefaces at appropriate sizes for the body text, headings, and code… maybe the navigation while we’re at it.
  3. Update the style of the code samples to be a little less “Bootstrap-y”, maybe with some syntax highlighting.

Right now, the blog looks more-or-less like this

Read more about Building Steve.fm

Displaying Dates for Every Post

Early on, I noticed a problem where the date was displaying for some of my posts and not others.

I did some quick Googling and found out there’s actually a WordPress Codex page for that the_date() function that recommends using a different function if you want to return the date for multiple posts made on the same day. While some people might just want to display the date for the top post and let others assume that all the posts following are from the same date, I want the date to be on every post.

In case you’re curious, I’m going to update the metadata section in my content.php file to use the get_the_date() function instead:

        <div class="blog-post-metadata">
            <?php the_author(); ?> <br>
            <?php echo get_the_date(); ?>
        </div>

I can also imagine a world where I make a post heading that contains the date for all posts within that date… and where I remove the author information tag as well. It doesn’t make much sense to display the author long-term for a site where I plan on being the only author. The name of the blog should give some indication.

Read more about Building Steve.fm

Customizing the Post Layout

When I first launched the blog, I didn’t care much how content was laid out, I just wanted to make sure things were displaying. Now that i’ve got this worked out, I want to get my posts set up a little nicer.

Ideally, I’ll have the post metadata on the lefthand side of the post, de-emphasized, and the post content to the right of it.

When the site gets scaled down to smaller devices, I want the metadata to shift below the post, rather than being before it. On left-to-right layouts, this tends to be an issue because typically the contpent that comes first left-to-right will be on the top for mobile devices. Bootstrap has a solution to this problem.

In Bootstrap’s responsive grid layouts, they have the option to push or pull columns for different size classes. What this means is that you can basically shift the contents when the devices get larger than a certain size. The actual order of blog post elements is:

  1. Title
  2. Content
  3. Metadata

So I’ll start off by structuring my content.php file with that in mind:

<!-- Title Row -->
<div class="row">
    <div class="col-sm-offset-2 col-md-offset-2 col-sm-8 col-md-6">
        <h2 class="blog-post-title"><?php the_title(); ?></h2>
    </div>
</div>

<!-- Content & Metadata Row -->
<div class="row">

    <!-- Content Column -->
    <div class="col-sm-8 col-md-6">
        <div class="blog-post">
            <?php the_content(); ?>
        </div>
    </div>

    <!-- Metadata Column -->
    <div class="col-sm-2 col-md-2">
        <div class="blog-post-metadata">
            <?php the_author(); ?> <br>
            <?php echo get_the_date(); ?>
        </div>
    </div>
</div>

<hr>

Larger Devices

Smaller Devices

While it’s not quite what we want for larger devices, it works well for smaller ones. Before we go into pushing and pulling, it helps to have a basic understanding about how Bootstrap’s grid system works.

Bootstrap grids are basically divided up into twelve columns. Twelve makes a lot of sense because it’s a relatively small and manageable number that’s evenly divisible by a lot of other numbers:

  • 1
  • 2
  • 3
  • 4
  • 6
  • 12

Those numbers can then be combined to make other combinations of numbers, leaving you with a lot of possibilities for how you arrange your grid. In fact, you don’t even have to get to twelve if you don’t want to. You can see in the code above, the content takes up 8 columns on small devices, but only 6 columns on medium-sized devices.

Once you specify the number of columns to use for an element, it will use that number of columns for all larger devices until you specify it again. For example, I’ve specified 8 columns on small — if I had not specified anything for medium, it would use 8 columns for medium, large, and extra large devices. For any devices smaller than “small”, the column would span the entire width of the device.

Now that we’ve got that under our belts, pushing and pulling should make a little more sense. Let’s say I have an element (A) that’s using 8 columns, then an element (B) that’s using 2 columns.

You can see that element A is using columns 1-8 and element B is using columns 9-10. To get element B into element A’s spot, I’ll have to pull it 8 columns. Because I have two different values at two different sizes, I’ll have to specify for each size class.

The code will look like this for the metadata column:

<!-- Metadata Column -->	
<div class="col-sm-2 col-md-2 col-md-pull-6 col-sm-pull-8">
    <div class="blog-post-metadata">
        <?php the_author(); ?> <br>
        <?php the_date(); ?>
    </div>
</div>

Yikes! To get this to display the way it’s supposed to, I also need to push my other content over:

<!-- Content Column -->
<div class="col-sm-8 col-md-6 col-md-push-2 col-sm-push-2">
    <div class="blog-post">
        <?php the_content(); ?>
    </div>
</div>

Read more about Building Steve.fm