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

How to get the currently selected text in Javascript

Simple:

window.getSelection().toString();

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

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

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.

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

Linux: Quickly create large files for testing

To create a 10 GB file:

fallocate -l 10G huge_file.dat

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|
  page.find(selector_for(selector)).hover
end

Example:

When I hover above the album's image element

→ triggers a hover event on .album--image

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|
  Capybara::Selenium::Driver.new(app, browser: :chrome, args: ["--mute-audio"])
end

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

Hat tip to kratob.

rbenv: A basic introduction

Why

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

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) ->
  $animateProvider.classNameFilter(/\ban...

Never use SET GLOBAL sql_slave_skip_counter with a value higher than 1

If you have a replication error with MySQL and you know the "error" is okay (e.g. you've executed the same statement at the same time on 2 masters which sync each other), you can skip this error and continue with the replication without having to set up the slave from the ground up.

stop slave;
set global sql_slave_skip_counter = 1;
start slave;

But what if you have multiple errors which you want to skip? (e.g. you've executed multiple statement at the same time on 2 masters which sync each other)
Still do not use a value highe...

Ruby 1.8.7: Bundler crashes with "deadlock" and core dump

Error

deadlock 0x7f8a4160a360: sleep:- (main) - /home/me/.rbenv/versions/1.8.7-p375/lib/ruby/gems/1.8/gems/bundler-1.14.3/lib/bundler/worker.rb:43
deadlock 0x7f8a38c03b08: sleep:-  - /home/me/.rbenv/versions/1.8.7-p375/lib/ruby/gems/1.8/gems/bundler-1.14.3/lib/bundler/worker.rb:56
*** longjmp causes uninitialized stack frame ***: /home/me/.rbenv/versions/1.8.7-p375/bin/ruby terminated

... followed by a backtrace, memory map and more.

Fix

The culprit seems to be Bundler 1.14 when used with Ruby 1.8.7. [Downgrade to the maximu...

Error "undefined method last_comment"

This error message may occur when rspec gets loaded by rake, e.g. when you migrate the test database.

NoMethodError: undefined method 'last_comment' for #<Rake::Application:0x0055a617d37ad0>

Rake 11 removes a method that rspec-core < 3.4.4 depends on. To fix, lock Rake to < 11 in your Gemfile:

  gem 'rake', '< 11', # Removes a method that rspec-core < 3.4 depends on

RSpec matcher to check if two numbers are the same

You can usually just use the eq matched to compare two numbers:

expect(deal.total).to eq(120)

If the actual value is a BigDecimal, you might have issues when you match it against a Float:

expect(deal.total_price).to eq(1200.99)

In these cases, try matching it against another BigDecimal:

expect(deal.total_price).to eq BigDecimal(1200.99)

If you don't like the syntax, our rspec_candy gem has a matcher that will compare Fixnums (integers), Floats and `BigDecima...

How to install guard-livereload 2.5.2 on Ruby < 2.2.5

There are some inconvenient Gem dependencies. Resolve them by adding/modifying these lines in your Gemfile:

  gem 'guard-livereload', '>= 2.5.2', require: false # Fixes a security issue
  gem 'listen', '< 3.1' # 3.1 requires Ruby 2.2.5

It is not possible to install guard-livereload 2.5.2 on Ruby 1.8.7 because it depends on guard 2.8, which requires Ruby 1.9.

eventmachine 1.0.3 failing to install native extensions

Try updating to 1.0.4 right in the Gemfile.lock.

JSONP for Rails

The rack-contrib gem brings a JSONP middleware that just works™. Whenever a JSON request has a callback parameter, it will wrap the application's JSON response appropriately.

The project is a bit dated, but the JSONP middleware is ok.

Sass: Don't put CSS rules into partials that you import multiple times

TLDR: When you put CSS rules into a partial and import that partial multiple times, the CSS rules will be duplicated in the compiled CSS.


Here is a Sass partial called _fonts.sass that contains both CSS rules and a mixin:

@font-face
  font-family: SuperType
  src: url('supertype.woff')
  
=title-font
  font-family: SuperType

This _fonts.sass is not practical in CSS projects that are organized over multiple files: When you...

[jruby] TruffleRuby Status, start of 2017

TruffleRuby is an experimental Ruby implementation that tries to achieve ~10x performance over MRI.

This has been on our radar for a while. They seem to have made significant progress running Rails, reducing start-up time and becoming runtime-independent of the JVM.

Also see [Running Optcarrot, a Ruby NES emulator, at 150 fps with the GUI!](https://eregon.me/blog/2016/11/28/optcarrot.htm...

Geordi 1.6.1 released

  • dumple uses --clean option for PostgreSQL/pg_dump

An Introduction to Sending HTML Email for Web Developers

A comprehensive introduction to sending HTML emails.

Intro:

HTML email: Two words that, when combined, brings tears to a developer’s eyes. If you’re a web developer, it’s inevitable that coding an email will be a task that gets dropped in your lap at some time in your career, whether you like it or not. Coding HTML email is old school. Think back to 1999, when we called ourselves “webmasters” and used Frontpage, WYSIWYG editors and tables to mark up our websites.

Table of Contents

  • Introduction To Sending Email Link
  • Email List B...

Enabling ** in your bash

You may know the double asterisk operator from Ruby snippets like Dir['spec/**/*_spec.rb'] where it expands to an arbitrary number of directories.
However, it is disabled by default on most systems. Here is how to enable it.

If you check your globstar shell option, it is probably disabled:

$ shopt globstar
globstar           off

In that case, ** behaves just like * and will match exactly 1 directory level.

$ ls spec/**/*_spec.rb
spec/models/user_spec.rb

To enable it, run

shopt -s globstar

The double ast...

Chartkick

Create beautiful Javascript charts with one line of Ruby.

Promising chart library for easily rendering charts with Google Charts.

This seems to not submit your data points to Google.