What This Site Runs On – Part 2


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.

Languages

No big surprises here:

  • HTML5
  • CSS3
  • Javascript
  • PHP

Language Plugins

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).

Skrollr – Skrollr is a javascript parallax plugin. I use it largely on the about page, but you can see it on every subpage header, and the home page. Very, very easy to use, given how powerful it is.

Sidr – javascript plugin for the responsive nav. Don’t know what I’m talking about? View the site on a tablet, phone, or just shrink the screen down and see how the nav changes.

Typed.js – javascript plugin for the typing animation that you see at the top of the home page. It’s a really cool effect, and the plugin is really simple to use.

Magnific Popup – javascript plugin for the lightbox functionality – you can see this on my projects page. Lightboxes allow you to show thumbnails on your page which are much smaller in size than the real image itself; this allows you to have a speedy page load and only load your images when the user shows they want to see them. It’s responsive by default, and, yup you guessed it, very simple to use.

Dev Tools

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.

Vim, Zsh, and Tmux – I won’t explain these since they’re not related specifically to this site, but these 3 tools alone keep me incredibly productive.

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!