So you have a restangular collection and you want to remove an element from it, after you've successfully deleted it from the server.

The README suggests to say something like $scope.users = _.without($scope.users, user). While that works at first glance (the element is no longer in your collection), it will break horribly when you want to use restangular's attributes on that collection.

This...

If you are using Angular and want something like Rails' simple_format which HTML-formats a plain-text input into paragraphs and line breaks, this directive is for you.

Any HTML fragments inside that text will still be escaped properly.

Use it like this, where your text attribute specifies something available in your current scope:

<simple-format text="email.message"></simple-format>

This is the directive, in CoffeeScript syntax:

@app.directive 'simpleFor...

If you want to do JavaScript-style camelization, ActiveSupport's String#camelize method can actually help you out. Simply pass a :lower argument to it.

>> 'foo_bar_baz'.camelize
=> "FooBarBaz"
>> 'foo_bar_baz'.camelize(:lower)
=> "fooBarBaz"

If you come across an (older) application that is using Prototype instead of jQuery, you may often see events bound to single elements only, like this:

$('foo').observe('change', updateThings);
$('bar').observe('change', updateThings);
$('baz').observe('change', updateThings);

If you are calling only one method in each case, this is unnecessarily ugly. Also, when your page contents have been replaced via AJAX (like sections of a form after choosing something), those event hooks will no longer wo...

When you, as a developer, look at the choices used to build a particular application, you’re blown away at the poor decisions made at every turn. “Why, oh why, is this built with Rails when Node.js would be so much better?” or “how could the previous developer not have forseen that the database would need referential integrity when they chose MongoDB?” But what you may not realize is that you are seeing the application as it exists today. When the previous developer (or team) had to develop it, they had to deal with a LOT of unknowns. They...

Batman is an alternative Javascript MVC with a similar flavor as AngularJS, but a lot less features and geared towards Ruby on Rails.

The attached link leads to a tutorial for a small blog written with Rails / Batman.js.

I'm collecting other Batman.js resources in my bookmarks.

If you are trying to inspect timings in JavaScript, you can use console.time and console.timeEnd which will write to your browser console.

Example:

console.time('lengthy calculation');
lengthyCalculation();
console.timeEnd('lengthy calculation');

lengthy calculation: 1.337ms

Note that this allows using console.timeEnd in another context which is helpful when you are doing things asynchronously, or just in different places.

Works in all browsers, including recent Internet Explorers. For older IEs, you may activate...

Article about implementing authentication (current_user) and authorization (access rights) in AngularJS.

Has an surprising amount of practical and understandable code.

I had to deal with JavaScript Undefined Error while accessing a specific CKEditor instance to fill in text.

Ensure everything is loaded with

patiently do
  page.execute_script("return isCkeditorLoaded('#{selector}');").should be_true
end

Example

The fill in text snippet for Cucumber:

When /^I fill in the "([^\"]+)" WYSIWYG editor with:$/ do |selector, html|
  patiently do
    page.execute_script("return isCkeditorLoaded('#{selector}');").should be_true
  end
  html.gsub!(/\n+/, "") # otherwise: unterminated string lit...

Ask before leaving an unsaved CKEditor

Vanilla JavaScript way, but removes any other onbeforeunload handlers:

  $(function(){
    document.body.onbeforeunload = function() {
      for(editorName in CKEDITOR.instances) {
        if (CKEDITOR.instances[editorName].checkDirty()) {
          return "Unsaved changes present!"
        }
      }
    }
  }

A robuster implementation example

Note: Don't forget to mark the 'search as you type' forms with the skip_pending_changes_warning class.

var WarnBeforeAccidentallyDiscard...

1. Make your custom web font available

2. Add to ckeditor/config.js

   CKEDITOR.editorConfig = function(config) {
     config.contentsCss = [
       '/assets/myCkeditorStyles.css', // any other file to encapsulate custom styles
       '/assets/myFontFaceTags.css'  
     ];
   }
   

It's not enough to provide the font face tags within your public folder. You have to explixitly call it within the ckeditor/config.js.

...

When you are working with Backbone models and inheritance, at some point you want to overwrite inherited methods but call the parent's implementation, too.
In JavaScript, there is no simple "super" method like in Ruby -- so here is how to do it with Backbone.

Example

BaseClass = Backbone.Model.extend({
  initialize: function(options) {
    console.log(options.baseInfo);
  }
});

MyClass = BaseClass.extend({
  initialize: function(options) {
    console.log(options.myInfo);
  }
});

ne...

Sometimes you have a test expectation but actually want a better error message in case of a failure. Here is how to do that.

Background

Consider this test:

expect(User.last).to be_present

In case of an error, it will fail with a not-so-helpful error message:

expected present? to return true, got false (Spec::Expectations::ExpectationNotMetError)

Solution

That can be fixed easily. RSpec expectations allow you to pass an error message like this:

expect(User.last).to be_present, 'Could not find a user!'

...

RulersGuides.js is a Javascript library which enables Photoshop-like rulers and guides interface on a web page

Also available as a bookmarklet.

Crazy hack. Might be useful one day.

The code required has since been extracted into a library.

Clever hack to allow user interaction without Javascript (by using radio buttons and selecting on :checked).

You might sometimes use self to capture the context of this before it is destroyed by some function.

Unfortunately self is also an alias for window, the global top-level object. Save your future self some headaches and use another name like me instead (Coffeescript chose to use _this).

Opal is a source to source ruby to javascript compiler, corelib and a runtime implementation that currently passes 3000 rubyspecs w/a reachable goal of passing them all.

TLDR: This card explains which threads and processes interact with each other when you run a Selenium test with Capybara. This will help you understand "impossible" behavior of your tests.

When you run a Rack::Test (non-Javascript) test with Capybara, there is a single process in play. It runs both your test script and the server responding to the user interactions scripted by your test.

A Selenium (Javascript) test has a lot more moving parts:

1. One process runs your test script. This is the process you...

Setting the colorbox opacity by hash parameter when initializing doesn't work the way like the documentation tells you.

  $(selector).colorbox({ ..., opacity: 0.5, ... }); // has no effect

The opacity value of 0.5 will be overwritten by the inline style attribute style="opacity: 0.9" that colorbox sets.

To manually set the opacity you have to add the following css rule

  #cboxOverlay { opacity: 0.5 !important; }

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

Does not depend on jQuery UI, but currently does not allow typing in the associated input field.

Search engines, such as Google and Bing are engineered to crawl static web pages, not javascript-heavy, client-side apps. This is typical of a search engine which does not render javascript when the search bot is crawling over web pages.

This is because our javascript-heavy apps need a javascript engine to run, like PhantomJS or v8, for instance. Web crawlers typically load a web page without using a javascript interpreter.

Are we out of luck for providing good SEO for our Angular apps? This article will show you exactly what you nee...