...debugging console if developer tools are already open. Do this. Note that since JavaScript is single-threaded, you cannot interact with your app's frontend while the debugging console is...
...inspect the current DOM. In a @javascript scenario, observe the current frontend state in the Selenium-controlled browser. If you run E2E tests in headless Chrome, you may need to...
...request to save the movie. Select the request from the list and go to the sub-tab Payload. You should see your request's payload as a list of key/value...
...used the square brackets in the payload keys to group all movie attributes into one sub-hash, params['movie']. Let's take a look at only the movie-related attributes...
...number of different versions for Ruby, Rails and many gems. To be able to switch between projects easily, we must control every dependency our applications has. Goals Understand what a...
...with their dependencies and version history. Bundler overview and workflow How to update a single gem conservatively: A major bundler caveat How to manage versions in a Gemfile
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
...s also a video of that talk in our internal library. The first three sections of the article Inheritance and the prototype chain on mdn also gives a good introduction...
A common task in web applications is to add client-side JavaScript behavior to existing HTML elements. For instance, in Working with the DOM you built a movie counter...
...JavaScript for both lists? For this your JavaScript must be abstract enough to not contain screen-specific references (such as selectors or URLs). Note that it's OK for the...
In this card we will learn to write code that scales with a large number of database records. We will do this by pushing work out of Ruby and into...
...a scope of movies matching the following query format: The query is a list of space-separated words that all need to appear in the movie title for the movie...
...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 transitions through...
...as it's getting reviewed. This could be a typical state flow for a movie: stateDiagram-v2 [*] --> draft draft --> pending pending --> declined: Reason declined --> pending pending --> published Changes to the...
Goals Know how to use the native DOM API to do the following: Selecting all elements matching a given CSS selector Selecting all descendants of a given element matching...
...a given CSS selector Registering event listeners Changing an element's CSS classes Changing an element's attributes Making the same change to a list of elements, e.g. hiding them...
As developers we are dealing with many tasks every week. We need a system to organize ourselves. Goals After completing this card you should have: A to-do list that...
...never forget a task that a colleague or customer gives us. A habit of splitting any kind of task or project into actionable first steps. A habit of fully completing...
...topic of this card. Read following chapters: (1) Security Principles (3.3) Sessions and Cookies (3.5) Same-Origin-Policy (4.2) Angriffsfläche / Attack Surface (4.3) Speicherung von Passwörtern (6) Kryptographische Grundlagen...
...Authentifikation (8) Authorization (9) Session Management Ohne (9.4) JSON Web Tokens (10) Federation / Single-Sign on (11) Serverseitige Angriffe (12) Clientseitige Angriffe (13) Clientseitige Schutzmaßnahmen Read through the most known...
...s presentation about asynchronous Javascript (there's also a German video presentation in our shared folder) Read about Promises on MDN and this visualization Read about async / await.
Read about canceling promises Error handling in event listeners Tasks, microtasks, queues and schedules Picking the Right Tool for Maneuvering JavaScript's Event Loop Browse the internet to answer...
Understand at least the following CSS concepts: Classes Selecting elements for styling Basic styling (color, typography, spacing) The box model Inline elements vs. block elements Ways to layout elements...
...Learn how to use your browser's "inspect" feature and how you can see which CSS styles are applied to an element Learn what a "reset stylesheet" is.
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...
...Understand how we test for older browsers using BrowserStack Ask a colleague for our shared BrowserStack credentials What are "Evergreen browsers"? Understand which browsers you are supposed to support in...
...gem like accept_language. Customizing Rails error messages for models and attributes Rails I18n scope for humanized attribute names HTML: Making browsers wrap long words Use the same translations for...
...I18n fallback locales Rails: Including HTML in your i18n locales Even for a single language, locales are useful Even if your application only supports a single language, it makes sense...
...chapters from The Pragmatic Programmer, anniversary edition (in our library): Chapter 1, Topic 3: Software Entropy Chapter 2, Topic 9: The Evils of Duplication Chapter 2, Topic 10: Orthogonality
...Chapter 5: Formatting Chapter 8: Boundaries Chapter 10: Classes Chapter 12: Emergence Chapter 17: Smells and Heuristics Also read: How to write modular code Keep It DRY, Shy, and Tell...
makandra's development process Learn about our process. The squares represent the state of the issue in Linear: In particular you should understand: Why do we have a process?
...is an issue (formerly: story)? What metrics does our process optimize for? How to divide large requirements into issues. When is an issue too small, when is it too large...
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...
...no longer a "Year" field when creating a movie. It is automatically fetched and stored before the movie is created. When editing a movie there is a "Year" field that...
...Learn to create test data effectively using factories. Decouple tests by having each test start with an empty database and create only the records needed for the test. Learn
...with every test. In our experience the use of fixtures can make a test suite hard to work with. In any non-trivial test suite there will be thousands of...
...library => Google Drive) CLI tricks every developer should know Install the tldr tool using sudo apt install tldr. You can then get usage examples for every console command, e.g. tldr...
...ssh to get examples for the ssh command. (If there are no entries, run tldr -u and try again) Exercises Basic commands Experiment and do something useful with the following...
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...
...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...
...in the context of our application. While you could roll out a custom authentication solution, this would likely expose you to the various risks of "homegrown crypto". In practice we...
...like clearance or devise for this task. Learn Read the article Rails Authentication from Scratch You don't need to do write any code, but you should be able to...
Learn to treat files as an ActiveRecord attribute type, like :string or :integer Research Look at the README for the carrierwave gem Read about Common mistakes when storing file...
...the form where we can also fill in title, year, etc. On the movie show view, render a poster version that is 400 pixel wide, with a height that respects...
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
...the Truemail gem to validate e-mail addresses Ensure that development and staging are not sending out e-mails by accident Rails: How to write custom email interceptors
...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...