Archive for April, 2008

Homer Simpson CSS (Animated) = AcidX

Wednesday, April 30th, 2008

Thanks to Chris Coyier from CSS-Tricks for pointing out this little ditty….from Román Cortés.

Below is a screenshot of the infamous character Homer Simpson, created from CSS.

Homer CSS - AcidX

I look forward to seeing more “AcidX” variations in the future — the successor to CSS Zen perhaps?

For those interested, the “acid tests” are available at acidtests.org: an effort to provide a litmus test for W3C and standards compliance among browser makers with respect to CSS (acid2) and CSS/JavaScript (acid3).

Update: Checkout the animated version of Homer CSS…and the George Bush CSS.

VN:F [1.8.4_1055]
Rating: 0.0/10 (0 votes cast)
VN:F [1.8.4_1055]
Rating: 0 (from 0 votes)

How “CSS Naked Day” became “Un-usable Day”

Friday, April 11th, 2008

For those who don’t know, “CSS Naked Day” is once a year, where design-related bloggers remove their CSS files for the 24 hour period starting April 9th.

I got a little frustrated yesterday, having to redesign tabs for work while looking for resources on a good two-layer tabbed navigation, many of the sites that usually have good examples were “Naked” yesterday.

At this moment I realized “CSS Naked Day” went against good usability practices that state your site should be accessible and usable. Looking for sites that normally would have been great resources for HTML and CSS became rather impossible to see the examples.

I decided not to remove my CSS files I wouldn’t have had an alternative of allowing CSS to be enabled. Wordpress has a CSS Naked Day plugin — I suggest that perhaps an alternative link at the top of the page that says “Enable CSS” would suffice with a brief explanation of why the original design is missing in the first place.

VN:F [1.8.4_1055]
Rating: 0.0/10 (0 votes cast)
VN:F [1.8.4_1055]
Rating: 0 (from 0 votes)

Sorting and Ordering in Rails

Tuesday, April 8th, 2008

Example 1: Writing your own sort routine

I originally tried ’sort_by’, but that only works for existing attributes and apparently in only one direction.

My ‘is_default’ attribute is setup as a boolean and is almost always false, except where I define an image as being the default for a given product.

Converting a boolean to a string and then sorting alphabetically in reverse order is not something I liked nor recommend, but it was the first thing that I got working.

The Admin helper:

module AdminHelper
  def sort_my_pictures(pics)
    pics.sort {|a,b| b.is_default.to_s <=> a.is_default.to_s }
  end
end

The view:

<% sort_my_pictures(product.pictures).each do |pic| %>
  <%= pic.title %>
<% end %>

Example 2: Define your own sort method available from the object instance

Defining a method on the model itself is was an improvement over Ex. 1, but still rather cumbersome to have to call it everywhere to get the sorted list of pictures. Definitely starts to break the DRY principle.

I like this method as an alternative because it can be a convenient way to override default sorting as defined in Ex. 3.

The Picture model:

class Picture < ActiveRecord::Base
	def self.sorted_another_way
	  find(:all, :order => 'created_at DESC, title DESC, filename ASC')
	end
end

The view:

<% product.pictures.sorted_another_way.each do |pic| %>
  <%= pic.title %>
<% end %>

Example 3 (best): Define the ordering when declaring the relationship

I was positive there was a one-liner to do what I wanted, but could not figure out how to word my question or search to reflect what I needed.

FYI: “How do I define the order when declaring a has_many relationship between models with Rails?” would have worked well. Hindsight is 20/20.

The convenience of MVC is starting to come to light!

The Product model:

class Product < ActiveRecord::Base
	#the clear winner
	has_many :pictures, :order => 'is_default DESC, title'
end

The view:

<% product.pictures.each do |pic| %>
  <%= pic.title %>
<% end %>
VN:F [1.8.4_1055]
Rating: 3.5/10 (2 votes cast)
VN:F [1.8.4_1055]
Rating: +1 (from 1 vote)