HOWTOs for Ruby on Rails and JavaScript

Geordi 1.0 released

Geordi 1.0 features a command line application geordi, that holds most of Geordi's previous commands.

New features

command help and usage examples right within geordi (geordi help and geordi help <command>)
quick command access: type just the first few letters of a command, e.g. geordi rs or geordi dev[server]
command dependencies, e.g. geordi rspec invokes geordi bundle-install (which bundles only if needed)
no cluttered /usr/bin, but all commands in one handy tool
template for easily adding new...

How to view a file from another branch

Just run git show branch:file. Examples:

git show HEAD~:bin/command
git show origin/master:../lib/version.rb

stackoverflow.com

Edit

Jasmine: Testing AJAX calls that manipulate the DOM

Here is a Javascript function reloadUsers() that fetches a HTML snippet from the server using AJAX and replaces the current .users container in the DOM:

window.reloadUsers = ->
  $.get('/users').then (html) ->
    $('.users').html(html)

Testing this simple function poses a number of challenges:

It only works if there is a <div class="users">...</div> container in the current DOM. Obviously the Jasmine spec runner has no such container.
The code requests /users and we want to prevent network interaction in our uni...

Edit

velesin/jasmine-jquery

This jasmine plugin helps with testing DOM manipulation in two ways:

It gives you DOM-related matchers like toBeVisible() or toHaveCss(css)
It gives you a function to load HTML from fixture files. Without this you would have to manually add elements to <body> and clean up afterwards.

github.com

Edit

AngularJS: Binding to Perl-style getter/setters functions

Angular 1.3+ has an alternative getter/setter pattern: You can bind ng-model to an accessor function. This is a function that is either a getter (when it gets no arguments) or a setter (when it gets the new value as an argument):

$scope.name = function(newName) {
  return angular.isDefined(newName) ? (_name = newName) : _name;
}

You need to bind this function with ng-model and `ng-model-options="{ getterSette...

Edit

Taking screenshots in Capybara

Capybara-screenshot can automatically save screenshots and the HTML for failed Capybara tests in Cucumber, RSpec or Minitest.

Requires Capybara-Webkit, Selenium or poltergeist for making screenshots. Screenshots are saved into $APPLICATION_ROOT/tmp/capybara.

Manually saving a page

Additionally you can trigger the same behavior manually from the test using Capybara::Session#save_and_open_page and [...

capybara_screenshot.rb screenshot_steps.rb

Edit

Researching a new form of HTTP caching optimization - Phusion BlogPhusion Blog

Interesting approach to caching responses directly in the HTTP server, based on the value of an individual cookie.

No word yet how to force cache-invalidation.

blog.phusion.nl

Edit

mailru/FileAPI

A set of javascript tools for working with files.

It offers different kinds of things:

A cross-browser JS API to work with File objects.
Image helper methods, like rotating images, or generating thumbnails in the browser (because you don't want your browser to scale tons of 20MB-JPEGs just for an upload preview)
Webcam access
Uploads

When HTML5 support is unavailable, it uses Flash polyfills.

Check out the documentation and demos at their GitHub page.

To install via bower, simply add the `...

mailru.github.io

Edit

Fixing the warning Time#succ is obsolete; use time + 1

Chances are you're seeing the warning repeated a lot of times, maybe thousands of times. Here's how to reproduce the issue:

Example 1

# bad code
(Time.current .. Time.current + 1.hour).include?(Time.current)

# Use Range#cover? instead of Range#include? since the former does no typecasting into integers.
(Time.current .. Time.current + 1.hour).cover?(Time.current)

Example 2

# bad code
Post.where(:created_at => min_date.beginning_of_day .. max_date.end_of_day)

# Use 'BETWEEN x AND y'
Post.where(['posts.created_at BETWEEN...

makandracards.com

Edit

Angular: Keeping attributes with invalid values in an ngModel

The Angular 1.2 way:

# By default, angular returns undefined for invalid attributes which removes
# the value from the form field's ngModel (which means it's not sent to the
# server, and old values would not be overwritten).
#
# This directive makes sure that form fields with an invalid value return an
# empty string instead of undefined.

for elementType in ['input', 'textarea', 'select']
  @app.directive elementType, ->

    priority: 1
    restrict: 'E'
    require: '?ngModel'

    link: (scope, element, attributes, ngModelControlle...

Edit

Installing Adobe Reader on Ubuntu

Adobe no longer supports their PDF reader on Linux and the official page does not offer it for download. \
However, some files may not display properly on Ubuntu's default PDF reader Evince or PDF forms may not work as expected. Hence, you may still need to use it.

Here is how to install the Adobe Reader (acroread) if you need to:

Download the .deb archive from the Adobe servers (yes, it's still there):

cd /tmp && wget http://ardownload.adobe.com/pub/adobe/reader/unix/9.x/9.5.5/enu/AdbeRdr9.5.5-1_i386linux_enu.deb

I...

askubuntu.com

Edit

"controller as" syntax for AngularJS 1.2+

In the Controller:

// Instead of doing this:
app.controller('TodoCtrl', function ($scope) {
  $scope.input = 'ex. buy milk';
});

// Do this:
app.controller('TodoCtrl', function () {
  this.input = 'ex. buy milk';
});

In the HTML:

<!-- Instead of this: -->
<div ng-controller="TodoCtrl">
  <input type="text" ng-model="input" />
</div>

<!-- Do this: --> 
<div ng-controller="TodoCtrl as todo">
  <input type="text" ng-model="todo.input" />
</div>

airpair.com

Edit

josephschmitt/Clamp.js

Clamps (ie. cuts off) an HTML element's content by adding ellipsis to it if the content inside is too long.

While you can only truncate single lines with CSS by using text-overflow, this small JavaScript library also allows truncating text after multiple lines.

Please note:

For Internet Explorer, the element you clamp on needs to have its line-height set in pixels. A relative value will not work.
There is also the [-webkit-line-clamp](http:...

github.com

Edit

tel_to Rails helper for linking phone numbers

When putting phone numbers into web pages, you should use tel: links so smartphone users can click those numbers to call someone.

Here is a small helper method that you can use to simplify this:

def tel_to(text)
  groups = text.to_s.scan(/(?:^\+)?\d+/)
  link_to text, "tel:#{groups.join '-'}"
end

This will allow you to use human-readable numbers and get clean links:

>> tel_to '(01234) 555 6789'
=> <a href="tel:01234-555-6789">(01234) 555 6789</a>

>> tel_to '+1 555 123-456'
=> <a href="tel:+1-555-123-456...

link_helper_spec.rb

Edit

igor-alexandrov/wiselinks

An amped-up alternative to Turbolinks that differs in points like this:

It's opt-in instead of opt-out, so you explicitely mark up links that should use Wiselinks
It can refresh content in a given selector only (think framesets), whereas Turbolinks always refreshes the whole body
It can submit forms without a page reload
It can follow redirects from an AJAX response

github.com

Edit

How to combine "change", "up", and "down" in a Rails migration

Rails migrations allow you to use a change method whose calls are automatically inverted for the down path. However, if you need to some path-specific logic (like SQL UPDATE statements) you can not define up and down methods at the same time.

If you were to define define all 3 of them, Rails would only run change and ignore up and down. However, Rails 4+ features a helper method called reversible:

class MyMigration < ActiveRecord::Migration

  def cha...

Edit

PSA: Dont allow private gems to be pushed to rubygems.org

If you make a gem with Bundler, you will get a rake release task that will instantly publish your gem to rubygems.org for all the world to admire. For private gems this is very bad.

To make sure this cannot happen, rubygems 2.2+ allows you to restrict eligible push hosts:

Gem::Specification.new 'my_gem', '1.0' do |s|
  # ...
  s.metadata['allowed_push_host'] = 'https://gems.my-company.example'
end

In case you already messed up, [follow these instructions to get your gem removed](http://help.rubygems.org/kb/rubygems/removing-an-a...

Edit

Speed up JSON generation with oj

Using this gem I could get JSON generation from a large, nested Ruby hash down from 200ms to 2ms.

Its behavior differs from the default JSON.dump or to_json behavior in that it serializes Ruby symbols as ":symbol", and that it doesn't like an ActiveSupport::HasWithIndifferentAccess.

There are also some issues if you are on Rails < 4.1 and want it to replace #to_json (but you can always just call Oj.dump explicitely).

Security warning: Oj does not escape HTML entities in JSON
---------...

rails_4_json_escape.rb github.com

Edit

Angular: Binding an HTML value

To bind an HTML value to ng-bind-html, you need to mark it as "trusted" first. Among other ways, you can do so with a custom filter.

# Filter in Coffeescript...:
@app.filter 'htmlSafe', ['$sce', ($sce) -> $sce.trustAsHtml ]

# ...or JS:
app.filter('htmlSafe', [
  '$sce', function($sce) {
    return $sce.trustAsHtml;
  }
]);

# Usage:
<div ng-bind-html="item.value | htmlSafe"></div>

This is a replacement for the ng-bind-html-unsafe directive which has been removed in Angular 1.2.
:party:

Edit

How to repair a corrupt PDF

If you have issues with PDFs, fix them like this: pdftk <corrupted_file>.pdf output <fixed_file>.pdf

Background

I had an issue where an included PDF would not show up in a document created with xelatex. This is the relevant line of LaTeX code:

  \AddToShipoutPicture*{ \includegraphics[width=21cm]{/home/dominik/code/ihero/public/system/stationery/original/stationery.pdf} }

The included PDF is a stationery for invoices which users can upload themselves. It did work until someone updated their stationery with a nearly-iden...

blog.idrsolutions.com

Edit

bower-rails can rewrite your relative asset paths

The asset pipeline changes the paths of CSS files during precompilation. This opens a world of pain when CSS files reference images (like jQuery UI) or fonts (like webfont kits from Font Squirrel), since all those url(images/icon.png) will now point to a broken path.

In the past we have been using the vendor/asset-libs folder ...

Edit

Angular-xeditable :: Edit in place for AngularJS

Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements.

Such technique is also known as click-to-edit or edit-in-place.

It is based on ideas of x-editable but was written from scratch to use power of angular and support complex forms / editable grids.

vitalets.github.io

Edit

When Sass-generated stylesheets print a Encoding::CompatibilityError

We upgraded a Rails 2 application to Rails 3.2 and Ruby 2.1, changed the mysql adapter from mysql to mysql2, but did not activitate the asset pipeline. Instead we used Sass the old-school way (stylesheets in public/sass/*.sass) and relied on stylesheet_link_tag to activate the Sass compiler.

Now all Sass-generated stylesheets inserted the following text into body:before:

Encoding::CompatibilityError: incompatible character encodings: UTF-8 and ASCII-8BIT

I could get rid of this by removing all generated .css files in `...

Edit

HTML5: Allow to choose multiple files with a vanilla file picker

Modern browsers natively suppport file pickers that allow the user to choose multiple files at once. To activate this feature, set the multiple attribute:

<input type="file" name="images[]" multiple />

Or in a Rails view:

<%= file_field_tag "images[]", multiple: true %>

This works in IE10+.

Make sure that the field name ends in [] so your server-side code will parse the incoming files into an array. Obviously this naming convention is not compatible with default Rails nested attribute setters, so you'll need to write a form ...

Edit