Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

A great two-part article about various hacks you can use to create great-looking screen designers when you're not a designer.

Part 1 contains:

• Light comes from the sky
• Black and white first
• Double your whitespace

Part 2 contains:

• Learn the methods of overlaying text on images
• Make text pop— and un-pop
• Only use good fonts
• Steal like an artist

The asset pipeline changes the paths of CSS files during precompilation. This opens a world of pain when CSS files reference images (like jQuery UI) or fonts (like webfont kits from Font Squirrel), since all those url(images/icon.png) will now point to a broken path.

In the past we have been using the vendor/asset-libs folder ...

Modern browsers natively suppport file pickers that allow the user to choose multiple files at once. To activate this feature, set the multiple attribute:

<input type="file" name="images[]" multiple />

Or in a Rails view:

<%= file_field_tag "images[]", multiple: true %>

This works in IE10+.

Make sure that the field name ends in [] so your server-side code will parse the incoming files into an array. Obviously this naming convention is not compatible with default Rails nested attribute setters, so you'll need to write a form ...

To avoid n+1 queries, you want to eager-load associated records if you know you need to access them later on.

The Rails docs say:

Eager loading is supported with polymorphic associations.

This is true, but has some caveats.

Example

Consider the following models:

class Image < ActiveRecord::Base; end

class Video < ActiveRecord::Base; end

class PageVersion < ActiveRecord::Base
  belongs_to :primary_medium, polymorphic: true # may be Image or Video
end

class Page < ActiveRecord::Base
  belongs_to ...

By default git diff highlights whole lines as changes.

To diff on a word-by-word basis you can say:

git diff --color-words

To diff on a character-by-character basis you can say:

git diff --color-words=.

It's like Paperclip or CarrierWave, but without any automagic integration.

What PDFKit is

• PDFKit converts a web page to a PDF document. It uses a Webkit engine under the hood.
• For you as a web developer this means you can keep using the technology you are familar with and don't need to learn LaTeX. All you need is a pretty print-stylesheet.

How to use it from your Rails application

• You can have PDFKit render a website by simply calling PDFKit.new('http://google.com').to_file('google.pdf'). You can then send the...

Inspiring collection of color tones.

Safari on iOS accepts an apple-touch-icon favicon that is used for stuff like desktop bookmarks. Always define a solid background color for them.

If you use PNGs with a transparent background, Safari will use just set a black background on your pretty icon. This is almost never what you want.
You can fix that by applying a white background via ImageMagick like this:

convert a...

The adjust-hue function of Sass allows you to change a color's hue, but only relative to its current hue.

adjust-hue(#ffff00, 120)
// => #00ffff
adjust-hue(#444400, 120)
// => #004444

As you can see, we moved our yellow by 120° to cyan. \
But what if you want to move any color to a hue of 120° which is a nice shiny green?

Take this function:

@function set-hue($color, $target-hue)
  $current-hue: hue($color)
  $degree...

SudoSlider is a simple yet powerful content slider that makes no (or very few) assumptions about your markup and is very customizable.

You can basically embed any HTML into the slides, so you can mix images, videos, texts, and other stuff.

Check out the demos.

Please note:

• There is a ton to configure. Check the demos and read the docs.
• It does not bring styles for prev/next links etc, so you need to style controls yourself (which I consider to b...

For me guard recently took a very long to start (as in "minutes"), because I had lots of images in public/system.

Upgrading the listen gem (which is a dependency) to 2.7.7 fixed this.

MenuetOS is an Operating System in development for the PC written entirely in 32/64 bit assembly language. Menuet64 is released under License and Menuet32 under GPL. Menuet supports 32/64 bit x86 assembly programming for smaller, faster and less resource hungry applications.

• Fits on a single floppy, boots also from CD and USB drives
• Responsive GUI with resolutions up to 1920x1080, 16 million colours
• Free-form, transparent and skinnable application windows, drag'n drop
• SMP multiprocessor support with currently up to 8 cpus
• IDE: E...

If you want to label things with a color but don't actually care which cholor, you can use the attached Colorizer class.

To get a completely random color (some of which will clash with your design):

Colorizer.colorize(some_object) # => "#bb4faa"

To get similiar colors (e. g. bright, pale colors of different hues):

 # random hue, saturation of 0.5, lightness of 0.6
Colorizer.colorize_similarly(some_object, 0.5, 0.6) # => "#bbaaaa"

Also see the color gem.

Browsers usually cache favicons. If you update the favicon of your web site and want all visitors to see the new icon, you need to give the icon a different URL. You will not have this issue if you cache your assets properly, which appends a fingerprint to your image URL (like favicon.ico?432423432):

<link href="<%= image_path('favicon.ico') %>" rel="icon" type="image/vnd.microsoft.icon">

RulersGuides.js is a Javascript library which enables Photoshop-like rulers and guides interface on a web page

Also available as a bookmarklet.

pngquant is a command-line utility and a library for converting 24/32-bit PNG images to paletted (8-bit) PNGs.

The conversion reduces file sizes significantly (often as much as 70%) and preserves full alpha transparency.

An annoying part of using font icons is that the icons usually need to live in the DOM. This is a step back from the time when we defined raster icons with background-image, in the CSS.

It doesn't have to be that way.

Copy the attached file font-awesome-sass.css.sass to your assets (we recommend /vendor/asset-libs/font-awesome-sass).

You can now use Font Awesome icons from your Sass files:

@import font-awesome-sass

...

CarrierWave attachments have two distinct methods #url and #path which appear to behave the same:

document.file.url   # => /storage/documents/4/letter.doc
document.file.path  # => /storage/documents/4/letter.doc

However, starting with CarrierWave 0.9, #url will properly escape high-ASCII characters:

document.file.url   # => /storage/documents/4/h%C3%BCte.doc
document.file.path  # => /storage/documents/4/hüte.doc

So always use #url if you mean an actual URL (e.g. to display an <img>). But use #path if y...

Assert rmagick provision ...

Gemfile

gem 'rmagick', '2.13.2' # at this moment the latest stable version

config/initializer/carrierwave.rb

require 'carrierwave/processing/rmagick'

... and define a custom processor

MyUploader.rb

class MyUploader < CarrierWave::Uploader::Base
  include CarrierWave::RMagick

  def cover
    manipulate! do |frame, index|
      frame if index.zero? # take only the first page of the file
    end
  end

  version :preview do
    process :cover
    process :resize_to_fit => [310,...

# Attach a file
#
# Example:
#
#   Company.new.logo = File.new…
#
#   Given the file "…" was attached as logo to the company above
#
#
# Example:
#
#   class Gallery
#     has_many :images, :as => :owner
#   end
#
#   class Image
#     belongs_to :owner, polymorphic: true
#   end
#
#   # so container = Image.new; container.file = File.new… , container.owner = object
#
#   Given the file "…" was attached as Image/file to the company above
#
#
# Example:
#
#   Set updated_at with
#
#     Given … above at "2011-11-11 11:11"
#