Better Text Replacement with CSS

2 comments

There are several methods for rendering non-web fonts (eg. Cufón and sIFR). Both are tedious to set up and implement. The easiest alternative is the good old image-instead-of-text trick, but that's not good for SEO, even with alt tags.

There is a way to have SEO text AND use an image as the text. With a little CSS trickery, you can easily achieve the desired effect. Worth noting, however, is that this method is really only good for non-dynamic, fixed width text (such as headings). It's not practical for blocks of text.

The first thing you need is an image for the text you want to replace (and yes, I'm using Comic Sans):

Now for the html code that we'll be working with:

<h1 class="replace heading">My Heading</h1>

The CSS does all the work.

.replace {
  display:block;
  height:0;
  overflow:hidden;
  font-size:0;
  letter-spacing:-1em;
  text-indent:-1000em;
}
.heading {
  width:135px;
  padding:26px 0 0 0;
  background:url('/images/custom_header.png') no-repeat 0 0;
}

First, we make the h1 virtually invisible via CSS by assigning a height and font-size of 0. Then we make sure it's invisible in all browsers by setting the letter-spacing and text-indent. The heading class has a top-padding which creates just enough space to show the image, which we set as the background. Super easy and effective!

You'll notice that I made two classes. I use the replace class as a global for the styles that are common to all replaced text, then the heading class has the unique styles.

Tagged: css, text replacement, tutorial

Twitter Gem Examples

1 comment

I recently set up a Twitter account for a monthly bill and task tracking application that I built a few months back. My intent was to try and drive traffic to my site (which had been sitting unused by the general public). To do this, I decided to mass-follow around 350 accounts in hopes of having them follow me back and checking out the site. It worked pretty well, and I even had quite a few users cold follow the account. At first, I would follow the users that followed me when I got the notification from Twitter. After a few days, I got a little behind and the followers started to build up. I figured this would be a good time to check out the Twitter gem to see if I could automate some of my tasks. The gem had exactly what I needed: a way to talk to Twitter via Ruby. I've included below two of the tasks that I created to work with my Twitter account.

First things first, I needed to set up my authentication. To do this, I just created a YAML file in my home directory called .twitter that contains my user email and password. The . means that it's a hidden file (I'm on a Mac). The YAML file is extremely simple, and looks like this:

email: my_twitter_email
password: my_twitter_password

Now, I could use this YAML file for any of the scripts that I wrote.

Task #1: Follow Users Who Follow Me

I wanted to get a list of all my followers and check to see if I'm already following them. If I'm not, I want to create a friendship with them.

#!/usr/bin/env ruby
require 'rubygems'
require 'twitter'

config = YAML::load(open("#{ENV['HOME']}/.twitter"))

httpauth = Twitter::HTTPAuth.new(config['email'], config['password'])
base = Twitter::Base.new(httpauth)

base.followers.each do |follower|
  if !follower.following
    # make sure to rescue in case there is anything wrong with the account
    base.friendship_create(follower.id, true) rescue next
    puts "Created friendship with #{follower.screen_name}"
  end
end

Task #2: Stop Following Users Who Aren't Following Me

I followed about 350 accounts initially, and after about a week, I figured that if they weren't following me by then, they'd probably never follow me. So, since I'm all about reciprocation, I decided to stop following them.

#!/usr/bin/env ruby
require 'rubygems'
require 'twitter'

config = YAML::load(open("#{ENV['HOME']}/.twitter"))

httpauth = Twitter::HTTPAuth.new(config['email'], config['password'])
base = Twitter::Base.new(httpauth)

base.friends.each do |friend|
  if !base.friendship_exists?(friend.screen_name, 'listode')
    base.friendship_destroy(friend.id)
    puts "Destroyed friendship with #{friend.screen_name}"
  end
end

A Quick Note

Keep in mind that, unless you've been white-listed, your account is limited to 100 API calls per hour. That shouldn't be an issue with the first script, since it only makes one call to get the list and one call for each friend creation. You should stay below the cap (unless you have more than 100 followers who you aren't following).

The second script is a different story. It makes one call to get the list of friends, one call for each friend to check following, and one call to destroy the friendship if they aren't following. This can easily burn up the API limit if you have more than 100 friends. I haven't figured out a way to reduce the number of API calls for that script. If you have any tips, leave them in the comments.

Tagged: twitter, tutorial, ruby