Usually, Unpoly compiler destructors are returned from the compiler function.
However, when using async compiler functions, you can not register destructors via return.

This will not work:

up.compiler('my-example', async (element) => {
  await something
  
  return function onDestroy() {
    // ...
  }
})

Instead, use up.destructor:

up.compiler('my-example', async (element) => {
  await something
  
  u...

The cards editor has a feature "Cite other card" to create links to other cards in the same deck as mardown links.
If you want to reference a card from a different deck, this bookmarklet might be useful:

javascript:(function () {
  const doAlert = () => { alert("Maybe not a makandra card?") };
  let cardsPathPattern = /(\/[\w-]+\/\d+)-.+/;
  if (window.location.pathname.match(cardsPathPattern)) {
    let currentPath = window.location.pathname.match(cardsPathPattern)[1];
    let title = document.querySelector('h1.note--title')?.textCon...

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

tl;dr

You should decouple migrations from models by embedding models into the migration. To use STI in this scenario you have to overwrite find_sti_class and sti_name.

Tip

When possible, try to avoid STI in migrations by disabling it.

Example

Warning

This is more for the sake of I want to do it but I kno...

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

Because colors improve readability so much.
On Ubuntu 18.04 you can install it with sudo apt install grc

From github:

For the impatient - try following commands:

grc netstat
grc ping hostname
grc tail /var/log/syslog
grc ps aux

Download buttons can be difficult to test, especially with Selenium. Depending on browser, user settings and response headers, one of three things can happen:

• The browser shows a "Save as..." dialog. Since it is a modal dialog, we can no longer communicate with the browser through Selenium.
• The browser automatically downloads the file without prompting the user. For the test it looks like nothing has happened.
• The browser shows a binary document in its own window, like a PDF. Capybara/Selenium freaks out because there is no HTML docum...

Rails 5 / 6 / 7

The Diátaxis framework aims to solve the problem of structure in technical documentation. It adopts a systematic approach to understanding the needs of documentation users in their cycle of interaction with a product.

Diátaxis identifies four modes of documentation - tutorials, how-to guides, technical reference and explanation. It derives its structure from the relationship between them.

In Diátaxis, each of these modes (or types) answers to a different user need, fulfils a different purpose and requires a different appr...

The parallel-gem is quite easy to use and can speed up rendering time if you want to render the same partial multiple times (e.g. for rendering long lists of things).
If your parallelized code talks to the database, you should ensure not to leak database connections.

Consider you want to render a list of groups with their members as json. You can use a partial for the rendering of group members, b...

So you're hunting down a regression (or just a bug) and want to use git bisect to find out when it was introduced? Smart kid.
If you have a shell command ready to reveal if your current state is good or bad, you can have git do most of the work for you.

Using git bisect run <your command> you can tell git that your command will reveal the issue; git on the other hand will use the return value of that call to decide if the state is good or bad.
...

Jasmine specs for the frontend often need some DOM elements to work with. Because creating them is such a common task, we should have an efficient way to do it.

Let's say I need this HTML structure:

<ul type="square">
  <li>item 1</li>
  <li>item 2</li>
</ul>

This card compares various approaches to fabricating DOM elements for testing.

Constructing individual elements

While you can use standard DOM functions to individually create and append elements, this is extremely verbose:

let list = document.createElement('...

Jasmine specs that work with DOM elements often leave elements in the DOM after they're done. This will leak test-local DOM state to subsequent tests.

For example, this test creates a <spoiler-text> element, runs some expectations, and then forgets to remove it from the DOM:

describe('<spoiler-text>', function() {
  it ('hides the secret until clicked', function() {
    let element = document.createElement('spoiler-text')
    element.secret = 'The butler did it'
    document.body.appendChild(element)
 ...

Running rails server will start a local server that you can access via http://localhost:3000.

When you are working on multiple web apps, they will likely set cookies with generic names on localhost. This is annoying, since you will sign out your current user whenever you switch to another app.

A better way is to use our own daho.im service. All daho.im subdomains resolve to your local IP (127.0.0.1). That means you can use a different hostname for different apps, and you will stay logged in in each app:

http://foo-ap...

Capybara provides execute_script and evaluate_script to execute JavaScript code in a Selenium-controlled browser. This however is not a good solution for asynchronous JavaScript.

Enter evaluate_async_script, which allows you to execute some asynchronous code and wait until it finishes. There is a timeout of a couple of seconds, so it will not wait forever.

Use it like this:

page.evaluate_async_script(<<~JS)
  let [done] = arguments
  doSomethingAsynchronous().then(() => {
    done() // call this to indicate we're done
  })
J...

When we write a form with date fields, we often use graphical data picker like Rome to get a consistent calendar popup on all browsers.

When you integrate a date picker popup, remember to also set autocomplete="off" on the text input that opens the calendar on click. Otherwise the autocomplete suggestions will cover the calendar box and make it unusable:

If you are using a tool like Unpoly you might want to set autocomplete="off" i...

Your development machine is usually on a very good network connection.
To test how your application behaves on a slow network (e.g. mobile), you can simulate limited bandwidth.

Chrome

• Open the dev tools (Ctrl+Shift+I or F12) and switch to the "Network" tab
• In the row below the dev tool tabs, there's a throttling dropdown which reads "Online" by default.
• Inside the dropdown, you will find a few presets and an option to add your own download/upload/latency settings.

Firefox

• Open the dev tools (Ctrl+Shift+I or F12) and switc...

Hide/Show Drawer

You can press Escape to show/hide the drawer.

Fast Navigation with Command Menu

Use Ctrl + Shift + p to open Command Menu, where you can switch to different panels, toggle settings etc.

Reorder DevTools panels and Drawer tabs and combine them by moving them up and down to and from the Drawer.

Right click on any tab and then choose Move to top / Move to bottom

Change DevTools layout from auto to always horizontal or vertical.

Click on Settings > Preferences > Panel Layout, Choose between Horizontal / Ve...

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

While in CSS zero is usually referenced without specifying a unit (e.g. padding: 0), you must not use a unitless zero in calc functions.

You would probably not write something like calc(1rem + 0) yourself, but it might be the result of a CSS preprocessor (like Sass) or when using custom properties.

The following is invalid:

.example {
  --extra-padding: 0;
  padding: calc(1rem + var(--extra-padding));
}

That is simply because it is unsupported, as per docum...

One-line takeaways

• Don’t override native browser (or OS) shortcuts.
• Support standard shortcuts that don’t contradict the previous rule, and use one or two letter shortcuts for other actions.
• Always have a consistent system.
• Pay maximum attention to discoverability.

Variable fonts are popular for two reasons: they expand design possibilities and improve website performance. While the former statement is definitely true since variable fonts do provide infinite typographical choices, the latter only holds under certain conditions.

If you're frequently switching between projects, you might be annoyed by RubyMines behavior of opening the last project on startup.
After all loading a project takes a few seconds as files are scanned and the RubyMine index is rebuilt. If you switch to another project after startup this time is doubled.

A saner default might be to open RubyMine with a dialog to choose the project to open.

This can be set under Appearance & Behavior > System Settings > Project > Reopen projects on startup.

Switching to other projects

A helpful dialog...