IE9: Linear gradients remove border-radius and inset box-shadows
When you add a linear gradient to an element, IE9 removes all border-radius and inset box-shadows. This is because you probably are doing linear gradients with this weirdo Microsoft filter:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
filter hijacks the rendering of the entire element box, so you're out of luck. IE9 doesn't support CSS gradients.
A forward-looking workaround is to not use gradients and [emulate your gradients with box-shadows](https://makandracards.com/m...
Creating a multi-resolution favicon including transparency with the GIMP
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
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: Have a black background by default
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
~/.Xresourcesfile. Just addxterm*faceName: monospace:pixelsize=14. - If you don't want to chan...
Validate attachment presence using paperclip
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.
Make your Rails console (and irb) output better readable
Pour color on your Rails console with awesome_print. Turn confusing long strings into formatted output. Have objects and classes laid out clearly whenever you need it.
Put gem 'awesome_print', :group => :development into your Gemfile. Now on the Rails console you have the command ap that will give you a colored, formatted output of whatever you pass it. See the example output of the User class below.
For customization visit the repository on Github.
.
Here is a link.
![An image; this is the alt text](http:/...
Convert Virtualbox .ova Image to .ovf
The .ova file format is a tar file with a .ovf file inside.
tar xvf virtualboximage.ova
CSS: Change text selection color
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.
Opening images with 100% zoom in Photoshop
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'sMeta-Alt-0) - or double-clicking the magnifier tool icon.
How to embed images in higher resolutions for printing
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](...
Get color in the Capistrano output
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.
Limiting CPU and memory resources of Paperclip convert jobs
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...
Make Less interpret the escape codes in a logfile
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'
Change image scaling algorithms with CSS
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.
User friendly form design
There are two types of forms: User forms, e.g. for sign up, and Administration forms, to maintain data. They are quite different in purpose: The former must be simple and quick to fill in, whereas the latter should organize a lot of data in a reasonable way.
Guidelines
- Simple is win.
- Align forms vertically, one element below the other.
- Never explain your form. If it is too complicated, redesign.
- Skimp on lines and boxes. If you need them, something is wrong with your form.
A form element needs
- Label. Above the field i...
Declare different CSS background-images for different locales
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...
Parse & sort unique hits in logfiles
If you want to know the exact hits on your website (or whatever logfile you want) for a specific date without duplicates, here's how.
"Unique" means you don't want to count hits to an URL originating from the same IP twice.
You can use the attached script to do so:
# ./log_parser.rb 2011-10-04
27 hits on /rss.xml
36 hits on /stylesheets/fonts/slkscr-webfont.woff
37 hits on /stylesheets/fonts/slkscrb-webfont.woff
37 hits on /images/bullet.png
38 hits on /images/download.png
38 hits on /images/play.png
39...
How to use CSS3 gradients in Opera
Since version 11.10 Opera provides support for linear gradients using -o-linear-gradient.
The syntax is pretty similar to Mozilla's -moz-linear-gradient. This will create a vertical gradient from yellow to red:
background-image: -o-linear-gradient(top, #ff0, #f00);
The first parameter defines where the gradient starts and which direction it will go. \
You can use top/left/bottom/right (and combinations of those) but also set any angle you like (0° being the left side, going counter-clock-wise):
background-image: -o-l...
Removing ANSI color codes from Rails logs
The colors in Rails log files are helpful when watching them but, since they are ANSI color codes like ^[[4;36;1m, can be annoying when you are reading the logs with a tool that does just prints those control characters (like less or vim).
Remove them with sed:
cat staging.log | sed -r "s/\x1B\[([0-9]{1,3}((;[0-9]{1,3})*)?)?[m|K]//g"
This will print the log without colors to your terminal. You can pipe the result into less for example.
To have a file you can vim around with, just write that output into a new file:
ca...
Auto-generate state_machine graphs as PNG images
The state_machine gem comes with a rake task that lets you generate PNG graphs from any model using state_machine.
Install the required dependencies like this:
sudo apt-get install graphviz
sudo gem install ruby-graphviz
You can now generate a graph like this:
rake state_machine:draw CLASS=ModelUsingStateMachine
Replace ModelUsingStateMachine with the name of your model class.
If it the raketask does not exist for you, add to Rakefile (in your pr...
When Balsamiq Mockups won't let you load an image file
Did you check Copy to Projects Asset as ... and there is an existing file with the same name in your project folder?
Convert the colorspace of a PDF from RGB to CMYK under Ubuntu Linux
Note that converting from RGB to CMYK will usually degrade your colors because no exact mapping is possible. Anyway, this Stackoverflow post worked for me:
gs -dSAFER -dBATCH -dNOPAUSE -dNOCACHE -sDEVICE=pdfwrite \
-sColorConversionStrategy=CMYK -dProcessColorModel=/DeviceCMYK \
-sOutputFile=output.pdf input.pdf