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.

Learn

• Read Everything You Should Know About the Rails Asset Pipeline
• Read How to make your application assets cachable in Rails
• Read [...

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

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:

.block
.block--element
.block.-modifier

Why are elements preceded by a...

Stepping forward from JavaScript Basics, the goal of this card is for you to be able to read and write more complex ES6+ and CoffeeScript code, and to migrate code from one language to another.
While we don't use CoffeeScript in new projects any more, we require you to understand it enough to work on existing projects that use it.

The JavaScript Object Model

Read [The JavaScript Object Model: A deep dive into prototypes and properties](https://makandracards.com/makandra/481040-the-javascript-object-model-a-deep-dive-into-prototypes-and...

Reading

Understand how asynchronous JavaScript works:

• Read Henning's presentation about asynchronous Javascript (there's also a German video presentation in our shared folder)
• Read about Promise
• Read about async / [await](https://devel...

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

Rubymonk training

Read the following Rubymonk articles:

• Ruby Primer: Ascent (archived copy)
• Metaprogramming Ruby (archived copy)
• [Metaprogramming Ruby: Ascent](http://rubymonk.com/learning/books/...

Learn about 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?

Understand this article: [Rails 5, Module#prepend, and the End of Alias_method_chain](https://www.justinweiss.com/ar...

Requirements

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

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.

Hints

• 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, don't do that for the purpose ...

Exercise 1: XML

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

• There's an XML feed for this at https://celebritybucks.com/developers/birthdays/XML
• Parse the feed using Nokogiri
• Update it once a day (using whenever)

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

Basics

• 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 you 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 dist...

Read Deliver Paperclip attachments to authorized users only. Implement the tasks in this card using similar techniques, even if you are using Carrierwave instead of Paperclip.

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

Goals

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

Read the following material:

• 7 Rules for Creating Gorgeous UI (Part 1)
• 7 Rules for Creating Gorgeous UI (Part 2)
• Bootstrapping Design
• Steve Schoger's Refactoring UI book (in our library) and watch the following videos (also in our library):
  • Designing a Complex Form
  • Designing a Dashboard
  • Designing Content

Discuss what you took away with your mentor.

Look at 3 random we...

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.

Learn

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

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

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

Discuss each chapter with your mentor.

Talk to your mentor about 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
• When you work on something, improve that part of the code.
• 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.