Plans for Jekyll IndieWeb Project

I started a project soon after I began embracing the IndieWeb for the Jekyll platform, Jekyll IndieWeb (A less than inspiring project name I’m afraid to say.) My initial goals were to have a framework for myself that was fully microformats 2 compliant to build my own site off of and to share a starting point for anyone new to having their own website and wanting to embrace IndieWeb themselves.

So far I know of one person who is using it, which is encouragement enough to continue looking at ways to improve it. In the upcoming release of Jekyll, themes will be supported. While considered a minor enhancement, I think its a major milestone for Jekyll. Previously, there was no simple way to change the look and feel of your site without manually copying files into your install. Most theme projects are packaged as standalone Jekyll builds.

So that said, my plan moving forward to is to package the microformated theme, complete with the same config options as a Gem under the name “Crier” (as in town crier. Not sure it’s anymore imaginative than the original project.) The original GitHub project will switch to the Gem once the new version is released, but will stay as a standalone Jekyll install for anyone who wants to get started from scratch. Also, Tom began working implementing a webmention gem for sending while at IndieWeb Summit 2016. With the help of Bear in the IndieWeb community, I hope to have a tutorial and example of using continuous integration to build and deploy a site back to GitHub allowing the sending of webmentions along with the already supported receiving.

I would love to hear from anyone else interested in the project or using it, and what else you would like to see. Long term goal is micropub support.

One Simple WWDC Wish: The Font

My feed reader and Twitter timeline are full of posts with wish lists for next week’s Apple World Wide Developer conference. Siri this, iOS 10 that. And I’m sure some of the ideas are great and I’ll be happy when they are at my disposal.

But all I want is for Apple to include the font from the WWDC web site. When the site launched, it took me some time to realize the page is a giant image. A simple monospaced font on a background you’d find in a terminal or code editor app. It’s beautiful and I want it for my own.

WWDC screenshot

IndieWeb Summit 2016

This weekend is the 2016 IndieWeb Summit in Portland Oregon. I would have loved to attend in person, but a cross country flight wasn’t in the cards. Fortunately, the organizers have long had plans in place to accommodate remote attendance by providing live video feeds of demonstrations as well as covering a couple of the breakout sessions on Saturday. IWC also has a robust IRC channel which will facilitate participation on build day.

My primary goals beyond furthering my understanding of the technologies behind the IndieWeb is to switch back to for receiving webmentions. Aaron Gustafson updated his Jekyll plugin and I like the idea of cached mentions as well as the idea of using progressive enhancement in displaying them. This will entail taking the mentions from the current tool and formatting them to match Aaron’s cache file.

Secondly, I want to wrap my head around syndicating from micropub and begin to use it more. I believe there is a workflow out there, I just need to fully understand how to wire them all the bits together. If time permits, also in the micropub realm, I want to get mobile publishing set up.

GitHub is My View Source

When I first started learning web development in earnest, (beyond basic HTML), the community college I was attending was still teaching Dreamweaver as de facto method of building a site and using Photoshop and tables based layouts. Meanwhile I had launched my first blog with WordPress, fresh off the 1.5 release that brought full themes, XHTML and CSS. Reading blog posts on the subjects was basically the way I learned those skills. And viewing the page source of the authors writing those posts.

Fast forward to 2016, and I still view source. More often than not now, I’m learning from GitHub repositories. Which is why finding the Octotree browser plugin was such a find. Rather than having to navigate back and forth inside a repo, you get a tree view of the files to the left of the browser window. If you find your self using the back button and navigating breadcrumbs, I highly recommend checking it out.

Couch to 5k – Day 3 Week 1

First week (well, 3 runs) in the book. Lesson learned today is take the little twinges of discomfort serious. I had minor discomfort in my right ankle but pushed through, and am now feeling that I was compensating for it. I may need to wait until Friday to start the next week, but that’s to be determined. Consider me day-to-day on the injury report.

The other take away from today was, despite being a native Floridian, it’s easy to forget the seriousness humidity contributes to the feels like temperature. I may want to start timing my runs for morning, or later in the evening (though the summer weather patterns might not play nice with evening runs in general.)


  • Distance: 1.75 mi
  • Pace: 11:29 min/mi

Couch to 5k – Day 2 Week 1

This evening I completed day 2 of the first week of couch to 5k. As exhilarating as day one was, I was equally sore the next day. Though I try to walk a little every day, there are muscles you use to jog that don’t come into play walking. That said, I wasn’t deterred, and today was my planned day 2. The schedule is 3 days a week for the first 3 weeks at least, I didn’t look beyond that.

One thing I did learn from day one was to not push the jog too hard to start, and was able to pace myself a bit better today. I also tried to zig-zag around the neighborhood rather than do laps around the small park near my house. The laps felt a bit too monotonous, as I was checking the app to gauge progress. Snaking through the neighborhood didn’t feel that way. It may have slowed me a bit as I didn’t have a route planned, but the app maps the run so I can check back and have a clearer idea of what would be a good loop. Speaking of, on my geek side, I’m looking at ways to export the .gpx file and create a static map of the run and post with these posts, much like the static map I created with my Instagram photos.


  • Distance: 1.69 miles
  • Pace: 11:46 min/mi

Extraneous Whitespace in Jekyll HTML

One artifact of Jekyll that has bothered me is the redundant blank lines in the rendered HTML. In my case, I was seeing hundreds of blank lines creating the page navigation at the top of the page. It doesn’t affect what the visitor sees, but for developers who use Jekyll poor source is a bad practice. Also imagine someone new to Jekyll and HTML in general trying to view source to debug an issue. Turns out the problem is with the Liquid template language Jekyll uses. Seems the Liquid community have been discussing the issue for 3 years without a solution.

My first approach to solving this was to use a Ruby gem HTML Beautifier. It works great, but for a site like mine with over 500 posts with a lot of tag pages, it increases the build time exponentially. To the point I’ve seen Travis time out due to the long process. Today I went looking for another solution and stumbled upon this gist – remove empty lines. It concerned me the plugin would increase the build time in Jekyll vs in Travis, but was pleasantly surprised it added no noticeable overhead and produces much cleaner HTML output.

Now I get quick build times and cleaner source.

Housekeeping May 2016

Figure for my own reference I should document the updates I’ve made to the site the last month.

I’ve written before that my primary goal with the reboot of this site is to embrace IndieWeb. The first step was receiving webmentions, then sending them. Also in the process I, started an indiewebified Jekyll theme (which I’m using on this site at the time of writing.) Part of that was to have better microformats in the markup.

The big itch that I wanted to scratch was implementing micropub to free myself from Twitter (something I’ve failed at thus far). With the help of Pelle Wessman who shared n bit of yet to be public “glue” to pull together his other tools, I set up my own micropub endpoint on a Heroku.1 I still need to workout adding a syndication endpoint for Twitter so I can auto-tweet notes, but that is coming.

Once that was in place, I was able to use the tools Aaron Perecki built, Quill and OwnYourGram. Quill is a web based micropub publishing app, and OwnYourGram is a service that helps you PESOS your Instagram photos to your own site2.

A lot of the experiments I’ve been doing here might be overkill for a simple blog, but are great ways to expose myself to new technologies. I’ve long had an Amazon Web Services s3 bucket set up as a CDN, but had never found a workflow to efficiently use it. With the my current build/deploy process with Travis, a copy of the Instagram photo is saved to my GitHub repository via micropub. In the build script, the image is copied to the s3 bucket, then linked to the CDN.

The primary reason to use the CDN was I went through the steps to get 100% on Google Pagespeed (last I checked). Since the site is primarily text and is already static it ranked pretty well, but I went ahead and configured loading critical CSS3. (I had set that up with my old Habari theme, but Google’s added a step to async load the remaining CSS). I also had to tweak caching in nginx, which while I was in there, I went ahead and set up http/2. The primary reason I moved back from GitHub pages to my VPS was to serve the site over https with a free LetsEncrypt SSL certificate.

Finally, I went back and forth on analytics. I don’t need them, but it’s nice to see what visitors are looking for and at. I poked around at some self hosted options, ultimately decided for now that for the people who don’t want to share data with Google, there are browser tools to block sending the data, which I’m OK with, therefore using GA here isn’t forcing anyone into it.

I still want to do a fresh design, but only after last few kinks in Jekyll-IndieWeb theme are fixed. I’ll still use the markup as the foundation, just present it differently. As always, if you have any questions, hit me on Twitter @miklb or leave a webmention and I’ll do my best to reply.

  1. Which was my first experience with both Heroku as well as a node app.
  2. Instagram has locked you out of pushing your images from your own site to Instagram.
  3. The command line tool in Filament Group’s CriticalCSS tool made that pretty trivial.

Free Resource: Combining Type

One of the few design skills I would truly like to fully understand and be able to employ in my work is the ability to choose and use type properly. Tonight I stumbled upon a post on the TypeKit blog sharing a pdf of a previously for sale book on the subject. While it is unfortunate that publisher didn’t succeed, it is generous of the author to share it with the public. Head over to the blog to get a digital copy of Pocket Guide to Combining Typefaces. If you have other resources, please send them my way.

Organizing Jekyll Posts

Until last night, I was under the impression you had to store all of your posts as markdown files in a single directory called _posts unless you changed that in your _config.yml file (and even then, my assumption was it was still a single directory.) That said, I still sought out whether there was a way to organize them by at least year within that single folder. I’ve been blogging for 11 years this spring, and while sporadic at times, that is still a lot of posts. When I need to reference a new one, or look for something from the past, having them by year would be nice.

tl;dr yes, you can arbitrarily organize under the _posts folder however you want. All Jekyll looks for are markdown files with FrontMatter.

What I also learned, and isn’t well documented 1 is that you can create top level folders each with their own _posts sub-folder and Jekyll will read from each one, appending that folder name to the generated url for the post, i.e. a folder foo with _posts with 2016-04-26-post-title would yield a URL of (varying by your permalink structure). Those top level folders are then treated as categories, allowing for more filtration within your templates and site organization. I can see other ways of using them, especially as I continue to move towards a more Indieweb way of doing things and more tweets originating from this site.

I intend to contribute my discoveries to the official documentation as soon as I can.

  1. Hint: it’s hidden under page.categories

Productivity Status Early 2016

I broke one of my new rules today by tweeting out more than politics snark or sports and briefly outlined the direction I’m moving with my productivity this year. I’ve been toiling the past year or so trying to shoehorn my brain into Omnifocus to no avail, so at the beginning of the year I started exploring other methods. About 2 weeks ago, my brain just started to work in regard to using TaskPaper. If you aren’t familiar with TaskPaper, it is a plain text method of tracking todos that has tools built around it to filter by tags and projects. I’ve owned the app for awhile, but not until 3.0 was in beta did things begin to click within the app organizing projects. I always wanted (wrongly) to keep separate files for each project. Maybe that is one thing I learned using Omnifocus was structuring projects. Now everything personal is one single text file. I do have a separate one for the free lance work I’m doing because that’s a different mode. I don’t want to be distracted by anything when I’m trying to mow through items for work.

The other element of my productivity was how to keep and better use and Siri. I knew TaskPaper had Applescript support, so that was the first place I looked. Sure enough, I found a script that would import from Reminders to TaskPaper. Unfortunately, TP3 changed it’s scripting method to new JXA, so the old Applescripts were not compatible. Luckily, someone did the work before I fried synapses trying to learn more advanced methods of JXA. A thread in the support forums,
Using Siri covered exactly what I wanted.

From there, I devised the idea of having an “Inbox” for Siri and a corresponding list for TP. I also have a Grocery List and my main reminders is for timed items. I prefer Apple’s reminders because it’s nag is truly a nag. If something must be done on a certain day, it will sit on the lock screen of my phone. I can snooze it for an hour if it’s not time sensitive, and if it really can wait, I can put off until next day.

Now I can say, “Hey, Siri, add build a robot to my inbox” and she will. Later, I can run the script which will migrate (including deleting) the reminder to an Inbox in TaskPaper, which I can move to an appropriate project or create a new one if it is warranted. My next goal is to set up a cron job on the always-on iMac to run the script every night.

For iOS, I’ve tried a few different apps for TaskPaper, but it seems Editorial is going to stick. Also, I’ve not given up on Omnifocus for long term project tracking or potentially work related where contexts and due dates might be necessary, something OF excels at. An upcoming update to Omnifocus for iOS will vastly expand on the URL schemes, and there is already a demo using WorkFlow to build projects in OF from TaskPaper formatted lists in Editorial. Sounds snazzy.

All in all my new system isn’t that fancy or original, but again, that’s the trap of chasing productivity, apps and systems. They become complicated and burdensome to the point you abandon them for the next shiny object, never truly doing the stuff you really wanted to keep track of in the first place.

I hope when I visit this in the fall, I’ve not made many changes and can focus on what I’ve accomplished over the summer.

Performance is a Feature

I spent last evening making the necessary tweaks to this site to get a perfect 100% score on Google’s
Pagespeed Insights. I understand this is just a personal site, but at the root,understanding how to make this site fast will translate to helping bigger projects keep an eye out for potential bottle necks.

Which is why when Aaron Gustafson tweeted this posts headline, it caught my eye.

Either way, you could do much worse than to make your bit of the web fast.
Peter Chamberlin

The context was more broad and I believe directed towards larger sites, but it has to start somewhere.

Also, I plan on sharing how I implemented the changes to get to 100%, specifically the critical CSS.

Customizing Atom Editor

I doubt anyone who writes code for a living or tinkers for that matter hasn’t spent more hours than they’d care to admit tweaking their editor of choice. Suffice to say, I’m in that boat all to well.

My current editor of choice is Atom. It’s open source and more than fits the customization itch.

Aside from deciding on which packages to use (I’ve
starred the ones I use) the other element I’ve gone back and forth with is theme & syntax UI. I’ve long been a fan of both Solarized Light and Dark, but have finally settled on Atom Dark and Oceanic Next. I can also recommend Oliver Pattison’s Newbound syntax themes My dream font is Operator Mono, but until I can justify the purchase of that, I’m using Input.

One tweak I just discovered is for adjusting the font size in the panel, or the sidebar. I’d been able to easily make the font larger for code/markdown, but sometimes had to break the readers out to discern what file was what in a nested folder. To the rescue I found atom-panel.tool-panel for just that. I’m currently using 1.4em. Mind you this is on my old 11 inch Air. I’ve not had as much an issue on the iMac.

Another tweak I’ve added to my custom styles.less file is to italicize attributes. I’m also a fan of italicized comment blocks, which is included in the snippet.

     .entity.other.attribute-name {
         font-style: italic;

     .comment {
       font-style: italic;

I’m sure as I expand my development world, (I have a goal to learn python by Building a Twitterbot ) I’ll continue to tweak Atom, but for now, I’m as close to happy with an editor as I have ever been. Feel free to share with me on Twitter @miklb your tips and trick.

Interest in Tampa Homebrew Website Club?

Gauging interest in Tampa to see if anyone would be up for joining a
Homebrew Website Club. A lot of tech folks have vey neglected personal sites and this would give folks a chance to get together and talk tech and work on their personal site and pet proejcts. Platform agnostic (read, not another WordPress meetup) so open to anyone. If interested ping me on Twitter @miklb for now and I’ll sort out finding a location and setting up a time. Only looking for a couple of people to get off the ground.

Headings – What Was Old is New Again

Seems HTML WG has reversed course on a previous recommendation that allowed sections to have their own H1 tag, now recommending the previous norm of cascading H tags.

Given that this bug has been around, and not fixed in browsers, for many
years, we are proposing to remove the suggestion, and return to the model
where elements `h1..h6` have a defined level of their own.


Last night I switched over the theme for this site to a project I’ve been working on the last moth or so, Jekyll-IndieWeb. While I have different design ideas, until I find other users interested in using it, I knew I needed to work out any kinks. I also wanted to have better microformat support until the design changes. Thus

I will write more about the project once I have more documentation (and work out any more said kinks), but the gist is I wanted to provide someone new to Jekyll with a desire to be part of the
IndieWeb a solid starting point. I rely heavily on the _config.yml file for options a user can set – profile pic, social media links, choice to include display of webmentions – to quickly get a personal site up and running. The biggest hurdle for me was providing a minimal design that was unopinionated yet still aesthetically appealing. Anyone familiar with HTML & CSS can easily build upon or modify it, but if not, it shouldn’t look ugly.

This has been the first solo project I’ve embarked on that was meant for public consumption from the start, which in itself has been a learning process. Now I just hope others can find it useful in some way. If the project interests you I encourage you to try it out, open any issues in the repo, or reach out on #indiewebcamp IRC, I tend to hang around there most days.

Solving the Mysterious Relaunching iTunes

I had been plagued by an issue on my Macbook Air the last couple of months where iTunes would relaunch mysteriously. Not random relaunch mysteriously, more like, as soon as I quit, it would relaunch. I tried force quit and restarts. I trashed cache files and rebuilt the library to no avail. I filed bug reports and feedback to iTunes. Finally I reached out to @AppleSupport on Twitter. Right after (mind you, I DM’ed the account as they asked and so far no further reply) my internet friend @shep linked to a blog post of his from 4 years ago with his own saga of iTunes relaunching. I read through, and while I didn’t have headphones plugged in, I have dozed off a few times with my headphones in, and maybe, as he read about the microswitch in the jack, maybe, just maybe the headphones pulled out slightly & not depressing said microswitch. So I forcefully inserted some headphones and quickly pulled the plug out of the jack. I quit iTunes and so far, iTunes hasn’t relaunched.

Did I mention @AppleSupport hasn’t followed up yet?

Building a Twitterbot

I had an interest to learn the programming language python for quite some time. I’ve played around with it a little using Pythonista in iOS to build a fishing log, but otherwise have only done some cursory reading. Since I do best learning by doing, I needed an idea to use python. I’ve seen some interesting Twitterbots built with it, @pomological being my recent favorite, but wasn’t sure what to build. Ultimately, the idea came to me to build a bot that retrieves an image from Flickr and builds a color scheme from that and post the scheme and original image. I’ve done some basic research and found some libraries to connect (you didn’t think I was going to write the whole thing from scratch?).

But I don’t just want a any random image, so once I get the bot working, I want to be able to try and pull outdoor/landscape images. In a perfect world, I would post 3 images a day—morning, noon, and night. The morning image would be a sunrise, noon/daytime image a normal image and, you guessed it, the night/evening image would be a sunset.

I figured I needed a name for the Twitterbot, not only to make sure something would be available, but since I would need API keys, that has been my first tangible step to create the bot. Thus, @Flickolorbot has been officially conceived.

Stay tuned for more adventures.