You can find all the stylesheets in a document:

page = Stylesheet::Document.new("http://sportspyder.com")
page.style_sheets
=> [#<Stylesheet::CssStyleSheet:0x007ff99da462a0>, 
#<Stylesheet::CssStyleSheet:0x007ff99da44ae0 >, 
#<Stylesheet::CssStyleSheet:0x007ff99da44018>]
 
stylesheet = page.style_sheets[0]
 
stylesheet.media
=> "screen"
 
stylesheet.href
=> "http://sportspyder.com/assets/application-26ff2c8d54ab9cd8e74af60fc650390e.css"

You can find the rules, and selectors on a stylesheet:

rule = stylesheet.css_rules[0]
=> #<Stylesheet::CssStyleRule css_text:#user_box .post_body .left{width:53px}>
 
rule.selector_text
=> "#user_box .post_body .left"
 
rule.css_text
=> "#user_box .post_body .left{width:53px}"
 
rule.style[0]
=> "width:53px"
 
rule.style.width
=> "53px"

To install:

gem install stylesheet

Or add to bundler:

gem "stylesheet", "~> 0.1.0"

I’ve done a write-up on the new changes on the SportSpyder Blog.

To try it out, download it from GitHub, install the gem dependencies, and start it up.

bundle install
ruby app.rb

The CSS Buttons project uses pure CSS to replicate the buttons from the Custom Buttons project, and is tested in IE9+, Safari, Firefox, and Chrome.

The markup is similar to the custom_buttons project,

The markup for styling a <button>:

<button type="submit" class="button large_button">Submit</button>
<button type="submit" class="button large_button primary">Submit</button>
<button type="submit" class="button large_button disabled">Submit</button>

And the markup for styling an <a>:

<a href="#" class="button large_button">Submit</a>
<a href="#" class="button large_button primary">Submit</a>
<a href="#" class="button large_button disabled">Submit</a>

The result from the examples:

Get the code on GitHub.

Tweet timestamp should be displayed in the top right corner.
For Tweets that have been sent in the last 24 hours, use the short form timestamp relative to the current time, for example “20s” for a Tweet sent 20 seconds ago, “3m” for 3 minutes ago, “5h” for 5 hours ago.
Tweets older than 24 hours should show a short form date including the day and month, e.g., “6 Jun”.

I’ve created the Tweet Date Format project on GitHub which currently has an Objective-C NSDate category for formatting to the tweet timestamp, and a Rails helper for doing this as well.

Enter to the Color Parser Ruby Gem. This gem lets you pass in a website’s URL, and the script will parse out the stylesheets to find the colors used in the page:

For example, to get the colors on google.com:

page = ColorParser::Page.new("http://google.com/")
page.colors
=> {"ffffff"=>5, "c9d7f1"=>1, "0000cc"=>2, "dd8e27"=>1, "990000"=>1, 
    "3366cc"=>3, "000000"=>2, "1111cc"=>5, "cccccc"=>2, "551a8b"=>1}

This gives us the number of occurrences of each color in the styles.

To install:

gem install color_parser

Or add to bundler:

gem "color_parser", "~> 0.0.2"

1. Always seed

We wipe out and reload this seed data multiple times in a application’s lifetime. A good example of this in SportSpyder is the list of sports such as MLB, NFL, etc. This data is never modified by the application itself, and is essentially read-only. If we want to add a new sport, we can wipe out and reload the seed data for the table without repercussions.

2. Seed once

We seed this data to the table only once. A good example of this is inserting an application’s first Admin user. After seeding the initial data, the application takes over modification and maintenance of the data in that table. You would never want to reseed the table at a later time since this would wipe out additional data added by other means.

3. Development/Dummy data

This is dummy data that we throw into an application to check out how things look before we go live with real content in the application.

Loading the data

Lately I’ve tossed aside test fixtures in favor of using FactoryGirl for testing, but I find yaml files work fine for most seed data (as long as there isn’t too much of it.) You could probably incorporate this idea into object based seeding options as well.

To handle the three different types of seed data, we create a few subdirectories within db/.

mkdir -p db/seed/always
mkdir -p db/seed/develop
mkdir -p db/seed/once

In here we put YML based fixture files with the data we want to load. One thing to remember is that you probably want to manually specify the ids instead of relying on foxy fixtures. You don’t want your id column starting at numbers like 237252458.

We then add a new file named lib/tasks/db.rake with the following tasks:

require 'active_record/fixtures'
 
namespace :db do
  desc "Seed the database with once/ and always/ fixtures."
  task :seed => :environment do 
    load_fixtures "seed/once"
    load_fixtures "seed/always", :always
  end
 
  desc "Seed the database with develop/ fixtures."
  task :develop => :environment do 
    load_fixtures 'seed/develop', :always
  end
 
 
  private
 
  def load_fixtures(dir, always = false)
    Dir.glob(File.join(RAILS_ROOT, 'db', dir, '*.yml')).each do |fixture_file|
      table_name = File.basename(fixture_file, '.yml')
 
      if table_empty?(table_name) || always
        truncate_table(table_name)
        Fixtures.create_fixtures(File.join('db/', dir), table_name)
      end
    end
  end  
 
  def table_empty?(table_name)
    quoted = connection.quote_table_name(table_name)
    connection.select_value("SELECT COUNT(*) FROM #{quoted}").to_i.zero?
  end
 
  def truncate_table(table_name)
    quoted = connection.quote_table_name(table_name)
    connection.execute("DELETE FROM #{quoted}")
  end
 
  def connection
    ActiveRecord::Base.connection
  end
end

And that’s it. You can now seed your data by running:

rake db:seed

And insert development/dummy data with:

rake db:develop

While localizing software, I found the need for a better solution for styling buttons. My requirements were:

1. Consistent CSS based buttons for both <button> and <a> elements.
2. Active, hover, primary, and disabled button states.
3. Compatible and consistently in IE6, IE7, IE8, Firefox, Safari, and Chrome.
4. Semantic markup.

I found a few blog posts that cover some (or most) of these requirements, but none of them seem to cover them all. Most concentrate on either the button or anchor tag, but not both.

I’ve created a GitHub project — custom_buttons that contains XHTML, CSS, and images for buttons to do it all. There are two different examples — a round button, and a more rectangular button. The code takes advantage of the sliding doors technique so that the button expands to fit the size of the text.

The markup for styling a <button>:

<button type="submit" class="button large_button"><span>Submit</span></button>
<button type="submit" class="button large_button primary"><span>Submit</span></button>
<button type="submit" class="button large_button disabled"><span>Submit</span></button>

And the markup for styling an <a>:

<a href="#" class="button large_button"><span>Submit</span></a>
<a href="#" class="button large_button primary"><span>Submit</span></a>
<a href="#" class="button large_button disabled"><span>Submit</span></a>

The result from both examples:

In my examples I use the “large_button” and “rect_button” classes to differentiate between multiple button styles that use the same technique. If you only require a single button style, you can probably get away with simplifying the code to just use class="button".

A lot of this code is based on content in the following articles (and their helpful comments):

How to make sexy buttons with CSS
Recreating the button
Rediscovering the button element
Styling the button element with sliding doors