Five Sass-y tricks to impress your friends


I am not ashamed to tell you that I was really reluctant to try Sass.

When you’ve been doing front-end development as long as I have (20 years this August), you know that there are new tools and techniques made available on an almost-daily basis. Most of them are fleeting at best, so I tend to wait until it looks like something is gaining some traction before I take the time to try it out.

But Sass won me over on the very first project I put it to work on and I’ve used it on practically every project since. Along the way, I’ve picked up some clever tricks that make life easier and development faster.

Here’s a small roundup of some of my favorites. Enjoy! Continue reading

Creating interactive image maps in WordPress


Last year, I created a website for a client to showcase their new building. We wanted to make it easy for site visitors to explore the new areas of the new building while also making it easy for the client to update the building information.

The only materials available to us were the architect’s plans and renderings for the new building. We created an interactive floor plan where site visitors can click on different areas of the building to get more information. Continue reading

jQuery for Designers and a weekly screencast!


book-coverI’m pleased to announce that after months and months of writing and editing that the 2nd edition of jQuery for Designers is now available!

Even if you’ve already got the 1st edition sitting on your bookshelf (thank you for that, by the way), you’ll want to check out this updated edition because it’s a huge update. I’ve added in new chapters on responsive design, creating charts and graphs, working with images, and parallax and other scrolling effects.

I’m really proud of how well it’s turned out. I literally combed through each and every code snippet and made sure it was updated to use the latest and greatest from the jQuery library. I removed references to any outdated or abandoned plugins and subbed in updated plugins that are being actively maintained. Continue reading

How I beat writer’s block


In today’s episode of the WP Unicorn Project, Suzette and I were lucky enough to speak with Jennifer Bourn about content strategy. We spoke a little bit about techniques for overcoming writer’s block, and I wanted to share mine. It’s call free writing.

I learned this technique in a writing class in college. You get three pieces of paper, a pencil or a pen, and a timer. Set the timer for 15 minutes, then scribble furiously as you try to fill all three pages full from top to bottom in 15 minutes with your writing. No stopping to think, no pausing, no editing.

You might be thinking, “But if I have writer’s block, what am I going to write?” Well, if nothing comes to mind, then just start writing “I don’t know what to write. I don’t know what to write. I don’t know what to write.” Continue reading

Responsive sticky footer woes and fixes


Over the years, I must have used about a dozen different approaches to coding up a sticky footer, with varying degrees of success. I recently stumbled upon an elegant CSS3 solution and immediately put it to work on the theme on this site. But then I discovered some problems. Here’s how I fixed them.

What’s a sticky footer?

Alright, let’s say you’ve got a design that involves a big, chunky footer like the one on this site. If you have a page or a post that’s light on content, maybe just a few lines (like my contact page) and your site visitor happens to have a tall browser window, you don’t want that big footer hanging out in the middle of the screen. You want it down at the bottom of the browser window.


That is the art of coding a sticky footer. Continue reading

Why frameworks make me cranky


The past few years have been witness to an explosion of frameworks and libraries: CSS frameworks, WordPress theme frameworks, JavaScript frameworks, PHP frameworks…frameworks for just about any language you might want to write code in.

On one hand, this is great. As developers, we tend to solve the same problems over and over again. It makes sense to take advantage of code that’s already written that solves the problem we’re solving right now. On the other hand, it’s so easy to become over-reliant on frameworks. It’s so easy to solve every issue by looking for a a bit of code somebody else already wrote to solve our problem. Continue reading

Eight tips for improving responsive typography


Don’t underestimate the importance of well-done typography in making a website appear more professional, polished, and just plain nicer. But in the world of responsive design, we need to have a few extra tricks up our sleeve for accomplishing gorgeous web type. Here are eight things you can do to improve typography in your responsive designs: Continue reading

Animate text over images on hover without JavaScript


A couple of months ago, I published a tutorial showing how to show text over images on hover without using JavaScript. When I presented to an HTML5 Meetup Group a couple of weeks ago, I took that idea and ran with it, adding some extra special animations, and I’ll show you how to do it too. Here’s what we’ll be creating:

There are three animations happening simultaneously when you move your mouse over each image:

  1. A zoom effect on the image itself, created by scaling the image up 140%
  2. The text and its transparent black background fading in
  3. The text dropping in from the top

You’re free to use all of the animations or to remove 1 or 2 of them – it all depends on how you’d like your final product to look. Let’s take a look at how to accomplish this. Continue reading

How to Create an Alphabetical Index of Posts in WordPress


About a year ago, I was handed a design comp from a designer that required me to build out an alphabetical index for a custom post type in WordPress. You know, something like this:

WP Alpha Index

…where clicking on one of those letters would take you to a page showing only posts with titles starting with that letter. I managed to cobble together a solution that works pretty well. Not great, but passable. It involved writing quite a few custom functions – one to generate that bunch of links you see in that image above, one to register a query parameter so I could use it in WordPress, and then a few more functions to do the right queries in the database, a bunch of code in the template to make sure I was showing the right posts…and on and on. Continue reading