The Making of PuppetConf.com
June 19th, 2013 by Gage Pacifera
I’ve been spending the majority of my on-the-job hours for the past several weeks working with Puppet Labs to launch a site for the annual PuppetConf conference. We launched the speakers page a few weeks back and today we’re unleashing the schedule page. We still have a lot of work to do before we call it complete*, but I think it’s far enough along to start showing off. Check it out on all your devices at:
In this post I want to talk about some of the awesome tools we’re using to make this site happen. I discovered some cool new resources working on this project and made use of other notable oldie-but-goodies.
* Note: in my experience, web sites are never really complete. They evolve over time with new content, new features, redesigns, rebranding, etc. When talking about web sites, I’ve learned to always take the term “complete” with a grain of salt.
Foundation Framework
I am a big fan of Zurb’s Foundation framework. I started using it on this project to assist with responsive layouts and it’s really really awesome. Foundation uses a system for setting up grids with variable width columns that vary based on browser window width. You can easily show/hide elements, stack elements, offset from left or right by proportional amounts and do all sorts of other basic responsive behaviors using their system. It’s pretty easy to jump in and start using and robust enough to handle most of the situations you run into trying to accommodate various screen sizes. This is going to be a go-to framework for my projects going forward.
Box-Sizing
The Foundation framework introduced me to the wonderfully magical box-sizing CSS property. Setting this property to “border-box” turns the usual CSS box model on its head. Instead of having to account for the total widths and heights of your DOM elements being width + padding + border, the border-box method takes care of that for you, adding all those together to equal the width and height values you set. This has a lot of implications for simplifying HTML and CSS code and I’m particularly stoked about using it to streamline CSS for form elements.
Advanced Custom Fields
I’ve already written about this essential plugin, so I won’t go into too much detail here. ACF has become a staple of my WordPress development process, giving users a really slick user interface for entering custom data and giving developers well-documented, flexible access that data on the back end.
MAMP
I have been slowly migrating my projects on my personal dev machine from the default Mac webserver to a MAMP server. I realized this was probably a good idea after the latest Mac OS upgrade broke all of the sites on my dev box and after spending way too much time searching for basic info like the locations of config files and error logs. MAMP is self-contained, has much documentation on the interwebs, simplifies transferring dev sites between computers and makes it easier to work with other developers using MAMP.
GitHub
This one is a no-brainer. We’ve been using GitHub to store site changes, then pushing those changes to a staging server and the live server.
HipChat
HipChat is a cool chat room style communication tool that allows for file sharing and storing conversations. I’ve only used it as a guest, but I plan on signing up for a paid account and looking at it more in-depth. I think it could be particularly useful for facilitating communication for the school and community projects I’m volunteering on.
Placehold.it
Placehold.it is a simple online tool that I used to insert dynamically generated placeholder images into pre-production versions of the site. Super handy.
WP Debug Bar
I wish that I had learned about this tool a long time ago, it would have saved me time fixing WordPress database-related issues. The WP Debug Bar shows you contents of queries that WordPress is making, WP installation settings and other helpful debugging info. This tool helped me resolve a bug that was happening on the live version of the site that I couldn’t reproduce locally.
JQuery Background Resize
This plugin was helpful for dealing with scaling background images properly in <IE9. The implementation on PuppetConf isn’t great due to some complex JavaScript/CSS interactions, but I’d definitely use this plugin again as a patch for old IE’s woeful CSS background image rendering.
Tictoc
I am a forgetful person. Anything I can do to reduce reliance on information stored in my brain is a good thing. I started using tictoc to relieve myself of the burden of trying to remember how many hours I’m putting in on projects throughout the day and so far it’s worked great. Start working on a project, hit Start on the timer. Stop working on a project, hit Stop. At the end of the day/few-days/oh-my-god-it’s-been-a-whole-week-and-I-haven’t-entered-my-time-yet I can easily see how many hours I’ve worked without having to dig through my unreliable memory, traverse mountains of emails, scrutinize GitHub commits, etc. One feature in particular I like about this app is that when I forget to hit Stop on the timer when I leave for my lunch break, it gives me a prompt when I return to set the timer back to when I was last active. The program integrates nicely with the Mac toolbar and is available in the mac store for $5. I’ve run into a little bugginess here and there, but it has a nice interface and keeps time reliably and that’s really all I’m looking for out of it.