• You might have notices this behavior when you cut a selection or use the rubber tool.
• The behavior depends on whether your images has an alpha channel.
• You can add an alpha channel by choosing Layer → Transparency → Add alpha channel

Localizing a non-trivial application can be a huge undertaking. This card will give you an overview over the many components that are affected.

When you are asked to give an estimate for the effort involved, go through the list below and check which points are covered by your requirements. Work with a developer who has done a full-app localization before and assign an hour estimate to each of these points.

Static text

• Static strings and template text in app must be translated: Screens, mailer templates, PDF templates, helpe...

Embedding bitmap images within PDF sometimes results in large files because the bitmaps are not compressed. If you don't need high quality images within the resulting PDF file, you can use ghostscript to compress embedded images:

ghostscript -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dPDFSETTINGS=/ebook -dNOPAUSE -dQUIET -dBATCH -sOutputFile=new-smaller-file.pdf large-original-file.pdf

Note that your PDF printer (or similiar generation tools) also often come with a compression setting for embedded raster images.

You can put this ...

Though the W3C even gives it as an example, no browser actually supports this CSS:

img:before {
  content: "something";
}

Browsers will simply not render anything when doing that on images (Fun fact: It worked in an older version of Opera but got dropped).\
The same applies to the :after pseudo-element.

This makes me sad.

You can try using jQuery instead.

The result is a .ico file with multiple versions of your logo at different resolutions. Now, depending on the context, visitors to your site will see your nice favicon in their browser tabs, superimposed on whatever browser chrome they're using in all of its transparent glory.

CodeMirror is a JavaScript component that provides a code editor in the browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation.

xterm by default uses black text on white background.

To change that to something like "light gray on black", do a

vim ~/.Xresources

...and put this in there:

xterm*background: black
xterm*foreground: lightgray

Afterwards, feed these changes to your current X session:

xrdb ~/.Xresources

Any subsequent xterm will be colored white on black background.

Hint:

• While you're at it, you can also set xterm's font in your ~/.Xresources file. Just add xterm*faceName: monospace:pixelsize=14.
• If you don't want to chan...

Make sure you call the methods in the following order and not vice versa:

has_attached_file :image
validates_attachment_presence :image

Validation with condition works fine, too:

validates_attachment_presence :image, :if => :method

This is because validates_attachment_presence is only available after saying has_attached_file.

This article shows how to create a Sass mixin for a colored button. The button's foreground color is dynamically chosen between either black or white, depending on the given background color.

It's a nice intro into @if and @else conditionals in Sass.

This card shows you how to format a card's content using Markdown. We use the Commonmarker interpreter, so here are examples for its dialect.

Formatting

**Bold**

Bold

_Italics_

Italics

`Monospaced`

Monospaced

> Quoted text

Quoted text

Here is [a link](http://makandra.com/).

Here is a link.

![An image; this is the alt text](http:/...

The .ova file format is a tar file with a .ovf file inside.
tar xvf virtualboximage.ova

You can change the color for text selection via CSS, using the ::selection and ::-moz-selection pseudo-elements.

Adding this to your Sass will make all text selections use a red background:

::selection
  background-color: #f00

::-moz-selection
  background-color: #f00

Unfortunately, those can't be combined into "::selection, ::-moz-selection". Doing so will have no effect.

Most of the JavaScript snippets have code that manipulates the DOM. For that reason dom manipulating javascript code should have been executed after the DOM has loaded completely. That means when the browser has finished HTML parsing and built the DOM tree. At that time, you can manipualte the DOM although not all resources (like images) are fully loaded.

The following snippets show how you can do this with plain JavaScript, jquery or prototype ([dom ready ...

You want Photoshop to always open files with "full" (100%) zoom and not try to fit them to your screen?
Tough luck -- there is no setting for this.

But, after opening the file, you can zoom to 100% by:

• pressing Ctrl-Alt-0 (on Windows; for Mac it's Meta-Alt-0)
• or double-clicking the magnifier tool icon.

When you print out a HTML pages, all raster images (like PNGs) will appear aliased. This is because a printer's resolution is usually much higher than that of a computer screen.

If an image absolutely must look awesome when printed, a solution is to embed the image in much higher solution than needed (e.g. four times the horizontal resolution), then scale it down to the desired width using CSS.

Note that this will slightly alter the image's appearance on the screen because browsers will scale down the image [using an anti-aliasing method](...

Note: capistrano_colors was merged into Capistrano starting from v2.13.5. However, this requires Ruby 1.9+.

If you cannot upgrade Capistrano to 2.13.5+ (e.g. because you're still running on Ruby 1.8), simply put capistrano_colors into your Gemfile and require 'capistrano_colors' in your config/deploy.rb file.

If you're using Paperclip to store and convert images attached to your models, processing a lot of images will probably cause headache for your system operation colleagues because CPU and/or memory peaking.

If you're on Unix you can use nice to tell the Kernel scheduler to prefer other processes that request CPU cycles. Keep in mind that this will not help if you're running into memory or IO trouble because you saved some bucks when you ordered (slow) harddrives.

ImageMagick (the tool which is used by Paperclip to do all that funky ima...

The unix command line tool less is a good choice for browsing logfiles. In the standard configuration, though, it does not interpret the escape sequences used in the rails logfiles. To enable this type:

less -R my_logfile.log

You can also have an alias to save yourself the typing

alias less='less -R'

List of non-standard CSS attributes that change how the browser resamples scaled images. Only use them if you know 100% which browser the client is going to use. Otherwise just stick with the default.

If you turn on stylesheet caching, it might happen that stylesheets from different locations with different relative pathes will be put together to one big stylesheet.

This stylesheet then resides in /stylesheets but still holds the old pathes, which aren't valid anymore. This leads to the effect that images are displayed on your local development machine (where caching is turned off automatically) but not on the server.

To fix this, either:
^

• Move all stylesheets to the same folder
• or have one cache per folder

If you would like to use language specific layout (e.g. background-images) in your applications stylesheets you can achieve this easily by using the lang attribute in your views (ERB):

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%= I18n.locale || 'en' %>" lang="<%= I18n.locale || 'en'%>">
...
</html>

or in HAML:

%html :xmlns => "http://www.w3.org/1999/xhtml", :"xml:lang" => I18n.locale || 'en', :lang => I18n.locale || 'en'

Then, in your stylesheet you can for example declare different background-images fo...