:string or :integer
Learn about the following cucumber features:
We use Selenium WebDriver integrated with Cucumber/Capybara for full-stack integration testing.
Your forked MovieDB should already include a feature that uses a real browser. Add the @javascript tag to your other features to test it yourself.
When you run your cucumber feature now with NO_HEADLESS=1 geordi cucumber, you should see a browser opening. Get someone to help you if this does not work.
Some of your features might now fail. You might find solutions below:
Making ...
git diff and git diff --staged (or git diff --cached)git reset and git reset --hard
git add -p
git checkout -p
git rebase -i
git rebase --onto.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>
<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:
function code(event) {
alert("Someone clicked on .my-target!");
}
document.addEventListener('click', function(event) {
if...
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 script that's used like this:
<table>
<tr>...</tr>
<tr>...</tr>
</table>
<!-- Clicking shows the number of <tr> elements above -->
<button class="movie-counter">Count movies</button>
Your implementation probably looked like this:
window.addEventListener('DOMContentL...
Einführung in die Web Security 🇩🇪 provides essentials for the topic of this card.
Read following chapters:
Authentication is all about being able to verify the identity of a user 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 are using popular authentication libraries like clearance or devise for this task.
Understand how Consul and assignable_values can be used to implement arbitrary authorization systems.
Read (or re-read) the following chapters from our book Growing Rails Applications in Practice (it’s in our library):
Note
We're no longer using the
Asnaming convention when extending mo...
curl to save a copy of http://www.sueddeutsche.de/.curl to save the CSS stylesheet of sueddeutsche.deSSL / TLS
------------...
Read about the following software engineering principles and code smells:
While working on a Rails application, your code base will grow a collection of different file types including:
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 ...
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.
Congratulations, you just made it through about half of our curriculum deck! 🎉
We've covered the basics of your future stack and are about to dive deeper in some more advanced topics.
Now, read the article "Parting advice from an older Software Engineer". Try to memorize the key takeaways of 1-5 on the list.
Before you move on, add two reminders to your calendar:
We are 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 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 ...
Stepping forward from JavaScript Basics, the goal of this card is for you to be able to read and write more complex ES6+ code.
Understand how asynchronous JavaScript works:
Just like we use gems on the server, we use third party JavaScript libraries in the browser. These typically provide functionality like:
We generally use the yarn add command to add third party libraries to our application. It will persist the desired library version within the package.json file and pin matching d...
In a web application you often need to move data between the client (HTML, Javascript) and the server (Ruby, Rails).
Add a find-as-you-type search to MovieDB. Above the list of movies there should be a text input that updates the list with the search results as the user is typing in the query. The user should not have to press a "Search" button (hint: you can bind to the [input](https://makandracards.com/makandra/33699-input-a-dom-event-that-is-fired-whenever-a-text-field-cha...