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
...JavaScript Object Model: A deep dive into prototypes and properties. There's also a video of that talk in our internal library. The first three sections of the article Inheritance...
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 Lodash Frontend Frameworks like...
...and the article "Choose Boring Technology". When you add a new library - be it JavaScript, Ruby or anything else - you should first get a general overview of the most popular...
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 Promises on MDN and...
...in event listeners Tasks, microtasks, queues and schedules Picking the Right Tool for Maneuvering JavaScript's Event Loop Browse the internet to answer the following questions: What are "synchronous" or...
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...
...it has many shortcomings. Thinking in components Ideally we want to package all our JavaScript in the form of reusable components. Examples: Date picker: A text field opens a calendar...
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. Instead you should work with JavaScript-consumable APIs, either by calling functions of a client library or by making your...
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...
...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 calendar...
JavaScript is a scripting language supported by all browsers. Browsers don't speak Ruby, so if we want to implement client-side logic that runs in the browser, we need...
...to express ourselves in JavaScript. Goals You should have a strong understanding of the following language features/concepts: Writing and reading variables Defining and calling functions Control flow: if, for, switch...
...to feature support. "Transpilation" and "polyfills" are both techniques to use modern HTML and JavaScript features with old browsers Understand the differences between transpilation and polyfilling Find some JavaScript features...
...maybe-unsupported HTML feature? How can you gracefully degrade when using a maybe-unsupported JavaScript feature? How can you gracefully degrade when using a maybe-unsupported CSS feature? Understand which...
...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...
...system listed below, understand how they achieve: Asset concatenation Are they bundling many small JavaScript or CSS files into one single file? If yes, how can we define a "manifest...
JavaScript code can access and manipulate the browser's DOM tree. Using JavaScript we can add interactive behavior to our interfaces that would not be possible through declarative rules in...
...Playing with the DOM Visit https://makandracards.com/makandra Open your developer tools' console. Use JavaScript to locate all card elements. Use Javascript to read the text content of the second...
...to set a breakpoint: Gem Breakpoint pry binding.pry byebug byebug debug binding.break Debugging in JavaScript At any line, insert the command debugger When a modern browser's JavaScript interpreter passes...
...a 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...
You have the following HTML structure:
If you want to run Javascript code whenever someone clicks on a ...
..., you can do this in three different ways: function code(event...
...issues and tradeoffs: Registering many handlers vs. having many unnecessary target element checks in JavaScript. Ability to stop event propagation. Ability to work with elements that are created programmatically after...
...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...
Fixing flaky integration tests (also watch the video on YouTube) What does the @javascript tag do and how does it work? We used to use Selenium with Firefox, but...
Object#presence Libraries The best way to learn about a Ruby gem, Javascript libary, etc. is often to find the repository on Github and look at its README...
...with their documentation, e.g.: http://unpoly.com https://lodash.com/ https://fontawesome.com/icons Web Platform (HTML, JavaScript, CSS) The best reference to look up information on HTML tags, JavaScript features or CSS...
...producing one more showtime form. Implementation hint Render a single blank showtime form. A JavaScript component finds the blank form and hides it as a template for future showtimes.
Component reuse Package the Add showtime functionality as a generic JavaScript component so we can reuse it in other nested forms. For this to work the...
...security vulnerabilities. The dependencies of your apps are Ruby, Rails, all other gems and JavaScript libraries. Find out what a CVE advisory is. Understand how we're dealing with security...
Resources RubyGuides: Mastering Ruby Regular Expressions Using regular expressions in JavaScript Testing regular expressions visually Regular Expressions: Quantifier modes Ruby: You can nest regular expressions Matching line feeds with...
...starred / movie is unstarred) is rendered by the server or by the client (using JavaScript). Try not to duplicate rendering logic or persistance logic though. Is this a good way...
In a web application you often need to move data between the client (HTML, Javascript) and the server (Ruby, Rails). Step 1: Moving HTML snippets Add a find-as-you...
...of HTML from the server. For the part of the implementation that lives in Javascript, implement a Search.match(query) method that returns a promise. You should be able to use...
...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: Install and update packages Remove packages
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...
...reload your page. It will probably show an exception or have broken stylesheets or Javascript. Try to get everything working again. You will need rake assets:precompile.
Best results in other decks
This repository was created with the intention of helping developers master their concepts in JavaScript. It is not a requirement, but a guide for future studies. It is based on...
IIFE, Modules and Namespaces Message Queue and Event Loop setTimeout, setInterval and requestAnimationFrame JavaScript Engines Bitwise Operators, Type Arrays and Array Buffers DOM and Layout Trees Factories and Classes...
A JavaScript error in an E2E test with Selenium will not cause your test to fail. This may cause you to miss errors in your frontend code. Using the BrowserConsole...
...spec has ended: RSpec.configure do |config| config.after do BrowserConsole.assert_no_errors! end end Ignoring JavaScript errors for a spec We can configure RSpec to ignore JavaScript errors in specs tagged...