There are many fun Unicode characters like ▲ or ☯. You might be tempted to use them for graphical elements in lieu for an image. After all they are so much easier to style and scale than a raster image!

Unfortunately you will discover that these symbols render very differently on Linux, Windows and MacOS. The reason for this is that the font you are using will probably not contain any characters outside the standard Latin-1 set. When browsers encounter a character not included in the current font, they use a fallback font for this one cha...

If you encounter a Firefox that does not care about your font settings but always uses specific fonts, you can fix that. Usually this should not happen, as it's not a default setting:

1. Open up the Preferences.
2. Switch to "Content".
3. In the "Fonts & Colors" section, click the "Advanced..." button.
4. Tick "Allow pages to choose their own fonts, instead of my selection above".
5. Confirm by pressing "OK".

![Screenshot](https://makandracards.com/makandra/10913-how-to-fix-firefox-uses-incorrect-fonts-on-all-webpages-regardless-of-their-c...

Look Ma, no images!

Generated animations are free to use without backlink obligations...

... WITH THE EXCEPTION of any other animated images generator applications

Haha :)

The problem

When using the asset pipeline your assets (images, javascripts, stylesheets, fonts) live in folders inside app:

app/assets/fonts
app/assets/images
app/assets/javascripts
app/assets/stylesheets

With the asset pipeline, you can use the full power of Ruby to generate assets. E.g. you can have ERB tags in your Javascript. Or you can have an ERB template which generates Haml which generates HTML. You can chain as many preprocessors as you want.

When you deploy, Rails runs assets:precompile...

Geoffrey Grosenbach has created Gruff for easily plotting graphs. It is written in pure Ruby and integrates with Rails applications.

It provides features as automatic sizing of dots and lines (the more values, the thinner the graph's elements), custom or predefined themes, different styles (bar, line, dot and many more) and multiple graphs in one chart.

Installation

In your Gemfile:

gem 'rmagick', :require => false
gem 'gruff'

Then run bundle install (and don't forget to restart your development server.)

Usage

This i...

Consider the following HTML & CSS:

<div><img src='http://makandra.com/images/makandra-ruby-on-rails.png' /></div>

^
img {
background-color: red;
}
div {
border: 1px solid black;
}

This will leave a margin of about 5px between the lower edge of the image and the containing div, although there are no paddings or margins set, and there's no whitespace. The reason is, the image will vertically align baseline, and the space below the image is just kept for descenders (the part of letters below the basel...

• 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.