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 →

Why frameworks make me cranky

Violin

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 →

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 →

Place text over images on hover without JavaScript

Thanks to CSS3 and better and better browser support for it, we can accomplish things now with CSS that previously required fancy JavaScript work. In this tutorial, I’ll walk you through fading in text over an image on hover. Continue reading →