Sometimes we write plain SQL queries in migrations so we don't have to mock ActiveRecord classes. These two migrations...

We use foreman to start all necessary processes for an application, which are declared in a Procfile. This is very...

Building application assets with esbuild is the new way to do it, and it's great, especially in combination with...

You want to deploy new features but the latest commits are not ready for production? Then use git merge master...

Jasmine is a great tool to unit test your JavaScript components without writing an expensive end-to-end test for...

Resources RubyGuides: Mastering Ruby Regular Expressions Using regular expressions in JavaScript Testing regular expressions visually Regular Expressions: Quantifier modes...

Learn to create test data effectively using factories. Decouple tests by having each test start with an empty database...

JavaScript code can access and manipulate the browser's DOM tree. Using JavaScript we can add interactive behavior to our...

Table Of Contents Flexbox wrapping Spacing Long content Prevent an image from being stretched or compressed Lock scroll chaining

The Interactive Advertising Bureau (IAB) is a European marketing association which has introduced a standard how advertising can be served...

Similar to the Webpack Bundle Analyzer, Chrome's new Lighthouse feature … … shows a visualisation of your JavaScript bundles. It's...

From Exploring ES6: Module imports are hoisted (internally moved to the beginning of the current scope). Therefore, it doesn’t...

Since GitLab 10.3. you can use Mermaid in GitLab comments: Gitlab Doc. With Mermaid you can create diagrams based on...

A flaky test is a test that is often green, but sometimes red. It may only fail on some PCs...

Basic validations Read the Rails Guide on ActiveRecord Validations. You should have an overview which kinds of validations are built...

Within development and test environments, Rails is usually configured to show a detailed debug page instead of 404s. However, there...

This RailsCast demonstrated a very convenient method to activate VCR for a spec by simply tagging it with :vcr.

You want to use fields in your applications. However, your desktop users may encounter some weird quirks: Aside from allowing...

Event delegation is a pattern where a container element has a single event listener that handles events for all descendants...

Besides their default styling properties, HTML elements have a semantic meaning. For example, an h1 tag is usually styled with...

It is generally discouraged to load your JavaScript by a tag in the : The reason is that a tag will pause the DOM parser until the script has loaded and executed. This will delay the browser's first contentful paint. A much better default is to load your scripts with a tag: A deferred script has many...

The attached compiler() function below applies JavaScript behavior to matching HTML elements as they enter the DOM. This works like...

Given you have a strict CSP that only allows elements from your own domain: Content-Security-Policy: script-src 'self' This will block JavaScript handlers inlined as attribute into your HTML elements. Clicking on the following link will only log an error with a strict CSP: click me click me Solution 1: Move the handler into your JavaScript The recommended solution is to move the handler from the HTML to the allowed JavaScript file that we loaded via . In the example above we could invent a new [data-alert] attribute with the alert message: click me Then our JavaScript intercepts clicks on elements with that attribute: document.addEventListener('click', function(event) { let link = event.target.closest('[data-alert]') if (link) { let message = link.dataset.alert alert(message) event.preventDefault() } }) Solution 2: Allow that one handler in your CSP Some browsers allow the CSP directive script-src-attr. This lets you allow the hashes of actual JavaScript code. The SHA256 hash of alert('hello') is vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE= (in Base64). We can allow this one event handlers like this: Content-Security-Policy: script-src 'self'; script-src-attr 'unsafe-hashes' 'sha256-vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE=' Note the sha256- prefix. This event handler now works when clicked: click me But any other script will still be blocked: click me Dealing with legacy browsers Currently (November 2023) about 75% of browsers support script-src-attr. Here is a forward-looking compromise that many users use with new CSP features: Have a liberal CSP with old directives supported by all browsers Make your CSP stricter with new, more specific directives for browsers that support it The CSP spec supports that approach in that using newer, more specific directives disable older, more general features. In our case this means: For old browsers, allow all inline scripts For new browsers, disallow inline scripts but allow inline handlers with given hashes Here is a CSP directive that works like this: Content-Security-Policy: script-src 'self' 'unsafe-inline'; script-src-elem 'self'; script-src-attr 'unsafe-hashes' 'sha256-vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE=' Old browsers will only use script-src. New browsers will use script-src-elem (for tags) and script-src-attr (for inline event handlers), which override the more liberal rules from script-src.