...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...
.example { transform: scale(1.5) rotate(45deg) translateY(-50%); } All modern browsers (Chrome & Edge 104+, Firefox 72+, Safari 14.1+, Samsung Internet 20+) also support individual properties for transforms.
Or: How to avoid and refactor spaghetti code Please note that I tried to keep the examples small. The effects of the methods in this card are of course much...
...more significant with real / more complex code. What are the benefits of more modular code? Code is written once but read often (by your future self and other developers who...
...you have too many inotify instances you may run into limits of your operating system. To find out which process is using them all up you can run:
...text right next to the code: notes for other developers, and for your future self. You can imagine comments as post-its (or sometimes multi-sheet letters ...) on real-world...
...objects like cupboards, light switches etc. As always, with power comes responsibility. Code comments can go wrong in many ways: they may become outdated, silently move away from the code...
When doing some meta-programming magic and you want to do something for all attributes of a class, you may need to access connection or some of its methods (e.g...
...will encounter fun errors such as: PG::ConnectionBad (for missing databases on PostgreSQL) ActiveRecord::StatementInvalid: PG::UndefinedTable (when database exists, but has no tables) Generally speaking, evaluating model columns during...
...moving a file, your imports also need to change. To get around this, esbuild support a mechanism first introduced in TypeScript called "path aliases". It works like this:
...if you do use TypeScript): { "compilerOptions": { "baseUrl": "./app/assets", "paths": { "@/*": ["js/*"], "@images/*": ["images/*"], "@css/*": ["css/*"], "@spec/*": ["../../spec/js/*"] } }, "include": [] } (The include: [] only makes sense if you do not use Typescript. If you...
...come across objects created by some gem or framework. You don't have the source code at hand, still need to inspect this object. Here are some tools to do...
...from Object. This makes the methods list drastically more relevant. You can also try subtracting other base classes like ActiveRecord::Base.methods etc. To further narrow it down you can also...
...value and produce a lost update. The Postgres-native fix is to compute the increment server-side inside an atomic INSERT...
...ON CONFLICT DO UPDATE statement and gate it by...
...billing_period_id: current_billing_period.id ) end end Why a unique index The unique index is a storage-level constraint: Postgres rejects duplicate keys at insert time, before commit. Two consequences:
Sometimes you have a file that is related to a project, while not actually being part of it. You'd like to keep them around, but others won't need...
...them – e.g. some notes, a log, or a database dump. Sure, you have a project directory – but all of it is tracked by Git. A project's tmp/ directory is...
ImageMagick can convert SVGs to raster image formats. Example for PNG: convert input.svg output.png If the SVG has a size of 24x24 (viewBox="0 0 24 24"), the resulting...
...PNG will also have a size of 24x24. Resizing An SVG's viewBox specifies the intended size, but vector image formats can be scaled freely. Resize flag (poor results)
...of passwords for the root user and you prefer using a password for root. Solution Step 1 is getting a root mysql shell that allows us to change user credentials...
...and MySQL since they share names of binaries. sudo systemctl stop mysql sudo mysqld_safe --skip-grant-tables & This starts the mysql daemon in the background and we can now...
PostgreSQL uses the C library's locale facilities for sorting strings: First, all the letters are compared, ignoring spaces and punctuation. It sorts upper and lower case letters together. So...
...the order will be something like a A b B c C Then, spaces and punctuation are compared to break ties. Example: Ruby PostgreSQL IMAGE3.jpg image2.jpg image.jpg image3.jpg image2.jpg
...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...
When you load a with a nonce, that script can await import() additional sources from any hostname. The nonce is propagated automatically for the one purpose of importing more scripts. This is not related to strict-dynamic, which propagates nonces for any propose not limited to imports (e.g. inserting elements). Example We have a restrictive CSP that only allows nonces: Content-Security-Policy: default-src 'none'; script-src 'nonce-secret123' Our HTML loads script.js using that nonce: Our script.js imports other.js without a nonce: let other = await import('other.js') console.log("Look, script.js has imported %o", other) The import succeeds without a nonce, due to implicit nonce propagation. Why this is useful In modern build pipelines, code splitting (chunking) is implemented using dynamic imports. Nonce propagation allows us to use automatic chunking with restrictive, nonce-based CSPs without using strict-dynamic. E.g. esbuild automatically groups dynamically imported modules into chunks, and writes that chunk to disk. The compiled build has an await import('assets/chunk-NAXSMFJV.js'). There's no way to inject a nonce into that import(), but implicit nonce propagation still allows the request. Should I worry about this? It would require some truly strange code for user input to make it into an import() argument. I wouldn't lose sleep over this. Is this a browser bug? It is by design. Here are some sources: HTML Spec Section 8 (Web Application APIs) (search for "descendant script fetch options") Chromium test ensuring none propagation Firefox bug implementing nonce propagation CSP issue: Someone concerned about propagation being a vulnerability CSP issue: Proposal for import-src that went nowhere Are other CSP sources also propagated? No, only nonces. In particular host-based CSPs do not propagate trust. For example, you only allow scripts from our own host (no nonces): Content-Security-Policy: default-src 'none'; script-src 'self' Our HTML loads script.js from our own host: Our script.js imports other.js from a different host: let other = await import('https://other-host.com/other.js') This fails with a CSP violation: Executing inline script violates the following Content Security Policy directive 'script-src 'self''
options.add_option(:web_socket_url, true) options.add_option(:page_load_strategy, 'none') # required for selenium-webdriver 4.27+ end Capybara::Selenium::Driver.new(app, browser: :chrome, options: options) In combination with...
...stay open until handled. Note Setting the unhandled prompt to a hash is supported since selenium-webdriver 4.36 Note that you also need to set the :page_load_strategy to...
...any of the gems that GEM depends on. For the example above you would say: bundle update cucumber-rails --conservative If Bundler cannot update due to transitive dependencies, check if...
...for old versions of bundler The options below might be relevant if you're stuck with Bundler < 1.14: Option 1 This will work if all dependencies for the update are...
Module imports are hoisted (internally moved to the beginning of the current scope). Therefore, it doesn’t matter where you mention them in a module and the following...
Footgun example When you're not aware of import hoisting you may be surprised that your code runs in a different order than you see in the source file...
...tell npm to install a package globally with npm -g install @puppeteer/browsers. However, it seems that its not possible that npx can run commands from global packages without referencing the...
...image, where a testing chrome and chromedriver is installed with a global npm package. Since there is no local project it was more useful to install the package in a...
...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 useful properties: It does not block the browser from rendering content. Deferred scripts...
...can query the entire DOM tree with querySelector() and friends. document.readyState is 'interactive'. Deferred scripts will run before the DOMContentLoaded event. That means if your code waits to initialize until...
In the past we validate and set default values for boolean attributes in Rails and not the database itself. Reasons for this: Older Rails didn't support database defaults when...
...the Rails upstream on constraints in the database, is adding default values in the schema of the database itself. We also encourage to set boolean attributes to not null. For...
To apply transparency to an element, you can use opacity in CSS. However, sometimes you don't want to make the entire element transparent, only a color.
...modern CSS, you can simply generate non-opaque versions of a color without any preprocessor like Sass. This card describes how to do that. Note that we're not talking...
...not necessary to add a version constraint next to your gems in the Gemfile. Since all versions are saved in the Gemfile.lock, everyone running bundle install will get exactly the...
...You are not checking in the Gemfile.lock into the version control (not recommended) A specific gem has a bug in a more recent version (adding a comment for the reason...
This note shows how to merge an ugly feature branch with multiple dirty WIP commits back into the master as one pretty commit. Squashing commits with git rebase
...here will destroy commit history and can go wrong. For this reason, do the squashing on a separate branch: git checkout -b squashed_feature This way, if you screw up...
By default, Devise sends all emails synchronously with deliver_now. To change that, Devise's readme suggests overwriting the send_devise_notification method like this: class User def send_devise...
...notification(notification, *args) devise_mailer.send(notification, self, *args).deliver_later end end However, there is one problem: When deliver_later enqueues the mail with ActiveJob, the job arguments are logged. In...