External content

Using Bumbler to Reduce Runtime Dependencies - The Lean Software Boutique

Tool to show you which gems are slow to load:

➜  git:(master) ✗ bundle exec bumbler
[#################################################                             ]
(49/65) travis-lint...
Slow requires:
    110.21  render_anywhere
    147.33  nokogiri
    173.83  haml
    179.62  sass-rails
    205.04  delayed_job_active_record
    286.76  rails
    289.36  mail
    291.98  capistrano
    326.05  delayed_job
    414.27  pry
    852.13  salesforce_bulk_api

Getter and setter functions for Javascript properties

Javascript objects can have getter and setter functions that are called when a property is read from or written to.

For example, if you'd like an object that has a virtual person.fullName attribute that dynamically composes person.firstName and person.lastName:

var person = {

firstName: 'Guybrush',

lastName: 'Threepwood',

get fullName() {
return this.firstName + " " + this.lastName;

set fullName(name) {
var parts = name.split(" ");
this.firstName = parts[0];
this.lastName = parts[1];


Top-level constants in BasicObject

If you want to access top-level constants inside a BasicObject class, you need to prefix them with ::.

This will not work

class Foo < BasicObject
  def bar
end # => NameError: uninitialized constant Foo::Hash

You need to explicitly write ::Hash.

The reason is that top-level constants are internally attached to Object, so Hash is not in the lookup chain inside a BasicObject.

Test e-mail dispatch in Cucumber

Spreewald has steps that let you test that e-mails have been sent, using arbitrary conditions in any combination.

The attached file is for legacy purposes only.


jQuery promises: .done and .then are not the same

jQuery's deferred objects behave somewhat like standard promises, but not really.

One of many subtle differences is that there are two ways to chain callbacks to an async functions.

The first one is done, which only exists in jQuery:

$.ajax('/foo').done(function(html) {
  console.debug("The server responded with %s", html);

There is also then, which all promise libraries have:

$.ajax('/foo').then(function(html) {
console.debug("The server resp…


Ruby constant lookup: The good, the bad and the ugly

In Ruby, classes and modules are called constants. This card explains how Ruby resolves the meaning of a constant.

The good

E. g. in the following example, Array could mean either Foo::Array or simply Array:

class Foo
  def list

What Ruby does here is to see if the name Array makes sense inside of Foo::, and if that fails, resolves it to ::Array (without a namespace).

The bad

You might be surprised that these are all valid ways to reference Ruby's String class:

External content

Caching best practices & max-age gotchas -

Showing various caching patterns. Includes WhatsApp screenshots.


MySQL: Do not use "WHERE id IN (SELECT ....)"

Note: This applies specifically to MySQL. In PostgreSQL for example, this is not an issue.

If you care about performance, never use a query like

UPDATE users SET has_message = 1 WHERE IN (SELECT user_id FROM messages)

MySQL does not optimize this and seems to scan the temporary table, which isn't indexed, for every row in the update statement. This applies to other statements than UPDATE as well.

Instead, either use a JOIN like

UPDATE users INNER JOIN messages ON messages.user_id = SET has_message =...
External content

Postgres Index Types

When creating an index using CREATE INDEX, Postgres will create a B-Tree type index by default. The B-Tree type is great for general purpose indexes but there are special cases when other types provide better results.

Reading and writing cookies in JavaScript

In JavaScript, document.cookie is an accessor to all cookies on the current site. It looks like a String, but is actually more powerful.

Remember to set the path=/ option.

Reading cookies

A result may look like this:

hello=universe; foo=bar

This means that there are 2 cookies: "hello" with value "universe", and "foo" with value "bar".

Set a cookie

Setting cookies works as simple as this:

document.cookie = 'yes=please'

However, this will not overwrite any existing cookies. The document.cookie setter will…

External contentRepeats

Almost complete guide to flexbox (without flexbox)

Flexbox is great, but you don't get reliable support in Internet Explorer.

The attached article shows how to accomplish many Flexboxish effects without actually using flexbox statements.


Stretch an HTML page to full height

This card existed before, but was outdated due to browser implementation changes. The information below is validated for the current list of browsers we support.

By default your html and body elements are only as high as the actual page content. If you only have two lines of text in your page, your html and body elements will only be around 40 pixels high, regardless of the size of your browser window.

You might be surprised by this, since setting a background on either html and body does cover the enti…

VCR: An OAuth-compatible request matcher

OAuth requires a set of params to be carried along requests, among which a nonce. Some libraries pass these along as headers, some as query parameters. All fine.

When you're using VCR, the latter case is an issue. By default, requests are matched on method and URI. However, no request URI will equal another when they include a nonce. You won't be able to match these requests with VCR.


Obviously you need to…

Running the Awesome window manager within MATE

Awesome is a very good tiling window manager that provides neat features like automatic layouting of windows, good multi-display support with per display workspaces and more. Since it is only a window manager, you will probably miss some of MATE's conveniences like the network manager, application menus, automatic updates etc.

Fortunately, you can run Awesome within MATE, by following these steps (tested on Ubuntu MATE 16.04):

Awesome + MATE

  • Create the following file at `/usr/share/xsessions/Xses…

How to create memory leaks in jQuery

Note that the information in this card pertains to jQuery 1 and jQuery 2.0 and 2.1. Future versions of jQuery will probably attach information directly to DOM nodes.

jQuery doesn't store information about event listeners and data values with the element itself. This information is instead stored in the global $.cache object. Every time you add an event listener or data value to a jQuery object, $.cache gains another entry.

**The only way that a $.cache entry gets deleted is when you call remove() on the elem…

An interactive Git shell

Git commands tend to come in groups. Avoid typing git over and over and over by running them in a dedicated git shell.

You might want to run git config --global help.autocorrect true before using gitsh. This will silently swallow a muscle-memory "git" prefix to your commands inside the git shell.


Remember: LoDash syntax is a bit different from UnderscoreJS

Since we are using LoDash instead of UnderscoreJS in recent/current projects, you should keep in mind that their syntax is a bit different.


In UnderscoreJS, methods always return a value:

x = [1, 2, 2]
_.uniq(x) // => [1, 2]
_(x).uniq() // => [1, 2]

If you want to chain multiple calls, you need to start off with a _.chain, and call value() to terminate the chain.

_.chain(x).uniq().map(function(i) { return i + 10 }).reverse().value() // => [12, 11]


How to fix: HTML5 video not working in IE9

While IE9 does support HTML5 <video> tags, it fails to work until you force HTML5 mode.

Here are two ways to do that.

Option 1: Doctype

Make sure your HTML document uses HTML5. It should start like this:

<!DOCTYPE html>

Option 2: Magic meta tag

If you can not set a doctype, you use the X-UA-Compatible meta tag in your HTML <head>.

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
3149 cards