3864 cards

Improving browser rendering performance

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

Vortrag: Elasticsearch Grundlagen und Rails-Integration mit searchkick

Was ist Elastic?

  • Suchmaschine, basierend auf Apache Lucene
  • größtenteils Open-Source
  • einige kommerzielle Features ("Elastic Stack", früher "X-Pack")
    • Zugriffsrechte (bis vor kurzen)
    • Monitoring
    • Reporting
    • Graph-Unterstützung
    • Machine Learning
  • REST-Api (JSON über HTTP)


Elastic antwortet per Default auf Port 9200

http GET :9200
  "name": "ntK2ZrY",
  "cluster_name": "elasticsearch",
  "cluster_uuid": "Bbc-ix5bQZij5vfFU29-Cw",
  "version": {
    "number": "6.7.1",
    "build_flavor": "...
Linked contentRepeats

Rails developers: Have better context in Git diffs

Git diffs show the surrounding contexts for diff hunks. It does so by applying regular expressions to find the beginning of a context. When it comes to Ruby, however, it will not find method heads and travel up to the class definition:

@@ -24,7 +24,7 @@ class TicketPdf # <=== Actually expected here: the method definition
       layout: "tickets",
-      assigns: { tickets: tickets }
+      assigns: { tickets: tickets, event_name: event_name }
Linked contentRepeats

Designing HTML emails

Note: Instead of building your e-mails manually as described below, you probably want to use a tool like MJML.

The 90s are calling: they want their tables back. Unfortunately, you need them all for laying out your HTML emails.

Email client HTML rendering is way more scattered than browser HTML. While you might have a pretty good understanding of what features and patterns you can use to support all major browsers, I doubt anyone masters this craft for HTML email clients.

The only way to ensure your email looks good...


How to make changes to a Ruby gem (as a Rails developer)

At makandra, we've built a few gems over the years. Some of these are quite popular: spreewald (> 1M downloads), active_type (> 1M downloads), and geordi (> 200k downloads)

Developing a Ruby gem is different from developing Rails applications, with the biggest difference: there is no Rails. This means:

  • no defined structure (neither for code nor directories)
  • no autoloading of classes, i.e. you need to require all files yourself
  • no active_support niceties

Also, their scope...

Check that an element is hidden via CSS with Spreewald

If you have content inside a page that is hidden by CSS, the following will work with Selenium, but not when using the Rack::Test driver. The Selenium driver correctly only considers text that is actually visible to a user.

Then I should not see "foobear"

This is because the Rack::Test driver does not know if an element is visible, and only looks at the DOM.

Spreewald offers steps to check that an element is hidden by CSS:

Then "foo" should be hidden

You can also check that an el...

Linked content

Minidusen: Filtering associated records

Minidusen lets you find text in associated records.

Assume the following model where a Contact record may be associated with a Group record:

class Contact < ApplicationRecord
  belongs_to :group

  validates_presence_of :name, :street, :city, :email

class Group < ApplicationRecord
  has_many :contacts

  validates_presence_of :name

We can filter contacts by their group name by joining the groups table and filtering on a joined column.
Note how the joined column is qualified as groups.name (rather than just `na...


Capybara: Find an element that contains a string

There is no CSS selector for matching elements that contains a given string ¹. Luckily, Capybara offers the :text option to go along with your selector:

page.find('div', text: 'Expected content')

You can also pass a regular expression!

page.find('div', text: /Expected contents?/i)

Note that if your CSS selector is as generic as div, you might get a lot more results than you expect. E.g. a <div class="container"> that surrounds your entire layout will probably also contain that text (in a descendant) and Capybara wil...

Linked contentRepeats

Action Mailer Previews (since Rails 4.1)

Since Rails 4.1 there is a preview-function to see what an e-mail will look like.

Integration to RSpec

All you need to do is implement a preview-class in spec/mailers/previews/notifier_preview.rb:

class NotifierPreview < ActionMailer::Preview
  def welcome

And change adjust the preview load path in your application.rb:

config.action_mailer.preview_path = "#{Rails.root}/spec/mailers/previews"

Then a preview will be available in the browser at <http://localhost:3000/rails/...


Invoices: How to properly round and calculate totals

While it might seem trivial to implement an invoice that sums up items and shows net, gross and vat totals, it actually involves a lot of rules and caveats. It is very easy to create invoices where numbers don't add up and a few cents are missing. A missing cent is a big deal for an accountant, so it is important for your invoices to list correct numbers.

Note that this is not legal advice. Also note that while this note has a number of code examples in Ruby and MySQL, the concepts apply to all programming languages and data stores.

When ...

Show/Hide Rubocop marking in RubyMine

If you have installed Rubocop in your project, RubyMine can show you Rubocop violations immediately in your editor. You probably already know this feature.



Enable/Disable marking

If your RubyMine does not show you any violations, although there are some, you may have to enable the setting first.

To do so, open Navigate -> Search Everywhere -> Actions (Or use the shortcut CTRL + SHIFT + A) and type in "rubocop", then you should see some...

How to configure file watchers in RubyMine


You need to install the official plugin, it is not bundled with RubyMine by default.

Example: Setup a watcher to verify rubocop integrity

First, open Settings -> Tools -> File Watchers. Then, configure rubocop to check every change to the VCS:


Note that the "program" argument must be part of your $PATH. I worked around this constraint by using b as a shim for bundle exec.


  • [File watchers documen...

Convert curl commands to ruby code

curl-to-ruby is a handy tool that converts your curl command to ruby code that uses the Net::HTTP library.


curl -X POST -d

will output to:

require 'net/http'
require 'uri'

uri = URI.parse("http://localhost:3000/oauth/token")
request = Net::HTTP::Post.new(uri)
  "email" => "email",
  "grant_type" => "password",
  "password" => "password",

req_options =...

MySQL: Disable query cache for database profiling

If you want to see how long your database queries actually take, you need to disable MySQL's query cache. This can be done globally by logging into a database console, run

SET GLOBAL query_cache_type=OFF;

and restart your rails server.

You can also disable the cache on a per query basis by saying


You also probably want to disable Rails internal (per-request) cache. For this, wrap your code with a call to ActiveRecord::Base.uncached. For example, as an around_filter:

def disable_cache



Test if two date ranges overlap in Ruby or Rails

A check if two date or time ranges A and B overlap needs to cover a lot of cases:

1. A partially overlaps B

2. A surrounds B

3. B surrounds A

4. A occurs entirely after B

5. B occurs entirely after A

This means you actually have to check that:

  • neither does A occur entirely after B (meaning A.start > B.end)
  • nor does B occur entirely after A (meaning B.start > A.end)

Flipping this, A and B overlap iff A.start <= B.end && B.start <= A.end

The code below shows how to implement this in Ruby on Rails. The example is a clas...


How to write complex migrations in Rails

Rails gives you migrations to change your database schema with simple commands like add_column or update.
Unfortunately these commands are simply not expressive enough to handle complex cases.

This card outlines three different techniques you can use to describe nontrivial migrations in Rails / ActiveRecord.

Note that the techniques below should serve you well for tables with many thousand rows. Once your database tables grows to millions of rows, migration performance becomes an iss...

Linked content

Using ffmpeg as a HLS streaming server

A practical and detailed walk-through tutorial on using ffmpeg for live-streaming HLS, filled with real-world examples.

  • Using FFmpeg as a HLS streaming server (Part 1) – HLS Basics
  • Using FFmpeg as a HLS streaming server (Part 2) – Enhanced HLS Segmentation
  • Using FFmpeg as a HLS streaming server (Part 3) – Multiple Bitrates
  • Using FFmpeg as a HLS streaming server (Part 4) – Multiple Video Resolutions
  • Using FFmpeg as a HLS streaming server (Part 5) – Folder Structure
  • Using FFmpeg as a HLS streaming server (Part 6) – Independent Seg...
Linked content

Tailwind versus BEM

The linked article compares two approaches for writing CSS:

  • A component library (like BEM)
  • Utility classes (like Tailwind)

It's good to know the pros and cons of each approach. Although we default to BEM, you might encounter a utility approach in a client project.

This website uses short-lived cookies to improve usability.
Accept or learn more