How to make a single check box (or image, etc) align vertically

Consider this HTML:

<div style="line-height: 42px">
  <input type="checkbox" />
</div>

Even though the surrounding container defines a line-height, which vertically centers its inline elements, the check box will be top aligned if it is the only element inside the container.

It will be aligned correctly if the HTML looks like this:

<div style="line-height: 42px">
  <input type="checkbox" /> foo
</div>

Complex explanation here.

So the ac...

Solarized color scheme for Rubymine

If you want to use the (badly implemented!) solarized color scheme in your Rubymine IDE:

  1. Clone the IntelliJ IDEA port:

    git clone https://github.com/jkaving/intellij-colors-solarized.git

  2. Import the settings in Rubymine by chosing the above directory File -> Import Settings

  3. Change the color scheme in the settings (Ctrl-Alt-S) in Editor -> Colors & Fonts

Note that selecting a color scheme will also reset your previous editor font choice. You might want to change the font to [Envy Code R](http://damieng.com/blog/2008/05/2...

Always store your Paperclip attachments in a separate folder per environment

tl;dr: Always have your attachment path start with :rails_root/storage/#{Rails.env}#{ENV['RAILS_TEST_NUMBER']}/.


The directory where you save your Paperclip attachments should not look like this:

storage/photos/1/...
storage/photos/2/...
storage/photos/3/...
storage/attachments/1/...
storage/attachments/2/...

The problem with this is that multiple environments (at least development and test) will share the same directory structure. This will cause you pain eventually. Files will get overwritten and...

Check whether a Paperclip attachment exists

Don't simply test for the presence of the magic Paperclip attribute, it will return a paperclip Attachment object and thus always be true:

- if user.photo.present? # always true
  = image_tag(user.photo.url)

Use #exists? instead:

- if user.photo.exists?
  = image_tag(user.photo.url)

How to grep through the DOM using the Capybara API

When your Cucumber feature needs to browse the page HTML, and you are not sure how to express your query as a clever CSS or XPath expression, there is another way: You can use all and find to grep through the DOM and then perform your search in plain Ruby.

Here is an example for this technique:

Then /^I should see an image with the file...

How to look at hidden X screens

When you have a program running in a hidden X screen (like with Xvfb for Selenium tests) you may want to look at that hidden screen occasionally.

First, find out what X displays are currently active:

netstat -nlp | grep X11

This should give you some results like these:

unix  2      [ ACC ]     STREAM     LISTENING     8029600  4086/Xvfb           /tmp/.X11-unix/X99
unix  2      [ ACC ]     STREAM     LISTENING     8616     -     ...

Hex color codes for the CGA palette

Below you can find the hex color codes for the Color Graphics Adapter palette which used to be popular in the 1980s.

$cga_black: #000000
$cga_white: #ffffff
$cga_light_gray: #aaaaaa
$cga_dark_gray: #555555
$cga_yellow: #ffff55
$cga_brown: #aa5500
$cga_light_red: #ff5555
$cga_dark_red: #aa0000
$cga_light_green: #55ff55
$cga_dark_green: #00aa00
$cga_light_cyan: #55ffff
$cga_dark_cyan: #00aaaa
$cga_light_blue: #5555ff
$cga_dark_blue: ...

How to enlarge a VirtualBox VDI disk file

VirtualBox does not offer anything for this task -- you need to do it yourself. It's not that hard:

Get more disk space

  1. Add an extra virtual hard disk to the machine with the disk size you want to achieve.
  2. Get a Linux live CD (like the Ubuntu live image) that offers fdisk, dd and gParted.
  3. Boot the guest from the CD, open a terminal (on the guest, not the host!) and become root: sudo su
  4. fdisk -l to see the disk information. \
    There should be one drive with some partitions and one without any....

Getting non-Aero toolbars for Thunderbird 5 on Windows 7

Thunderbird 5 brings a custom chrome on Windows Vista/7 that uses translucent Aero decorations on toolbars and menubars. Here is how to restore solid backgrounds if you don't like it.

Put the following into chrome\userChrome.css in your Thunderbird profile directory:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
window {
  background-color: -moz-dialog !important;
}

(Re-)start Thunderbird afterwards.


If you need more info on where the userChrome.css is suppose...

Manipulate color with Sass functions

Sass comes with many built-in functions to manipulate color. Some of the more interesting functions include:

adjust-hue($color, $degrees)
Changes the hue of a color.

lighten($color, $amount)
Makes a color lighter.

darken($color, $amount)
Makes a color darker.

saturate($color, $amount)
Makes a color more saturated.

desaturate($color, $amount)
Makes a color less saturated.

grayscale($color)
Converts a color to grayscale.

complement($color)
Returns the compleme...

A nicer way to run RSpec and/or Cucumber

geordi, our collection of awesome shell scripts, has been extended by three scripts to help you call RSpec or Cucumber:

cuc

This script runs Cucumber the way you want it:

  • Prints some line feeds to easily find your test results when you come back to the console later
  • Configures Cucumber to use cucumber_spinner if it is available in your Gemfile
  • Runs Cucumber under bundle exec
  • Uses an old version of Firefox for Selenium (Javascript) features...

Setting up FreeBSD as Virtual Machine in VMware

Install FreeBSD

  • Download a suitable image from this site
  • Select File > New… to and follow the instructions, choose the .iso file you downloaded as image file
  • Start the new virtual machine and follow the instructions

Install VMware Tools

Choose Virtual Machine > Install VMware Tools from the VMware menu, then as root:

^
# install required packages
pkg_add...

Setting up Ubuntu Server as Virtual Machine in VMware

Install Ubuntu Server

  • Download an image from this site
  • Select File > New… to and follow the instructions, choose the .iso file you downloaded as image file
  • Deselect "Simple installation" – you want to configure your system yourself
  • Start the new virtual machine and follow the instructions

Install VMware Tools

  • Choose Virtual Machine > Install VMware Tools from the VMware menu, then:

^
# install required packages
sudo apt-get install build-essential psmisc

# m...

Installing RMagick on Ubuntu

When installing RMagick you may get an error messages like this:

Version 2.13.1:

checking for Ruby version >= 1.8.5... yes
checking for gcc... yes
checking for Magick-config... no
Can't install RMagick 2.13.1. Can't find Magick-config in /home/arne/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/var/lib/gems/1.8/bin

*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of
necessary libraries and/or headers.  Check the mkmf.log file for more
d...

Opera: How to use outlining for better layout debugging

I prefer using Opera's "User mode" to toggle an outlining of HTML elements quickly. This helps greatly when you want to see the actual dimensions of elements, e.g. for floating elements inside containers, instead of opening up the Dragonfly inspector every time.

Navigate to View → Style → "Manage Modes..." and tick the checkboxes like in the attached image. Then, switch to the User Mode by pressing the shortcut (Shift+G for the 9.2-compatible layout or for the default layout with enabled "single-key shortcuts") and select "Outline" from...

Onload callback for dynamically loaded images

Sometimes you need to dynamically load an image and do something as soon as its loaded (when for example its size is already available).

With jQuery, this seems to work across browsers:

$('<img>')
  .attr('src', '')
  .load(function() {
    alert('fully loaded!');
  })
  .attr('src', '/the/real/image/url');