To upload a file via AJAX (e.g. from an <input type='file'>) you need to wrap your params in a FormData object.

You can initialize a FormData using the contents of a form:

var form = document.querySelector('form.my-form') // Find the <form> element
var formData = new FormData(form); // Wrap form contents

Or you can construct it manually, param by param:

var fileInput = document.querySelector('form input[type=file]');
var attachment = fileInput.files[0];

var f...

Changes:

• Geordi is now (partially) tested with Cucumber. Yay!
• geordi cucumber supports a new @solo tag. Scenarios tagged with @solo will be excluded from parallel runs, and run sequentially in a second run
• Support for Capistrano 2 AND 3 (will deploy without :migrations on Capistrano 3)
• Now requires a .firefox-version file to set up a test firefox. By default now uses the system Firefox/a test Chrome/whatever and doesn't print warnings any more.
• geordi deploy --no-migrations (aliased -M): Deploy with `cap ...

Note

Maintenance mode is enabled on application server as soon as the file /public/system/maintenance.html is present.

Note that the servers must be configured accordingly.

Installation

Add this line to your application's Gemfile:

 gem 'capistrano', '~> 3.0'
 gem 'capistrano-maintenance', '~> 1.0'

Add this line to you application's Capfile:

require 'capistrano/maintenance'

Enable task

Present a maintenance page to visitors. Disables your application's web interface by writing a `#{maintenanc...

A collection of 700+ svg vector logos. The logos are optimized (removed duplicated paths / excessive groups / empty defs, linting, etc).
Almost 100 logos were recreated from rastered images #vectorized.

All logos appearing on the site are the property of their respective owners.

http://svgporn.com/

Note

This card does not reflect the current state of lazy loading technologies. The native lazy attribute could be used, which is supported by all major browsers since 2022.

Since images are magnitudes larger in file size than text (HTML, CSS, Javascript) is, loading the images of a large web page takes a significant amount of the total load time. When your internet connection is good, this is usually not an issue. However, users with limited bandwidth (i.e. on mobile) need to mine their data budget...

A list of common computer I/O actions and how long they take.

Visual comparison chart: http://i.imgur.com/k0t1e.png

Now that CarrierWave is no longer maintained, Shrine might be worth a look.

Our applications not only need to be functional, they need to be fast.

But, to quote Donald Knuth,

premature optimization is the root of all evil (or at least most of it) in programming

The reasoning is that you should not waste your time optimizing code where it does not even matter. However, I believe there are some kinds of optimizations you should do right away, because

• they are either obvious and easy
• or they are very hard to do optimize later

This is an attempt to list some of those things:

On the server

...

Writing ruby methods that accept both optional and keyword arguments is dangerous and should be avoided. This confusing behavior will be deprecated in Ruby 2.7 and removed in Ruby 3, but right now you need to know about the following caveats.

Consider the following method

# DO NOT DO THIS

def colored_p(object = nil, color: 'red')
  switch_color_to(color)
  puts object.inspect
end


colored_p(['an array'])                   # ['an array'] (in red)
colored_p({ a: 'hash' }, color: 'blue')   # {:a=>'hash'} (in blue)
colored_p({ a: 'ha...

When working with PostgreSQL, you can use pgAdmin as a GUI.
While you can do most things just like on an SQL console, you can use it to display EXPLAIN results in a more human-readable way.

(image from the Postgres manual)

1. Open up pgAdmin, connect to your server
2. Pick a database from the left pane
3. Click the "SQL" icon in the toolbar, or press Ctrl+E to open the query tool.
4. Paste any queries that you'd like to explain.
5. Go to "Query" → "Explain analyze", or ...

All browsers + IE9 know the CSS :empty selector. It lets you hide an element when it has no content, i.e. not even white space.

(How to prevent whitespace in HAML)

For instance, you have a badge displaying the number of unread messages in a red bubble with white text:

.unread-messages-bubble {
  background-color: red;
  border-radius: 10px;
  padding: 10px;
  color: white;
}

To hide that bubble entirely ...

Looking for a way to embed raster images for both low- and high-DPI displays, this developer had some good results with using a high resolution with more JPEG compression than you would use normally.

He argues that the image looked great on both low- and high-DPI displays. Also the compression artifacts were now so small that they are not as noticable then when an 1:1 image is highly compressed.

Ruby has Enumerable.find(&block), which returns the first item in the collection for which the block evaluates to true.

first_post_with_image = posts.find do |post|
  post.image
end

However, sometimes it's not the item you're interested in, but some value depening on it – e.g. the value the block evaluated to. You could first map the collection and then take the first truthy value, but this way you need to process the whole collection twice:

first_image_url = posts.map(&:image).find(&:present?).url

If the mapp...

To change RAM size, VDISK size or VCPU count of an openstack instance you have to use nova resize. You can't change for e.g. just the RAM size with a parameter, you have to assign a new/other flavor. If there is no suitable flavor for the new properties of the VM, create a new one.

nova resize [--poll] <server> <flavor>

The resize could take a while, after it is finished, the VM boots up with the new specifications. SSH into the VM and check if everything is alright...

Small web application where you can upload an image (PNG, JPEG, GIF) and generate a base64-encoded version of it.

You can copy the result as

• HTML <img> tag with data URI,
• CSS rule with background-image and data URI,
• plain Base64-encoded data URI string.

Surprisingly exhaustive new icon set by Google.

Available as PNG, SVG and as a icon font.

Comment from Henning

I tried using the icon set in a project. I found the quality, selection and handling far worse than what we are used to in FontAwesome.

Note: Making a reverse proxy with nginx is much more straightforward.

A reverse proxy is a "man in the middle" server that tunnels requests to another server. You can use for things like:

• Expose a local service that you cannot directly reach over the internet
• "Change" the domain or path of a web application by rewriting them on the fly
• Instantly change servers that respond to a name or ...

Bad

# Given the following models

class Image < ActiveRecord::Base
  has_many :album_images
  has_many :albums, through: :album_images
end

class Album < ActiveRecord::Base
  has_many :album_images
  has_many :images, through: :album_images
end

# Join model
class AlbumImage < ActiveRecord::Base
  belongs_to :album
  belongs_to :image
end

Destroying a record in this setup will only remove the record itself, and leave orphaned join records behind.

image = Image.last
image.destroy # removes only the `image` record,
   ...

There are some frontends available, but they all suck, are no longer maintained or are hard to install.

As a surprisingly comfortable alternative I have found a command line tool s3cmd:

sudo apt-get install s3cmd

When you run s3cmd the first time it will ask you for your access key ID and secret access key. This information is cached somewhere so you only need to write them once. To reconfigure later, call s3cmd --configure.

Once you're done setting up, s3cmd gives you shell-like commands like s3cmd ls or `s3cmd del som...

Awesome hack by Tim VanFosson:

<img src="some.jpg" onerror="this.src='alternative.jpg'" />

Instead of this:

Image.order('images.created_at DESC')

You can write this:

Image.order(created_at: :desc)

Not only do you not have to write SQL, you also get qualified column names (created_at becomes images.created_at) for free.

Multiple order criteria

To add secondary order criteria, use a hash with multiple keys and :asc / :desc values:

Image.order(title: :asc, created_at: :desc)

Here's a pretty useful steps that hasn't made it into Spreewald yet.

It is best used with the auto-mapper for BEM classes in features/support/selectors.rb

When I hover above [selector] element

When /^I hover above (.*) element$/ do |selector|
  page.find(selector_for(selector)).hover
end

Example:

When I hover above the album's image element

→ triggers a hover event on .album--image

Write a // and indent every subsequent line by two spaces.

This is great for documenting BEM blocks!

//
  An action button
  ================
  
  Basic usage
  -----------
  
      <a href="/path" class="action">New booking</a>
      <button class="action">Save</a>
      <input type="submit" class="action">Save</a>
  
  Colors
  -------
  
      <a href="/path" class="action is-red">Primary</a>
      <a href="/path" class="action is-grey">Secondary</a>
  
  Small inline buttons
  --------------------
  
      <p>
        Recor...

When a CSS3 animation makes the animated element flicker, it may well be due to pixel fragments being handled differently during animation. You can force the browser into rendering the element on the GPU by adding certain properties. In Chrome, the combination of the following properties has the best effect.

box-shadow: 0 0 0 #000
transform: translate3d(0,0,0) # remember to add vendor prefixes

Depending on your markup, you might need to set these properties on several elements (presumably all those that have height or width in %)...