19 May 2012
Mobile development doesn't have to be hard. That's why I created my latest project - Cheeky.css, a grid system that makes building responsive sites a breeze. It's more important than ever to create mobile-friendly sites, but defining a separate version or stylesheet just for handhelds is a pain. With Cheeky, you only have to style your page once, and your content will automatically scale to fit the browser width.
Using Cheeky
If you've used any grid before, the syntax will be very familiar. Cheeky is based off an 1100px grid with 16 columns contained in rows. 16 is an arbitrary number, but combined with familiar column offsets, you have the freedom to structure your content exactly how you like. To get started, everything is unsurprisingly contained in a <div class="container">. From there, you lay out your columns inside a <div class="row">, 16 to a row. Columns are defined using the syntax <div class="span-#">, where # is any number between 1 and 16. Offsets are almost identical - just toss on a class="offset-#", except that you can only offset up to 15. Let's take a look at the bare minimum example:
Full Post »
12 May 2012
I recently stumbled across mailcheck.js, a little jQuery plugin from Kicksend that suggests domains based on common typos in email forms. For example, 'user@gnail.co' will generate a suggestion for 'user@gmail.com'. It's perfect for preventing errors in user signups, and the authors claim its reduced their email bounces by 50%. After playing around with it, I've decided to bundle it into production for most, if not all of my projects, and this is just a brief demo of what can be done with it.
Getting Set Up
Our goal is to create a simple display that shows email suggestions to the user and offers a way to automatically fill in the field with the suggestion. If you want to play with the end result before we dive into the details, I have a simple demo set up here.
The plugin is used in two steps - first, it has to be attached to a text field, and then you have to actually do something with its suggestions. Let's get the basic JavaScript structure set up (make sure you include the actual plugin on your page as well!)
<input id="email" type="text" placeholder="Email">
<div id="hint"></div>
var $email = $('#email');
var $hint = $("#hint");
$email.on('blur', function() {
$(this).mailcheck({
suggested: function(element, suggestion) {
}
});
});
The setup is only a few lines, although it's important to understand what's going on. Our HTML is fairly straightforward - we start with a generic input that we'll be using the plugin on. The <div id="hint"> is an initially hidden div that will contain our suggestions to the user. In our JavaScript, we're first sticking jQuery objects into variables for convenience. Then we're attaching the mailcheck() function to our email field on its blur event, which is called whenever the element loses focus (i.e., the user moves on to the next field). Mailcheck takes two callbacks, suggested() and empty(). suggested() is called whenever a suggestion is available for the field, and empty() whenever the field is left blank. We'll only be using suggested() in this demo, although depending on how you use the plugin it's generally a good idea to use both.
Full Post »
2 May 2012
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!
Full Post »
3 Mar 2012
Take a look at that picture for a second or two. If you can tell me at a glance what absolutely any of that does, that you are a much smarter person than I. (Or a producer. One of the two). That's a screenshot from the popular Reason audio software, and in my opinion it's an absolutely terrible design. At a glance, it's cluttered and non-intuitive, and non-functional elements waste space on the green. Its design is governed by something called a skeuomorph, an extremely prevalent concept in digital interfaces.
Full Post »
21 Feb 2012
I interact with two computers on a daily basis. I have a desktop and a laptop, both running Windows. My desktop is a stock Vostro 430 - I haven't done much in the way of customizing the hardware, so it's no powerhouse, but it's capable. The selling point is the monitors, two 24-inch beauties I've acquired over the course of a year or two. On the other hand, my laptop is a wee Vostro V13 (notice a trend?). The hardware is minimal, and the screen is only 13 inches. I bought it primarily for taking notes once I got to college- I didn't expect to use it for much else than notes or the occasional trip, which is why I was surprised when I realized I was doing most of my coding and development on my laptop. After all, I'm a sucker for screen real estate, and here I had the ideal work desktop setup! Big monitors, a nice keyboard, and a great mouse. So why was I doing all my work on my laptop?
Full Post »