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 %)...
When uploading images, adding more than one process to a version can cause MiniMagick to run multiple commands. In order to have all processing done in one mogrify system call, you'll need to define only one process that combines all options you'd like to pass in.
When you are using the #selector_for helper in Cucumber steps, as e.g. Spreewald does, the following snippet will save you typing. It recognizes a prose BEM-style selector and maps it to the corresponding BEM class.
For a variation on this idea, see An auto-mapper for ARIA labels and BEM classes in Cucumber selectors.
"the main menu" -> '.main-menu'
"the item box's header" -> '.item-box--header'
Here are some examples of steps (using Spreewald, too):
T...
If you get this error (probably because you want to load some modules):
# modprobe xt_comment
FATAL: Could not load /lib/modules/3.2.0-40-generic/modules.dep: No such file or directory
The reason could be that apt-get autoremove already removed /lib/modules/.../modules.dep even if you still using this kernel version:
# uname -r
3.2.0-40-generic
# ls -l /lib/modules/
total 24
drwxr-xr-x 4 root root 4096 Oct 22 17:05 3.2.0-68-generic
drwxr-xr-x 4 root root 4096 Jan 7 16:38 3.2.0-69-generic
drwxr-...
Jonas Nicklas, the author of Carrierwave and Capybara, has released Refile, a gem for handling file uploads in Rails. It handles direct uploads (also direct uploads to Amazon S3) better than Carrierwave.
The story and reasoning behind some of the decisions in Refile, and how it's different from Carrierwave, by the author himself, is a good read before deciding which way you'll go.
Big Caveat: Refile only stores the original image and r...
ImageMagick takes a string with several options when cropping an image. See the command line options for how to provide the expected image geometry for details.
Note that ImageMagick tends to preserve the original aspect ratio of the source image automatically.
Examples:
crop 200x200 means Maximum values of height and width given, aspect ratio preserved.
crop 200x200! means Width and height emphatically given, original aspect ratio ignored.
Capybara-screenshot can automatically save screenshots and the HTML for failed Capybara tests in Cucumber, RSpec or Minitest.
Requires Capybara-Webkit, Selenium or poltergeist for making screenshots. They're saved into $APPLICATION_ROOT/tmp/capybara
The attached files contain config for cucumber integration and a Then show me a screenshot step.
If your project uses Spreewald, you can use its Then show me the page step instead.
When accepting GIF images, you will also accept animated GIFs. Resizing them can be a time-consuming task and will block a Rails worker until the image is processed.
Save yourself that trouble, and simply tell ImageMagick to drop any frames but the first one.
Add the following to your uploader class:
process :remove_animation
private
def remove_animation
if content_type == 'image/gif'
manipulate! { |image| image.collapse! }
end
end
You may also define that process for specific versions only (e.g. only for thum...
A set of javascript tools for working with files.
It offers different kinds of things:
File objects.When HTML5 support is unavailable, it uses Flash polyfills.
Check out the documentation and demos at their GitHub page.
To install via bower, simply add the `...
The benefit of the Rails asset pipeline is that it compiles your stylesheets and javascripts to a single file, respectively. However, the consequences are startling if you don't understand them. Among others, the raw asset pipeline requires you to have all your asset libraries in the same folder, which quickly becomes confusing as your set of assets grows. To overcome this, we have two different solutions.
We are using a custom workaround to keep library files apart in their own directories. To avoid b...
To fix this:
The Angular ngSrc directive serves to properly set an image src via Angular. As anything in Angular, it updates the image as soon as the contained Angular expression changes. However, when the ng-src attribute is empty, Angular will not empty the src attribute. To overcome this, use the trick below.
<img ng-src="{{ element.image || '//:0' }}" />
The ngSrc directive explicitly returns when the attribute value is falsy. As a workaround, set a "blank" image src when the image is empty. As [somebody ...
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.
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 ...
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.
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 < ActiveReco...
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.
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...
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.
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">