Website updates: fonts and random string helpers

Ever have one of those days where you start out just doing some maintenance on something (say, a website), not meaning to spend too much time on it, but then get caught up in all sorts of little things and end up spending a good deal of your day fiddling with fonts and layouts? That was me with this website today, after I realised that hey, it had been quite a while since I’d last updated Ghost.

A summary of changes made:

  • The most meaningful changes have been to the random tagline generation – I hacked together a Ghost helper function to provide the taglines in the server-side JavaScript, as opposed to the JQuery fiddling I was doing on the client-side before. You’ll notice taglines load with each page rather than taking a second or so to appear now. The code’s still a kludge, but it’s better.
  • I almost removed the author footer at the bottom of post bodies, but then decided to implement another random text Ghost helper function to give myself a random bio on every page refresh.
  • The most visible changes (I hope) have been to the fonts used on the site. I’ve been reading through Butterick’s Practical Typography lately and trying to apply or at least approximate what it teaches where I’m able. I’m not about to buy professional fonts for my spare-time blog, but I reckon the new Google webfonts are a noticeable step up from Georgia and Arial.
  • In-text links were previously only a slightly different shade of grey from the body text, making them very hard to notice, so I turned them all crimson. Not sure Matthew Butterick would approve, but I like ‘em.
  • I made some changes to the way post excerpts are displayed – post images should be a more uniform size, headings, captions and footnotes are stripped from excerpts (more helper hacking) and excerpts are followed by a subtle ellipsis rather than that silly (READ MORE) thing (what was I thinking?)
  • In version 0.5.9 of the Ghost blogging platform, following the introduction of multiple blog authors, post metadata and a tag-organising interface, navigation links were finally implemented. Those links at the top of the page? Yeah, they were hardcoded into the page HTML until today. Now the one for the page you’re currently on turns a different colour, so you can remember. Also it’s significantly easier for me to add more.
  • Someone added Markdown footnotes to Ghost while I wasn’t looking, so now the many manual HTML footnotes on this blog have been replaced by semantically meaningful equivalents. They render mostly the same as they did before, but I’ve had to sacrifice some flexibility – the footnote system requires that all footnotes be grouped together or the page HTML breaks, so I’ve had to change my style of grouping footnotes by section. I personally think autonumbering and a clean editor are worth it, though.
  • I also changed the site banner, though the new one is very similar to the old one.

I’m thinking of writing some Ghost apps (i.e. plugins) in the future, to more cleanly implement my random taglines. It wouldn’t be too difficult a task, and I’d be able to share the results. Then maybe I can move onto those comments I’ve talked about.

If you ever want to get some practice writing and programming, learn about typography, web design and the Unix shell, I highly recommend renting some server hosting and starting a blog. It’s a lot of fun (or maybe I’m just an impossible nerd).

Next post:
Previous post: