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](http://www.smashingmagazine.com/...

While debugging an intricate issue with failed HTTP requests I have come to appreciate the more advanced features of the httpclient Rubygem.

The gem is much more than a lightweight wrapper around Ruby's net/http. In particular:

• A single HTTPClient instance can re-use persistent connections across threads in a thread-safe way.
• Has a custom and configurable SSL certificate store (which you probably want to disable by default...

We organize our daily work with issues in our Linear workspace.

Issue format

A good issue needs to be precise. It should be very clear what is part of an issue, and what is not. If there are different expectations between the person who writes and who implements an issue, there will be rejects.

To this end, we use a consistent format for issues that looks like this:

Issue: Autocomplete

As a journalist, I want to have an autocomplete in the search bar, to have a more efficient way to find articles.

Acceptance criteri...

I recommend install Node.js using nvm. This way you can have multiple Node versions in your ~/.nvm. You also won't need to install global packages with sudo anymore.

Node via nvm will automatically bring npm. yarn will automatically be available if corepack is enabled for node.

Installing nvm

DigitalOcean has a HOWTO for installing nvm on Ubuntu (16.04, [18.04](https://www.digitalocean.com/community/tutorials/how-to-...

SitePrism gives you a simple, clean and semantic DSL for describing your site using the Page Object Model pattern, for use with Capybara in automated acceptance testing.

The Page Object Model is a test automation pattern that aims to create an abstraction of your site's user interface that can be used in tests. The most common way to do this is to model each page as a class, and to then use instances of those classes in your tests.

If a class represents a page then each element of the page is represented by a method that, when cal...

Spreewald comes with a selector_for helper that matches an English term like the user's profile into a CSS selector. This is useful for steps that refer to a particular section of the page, like the following:

Then I should see "Bruce" within the user's profile
                                 ^^^^^^^^^^^^^^^^^^

If you're too lazy to manually translate English to a CSS selector by adding a line to features/env/selectors.rb, we already have an [auto-mapper to translate English into ...

tig is a command line explorer for Git that is just awesome. Install via apt-get or brew.

Handy commands

• t ("tree"): Directory-structure based access. You'll see the current directory annotated with the latest change date and its author. Navigate with arrow keys or vim.
• b ("blame"): Opens the file under the cursor and annotates each line with change date and author.
• d ("diff"): Like ENTER on a commit, but arrow keys will scroll the diff!
• /: Search current view (e.g. commit list, diff). Jump to next hit with n....

Reason: You very likely have a model that has a delay attribute.

You can configure Sidekiq to remove its delay method by adding this to your Sidekiq initializer:

Sidekiq.remove_delay!

If you need to keep Sidekiqs delay features, add Sidekiq.hook_rails! before the option above. The sidekiq methods will be prefixed with sidekiq_ then.

Free Bootstrap theme resembling Material Design.

Bootswatch offers Sass and Less files, so the theme can easily be integrated into your usual Rails application.

Implements only Bootstrap features which means that some Material stuff is missing, but also that you can easily use or replace the theme.
Does not come with extra JavaScript; some effects like button click ripples are implemented via CSS.

Also check out their other themes which can be used in a similar fashion.

Navigation

CTRL + SHIFT + ALT + N

Search for any symbol in your application, like CSS classes, Ruby classes, methods, helpers etc.

CTRL + SHIFT + N

Search for filename in your application (also dependencies)

CTRL + E

Open a list of recently opened files

ALT + POS1

Open a the navigation bar as a context menu. Allows you to quickly navigate between files.

CTRL + G

Go to line

Actions

CTRL + SHIFT + A

:...

When running capybara with Chrome you might start seeing frequent "no alert open" errors when trying to interact with browser dialogs. This seems to be triggered by a recent Chrome update.

Apparently these dialogs no longer appear instantly. Spreewald 1.2.11 fixes the "When I confirm the browser dialog" and similar steps by waiting for the dialog to appear.

This blew my mind today:

• 12 Little-Known CSS Facts
• 12 Little-Known CSS Facts (The Sequel)

Please make sure to check browser support for CSS features on Can I Use and the Mozilla Development Network before using.

Favorites

• outline-offset: specify how far away from the element an outline is rendered
• ::first-letter: matches the first letter insid...

Large projects usually have large test suites that can run for a long time.
This can be annoying as running tests blocks you from picking up the next story -- but it doesn't have to be that way!

Simply clone your project's repo twice (or even more often).

When your work on a feature branch is done, simply push that branch and check it out on your 2nd copy to run tests there.
You can pick up a new story and work on that on your "main" project directory.

If you do it right, you will even be able to run tests in both your 2nd copy and your m...

In most of our applications, users have their first and last name stored in separate columns. However, specifying them separately quickly gets annoying, especially when proxying them from cucumber_factory:

Given there is a user with the first name "Dominik" and the last name "Schöler"

Wouldn't it be nice if you could just say:

Given there is a user with the name "Dominik Schöler"

and have FactoryGirl assign first and last name automatically? The code below achieves that!

##...

If you need to follow links, click buttons, etc. using Capybara inside an <iframe>, you can do it like this:

page.within_frame('iframe-id') do
  fill_in 'E-mail', with: 'foo@bar.com'
  fill_in 'Password', with: 'secret'
  click_button 'Submit'
end

Instead of the frame's [id] attribute you may also pass a Capybara::Node for an <iframe>.

If you're also using Cucumber you could make a meta-step like this:

When /^(.*?) inside the (.*?) frame$/ do |step_text, frame_id|
  page.within_frame(frame_id) do
    s...

Capistrano 3 is a major rework of the framework and requires several adjustments to your deploy configuration files. The biggest change is that they moved away from their custom DSL and use Rake instead. For connecting with and operating on the servers, they bring a new gem SSHKit which does the heavy lifting. It's SSHKit's DSL that is used anywhere inside the Rake tasks. See #Resources at the bottom for examples.

Step 1: Upgrade guide

For migration from 2 to 3, follow this tutorial: [Capistrano 3 Upgrade Guide](https://semaphorec...

If you have FactoryGirl traits like this:

factory :movie do

  title 'Sunshine'
  year 2007
  
  trait :vintage do
    year 1951
  end
  
  trait :moody do
    title 'Interstellar'
  end

end

You can now call them from Cucumber Factory like this:

Given there is a movie (vintage, moody)

Please don't use the horrible datetime_select helper. It has a terrible UI. Always prefer to use a visual time picker like Rome instead.

In case everything has failed and you do need a Cucumber step to pick a datetime datetime_select, here it is:

When(/^I select the time (\d+)\-(\d+)\-(\d+) (\d+):(\d+) from "(.*?)"$/) do |year, month, day, hour, minute, label_text|
  label = page.find('label', text: label_text)
  id = label[...

You might wonder about this request in your test.log:

Started GET "/__identify__" for 127.0.0.1 at 2015-04-29 18:00:02 +0100

This is what happens: For drivers like Selenium, Capybara will boot up a Thin or Webrick server in a separate thread. It then makes a GET request to /__identify__ to see if the server is ready to accept requests.

Since you don't have a route that responds to /__identify, Capybara will wrap your Rails app in...

jquery-placeholder is a simple jQuery plugin that enables form placeholders in browsers that do not support them natively, i.e. IE < 10.

Properties

• Works in IE6.
• Automatically checks whether the browser natively supports the HTML5 placeholder attribute for input and textarea elements. If this is the case, the plugin won’t do anything. If @placeholder is only supported for input elements, the plugin will leave those alone and apply to textareas exclusively. (This is the case for Safari 4, Opera 11.00, and possibly other browsers.)
  ...

If you want to grow a Ruby Array, you might find out about #fill but it is not really what you are looking for. [1]
For arrays of unknown size that you want to grow or shrink to a fixed size, you need to define something yourself. Like the following.

Array.class_eval do

  def in_size(expected_size, fill_with = nil)
    sized = self[0, expected_size]
    sized << fill_with while sized.size < expected_size
    sized
  end

end

Use it like this:

>> [1, 2, 3].in_size(5)
=> [1, 2, 3, nil, nil]

...

Code folding is a very useful feature to me. It gives me a quick overview over a file and keeps me from scolling like a hamster in its wheel.

Keyboard shortcuts:

Collapse/expand current code block

strg -/+

Collapse/expand the whole file

strg ctrl -/+

When diving into Cucumber features or huge Ruby classes, I usually collapse all and the gradually expand what I need.

This cheat sheet ... aims at providing a quick reference to
the most commonly used features in AngularJS.