250 Form models [2d]


Read (or re-read) the following chapters from our book Growing Rails Applications in Practice Archive (it’s in our library):

  • New rules for Rails
    • Beautiful controllers
    • Relearning ActiveRecord
    • User interactions without a database
  • Creating a system for growth
    • Dealing with fat models
    • A home for interaction-specific code
    • Extracting service objects
    • Organizing large codebases with namespaces


We're no longer using the As naming convention when extending mo...

260 Network basics [0.5d]


  • How do HTTP requests and responses look like? What are HTTP headers? What are they used for?
  • Look at real-life HTTP exchanges:
    • Open makandra.com Archive
    • Open the Network tab of your browser inspector.
    • Reload the page.
    • Inspect each request and look at its request headers, response headers and payloads.
  • What is HTTP/2?

Digging deeper

  • Use curl to save a copy of http://www.sueddeutsche.de/.
  • Use curl to save the CSS stylesheet of sueddeutsche.de


270 More Software design [2d]

Software engineering principles

Read about the following software engineering principles:

  • Single Responsibility Principle
  • Law of Demeter (you already know this from an earlier exercise)

Look at the repo for your MovieDB, look at the repo for Cards. Find some examples where the principle was used, find some examples where it was violated.

Technical debt

  • Read about "Technical debt".
  • Read this article: [Are you ex...

275 The HTML5 platform [1.5d]


  • Get an idea of the varying support for HTML/CSS/JavaScript features in different browsers like Chrome, Firefox, Internet Explorer, Edge, Safari.
    • Look up a few modern features like "subgrid", ":has()" or "optional chaining" on Caniuse Archive .
  • Understand how we test for older browsers using BrowserStack Archive
    • You should already have received your BrowserStack credentials during the [initial setup](https://makandracards.com/makandra-orga/964-checklist-setup-a-new-makandra-emplo...

285 Frontend build pipelines in Rails [3d]

While working on a Rails application, your code base will grow a collection of different file types including:

  • Ruby (business logic)
  • HTML fragments (layouts and views)
  • CSS/Sass/SCSS (styles)
  • JavaScript (client-side behavior)
  • Static media (images, fonts, videos)

Except for the Ruby part, all these files are shipped to the browser. In this card we'll focus specifically on CSS, JS, fonts and static media files which are often summed up as assets.

You might already have noticed that Rails modifies those assets before delivering ...

287 The asset pipeline [1d]

The asset pipeline is one of Rails' two mechanisms how stylesheets, javascripts and images from your /assets folder are processed and delivered to the browser. Rails has a second pipeline called webpacker, which we will cover later.


288 50% Milestone

Congratulations, you just made it through about half of our curriculum deck! 🎉

We've covered the basics of your future stack and are about to dive deeper in some more advanced topics.

Now, read the article " Parting advice from an older Software Engineer Archive ". Try to memorize the key takeaways of 1-5 on the list.

Before you move on, add two reminders to your calendar:

  • Read [5 repeating cards](https://makandracards.com/makandra/search?query=repeats%...

290 Structuring CSS with the BEM pattern [4d]

We are we 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 Archive (in our library).

Talk with a colleague about the reasons for the naming conventions ...

295 Advanced JavaScript [2.5d]

Stepping forward from JavaScript Basics, the goal of this card is for you to be able to read and write more complex ES6+ code.

The JavaScript Object Model

Read The JavaScript Object Model: A deep dive into prototypes and properties.

There's also a video Archive of that talk in our internal library.

ES6 ("ES Next")

  • Understand [what modules are](h...

300 JavaScript: Writing asynchronous code [2.5d]


Understand how asynchronous JavaScript works:

301 Using external JavaScript libraries [1.5d]

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 Lodash Archive
  • Frontend Frameworks like Unpoly Archive
  • Wysiwyg (What You See Is What You Get) HTML editors
  • Datepickers
  • Sliders
  • Tooltips
  • Dialogs
  • ...

We generally use the yarn add command to add third party libraries to our application. It will persist the desired library version within the "package.json" file and pin matching d...

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

315 Advanced Ruby: Metaprogramming and DSLs [3d]

Rubymonk training

Read the following Rubymonk articles:

316 Advanced Ruby: More metaprogramming with Modularity and ActiveSupport::Concern [2d]


Method lookup

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

  • include
  • extend
  • singleton class
  • prepend

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?

You may also read more about the Ruby Object Model, if all o...

320 State machines [3d]


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
    draft --> pending
    pending --> rejected: Reason
    rejected --> pending
    pending --> accepted

Change the visibility rules (Consul powers) so:

  • All users can see accepted movies of other use...

325 Consuming external APIs with JavaScript [2d]

Exercise 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
  • Now write a Cucumber feature that tests that the map shows the correct location.


  • The purpose of this lesson to learn interacting with external APIs from JavaScript. Even though this exercise can be implemented trivially by embedding a Google Maps iframe Archive , don't do that for the purpose ...

326 Consuming external APIs with Ruby [1d]

Exercise 1: XML

On the start page of your Movie DB, show a random actor who was born today:


Consider the best place to put the new logic. Should it be an existing class or a new class?

Exercise 2: JSON

Automatically retrieve the year of a movie for any new movie entered into MovieDB, using the [themov...