I'm happy to unveil a much needed makeover for andrewberls.com! I've learned a huge amount since I first started this site what seems like forever ago, and I figured it was time to update the site to reflect that.

The process began with a much needed migration to Heroku's Cedar stack. Cedar is the successor to the previous Bamboo runtime stack on which my old site was deployed, and the migration was actually surprisingly easy with the help of this Dev Center article. Theoretically, Cedar offers all sorts of cool things such as a process model and 'Twelve-factor methodology', but the most important thing for me is support for Rails' 3.1 asset pipeline. This means that I can take full advantage of Sass and CoffeeScript, and easily serve up concatenated/compressed assets in production.

My favorite part is that the new site is fully responsive, thanks to a tiny grid framework I wrote called Cheeky.css. Syntactically, Cheeky is very similar to other grid frameworks in that you contain content in rows, with 16 columns available for positioning. Once you've defined spans and offsets, Cheeky uses responsive media queries to automatically scale the page as the browser resizes. I'll write more about Cheeky later, but in the meantime you can read more about it here. Check it out - try resizing your browser on this page!

Tips and Tricks

I'm currently using Eric Martin's Simple Modal jQuery plugin for the modals on the front page. I've only played around with it a little bit, but it's been super easy to use and I recommend it.

I also made a new discovery - I'm convinced that box-sizing: border-box; is the best thing to ever happen to CSS. In the traditional box model, padding adds to the rendered width of an element. This can be confusing sometimes, as elements are wider than their declared widths. This is especially an issue if you want to add padding to an element of width: 100%. In the normal, or content-box box model, the element will actually break outside of the parent. Enter box-sizing: border-box! Elements with this property declared will render with their declared width, and padding/borders will cut inside the box. Now you can add padding to elements without breaking a grid layout, or have 100% width form inputs with padding but without ugly hacks!

Let's take a look at a very basic form example: 

<!-- The HTML -->
<form class="contact-form">
  <input type="text" placeholder="Name">
  <textarea placeholder="Enter your message"></textarea>
</form>

/* The CSS */
.contact-form { padding: 20px; }

input[type="text"], textarea {
  /* The magic bit! */
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

  margin-top: 15px; /* Space things out a bit */
  padding: 5px;
  width: 100%;
}

And now you'll have beautiful inputs with padding that fill the content area! Hooray! We're using the [type="text"] selector here in order to exclude [type="submit"]. Note that this is also using the placeholder attribute, a neat HTML5 feature.

To wrap things up, border-box is a property that can make the box-model a lot more intuitive. However, I'm still wary of using a rule like * { box-sizing: border-box; } as described by Paul Irish, and one has to keep in mind that browser prefixes are still necessary, so this should be reserved for projects supporting IE8 and up.

What's next

Now that things are nice and pretty on the front end, I plan to dive in and rewrite the blog engine that powers this site. I wrote it when I was first learning Rails, and there's much to be done in the way of refactoring and cleaning up my first attempt. I'll likely be taking a lot of inspiration from Nate Wienert's Obtvse project. As always, all the code is open source over at GitHub. I'd love to hear any ideas or criticisms!