Using Spring and parallel_tests in your Rails application

You want Spring for super-fast binstubs like bin/rails or bin/rspec which avoid Rails boot time.
You want parallel_tests to speed up full test runs of large test suites.

Unfortunately, you do not want parallel_tests to use your Spring binstubs as those parallelized tests will share data and/or loose some information. There are some issues about this on GitHub and there is a suggested [workaround](https:...

Git: how to work with submodules

Sometimes you might need to nest a git-project inside another git-project. The right strategy is to use submodules in this case.

How git submodules work

  • Each submodule is a own git repository
  • Once you commit changes in a submodule, the parent repository can link the new sha as its reference
  • You need to take care manually that your git submodules are up-to-date and changes in the submodules are linked in the parent repository

Add a submodule

Here is how you add a nested project inside your parent project

$ git submodule...

Quill - Your powerful, rich text editor

A new open source WYSIWYG editor that promises superior fidelity and customizability.

This might be a future alternative to Redaktor.

Also see SlateJS and Trix.

When Internet Explorer does not render webfonts on customer machines

Things to check first

  • Do you deliver fonts in a format that the target IE version understands?
  • Did you double-check your @font-face declarations with all the hacky syntax that is required? Compare them with other declarations you find on the web.
  • Are all webfont versions delivered with the correct mime type?
  • Does the customer have a locally installed font with the same name? This usually leads to trouble, but there are workarounds.
  • Do IE's security settings prevent the download of webfonts? (see below)

I...

An intro to Javascript promises

Promises are the new way™ to express "Do this, and once you're done, do that". In contrast to callbacks, promises are easily chainable. From the readme of Q, an early implementer of the pattern:

The callback approach is called an “inversion of control”. A function that accepts a callback instead of a return value is saying, “Don’t call me, I’ll call you.”. Promises un-invert the inversion, cleanly separating the input arguments from control flow arguments. This simplifies the use and creation of APIs, p...

MySQL: How to dump single tables instead of a complete database

Sometimes you want to test migrations with production or staging data. Dumping single tables makes sense if a complete dump would be to big.

mysqldump -u deploy_user -p application_production table1 table2 table2 > table1_table2_table2.sql.dump

Hint: If a table has to many constraints, a complete dump could be more handy.


Further reading:

Angular directive scope binding with = (equals)

Angular directives with isolate scopes have three different variable binding strategies, of which one is =. Example:

# HTML
<panel value="parent.someFn() && false" twoway="parent.someProperty"></div>

# Coffeescript
@app.directive 'panel', ->
  scope:
    evaluated: '=value'
    bound: '=twoway'
  link: ->
    scope.evaluated # = false
    scope.bound = 'foo' # Updates parent.someProperty

HTML attributes bound with = (value, twoway) have their value evaluated as Angular expression in the parent scope's context and have the ...

How to type brackets, braces, pipe, backslash, or at sign on OSX

On OSX (real or inside Browserstack), you need different keystrokes for your favorite special characters than you'd use on Linux or Windows.

Character OSX Keystroke
[ Alt+5
] Alt+6
{ Alt+8
} Alt+9
` ` (Pipe)
\ (Backslash) Alt+Shift+7
@ Alt+L

Incredibly fast web apps // Speaker Deck

Presentation about optimizing Ruby on Rails apps.

From Nico Hagenburger (homify's lead frontend developer).

Angular isolate scopes: Calling a parent scope function with externally defined arguments

Isolate scopes offer three kinds of variable binding. One of them is &, allowing to bind a property of the isolate scope to a function in the parent scope. Example:

# HTML
<panel proxy="parent.someFunction(arg1, arg2)"></div>

# Coffeescript
@app.directive 'panel', ->
  scope:
    parentFn: '&proxy'
  link: (scope) ->
    scope.parentFn(arg1: 'first', arg2: 'second')

In this dumb example, the panel directive will call its scope's parentFn() function with two arguments, which proxies to parent.someFunction('first', 'second')...

Amazon S3: Give a user write-access to selected buckets

There's no user interface to give an AWS IAM user read/write access to a selected list of S3 buckets.

Instead you need to attach an IAM policy like the one below to the user:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::bucket1",
                "arn:aws:s3:::bucket2"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
         ...

Sass: How to do math with shorthand values inside variables

If you need to modify (e.g. add 2px) a Sass variable that defines multiple values as one (e.g. for short-hand CSS definitions such ass padding), you can by using nth. It's ugly.

While you could split up such variables into multiple values (e.g. combined padding into one for vertical and one for horizontal padding) in your own Sass definitions, when using some framework definitions like bootstrap-sass, those variables are defined outside your reach.

The following is helpful if you really want to use values from such variables. However...

How to human-join an array in JavaScript

To simulate Rails' to_sentence in your JavaScript application, you can use these few lines of CoffeeScript code:

joinSentence = (array) ->
  if array.length > 1
    array[0..-2].join(', ') + ', and ' + array[-1..]
  else
    array.join ', '

Examples:

> joinSentence(['cats', 'dogs', 'pandas'])
# => 'cats, dogs, and pandas'

^
> joinSentence(['llamas'])
# => 'llamas'

Here is some plain JavaScript, should you prefer that:

function joinSentence(array) {
  if (array.length > 1) {
    return ar...

Puppet 3.x: Convert a float to an integer

There is no built in possibility to convert a float to an integer. You have to use an inline_template

inline_template('<%= @someFloat.to_i %>')

Browsers have built-in pretty printing for JSON

This pretty-prints a JSON object, with two spaces of indentation:

JSON.stringify(object, null, 2)

Detect the language of a string

You can use the whatlanguage gem to detect the language of a Ruby string.
Note that it also has not been updated in quite a while and that there might be alternatives. However, it still works.

It has problems with short strings, but works quite well on longer texts.

Use it like this:

>> WhatLanguage.new(:all).language('Half the price of a hotel for twice the space')
=> :english

There is also a convenience method on Strings (you may need to require 'whatlanguage/string').

>> 'Wir ent...

Rails: How to get PostgreSQL version being used

To check the currently running PG version from your Rails application (e.g. Rails console on your production server), simply do this:

ActiveRecord::Base.connection.select_value('SELECT version()')

Middleman does not fingerprint asset paths by default

We're using Middleman for some static sites like our blog.

Despite being very similar to Rails, Middleman does not add a fingerprint hash to its asset paths by default. This means that when you write this:

<%= javascript_include_tag 'all.js' %>

... you always get the same path, regardless of the contents of all.js:

<script src='/javascripts/all.js'>

Because browsers tend to cache assets for a while, this means that users might not get your changes until their cac...

About Piwik

Piwik is the leading open-source analytics platform.

As such, it is an alternative to Google Analytics. Since it is open-source, it can be self-hosted and thus offers better data protection and privacy.

Notes

Actuality

Piwik does not show live reports, but updates its reports from time to time. piwik.pro seems to generate reports only once an hour. The exception to this is the dashboard, where you have a "Visitors in Real-time" widget that will show live tracking actions.

Date

Piwik analytics is always for a specific da...

The Current State of Telephone Links | CSS-Tricks

The linked article shows what current browsers do when you click a link like this:

<a href="tel:1-562-867-5309">1-562-867-5309</a>

Spoiler: The current state is sad

It's still the case that most desktop browsers can't do something useful with tel: links. They will usually open a dialog confirming that an external application will be opened. If the user confirms, she will see an error, or nothing at all.

On mobile browsers on the other hand, these links just open...

Represent astral Unicode characters in Javascript, HTML or Ruby

Here is a symbol of an eight note: ♪

Its two-byte hex representation is 0x266A.

This card describes how to create a string with this symbol in various languages.

All languages

Since our tool chain (editors, languages, databases, browsers) is UTF-8 aware (or at least doesn't mangle bytes), you can usually get away with just pasting the symbol verbatim:

note = '♪'

This is great for shapes that are easily recognized by your fellow programmers.
It's not...

Ubuntu MATE: Shortcut launcher for a web application

For some years Google Chrome has allowed you to add desktop icon for any web page by going to Tools / Add to desktop. Unfortunately this doesn't work reliably on Ubuntu MATE with recent Chromes: The icons could not be moved away from the desktop, or they would open the application as a new tab (instead of as a new window).

I found it to be easier to add a custom application launcher to the MATE panel.

In the Command field, enter this:

google-chrome --app="https://www.google.com/calendar"

This will open Google Calendar in a...

Google Chrome: How to find out your currently installed theme

So you downloaded a theme for Chrome a while ago and don't remember which one it is?

You can go to chrome://settings/appearance (on Chrome 61+) to see the theme's name, and click a link to open it in the Chrome Web Store.

If you are on an older version, or if the above no longer works, you have to check Chrome's Preferences file.

Linux

/home/YOUR_USER_NAME/.config/chromium/Default/Preferences

OSX

/Users/YOUR_USER_NAME/Library/Application Support/Google/Chrome/Default/Preferences

Windows

C:\Users\YOUR_US...

Name that Color

This service gives you a kind-of standard color name for any hex code.

This is useful if you want to extract some colors into a Sass $variable and are looking for a proper variable name.