Pardon the Interruption

2016 December 7

So, I’m nearing completion of another fairly substantial overhaul of the site. For those keeping score, this will mark the third major iteration of PirateGrunt.com. Version one was WordPress, version two was Jekyll/GitHub. This one doesn’t look quite as sweeping as the others, but involved a fair bit of learning for me.

The switch from WordPress to GitHub was done by cobbling together bits and pieces of code and instructions from various blogs, with an obvious assist from GitHub itself. I had constructed several basic sites for R workshops that I’ve worked on and found that the process was easier than I had assumed. I’ll not repeat the GitHub instructions and these days there are a good dozen bloggers who’ve described how they approach the process. https://www.smashingmagazine.com/2014/08/build-blog-jekyll-github-pages/ and http://anandmanisankar.com/posts/set-up-blog-jekyll-github-pages/.

Despite nearly losing my mind trying to understand some of jekyll’s url configuration settings, the process was fairly smooth. (http://downtothewire.io/2015/08/15/configuring-jekyll-for-user-and-project-github-pages/ saved my sanity.) I had a site which gave me a sensible listing of blog posts and I even had an R script that would take R markdown and generate markdown that jekyll could render as HTML with images intact. Cool!

However, I quickly learned that making small tweaks to the overall site layout and appearance were more difficult than I thought they ought to be. I found that I was putting off writing interesting stuff because I wouldn’t like how it would appear. Well, that sucks. Blogging ought to be a fun way for me to advance my professional development. Not blogging is not OK.

What I came to realize is that I had a very primitive and amateur understanding of modern web design. Like I didn’t know anything at all about it. I had a dim understanding of CSS, but didn’t have a clue why the changes I was trying to make weren’t appearing on the page. At the same time, Bootstrap made everything look nice and my site had some easy responsive navigation, but it was designed by wizards, for all I knew. I was a front end muggle.

No more. While no one would mistake me for a wizard, I have a nodding acquaintance with how all this stuff works. The Bootstrap (and normalize!) styling and javascript now comes from a CDN, which cleans up my project workspace and should improve load times (not that I need much help there). My styling files are now much better organized. I’ve figured out enough SASS to easily define a brand color palette, so my site won’t necessarily look like everyone else’s.

Bootstrap takes care of about 95% of the work in having the site respond to changes in the viewport, but there were two things that needed adjustment. Images didn’t scale at smaller screen sizes and code snippets wrapped. The former was simply an issue of capping the image width.

img {
  width: 90%;
  max-width: 100%;
}

The code wrap necessitated overriding the defaults that (I’m pretty sure) come with Bootstrap. Failing to do this means that the code looks really awful on a small device. It’s still not a super pleasant reading experience, but renders much nicer now. Next on my to-do list is making the sidebar collapsible.

pre code{
  white-space: pre;
  overflow: auto;
}

There were a few additional changes in my approach to the templates. My commit history might not bear this out, but I think the split between between layouts and includes is much cleaner. I recall having fussed over some fairly ugly monolithic files during the early stages of builing the nav. Everything is tucked into neat little boxes now.

And that’s most of it. A good deal of the WordPress content has been tough to migrate and the non-blog content is fairly spartan at the moment. Overall, though, the template is cleaner and I’m excited about using it. Can’t wait to write some mathy stuff!

comments powered by Disqus