Category: blogging

Creating an Alexa skill for my blog

My Alexa can now read my recent blog posts to me—and to you, too!

Creating an Alexa flash briefing skill to accomplish this was much easier than I had expected — not much more than signing up for an Amazon developers account and filling out some forms. There’s no programming involved.

I must admit, the mechanical text to speech voice isn’t ideal. It might make more sense to record myself reading my blog posts, put them on a podcasting service like SoundCloud, and connect that RSS feed to my Alexa skill. That could be a fun experiment.

Btw, your Alexa can read my blog to you, too. Using your Alexa app, you can find my skill by searching for “Brent Logan.” Let me know what you think.

Disqus and the Twenty Sixteen WordPress theme

Many WordPress sites use the Disqus Comment System because it’s powerful, social, and adds some features not available with the standard WordPress comment system.1

Twenty Sixteen Is Not Designed For Disqus

Unfortunately, the Twenty Sixteen WordPress theme2 is not designed for Disqus. On narrow screens like smart phones, Twenty Sixteen displays Disqus full width against the left and right edges of the screen, which doesn’t match the layout of Twenty Sixteen. If you want Disqus to look good, you’ll need to make a slight tweak.

A Simple Fix

Fortunately, making Disqus fit in with the rest of Twenty Sixteen is simple. Just add the following CSS to your site:

#disqus_thread {
    margin: 0 7.6923% 3.5em;
}

@media screen and (min-width: 56.875em) {
    #disqus_thread {
        margin: inherit;
    }
}

This CSS makes Disqus match the margins for the rest of your site. Disqus looks good at all screen widths, even on smart phones.

Adding the CSS

There are may ways to add CSS to your WordPress site, but a couple of the easiest are the Custom CSS module in the JetPack by WordPress.com plugin3 and the Simple Custom CSS plugin. Both of these plugins document how to add CSS to your site.

More advanced WordPress users might choose to use a child theme.

Good luck!

  1. I sometimes use Disqus here at brentlogan.com. I installed it briefly while I tested it with Twenty Sixteen. ↩
  2. Twenty Sixteen is still in development and will released before the end of 2015. ↩
  3. If you’re not already using JetPack, I wouldn’t recommend it just for adding CSS. That would be overkill. ↩

Clean Archives Reloaded in Twenty Sixteen

Clean Archives Reloaded is a great archives plugin for those of us who have used WordPress for a long time. I use it in my archives page because it can display a lot of post titles without overwhelming the reader.

Twenty Sixteen is the default WordPress theme for WordPress version 4.4. I’m using Twenty Sixteen now.

Twenty Sixteen is a “mobile first” responsive theme. Its main menu collapses our of the way for smaller screens yet can be expanded with a touch. The items are spaced for easy tapping.

Google’s Search Console1 highlights pages that are not mobile friendly; it flagged my archives page because the post title links and month links were too close together.

Here’s how to take the CSS for Twenty Sixteen’s main menu and apply it to Clean Archives Reloaded.

Modify Clean Archives Reloaded

The HTML structure of Clean Archives Reloaded doesn’t quite match the HTML structure of Twenty Sixteen’s main menu. To simplify the CSS, it was easier to change one line of clean-archives-reloaded.php. I changed

$html .= '<li>' .  mysql2date( 'd', $post->post_date ) . ': <a href="' . get_permalink( $post->ID ) . '">' . get_the_title( $post->ID ) . '</a>';

to

$html .= '<li><a href="' . get_permalink( $post->ID ) . '">' .  mysql2date( 'd', $post->post_date ) . ': ' . get_the_title( $post->ID ) . '</a>';

This moves the date inside the anchor tag, simplifying its HTML structure.2

Make Custom CSS

Next I grabbed the CSS from Twenty Sixteen and searched for all the lines with .main-menu in them and modified those appropriate to Clean Archives Reloaded. Because I only wanted this new CSS to apply to smaller screen widths, I wrapped the CSS in a media query. This makes Clean Archives Reloaded use mobile friendly formatting at the same screen width that Twenty Sixteen’s main menu.

@media screen and (max-width: 56.875em) {
    .car-list {
        font-family: Montserrat, "Helvetica Neue", sans-serif;
    }
    .car-list ul a {
        box-shadow: none;
    }
    .car-list,
    .car-list ul {
        list-style: none;
        margin: 0;
    }
    .car-list li {
        border-top: 1px solid #e8e8e8;
        position: relative;
    }
    .car-yearmonth, .car-list a {
        color: #1a1a1a;
        display: block;
        line-height: 1.3125;
        padding: 0.84375em 0;
    }
    .car-list a:hover,
    .car-list a:focus {
        color: #007acc;
    }
    .car-list ul {
        display: none;
        margin-left: 0.875em;
    }
    .car-list {
        border-bottom: 1px solid #e8e8e8;
    }
    .car-yearmonth:after {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-family: "Genericons";
        font-size: 16px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        line-height: 1;
        speak: none;
        text-align: center;
        text-decoration: inherit;
        text-transform: none;
        vertical-align: top;
    }
    .car-yearmonth {
        margin-right: 50px;
        padding-right: 2.25em;
    }
    .car-yearmonth:after {
        content: "\f431";
        position: absolute;
        top: 0.8125em;
        right: 0.625em;
    }
}
.post-sharing a, .car-toggler {
    background: #1a1a1a;
    border: 0;
    border-radius: 2px;
    color: #fff;
    font-family: Montserrat, "Helvetica Neue", sans-serif;
    font-weight: 700;
    letter-spacing: 0.046875em;
    line-height: 1;
    padding: 0.84375em 0.875em 0.78125em;
    text-transform: uppercase;
}
.car-toggler:hover {
    background: #007acc;
    color: #fff;
}
.car-toggler:focus {    
    outline: thin dotted;
    outline-offset: -4px;
    color: #fff
}
.car-list {
    margin-top: 20px;
}

There are many options for applying this custom CSS, from using a child theme, to using JetPack’s custom CSS module. I use a plugin that loads my custom CSS file.

This is the result.

Success!

Update. I continue to update the CSS and screen capture as Twenty Twelve’s CSS continues to change during development. This is the CSS I’m using here now.

  1. Search Console used to be called Webmaster Tools. ↩
  2. I wonder if I can convince Alex Mills (Viper007Bond) to make the change in the official release. ↩

Ten Year Blogiversary

Ten years ago, I started this blog with a post about earthquake monitors.1 Now, 2,304 posts later, I’m still blogging.

Over the years, this blog has gone through a lot of change. Quoting my about page:

I used be a “serious” blogger and wrote about politics and religion. Now I’m a snapshooter extraordinaire who takes pictures of the sky, buildings, and Dawson Creek Park. I also write about family vacations, bicycling, and other fun stuff we do.

Most of my posts are still available2 in the archives.3 Some of the posts I’m embarrassed about.4 Others, I’m amazed I took the time to write. The posts I enjoy the most are those about family vacations and pictures I’ve taken. I try to remember that when I click publish.

I expect to continue blogging, although I now repost a lot of my content elsewhere, and elsewhere is where most of my online interaction takes place.5

I wonder what changes the next ten years will bring to blogging.

  1. The 2004 Indian ocean earthquake and tsunami struck five days later. ↩
  2. I’ve deleted a couple parodies that were likely to be misinterpreted. The Internet lynch mob has limited sense of humor, no recognition of irony, and an insatiable appetite for outrage. No reason to feed the monster if I can avoid it. ↩
  3. Yeah, the archives page is a little slow. I haven’t found a faster archives plugin that makes it so easy to access all the posts, so I put up with the slowness. ↩
  4. I haven’t deleted them…yet. ↩
  5. I even experimented a couple of times with removing the comments from my blog. As I haven’t had to worry about comment trolls, I reactivated the comment section, and wait patiently for someone to comment. ;-) ↩

R.I.P. The Blog, 1997-2013

R.I.P. The Blog, 1997-2013, by Jason Kottke. “Blogs are for 40-somethings with kids.” Guilty, as charged. Yet, like Jason, I plan to continue writing/posting online.

I blame the death of blogging on its success. Web content has become so common that it’s virtually worthless. The continuous flow of the new is a stream. If you miss something, don’t worry. More effluent will be flowing by whenever you look…

Blogan: 10th Anniversary Project Entry

To celebrate WordPress’ upcoming 10th anniversary this May 27, 2013, Dougal Campbell proposes blogging the following topics. Here goes!

When WordPress was first released in May 2003

  • I was 40 years old
  • I already had a web site
  • I had sold a domain name1

When I first started using WordPress in December 2004

  • I didn’t post under my real name, instead I used blogan
  • Posting an image meant including a small thumbnail image in the top corner of the post
  • I thought I could change people’s opinions by writing about politics and religion
  • I hadn’t heard of link rot
  • WordPress themes were CSS files and some images and CSS Zen Garden was amazing!
  • WordPress was on version 1.2, named for Charles Mingus
  • There were 8,000,000 blogs, yet 62% of Internet users didn’t know what a blog is

 Since I first started using WordPress

  • I learned CSS, some PHP, and can navigate the WordPress codex
  • I have tried more WordPress themes than I can remember, and provided a ton of support for the K2 theme on its forum
  • I lived by web stats, and now largely ignore them2
  • I learned to appreciate responsiveness in web sites
  • I have tried About.me, App.Net, Blogspot, Facebook, 500px, Flickr, FriendFeed, Google+, Google Wave, Identi.ca, Instagram, LinkedIn, MySpace, new MySpace, Pinterest, Plurk, Posterous, Pownce, Prezi, RebelMouse, Slideshare, Quora, Twitter, Vizify, Yammer, and Youtube3 but still consider this WordPress blog to be my online home

If you use WordPress, join in the fun!

Hat tip: WordPress Tavern.

1It’s a five letter, common word, dot com name that’s still parked…
2Sour grapes?
3And probably others…