Chip Cullen

Front End Testing with Wraith: A Step by Step Recipe

I had occasion to finally get to one of my goals from last year - and that was to introduce some testing to my front end development.

My goal was to have a way to have a before/after visual regression test. The open source Wraith project, from the BBC, fits the bill wonderfully.

This post is merely meant to be a step-by-step procedure to get Wraith up and running. I’m not going to provide any context to what each step means.

First off, this post assumes that you’re running Mac OS X, and already have Ruby installed. This post also assumes that you want to use the “history” mode in Wraith - where you are taking two snapshots of the same URL. (The “standard” mode requires two different URLs).

Keep reading Front End Testing with Wraith: A Step by Step Recipe

How to use IcoMoon and Icon Fonts - Part 1: Basic Usage

Note: This post was updated on December 18th, 2013, to use new screenshots that show the recent redesign to the IcoMoon App.

I’ve become a huge fan of using icon fonts recently. I love the fact that graphics elements that are implemented this way are vector based & stylable with CSS. It makes them really easy and flexible to work with.

One of the things that you will have to confront, though, is how to actually get an icon font that you can use. That is where IcoMoon comes in. It is an online service that lets you generate a custom-built icon font, using icons that are either open licensed or for-pay.

I’ve used IcoMoon on a couple of projects lately, and wanted to share what I’ve learned. I’m going to break this into three seperate posts:

Keep reading How to use IcoMoon and Icon Fonts - Part 1: Basic Usage

Using icons from icon fonts directly in CSS

I’ve become a huge, huge fan of icon fonts lately, for reasons well enumerated elsewhere.

However, in learning how to use them, I had to rethink how I wrote markup. For years, I’ve been using background images via CSS for the kinds of visual elements that I now wanted to use an icon font for. That meant actually inserting HTML elements for the icons - and not relying on CSS alone. I would need to insert something like:

<span aria-hidden="true" data-icon="&#xe014;"></span>

That means more verbose markup, but is something I can live with.

The bummer is when you’re in a situation where inserting new markup is either impossible or at least very painful. I’m thinking of things like manipulating the menu markup generated by a CMS (e.g. it can be a royal pain in Drupal).

What I discovered is that you can insert an icon, using an icon font, purely in CSS. It just takes a little advanced CSS and a special re-writing of the icon unicode characters for the icon.

Keep reading Using icons from icon fonts directly in CSS