This plugin makes it easy to add fit-to-fill background video to websites. It can play silent ambient background video (or series of videos). Or use it as a player to show video playlist. BigVideo.js can also show big background images, which is nice to have for showing big background images for devices that don’t have autoplay for ambient video.

Note: Modern Rails has two build pipelines, the asset pipeline (or "Sprockets") and Webpacker. The principles below apply for both, but the examples shown are for Sprockets.

Every page in your application uses many assets, such as images, javascripts and stylesheets. Without your intervention, the browser will request these assets again and again on every request. There is no magic in Rails that gives you automatic caching for assets. In fact, if you haven't been paying attention to this, your application is probabl...

Now works with radio buttons.

Interesting interview with DHH, where he talks about how they made the new Basecamp feel very fast without using a lot of Javascript (most of Basecamp still lives on the server). The two tricks they used are PJAX and Russian Doll Caching.

A print stylesheet is easy to create. Choose a font suited for paper, hide some elements, done. Unfortunately print stylesheets often break as the application is developed further, because they are quickly forgotten and nobody bothers to check if their change breaks the print stylesheet.

This card describes how to write a simple Cucumber feature that tests some aspects of a print stylesheets. This way, the requirement of having a print stylesheet is manifested in your tests and cannot be inadvertedly removed from the code. Note that you can...

So your Cucumber feature sometimes dies with this exception:

Modal Dialog Present (Selenium::WebDriver::Error::UnhandledAlertError)

As a seasoned Selenium veteran you are used to misleading error messages. Hence you might be surprised that the reason for this particular error is that there is actually a modal dialog present and preventing Selenium from executing commands like click or page.have_css?.

How your code triggers this issue

The reason why a dialog is shown is somewhat fucked ...

By default, only application.js, application.css and all non-JS/CSS files are precompiled into public/assets.

If you have asset manifests in non-standard locations, declare them in your config/application.rb:

config.assets.precompile += ['application/all.css', 'result/all.css', 'application/all.js', 'result/all.js']

This way you can also precompile files that do not have any manifest.

In Selenium features the server and client are running in separate processes. Therefore, when mocking time with a tool like Timecop, the browser controlled by Selenium will still see the unmocked system time.

timemachine.js allows you to mock the client's time by monkey-patching into Javascript core classes. We use timemachine.js in combination with the Timecop gem to synchronize the local browser time to the ...

No big features, but many improvements under the hood:

• Faster selector engine
• Many bug fixes

Note that jQuery 2.0, scheduled for early 2013, will remove support for IE6 and 7. Before that there will be one more minor release with 1.9 that still has support for ancient IEs.

Write your app using HTML, CSS or JavaScript, upload it to the PhoneGap Build service and get back app-store ready apps for Apple iOS, Google Android, Windows Phone 7, Palm, Symbian, BlackBerry and more.

By compiling in the cloud with PhoneGap Build, you get all the benefits of cross-platform development but can still build apps just the way you like.

For my Gem Session project Holly I ran the Ironman of drag'n'drop implementations:

• Dragging in nested lists
• User-definable order of items
• Complicated item elements with super-custom CSS and other Javascript functionality
• Items that can be both leaves and containers of other items
• has_ancestry on the server side

Things I learned:

• Be ready to write a lot of CSS. You need to indicate what is being dragged, where it will be dropped, if it is dropped above, below o...

The $.cssHooks object provides a way to define functions for getting and setting particular CSS values. It can also be used to create new cssHooks for normalizing CSS3 features such as box shadows and gradients.

For example, some versions of Webkit-based browsers require -webkit-border-radius to set the border-radius on an element, while earlier Firefox versions require -moz-border-radius. A css hook can normalize these vendor-prefixed properties to let .css() accept a single, standard property name (border-radius, or with DOM property synt...

• The step we used in the past (Then "foo" should not be visibile) doesn't reliably work in Selenium features.
• I overhauled the entire step so it uses Javascript to detect visibility in Selenium.
• The step has support for jQuery and Prototype projects, so it should be a drop-in replacement for all your projects.
• For Rack::Test the step no longer uses XPath so you should be able to understand it when you are not a cyborg :)
• There were some other cards detailing alternative steps to detect visibility. I deleted all these other cards s...

• Added information about what jQuery considers "visible"
• Added a solution for Prototype
• Added a patch for Prototype that replaces the useless Element#visible() method with an implementation that behaves like jQuery.

The step definition below lets you write:

When I click on "Foo"

This is useful in Selenium features where the element you click on is not necessarily a link or button, but could be any HTML element with a Javascript event binding.

The easiest way to get this step is to use Spreewald. If you would like to add it manually, here is the step definition:

When /^I click on "([^\"]+)"$/ do |text|
  matcher = ['*', { :text => text }]
  element = page.find(:css, *matcher)
  while be...

Applications often show or hide elements based on viewport dimensions, or may have components that behave differently (like mobile vs desktop navigation menus).
Since you want your integration tests to behave consistently, you want to set a specific size for your tests' browser windows.

Using WebDriver options / Chrome device metrics

For Google Chrome, the preferred way is setting "device metrics". This allows you to configure dimensions larger than your display and enable/disable touch behavior.

Simply use register_driver to set up...

The problem

When using the asset pipeline your assets (images, javascripts, stylesheets, fonts) live in folders inside app:

app/assets/fonts
app/assets/images
app/assets/javascripts
app/assets/stylesheets

With the asset pipeline, you can use the full power of Ruby to generate assets. E.g. you can have ERB tags in your Javascript. Or you can have an ERB template which generates Haml which generates HTML. You can chain as many preprocessors as you want.

When you deploy, Rails runs assets:precompile...

TagCanvas is a Javascript class which will draw and animate a HTML5 canvas based tag cloud.

Localizing a non-trivial application can be a huge undertaking. This card will give you an overview over the many components that are affected.

When you are asked to give an estimate for the effort involved, go through the list below and check which points are covered by your requirements. Work with a developer who has done a full-app localization before and assign an hour estimate to each of these points.

Static text

• Static strings and template text in app must be translated: Screens, mailer templates, PDF templates, helpe...

You will find this useful when creating responsive designs that work well on small screens.

The attached Javascript gives a container different CSS classes (single_line or multiple_lines) depending on whether its children render on one line or multiple lines.

Initialize it with the selectors for container and children:

$(function() {
  $('.navigation').countLines('a');
});

You can now use different CSS styles like this:

.navigation
  &.single_line a
    // styles when all anchors are rendered on the same line...

Though the W3C even gives it as an example, no browser actually supports this CSS:

img:before {
  content: "something";
}

Browsers will simply not render anything when doing that on images (Fun fact: It worked in an older version of Opera but got dropped).\
The same applies to the :after pseudo-element.

This makes me sad.

You can try using jQuery instead.

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.

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