This guide shows how to create an AngularJS application that consumes more and more memory until, eventually, the browser process crashes on your users. Although this guide has been written...
...for Angular 1 originally, most of the advice is relevant for all client-side JavaScript code. How to observe memory consumption To inspect the amount of memory consumed by your...
When you need to add a event listener to hundreds of elements, this might slow down the browser. An alternative is to register an event listener at the root of...
...for events to bubble up and check whether the triggering element (event.target) matches the selector before you run your callback. This technique is called event delegation. Performance considerations
SVG files are often much larger than necessary, containing comments, metadata, hidden elements etc. Optimize them with this tool. Web UI: https://jakearchibald.github.io/svgomg/ Binary: https://github.com/svg/svgo
...for a properly scaling SVG, you need to keep the viewBox attribute. There's an option --disable=removeViewBox for this...
...you prepare your changelist properly, it directs your reviewer’s attention to areas that support your growth rather than boring style violations. When you demonstrate an appreciation for constructive criticism...
...your reviewer provides better feedback . Make others better: Your code review techniques set an example for your colleagues. Effective author practices rub off on your teammates, which makes your job...
Bundler so far ignored the version specified under BUNDLED_WITH in the Gemfile.lock. This had two annoying consequences: If the bundler version on your system was lower than in the...
...and had to manually install the correct version. If the bundler version on your system was higher than in the Gemfile.lock, bundler silently updated the version in the Gemfile.lock to...
...it's available in modern browser versions. Here is a pure-CSS alternative for slightly older browsers. Why? Especially Safari users are not necessarily using the latest version, or enterprise...
...Firefox ESR which lags behind in features. For those, we want to use well-supported CSS features. We can use Relative Color Syntax and modern colorspaces to achieve an (almost...
...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...
...and a "user" are both human beings, it's rarely practical to have them share a model or inheritance hierarchy. Try to model everything as CRUD (regardless of whether a...
You need to update a lof gems. Make sure you don't have any version constraints in your Gemfile or your bundle update won't do anything!
...cucumber_priority: bundle update cucumber_priority Upgrade spreewald: bundle update spreewald Upgrade cucumber_factory: bundle update cucumber_factory Upgrade parallel_tests: bundle update parallel_tests Even on the latest version...
...Before merging back: reinstate reverted features in a temporary branch, then merge that branch. Scenario Consider your team has been working on several features in a branch, made many changes...
...fix them, if necessary. Maybe tests were added that expect the removed functionality as a side-effect. Merge the master into your branch regularly, especially when you have multiple teams...
...write complex migrations in Rails Discuss with your mentor Instead of migrations, could we simply log into the production server's SQL console and alter tables there whenever we need...
...Actor#total_movies: This field should cache the total number of movies an actor stars in Actor#first_movie_id: This field should cache the first movie to which the...
...hints on best practices to maintain your tasks in larger projects. Rake Tasks vs. Scripts The Rails default is using rake tasks for your application tasks. These live in lib/tasks...
...case you want to avoid rake for your tasks and just use plain ruby scripts, consider lib/scripts/* as folder. Keeping tasks slim For readability and testing it's easier to...
...of 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...
...your application assets cachable in Rails The assets pipeline history The section "network" of "JavaScript Start-up Optimization" Sprockets: Everything You Should Know About the Rails Asset Pipeline
...and how to normalize them. In the example below, the Movie#title attribute is stripped from leading and trailing whitespace automatically: class Movie < ApplicationRecord normalizes :title, with: -> { _1.strip } end
...a class. Which could look like this: class Movie < ApplicationRecord normalizes :title, with: Normalizers::StripNormalizer end The with keyword accepts any callable object that takes the attribute’s value as...
In long diffs, it can become impossible to spot small changes in larger blocks of moved code. This may be either a method that was moved from the top to...
...the bottom of a file, or a long test file that was split in many. Fortunately, Git offers a special highlighting mode that directs the reader's attention to relevant...
...type of network card is used for a given network interface on a linux system, e.g. because the system has multiple network cards, try and match the driver to the...
...interface name: $ ip link show 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN mode DEFAULT group default qlen 1000 link/loopback...
When using Rails to truncate strings, you may end up with strings that are still too long for their container or are not as long as they could be. You...
...did not use it. Since Firefox 7 you can! Note that this only works for single-line texts. If you want to truncate tests across multiple lines, use a JavaScript...
Goals After finishing this lesson you should be able to read and write simple Ruby programs. Gain an understanding of the following concepts: Working with basic datatypes: String, Integer...
Classes and inheritance The difference between class methods and instance methods (def self.method vs. def method) Modules and include Code blocks ("procs", "lambdas") Input and output Simple regular...
...a RubyMine plugin that enables you to review and process merge requests within RubyMine! Setup Open RubyMine settings (Ctrl + Alt + S) > Plugins > Search for "GitLab" > Install (You might need to...
...re-open settings afterwards.) In the RubyMine settings > Version Control > GitLab > Connect your GitLab account with "+" Working with merge requests From the Actions menu (Ctrl + Shift + A), choose "View merge...
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
...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...
...to accept nested attributes for a record that is not an association, e.g.: class Site < ActiveRecord::Base def home_page @home_page ||= Page.find_by_name('home') end does 'accept_nested...
...attributes_for_member', :home_page end It has some limitations: Only works for singular member references ("belongs to"), not for a collection of references ("has many") No support for deletion...
Sometimes the need arises for SSL in local development. We have guides for different webservers, this one is for puma. make sure mkcert is installed create an SSL certificate for...
...bundle exec rails s Accept the certificate in your browser See also Creating a self-signed certificate for local HTTPS development
...browser's HTTPS handling works as expected (which might be compromised e.g. due to security products or enterprise proxy servers...
...driver_opts directly. However, this is deprecated and will be removed in version 4 of selenium-webdriver. Version 5.x will drop support for passing the service options as hash...
...Option 2: Connect tests to a manually started chromedriver Warning This does not work with selenium-webdriver > 4 anymore. You can pass in a specific port as attribute of the...
...is great when dealing with JSON data. Check out the official jq Manual. Content Select only specific keys Modify keys Set default value Filter by key name Delete specific keys...
...Overwrite/add nested key value Select only specific keys Command jq '.[] | { Name, OriginString }' Input [ { "Id": 1, "Name": "foobar.net", "OriginString": "/FOOBAR/foobar.net" }, { "Id": 2, "Name": "barfoo.baz", "OriginString": "/FOOBAR/barfoo.baz" } ] Output { "Name": "foobar.net", "OriginString": "/FOOBAR/foobar.net...