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

So you client has asked you to implement a row of buttons to like the URL on Facebook, Twitter and Google+. Here are some things you should know about this.

0. Security considerations

Each "like" button is implemented by including a Javascript on your site. This means you are running fucking remote code on your page. You are giving Facebook, Twitter and Google+ full permission to e. g. copy user cookies. Check with your client if she is cool with that. Also note that if you're site is suggesting security by operating under HTTPS ...

You might not know that Rails disables CSRF protection in tests. This means that if you accidentally forget to send the CSRF token for non-GET requests, your tests will be green even though your application is completely broken (a failed CSRF check usually logs out the user). Rails probably does this because CSRF protection sort of requires Javascript.

You want to enable CSRF protection in Cucumber scenarios that can speak Javascript. To do so, copy the a...

Copy the attached file to features/support. This gets you a convenience method:

Capybara.javascript_test?

Is true for Selenium, capybara-webkit, Poltergeist and a custom driver called :chrome (which we sometimes like to use for Selenium+Chrome).

Similar sounding but completely different card: Detect if a Javascript is running under Selenium WebDriver (with Rails)

Angular comes with different types of services. Each one with its own use cases.

All of these services are singletons. You probably want to use Factory all the time.

Provider

• is the parent of all other services (except constant)
• can be configured using `app.config(function(Provider) { ...})
• a little complex

Factory

• simpler than Provider, but without configuration
• definition: `app.factory('name', someFunction)
• someFunction is called when the name service is instantiated and should return an object

Se...

The asset pipeline (which is actually backed by sprockets) has a nice feature where templates ending in .jst are compiled into Javascript template functions. These templates can be rendered by calling JST['path/to/template'](template: 'variables'):

<!-- templates/hello.jst.ejs -->
<div>Hello, <span><%= name %></span>!</div>

// application.js
//= require templates/hello
$("#hello").html(JST["templates/hello"]({ name: "Sam" }));

Whatever is in the <% ... %> is evaluated in Javascript...

Use the click method on the DOM element:

let link = document.querySelector('a')
link.click()

Set the hash to a dummy hash which doesn't hit any id at your page, for example:

window.location.hash = "_";

Note

• If you'd set the hash to "" it causes the page to scroll to the top because the hash "#" by itself is equivalent to "_top".
• If you'd set window.location.href = "..." to get rid of the "#", you cause the browser to reload the page what is most likely not intended.

This card shows how to upgrade a Rails 2 application from Rails 2.3.8 through every single patch level up to 2.3.18, and then, hopefully, Rails LTS.

2.3.8 to 2.3.9

This release has many minor changes and fixes to prepare your application for Rails 3.

Step-by-step upgrade instructions:

0. Upgrade rails gem
1. Change your environment.rb so it says RAILS_GEM_VERSION = '2.3.9'
2. Change your ...