Minimizing CSS Files with Ruby
Monday, January 18 2010
I've been using YSlow a good deal lately to attempt to wring out every last ounce of speed from Department of Numbers. I'm not sure if this is the best investment of my time or not, but it is a strangely satisfying task. I've heard that Google may be considering factoring page speed into their ranking algorithms, so I guess that's how I justify expending the effort to try to win these infinitesimal performance gains.
So as YSlow recommends, I decided I'd consolidate and compress DoN's css files to both limit the number of HTTP requests and return the smallest file possible. I grabbed the Ruby css compressor Rainpress and ran my css files through it. While I did get a noticeably smaller file this way it also became quite difficult to read. As I still value the whole view source nature of the web, I don't want to unnecessarily obfuscate my html and css for a negligible performance boost (negligible in my case at least). Given that Rainpress appears to have file input and output options but no formatting options, I decided to try to make something really simple (dumb some would say) where I could customize the output a bit more.
Here's what I came up with: mincss.zip
#!/usr/bin/env ruby
#define formatting around the characters
colon = ':'
semicolon = '; '
comma = ','
open_brace = ' {'
close_brace = '}'
file = !STDIN.tty? ? STDIN.read : File.read(ARGV[0])
file.split('}').each do |block|
#one block per line
block.gsub!(/\n/,' ')
#get rid of comments
block.gsub!(/\/\*.*?\*\//m,'')
#apply formatting defined above
block.gsub!(/\s*:\s*/,colon)
block.gsub!(/\s*;\s*/,semicolon)
block.gsub!(/\s*,\s*/,comma)
block.gsub!(/\s*\{\s*/,open_brace)
#single spacing
block.gsub!(/\s\s+/,' ')
puts block.strip + close_brace if block.include?('{')
end
To maintain css readability I opted for one block per line with spacing after the semicolons and before the open braces. I think the results are more appealing now, but I can change this very easily if I wanted to by manipulating the define formatting around the characters section in the code above. Just modify the strings to represent what you want the space around each of those characters to look like.
As I said, this is pretty dumb code. It doesn't have any knowledge of css syntax or grammar it can use to shorten or correct your code; it just removes extra spacing and consolidates your css to one block per line. If you really want to get your css file as small as possible, Rainpress is probably the best bet as far as Ruby utilities go. But if you're looking for a flexible and concise yet readable view of your css, you might find this tool useful.
Usage is as follows:
> mincss.rb styles.css
> cat styles.css | mincss.rb
You can pass the input css via STDIN or as an argument. I operate with 3 distinct css files in my development environment but then have a Rake task that concatenates them and pipes the output to mincss.rb for the production environment. Now my development css files are verbose and my production css is concise.
Update: A reader sent in a fix for a greedy inner-block comment deletion. All the code has been updated. Thanks Jeff!
Catherine & Aaron's Wedding
Wednesday, September 30 2009
Here are a couple of photos from Catherine and Aaron's wedding in Pennington New Jersey. Actually, I didn't take any photos at the wedding at all. After the formal stuff was finished we all ended up hanging out in the hotel lobby till late. That's were all of these came from. There are a few more in the full set on Flickr.
Glacier National Park
Tuesday, July 21 2009
A trip to Montana. Full set on Flickr.
White Glove Tracking
Thursday, May 03 2007
Evan and I just put out a new project called White Glove Tracking. From the site:
There are 10,060 frames of video in Michael Jackson's 5 min 35 sec nationally televised landmark performance of Billy Jean. The White Glove Tracking project (W.G.T.) is an effort to isolate just the white glove from this moment in pop-culture history. Rather then write unnecessarily complex code to find the glove in every frame of the video I am asking for the assistance of 10,060 individual internet users to simply click and drag a box around the glove in one frame.
Help us out! It's a surprisingly addictive process. Get started loggin' frames.
Big thanks to Eyebeam and Rhizome for the support!
Electric Use Map for Personal Kyoto
Tuesday, April 17 2007
The map above shows the average monthly electric use of Personal Kyoto users. A frequently updated map is also available at the Personal Kyoto site.
Getting the average use data out of PK and getting the data into Google Maps was pretty simple. What turned out to be challenging was working with the US Government's zip code boundary lat/lon data which is in a completely weird format. It's just a lot less user friendly than it could (should?) be. One could imagine that public data (which this zip code boundary information is) could be a lot more accessible. This seems to be a trend I've observed with most of the public data I've worked with now.
Personal Kyoto
Tuesday, October 03 2006
Well, I've finally to put Personal Kyoto out there for public use. Personal Kyoto is a web application that I developed at Eyebeam in the Openlab as part of my Fellowship. PK allows New Yorkers (and hopefully more people from other cities later) to monitor their home electric use by grabbing their account data from the local utility (ConEd in this case). Additionally, Personal Kyoto analyzes each user's electric use and computes an electric use reduction goal that is based on historic electric consumption and US Kyoto Protocol targets.
The project is based on the idea that observing behavior is often the impetus for changing behavior. For instance, there's lots of anecdotal evidence that cars with MPG computers encourage drivers to drive more efficiently because they learn the driving behaviors that lead to more gas consumption and those that lead to less. Similarly, the first step for changing your financial behavior is to track your income and expenses (i.e. keep a budget). This process almost always illuminates areas where your spending can be reigned in because you see things that were invisible to you before you started recording that information. The point is that measurable, comparable feedback on behavior can change behavior.
The ideal solution for an electric consumption monitoring tool is probably to install a physical device that monitors your electric use real-time in your home or work place. However, such a device would likely be expensive (or at least cost more than $0). Personal Kyoto, however, is really the same thing — it just works with more course data supplied by your monthly electric bill and via the web instead of a physical device. It does have the benefit of being completely free though.
I've already become pretty hardcore about sniffing out vampire loads (seceretly always-on devices such as TVs, stereos, charging devices, etc) and replacing the few remaining incandecent bulbs I have at home. The results seem to be showing in my decreasing monthly average usage. If you're a New Yorker interested in reducing your energy use (and/or the money you spend on your electric bill) do check out Personal Kyoto yourself and get that average use metric heading south. If you're a software developer and are interested in working to bring PK to your city, send me an email (ben [dot] engebreth [at] gmail [dot] com).
Update/Note: I forgot to thank Mike Frumin for contributing his technical knowledge to the project as well as a few significant conceptual points. Thanks Mike.
Eyebeam R&D Call for Fellows
Friday, August 04 2006
The Eyebeam Openlab has the Call for Fellows out right now. I've been an R&D Fellow for the last year and have had a wonderful experience. Working with creative minded nerds is pretty cool. If you feel the label artist, engineer and hacker fits you well, be sure you get your application in before August 14th 21st. The fellowship is 11 months long and starts in November.
While a fellow can work on whatever projects he or she is interested in, the lab's (and Eyebeam's) themes as of late have been leaning towards (1) Energy, Technology and Sustainability and (2) Urban research, urban interventions and media in public space.
Speaking of Energy, Technology and Sustainability, look for my next project, Personal Kyoto, in the next couple of weeks.
Ridin' around in a car again
Sunday, April 30 2006
Again, I've been quiet on the blog for far too long, but I having just returned from cross-country travels, it seemed like a good time to check in. Last week I headed out to Arizona for my grandmother's wedding. Yes, my grandma got married and it was totally cool -- so cool that the event was catered by KFC. And man those people have good biscuits. After a couple of days in gorgeous Sedona (where I fondly recalled my days of western living), I jumped in a car and headed out to LA to join the GRL crew who where just getting into town from a successful Maker Faire.
Of course, LA has been a bitter-sweet kinda town for me in the past, but this trip was just fantastic and really, really made LA feel wonderful. It's probably the distance (in both miles and minutes) from that city that allows me to feel that way, but I really loved being there and (almost) everything about it. I can still deal without the traffic (and that's not an insignificant element of one's life in LA) but the city and the goings on within it were nothing but super-cool. In large part it's just due to having good pals out in that part of the world and the ability to get to see them all in a short amount of time (not to mention hangin' with the super-cool GRLers). It was like concentrated fun.
At the same time, LA made NYC seem new again when I got back. The season's changing probably had a little to do with it as well, but it's just nice to see the city again after being away from it for the longest period of time since I moved here last year. Nice to be back, but I still need to catch up on the lost sleep I missed while I was away.
SlashLinks is out Today!
Tuesday, February 21 2006
Today I released SlashLinks over at the Eyebeam R&D. SlashLinks is a tool you install on your web host's machines (similar to Movable Type) that mirrors your del.icio.us links via the del.icio.us API. SlashLinks runs on Ruby on Rails.
Honestly, I developed SlashLinks because I wanted to put my del.icio.us links on my website in a fashion similar to the way del.icio.us displays them with the functionality of tags and archives (all intuitively navigable by URL). So, that's what I have now. My most recent links are at /links, my link archive is at /links/archive, and my links indexed by tag are at /links/tags.
So I think I've fairly transparently integrated SlashLinks into my blog -- which was the goal. I've also set up a vanilla instance of SlashLinks here to illustrate how it works out of the box. Since the core links, archive, and tags pages are styled via CSS, you can relatively easily change up the look of these core pages to get it to look like you want. If someone wanted to use SlashLinks as a stand alone link blog they might might style the site like this for example.
SlashLinks uses a bit of the ole AJAX to keep up-to-date with del.icio.us. When someone views your links (and after a user-defined check interval), SlashLinks will query del.icio.us via the API and grab your new links if you have any. If you do, the links will drop into the page without a reload. I think it's kinda cool. So to keep up-to-date all you (or your readers) have to do is view the links page every once and a while. Alternatively, you can log in to the SlashLinks configuration page and manually update.
There's a couple of examples of sites using SlashLinks at the project site. Hopefully there will be more sites added in the future.
The goings on that I can bring to mind in 5 minutes
Wednesday, February 08 2006
I feel like I haven't posted in a week or ten days sometimes and then I look and see that it's been almost a month since I last wrote something here. Pathetic. So, since I've got to post, I'll have to fill this entry with trivialities. Reverse chronological style. Let's see. Just got home from locking myself out of my place for the first time. Unfortunately the unseasonably warm winter disappeared yesterday to be replaced by bitter cold. Bad time to lock yourself out. Had to walk down to the hospital to meet up with Neil and get myself back in. Ah, what else, I've been obsessing on the bright white cleanliness of my new shoes. Not because I'm trying to keep them all white, but cause I think it looks absolutely weird to have shoes this white (and they're not even white shoes!?). What's probably really strange though is becoming so used to the old ass shoes that I've been wearing for far too long (told you this was trivial).
But on the non-trivial side of things (finally something is coming to me), the Eyebeam OpenLab has released some really cool projects in the last week or two. Mike put out his super-cool Ogle and Evan released De Touch. The former is a tool for grabbing 3D images from games/programs (like printscreen, but for 3D) and the latter is a webapp that "explores the manipulation of the human form." (i.e. it undoes what touch-up artists do to photos before we see them on the front cover of magazines). I've got my del.icio.us based project coming out in (hopefully) the next week, so be prepared. I've got to follow in some enormously successful footsteps.....not that I'm anxious about it. Ok, yes I am.