External content

JavaScript Start-up Performance

As web developers, we know how easy it is to end up with web page bloat. But loading a webpage is much more than shipping bytes down the wire. Once the browser has downloaded our page’s scripts it then has to parse, interpret & run them. In this post, we’ll dive into this phase for JavaScript, why it might be slowing down your app’s start-up & how you can fix it.

The article author also tested 6000+ production sites for load times. Apps became interactive in 8 seconds on desktop (using cable) and 16 seconds on mobile (Moto G4 over 3G).

Ruby: Return boolean for regex comparison

A collection of code snippets which return a boolean value for a regex comparison.

regexp.match?(string) # Recommended for Ruby >= 2.4

!!(string =~ regexp)  # Recommended for older Rubies

regexp === string

!(regexp !~ string)

The Ruby 2.4 method Regexp#match? does not set globals like $~ or $1, so it should be more performant.


Matching unicode characters in a Ruby (1.9+) regexp

On Ruby 1.9+, standard ruby character classes like \w, \d will only match 7-Bit ASCII characters:

"foo" =~ /\w+/   # matches "foo"
"füü" =~ /\w+/   # matches "f", ü is not 7-Bit ASCII

There is a collection of character classes that will match unicode characters. From the documentation:

  • /[[:alnum:]]/ Alphabetic and numeric character
  • /[[:alpha:]]/ Alphabetic character
  • /[[:blank:]]/ Space or tab
  • /[[:cntrl:]]/ Control character
  • /[[:digit:]]/ Digit
  • /[[:graph:]]/ Non-blank character (excludes spaces, co…

Waiting for page loads and AJAX requests to finish with Capybara

If you're using the Capybara webdriver, steps sometimes fail because the browser hasn't finished loading the next page yet, or it still has a pending AJAX request. You'll often see workarounds like

When I wait for the page to load
Then ...

Workarounds like this do not work reliably, will result in flickering tests and should be avoided. There is no known reliable way to detect if the browser has finished loading the page.


Instead you should wait until you can observe the result of a page load. E.g. if yo…


How to search through logs on staging or production environments

We generally use multiple application servers (at least two) and you have to search on all of them if you don't know which one handled the request you are looking for. Capistrano can help you with that by running commands on multiple servers.
Logs usually live in /var/www/<project-environment-name>/shared/log.
You can use grep in this directory to only search the latest logs or zgrep to also search older (already zipped) logs. `zg…

How to get the currently selected text in Javascript



Browser support: IE9+, Android 4.3+, Safari 5+

Bug in Chrome 56 prevents filling in fields with slashes using selenium-webdriver/Capybara

There seems to be a nasty bug in Chrome 56 when testing with Selenium and Capybara: Slashes are not written to input fields with fill_in. A workaround is to use javascript / jquery to change the contents of an input field.

Use the following code or add the attached file to your features/support/-directory to overwrite fill_in.

module ChromedriverWorkarounds

def fill_in(locator, options = {})
text = options[:with].to_s
if Capybara.current_driver == :selenium && text.include?('/')
# There is a nasty Bug in Chrome …


Howto: Choose the right gems for your project

Adding a gem means you take over the liability towards the external code.


Based on "To gem, or not to gem":

  • Gem is really needed (prefer writing your own code for simple requirements without many edge cases)
  • Gem is tested well (coverage and quality)
  • Gem has a good code quality
  • Gem's licence fits to the project requirement
  • Try to avoid gems that do much more than your requireme…

Improving browser rendering performance

As the web is being used for more and more tasks, expectations rise. Not only should web pages offer rich interaction, they must be responsive in both size and interaction.

This imposes a paradoxon that needs to be solved by building performing applications. It's not enough any more to have your web site do crazy stuff, it is also required to do it crazy fast. This card is intended to give you an introduction to this emerging aspect of web development.

Read this introductory [performance study on Pinterest](…

Versatile Cucumber step regarding hovering above elements

Here's a pretty useful steps that hasn't made it into Spreewald yet.

It is best used with the auto-mapper for BEM classes in features/support/selectors.rb

When I hover above [selector] element

When /^I hover above (.*) element$/ do |selector|


When I hover above the album's image element

→ triggers a hover event on .album--image

rbenv: A basic introduction


We have projects that have been developed using many different versions of Ruby. Since we do not want to constantly update every old project, we need to have many Ruby versions installed on our development machines.

Rbenv does that for us.

How it works

Rbenv installs ruby version and ruby gems to ~/.rbenv/versions/VERSION_NUMBER/.... This way many different Rubies can be installed at once.

When you run ruby or gem or bundler or any other Ruby binary

  • rbenv looks for a file…

JavaScript: Hash/Object with default value

You can easily have a JavaScript hash/object that returns a default value for unset keys/properties – as long as you need to support only recent browsers.

The key are JavaScript proxies from ECMAScript 6 that allow implementing a custom getter method. They work like this:

var hash = new Proxy({}, {
  get: function(object, property) {
    return object.hasOwnProperty(property) ? object[property] : 'hello';

When you set a key,…

Linux: Quickly create large files for testing

To create a 10 GB file:

fallocate -l 10G huge_file.dat

AngularJS 1: How to keep "ng-hidden" elements from flickering on page load

When you have an element you want to hide, you can add a ng-show='isOpen' attribute to that element. When you set isOpen to false on the scope, the element will be hidden.

However, when you load the page, the element is usually rendered by the browser before Angular has loaded and had a chance to hide it.

Generic fix (prefer)

The ng-cloak directive was designed for exactly this purpose. Add a ng-cloak attribute or class (and more, see the link) to any element you want to …


Databases don't order rows unless you tell them so

There is no such thing as a "default order" of rows in database tables.

For instance, when you paginate a result set: When using LIMIT, it is important to use an ORDER BY clause that constrains the result rows into a unique order. Otherwise you will get an unpredictable subset of the query's rows. You might be asking for the tenth through twentieth rows, but tenth through twentieth in what ordering? The ordering is unknown, unless you specified ORDER BY.

Capybara: Disable sound during Selenium tests

If the application under test makes sound, you probably want to disable this during integration testing.

You can use the args option to pass parameters to the browser. For Chrome:

Capybara.register_driver :selenium do |app|, browser: :chrome, args: ["--mute-audio"])

I haven't found a corresponding command line option for Firefox.

Hat tip to kratob.

Partially disable animations for Angular 1.4+

If you use Angular 1.4+ together with Angular Animate, all ng-show, ng-hide, ng-class etc. are animated on default.

If you want only some elements to be animated there are 2 possibilities: Either disable animations globally and only run animations if the element has a certain class or enable animations globally and add a certain class if no animation is wanted.

Option 1: Enable animations only for html elements with class 'animate'

@app.config ['$animateProvider', ($animateProvider) ->

3267 cards