It claims to be even faster and brings a new plugin that polyfills object-fit and object-position. This allows for easy arrangement of e.g. images and videos inside containers.

As caniuse.com puts it, object-fit/object-position is a:

Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio), where object-position allows the object to be repositioned like backg...

Automatically convert bitmap images like JPEGs, GIFs and PNGs to the crisp, clean, scalable vector art of EPS, SVG, and PDF with the world's best auto-tracing software.

It's true, it does a great job.

At least Selenium cannot find disabled fields. Unless you find them explicitly:

find_field 'This is disabled', disabled: true

When you are working with jQuery selectors and collections, many times you want to know if the collection actually contains the elements you wanted to select. Here's a tiny jQuery plugin that does just that.

$.fn.ensure = ->
  if (@length == 0) then throw 'Empty jQuery collection'
  this

Use it like this:

$('input[id$=_cache]').ensure()
> Console: "Uncaught Empty jQuery collection"

Say we want …

• to create a Gallery that has a name and has_many :images, which in turn have a caption
• to offer the user a single form to create a gallery with any number of images
• immediate uploads with a progress bar per image
• a snappy UI

Enter jQuery File Upload. It's a mature library that can do the job frontend-wise. On the server, we'll use Carrierwave, because it's capable of caching images.

(FYI, [here's how to do the u...

UI sortable helps reordering items with drag 'n drop. It works quite fine.

Proven configuration for sorting table rows

When invoking the plugin, you may pass several options. This set is working fine with table rows:

$tbody.sortable # Invoke on TBODY when ordering tables
  axis: 'y' # Restrict drag direction to "vertically"
  cancel: 'tr:first-child:last-child, input' # Disable sorting a single tr to prevent jumpy table headers
  containment: 'parent' # Only drag within this container
  placehol...

The attached ImageLoader helper will start fetching an image and return an image that is resolved once the image is loaded:

ImageLoader.load('/my/image.png').then(function(image) {
  ...
});

The image argument that is yielded to the promise callback is an HTMLImageElement. This is the kind of object you get when you call new Image().

In production, you (or your ops team) should configure a maximum number of bytes that Redis can use to store data (maxmemory setting).
They may even want to set maxmemory-policy to noeviction to avoid keys being removed that you want to keep around (e.g. for Sidekiq queues!).

The following applies to the noeviction LRU approach.

When you ask Redis to store a value that would exceed this limit, it tries to clean up:

• Keys for which an expiry value (TTL) was set (explicitly, or when written via SETEX) will be removed.
  ...

jQuery's find looks in the element's descendants. It will never return the current element itself, even if the element matches the given selector.

Require the attached file and you can now say:

$('.container').findWithSelf('.selector')

This is sort of like closest, but it looks in descendants instead of ancestors.

Sometimes you want to preload images that you will be using later. E.g. if hovering over a an area changes its background image, the new image should be preloaded. If you only load it once the user starts hovering, there will be a delay until the background image flips.

The attached article explains how to preload images with only CSS. No Javascript required.

The gist is:

.element:after {
  content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
  display: none;
}

TL;DR If you want to support most browsers, then don't exceed 50 cookies per domain, and don't exceed 4093 bytes per domain (i.e. total size of all cookies <= 4093 bytes)

Behind the link, you'll find a simple HTML page that offers some cookie tests (how large, how many etc) and an overview of this data for various browsers.

Fun fact: You cannot delete cookies with a key that hits the size limit and has a small value.

Spreewald gives you the <step> within <selector> meta step that will constrain page inspection to a given scope.

Unfortunately, this does not work with RSS feeds, as they're XML documents and not valid when viewed from Capybara's internal browser (e.g. a <link> tag cannot have content in HTML).

Inspecting XML

If you're inspecting XML that is invalid in HTML, you need to inspect the page source instead of the DOM. You may use Spreewald's "... in the HTML" meta step, or add this proxy step fo...

Connect to your IMAP server. If you have SSL enabled:

openssl s_client -connect your-server:993

if your server supports STARTTLS:

openssl s_client -starttls imap -connect your-server:143

otherwise use netcat or telnet (you shouldn't do cleartext stuff nowadays...).
You should see something like this:

...
. OK Pre-login capabilities listed, post-login capabilities have more.

To log into IMAP, send the following string (incl. "01"!):

01 LOGIN user@domani.io $password

The server should return something like:

* C...

Edit /etc/default/bind9 and change

OPTIONS="-u bind"

to

OPTIONS="-u bind -d 50 -g"

Restart BIND and you'll see debug log on your console.

Many of our developers love to use the "awesome" window manager on Linux. However, RubyMine dialogs occasionally defocus while typing.

Here is a fix for that, tested on awesome 3.4, 3.5 and 4.0 (Ubuntu 14.04 and 16.04).

Problem

Consider the following:

1. Press Ctrl+Shift+N
2. "Find file" dialog opens
3. Type to search, file list appears
4. Type more, file list is being replaced

If your mouse pointer hovers the file list, the main window is focused when the list is being replaced (or simply when it shrinks and your mouse pointe...

To delay your entire Jasmine test suite until the DOM is ready, add the following:

beforeAll(function(done) {
  $(done);
});

Since jQuery 3 saw it's first release candidate today, the links has a list of (breaking) changes.

brandcolors.net provides you with the colors of the world's biggest brands, easily searchable.

When you have a localized website, you may want to redirect users to their preferred language when they visit the root path.
Here is how to do it without a server-side component (like a Rails application).

• Use JavaScript's navigator.language (real browsers and IE11+) and navigator.userLanguage (old IEs).
• Use a <meta> refresh as fallback
• Provide buttons for paranoid users that disabled JavaScript and meta refreshs.

JavaScript

The following JavaScript will try to auto-detect a user's preferred language.

It understands string...

fake_stripe spins up a local server that acts like Stripe’s and also serves a fake version of Stripe.js, Stripe’s JavaScript library that allows you to collect your customers’ payment information without ever having it touch your servers. It spins up when you run your feature specs, so that you can test your purchase flow without hitting Stripe’s servers or making any external HTTP requests.

We've also had tests actually hitting the testing sandbox of Stripe, which worked OK most of the time (can be flakey).

When you run rake db:rollback and nothing happens, you are probably missing the latest migration file (or have not migrated yet).

$ rake db:rollback
$ 

If that happens to you, check your migration status.

$ rake db:migrate:status
   up     20160503143434  Create users
   up     20160506134137  Create pages
   up     20160517112656  Migrate pages to page versions
   up     20160518112023  ********** NO FILE **********

When you tell Rails to roll back, it tries to roll back the latest change that was mi...

Adds missing native PostgreSQL data types to ActiveRecord and convenient querying extensions for ActiveRecord and Arel for Rails 4.x

Common table expressions

• Relation#with
• Model.from_cte

Arrays

Face.where.contains tags: %w[happy smiling] # Matching faces have both 'happy' and 'smiling' tags
Face.where.overlap tags: %w[happy smiling] # Matching faces have at least one of these tags
Face.where.any tags: 'happy' # Matching faces include the 'happy' tag
Face.where.all tags: 'dunno' # Not documented, try for yourself

...

When you paste copied code with CTRL+V, RubyMine will change the indentation of the pasted code. You can prevent this by pasting with CTRL+ALT+Shift+V instead ("Paste Simple").

To change this behavior entirely, you can open your settings and navigate to Editor / General / Smart Keys. Here you can select one of three options for Reformat on paste:

• None
• Indent Each Line (default)
• Indent Block
• Reformat Block

You might want to try "Indent Block".

Capybara uses www.example.com as the default hostname when making requests.
If your application does something specific on certain hostnames and you want to test this in a feature, you need to tell Capybara to assume a different host.

Given /^our host is "([^\"]+)"$/ do |host|
  page.config.stub app_host: "http://#{host}"
  
  # In older Capybaras (< 2.15) you needed to do this instead:
  Capybara.stub app_host: "http://#{host}"
end

You can now say:

When I go to the start page
Then I should not see "Home ...