CSS tests and experiments

The pages listed here contain tests and experiments about features, possibilities, browsers’ bugs concerning CSS.

That is, over 200 experiments.

Ruby and Rails deprecation warnings and how to fix them

Add deprecation warnings and their solution or link to available solutions.

Global access to Rake DSL methods is deprecated. Please include Rake::DSL into classes and modules which use the Rake DSL methods.

Open your Rakefile and add the following line above YourApp::Application.load_tasks:

YourApp::Application.class_eval do
  include Rake::DSL
end

Use of ole/file_system is deprecated. Use ole/storage (the file_system api is recommended and enabled by default)...

Getting error Bundler::Plugin::API::Source

Error:

/home/.../ruby/gems/2.1.0/gems/bundler-1.14.3/lib/bundler/rubygems_ext.rb:45:in `full_gem_path': uninitialized constant Bundler::Plugin::API::Source (NameError)

Solution: Upgrade Rubygems beyond 2.6.9.

Properly require your "spec_helper"

Always use simply

require 'spec_helper'

If you mix it up like

require 'spec_helper'
require File.dirname(__FILE__) + '/../spec_helper'
require File.dirname(__FILE__) + '/../../spec_helper'
require File.expand_path('spec/spec_helper')

the file will be executed each time, since Ruby (at least 1.8) identifies it simply by the string you passed to "require".

Some useful vim settings

Below is a list of some VIM settings I find useful. You can add them to your .vimrc.

source $VIMRUNTIME/mswin.vim                 " adds Ctrl-X, Ctrl-C, Ctrl-V; block visual mode is now Ctrl-Q
behave mswin

set autowriteall                             " autosave all files when a buffer is closed

set backupdir=~/.temp                        " dont pollute local directory with swap file, backup files etc
set dir=~/.temp

set undofile                                 " enable persistent undo
set undodir=~/.temp

set encoding=utf-8

...

RubyMine: Better soft wraps

Sometimes your code has long lines:

describe 'foo' do
  describe 'bar' do
    really_long_line_really_long_line_really_long_line
    another_line

When you're working with multiple editor panes, such code will often be wider than the pane area:

describe 'foo' do                |
  describe 'bar' do              |
    really_long_line_really_long_|
    another_line                 |

To help with this you can activate Soft wraps in the RubyMine options under General → Editor .

Your code will now look like this:

des...

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.