Unpoly 0.60.0 removed the jQuery dependency to improve performance (see Hennings talk about Javascript without jQuery). I upgraded one of our applications which used a lot of JavaScript with Unpoly compilers and jQuery and want to mention some aspects I had trouble with:

Use up.$compiler as a first step

up.compiler now yields a native DOM element instead of jQuery element. In order to get the old behavior, use up.$compiler. This is u…

jQuery has a function $.fn.trigger(). You can use it to dispatch an event on a jQuery object:

let $element = $('.foo')
$element.trigger('change')

A caveat is that such an event will be received by jQuery event listeners, but not by native event listeners:

let $element = $('.foo')

$element.on('change', event => console.log('I will be called'))
$element[0].addEventListener('change', event => console.log('I WON'T be called'))

$element.trigger('change')

This is currently a WONTFIX for jQuery (see c…

It is quite easy to migrate from CoffeeScript to ES6. You can use decaffeinate to convert your CoffeeScript source to modern JavaScript.

Installation

• Install the NPM module globally yarn global add decaffeinate
• Add the following line to your ~/.bashrc to export the Yarn binaries in your Bash

export PATH="$PATH:$(yarn global bin)"

• Run decaffeinate some.coffee to get the converted modern JavaScript file.

Notes

• decaffeinate will add some [suggestions](https://gith…

So you are comparing two Time objects in an RSpec example, and they are not equal, although they look equal:

expected: Tue May 01 21:59:59 UTC 2007,
     got: Tue May 01 21:59:59 UTC 2007 (using ==)

The reason for this is that Time actually tracks fractions of a second, although #to_s doesn't say so and even though you probably only care about seconds. This means that two consecutive calls of Time.now probably return two inequal values.

Consider freezing time in your tests so it is not dependent on the speed of the executi…

TLDR: Ruby class variables (@@foo) are dangerous in many ways. You should avoid them at all cost. See bottom of this card for alternatives.

Class variables are shared between a class hierarchy

When you declare a class variable, it is shared between this and all descending (inheriting) classes. This is rarely what you want.

Class variables are bound at compile-time

Like unqualified constants, class variables are bound to your current scope *whe…

In a nutshell: return statements inside blocks cause a method's return value to change. This is by design (and probably not even new to you, see below) – but can be a problem, for example for the capture method of Rails.

Consider these methods:

def stuff
  puts 'yielding...'
  yield
  puts 'yielded.'
  true
end

We can call our stuff method with a block to yield. It works like t…

Over the years we have tried several solution to have vector icons in our applications. There are many ways to achieve this, from SVGs inlined into the HTML, SVGs inlined in CSS, JavaScript-based solutions, to icon fonts.

Out of all these options, the tried and true icon font seems to have the most advantages, since

• icon fonts are supported everywhere
• they perform well and require no JavaScript at all
• their icons align nicely with text
• their icons automatically inherit color and size of the surrounding text

The big issue used to b…

To keep JavaScript sources small, it can sometimes make sense to split your webpack bundles. For example, if your website uses some large JavaScript library – say TinyMCE – which is only required on some select pages, it makes sense to only load that library when necessary.

In modern webpack this is easily doable by using the asynchronous import function.

Say we have an unpoly compiler that sets up TinyMCE like this (code is somewhat simplified):

```
// TinyMCE as part of the main bundle!

import tinymce from 'tinymce/tinymce'

// UI
im…

We already have some approaches on how to test file downloads withe selenium. Nonetheless here is another approach, which inspects the Chrome download folder. This way you do not need a separate logic on whether a file is served from a controller or a public path. The DownloadHelpers might also be re-used for reading e.g. a PDF file and checking its content.

Note: The step below will override a [spreewald step](https://gith…

We're always striving towards keeping our website's JavaScript as small as possible.

If you're using webpack(er), you can use the webpack-bundle-analyzer plugin to get a good overview, which of your JavaScript modules take up how much space, and where you can optimize.

To use it, add it via npm or yarn

yarn add webpack-bundle-analyzer

Then add this to your environment.js:

```
// Uncomment this code to show statistics of bundle sizes. Generated file will automatically o…

The SameSite cookie attribute was first drafted in 2016. It defines under which circumstances a cookie should be sent to the server, putting cookies into three different classes:

SameSite=None

Send the cookie whenever a request is made to the cookie domain. A cookie without the SameSite attribute will currently be handled as if it was sent with SameSite=None.

Note: Googl…

When delivering non-public uploaded files (images, documents etc), one has to decide whether and how to do authorization. The usual approaches are:

• Using send_file with a regular controller. This is secure, but potentially slow, especially for large collections of images.
• Using unguessable URLs. This is fast (because Apache can deliver assets without going through Rails), but less secure.

When going with the "unguessable URL" approach, it is possible to somewhat increase security by using expiring URLs. The idea is to encode the expi…

If you struggle with a /boot partition that is too small for updates, and you are too intimidated by the way to resize your /boot partition, there might be an easier fix:

It is possible to configure a better compression algorithm for the images in /boot. To do this, edit /etc/initramfs-tools/initramfs.conf and change the existing line to

COMPRESS=xz

Then rebuild the images using

sudo update-initramfs -u -k all

If you get an error during the last step, please immediately get help, because otherwise…

This is a guide on how to effectively use git when working on a feature branch. It is designed to get out of your way as much as possible while you work, and ensure you end up with clean commits in the end.

We assume you are the only person working on this branch. We also assume the branch has never been "partially" merged into master.

You want to start a feature branch

git checkout master
git checkout -b my-feature-branch
git push -u

You've added code that works independently of your other …

When you're nesting setTimeout(f, 0) calls, your browser will silently increase the delay to 5 milliseconds after the fourth level of nesting. This is called "timeout clamping".

Deeply nested setTimeout can happen when you're using a non-native Promise polyfill with long chains of then calls.
The native Promise implementation (Can I use link) uses microtasks and is thus not subject to timeout cla…

An alternative of using a multiple assignment for a Regex are named groups. Especially when your Regex becomes more complicates it is easier to understand and to process.

Note:

• In case a string does not match the pattern, .match will return nil.
• With Ruby 2.4 the result of .match can be transformed to a Hash with named_captures. This allows you to use methods like slice or fetch on the result.

Example with a mult…