View

Reprocess only missing images with Paperclip

When a paperclip attachment gains a new style and you have many attachments, reprocessing can take ages. This is because all styles are being recomputed.

To create only missing images, patch Paperclip like this in your script that does the reprocessing:

Paperclip <2.3.2

class Paperclip::Attachment
  private

  def post_process_styles_with_extreme_lazyness
    @old_styles = @styles

    @styles = @styles.reject do |name, _|
      exists?(name)
    end

    post_process_styles_without_extreme_...

Convert colorspace of images attached with Paperclip

has_attached_file(
  :avatar,
  :styles => { :large => "300x300", :small => "100x100" },
  :convert_options => { all => "-colorspace RGB" }
)
Linked content

Better output for Cucumber

We built cucumber_spinner to have a progress bar for Cucumber features, which also outputs failing scenarios as soon as they fail.

Installation
gem install cucumber_spinner
Usage
cucumber --format CucumberSpinner::ProgressBarFormatter

If you use CucumberSpinner::CuriousProgressBarFormatter and a feature fails, the according page will show up in your browser.


Note that if you run your Cucumber tests using the [cuc](https://makandracards.com/makandra/1277-a-nicer-way-to-run-rs…

Parse XML or HTML with Nokogiri

To parse XML-documents, I recommend the gem nokogiri.

A few hints:

  • xml = Nokogiri::XML("<list><item>foo</item><item>bar</item></list>") parses an xml string. You can also call Nokogiri::HTML to be more liberal about accepting invalid XML.
  • xml / 'list item' returns all matching nodes; list item is used like a CSS selector
  • xml / './/list/item' also returns all matching nodes, but .//list/item is now an XPath selector
    • XPath seems to be triggered by a leading .

Automatically build sprites with Lemonade

How it works

See the lemonade descriptions.

Unfortunately, the gem has a few problems:

  • it does not work with Sass2
  • it always generates all sprites when the sass file changes, which is too slow for big projects
  • it expects a folder structure quite different to our usual

All these problems are solved for us, in our own lemonade fork. This fork has since been merged to the original gem, maybe we can use t…

Basic styles for flash notifications

.notice,
.error,
.information,
.warning {
    font-weight: bold;
}

.notice {
    color: #11bb00;
}

.error {
    color: #F53A31;
}

.information {
    color: #557;
}

.warning {
    color: #d07d2d;
}

Typical .gitignore

log/*
tmp/*
storage/*
db/*.sqlite3
db/schema.rb
db/structure.sql
public/system
.project
.idea/
public/javascripts/all*
public/stylesheets/all*
public/stylesheets/*.css
config/database.yml
*~
*#*
.#*
.DS_Store
webrat-*.html
capybara-*.html
rerun.txt
coverage.data
coverage/*
dump_for_download.dump
.~lock.*
.*.swp
C:\\nppdf32Log\\debuglog.txt

Force absolute URLs in views throughout a response

This is more tricky than it should be because url_for, asset_path, etc. all rely on different mechanisms.

Anyway, you can use the attached trait like this:

class ExampleController < ApplicationController
  does 'host_enforcement', :for => 'some_action'
end

Short explanation:

  • asset_host is used for links to stylesheets and javascripts
  • asset_host belongs to ActionController::Base – changes are persistent and will not be reset after a request
  • rewrite_options is used by the ..._path methods in the views
    ^…
Linked content

mynyml's holygrail at master - GitHub

The Holy Grail of testing for front-end development; execute browser-less, console-based, javascript + DOM code right from within your Rails test suite.

Linked content

pivotalexperimental's jazz_money at master - GitHub

Run your Jasmine specs without a browser

Linked content

When can I use...

Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies

Linked content

mezzoblue § A CSS3 Tip

All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today.

Linked content

Stubbornella » Blog Archive » Overflow – a secret benefit

Overflow does some cool things you should know about.

Linked content

lojjic's PIE at master - GitHub

A behavior for Internet Explorer allowing it to recognize and render various CSS3 box decoration properties

Linked content

About PIE – CSS3 PIE: CSS3 decorations for IE

CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are difficult and time-consuming to implement, involving complex sprite images, extra non-semantic markup, large JavaScript libraries, and other lovely hacks.

Linked content

mockko's livereload at master - GitHub

LiveReload applies CSS/JS changes to Safari or Chrome w/o reloading the page

Linked content

Stubbornella » Blog Archive » Object Oriented CSS, Grids on Github

How do you scale CSS for millions of visitors or thousands of pages? Object Oriented CSS allows you to write fast, maintainable, standards-based front end code. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.

This website uses cookies to improve usability and analyze traffic.
Accept or learn more