Search_spinner

How to use CSS to rotate text by 90° in IE8 (and modern IEs)

If you want to rotate text, you can use CSS transforms in somewhat modern browsers to rotate the container element.
However, if you need to support IE8, transform is unavailable (if need only IE9 support, ignore the following and use -ms-transform).

Here is a solution that worked for me:

<div class="my-element">Hi!</div>
.my-element {
  display: inline-block;
  transform: rotate(90deg);
  -ms-writing-mode: tb-rl;
  -ms-transform: none;
}

This way, browsers will use CSS transforms when available – w…

Some versatile Cucumber steps that operate on DOM elements

Here are some pretty useful steps that haven’t made it into Spreewald yet. These require 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

When I…

Repeats

Do not pass an empty array to ActiveRecord.where when using NOT IN

Be careful with the Active Record where method.
When you accidentally pass an empty array to the where method using NOT IN, you probably will not get what you expected:

User.where("id NOT IN (?)", [])

Even though you might expect this to return all records, this actually results in this query:

SELECT `users`.* FROM `users` WHERE (id NOT IN (NULL)) 

This will not return anything.

Angular: Solving "$digest already in progress" error

TL;DR You shouldn’t call $scope.$apply() or $scope.$digest() inside a function that can be invoked by Angular – e.g. in an ngClick.

The linked Stackoverflow answer has a quick overview of techniques to apply changes to a scope. It also explains what might be wrong when you’re getting the error $digest already in progress and gives some information that every Angular developer should know.

Slack integration for deployments via Capistrano

You can hook into Slack when using Capistrano for deployment. The gem capistrano-slack does most of the heavy lifting for you – here is how we integrated it.

We were not too happy with the Gem’s default tasks, and they did not work on our project because their tasks rescue some exceptions from Faraday (whose class does not exist on our version, thus resulting in a NameError). So we defined our own tasks and hooked into Capistrano’s deploy events [like we usually do]…

External contentRepeats

Rails 3+: strip_heredoc (String) - APIdock

Copied from the documentation:


strip_heredoc() public

Strips indentation in heredocs.

For example in

if options[:usage]
  puts <<-USAGE.strip_heredoc
    This command does such and such.

    Supported options are:
      -h         This message
      ...
  USAGE
end

the user would see the usage message aligned against the left margin.

Technically, it looks for the least indented line in the whole string, and removes that amount of leading whitespace.

Angular: Understanding how parent and child scope meet on a directive declaration

Say you have the following markup:

{{ someParentVariable = 42 }}

<div child var="{{ someParentVariable }}" ng-click="foo()">
  {{ var }}
</div>

Any angular expression on the child element will be evaluated
before child is initialized. Hence, {{ }} is always evaluated in the
parent scope.
attributes.foo will be "42" inside the child directive
(as a string, because HTML attributes are always strings).

scope: true

If the child directive sets scope:true, a new child scope is
attached to the directive’s element…

Linux: Kill a process matching a partial name

This is useful to kill processes like ruby my-script.rb:

pkill -f my-script.rb

With great power comes great responsibility.

Repeats

How to overwrite and reset constants within Cucumber features

Note: Prefer to not configure your app using global constants. Prefer to set keys in Rails.configuration instead (in application.rb).


In order to save the original value of a constant, set the new value and restore the old value after a scenario was completed, you can use the following helper. It takes care of saving the old constant value, setting the new one without throwing warnings and resets the value with an After hook.

This module also enables you to introduce new global constants.
Since thes…

Angular Style Guide

Opinionated Angular style guide for teams by @john_papa

Not everything in this guide works perfectly for us, but is still a good start.

Workaround for some cases of last-child in IE8

IE8 does not support the :last-child CSS meta selector. If you need to support it, this workaround may help you.

There are probably many cases where you’d use :last-child just for the sake of styling all elements but the last one:

.foo {
  border-bottom: 1px dashed #000;
}
.foo:last-child {
  border-bottom-width: 0;
}

You can use CSS sibling selectors to achieve what you want:

.foo + .foo {
  border-top: 1px dashed #000;
}

Note how we now use a top border instead of a bottom border in this example, but most often you…

Auto-destruct in 49 days

Updated: How to create memory leaks in jQuery

Clarified that all mentioned issues also apply to current versions of jQuery 2.

External content

Communication between collaborating directives in Angular

What if a complicated component comes along that is naturally modeled by multiple directives? This group of directives, as a whole, form a single self contained component. None of directives in the group can stand alone because they only make sense when used together; they collaborate; they are aware of each other and need to communicate with each other.

This post will discuss best practices for managing communication among collaborating directives and illustrate these practices with an example.

How to enable WebGL in Chrome

Check your GPU state on chrome://gpu. If it reads “WebGL: Hardware accelerated” in the first list, you’re set. Else:

  1. Make sure chrome://flags/#disable-webgl is disabled (there should be a link “Enable”)
  2. If that does not help, try to additionally enable chrome://flags/#ignore-gpu-blacklist.
Repeats

Write custom RSpec matchers

There are three ways to define your own RSpec matchers, with increasing complexibility and options:

1) Use RSpec::Matchers.define

RSpec::Matchers.define :be_a_multiple_of do |expected|
  match do |actual|
    actual % expected == 0
  end
  
  # optional
  failure_message_for_should do |actual|
    "expected that #{actual} would be a multiple of #{expected}"
  end
  
  # optional
  failure_message_for_should_not do |actual|
    "expected that #{actual} would not be a multiple of #{expected}"
  end
end

Th…

Auto-destruct in 51 days

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

Updated link to my own fork.

Script was seriously broken, since it counted some watchers multiple times, but ignored all watchers in isolate scopes.

External contentRepeats

Github: Getting permanent links to files

Please don’t simply copy line number links from Github. The URL usually contains a branch name like master:

https://github.com/makandra/upjs/blob/master/lib/assets/javascripts/up/link.js.coffee#L76

If someone now posts an insertion or deletion to that file into master your link points to the wrong line!

A better way is to press the Y key after clicking on a line number. This will transform the URL to another URL that points to the particular commit:

```
https://github.com/makandra/upjs/blob/b3b1491dfa1e3e83265ef228631382868…

Repeats

How to doubleclick in Selenium

Put the attached file into features/support/.

Example usage:

When /^I open the task named "(.+?)"$/ do |task_name|
  task = page.all('.task').detect do |t|
    t.find('.label').text.downcase == task_name.downcase
  end
  
  task.double_click
end

Note: only Selenium understands doubleclicks.\ Credits: the attached Capybara issue discussion.

2747 cards