Its been a while since I’ve given any attention to my site. I felt like devoting this weekend to it felt right. I’ve updated it to a new look. Its hosted on GitHub pages which fits perfectly into my daily workflow. The design was custom by me.
Tools
Heres a list of tools I’ve used in building this site.
Autoprefixer
Autoprefixer is a great tool for normalizing all your prefixed css property. Instead of always remembering and writing the -webkit- prefixes for different css3 properties that haven’t been fully supported yet. Autoprefixer remembers those things for you.
Bower
Bower.io is another package manager which is great for moving front end assets around like js/css libraries. You can checkout versions of jquery or d3.js and have them and any bug updates automatically included into your front end stack.
Grunt
Gruntjs is like make, but for node. What makes grunt great is I can use it to hook in existing node and grunt packages to do tasks for me. I use it to update my bower libraries, build my jekyll site, and publish to gh-pages.
ionicons
Most of the icons you see on the site are svg images of ionicons I picked them because they were free and open source. And were really easy to drop into my designs.
jekyll
Jekyll is the technology that is behind GitHub pages. It’s whole deal is it builds sites from html and markdown files and compiles them into plain old html. Then GitHub serves it. By computing the logic before you take out a lot of the processing time when a website is loaded.
normalize
Back in the day it was Eric Meyer’s css reset, but now you should really be using normalize.css It takes out any of the discrepancies between browser’s default settings. Making all of the default styles the same.
Primer
I’m using primer’s grid and markdown styles. Because sometimes you don’t really need to re-invent something that is great.
Moment.js
Moment.js is a way to take a date 2014-04-01T16:30:00-08:00 and turn it into something like 2 years ago. Jekyll doesn’t include this sort of date calculation, but I wanted to have something and this worked.
typekit
Typekit is probably the best way to include some beautiful fonts on your site. On this site I’m using:
- ‘Proxima Nova’ for the body
- ‘Quatro Slab’ for the headings and logo
- ‘Source Code Pro’ for the code snippets
More to come…
I’ll go into details in a later post on my gh-pages grunt build setup.