New beginnings

This is my new site, built using the Ghost blogging platform. I’ve been working on it for the past few weeks, it’s still not done but it’s in a good state to be put live (I was getting sick of the old one anyway, especially my portfolio which was in dire need of updating).

To-do List

There is still a lot that needs to be done, here are a few things I plan to do in the coming weeks.

Clean up the CSS and remove unused styles

I made a custom theme built off of the default Casper, so there is some unused CSS still in there, though I did try to get rid of a lot of it to begin with. Plus I added some CSS from Prism.js, Fancybox, and Bigfoot. I use Sass so thankfully Bigfoot comes with an SCSS file, so there’s some potential waste removed, but there’s always stuff in these libraries that could be removed for my purposes. I’m obsessive about having the tiniest footprint possible for my CSS so there will be a lot of fine-tuning that needs to be done.

Clean up the JavaScript

Casper came with the jQuery Fitvids plugin installed and some other stuff that I haven’t really had a chance to look at what they’re all doing yet. Need to spend some more time investigating and see what’s needed and what’s not.

Currently the logo is a PNG converted to a Data URI and placed as a background image in the CSS (same with the Twitter icon below and the endmark). I originally wanted to use inline SVG because a) there would be no HTTP request and b) I wouldn’t have to worry about device resolution. I want the logo to look crisp no matter what screen it’s on. I think for right now I have a pretty good solution in place. I’ll write a full post later describing my process for implementing my logo.

Add more Accessibility

I haven’t really done much for accessibility in my web projects to date, except for using alt1 attributes on img elements and using semantic HTML5 elements. Ghost does use the role attribute on some elements. I want to learn more about ARIA roles and other accessibility features. I know this is a weaker part of my skillset and it’s something I want to improve on.

Add more metadata /

For some previous projects I’ve implemented metadata and it’s definitely something I want to work on for here. I want to have everything I can marked up with Schema and also add OpenGraph.

More thoroughly test the mobile styles

Like I said this was built off of the Casper default theme and I did play around on my phone and also in Chrome’s device emulator in the web inspector to test iPad and iPhone, but there are some improvements that need to be made, especially in the tablet arena.

Start a Style Guide section

Working on my current company’s site, I came across Anna Debenham’s 24 Ways article about style guides and started writing one for our site. The redesign that came out last year was originally made by a third party before I came on staff, and to be honest they did not do a good job. The design was okay—typical Wordpress stuff—but their CSS was atrocious and bloated. I’ve spent my freetime the past few months slowly working through the cruft and streamlining the CSS and creating a style guide is definitely helping.

I want to create a style guide for this site step by step, tackling just a few patterns and modules at a time. I want to try out seldom-used HTML elements and see how I could incorporate them here and in my other projects.

Continue to learn

There is always more to learn. I chose Ghost2 for several reasons, one of the main ones being that it’s written in Node.js and I’m very interested in Node. I’m a front-end developer that is still learning a lot about JavaScript, but I eventually want to do both front-end and back-end development and the idea of using JavaScript for both the client-side and server-side language really fascinates me. I’ve got a long road ahead of me and it begins here...

  1. Just realized I need to update my style for inline code to match that of the code blocks CSS I made using Prism.js return to article

  2. One thing that is really bugging me about Ghost right now is my favicon. I took the time to use the fabulous Real Favicon Generator and add it to the site, but I’m still getting a blank favicon on Chrome (although I just checked Firefox and it’s fine, as is the Apple touch icon). I read something about this being a Ghost 0.4.2 bug, but even the fix recommended hasn’t seemed to work so far (can’t find the source at the moment). return to article