HOWTOs for Ruby on Rails, RSpec, Cucumber and Javascript

About the HTML and the BODY tag

The <html> and <body> tags both come with some non-default behavior that you know from other tags.
Do not try to style html or body for positioning, width/heigth, or similar. Every browser has its own caveats and you can not test them all.

Generally speaking:

Use the html tag to define your page's default background color (because on short pages or large screens, your body may not be as tall as the browser window).
Use the html tag to define a base font-size so you can use [rem units](https://www.sitepoint.com/underst...

phrogz.net

object-fit polyfill by lazysizes

All new browsers support the new object-fit CSS property. It allows to specify how an element behaves within its parent element and is intended for images and videos. The most useful values are contain (fit-in) and cover (crop).

Unfortunately, IE does not support this yet. However, if you're already using lazysizes, you can use its object-fit polyfill!

Usage

In your Javascript manifest, require them like this:

#= require plugins/object-fit/ls.obj...

css-tricks.com

Dynamically uploading files to Rails with jQuery File Upload

Say we want …

to create a Gallery that has a name and has_many :images, which in turn have a caption
to offer the user a single form to create a gallery with any number of images
immediate uploads with a progress bar per image
a snappy UI

Enter jQuery File Upload. It's a mature library that can do the job frontend-wise. On the server, we'll use Carrierwave, because it's capable of caching images.

(FYI, [here's how to do the u...

Preloading images with CSS

Sometimes you want to preload images that you will be using later. E.g. if hovering over a an area changes its background image, the new image should be preloaded. If you only load it once the user starts hovering, there will be a delay until the background image flips.

The attached article explains how to preload images with only CSS. No Javascript required.

The gist is:

.element:after {
  content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
  display: none;
}

thecssninja.com

How to inspect RSS feeds with Spreewald, XPath, and Selenium

Spreewald gives you the <step> within <selector> meta step that will constrain page inspection to a given scope.

Unfortunately, this does not work with RSS feeds, as they're XML documents and not valid when viewed from Capybara's internal browser (e.g. a <link> tag cannot have content in HTML).

Inspecting XML

If you're inspecting XML that is invalid in HTML, you need to inspect the page source instead of the DOM. You may use Spreewald's "... in the HTML" meta step, or add this proxy step fo...

Find the innermost DOM element that contains a given string

Let's say you want to find the element with the text hello in the following DOM tree:

<html>
  <body>
    <article>
      <strong>hello</strong>
      <strong>world</strong>
    </article>
  </body>
</html>

You might think of using jQuery's :contains selector:

$(":contains('hello')")

Unfortunately that returns a lot more elements than you expect:

[ <html>...<html>,
  <body>...</body>,
  <article>...</article>,
  <strong>hello</strong> ]

The reason for this is that...

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 the available width */
li { display: inline-block }

@media (max-width: 600px) {
  li { display: block }
}

Now imagine you want the rightmost item to be the topmost item on small screens. You'll need to invert the order of list items, but only for large screens. Here are some approaches to do so:...

Vertical align anything with just 3 lines of CSS

See attached link. The gist is:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Works in all web browsers and IE9+.

zerosixthree.se

AllThingsSmitty/css-protips

A list of surprisingly clever CSS expressions for common use cases.

github.com

How to open a new tab with Selenium

Until recently, you could open a new tab via window.open when using execute_script in Selenium tests. It no longer works in Chrome (will show a "popup blocked" notification).

This is because browsers usually block window.open unless the user interacted with an element for security reasons. I am not sure why it did work via Selenium before.

Here is an approach that will insert a link into the page, and have Selenium click it:

path = "/your/path/here"
id = "helper_#{SecureRandom.hex(8)}"
execute_script <<-JAVASCRIPT
  ...

CSS: Select elements that contain another selector

CSS4 comes with :has. E.g. h1:has(b) would select all <h1> tags that contain a <b> tag.

This is implemented in no browser but the jQuery query engine already supports it as a custom extension.

Spreewald: Click on an element with a CSS selector

Spreewald 1.4.0 comes with this step:

When I click on the element ".sidebar"

We recommend to define a selector_for method in features/support/selectors.rb so you can refer to the selector in plain English:

When I click on the element for the sidebar

Spreewald: Check that a CSS selector is present on the current page

Spreewald 1.3.0 comes with these steps:

Then I should see an element ".panel"
Then I should not see an element ".sidebar"
Then I should see an element ".twitter-timeline"

We recommend to define a selector_for method in features/support/selectors.rb so you can refer to the selector in plain English:

Then I should see an element for a panel
Then I should not see an element for the sidebar
Then I should see an element for the Twitter timeline

CSS Fontstack: An overview of web/web safe font support

Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems that you want to support. If you want to use fonts other than ones pre-installed, as of CSS3, you can use Web Fonts.

If you need to install any of the widely-supported fonts listed there, you'll probably find them at www.fontpalace.com.

cssfontstack.com

Bootstrap 4 is coming

What's new

Moved from Less to Sass. Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers.
Improved grid system. We’ve added a new grid tier to better target mobile devices and completely overhauled our semantic mixins.
Opt-in flexbox support is here. The future is now—switch a boolean variable and recompile your CSS to take advantage of a flexbox-based grid system and components.
Dropped wells, thumbnails, and panels for cards. Cards are a brand new co...

blog.getbootstrap.com

Creating spheres with CSS

Using the CSS border-radius property, we can create rounded shapes and circles. Add some gradients and they become spheres. Let’s try that, and add some animation to bring them to life.

cssanimation.rocks

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

Navigation

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...

1 4 5 6 7 8 9 10 18