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...

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...

Select as many rows as you'd like to insert by dragging over the row numbers on the left. Then right-click on any selected row number and select "Insert Rows". Calc will now insert multiple blank rows.

The inserted rows will copy the style from the row above the selection.

This is horrible.

Possible fixes:

• Upgrade your Firefox. It's fixed in 5.0.
• Hunt down funny float or overflow directives in your CSS.
• Remove <h1> and <caption> tags in proximity of your table (seriously).

When you double-tap a string of text on an iPhone or iPad a complicated context menu for copying and pasting will appear. This can confuse unexperienced users.

Use the Javascript hack below to disable text selection on mobile devices:

// Deactivating distracting Text Selection:
// from: http://stackoverflow.com/questions/1794220/how-to-disable-mobilesafari-auto-selection
$.fn.extend({
  disableSelection : function() {
    this.each(function() {
      this.onselectstart = function() {
        return false;
  ...

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...

jQuery

You can say:

$(element).is(':visible')

and

$(element).is(':hidden')

jQuery considers an element to be visible if it consumes space in the document. For most purposes, this is exactly what you want.

Native DOM API

Emulate jQuery's implementation :

element.offsetWidth > 0 && element.offsetHeight > 0;

jQuery > 3

Query 3 slightly modifies the meaning of :visible (and therefore of :hidden).

Emulate jQuery'...

When you edit text in Balsamiq Mockups, you can define inline styles like this:

| Bold | Some *bold* text |
| Italics | Some _italic_ text |
| Blue underlined hyperlink | Some [linked] text |

Note that most Balsamiq widgets display with a bold font by default, so you won't usually see a difference when a piece of text is explicitly marked up as bold.

XPath matchers can be combined with CSS-selector matchers. This is really useful if not, for example, the content of an element should be matched but the element itself like in the following example. Here a form is used to display data as default value in its input elements. This can be the case in web applications in which data should be edited easily without additional clicks.

Update: Staticmatic will not be further developed. They suggest to switch to middleman.

If you need to make a static web page and find yourself missing all your Rails comforts, take a look at StaticMatic.

This works like an extremely stripped down version of Rails, giving you

• HAML
• SASS
• helpers
• partials

When done, everything is simply compiled to s...

This card shows you how to center a float horizontally in CSS. Also: find out what techniques are available for your use case and browser requirements in the card linked below.

Note: We have card with all CSS centering options. You probably want to head over there and get an overview over what techniques are available for your use case and browser requirements.

If you cannot use display: inline-block, centering a float ...

The trick is this: send a low-resolution version of your image to the screen, and a high-resolution version to the printer.

If you want to play music or sounds from a browser, your choice is to use either Flash or the new <audio> tag in HTML5. Each method has issues, but depending on your requirements you might not care about all of them.

Flash

• Works in all desktop browsers, even Internet Explorer. Does not work on iPads or iPhones.
• Requires you to embed a Flash component into your page which will later play the audio for you.
• Can play MP3s or Wave files. Cannot play OGG Vorbis audio.
• Cannot reliably seek to a given position when playing VBR-enco...

An alert alternative for jQuery that looks good. Apprise is a very simple, fast, attractive, and unobtrusive way to communicate with your users. Also, this gives you complete control over style, content, position, and functionality. Apprise is, more or less, for the developer who wants an attractive alert or dialog box without having to download a massive UI framework.

You can use CSS attribute selectors in your step definitions like this:

Then /^the page should have a meta description "([^"]+)"$/ do |description|
  page.should have_css("meta[name=\"description\"][content=\"#{description}\"]")
end

Note that you need to always quote attribute values or you will get a Nokogiri parsing error like this:

unexpected 'foo' after 'equal' (Nokogiri::CSS::SyntaxError)

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...

Bryan talked about the differences between imperative and declarative scenarios. In my opinion, both styles have benefits and should be used appropriately based on the situation. The majority of examples on rspec's story runner currently on the web, including mine, are of the imperative type. Since the declarative type has many advantages I thought it would be worth while to present some examples and contrast the differences between the two styles.

At times, it might be unavoidable to have different CSS rules for Internet Explorer than for sane browsers. Using Sass, this can be achieved in a relatively non-hackish way without CSS hacks.

Step 1

Move your current Sass file into a partial. Let's assume it was called screen.sass. Rename it _screen.sass.

Step 2

Create two new Sass files:

Call this one screen.sass:
$ie = false
@import screen

Call this one screen_for_ie.sass:
$ie = true
@import screen

Step 3

Change y...

PhantomJS is a minimalistic headless WebKit.

It has fast and native support for various web standards:

DOM handling, CSS selector, JSON, Canvas, and SVG.

PhantomJS can be fully scripted using JavaScript. It is an optimal solution for headless testing of web-based applications, site scraping, pages capture, SVG renderer, PDF converter and many other usages.

I don't like those buttons inside the header area of a message that Thunderbird 3 put there. Though the CompactHeader addon is often claimed to be a solution it does way too much for me -- I like the headers the way they are, just not the buttons.

This is a bit of a hack but works very well for me (keeps the date and "other actions" menu on the right, see the screenshot below):

1. Open up your profile directory (~/.thunderbird/<profile_name>/)
2. Create a chrome directory inside it.
3. Put the attached userChrome.css file into the ...

The shell variable PS1 holds your bash prompt. You might want to change it to serve your needs best. Here is how to:

General

• non-printing escape sequences in your prompt have to be inclosed in \[\e[ and \] so your shell can correctly count its prompt's length
• we recommend to highlight your prompt on production machines
• you can also [show different root prompts for each user](https://makandracards.com/makandra/9569-get-the-username-w...

Pie sometimes does not properly redraw elements upon changes. This often happens when the change comes from somewhere further up the DOM.

Consider something like:

<ul>
  <li class="active"><div class="content">Active element</div></li>
  <li class="inactive"><div class="content">Inactive element</div></li>
</ul>

with CSS
li .content {
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
behavior: url(/PIE.htc);

  back...

When working with large Sass files you will notice that the first request after a change to a Sass file takes quite some time. This is because the CSS files are being generated from the Sass files the moment the application answers your request (Sass looks at the files and recompiles if the timestamp changed); it takes even longer when you build sprites with the Lemonade gem.

To avoid this, have Sass watch the files for changes and compile them into CSS files immediately. Th...