HOWTOs for Ruby on Rails, RSpec, Cucumber and Javascript

Bootswatch: Paper

Free Bootstrap theme resembling Material Design.

Bootswatch offers Sass and Less files, so the theme can easily be integrated into your usual Rails application.

Implements only Bootstrap features which means that some Material stuff is missing, but also that you can easily use or replace the theme.
Does not come with extra JavaScript; some effects like button click ripples are implemented via CSS.

Also check out their other themes which can be used in a similar fashion.

bootswatch.com

List of Helpful RubyMine Shortcuts

CTRL + SHIFT + ALT + N: Search for any symbol in your application, like CSS classes, Ruby classes, methods, helpers etc.
CTRL + SHIFT + N: Search for filename in your application (also dependencies)
CTRL + E: Open a list of recently opened files
ALT + POS1: Open a the navigation bar as a context menu. Allows you to quickly navigate between files.

Actions

CTRL + SHIFT + A: Find and execute a menu actio…

How to fix: iPad does not trigger click event on some elements

iPads will not trigger click events for all elements. You can fix that, but you don't want to know why.

Example: Capturing clicks on table rows (use case would be clicking the 1st link inside it for better UI). Consider this setup:

<table>
  <tr>
    <td>hello</td>
  </tr>
</table>

$(document).on('click', 'tr', function () {
  alert('row clicked')
});

While this works on a desktop browser, clicking the row/cell on an iPad will just do nothing.

Turns out, the iPad will only trigger such events for …

24 little known CSS facts

This blew my mind today:

Please make sure to check browser support for CSS features on Can I Use and the Mozilla Development Network before using.

Favorites

outline-offset: specify how far away from the element an outline is rendered
::first-letter: matches the first letter insid…

Material Design Lite

CSS (+ some Javascript) framework, implementing Google's material design for static web pages.

Can be used for plain websites without requiring a full blown Javascript framework, unlike the (also excellent) Polymer paper elements, or Angular material.

Prelimiary impression:

I would recommend against using it at this stage, for a couple of reasons:

It is much less complete than you might expect from a CSS framewor…

getmdl.io

Copy & Paste & The Web | CSS-Tricks

Insanely detailled guide about controlling copy & paste behavior using web technology in 2015.

Note that you can now trigger a copy action through Javascript, no Flash required.

css-tricks.com

Reverse-proxying web applications with Apache 2.4+

Note: Making a reverse proxy with nginx is much more straightforward.

A reverse proxy is a "man in the middle" server that tunnels requests to another server. You can use for things like:

Expose a local service that you cannot directly reach over the internet
"Change" the domain or path of a web application by rewriting them on the fly
Instantly change servers that respond to a name or …

Make "rake notes" learn about Haml, Sass, CoffeeScript, and other file types

Rails comes with a Rake task notes that shows code comments that start with "TODO", "FIXME", or "OPTIMIZE".

While it's generally not good practice to leave them in your code (your work is not done until it's done), in larger projects you will occasionally have to use them as other parts of the application that you depend upon are not yet available.
To keep track of them, run rake notes. Its output looks something like this:

$ rake notes
app/controllers/fron...

Fontawesome 4 helper classes

Fontawesome 4 ships with many useful CSS helper classes.

Enlarge Icon: Add fa-lg (133%), fa-2x, fa-3x, fa-4x or fa-5x.
Fixed-width Icon: Add fa-fw. Will give all icons the same width.
Styling Lists: Add fa-ul to a <UL> and fa fa-<icon name> fa-li to a <LI> to give the list items custom "bullets".
Bordered Icon: Add fa-border to get a border around the icon.
Spinning Icon: Add fa-spin to make any icon rotate. Suggested icons: fa-spinner, fa-refresh, fa-cog. Doesn't work in IE <10.
Rotated Icon: Add `f…

yoyo.io

Responsive Tables in Pure CSS

Clever hack using data-attributes to assign labels to cells.

It's still a massive duplication of code (labels), but better and more lightweight than most solutions I've seen for this surprisingly tricky problem.

techblog.livingsocial.com

How to use CSS to rotate text by 90° in IE8 (and modern IEs)

If you want to rotate text, you can use CSS transforms in somewhat modern browsers to rotate the container element.
However, if you need to support IE8, transform is unavailable (if need only IE9 support, ignore the following and use -ms-transform).

Here is a solution that worked for me:

<div class="my-element">Hi!</div>

.my-element {
  display: inline-block;
  transform: rotate(90deg);
  -ms-writing-mode: tb-rl;
  -ms-transform: none;
}

This way, browsers will use CSS transforms when available – w…

Use CSS sibling selectors instead :last-child (or :first-child)

Often times you want to give a bunch of elements the same style, except for the last. For example borders or margins.

You probably commonly used the :last-child CSS meta selector like so:

.foo {
  border-bottom: 1px dashed #000;
}
.foo:last-child {
  border-bottom-width: 0;
}

However, this only works when an element is the last child of its parent. Any other siblings which are unrelated to your case will break it.

Instead, prefer using the + sibling selector. It applies to the element following the other.

```
.foo + .foo {
…

w3.org

Sass Mixins vs Extends: The Data - Belly Card Engineering

The debate between using mixins or extends in Sass has been heating up recently. From the surface it appears they both provide solid benefits in helping us write consistent and modular code. However, the critics are out and extends specifically have come under fire. But why?

Interesting results: Although mixins create more code than extends, the gzipped CSS is smaller and somewhat faster to evaluate for current browsers.

tech.bellycard.com

Capybara - The missing API

Note: The information in this card might be outdated.

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 cal…

flag-icon-css: Scalable country flags

Use it like this for inline icons:

<span class="flag-icon flag-icon-de"></span> Germany

They also work as block elements:

<div class="flag-wrapper">
  <div class="flag flag-icon-background flag-icon-de"></div>
</div>

lipis.github.io

velesin/jasmine-jquery

This jasmine plugin helps with testing DOM manipulation in two ways:

It gives you DOM-related matchers like toBeVisible() or toHaveCss(css)
It gives you a function to load HTML from fixture files. Without this you would have to manually add elements to <body> and clean up afterwards.

github.com

Making Sass talk to JavaScript with JSON | CSS-Tricks

Crazy hack. Might be useful one day.

The code required has since been extracted into a library.

css-tricks.com

Make jQuery.animate run smoother with almost no code changes

jQuery comes with .animate() that lets you transition some CSS selectors:

function floatIn($element) {
  $element.css({ 'opacity': 0, 'margin-top': 200px });
  $element.animate({ 'opacity': 1, 'margin-top': 0 }, { duration: 500 });
}

The animation is implemented using setInterval and Javascript. This works great, but it's not as smooth as a CSS transition.

Fortunately the animate API can be mapped almo…

1 4 5 6 7 8 9 10 18

Navigation

Actions

Favorites

Prelimiary impression: