Repeat an element on every printed page with CSS
Firefox, Opera and Internet Explorer will repeat elements with position: fixed on every printed page (see attached example).
The internet knows no way to do this in Webkit browsers (Chrome, Safari). These browsers will only render the element on the first printed page.
CSS box-shadow not working in IE9 inside tables with collapsing borders
Though Internet Explorer 9 supports the box-shadow CSS property there is a nasty bug which sometimes prevents it from rendering the shadow properly.
Consider this HTML:
<table style="border-collapse: collapse">
<tr>
<td>
<div style="box-shadow: 0 0 10px #f00">Hello universe</div>
</td>
</tr>
</table>
While it works in other browsers, IE9 is not showing any shadow. For some reason, it requires border-collapse: separate for the table to be set:
<table style="border-collapse: separate" c...
Pull Quotes with HTML5 and CSS
A pull quote is a typographical technique in which an excerpt or quote from an article is duplicated within the article using a different formatting style so that it jumps out at the reader.
Blatantly copying the excerpt of the pull quote into it’s own element is not the way to go. A pull quote is a purely visual technique, and therefore should not change the structure of the body. Next to that, a structural representation of the excerpt would be seen twice by people using feed readers or services like Instapaper, as well as be re-read for ...
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](...
Detect mobile or touch devices on both server and client
Although it's tempting flirt with detecting mobile/touch devices with CSS media queries or Javascript feature detection alone, this approach will be painful when heavily customizing a feature beyond just tweaking the looks. Eventually you will want want the same detection logic to be available on both server and client side.
This card shows how to get a Ruby method touch_device? for your Rails views and a method TouchDevice.isPresent() for your Javascripts.
Note that we are detecting touch devices by grepping the user agent, and the ke...
Right-align or center panel items in XFCE
- Add a separator between left-aligned and right-aligned items.
- In the separator properties, set the style to "Transparent" and check "Expand".
- The separator will now grab all available space and hence push the right-hand items into the corner.
You can also use this trick to center panel items by using two separators (one on the left, one on the right side).
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.
Useful script to collect downloads from several sites
For university I have to stay up-to-date with lecture documents. Since my university doesn't offer RSS feeds, I wrote a little script that collects files from web pages.
You want this, if you have several web pages that offer downloads that you don't want to check manually. Just register the URL and a CSS snippet to retrieve the files in the attached script and run it – it will fetch all your files. It will store all files in a single place or sort them into respective directories.
Edit the header of the file (providing your data), save it...
Caching may break relative paths in your merged stylesheet
If you turn on stylesheet caching, it might happen that stylesheets from different locations with different relative pathes will be put together to one big stylesheet.
This stylesheet then resides in /stylesheets but still holds the old pathes, which aren't valid anymore. This leads to the effect that images are displayed on your local development machine (where caching is turned off automatically) but not on the server.
To fix this, either:
^
- Move all stylesheets to the same folder
- or have one cache per folder
Rails ERD – Entity-Relationship Diagrams for Rails
Gem to generate entity relationship diagrams from your Rails 3 ActiveRecord models. The diagram style is pretty and configurable.
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...
Large forms are slow on the iPad
- Forms with many inputs (600+ in my case) become extremely unresponsive on an iPad, up to the point where it can take several seconds for a control to respond to touch commands.
- This is true for both iPad 1 and iPad 2 models.
- While certain CSS styles can lead to performance issues, removing those styles won't help if the form simply is very large.
- A workaround is to only show a limited number of form inputs at the time, e. g. by toggling groups of form...
Web font embedding requires new CSS for IE9
If you embedded web fonts in the past years (e.g. by copying CSS from a Font Squirrel @font-face kit), that CSS won't work in Internet Explorer 9.
You can fix it by turning these styles...
@font-face
font-family: 'MyFont'
src: url('myfont.eot')
src: local("☺"), ('myfont.ttf') format("truetype")
font-weight: normal
font-style: normal
... into these:
@font-face
font-family: 'MyFont'
src: url('myfont.eot')
src: local("☺"), url('myfont.e...
Improve web font rendering in Windows by autohinting fonts
Web fonts are awesome. After being restricted to Arial for two decades there is finally a cross-browser way to embed fonts into web pages.
Unfortunately while web fonts look awesome on Linux and MacOS, they look horrible on Windows, a problem that gets worse with smaller font sizes.
The culprit is something called font hinting:
...
Give table columns equal width using CSS
If you want to distribute a <table>'s width equally over its columns, you can use the following CSS property:
table-layout: fixed
It is supported by every browser ever.
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...
The Skinny on CSS Attribute Selectors
Good guide to different ways you can write CSS selectors that select elements by their attribute values.
How to make a single check box (or image, etc) align vertically
Consider this HTML:
<div style="line-height: 42px">
<input type="checkbox" />
</div>
Even though the surrounding container defines a line-height, which vertically centers its inline elements, the check box will be top aligned if it is the only element inside the container.
It will be aligned correctly if the HTML looks like this:
<div style="line-height: 42px">
<input type="checkbox" /> foo
</div>
So the ac...
Detect the current Rails environment from JavaScript or CSS
Detecting if a Javascript is running under Selenium WebDriver is super-painful. It's much easier to detect the current Rails environment instead.
You might be better of checking against the name of the current Rails environment. To do this, store the environment name in a data-environment of your <html>. E.g., in your application layout:
<html data-environment=<%= Rails.env %>>
Now you can say in a pi...
Capybara - The missing API
The Capybara API is somewhat hard for parse for a list of methods you can call on a Capybara node. Below you can find such a list. It's all copied from the Capybara docs, so all credit goes to the Capybara committers.
When you talk to Capybara from a Cucumber step definition, you always have page as the document root node, or whatever you scoped to by saying within(selector) { ... }. You can select child notes by calling page.find(selector) or page.all(selector). You can call the same ...
Always store your Paperclip attachments in a separate folder per environment
tl;dr: Always have your attachment path start with :rails_root/storage/#{Rails.env}#{ENV['RAILS_TEST_NUMBER']}/.
The directory where you save your Paperclip attachments should not look like this:
storage/photos/1/...
storage/photos/2/...
storage/photos/3/...
storage/attachments/1/...
storage/attachments/2/...
The problem with this is that multiple environments (at least development and test) will share the same directory structure. This will cause you pain eventually. Files will get overwritten and...
How to grep through the DOM using the Capybara API
When your Cucumber feature needs to browse the page HTML, and you are not sure how to express your query as a clever CSS or XPath expression, there is another way: You can use all and find to grep through the DOM and then perform your search in plain Ruby.
Here is an example for this technique:
Then /^I should see an image with the file...