Be careful when using buttons without a type
attribute, since browsers will consider them the default submit button of a form.
Suppose you have this form:
<form action="/save">
<input type="text" />
<button onclick="alert('Alert!')">Alert</button>
<button type="submit">Save</button>
</form>
If you press the enter key inside in the text input, browsers will trigger the first button and show the alert.
To fix this, add a type="button"
attribute to the first button.
Rack::SteadyETag
was a Rack middleware that generates the same default ETag
for responses that only differ in XOR-masked CSRF tokens or CSP nonces.
We have deprecated Rack::SteadyETag. We instead recommend reconfiguring your Rails app so two requests to the same resource produce the same HTML for a given user.
Every Rails response has a default ETag
header. In theory this would enable caching for multiple requests to the same resource. Unfortunately the default ETags produced by Rails are effectively random, meaning they can never match a future request.
When your Rails app responds with ETag
headers, future requests to the same URL can be answered with an empty response if the underlying content ha...
CoffeeScript and JavaScript (ECMAScript) both have operators in
and of
. Each language use them for more than one purpose. There is not a single case where the same operator can be used for the same purpose in both languages.
var hasFoo = 'foo' of object
var hasFoo = 'foo' in object;
Iterate through all properties of an object
================================...
Here are some popular mistakes when using nested forms:
fields_for
instead of form.fields_for
.accepts_nested_attributes
in the containing model. Rails won't complain, but nothing will work. In particular, nested_form.object
will be nil
.:reject_if
option lambda in your accepts_nested_attributes
call is defined incorrectly. Raise the attributes hash given to your :reject_if
lambda to see if it looks like you expect.Test-Driven Development (TDD) in its most dogmatic form (red-green-refactor in micro-iterations) can be tedious. It does not have to be this way! This guide shows a pragmatic approach with integration and unit tests, that works in practice and improves on productivity.
tl;dr
Individual transform properties are great because they allow you to write more readable and maintainable CSS, especially when applying multiple transformations and/or when animating transforms.
For ages, CSS transforms had to be defined using the transform
property. For a single transformation, this was something like transform: scale(1.5)
, and multiple transformations could be applied by chaining them.
.example {
transform: scale(1.5) rotate(45deg) translateY(-50%);
}
All modern browsers (Chrome & Edge ...
tl;dr
asdf
allows you to manage multiple runtime versions with a single CLI tool and is backwards compatible by supporting existing config files, like e.g..nvmrc
or.ruby-version
.
source /home/$user/.rbenvrc
in ~/.profile
eval "$(rbenv init -)" in
~/.bashrcor
~/.zshrc`You have an async function that rejects:
async function failingFunction() {
throw new Error("Something went wrong")
}
When you call that function in a test, your test will fail:
it('has a test', function() {
failingFunction() // this will fail your test
})
The failure message will look like this:
Unhandled promise rejection: Error: Something went wrong
You can fix this by expecting the state of the returned promise:
it('has a test', async function() {
await expectAsync(failingFunction()).toBeRej...
Some cronjobs must only run on a single server. E.g. when you run nightly batch operations on the database, it should probably run on a single server. Running it on multiple servers would likely result in deadlocks or corrupt data.
Some cronjobs must always run on all servers. E.g. starting a sidekiq process on reboot.
If not configured otherwise, cronjobs defined in whenever's `s...
Building plain text emails with an .erb template doesn't allow you to indent code like you normally do in HTML mails.
<%= 'foo' if bar %>
"\n"
if bar is false
"foo\n"
if bar is true
<%= nil %>
"\n"
<% if true %>
<%= 'foo' %>
<% end %>
" foo"
<%= 'foo' %>
<%= 'bar' %>
"foo\n\nbar\n"
Write unindented code to get the expected result.
<% if bar %>
<%= 'bar' %>
<% end %>
<%= 'foo' %>
<%= 'bar' %>
RSpec allows you to mark a single Example/ExampleGroup so that only this will be run. This is very useful when using a test runner like guard.
Add the following config to spec/spec_helper.rb
:
RSpec.configure do |config|
# These two settings work together to allow you to limit a spec run
# to individual examples or groups you care about by tagging them with
# `:focus` metadata. When nothing is tagged with `:focus`, all examples
# get run.
config.filter_run_including :focus => true
config.run_all_when_everything_filtere...
tl;dr
The
strict-dynamic
source list keyword allows you to simplify your CSP policy by favoring hashes and nonces over domain host lists.The key super power of
strict-dynamic
is that it will allow to load additional scripts via non-"parser-inserted" script elements.
For unsupported browsers, your script can be made backwards compatible by doing something like this:
script-src 'nonce-rAnd0m' 'strict-dynamic' https: 'self'
default-s...
A matcher is a function that returns an object with a compare
key. Usually it is registered with beforeEach
:
beforeEach(() => {
jasmine.addMatchers({
// Example matcher
toBeAnything() {
return {
compare(actualValue, ...matcherArguments) {
// Do some computations here ...
// Return whether the actualValue matches the expectation
return {pass: true}
}
}
}
})
})
expect(actualValue).toBeAnything(...matcherArg...
Occasionally you need to do something directly on the server -- like having all records recalculate something that cannot be done in a migration because it takes a long time.
Let's say you do something like this:
Project.all.each(&:recalculate_statistics!)
Even though you may have been successful with this on your development machine or the staging server, keep in mind that production machines often hold a lot more records. Using all
may just work, even with lots of records, but when you iterate over such records and fetch a...
calc()
lets you mix CSS units. Ever wanted to give an element "the container's width minus 20px on each side"? Here you go:
.foo {
width: calc(100% - (20px * 2));
}
When using Sass, you need to interpolate Sass expressions:
$margin: 20px * 2
.foo
width: calc(100% - #{$margin})
Supported by all modern browsers and IE9+.
If your irb or rails console keeps randomly crashing and you can't figure out why then you can try to disable multi-line autocomplete.
Sidekiq 7 adds a new feature called capsules.
Use cases:
chrome
queue limited to 1
for e.g. PDF processing to not overload the application serverapi
queue, that limits a queue to 2
to protect the API server from too many requests in parallelExample:
Sidekiq.configure_server do |config|
# Edits the default capsule
config.queues = %w[critical default low]
config.concurrency = 5
# Define a new capsule which ...
In Ruby on Rails ActiveRecord::Relation#merge
overwrites existing conditions on the same column. This may cause the relation to select more records than expected:
authorized_users = User.where(id: [1, 2])
filtered_users = User.where(id: [2, 3])
authorized_users.merge(filtered_users).to_sql
# => SELECT * FROM users WHERE id IN (2, 3)
The merged relation select the users (2, 3)
, although we are only allowed to see (1, 2)
. The merged result should be (2)
.
This card explores various workarounds to combine two scopes so t...
The linked content describes:
Warning
This feature landed in browsers at the end of 2022. According to our support policy this will become generally usable starting Dec 2024.
The oklch() functional notation expresses a given color in the Oklch color space. It has the same L axis as oklab(), but uses polar coordinates C (Chroma) and H (Hue).
Sour...
I found the linked article very helpful to refresh my understanding of database indexes. As a small bonus, it includes a few helpful SQL oneliners like these two:
Warning
Do not run random code snippets unless you understand them in detail - especially in production.
If you want to to create maps within SASS/SCSS-files, it normally works like this:
$some-map: (key1: value1, key2: value2)
However, some maps can get big really fast, if they are being used to contain all of the project's icon names and their sizes for example.
Therefore splitting a map into multiple lines, like we do it in Ruby with big hashes, would become really handy.
Unfortunately SASS doesn't support multiline maps. There has been an open issue since 2011 and it hasn't been...
To navigate between test and test subject Rubymine requires you to set the test root sources as Test Sources Root.
In case you are using the keyboard shortcut "CTRL + ALT + SHIFT + c" to copy the reference path + you have set the "Test Sources Root" for your test folders, you might consider setting this keyboard to "Copy From Repository Root". This will return the path `spec/foo_spec....
Webpacker uses Babel and Webpack to transpile modern JavaScript down to EcmaScript 5. Depending on what browser a project needs to support, the final Webpack output needs to be different. E.g. when we need to support IE11 we can rely on fewer JavaScript features. Hence our output will be more verbose than when we only need support modern browsers.
Rails 5.1+ projects often use Webpacker to preconfigure the Webpack pipeline for us. The default configuration works something like this: