Now that we’ve established that this site is running on WordPress (wondering why I made that choice? Read about it), I want to delve in further to talk about what else I’m using, and the tools I used to build this site. We’ll start off with languages, language plugins, and then general dev tools.
No big surprises here:
jQuery – I think this is a given.
Sass – Sass is a preprocessor for CSS which gives you a bunch of extra neat CSS enhancements such as modular mixins, functions, variables, style nesting, and even conditionals. It’s ruby gem, so it integrates very well with Rails projects.
Compass – Compass is a sass framework that gives you a lot of baseline modules for you to include in your CSS. I use it mostly so I don’t have to write the same style 4 times when all that’s changing are the prefix (incredibly handy for gradients).
Susy – Susy is a sass plugin that gives you grid control over your web page. No longer do you have to worry about floating and clearfixing things yourself, Susy will do that for you (and it makes for very, very easy responsive design).
Nginx – Lightning quick web server to serve up my pages. It’s usually this or apache, and nginx always wins in my book.
Grunt – Grunt is a build automation tool which does so, so much for me. It automatically handles all of my SASS compilation and CSS minification, Coffeescript compilation and JS minification, image minification, and more. If you haven’t looked into a build automation tool before, I highly recommend you look into Grunt. Your productivity will skyrocket.
Image Minification – Not really a tool, but I specifically minified every single image on my site through Photoshop, and further through Grunt’s image min plugin. Just as an example, my home page has over 10 images, and combined with the entire page load including CSS and JS, it’s not even half a megabyte. Without image minification, that could easily top several megabytes. Check out the projects page too – it has almost 40 images and the whole page load is just barely over a megabyte!
Real Favicon Generator – This favicon generator takes a square image that you have and builds out the 20+ favicons that your site needs to look good on every single device. It even gives you several tips and suggestions along the way.
And that’s it! Everything that my site currently runs on has been listed here and in the previous blog post. Hope you enjoyed reading about my tools, and let me know if you have anything else I should be checking out!