Have you ever opened up your terminal in OS X and seen this message in your prompt? Last login: Tue Sep 5 13:52:44 on ttys008 You have mail. What mail? Where? Your computer has a simple mail system that it has set up that can, on occasion, try to send you messages.…
A quick, but super useful tip, if you’re spending a lot of time creating tags in Google Tag Manager on click events.…
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).…
This last of three posts about IcoMoon is going to cover just a few tips and tricks to get the most out of IcoMoon. Some involve the app itself, some are more to do with implementation. Let’s get to it!…
In part 1 of this series, I talked about how to get up and running with IcoMoon, generating an icon font, and using it.
In this second post, I want to get into the workflow that I’ve figured out that makes working with icon fonts a lot of fun.…
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:
- How to use IcoMoon at a basic level
- How I’ve used it in a workflow
- Share some ninja-level tricks to really get the most out of it
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=""></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.…