Reading

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

Note

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

Learn

Resources

• RubyGuides: Mastering Ruby Regular Expressions Archive
• Using regular expressions in JavaScript
• Testing regular expressions visually
• Regular Expressions: Quantifier modes
• [Ruby: You can nest regular expressions](https://makand...

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

Goals

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

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

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 Archive (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 Archive
• Read about async Archive / [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 Archive library.

• Try to understand what it does.
• Why does it mention "x kB gzipped"? How is that important?
• Try to add lodash to MovieDB
  • Use `yarn add lod...

Rubymonk training

Read the following Rubymonk articles:

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

Learn

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

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:

stateDiagram-v2
    [*] --> draft
    draft --> pending
    pending --> rejected
    rejected --> pending
    pending --> accepted

Change the visibility rules (Consul powers) so:

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

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 Archive , 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 Archive
• Parse the feed using Nokogiri
• Update it once a day (using whenever Archive )

Exercise 2: JSON

Automatically retrieve the year of a movie for any new movie entered into MovieDB, using the themoviedb.org API Archive . For the UI this means that there is no longer a "Year" ...

Jasmine Archive is a great tool to unit test your JavaScript components without writing an expensive end-to-end test for every little thing.

Jasmine is a purely client-side tool. It cannot ask Rails to render a view or access the database. Any HTTP calls must be mocked.

Learn

What do we test with Jasmine?

Just as unit tests are a direct way to closely look at your classes, Jasmine is a very direct way to look at your JavaScript components.

For example, when you want to test that a date picker opens a calenda...