View
Linked contentRepeats

How to explain SQL statements via ActiveRecord

ActiveRecord offers an explain method similar to using EXPLAIN SQL statements on the database.

However, this approach will explain all queries for the given scope which may include joins or includes.

Output will resemble your database's EXPLAIN style. For example, it looks like this on MySQL:

User.where(id: 1).includes(:articles).explain

```
EXPLAIN for: SELECT users.* FROM users  WHERE users.id = 1
+—-+————-+——-+——-+—————+
| id | select_type | table | type  | possible_keys |
+—-+—–…

Linked contentRepeats

Copy to clipboard without flash (clipboard.js)

We used zeroclipboard.js in some of our projects but now we switched to clipboard.js because it does not rely on flash. Flash support of the major browsers has ended.

Some more advantages of clipboard.js:

  • it consists only of a single javascript file, so it does not trigger additional requests with rails
  • it automagically provides user feedback by selecting the text it has copied
  • it provides callbacks for success and error which make it easier to add custom behaviour after copying to the clipboar…

JavaScript without jQuery (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?

```text
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 only on a desktop computer.

Have you benchm…

Repeats

AngularJS 1: How to keep "ng-hidden" elements from flickering on page load

When you have an element you want to hide, you can add a ng-show='isOpen' attribute to that element. When you set isOpen to false on the scope, the element will be hidden.

However, when you load the page, the element is usually rendered by the browser before Angular has loaded and had a chance to hide it.

Generic fix (prefer)

The ng-cloak directive was designed for exactly this purpose. Add a ng-cloak attribute or class (and more, see the link) to any element you want to …

Linked contentRepeats

Rails 4 introduced collection_check_boxes

Starting from Rails 4.0, you can use a special form options helper called #collection_check_boxes. It behaves similar to #collection_select, but instead of a single select field it renders a checkbox and a label for each item in the collection.

= form_for @post do |form|
  = form.collection_check_boxes :author_ids, Author.all, :id, :name_with_initial

How generated form params look like ———————————…

Linked contentAuto-destruct in 33 days

Unpoly 0.60.0 released: No jQuery required

You may browse a formatted and hyperlinked version of this file at https://unpoly.com/changes.

0.60.0

This is a major update with some breaking changes.

Highlights

  • jQuery is no longer required! Unpoly now has zero dependencies.
  • New up.element helpers to complement native Element methods. You might not even miss jQuery anymore.
  • Vastly improved performance on slow devices.
  • Utility functions that work with arrays and array-like values have been greatly improved.
Repeats

Auto-generating plain-text bodies for HTML e-mails in Rails apps

When building an application that sends e-mails to users, you want to avoid those e-mails from being classified as spam. Most obvious scoring issues will not be relevant to you because you are not a spammer.

However, your application must do one thing by itself: When sending HTML e-mails, you should include a plain-text body or tools like SpamAssassin will apply a significant score penalty. Here is how to do that automatically.

  1. Add premailer-rails to your Gemfile and bundle.
  2. Done! …
Repeats

Does <html> or <body> scroll the page?

Scrolling overflowing elements with JavaScript

HTML elements with overflow-y: auto or overflow-y: scroll will get a scrollbar when their content is higher than their own height.

When you scroll an element , the element's scrollTop property is updated with the scrollbar's new position. You can also set element.scrollTop = 30 to scroll the element to a vertical pixel position counted from the top.

Scrolling the main viewport with JavaScript

The browser's main document viewport is also scrollable by default. The element that …

Repeats

Using ES6 without a transpiler

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…

Repeats

How to emulate simple classes with plain JavaScript

If you want a class-like construct in JavaScript, you can use the module pattern below. The module pattern gives you basic class concepts like a constructor, private state, public methods.

Since the module pattern only uses basic JavaScript, your code will run in any browser. You don't need CoffeeScript or an ES6 transpiler like Babel.

A cosmetic benefit is that the module pattern works without the use of this or prototypes.

Example

Here is an example for a Ruby class that we want to translate into Javascript using the module patter…

Linked contentRepeats

Canceling promises

The cancelable promises proposal was withdrawn some time ago.

The new standard way is that your long-running function take 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', 'Abo…

Upgrading Ruby from 1.8.7 to 2.3.5

Suggested Workflow

Set the ruby version in .ruby-version to 2.3.5, then perform these steps one by one, fixing errors as they occur:

1) Update gems as listed below, and bundle
2) Boot a Rails console - see below for a list of changes you will probably need
3) Run Specs with --backtrace option
4) Run Cucumber features (with Geordi's --debug option)
5) When all tests are green, look through your Gemfile and remove as many version constraints as possible.
6) Boot the application in different environements to spot further issues, e…

Repeats

What collapsing margins are, how they work and when margins do not collapse

What collapsing margins are

Imagine you have 2 HTML boxes. The first one has a margin-bottom of let's say 30px and the second one a margin-top of 20px. After rules of collapsing margins have been applied we have a margin of 30px (not 50px) between these two boxes (see this article for an illustration) . This is because no addition of both margins takes place but the maximu…

How to create a Basic Auth header value

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 …

Repeats

How to start Terminator with split screens and custom commands running

Starting Terminator with split screens is quite simple: Just store a layout and start Terminator with the --layout <your layout> option.

However, if you want to run custom commands in your terminals, you need to do some work to keep these terminals from closing after a command exits. You accomplish this by tweaking bash to run a command before actually starting.

Pimp your .bashrc

Add this to the end of .bashrc:

```
# hack to keep a bash open when starting it with a command
[[ $startup_cmd ]] && { declare +x $startup_cmd; eval…

CSS: How to find out the rendered font in chrome

The rendered font often depends on the local font your system provides, therefore you often find a rule like below in the computed style for an element:

font-family: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif

This means if your system has a font named Menlo, it will render the text with this font. Otherwise it will try Monaco and so on. For the last two fallback options the system is free to use any monospace font or if not present any serif font. At lea…

Deprecated

Live CSS / view reloading

Next time you have to do more than trivial CSS changes on a project, you probably want to have live CSS reloading, so every time you safe your css, the browser updates automatically. It's pretty easy to set up and will safe you a lot of time in the long run. It will also instantly reload changes to your html views.

Simply follow the instructions below, taken from blog.55minutes.com.

Install CSS live reload (only once per project)

  1. Add th…

How to: Use Ace editor in a Webpack project

The Ace editor is a great enhancement when you want users to supply some kind of code (HTML, JavaScript, Ruby, etc).
It offers syntax highlighting and some neat features like auto-indenting.

Integrating it with Webpack as described in the documentation – by using ace-builds and ace-builds/webpack-resolver – failed pretty hard for me. Maybe because Rails' Webpacker is still on Webpack 2.
The following works for Ruby on Rails with Webpacker / Webpack 2.

  1. Do not use the `ace-builds…
This website uses cookies to improve usability and analyze traffic.
Accept or learn more