Atomic Design Patterns, Responsive Design, and Rapid Prototypes

Last week while doing some research I stumbled across a new project from Brad Frost, Pattern Lab. This is a quick and dirty simple framework for facilitating Atomic Design when prototyping out web designs. I was floored as this matched exactly what I was in the middle of needing. I'm currently in the middle of major redesign for an insanely huge site, and one of our deliverables is a Live Style Guide as well as copies of our responsive design prototypes.

Facelift (FLIR) 1.2 now available on github

In the past I've written about Facelift Image Replacement (FLIR), a technology for providing fonts to web pages when visitors don't have the font installed. Unfortunately, the project homepage no longer exists, and the author Cory Mawhorter doesn't seem to have moved it anywhere else.

Since the project was released under a GPL 2.0 license, I've rebuilt version 1.2 (the latest copy I had) from source code within a project I was working on. I've made it publicly available as a repository on GitHub.

Fixing hangs in Drupal Admin on Media Temple Hosting

So a while back, I identified that Drupal can run incredibly slow on MediaTemple's Grid Service. It's otherwise a great hosting plan that I've been very happy with. SSH access, easy to configure with additional domains, scales well. Of course I forgot about this as I did my Drupal conversion, but it looks like there's a fix.

JQuery lockScroll 1.3

Shortly after creating my JQuery LockScroll plugin, I was given a site design to implement that happened to require that functionality. Talk about fortuitous circumstance! However, an extra wrinkle existed in the site design. Not only did an element need to switch states between fixed and scrollable, but at another point while scrolling down the page, it needed to change contents as well. This could easily be achieved by using the LockScroll plugin twice on the element with different offsets... but I needed some way of distinguishing the 3 different possible states caused by doing this. The best way of doing this was by toggling classes, which the plugin now does. Read on for details of what's new.

JQuery lockScroll 1.2.1

I was browsing around, doing some css research, and I stumbled across a really cool effect at When you scroll down the page, the menu and logo stay fixed. Not a big deal, but the metadata for comments pokes out of the main column and risks overlapping the menu. Watch what happens when the comments section and the menu intersect.


Read on to see how I duplicated and enhanced this effect.

Updating XCode and MacPorts for OSX Lion


So, you've upgraded from Snow Leopard to Lion, and you're ready to jump back into development. Watch out! MacPorts and XCode need to be updated! Apple doesn't include XCode in the system updates, so you have to do it manually. If you installed XCode on Snow Leopard, you're probably running XCode 3 (unless of course you bought XCode 4). The latest that ships for Lion is 4.1 and is free. Here's how to upgrade your development environment:

How to Migrate from SVN to Git on OSX

As I'm moving from Snow Leopard to Lion, I'm also in the process of updating my development environment, including MAMP, SVN, Eclipse, and more. I've decided to switch my versioning control from SVN to Git, mainly because Git is easier to work with, especially when it comes to merging, and I've had a lot of messy problems when working with SVN. Read more to see how easy it is to migrate.


Magento Custom Shipping Part 2: Order Handling Fees

So now that we've built the basic framework for a custom shipping module in Magento Custom Shipping Part 1, its now time to move on to the special business logic that my client needs.

My client isn't shipping the usual pre-packaged electronics and other consumer goods you usually find online. Instead, they ship a product priced in standard units of volume. And since shipping is by semi truck, there's a maximum and minimum quantity that can be shipped.

Setting the Maximum and Minimum are fairly easy using the built-in Cart and Product tools from Magento. But now we need to calculate shipping costs. My client's shipping is calculated using this simple formula:

Quantity of Material x Handling Fee (per unit) + Delivery Charge (per region)

The first part of this, the handling fee, is pretty easy. Read More to see how we add the handling charges to our module

Magento Custom Shipping Part 1: Build a Custom Shipping Module

I am developing an ecommerce site in Magento, when I ran into a wall with the built-in shipping system. To be fair, Magento's shipping is incredibly robust, with a lot of add-on plugins to provide any missing requirements. However, like many small businesses, my client has some very unique needs and business logic, which means there is no off-the-shelf solution for their particular scenario. In this case, they needed a custom shipping solution. The product is delivered in bulk by semi truck, and different local delivery areas have different pricing structures. Naturally, hooking into Fedex or UPS shipping systems would not fit the bill.

Read on for a tutorial on how to build a custom shipping module.

Hosting Drupal on MediaTemple's Grid Service

In this, my first screencast, I perform a basic speedtest of a Drupal 7 site on MediaTemple and BlueHost.

Over the years I've been very happy with my hosting provider, MediaTemple. They have some unique product offerings, their documentation is extensive, and their support teams are incredibly helpful. Not only that, but I live just a few short miles from their offices and datacenter, and I love to suppport local businesses.

However, Drupal has some specific needs when it comes to MySQL support, where it appears MediaTemple's Grid Service shared hosting plan is just not up to snuff. This screencast shows the results of my speedtest comparisons as I access the exact same Drupal 7 site installed on both MediaTemple and BlueHost.