Avoid Initial Slow Loading Times of Rails apps under Apache & Passenger

If you have enough RAM on your server, then you will probably want to avoid the lengthy booting times you experience after an application idles.

There are 2 solutions I could find used to solve this problem:

1. Use a cron job to access the application every couple of minutes to keep it in memory.

One of the ‘raw’ solutions used are setting up a cron job to automatically access the application every few minutes and therefore keep it in memory.

crontab -e

And use nano (or your favorite editor) to add this at the end of the cron jobs:

*/5 * * * * wget http://www.example.com > /dev/null

This issues a wget request every 5 minutes and trashes the response.

2. Setup passenger not to automatically kill the rails processes.

But, on the other hand, if you have access to the server’s configuration, a better approach is to modify a few of Passenger’s constants:

PassengerMaxPoolSize 30 (use 15 if you have a machine with 1GB, 30 if you have 2GB of RAM, etc.). This will enable more processes to be spawned if necessary.

PassengerPoolIdleTime 0 (using 0, application instances will not be shutdown unless it’s really necessary – when the available resources on the server are low)

On an Ubuntu machine, you would have to edit the /etc/apache2/httpd.conf file by adding these two lines:

PassengerMaxPoolSize 30
PassengerPoolIdleTime 0

Restart apache

sudo /etc/init.d/apache2 restart

And you should not have that slow boot problem anymore.

*3. Use nginx + thin

Windows Mac-alike Rails Development Environment

As I already been using e-texteditor (for quite a few years), which is a clone of Mac-only Textmate, I thought to give setting up a mac-alike rails development environment a go.

Since I had a ton of compatibility problems when developing under vanilla Windows (with Ruby1.9 and rails3, a lost of gems failed to work, etc.), I hope the Unix-path is much smoother.

Let’s see how we can get it going…

Step 1: Install cygwin

You will need in to select the following in addition to the the default selected configuration (italic = requirements for the Nokogiri gem):

  • make
  • gcc
  • libiconv
  • openssl
  • ruby
  • libiconv
  • libxml2
  • libxml2-devel
  • libxslt
  • libxslt-devel

Step 2: Use Console with Cygwin by default

Console was one of the tips I didn’t know about ( http://sourceforge.net/projects/console/ ), it’s much nicer than the old ‘cmd’, and most of all you can set it up to start a cygwin console by default

Quote from http://garbageburrito.com/blog/entry/391/a-macesque-rails-development-environment-on-windows:

You’ll want to setup cygwin as a Console Tab. Just go into the settings and click “Add” under “Tabs”. Use the following as the “Shell”.

c:\cygwin\bin\bash --login -i

If you want it to automatically open cygwin when you start Console, just move it to the top of the Tabs list.

Just in case you encounter errors with

rvm install 1.8.7

Checkout this post about readline: http://rvm.beginrescueend.com/packages/readline/.

rvm package install readline

Step 3a: Ruby 1.8.7

Ruby 1.8.7 is already installed in cygwin, so if you want to use this one, you’re ready to go.

Step 3b: If you want RVM

Follow the instructions from http://rvm.beginrescueend.com/rvm/install/

bash < <( curl http://rvm.beginrescueend.com/releases/rvm-install-head )

Modify ~/.bash_profile by appending at the very end, after all path loads etc:

[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm"  # This loads RVM into a shell session.

Install ruby with

rvm install 1.8.7
rvm install 1.9.2

Step 3c: Compile Latest Ruby (without RVM)

Download the Ruby 1.9 source from http://www.ruby-lang.org/en/downloads/ (downloaded the latest stable Ruby 1.9.2-p136 at the time of writing)

tar xvf ruby-1.2.2-p136.tar.gz
cd ruby-1.9.2-p136
./configure

(lasts ~5-10 minutes)

make -j 3

(use 3 if you have 2 cores, 5 if you have 4 cores, etc.)

make install
ruby -v

to confirm the new version

(find more in-depth instructions here: http://www.curphey.com/2010/05/installing-and-configuring-ruby-1-9-from-source-using-cygwin/)

Step 4: Avoid the default installation of ri and rdoc from ruby gems

To avoid the installing of documentation (as I usually check the online documentation):
create .gemrc file in your cygwin home directory (~) with the following contents:

gem: --no-ri --no-rdoc

Step 5: Install sqlite

Downloaded the latest sqlite tarball containing the amalgamation for SQLite 3 from http://www.sqlite.org/download.html.

tar xvf sqlite-autoconf-3070400.tar.gz
cd sqlite-autoconf-3070400
./configure
make -j 3

(use 3 if you have 2 cores, 5 if you have 4 cores, etc.)

make install

Step 6. Install Rails 3

gem install rails

Step 7. Create & start the first Rails3 app

rails new testapp
cd testapp
bundle install

(this will install sqlite3-ruby gem)

rails s

That’s it!

WordPress – get_search_link() enhancer

You already know that when performing the search in WordPress, the URL becomes something with:
/?s=lorem+ipsum in the end.

An odd fact was that get_search_link() returns something like /search/lorem+ipsum. So if you’re using a theme that creates a link to the search results page you’ll receive a different URL compared to the one that you receive when performing an actual search (two pages at different URLs showing the exact same content is no good).

Therefore I created a small snippet that fixes this when inserted in the functions.php file from your theme – making get_search_link() return the exact same URL that one would receive when performing a search.


function simple_search_link($link)
{
$link = str_replace('/search/','/?s=',$link);
$link = rtrim($link, '/');
return $link;
}
add_filter('search_link','simple_search_link');

I’ve used the str-replace to replace the /search/ with /?s=, and the rtrim function to strip the trailing /.
Now the exact same URL is used for both the get_search_link as actual searches.

This would also mean a better performance if you’re using caching.

Enhance reCaptcha accessibility with disabled images

I’ve encountered an accessibility problem these days… default reCaptcha isn’t properly accessible when the images are disabled.

A solution is to detect the availability of images, and if they are disabled to manually adjust the styling of the problematic elements.
Basically doing this:
reCaptcha made accessible

Now to share how that was accomplished.

1. Uploaded 2 files:

  • blank.gif to the root of the domain
  • captcha-accessiblity-enhancer to the root of the domain (it’s better to store all your JS file in a designated folder, but that is irrelevant for demo purposes)

2. Embeded the JS (before the body closing tag – </body>)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="/captcha-accessiblity-enhancer.js" type="text/javascript"></script>

And that’s it. The people with disabled images will be able to properly use the reCaptcha now.

Internet Explorer & Elements with an ID get a matching global variable in JS

Object doesn't support this property or method

If you’re getting an odd behavior on your scripts in Internet Explorer, try adjusting their name (for example by adjusting their names with a unique prefix) just to make sure that there isn’t any element in the page you’re working on with the same ID as your variable name.

Object doesn't support this property or method

If you want to read a much elaborate explanation, go check out Rick Strahl’s post here: Internet Explorer Global Variable Blow ups, but the above should get you going in no time (and help you avoid some headaches).

Adding wmode transparent to WordPress 3 media embeds

In case you have a website that uses dropdowns you probably noticed the dropdown panel might get under the flash media (like Youtube video embeds). The fix to this is to setup the wmode attribue to transparent… but how do we do it in WordPress?

Since WordPress 2.9 has enabled us to easily embed videos ( codex.wordpress.org/Embeds ), it also means we don’t have the ability to change the embed code (to add the wmode transparent for example), and that’s why we have to rely on applying a filter that does that for us.

Simply paste the following at the beginning of your theme’s functions.php (after <?php ), and the wmode attribute will be setup automatically:

function add_video_wmode_transparent($html, $url, $attr) {
   if (strpos($html, "<embed src=" ) !== false) {
    	return str_replace('</param><embed', '</param><param name="wmode" value="transparent"></param><embed wmode="transparent" ', $html);
   } else {
        return $html;
   }
}
add_filter('embed_oembed_html', 'add_video_wmode_transparent', 10, 3);

Update

As Theo pointed out, the videos can come in in iframes instead of object elements. To make the videos transparent in those cases as well, here’s the updated snippet:

function add_video_wmode_transparent($html, $url, $attr) {

if ( strpos( $html, "<embed src=" ) !== false )
   { return str_replace('</param><embed', '</param><param name="wmode" value="opaque"></param><embed wmode="opaque" ', $html); }
elseif ( strpos ( $html, 'feature=oembed' ) !== false )
   { return str_replace( 'feature=oembed', 'feature=oembed&wmode=opaque', $html ); }
else
   { return $html; }
}
add_filter( 'embed_oembed_html', 'add_video_wmode_transparent', 10, 3);

A demo video embedded using built-in oEmbed:

TR Backgrounds & Fixing IE

I was struggling to get some cross-browser rounded corners zebra table rows… but since the table required vertical-align:middle… applying the top right AND bottom right corners was impossible… up until I found out that CSS background-image on TR actually works cross-browser :)
It works out of the box for most standards-compliant browsers… and a minor tweak is required for our older IE7 to kick in and apply it as well: at position:relative; to the table row.

Badminton Relaxation

Badminton – this is a game I find being really relaxing… but with the right ‘tools’.
Some low-quality racquets might blow the fun out of it, but the good news is that decent racquets can be found easily in the 20$ range… the fun you have playing with them: invaluable.

Just got a Badminton Basic Kit from Head (cheers to Dia_Fantasy for recommending these to me)… and I played with them until I could hardly see the shuttles in the night :D

Bottom line: Go out and play !

Font resize detection

We all crashed into the problem where a website’s layout gets ruined when zooming in or out the font-size in the browser…

You can read a really good article from ALA giving a nice insight with regards to what approach should you take in the early development phases towards avoiding various zooming problems: http://www.alistapart.com/articles/fontresizing/

Most complex designs don’t allow so much flexibility such that you can make things really scalable via the CSS, so our most used option will probably be a touch of Javascript.
As on most of my projects jQuery is a standard, I chose to use a little jQuery plug-in that does the job of detecting the font-resize event really well:

http://wellstyled.com/en/javascript-onfontresize-jquery-plugin/

Once you caught the event you can do any kind of magic :)

What approaches did you take to solve such situations ?