The Shapes of CSS
Examples how to create dozens of shapes using pure CSS and a single HTML element.
Related cards:
How to reverse the order of HTML elements with CSS
Imagine you have a list you want to render inline on large screens, but stacked on small screens.
<ul>
<li>high</li>
<li>medium</li>
<li>low</li>
</ul>
ul { white-space: nowrap } /* optional: keep items in one line no matter th...
The Current State of Telephone Links | CSS-Tricks
The linked article shows what current browsers do when you click a link like this:
<a href="tel:1-562-867-5309">1-562-867-5309</a>
Spoiler: The current state is sad
It's...
Managing vendor libraries with the Rails asset pipeline
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 pipeli...
Security issues with hash conditions in Rails 2 and Rails 3
Find conditions for scopes can be given either as an array (:conditions => ['state = ?', 'draft']) or a hash (:conditions => { 'state' => 'draft' }). The later is nicer to read, but has horrible security implications in some versions of Ru...
CSS: The inset CSS shorthand
The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand.
Example
<div class="outer">
<div class="inner">
Some text
...
RSpec: Change the type of a spec regardless of the folder it lives in
In a Rails application, *_spec.rb files get special treatment depending on the file's directory. E.g. when you put a spec in spec/controllers your examples will have some magic context like controller, post or get that appears out of now...
Ruby, Ruby on Rails, and _why: The disappearance of one of the world’s most beloved computer programmers
Nice article to educate your non-geek girlfriend/boyfriend about the joys of programming.
SASS: The Better, More Powerful CSS - Intridea Design Blog
I am a huge fan of SASS (Syntactically Awesome Stylesheets) for styling Rails applications. I have been using it on all of my projects for quite a while now and have developed some great techniques that make it much easier to organize, write, and ...
CSS: Matching against attributes and their values (or parts of them)
You probably know that you can use CSS selectors to match against elements and their attributes, such as:
a[title] { /* any <a> that has a "title" */ }
a[data-fancy="true"] { /* any <a> that has their "data-fancy" attribute set to "true" *...
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 Rail...