62 cards

185 Our process [2.5d]

makandra's development process

Learn about our process:


In particular you should understand:

  • Why do we have a process?
  • What is a story?
  • What metrics does our process optimize for?
  • How to divide large requirements into stories. When is a story too small, when is it too large?
  • The lifecycle of a story
  • How to write a story

Story format

Read the card [Project management best practices: Stor...

186 Linux basics [1d]



Experiment and do something useful with the following commands. You might need to study the commands' man pages and add parameter...

187 Exception notifications [0.5d]

190 Pagination [0.5d]


  • Understand why we use pagination
  • Understand some pros and cons of replacing pagination with "infinite scrolling"


  • Create 7500 movies in MovieDB (hint: Doing it in a single transaction is much faster). Load the movies index and measure how long it renders.
  • Use the will_paginate gem to add pagination to MovieDB's list of movies. How long does the movies index render now?
  • Inspect the HTML generated by will_paginate. Customize the style so it matches the look of your MovieDB.
  • `tail -f log/develop...

200 Migrations [2d]


205 Basic file uploads and image versions [2d]


  • Learn to treat files as an ActiveRecord attribute type, like :string or :integer



In MovieDB, allow movie authors to upload a movie poster using the carrierwave gem:

  • The...

215 Browser automation with Capybara and Selenium WebDriver [2d]

We use Selenium WebDriver Archive integrated with Cucumber/Capybara for full-stack integration testing.

Try and use it

If you haven't yet, try to make your MovieDB cucumber features run in a real browser. To do this

  • add the selenium-webdriver and the database_cleaner gems

  • tag your features with @javascript

  • set up DatabaseCleaner for cucumber, by adding this to your features/support/env.rb:

    DatabaseCleaner.strategy = :transaction
    Cucumber::Rails::Database.javascript_strategy = ...

225 Event bubbling and delegation [1.5d]


You have the following HTML structure:

<div class='some-class'>...</div>

<div class='container'>
  <div class='my-target'>...</div>
  <div class='my-target'>...</div>
  <div class='my-target'>...</div>

<div class='other-class'>...</div>

If you want to run Javascript code whenever someone clicks on a <div class='my-target'>...</div>, you can do this in three different ways:

code = function(event) {
  alert("Someone clicked on .my-target!");

$(document).on('click', '.my-target', code);

230 Unobtrusive JavaScript, AJAX, Reusable components [3d]


  • Learn about "AJAX" and how it improved classical web development:
    • Without AJAX we could only replace entire screens. Web applications were a series of screens, like a slide show.
    • With AJAX we can replace fragments without swapping out the entire screen.
    • By only updating fragments we keep transient state like scroll positions, unsaved form values, DOM that was changed by JavaScripts.
  • Learn about "Unobtrusive JavaScript" and "Progressive Enhancement". These two terms are often used interchangeably. What are some ...

235 Cookies and Rails Sessions [1d]


  • What is a Cookie? Google it if you do not know.
  • How are cookies transferred between your browser and the server?
    • Open the development tools in your browser for this page. Can you find the cookies your browser stores for makandracards?
    • In the network tab, can you see how the cookies are transferred to or from the server?
    • Can you log yourself out by manipulating a cookie? Can you log yourself back in?
  • Understand what domains mean to cookies
    • Can cookies be shared between domains?
    • Between subdomains?
    • H...

240 Authentication [3.5d]

Step 1: Homegrown

Start by reading the attached letter about securing Rails authentication. For each point addressed, do you understand what it's about? Talk with your mentor about each point that is unclear.

Now add a User model to the MovieDB application. A User should have:

  • E-mail address
  • Screen name
  • Hashed password

Now add the following features to MovieDB without using a gem:

  • User can sign up through a public registration f...

245 Authorization [2.5d]


Understand how Consul and assignable_values can be used to implement arbitrary authorization systems.

Exercise: Read code

  • In Cards, users can be given deck-specific read/write access. Play around in the cards UI to see that functionality.
  • H...

247 Nested forms [2d]


  • Understand how nested attributes appear in the params.
  • See how the Rails form helpers encode the names of nested inputs.
  • Understand how the record and all of its nested attributes are saved in a transaction. That means the entire structure is saved or not.


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

Watch Tobias Pfeiffer's talk: [Do You Need That Validation? Let Me Call You Bac...


260 Network basics


  • 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
  • Understand how `telnet...

270 More Software design [2d]

Software engineering principles

Read about the following software engineering principles:

  • Single Responsibility Principle
  • Law of Demeter
  • Dependency Inversion Principle
    • Also "Dependency Injection" or "Inversion of Control"
    • For some example see part2 of the TDD lecture Archive , slides #1 through #23 (you will need access to the repository)

For each principle:

  • Look at the repo for your MovieDB, look at the repo for Cards. Find...

275 The HTML5 platform [1.5d]


  • Learn about differences between browsers like Chrome, Firefox, Internet Explorer, Edge, Safari
    • For example regarding technology, supported features like modern CSS or JS, presentation, etc.
  • Understand how we test for older browsers using Browserstack
  • What are "Evergreen browsers"?
  • Understand which browsers you are supposed to support in a project
    • Understand the differences between a publicly available service and an application with a closed circle of users
  • Spend an hour with Can I Use Archive
This website uses short-lived cookies to improve usability.
Accept or learn more