Avert Your Eyes, I'm Naked

If you happened to find your way on to my site today (April 9th), you might have noticed something a bit odd. That's because today is CSS Naked day. This is the fifth year for the event which aims to promote web standards through semantic markup. I've known about it for a couple of years but have never participated. This year I decided to give it a go.

My site is Plone powered, so I was able to quickly make all the necessary changes through the web. I had planned on making a quick product, but laziness prevailed and the time had already arrived. With that premise, I just used the evil custom folder and friends to go naked.

First I added a quick (script) Python into my custom folder named isNakedDay. Zope's DateTime module makes this pretty easy:

   # The current time in GMT
   now = DateTime().toZone('GMT')
   # Dynamically get the year so this would work next year as well
   this_year = now.year()
   naked_date = DateTime('%s/04/09 0:01 GMT' % this_year)
   # CSS naked day starts 12 hours before GMT
   naked_start = naked_date - 0.5
   # CSS naked day ends 36 hours after GMT
   naked_end = naked_date + 1.5
   return naked_start < now < naked_end
   

As the website points out, CSS Naked Day is actually two full days once you take into account all the time zones. The code above handles this with some date math.

In Plone's CSS registry, you can add conditions on each of the CSS files. In all the public facing CSS entries I added the following TALES expression:

   not:portal/isNakedDay

I also added a warning at the top of the page so people don't think my site is broken. This was achieved quite simply by throwing the main_template into the custom folder then adding the following just above the visual-portal-wrapper:

   <tal:naked define="portal context/@@plone_portal_state/portal"
              condition="portal/isNakedDay">
     <hr />
     <h3>What happened to the design?</h3>
     <p>To know more about why styles are disabled on this website visit the
     <a href="http://naked.dustindiaz.com" title="Web Standards Naked Day Host Website">
     Annual CSS Naked Day</a> website for more information.</p>
     <hr />
   </tal:naked>
   

Now the site is properly naked. Since the isNakedDay script will run a bunch of times on each page load, I added it into the RAMCache via the Cache tab on the script object. The RAMCache defaults to one hour, so that works out perfectly. Plone FTW!