CSS Naked Day Gem

What is CSS Naked Day?

CSS Naked Day was started by Dustin Diaz in 2008 and was later hosted by Taylor Satula. It continued in 2020 and I submitted a pull request to update it for 2021 so hopefully that gets approved and merged.

The point is to remove all CSS from your website for 48 hours, on April 9th, to highlight how your HTML is structured. Good HTML should be semantic and have a good hierarchy. In the interest of transparency I did not change the HTML of this site at all in preparation for this event.

Why did I create this gem?

I heard about this event last year but didn’t get a chance to actually participate, so I set myself a reminder for last week. Being a lazy developer I of course sought out an open source solution that would do it automatically for me, but the only two I found were about 10 years out of date and didn’t appear to work with Rails 6.

So I created a helper to do it for me and it seems to have worked. Then the Boston Red Sox went into extra innings two nights ago and I decided to turn that helper into a simple gem so I could help people participate and also write a blog post about it.

What does it do?

It adds a method to ApplicationHelper called css_naked_day? which calculates whether it is April 9th somewhere on earth and returns true if so. This allows you to use it to conditionally remove your stylesheet as well as place HTML that only appears during the event (like the message at the top of this site if you’re reading this on April 9th).

How does it work?

It’s about the most simple gem that’s possible so let’s take a quick look at it because it’s a decent introduction to how to create your own simple gem.

/css_naked_day_rails.gemspec
/lib
  /css_naked_day_rails.rb

The first file sits in the root of the project and defines some basics about how the gem works.

Gem::Specification.new do |s|
  s.name        = 'css_naked_day_rails'
  s.version     = '0.0.2'
  s.summary     = "CSS Naked Day!"
  s.description = "Provides a Rails 6 helper for CSS Naked Day."
  s.authors     = ["Daniel Sellergren"]
  s.email       = 'dss@hey.com'
  s.files       = ["lib/css_naked_day_rails.rb"]
  s.homepage    =
    'https://github.com/danielsellergren/css_naked_day_rails'
  s.license       = 'MIT'
end

The file inside the lib directory is the actual gem code. In most larger gems this would typically be more of a file that loads other files, but in this case I only have one module and one method so I just put it all in that one file. Here’s what it looks like.

module ApplicationHelper
  # CSS Naked Day is supposed to last for 48 hours because it's April 9th
  # somewhere in the world for that period of time. This is the best I've
  # come up with based on the furthest UTC offsets on April 9th.
  # https://css-naked-day.github.io
  # https://en.wikipedia.org/wiki/List_of_UTC_time_offsets
  def css_naked_day?
    css_naked_day = Date.parse('April 9').to_time
    css_naked_day_earliest = css_naked_day.beginning_of_day.utc - 11.hours
    css_naked_day_latest = css_naked_day.end_of_day.utc + 13.hours

    Time.zone.now.between?(css_naked_day_earliest, css_naked_day_latest)
  end
end

As the comment explains, CSS Naked Day is supposed to last for 48 hours for as long as it is April 9th in any timezone around the world. To calculate this I used Wikipedia and I think I got it correct by converting to UTC and using the furthest timezones in both directions.

Usage

Now you can use css_naked_day? as a helper in your views in order to determine whether to load your stylesheets or add some custom text during the event.

<%= stylesheet_pack_tag('application', media: 'all') if !css_naked_day? %>
<%= javascript_pack_tag 'application' if !css_naked_day? %>

<% if css_naked_day? -%>
  <p>It's <%= link_to 'CSS Naked Day!', 'https://css-naked-day.github.io' %></p>
<% end -%>

Conclusion

And that’s it! A baseball game went to 12 innings and I published this very silly gem. Feel free to ping me if you have any questions and please open any issues or pull requests if you feel like contributing.