HOWTOs for Ruby on Rails and JavaScript - makandra dev

How to create memory leaks in jQuery

jQuery doesn't store information about event listeners and data values with the element itself. This information is instead stored in a global, internal jQuery cache object. Every time you add an event listener or data value to a jQuery object, the jQuery cache gains another entry.

The only way that a jQuery cache entry gets deleted is when you call remove() on the element that put it there!

Since cache entries also have a pointer back to the element that spawned them, it is easy to create DOM elements that can never be garbage-co...

An auto-mapper for BEM classes in Cucumber selectors

When you are using the #selector_for helper in Cucumber steps, as e.g. Spreewald does, the following snippet will save you typing. It recognizes a prose BEM-style selector and maps it to the corresponding BEM class.

For a variation on this idea, see An auto-mapper for ARIA labels and BEM classes in Cucumber selectors.

Examples

"the main menu" -> '.main-menu'
"the item box's header" -> '.item-box--header'

Here are some examples of steps (using Spreewald, too):

T...

Did you know 'tig status' ?

It's like a GUI for the famous git add [-p].

Select files with the up/down-keys and hit

u for staging/unstaging the whole file
Enter for showing the diff of a file
- j and k to navigate in the diff
- u again to stage/unstage chunks
- 1 to stage/unstage only lines
- \ to split large chunks
F5 to refresh the view

Git: How to get a useful diff when renaming files

tldr; Use git diff -M or git diff --find-renames when you've moved a few files around.

Usage

$ git diff --help
  Options:
    -M[<n>], --find-renames[=<n>]
      Detect renames. If n is specified, it is a threshold on the similarity index
       (i.e. amount of addition/deletions compared to the file’s size). For example,
       -M90% means Git should consider a delete/add pair to be a rename if more than
       90% of the file hasn’t changed. Without a % sign, the number is to be read as
       a fraction, with a decimal point...

Angular + ui-router: Make links work in a new tab

If your angular app is not served on /, but on a different url (say /admin), links generated with ui-router will not work when you open them in a new tab.

Fix this by adding this tag in your <head>:

<base href='/admin#/'>

Helper method:

def base_tag
  tag(:base, href: request.path_info + "#/")
end

Debugging "INTERNAL ERROR!!! wrong argument type StringIO (expected File)"

If you're getting this strange error message when setting debugging breakpoints, probably HAML is the culprit.

Cause

As far as I could find out, the error is the result of setting a breakpoint (debugger) in a helper method that's called from a haml partial.

Suggestions

Try putting the breakpoint into the HAML view.

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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