Compulsivo

How to Set an Expires Header in Apache

Setting an Expires (or Cache-Control) header in Apache will help speed up your Web site.  We’re running Apache 2.x, and define an expires header for all of our static assets (images, stylesheets, and scripts).

Just add the following to your <VirtualHost> section of your Apache configuration:

ExpiresActive On
ExpiresByType image/png “now plus 365 days”
ExpiresByType image/jpeg “now plus 365 days”
ExpiresByType image/gif “now plus 365 days”
ExpiresByType application/javascript “now plus 365 days”
ExpiresByType application/x-javascript “now plus 365 days”
ExpiresByType text/javascript “now plus 365 days”
ExpiresByType text/css “now plus 365 days”

You can read all about expires headers by reading Yahoo!’s Best Practices for Speeding Up Your Website guide.

Also, be sure to check out our post on how to speed up your Website by Configuring Apache to Gzip Your Components.

How to Configure Apache to Gzip Your Components

Compressing your Web components will help speed up your Website.  The majority of your visitors will benefit as most all Web browsers support gzip compression.  You’ll want to compress all text, which includes html, css, javascript, xml, json, etc.

Apache 2.x uses mod_deflate, and all you need to do is add the following to your <VirtualHost> section of your Apache configuration:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

All you truly need is the first line.  The BrowserMatch lines are there to handle issues with old browsers.

You can read all about gzipping by reading Yahoo!’s Best Practices for Speeding Up Your Website guide.

Also, be sure to check out our post on How to Set an Expires Header in Apache, which will also help speed up your Website.

Calling Rails Render Partial in a Model or Background Task

Why?

You want to store raw HTML in the database for a given model and you want to do this with the ease of partials and not a bunch of nasty string manipulation.

Rails makes this difficult for you by not giving you access to the render method when not called from ActionController.  However, you’d like to call the partial helper from within a model, or a background task (such as BackgrounDRb or Starling).

How?

As an example, let’s say you have a Page model made up of a title and a body.  You’d like to cache what a rendered page would look like in the model as the attribute cached_content.

The old way.  This really sucks.

class Page < ActiveRecord::Base

  def write_cache
    the_content = "<div class='title'>"
    the_content += "<h1>#{self.title}</h1>"
    the_content += "</div>"
    the_content += "<div class='body'>"
    the_content += "#{self.body}"
    the_content += "</div>"

    self.cached_content = the_content
    self.save
  end

end

The new way.  This is so much easier and cleaner.

class Page < ActiveRecord::Base

  def write_cache
    self.cached_content = ActionView::Base.new(Rails::Configuration.new.view_path).render(:partial => "pages/show", :locals => {:page => self})
    self.save
  end

end

app/views/pages/_show.html.erb

<div class="title">
  <h1>
    <%= page.title %>
  </h1>
</div>

<div class="body">
  <%= page.body %>
</div>

Pilot your Project with Cockpit

This past weekend we competed in RailsRumble 2008 - a 48-hour Ruby on Rails programming competition where the goal is to produce a complete application in a weekend.  We partnered with Marcus Mateus of SimpliTex to create Cockpit.

We were tired of constantly logging in to various sites to see key data for the various projects we were working on. While RSS feeds can provide much of the data, digging through RSS feeds doesn’t provide you with a true executive level overview of your project. You really want to see only the most important, relevant, and timely data… and ideally act on it. Cockpit is our answer to this most annoying problem.

In the 48 hours we had for the competition we decided to focus on getting a simple proof of concept view of key data from just four widely used web services. Lots of other sites provide similarly useful data, and full interactivity would be great, but the clock was a tickin’, so we limited our scope to the following:

• Basecamp messages, todos and milestones
• Github source code commits
• Lighhouse bug tickets
• Hoptoad exceptions

We have high hopes that with the feedback that comes via the competition we will be able to create an application to help rescue all of us from project overload. Over the next 10 days, anyone can vote for Cockpit.  So far we’re off to a great start.  As of the first day we’re ranked #10 of 131 in the Usefulness category — in our opinion the only category that truly matters in the long run.

The competition was a blast, even if tiring. A great big thank you goes out to all the organizers, volunteers, and sponsors.

Note: Most of this article was authored by Marcus Mateus and was originally posted to the SimpliTex blog.

TableSorter: Filter Results Based on Search Query

So, you want to use the TableSorter jQuery plugin and you want to be able to search the table and filter the results.  Attached is a companion plugin we’ve written, called tablesorterFilter, which will extend tablesorter to provide real-time filtering of rows which match a search query!

Usage

<script type="text/javascript">
jQuery(document).ready(function() {
$("#myTable")
.tablesorter({debug: false, widgets: ['zebra'], sortList: [[0,0]]})
.tablesorterFilter({filterContainer: $("#filter-box"),
filterClearContainer: $("#filter-clear-button"),
filterColumns: [0],
filterCaseSensitive: false});
});

</script>

Search: <input name="filter" id="filter-box" value="" maxlength="30" size="30" type="text">
<input id="filter-clear-button" type="submit" value="Clear"/>

<table id="myTable">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>http://www.jdoe.com</td>
</tr>
</tbody>
</table>

Configuration

tablesorterFilter takes four parameters:

• filterContainer - The DOM id of the input box where the user will type the search string.
• filterClearContainer - (optional) The DOM id of the button, image, or whatever which will clear the search string and reset the table to it’s original, unfiltered state.
• filterColumns - An array of columns, starting at 0, which will be searched.
• filterCaseSensitive - (optional) Boolean stating whether the search string is case sensitive.  The default is false.

Requirements

jQuery version 1.2.1 or higher and a slightly modified jquery.tablesorter.js version 2.0.3.

The modification to the original tablesorter plugin is the addition of a few lines which will cache all of the rows so they can be searched.  You can download the modified jquery.tablesorter.js code below.

Download

jquery.tablesorter.filter.js

jquery.tablesorter.js 2.0.3 (modified for tablesorterFilter)

Tags: javascript, jquery