This is a presentation from 2019-01-21.

Summary

• We want to move away from jQuery in future projects
• Motivations are performance, bundle size and general trends for the web platform.
• The native DOM API is much nicer than it used to be, and we can polyfill the missing pieces
• Unpoly 0.60.0 works with or without jQuery

Is jQuery slow?

From: Sven
To: unpoly@googlegroups.com
Subject: performance on smartphones and tablets

Hello

I just used your framework in one project and must say,
I am really pleased with it -- but o...

If your app does not need to support IE11, you can use most ES6 features without a build step. Just deliver your plain JavaScript without transpilation through Babel or TypeScript, and modern browsers will run them natively.

Features supported by all modern browsers include:

• fat arrow functions (() => { expr })
• let / const
• class
• async / await
• Promises
• Generators
• Symbols
• Rest arguments (...args)
• Destructuring

You won't be able to use import and export, or use npm modules.

See this [ES6 compatibility mat...

The standard way to abort async code is that your function takes a AbortSignal { signal } property. The caller can use this signal to send an abort request to your function. Upon receiving the request, your function should reject its promise with an error.

Async browser functions like fetch() reject their promises with a new DOMException('Message here', 'AbortError') when canceled.

This already has good browser support and can be polyfilled on older browsers.

Exa...

When doing Basic Authentication, your browser will send an "Authorization" header. Its value is simply a Base64-encoded representation of "username:password" (like when you place credentials in the URL directly). Example for "user@example.com" with password "secret":

Authorization: Basic dXNlckBleGFtcGxlLmNvbTpzZWNyZXQ=

So, in Ruby, you can create such headers like so:

Base64.strict_encode64("#{username}:#{password}")

Note that when speaking to a REST API, you should be using libraries like RestClient or HTTParty which will wrap ...

Puma allows you to specify the max and min threads. In development this could be useful if you use a debugger, but do not want to overflow the console with other request like from ActionCable. Then just set the max threads to 1 and the other requests have to wait.

WORKER_TIMEOUT=1000 puma -t 0:1 -w 1 -p 3000

The exception_notification gem supports to provide custom data to e.g. the fail mail within foreground or background jobs.

ExceptionNotifier.notify_exception(_ex_, :data => {:message => "was doing something wrong"})

Still this can be blocked if you have an initializer where you override the default sections and background_sections option. So remember to add the data option to the desired section if required. In case you raise an exception without a data object, the fail...

There are two ways to lock a user in devise.

1. Using the lockable module
2. Customizing the user account status validation when logging in.

It depends on your requirements which methods works best.

Locking a user on soft delete

We recommend to use option 2 when you want to couple the lock to the m...

Ubuntu has decided to disable PDF processing because ImageMagick and the underlying Ghostscript had several security issues.

When your Ghostscript is up to date (and receiving updates regularly), you can safely reactivate PDF processing on your computer like this:

1. Open /etc/ImageMagick-6/policy.xml (requires sudo)
   • For older versions of Ubuntu (or possibly ImageMagick), the path is /etc/ImageMagick/policy.xml
2. Remove/Comment lines after <!-- disable ghostscript format types -->

If you need ...

Mobile Chrome and Safari support the "web share API" which allow you to use the native share functionality of an Android or iOS phone. Some desktop OSs like Windows or MacOS also support native share dialogs. See Can I Use for a detailed support matrix.

When clicking a share button using this API, the browser will automatically show all installed applications that support content sharing, such as Whatsapp, Facebook, Twitter, e-mail etc.

The API is extremely simple to use:

if ...

Geordi uses parallel_tests if available for running the test suite. To debug an application it is very unhandy to have multiple processes as your terminal I/O will not work as expected once a breakpoint is hit.

Even parallel_tests support an option to enable a single process run, it is not possible to pass this option through geordi. But you can set the number of processes via ENV variable manually:

PARALLEL_TEST_PROCESSORS=1 bundle exec geordi cucu...

Font Awesome 5 is a comprehensive solution for vector icons on your website.

Originally, Font Awesome came as an icon font (plus stylesheets), but recently it can also be used as a pure JavaScript solution (which will render icons as inline <svg> tags), or even as SVG sprites.

All solutions have their pros and cons:

Icon font:

• little CPU load (no JavaScript)
• fonts are relatively large
• 1 extra HTTP request

Javascript + inline SVG:

• higher CPU load (needs to watch the DOM via mutation observers to ad...

Phusion Passenger changed the way how it gets restarted several times. Through the project's history, these all were valid:

• touch tmp/restart.txt
• sudo passenger-config restart-app /path/to/app
• passenger-config restart-app /path/to/app

You should not need to know which one to use. Instead, the capistrano-passenger gem will choose the appropriate restart mechanism automatically based on your installed the passenger version.

Installation

1. Add to your Gemfile:

   gem 'capistr...
   

In this example we assume that not only the storage gem changes but also the file structure on disc.

A general approach

Part A: Create a commit which includes a script that allows you to copy the existing file to the new file structure.

Part B: Create a commit which removes all paperclip logic and replace it with the same code you used in the first commit

Part A

Here are some implementation details you might want to reuse:

• Use the existing models to read the files from
• Use your own carrierwave models to write t...

Background

Cross-Site Request Forgery (CSRF) is an attack pattern for websites. A CSRF attack is usually relevant in a browser context, where state is kept for multiple domains (as opposed to independent requests made e.g. with curl). The most common example is authentication via cookies. If a script on https://example.com made requests to https://docs.google.com, the browser would send all cookies for docs.google.com along, effectively given the script access to anythin...

A JavaScript error in an E2E test with Selenium will not cause your test to fail. This may cause you to miss errors in your frontend code.

Using the BrowserConsole helper below you can check your browser's error console from your E2E tests.

The following will raise BrowserConsole::ErrorsPresent if there is an error on the browser console:

BrowserConsole.assert_no_errors!

Ignoring errors

You can ignore errors by their exact message:

BrowserConsole.ignore('Browser is burning')

You can ignore errors with me...

HTML's <input type="file"> accepts a single file. You can allow multiple files via <input type="file" multiple>.
But sometimes, selecting multiple files is not enough and can be cumbersome for the user. Enter webkitdirectory:

<input type="file" webkitdirectory multiple>

Using webkitdirectory switches the browser's file picker to select a directory. All files inside that directory, and inside any nested subdirectories, will be selected for the file input.

This can be useful when users want to upload all files from a nested dire...

Most forms have a single submit button that will save the record when pressed.

Sometimes a form needs additional submit buttons like "accept" or "reject". Such buttons usually attempt a state transition while updating the record.

To process a form with multiple buttons, your server-side code will need to know which button was pressed. To do so you can give each submit button a different [formaction] attribute. This will override the ...

If you need to run a program on a remote machine (e.g. to your office PC) with a graphical UI (and you trust the remote machine), you can use SSH X-Forwarding. I sometimes use this to connect to a virtual machine installed on my work PC from my home office.

Forwarding X over SSH

To use X forwarding, when connecting to the remote machine, and add -X to the ssh call. Now, when you start a program with a UI (e.g. virtualbox) in that SSH session, a window will open on your local machine. It will not be particularly ...

Migrating data from a legacy into a new system can be a surprisingly large undertaking. We have done this a few times. While there are significant differences from project to project, we do have a list of general suggestions.

Before you start, talk to someone who has done it before, and read the following hints:

Understand the old system

Before any technical considerations, you need to understand the old system as best as possible. If feasible, do not only look at its API, or database, or frontend, but let a user of the old system sho...

At makandra, we've built a few gems over the years. Some of these are quite popular: spreewald (> 1M downloads), active_type (> 1M downloads), and geordi (> 200k downloads)

Developing a Ruby gem is different from developing Rails applications, with the biggest difference: there is no Rails. This means:

• no defined structure (neither for code nor directories)
• no autoloading of classes, i.e. you need to require all files yourself
• no active_support niceties

Also, their scope...

As a web developer, you know Google Analytics (GA). Probably you've dropped the GA snippet into more than one website, maybe you've even used its Javascript API to implement tracking at the event level.

Google Tag Manager (GTM) is a related tool, but on a higher level and thus with much more power. GTM is not a replacement for GA. Rather, it can make GA configurable without changing anything in the application's code base (and much more beyond, see below).

Only prefer GTM if the customer requests it, or if he is updating his tracking r...

Why secure-only cookies used to be necessary

Cookies have an optional secure flag. It tells the browser to not send the cookie for a non-https request.

It used to be important to activate the secure flag even on sites that automatically redirect users from http:// to https://. The reason was that most users will only enter a scheme-less domain like makandra.de into their location bar, which will default to `http://m...

Ruby has this handy block shortcut map(&:to_i) for map { |x| x.to_i }. However, it is limited to argument-less method invocations.

To call a method with an argument, you usually need to use the full block form. A common and annoying case is retrieving values from a list of hashes (imagine using a JSON API):

users = [ { name: 'Dominik', color: 'blue' }, { name: 'Stefan', color: 'red'} ]
names = users.collect do |user|
  user[:name]
end

If you're using Rails 5+, this example is covered by Enumerable#pluck (`users.pluck(:name)...

The method cookies is defined in the ActionController and should never be overwritten.

Bad example

class StaticPagesController < ApplicationController

  def imprint
  end

  def cookies
    redirect_to '/'
  end

end

If you create an action called cookies, any call to the cookie storage will be broken and call the method. What's more, in this example calls to static_pages_controller#imprint might as well end up redirecting to the homepage.

Solution

Just define the action as cookies_action or similar and adjust...