Chrome allows you to throttle the Network and the CPU. Both settings are useful to measure the performance of you application and reproduce performance issues (Example Debugging frontend performance issues with Chrome DevTools).

You find the settings in: DevTools > Performance > Capture Settings (Gear icon in the right corner) > `CPU: No...

When we write a form with date fields, we often use graphical data picker like Rome to get a consistent calendar popup on all browsers.

When you integrate a date picker popup, remember to also set autocomplete="off" on the text input that opens the calendar on click. Otherwise the autocomplete suggestions will cover the calendar box and make it unusable:

If you are using a tool like Unpoly you might want to set autocomplete="off" i...

Turns out, Cucumber::MultilineArgument::DataTable#diff! caches some stuff. Code of the following form will not work as intended:

Then('some table should look like') do |expected_table|
  patiently do
    actual_table = calculate_actual_table
    expected_table.diff!(actual_table) # not actually patient, will keep failing if it failed the first time
  end
end

Instead, simply use

expected_table.dup.diff!(actual_table)

You can use local copies of gems in your Gemfile like this:

gem 'spreewald', :path => '~/gems/spreewald'

As soon as you have bundled your project with the local copy of the gem, all code changes in the copy will be available on your project. So you can for example set a debugger or add console output in the gem and use it from your project.
If you checked out the gem with your versioning tool, you can easily reset your changes afterwards or make a pull request for the gem if you improved it.

Don't commit a Gemfile with local pat...

Your development machine is usually on a very good network connection.
To test how your application behaves on a slow network (e.g. mobile), you can simulate limited bandwidth.

Chrome

• Open the dev tools (Ctrl+Shift+I or F12) and switch to the "Network" tab
• In the row below the dev tool tabs, there's a throttling dropdown which reads "Online" by default.
• Inside the dropdown, you will find a few presets and an option to add your own download/upload/latency settings.

Firefox

• Open the dev tools (Ctrl+Shift+I or F12) and switc...

Intro

Embedding videos on a website is very easy, add a <video> tag to your source code and it just works. Most of the time.

The thing is: Both the operating system and Browser of your client must support the container and codecs of your video. To ensure playback on every device, you have to transcode your videos to one or more versions of which they are supported by every device out there.

In this card, I'll explore the available audio and video standards we have right now. The goal is to built a pipeline that transcodes unknown ...

CoffeeScript and JavaScript (ECMAScript) both have operators in and of. Each language use them for more than one purpose. There is not a single case where the same operator can be used for the same purpose in both languages.

Check if an object (or its prototype) has a property

CoffeeScript

var hasFoo = 'foo' of object

JavaScript

var hasFoo = 'foo' in object;

Iterate through all properties of an object
================================...

Authentication is a special part of web applications. On the one hand, it usually is a crucial security mechanism restrict access to certain people and roles. On the other hand, most users authenticate only once, so it is very unlikely to spot issues by accident.

So, here comes a quick checklist to help you verifying your authentication solution is all set.

• This should be default: use HTTPS with HSTS. The HSTS part is important.
• Use a reliable authentication solution, e.g. Clearance or [Devise...

By default, Devise redirects to a sign-in form when accessing a route that requires authentication. If for some reason you do not want this, but use Basic Authentication (and the corresponding browser username/password dialog) instead, this is a simple change.

Note that Devise's default configuration actually only redirects requests for HTML content (as requested by the HTTP Accept header).
For all other formats (like JSON) it would use Basic Auth if the http_authenticatable setting was enabled. So you can simply enable that flag and cl...

Code comments allow for adding human readable text right next to the code: notes for other developers, and for your future self.

As always, with great power comes great responsibility. Code comments can go wrong in many ways: they may become outdated, silently move away from the code they're referring to, restate the obvious, or just clutter files.

Good Comments

Here are some simple rules to keep your comments helpful:

Avoid stating what some code does – prefer the Why

Some say, perfect code would not need a single comment. Th...

Here are some popular mistakes when using nested forms:

• You are using fields_for instead of form.fields_for.
• You forgot to use accepts_nested_attributes in the containing model. Rails won't complain, but nothing will work. In particular, nested_form.object will be nil.
• The :reject_if option lambda in your accepts_nested_attributes call is defined incorrectly. Raise the attributes hash given to your :reject_if lambda to see if it looks like you expect.
• If you are nesting forms into nested forms, each model involved ne...

TL;DR Use the #remove_<mounted_attribute>! method to delete attachments. Also, save the record after removing the file!

As you know, Carrierwave file attachments work by mounting an Uploader class to an attribute of the model. Though the database field holds the file name as string, calling the attribute will always return the uploader, no matter if a file is attached or not. (Side note: use #present? on the uploader to check if the file exists.)

class User < ApplicationRecord
  mount :avatar, AvatarUploader
end

...