315 Advanced Ruby: Metaprogramming and DSLs [3d]
Rubymonk training
Read the following Rubymonk articles:
- Ruby Primer: Ascent (archived copy)
- Metaprogramming Ruby (archived copy)
- [Metaprogramming Ruby: Ascent](http://rubymonk.com/learning/books/...
316 Advanced Ruby: More metaprogramming with Modularity and ActiveSupport::Concern [2d]
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?
You may also read more about the Ruby Object Model, if all o...
320 State machines [3d]
Your MovieDB gained traction and is now a popular tool among cineasts. This comes with a downside: You noticed a degrading content quality, which only can be contained by introducing a new moderation process. While everyone can keep adding new movies, they should at first be drafts that require a mandatory review by an administrator before publication.
Requirements
Movies in MovieDB should have one of the following workflow states:
draft
pending
published
declined
A movie always begins as a draft
and then t...
325 Consuming external APIs with JavaScript [2d]
Exercise 1: 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 an E2E 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 of learning...
326 Consuming external APIs with Ruby [1d]
Exercise 1: XML
On the start page of your Movie DB, show the title of a random movie that is coming soon to theaters.
- There's an XML feed for this at https://www.filmjabber.com/rss/rss-upcoming.php
- Manually parse the feed using Nokogiri, don't use an RSS gem for the purpose of this card.
- Update it once a day (using whenever)
Tip
Consider the best place to put the new logic. Should it be an existing class or a new class?
Exercise 2: JSON
Automatically ret...
328 Testing JavaScript with Jasmine [1.5d]
Jasmine 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...
335 Secure storage of file attachments [2d]
Goals
- Learn to store attachments in a way that is accessible by authorized users only
- Learn to prevent users from uploading malicious content
Resources
- Deliver CarrierWave attachments to authorized users only.
- File uploads should validate the file extension
- [Self-expiring URLs with Apache](https://makandracards.com/makandra/70814-s...
350 UI design basics [2.5d]
Learn
Read the following material:
- World's shortest UI/UX design course
- 7 Rules for Creating Gorgeous UI (Part 1)
- 7 Rules for Creating Gorgeous UI (Part 2)
- Visual design rules you can safely follow every time
- Bootstrapping Design (in our library)
- Steve Schoger's Refactoring U...
353 CSS Grids [2d]
If you've stumbled over display: grid
while reading the Flexbox material of the previous card - we've got you covered!
Let's dive into this topic with a quote:
Flexbox is made for one-dimensional layouts and Grid is made for two-dimensional layouts.
You will learn more subtle differences in the linked material below, but you can remember this as a rule of thumb.
Resources
- Comprehensive Guides:
- [An Interactive Guide to CSS Grid](https://www.joshw...
355 Requirements analysis and minimum viable UIs [3d]
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. although an "addre...
370 Bonus: Technology choice [0.5d]
In our daily life as web developers we are constantly faced with technical problems that can be solved with a variety of (sometimes vastly different) technologies. Choosing the right tool for the tasks is crucial for our mid- and long term success.
Our technology radar card documents what we're currently investigating either to replace or introduce to our stack of tools. Start this card by skimming over the linked resource.
Discussion
Growing Rails application...
372 Dealing with legacy applications [0.75d]
Adopting legacy Rails apps
Talk to your mentor about how we're approaching applications that are either old or abandoned by a different team earlier:
- Add E2E tests for the happy path. Other than unit tests, E2E tests will not break when we refactor later.
- 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.
- ...
385 Rack and Middlewares
Goal of this lesson is to understand what middlewares in Rack are good for.
Rack
Start with these articles:
You should be able to answer the following questions:
- What is Rack?
- How does Rack relate to Ruby on Rails?
...
395 Background processing [2d]
Some tasks in a web application are better not done live when a user request a page, but in the background. Examples are
- longer running tasks
- tasks that are not tied to user interaction
- tasks that can fail, and may need to be retried
Our two main mechanisms for background processing are
Learn about cronjobs
- Read [HowTo: Add Jobs To cron Under Linux or UNIX?](http:...
396 Internationalization (I18n) [2d]
Learn
Resources
- Rails Guide: Internationalization API
- Guide to localizing a Rails application
- Locale-aware helpers in
ActionView::Helpers::NumberHelper
-
Accept-Language
HTTP header. Can be parsed with a gem like [accept_language](https://github.com/cyril/accept_lan...
397 Rails: Sending e-mail [2d]
Research
- Action Mailer Basics and Previews
- Chapter "Task H1: Sending Mail" from Agile Web Development with Rails 7.2 (in our library)
- Ensure that the receiving e-mail is valid
- ...
400 Bonus: Buzzwords and staying up to date [1d]
Web technology is a broad field and you cannot be an expert in all aspects.
However, it is useful to have a rough understanding of common terms and buzzwords, so that you don't seem uninformed when talking to a client or other developers.
Get an overview
Search the Internet for each of the following terms. Only take a couple of minutes for each and don't get into too much detail. Do get a rough idea about the advantages they promise.
-
Continuous Integration
orCI
-
Single-Page Application
orSPA
- `Progressiv...
910 Bonus: Rake [0.75d]
Research
- What is
rake
good for? - Take a look at some of the Rake tasks that Rails gives you (
rake -T
within a Rails project) - Find the code that defines the
rake stats
task in the Rails gems - What are some ways how a Rake task can execute another task?
- What does it mean if a Rake task "depends" on another task? E.g. understand what it means for a Rake task within a Rails app to depend on
:environment
. - Understand that Capistrano tasks are also defined using the Rake DSL, but a Capistrano task is not automatically a...
940 Bonus: Persisting trees [2d]
Storing a tree
For each movie in MovieDB, we want to track which other movie it was inspired by. For example:
- "Interstellar was inspired by 2001"
- "Inception was inspired by The Matrix"
Start by adding a field Movie#inspiration_id
. In the movie form, I should be able to select the inspiring movie.
The list should:
- include all the movies that were released in previous years
- not include the movie itself
- not include a movie that was itself inspired by the movie that is being edited.
Traversal
In the...
965 Bonus: Writing documentation
Goals
While the Software Design Basics card tried to make a point about writing self explanatory code, it's still essential for every application to maintain a good documentation. The README file is essential for fellow engineers to get started quickly, as it contains documentation of all major moving parts of the given app.
Resources
- README Driven Development
- [Writing a README for ...
985 Modern build pipelines with Webpack [3d]
Rails ships with two separate build pipelines: Sprockets ("asset pipeline") and Webpacker.
Webpacker has many more moving parts, but allows us to use ES6 modules and npm packages (through Yarn). Webpacker is a wrapper around a JavaScript project called webpack.
Yarn
Yarn is the package manager we use for JavaScript. It does for JavaScript roughly what Bundler does for Ruby.
Read the first couple of sections of its official documentation.
You should learn how to:
- Insta...
990 Static site generators
Learn
Talk with a colleague and find out why we're using building some of our sites using static site generators instead of Rails.
You should talk about:
- Ease of development
- Security issues and maintenance costs
Read through the Middleman docs:
- What can it do?
- What can't it do?
- What parts do you know from Rails?
Practice
- Checkout the repo for the makandra blog
- Start the preview server
- Make some changes, review them on localhost:4567...
995 Bonus: Images [1.5d]
We've already learned how to integrate user-provided images uploads to our application in 205 basic file uploads and image versions. In this bonus chapter, we want to dive deeper.
Common web apps often include static images like icons and application logos next to the dynamically created images versions of uploaded files. To serve all of those with limited bandwidth and high quality, images formats and compression strategies have to be carefully selected.
...