64 cards

290 Structuring CSS with the BEM pattern

We are using the BEM pattern ("Block, Element, Modifier") to structure our CSS in all new projects. We try to migrate legacy projects to BEM, block-by-block.


Read the chapter "Taming Stylesheets" from our book Growing Rails Applications in Practice (in our library).

Talk with a colleague about the reasons for the naming conventions we use:


Why are elements preceded by a double dash?

Why is it important modifiers start with -?

Feel the…

301 Using external JavaScript libraries

Just like we use gems on the server, we use third party JavaScript libraries in the browser. These typically provide functionality like:

  • General support libraries like jQuery or lodash
  • Wysiwyg HTML editors
  • Datepickers
  • Sliders
  • Tooltips
  • Dialogs

Choosing and installing a JavaScript library

Take a look at the popular lodash library.

  • Try to understand what it does.
  • Lodash comes in two variants "Core build" and "Full build". Why is that? Why would you always prefer the "Core …

316 Advanced Ruby: More metaprogramming with Modularity and ActiveSupport::Concern

Learn about method lookup

Understand all the terms in How Ruby method lookup works, in particular:

  • include
  • extend
  • singleton class

Do you understand why object.extend(SomeModule) is the same as object.singleton_class.include(SomeModule)?

How does include and extend work together with inheritance?

Learn about metaprogramming libraries

  • Find out how ActiveSupport::Concern works.
  • Unde…

326 Consuming external APIs from Ruby

Exercise 1: XML

On the Movie DB index, show a random actor who was born today:

Exercise 2: JSON

Automatically retrieve the year of a movie for any new movie entered into MovieDB, using the themoviedb.org API. For the UI this means that there is no longer a "Year" field when creating a movie. It is automatically fetched a…

345 Advanced git


  • Understand what a "fast forward" is.
  • Understand the differences between git diff and git diff --cached.
  • Undestand the difference between git reset and git reset --hard
  • Use add -p
  • Use checkout -p
  • Use git rebase.
  • Use git rebase --onto.
  • Use git rebase -i
    • Understand what it means for pushing to a remote, and for working with your colleagues
  • What does git commit --amend do?
    • Understand what it means for pushing to a remote, and for working with your colleagues
  • Understand the differences …

370 Technology choice

Read the following chapters from our book Growing Rails Applications in Practice:

  • Surviving the upgrade pace of Rails
  • Owning your stack
  • On following fashions

Discuss each chapter with your mentor.

295 Advanced Javascript


  • Read about Coffeescript:
  • What are some pros, what are some cons of using Coffeescript?
  • Browsers don't understand Coffeescript. Find the component in our stack that fixes this.
  • Find some larger piece of Javascript in the Cards or MovieDB repo and convert it to Coffeescript.
  • Open the Javascript code that was generated by the Coffeescript you just crea…

305 Internal APIs and client-side rendering

In a web application you often need to move data between the client (HTML, Javascript) and the server (Ruby, Rails).

Step 1: Moving HTML snippets

Add a find-as-you-type search to MovieDB. Above the list of movies there should be a text input that updates the list with the search results as the user is typing in the query. The user should not have to press a "Search" button (hint: you can bind to the [input](https://makandracards.com/makandra/33699-input-a-dom-event-that-is-fired-whenever-a-text-field-cha…

320 State machines


Movies in MovieDB should have one of the following workflow states:

  • draft
  • pending
  • accepted
  • rejected

A movie always begins as a draft and then transitions through the states as it's getting reviewed. This could be a typical state flow for a movie:

draft => pending => rejected => pending => accepted

Change the visibility rules (Consul powers) so:

  • All users can see accepted movies of other users.
  • All users can see the movies they created themselves, regardless of their state.
  • A…

330 Images


  • Understand the difference between raster images (like .png) and vector images (like .svg).
  • Understand why a print designer talks a lot about physical measurements like "cm" and "DPI" and why this rarely matters to us.
  • Understand how JPEG compression degrades the image quality every time your save the file.
  • Understand the strengths and weaknesses of the following file formats:
    • png
    • gif
    • jpg
    • svg

High density displays

Browse the internet in order to:

  • Understand the dis…

350 Visual design basics

Read the following material:

Discuss what you took away with your mentor.

Look at 3 r…

372 Dealing with legacy applications

Understand how we're approaching applications that are either old or adapted from a different team:

  • Add integration tests for the happy path
  • Always add tests on whatever we work on
  • Make sure setup for a new developer is as frictionless as possible (ideally it's bundle && rake db:create db:migrate)
  • Make sure deployment is as frictionless as possible
  • Setup failure notifications

Also have a look at our homepage.

300 Javascript: Writing asynchronous code


Browse the internet to answer the following questions:

  • What are “synchronous” or “blocking” APIs versus “asynchronous” APIs?
  • Why does $.ajax not simply return the response from the server?
  • Why is asynchronous code such a big issue in Javascript (as opposed to the code we usually write in Ruby)?
  • What are "callbacks" in Javascript? Can you find examples for libraries that use callbacks to deal with asynchronity?
  • What are "promises" in Javascript? Can you find examples for libraries that use promises to deal with a…

315 Advanced Ruby: Metaprogramming and DSLs

Rubymonk training

Read the following Rubymonk articles:

325 Consuming external APIs with Javascript

Example 1: Google Maps

  • In MovieDB, add a new field “Principal filming location”.
  • In a movie’s show view, geocode that location and show a Google map centered around it
  • Keep the Inspector’s Network tab open while the map is loading. Then observe the tab as you zoom and pan around in the map. Can you get some insight how Google Maps works?


Write a Cucumber feature that tests that the map shows the correct location. Hint: Use execute_script to talk with the Javascript that creates and centers the map.

Example 2: Gend…

335 Secure storage of file attachments

Read Deliver Paperclip attachments to authorized users only

Add the following feature to MovieDB:

  • Actors have a contract document
  • Only users with an admin role are allowed to upload or download contract documents
  • It should be impossible for an unauthorized user to access a contract document, e.g. by guessing the download URL

Create two implementations of this requirement:

  1. Contracts are saved to RAILS_ROOT/public/system, but incl…

355 Requirements analysis and minimum viable UIs

Many of our clients can't or don't want to design their user interfaces. In the absence of a good UI design, you should always be able to come up with a default. Since the user interface makes up 70% of a typical web application, this is closely related to requirements analysis and cost estimation.


Talk with your mentor about the following topics:

  • Extracting nouns from requirements prose
  • Drawing ER diagrams and minimizing boxes
  • Why nouns from the client domain do not always map to Ruby models 1:1. E.g. only if a "client"…

380 PostgreSQL vs. MySQL

Find out some differences between PostgreSQL and MySQL. At the very least you should look at differences in:

  • Features
  • Column types
  • Index types
  • SQL syntax
  • How to open a console, create, list and drop databases.


  • Convert MovieDB to the database you're not using right now.
This website uses cookies to improve usability and analyze traffic.
Accept or learn more