HOWTOs for Ruby on Rails and JavaScript

How to: Use Ace editor in a Webpack project

The Ace editor is a great enhancement when you want users to supply some kind of code (HTML, JavaScript, Ruby, etc).
It offers syntax highlighting and some neat features like auto-indenting.

For Webpack 3+

Integrate as described in the documentation. For example load ace Editor like this:

  function loadAceEditor() {
    return import(/* webpackChunkName: "ace" */ 'ace-builds/src-noconflict/ace').then(() => {
      return import(/* webpackChunkName: "ace" */ 'ace-builds/webpack-r...

Edit

byebug / ruby-debug: Find out current debugger position

So you are debugging like a boss and lost track of where you actually are in your code? No problem:

Calling "l=" will show you the current file and line. That's a lower-case L and an equals sign.
"where" (or "backtrace") will give you the debugger call stack, including current file and line as well. It can be quite long.

blog.pivotal.io

Edit

SVGOMG allows optimizing SVGs with a live preview

There are many ways to optimize SVGs. Ideally, your build pipeline does that automatically for you (e.g. via postcss-svgo).

If you want to manually tweak an SVG, you can use SVGOMG which is an application running SVGO in your browser.
You should deactivate the option "Remove viewBox" because you want SVGs to be scalable by the browser.

You see a live preview of any changes you make, and can copy the SVGO source with a single click (or download the optimized SVG).

jakearchibald.github.io

Edit

ActiveJob Inline can break the autoloading in development

We figured out, that ActiveJob Inline might lead to autoloading problems in development. The result was an exception when running an import script, which delivers async mails.

A copy of XXX has been removed from the module tree but is still active! (ArgumentError)

Our fix was to use .deliver_now and not .deliver_later (this is not a general fix, but it was okey for us). Below there are some debug hints which helped us to locate the problem:

We placed a pry debugger in [ActiveSupport#clear](https://github.com/rails/rails/blob...

Edit

Rubymine FileType mismatch

If your Rubymine does not recognize a file type correctly although you have entered the unmistakeable file extension like material_orders_controller.rb, this may help you:

Causing the Problem

Sometimes you create a new file and forget to enter the ending like material_orders_controller
Rubymine handles such files per default as simple txt files.
You delete this file and create a new one with correct ending: material_orders_controller.rb. But still Rubymine treats this file as text file, no highlighting is available.

What happene...

Edit

Exception notifier: How to provide custom data to fail mails

The exception_notification gem supports to provide custom data to e.g. the fail mail within foreground or background jobs.

ExceptionNotifier.notify_exception(_ex_, :data => {:message => "was doing something wrong"})

Still this can be blocked if you have an initializer where you override the default sections and background_sections option. So remember to add the data option to the desired section if required. In case you raise an exception without a data object, the fail...

Edit

How to: expand an element's cover area beyond its container

Occasionally, your designer will hand you designs where elements break the layout's horizontal container width, like navigation buttons of a slider that should be at the left/right of the browser window, or simply by applying a background color that reaches until the left and right of the browser window.

In the past, we've done some horrible things to achieve that. Like margin: 0 -10000px plus overflow-x: hidden.
There is a much saner approach.

Consider the following markup:

<body>
  <div class="container">
    <div class="sec...

codepen.io

Edit

Katapult 0.5.0 released

New Features

Deployment ready for Opscomplete
Copying view and controller templates over to target application during
basics configuration or via new command katapult templates.
"Usage" section in README rewritten: Now describes two usage scenarios.

Improvements

Generating a fixed Gemfile.lock. Run bundle update after code generation to
update all gems to recent versions.
Better deployment with Webpack
Navigation only rendered if requested
Some minor fixes

github.com

Edit

How to find a Google API project by project number

When you created a project on the Google API Console which is not being used, you may receive an e-mail like the following one.

This is to inform you that we noticed your project(s) has not accessed or used the YouTube Data API Service in the past 60 days.

For reference, your inactive project number is ...

While projects do have names, the e-mail will only tell you its (generated) number. But if you use the API Console's search, you won't get any results for project numbers. Also, project numbers are not visible when you click and ...

Edit

How to access before/after pseudo element styles with JavaScript

Accessing pseudo elements via JavaScript or jQuery is often painful/impossible. However, accessing their styles is fairly simple.

Using getComputedStyle

First, find the element in question.

let element = document.querySelector('.my-element') // or $('.my-element').get(0) when using jQuery

Next, use JavaScript's getComputedStyle. It takes an optional 2nd argument to filter for pseudo elements.

let style = window.getComputedStyle(element, '::before')
let color = style.getPropertyValue('background-color...

Edit

jQuery: How to remove classes from elements using a regular expression

jQuery's removeClass removes the given class string from an element collection. If you want to remove multiple/unknown classes matching a given pattern, you can do that.

For example, consider a DOM node for the following HTML. We'll reference it by $element below.

<div class="example is-amazing is-wonderful"></div>

Option A: Selecting classes, then removing them

You can iterate over existing classes, and select matching ones. The example below is ES6, on ES5 could write something similar using jQuery.grep.

let classes ...

api.jquery.com

Edit

Fixing "identify: not authorized"

Ubuntu has decided to disable PDF processing because ImageMagick and the underlying Ghostscript had several security issues.

When your Ghostscript is up to date (and receiving updates regularly), you can safely reactivate PDF processing on your computer like this:

Open /etc/ImageMagick-6/policy.xml (requires sudo)
- For older versions of Ubuntu (or possibly ImageMagick), the path is /etc/ImageMagick/policy.xml
Remove/Comment lines after

If you need ...

Edit

Disable the Java plugin in browsers to avoid drive-by attacks

Every now and then, Java is subject to security issues where code can break out of Java's sandbox and obtain more privileges than it should.
In almost all cases, such issues are actively being used for drive-by attacks via the Java browser plug-in, for example by malicious ad banners.

Since removing Java completely is not an option for us, make sure the Java plug-in is always disabled in every browser, even when you have updated Java on your machine.
Please re...

Edit

MySQL: Do not use "WHERE id IN (SELECT ....)"

Note: This applies specifically to MySQL. In PostgreSQL for example, this is not an issue.

If you care about performance, never use a query like

UPDATE users SET has_message = 1 WHERE users.id IN (SELECT user_id FROM messages)

MySQL does not optimize this and seems to scan the temporary table, which isn't indexed, for every row in the update statement. This applies to other statements than UPDATE as well.

Instead, either use a JOIN like

UPDATE users INNER JOIN messages ON messages.user_id = users.id SET has_message =...

Edit

Angular 1: Analyze how many watchers are registered on the page

A nice bookmarklet to analyze how many watchers have been registered on the current page. Good for keeping an eye on watchers count while developing.

Use as a bookmarklet.
Works with Angular 1.x
Logs to the browser's console.

gist.github.com

Edit

RubyMine: How to add a german spell checker

Since the Spell checker german dictionary plugin is not maintained anymore, here is another way to use a german dictionary.

Install the Hunspell plugin and restart Ruby Mine
Run sudo apt install hunspell-de-de
Select /usr/share/hunspell/de_DE.dic in File > Settings > Editor > Spelling > Custom Directory +

![Screenshot_from_2018-10-17_16-47-03.png](https://makandracards.com/makandra/57341-rubymine-how-to-add-german-spell-checker...

Screenshot_from_2018-10-17_16-47-03.png

Edit

How to: Run geordi in a single proccess with parallel test setup

Geordi uses parallel_tests if available for running the test suite. To debug an application it is very unhandy to have multiple processes as your terminal I/O will not work as expected once a breakpoint is hit.

Even parallel_tests support an option to enable a single process run, it is not possible to pass this option through geordi. But you can set the number of processes via ENV variable manually:

PARALLEL_TEST_PROCESSORS=1 bundle exec geordi cucu...

Edit

Accessing Rails config in webpack(er)

It is possible to access Rails config (for example secrets) from within your webpack bundles, thanks to rails-erb-loader. When using webpacker, the setup is like this:

Install rails-erb-loader:
```
yarn add rails-erb-loader
```

Add this to your config/webpacker/environment.js:

environment.loaders.prepend('erb', {
  test: /\.erb$/,
  enforce: 'pre',
  use: [{
    loader: 'rails-erb-loader',
  }]
})

Start using erb. For examp...

Edit

AngularJS 1 Performance: One-time bindings in expressions

In addition to the {{ myValue }} two-way binding syntax, since Angular 1.3 there's a one-time binding syntax, prefixing the value or expression with ::, e.g. {{ ::myValue }}, {{ ::myValue >= 42 }} and {{ ::myExpression(value) | someFilter }}.

One-time bound expressions get dropped from the list of watchers as soon as they can be resolved. Performance-wise the impact for this small change is huge, since Angular apparently slowes down with too many watchers registered [(Source)](http://www.binpress.com/tutorial/speeding-up-angular-js-wi...

docs.angularjs.org

Edit

Git: Ignore whitespace when merging or cherry-picking

You can tell git to ignore different kinds and amounts of whitespace when merging or cherry-picking. This often occurs when you changed indentation, or converted tabs to spaces.

Simply use

git merge <REV> -Xignore-space-change

git cherry-pick <REV> -Xignore-space-change

Edit

all_blank_except for accepts_nested_attributes_for

Put the attached file to config/initalizers to ignore some fields for rejecting nested records (e.g. hidden input fields).

class Post < ActiveRecord::Base
  
  has_many :comments
  accepts_nested_attributes_for :comments, :reject_if => all_blank_except(:position, :other_nested_attrs)

end

activerecord_base_reject_if_all_blank_except.rb

Edit

Minify Font Awesome fonts with webpack

Font Awesome 5 is a comprehensive solution for vector icons on your website.

Originally, Font Awesome came as an icon font (plus stylesheets), but recently it can also be used as a pure JavaScript solution (which will render icons as inline <svg> tags), or even as SVG sprites.

All solutions have their pros and cons:

Icon font:

little CPU load (no JavaScript)
fonts are relatively large
1 extra HTTP request

Javascript + inline SVG:

higher CPU load (needs to watch the DOM via mutation observers to ad...

Edit

How to: Use different configurations for S3cmd

S3cmd is a free command line tool and client for uploading, retrieving and managing data in Amazon S3. S3cmd reads its configuration by default from ~/.s3cfg, which is created once you run s3cmd --configure.

If you have many configurations, we recommend to always specify the configuration you want to use. This prevents applying actions to the wrong bucket.

Examples:

s3cmd -c ~/.s3cfg-github-staging ls
s3cmd -c ~/.s3cfg-github-development ...

Edit

Rbenv: How to remove a gem installed from a Github source

Normally you can list all gems of the current ruby version with gem list, which also includes the gems of you Gemfile. These can be uninstalled with gem uninstall gemname.

List and uninstall a gem installed via Bundler from Github

This does not work for gems installed directly from Github. They do not appear in gem list.

Show all gems installed via Github by bundler:

ls ~/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/bundler/

Remove a gem installed via Github by Bundler:

rm -rf ~/.rbenv/versions/2.4.1/lib/ruby/gems/2....

Edit