Crisp image edges in web browsers, howto

Sometimes, website creation frontend work involves extracting images from pages rendered by browsers. These pages may be wireframes, for instance.

Of course, it is appropriate that web pages (displayed in a browser) contain some blurring for good looks (which becomes plainly visible if blown up to 1600% by Photoshop, etc.)

Of course, it is appropriate also that some images of a wireframe (such as icons) be blurred, because icons are created normally by a dithering process.

Although image blurring (for demonstration purposes) is appropriate and has a good look, such additional blurring is bad when images are extracted for reuse on a webpage, because the blurring will then happen twice (a doubled blurring will result).

To avoid this double-blurred problem, and for pixel art, the following method will set up for you a web browser which does not blur images:

1. Download and install the latest SeaMonkey web browser:
   
   http://www.seamonkey-project.org/releases/
   
   
2. For your particular operating system, locate your profile folder by reading:
   
   http://www.gemal.dk/mozilla/profile.html
   
   
3. Immediately below your profile folder, make sure a folder exists named, 'chrome' (not the Google browser), and that a file exists in the chrome folder called, 'userContent.css' (or create them).
   
   
4. Append to userContent.css the following lines: all are for resampling of images by the desired (in this case) nearest-neighbor method:
   
   (Note: I leave intact (below) some other browsers' settings for this, just in case you want to add these lines to your particular browser, in whatever way.)
   

/*
Gecko (Firefox & Seamonkey)
Webkit (Chrome & Safari)
*/
img {
image-rendering: optimizeSpeed;             /* Older Gecko */
image-rendering: optimize-contrast;         /* CSS3 draft proposal */
image-rendering: -webkit-optimize-contrast; /* Webkit */
image-rendering: crisp-edges;               /* CSS3 draft proposal */
image-rendering: -moz-crisp-edges;          /* Gecko */
image-rendering: -o-crisp-edges;            /* Opera */
-ms-interpolation-mode: nearest-neighbor;   /* IE8+ */
}

References:
http://help.dottoro.com/lcuiiosk.php
https://github.com/thoughtbot/bourbon/pull/102
http://productforums.google.com/forum/#!topic/chrome/AIihdmfPNvE
https://bugzilla.mozilla.org/show_bug.cgi/show_bug.cgi?id=41975
https://developer.mozilla.org/en-US/docs/CSS/Image-rendering http://www-archive.mozilla.org/unix/customizing.html#usercss
http://stackoverflow.com/questions/7615009/disable-interpolation-when-scaling-a-canvas
http://nullsleep.tumblr.com/post/16417178705/how-to-disable-image-smoothing-in-modern-web-browsers
http://www.w3.org/TR/2011/WD-css3-images-20110712/#image-rendering

Copyright (c) 2012 Mark D. Blackwell.

Offline Rdoc generation, howto

Recently, I wanted to work with a Ruby gem called 'devise'.

Like many people installing gems, usually I don't include their Rdoc because of the time it takes.

My Internet connection happened to be down, so for my already installed gem devise, I wanted to generate its Ruby documentation (Rdoc) offline. The documented command for this unfortunately wanted to generate the Rdoc for all my gems:
rdoc {gem-name}

This happened with these versions:
ruby 1.9.2-p290
rubygems 1.8.10
rdoc 3.12

I found this workaround to generate a single gem's Rdocs:
cd ~/.rvm/gems/{ruby-version}/gems/{gem-name}-{version}
rdoc .
mv doc/* ~/.rvm/gems/{ruby-version}/doc/{gem-name}-{version}/rdoc
cd ~
gem server
# In SeaMonkey:
open localhost:8808
click {gem-name}
click 'rdoc'

Copyright (c) 2012 Mark D. Blackwell.