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...

The linked content describes:

• The different color space of Oklch and RGB/HSL (HDR colors)
• The advantage of Oklch when you change a base color and your derived colors will keep the same assertions on contrast level

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...

SASS has an @extend keyword to inherit styles.

.alert
  color: red
  
  &.-framed
    border: 1px solid red
    padding: 5px
    
  &.-homepage
    @extend .-framed
    border-width: 5px

When compiling, SASS will simply join the selectors. Note how .-homepage is written where .-framed was defined:

...
.alert.-framed, .alert.-homepage {
  border: 1px solid red;
  padding: 5px;
}
.alert.-homepage {
  border-width: 5px;
}

Warning

Unfortunately, this does...

Not all email clients support external images in all situations, e.g. an image within a link. In some cases, a viable workaround is to turn your images into inline attachments.

Note

Rails provides a simple mechanism to achieve this:

• https://guides.rubyonrails.org/action_mailer_basics.html#making-inline-attachments

This documentation makes it look like you have to care about these attachments in two places. You have to create the attachment in t...

Carrierwave's BaseUploader can have some validations that you can use by overriding a certain method, which's expected name is hard coded. A popular example is extension_allowlist, which returns an array of strings and let's you only upload files that have a filename with an extension that matches an entry in that array. Another useful validation can be size_range, which gives you a little bit of control over how your storage gets polluted.

This is often good enough, but some times you need to validate special cases.

Validations t...

Sometimes I ran across a GitHub merge request of a gem where it was not completely obvious in which version the change was released. This might be the case for a bugfix PR that you want to add to your project.

Git can help you to find the next git tag that was set in the branch. This usually has the name of the version in it (as the rake release task automatically creates a git tag during release).

git name-rev --tags <commit ref>

Note

The more commonly used git describe command will return the last tag before a c...

The linked article found a simple way to rewrite legacy git aliases to make them work with differently named default branches

• Step 1: Decide which is the most common default branch name of your projects, e.g. master. Define it as the global init.defaultBranch git configuration :

git config --global init.defaultBranch master

• Step 2: Overwrite the value in each project directory that uses different defaults

# cd /path/to/project, then run:
git config ...

Usually, design development starts with drafts, sketches and prototypes. These are reviewed, refined and iterated until the final design is ready – shiny, accepted and ready for implementation. I believe this works well when you get to work with the final decider in person.

However, this approach is not successful when the customer has complex internal structures ("Enterprise"). While the drafts and iterations might be all approved by the department you're working directly with ("Fachbereich"), deciders further up the hierarchy (the CEO, po...

We usually rely on VCR and WebMock to prevent any real network connection when running our unit tests.

This is not entirely true: They are both limited to a set of HTTP libraries listed below (as of 2022). Direct calls to Kernel#open or OpenURI#open_uri are not mocked and will trigger real network requests even in tests. This might bite you e.g. in [older versions of CarrierWave](https://github.com/carrierwaveuploader/carrierwave/blob/0.11-stable/lib/carrierwave/upl...

You have some SVG files you want to use as icons on your website. How would you embed them?

Common options are:

1. Use them with an image: <img src='path-to-icon.svg'>
2. Embed them inline with <svg>$ICON</svg>
3. Embed them using CSS and background-image: url(path-to-icon.svg) or even background-image: url(data:$ICON).
4. Build your own icon font.

All of these have drawbacks:

• Image and background-image do not allow to recolor the image using CSS.
• Inline-<svg> are unnecessary work for the server and are...

In esbuild, you usually import other files using relative paths:

import './some-related-module'
import `../../utils/some-utility-module`
import `../../../css/some-css.sass`

This is totally fine if you import closely related files, but a bit clunky when you're trying to import some "global" module, like a utility module. When 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:

First, you create a file called `js...

As a developer you may have many tools watching your project for changes: Your IDE, Webpack, Guard, etc. This is often done with an inotify watcher. If 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:
sudo find /proc/*/fd/ -type l -lname "anon_inode:inotify" -printf "%hinfo/%f\n" | xargs grep -cE "^inotify" | column -t -s:

You will get a list like:

/proc/3753/fdinfo/7      1
/proc/3774/fdinfo/7      1
/proc/4034/fdinfo/12     14
/pr...

tl;dr

In Chrome DevTools in the Layouts tab you have handy options to debug CSS Flexbox and Grid. Including:

• Display size and lines along with labels
• Changing their attributes
• Change how overlay is colored and fastly switch nested elements in the Elements panel

This guide will only cover some example gif recordings on how to use with Grid, since it's basically straight forward to apply this for Flexbox by yourself afterwards.

For this purpose a the link to documentation and a simple code pen have been added...

If you need to convert an SVG source to PS or EPS, the most common suggestion on the interwebs is to use Inkscape from the commandline.
Inkscape is a fairly resource-heavy tool with lots of dependencies. A great alternative for converting is CairoSVG.

CairoSVG is available on most Linux distros through their package management systems, e.g. apt install cairosvg on Ubuntu.
It has few dependencies (most importantly Python 3 and some related packages, but really not much)...

When your Rails application offers downloading a bunch of files as ZIP archive, you basically have two options:

1. Write a ZIP file to disk and send it as a download to the user.
2. Generate a ZIP archive on the fly while streaming it in chunks to the user.

This card is about option 2, and it is actually fairly easy to set up.

We are using this to generate ZIP archives with lots of files (500k+) on the fly, and it works like a charm.

Why stream downloads?

Offering downloads of large archives can be cumbersome:

• It takes time to b...

The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand.

Example

<div class="outer">
  <div class="inner">
    Some text
  </div>
</div>

.outer {
  background-color: cyan;
  position: relative;
  width: 500px;
  height: 500px;
}

Top, right, bottom and left

https://jsfiddle.net/jqx68wem/

.inner {
  background-color: darkCyan;
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10p...

It might sometimes be useful to check whether your Rails application accesses the file system unnecessarily, for example if your file system access is slow because it goes over the network.

The culprit might be a library like carrierwave that checks file existence or modification times, whereas your application could determine all this from your database.

Introducing strace

One option it to use strace for this, which logs all system calls performed by a process.

To do this, start your rails server using something like

DISA...

When you are working with SVG files and ImageMagick you can get different results on different machines depending on which additional packages you have installed.

From: http://www.imagemagick.org/script/formats.php

ImageMagick utilizes inkscape if its in your execution path otherwise RSVG. If neither are available, ImageMagick reverts to its internal SVG renderer.

This card explains how to generate an entity relationship diagram for your Rails application.
We also show how to limit your ERD to a subset of models, e.g. models inside a namespace.

Generating a full ERD

Option A: RubyMine

1. Right-click anywhere in your project tree
2. In the context menu, find the "Diagrams" menu item at/near the bottom
3. Inside, choose "Show diagram" → "Rails Model Dependency Diagram"
4. A new tab will open with the diagram inside. You can modify it there, and export it as an image.

Option B: Use rails-e...

This are the steps I needed to do to add esbuild to an application that used the vanilla rails asset pipeline with sprockets before.

Preparations

1. update Sprockets to version 4
2. add a .nvmrc with your preferred node version (and install it)
3. add gems jsbundling-rails and foreman to your Gemfile:

   gem 'jsbundling-rails'
   group :development, :test do
     gem 'foreman'
     # ...
   end
   

4. bundle install
5. run bin/rails javascript:install:esbuild in a console to prepare esbuild.
6. run `yarn instal...

Attaching files to a field that is handled by Carrierwave uploaders (or maybe any other attachment solution for Rails) in tests allows different approaches. Here is a short summary of the most common methods.

You might also be interested in this card if you see the following error in your test environment:

CarrierWave::FormNotMultipart:
You tried to assign a String or a Pathname to an uploader, for security reasons, this is not allowed.
If this is a file upload, please check that your upload form is multipart encoded.

Factor...

Table Of Contents

• Flexbox wrapping
• Spacing
• Long content
• Prevent an image from being stretched or compressed
• Lock scroll chaining
• CSS variable fallback
• Using fixed width or height
  • The fixed height
  • The fixed width
• Forgetting background-repeat
• Vertical media queries
• Using justify-content: space-between
• Text over images
• Be careful with fixed values in a CSS grid
• Show a scrollbar only when it's needed
• Scrollbar gutter
• Minimum content size in CSS flexbox
• Minimum content size in CSS grid
• Auto fit vs auto...

Conversion

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)

If you want your raster image to be larger, the naive approach would be to use the resize flag.

convert -resize 96x96 input.svg output.png

However, this resu...

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.

There are many causes for flaky tests. This card focuses on a specific class of feature with heavy side effects, mostly on on the UI. Features like the following can amplify your flakiness issues by unexpectedly changing elements, causing excessive requests or other timing issues:

• Lazy loading images
• Autocomplete in search f...