JavaScript never blocks: network requests, timers and animations run asynchronously. This lesson covers callbacks, Promises and async/await, and how to handle errors in asynchronous code. Important Work on this lesson...
...in builder mode. Learning goals You can explain why JavaScript is single-threaded and non-blocking, and what the event loop does with tasks and microtasks. You can explain the...
Stepping forward from JavaScript Basics, the goal of this card is for you to be able to read and write more complex ES6+ code. Important Work on this lesson in...
Learning goals You can explain JavaScript's object model — objects, prototypes and the prototype chain — and how class syntax maps onto it. You can explain what a module...
...services. In this lesson you integrate geocoding, maps and a title-autocomplete API from JavaScript, and learn to test code that talks to external services. Important Work on this lesson...
...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. Important Work on this lesson in builder...
...the database. Any HTTP calls must be mocked. Learning goals You can explain what JavaScript unit tests cover that end-to-end tests shouldn't: a component's details and...
Page-specific JavaScript quickly becomes brittle. This lesson teaches you to structure JavaScript as reusable components that attach to HTML elements, support multiple instances, and clean up after themselves.
...Work on this lesson in advisor mode. Learning goals You can explain what makes JavaScript "unobtrusive": behavior is attached to HTML elements by selector, and views contain no scripts.
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...
...boring technology over the newest option. You can explain why the size of your JavaScript matters to users and check what a package costs (e.g. on Bundlephobia).
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. Important Work on this lesson in teacher mode. Learning goals You can explain how JavaScript in the browser differs from Ruby on the server: it...
Browsers differ in which HTML, CSS and JavaScript features they support. This lesson covers how to find out what you can use, which browsers we support, and how transpilation, polyfills...
...a feature may be missing — detect it and fall back — in HTML, CSS and JavaScript. You can test an app in browsers and devices you don't own, e.g. on...
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...
...may run before the DOM exists, and how to wait for it. You keep JavaScript out of views and organize it as one small file per component, loaded from the...
You can explain why browser tests are flaky by nature — asynchronous JavaScript, timing, and the app and the browser running in separate threads or processes — and how...
...what you already know. Just ask. Capybara 📄 Capybara README — read The DSL, Matching, Asynchronous JavaScript (Ajax and friends) for the waiting/retry mechanism, Transactions and database setup, and Drivers (rack_test...
...work between server and browser somewhere. Where you draw that line decides how much JavaScript you write, how the app feels to use, and how hard it is to keep...
...page apps, explains where we usually land and why — and prepares you for the JavaScript cards that follow. Important Work on this lesson in teacher mode. Learning goals
...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...
...Sass or image asset, and find the build output. You can add and update JavaScript libraries with our package manager (yarn 1) and explain what package.json and the lock file...
...diverges from what you expected. This lesson covers breakpoints and logs in Ruby and JavaScript, the browser's network and DOM inspectors, and how to get unstuck when a bug...
...it, and add log output of your own. You can set a breakpoint in JavaScript and inspect state and step through code in the browser's developer tools.
...You can add child forms in the browser without a page load, using a JavaScript component that copies a template and adjusts the input names. You can write that JavaScript...
...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.
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:
...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...
...belongs to; bundle open GEM opens the installed source of a gem Gems and JavaScript libraries 📄 The README in a library's GitHub repository is its manual, e.g. active_type...
📄 Some libraries have a dedicated documentation site, e.g. Unpoly. Web platform (HTML, CSS, JavaScript) 📄 MDN Web Docs — the reference for HTML elements, CSS properties and JavaScript features; use the...
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.
...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
...them correctly. You can explain why built-in HTML elements are preferable to custom JavaScript components: they bring keyboard activation, focus handling and semantics for free, so extend them instead...
...Accessibility — the beginner module; the lessons HTML: A good basis for accessibility, CSS and JavaScript accessibility best practices and WAI-ARIA basics cover this card 📄 web.dev: Learn Accessibility — Google's...
...against this; ViewComponent is the second, for components that carry logic, helpers, CSS and JavaScript of their own. This card teaches you to give your views a small, readable vocabulary...
...details behind an explicit interface and co-locates the template with its helpers, its JavaScript and its CSS. You can decide when a piece of view code deserves extraction at...
...find and evaluate gems for a problem, e.g. on rubygems.org or Ruby Toolbox. Note JavaScript has the same problems — dependencies, lock files, runtime versions — and very similar solutions (yarn, nvm...
...or mise). We explore them in a later card, once you have met JavaScript. Resources Read what's new to you, skim what's familiar, skip what you already master...
...expressions — RubyGuides; the friendlier walkthrough ▶️ Learn regular expressions in 20 minutes — Web Dev Simplified; JavaScript syntax, same concepts 🎮 RegexOne — interactive lessons 🎮 Rubular and regex101 — try an expression against sample text...
...feeds works differently in every language 📄 Testing regular expressions visually 📄 Using regular expressions in JavaScript — the differences you'll meet in the browser ReDoS ▶️ Vortrag: ReDoS-Angriffe — internal talk (in...
...from here on attaches to it — Rails renders HTML, your CSS selects it, your JavaScript walks it. Important Work on this lesson in teacher mode. Note Many trainees arrive already...
...concurrency controls, a dashboard, and jobs enqueued in the same transaction as your data JavaScript build Propshaft, import maps, "no build" esbuild No-build means no bundling, no Sass, no...