Search_spinner Cross_grey Magnifier
help

Search syntax

  • Search for repeating cards with repeats:yes
  • Search for unfinished cards with unfinished:yes
  • Search for cards in a certain topic with topic:"name"
  • Search for phrases with "a phrase"
  • Exclude a word from search: -word
  • Exclude a phrase from search: -"a phrase"
  • Exclude a topic from search: -topic:"name"

Use a special version of Chrome for selenium (and another for your everyday work)

Sometimes you need a special version of chrome because it has some features you need for testing, like in this card. You do not need to use that Version apart from tests, because you can tweek selenium to use a special version that you set in your environment:

# features/support/chrome.rb
require "selenium/webdriver"

Capybara.register_driver :chrome320x480 do |app|
  
  if driver_path = ENV["CHROME_SELENIUM_BIN...

When I give a button and a link the same styles, why is the link one pixel higher?

It's not logical, so don't be too hard on yourself. You need to give it a height and change the box-sizing and display:

button
input[type="reset"],
input[type="button"],
input[type="submit"],
input[type="file"] > input[type="button"]
  display: inline-block
  box-sizing: border-box
  height: 20px
  line-height: 20px

Also see Proper cross-browser CSS styling for buttons.

Fix error when embedding Bing maps

If you get this:

p_elSource.attachEvent is not a function

… you need to disable Firebug or switch to another browser.

Navigating through the browser history in a cucumber feature using selenium

In order to navigate through the browser history. you can manipulate the window.history object via javascript like follows:

When /^I go back in the browser history$/ do
  page.evaluate_script('window.history.back()')
end 

For further functions of the window and history objects check out this link.


An improved version of this step is now part of our gem spreewald on Github.

How to check your file system's integrity with fsck

To force a check on your next reboot (here for your root partition), simply:

touch /forcefsck

To manually do this, here is how to do it for the first partition on sda, when you are using ext4:

fsck.ext4 -fn /dev/sda1
  • -f forces the check, even if everything seems okay.
  • -n is a "read only" check, where nothing is changed and every question is answered with "no".
  • When using dmcrypt, you probably want to check s…

Fix Capistrano warnings: Missing public directories

I got these warnings while deploying a Rails 3.2 app with asset pipeline enabled:

*** [err :: host.tld] find: `/opt/www/hollyapp.com/releases/20120503115342/public/images': No such file or directory
*** [err :: host.tld] find: `/opt/www/hollyapp.com/releases/20120503115342/public/stylesheets': No such file or directory
*** [err :: host.tld] find: `/opt/www/hollyapp.com/releases/20120503115342/public/javascripts': No such file or directory

Folders like public/javascripts might not exist if you're using the asset pipeline (…

Set the accept-language of Chrome in selenium tests

You can set the resolution and user agent used in selenium tests with chrome with the method described in this card, but you can also set the accept-language and other profile settings if you do this:

# features/support/chrome.rb
require "selenium/webdriver"


Capybara.register_driver :chrome320x480 do |app|
  args = []
  args << "--window-...

Run Chrome in a specific resolution or user agent with Selenium

When you want to test how an web-application reacts in a specific resolution, you can set up a specific Selenium driver for some tests:

 Before('@chrome320x480') do
     Capybara.current_driver = :chrome320x480
 end

 After('@chrome320x480') do
    Capybara.use_default_driver 
 end

You can use either chromium or chrome beta (as of 2012.05 the Version "19.0.1084.41 beta" works), or any other member of the family. It only needs to supports the "–window-size" command-line switch. [See this list](http://peter.sh…

Open Helvetica alternatives

The closest is probably Nimbus Sans L, which is released under the GPL, AFPL, LPPL licenses. However, I couldn't find a way to convert Nimbus Sans L into a web font.

I finally settled with Liberation Sans, which is awesome for some reasons:

  • Although it's available for free, it's a high quality font because its creation was thankfully sponsored …
External content

Creating a multi-resolution favicon including transparency with the GIMP

The result is a .ico file with multiple versions of your logo at different resolutions. Now, depending on the context, visitors to your site will see your nice favicon in their browser tabs, superimposed on whatever browser chrome they're using in all of its transparent glory.

Scroll a textarea to a given line with jQuery

You can use this code:

function scrollToLine($textarea, lineNumber) {
  var lineHeight = parseInt($textarea.css('line-height'));
  $textarea.scrollTop(lineNumber * lineHeight);      
}

Some caveats about this code:

  1. Your textarea needs to have a line-height in Pixels.
  2. The code will scroll to the line number in the text area, not the line number of the original text. These will differ if any lines wrap at the edge of the textarea.

Also see our solution for [scrolling a textarea to a given position with jQuery](htt…

jQuery File Upload

File upload with nice UI, progress bar and preview, allowing multiple files and supports drag & drop.

Its default is built on Bootstrap, but there's a version for jQuery-UI.

External content

Manipulating the browser history - MDN

The DOM window object provides access to the browser's history through the history object. It exposes useful methods and properties that let you move back and forth through the user's history, as well as – starting with HTML5 – manipulate the contents of the history stack.

Convert a TrueType (.ttf) font to web font formats

  • Note that you are not allowed to embed any font in a website. You need to check the license first. Fonts from Font Squirrel are all okay to embed and use for commercial purposes, but as with many free fonts, quality differs widely, especially at medium and small font sizes.
  • You will need to embed your font in several formats since browser support is a mess.
  • You can use the [Font Squirrel @font-face generator](http://www.fontsquirrel.c…

How to access a dmcrypt-encrypted partition from outside your system

This is for you when you want to mount a dmcrypt encrypted partition manually, e.g. from a live CD.

First, open the dmcrypted partition (You need to provide some name. It may, but does not need to, be your LVM group name):

cryptsetup luksOpen /dev/sda5 some_name

Since your encryption container most likely contains an LVM group (root + swap for example), enable the logical volume manager (replace LVM_NAME with your volume group's name):

vgchange -ay LVM_NAME

After that, you can your access (mount, [fsck](https://makandrac…

Browser support for box-shadow

Basic box shadow support is available in all browsers today, but you need to check to which extend they are supported. Implementations differ:

  • Are multiple box shadows (separated by comma) possible?
  • Are inset shadows possible?
  • Can the spread radius be defined?
  • Can you use it without vendor prefix?

A good compatibility chart can be found here. The gist is that, except for IE and some Safaris, you can use all features …

Convert primitive Ruby structures into Javascript

Controller responses often include Javascript code that contains values from Ruby variables. E.g. you want to call a Javascript function foo(...) with the argument stored in the Ruby variable @foo. You can do this by using ERB tags (<%= ruby_expression %>) or, in Haml, interpolation syntax (#{ruby_expression}).

In any case you will take care of proper quoting and escaping of quotes, line feeds, etc. A convenient way to do this is to use Object#json, which is defined for Ruby strings, numb…

3019 cards