...Open-source software (OSS) is great. Anyone can use virtually any open-source code in their projects." Well, it depends. Licenses can make things difficult, especially when you are developing...
...gem by following these steps: Move all contents of vendor/asset-libs/$library-$version to a new sub-directory vendor/asset-libs/$library-$version/lib/assets/javascripts. That's simply a path sprockets will consider, it is...
Sometimes huge refactorings or refactoring of core concepts of your application are necessary for being able to meet new requirements or to keep your application maintainable on the long run...
...different parts. Try to make tests green for each part of your refactoring as soon as possible and only move to the next big part if your tests are fixed...
...translation data {...
...} can not be used with :count => 1. key 'one' is missing. They seem to appear out of the blue and the error message is more confusing than helpful...
...all models on the activerecord.attributes level (or activemodel.attributes) instead of having the same translation string in each model's attribute block: # I18n file like en.yml en: activerecord: attributes: updated_at...
...If you want the actions element to float on the left, you'd just say this in your CSS: #actions { float: left; } Unfortunately, any content of the content's text...
If you don't want that but actually wish for longer text to stay on the same vertical boundaries, use overflow: hidden on the element whose content you don...
...Capybara will wait for a short time before raising NoSuchElementError. This is sufficient for basic, server-rendered application. However, as frontends become more complex (more JavaScript, AJAX requests, animations), race...
...scrolling by default. You can address this by disabling smooth scrolling in tests: body, html { scroll-behavior: auto !important; } If you have other scrolling elements with overflow-y: scroll or...
In a Jasmine spec you want to spy on a function that is imported by the code under test. This card explores various methods to achieve this. Example
...a function hello(): // lib.js function hello() { console.log("hi world") } export hello We have a second module 'client' that exports a function helloTwice(). All this does is call hello() two times...
DirectUpload allows you to upload files to your file storage without having to wait for the form to submit. It creates AJAX requests to persist the file within your form...
...and wraps them in a little API. This card will show you how to use it in order to create in-place file uploads with progress and a remove button...
...ve built a few gems over the years. Some of these are quite popular: spreewald (> 1M downloads), active_type (> 1M downloads), and geordi (> 200k downloads) Developing a Ruby gem is...
...Rails applications, with the biggest difference: there is no Rails. This means: no defined structure (neither for code nor directories) no autoloading of classes, i.e. you need to require all...
...full-app localization before and assign an hour estimate to each of these points. Static text Static strings and template text in app must be translated: Screens, mailer templates, PDF...
...templates, helpers, sometimes models. Use the native Rails I18n API. Avoid Gettext if possible. Native I18n has good integration with Rails (you already have it!), but you need to come...
...be a quick fix for an existing app. It also ensures that future uploaders get safe-ish defaults when the developer forgets to define an allowlist for concrete uploaders (see...
...you can also go with this more relaxed CSP: Content-Security-Policy: default-src 'self'; script-src 'none'; object-src 'none' While this does not fix users uploading executables etc...
SVG files often contain redundant information, like editor metadata or hidden elements. When esbuild handles your static assets, you can easily optimize SVG files using svgo as a plugin. Here...
...is how to do it. Adding svgo as an esbuild plugin Add the svgo package to your project's package.json Adjust your esbuild.config.js like so: const esbuild = require('esbuild')
...example, the configuration for SASS files looks like this: { test: /\.(scss|sass)$/i, use: [ { loader: 'style-loader', options: {...
{ loader: 'css-loader', options: {...
{ loader: 'postcss-loader', options: {...
{ loader: 'sass-loader', options...
...loaders (which are usually npm modules) are run on it in reverse order. First, the sass-loader converts SASS to regular CSS. Then, the postcss-loader uses PostCSS to postprocess...
...to an open redirect vulnerability. Your application's generated route methods with a _url suffix are also affected because they use url_for unter the hood. The problem
...use links with your application's hostname, cause a redirect to evil.tld and present a sign-in form which looks like yours. Users will enter their login credentials and submit...
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 filling out forms in Selenium tests, Chrome shows the (usual) bubble, asking to store those credentials. While the bubble does not interfere with tests, it is annoying when debugging...
...tests. Here are two ways to disable it: Option 1: prefs You can set profile preferences to disable the password manager like so: prefs = { 'credentials_enable_service' => false, 'profile.password_manager...
This card will show you how to use git rebase --onto without confusion. Use case: You've got two feature branches (one and two), where two depends on one. Now...
...branched two from it (i.e. after code review the commits of branch one are squashed). Thus the commit history of branch one has changed. Branch two's history however didn...
...by default, effectively allowing anyone to upload an unlimited amount of files to your storage. The DirectUploadController from @rails/activestorage bypasses your form controller because it uploads the file using an...
...AJAX request that runs directly, before any form roundtrip happens. This is a comfortable solution to allow in-form uploads with progress, errors etc. Otherwise, the file would be uploaded...
git checkout is the swiss army of git commands. If you prefer a semantically more meaningful command for restoring tasks, use git restore instead. With this command you...
... do unstaging - git restore --staged ... discard staged changes - git restore --staged --worktree ... discard unstaged changes - git restore ... restore deleted files - git restore ... restore historic versions - git restore --source
A flaky test is a test that is often green, but sometimes red. It may only fail on some PCs, or only when the entire test suite is run.
...JavaScript periodically requests updates from a server to keep a in sync with the latest server-site data. Sometimes the test ended right after a polling request was sent, but...
When you repeat a subpattern with a *, + or {...} operator, you may choose between greedy, lazy and possessive modes. Switching modes may affect the result and performance of your regular expressions...
...In the worst case, an ill-suited mode may make your regular expression so slow that it can DoS your application (Examples are the ActiveRecord's PostgreSQL CVE...
...this matter, as the image rendering depends on multiple factors. At least the operation system, browser or image viewer software and monitor influence the resulting image colors on your screen...
...possibility to upload images, they will most likely contain tons of EXIF metadata and sometimes exotic color profiles like eciRGB. We want to get rid of the metadata, as it...
...building a web application, one is tempted to claim it "done" too early. Make sure you check this list. Different screen sizes and browsers Desktops, tablets and mobile devices have...
...state while requests are loading. If you cannot implement this for every interaction, focus on slow-loading links and forms. Use Responsive Images to give each user only the image...
...project, as a developer you need to follow the following guidelines (e.g. by using something like this issue checklist template). In order to reduce the number of rejects we get...
...from clients, we want to review all code written before it goes to the staging server. Note: This process is tailored to our specific needs and tools at makandra. While...
The Node Version Manager allows installing multiple NodeJS versions and switching between them. By default, it does not automatically switch versions when entering a directory that holds a .nvmrc file...
...COMMAND feature. So here is my take on it. Note that it is much shorter, it probably does a few less smart things, but has been working great for me...