HOWTOs for Ruby on Rails, RSpec, Cucumber and Javascript

315 matches

1 2 3 4 5 6 7 8 9 18

View

image-to-DataURI converter: Duri.me

Small web application where you can upload an image (PNG, JPEG, GIF) and generate a base64-encoded version of it.

You can copy the result as

HTML <img> tag with data URI,
CSS rule with background-image and data URI,
plain Base64-encoded data URI string.

duri.me

iOS Safari scales text in landscape mode

iOS Safari tries to be helpful and enlarges some(!) texts when you turn to landscape mode. In precise CSS building, this is annoying. Disable this behavior with:

body
  -webkit-text-size-adjust: 100% // Prevent font scaling in iOS landscape

stackoverflow.com

Beware: Nested Spreewald patiently blocks are not patient

Note: The behaviour of Spreewald's within step is as described below for version < 1.9.0; For Spreewald >= 1.9.0 it is as described in Solution 1.

When doing integration testing with cucumber and selenium you will often encounter problems with timing - For example if your test runs faster than your application, html elements may not yet be visible when the test looks for them. That's why Spreewald (a collection of cucumber steps) has a concept of doing things patiently, which means a given b...

SASS: Defining linear sizes

Just dumping this in case somebody might need it.

When you need a CSS value (a padding, margin, height etc) to shrink/grow proportionally with the parent element, you normally use percentage values. However, if you need specific values at two given widths, you need to turn to linear functions. The mixin below gives you just that.

// Call with two desired values at two different widths.
// Returns a calc() expression that will scale proportionally between those two.
// Example:
//   Spaci...

CSS tests and experiments

The pages listed here contain tests and experiments about features, possibilities, browsers’ bugs concerning CSS.

That is, over 200 experiments.

brunildo.org

Sass: Don't put CSS rules into partials that you import multiple times

TLDR: When you put CSS rules into a partial and import that partial multiple times, the CSS rules will be duplicated in the compiled CSS.

Here is a Sass partial called _fonts.sass that contains both CSS rules and a mixin:

@font-face
  font-family: SuperType
  src: url('supertype.woff')
  
=title-font
  font-family: SuperType

This _fonts.sass is not practical in CSS projects that are organized over multiple files: When you...

An Introduction to Sending HTML Email for Web Developers

A comprehensive introduction to sending HTML emails.

Intro:

HTML email: Two words that, when combined, brings tears to a developer’s eyes. If you’re a web developer, it’s inevitable that coding an email will be a task that gets dropped in your lap at some time in your career, whether you like it or not. Coding HTML email is old school. Think back to 1999, when we called ourselves “webmasters” and used Frontpage, WYSIWYG editors and tables to mark up our websites.

Introduction To Sending Email Link
Email List B...

smashingmagazine.com

Angular: Quick and easy animation on changed binding value

With ngAnimate, you can easily animate certain events (see directive support). We'll make use of ngClass animations to style an element on changed binding value.

Say we have a slider and a separate details container. Each time the slider changes, we want to "flash" the details container by hiding it and fading it back in.

HTML

Add a custom class to the element you want to animate, i.e. the details container:

<div class="details slide-index-{{ currentSlideIndex }}">
  {{ co...

stackoverflow.com

A case for different breakpoints

The linked article states that CSS breakpoints should group "similar" screen sizes and thus be at:

600px "narrow"
900px "medium"
1200px "wide"
(1800px) "huge"

By choosing these breakpoints, most device screens will be somewhere between two breakpoints, and not at the very edge of them.

The ranges could be called:

narrow (< narrow)
medium (narrow - medium)
normal (medium - wide)
wide (wide - huge)
huge (> huge)

medium.freecodecamp.com

Styling SVGs with CSS only works in certain conditions

SVG is an acronym for "scalable vector graphics". SVGs should be used whenever an image can be described with vector instructions like "draw a line there" or "fill that space" (they're not suited for photographs and the like). Benefits are the MUCH smaller file size and the crisp and sharp rendering at any scale.

It's a simple, old concept brought to the web – half-heartedly. While actually all browsers pretend to support SVG, some barely complex use cases get you beyond common browser support.

In the bas...

Sass: How to do math with shorthand values inside variables

If you need to modify (e.g. add 2px) a Sass variable that defines multiple values as one (e.g. for short-hand CSS definitions such ass padding), you can by using nth. It's ugly.

While you could split up such variables into multiple values (e.g. combined padding into one for vertical and one for horizontal padding) in your own Sass definitions, when using some framework definitions like bootstrap-sass, those variables are defined outside your reach.

The following is helpful if you really want to use values from such variables. However...

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

1 2 3 4 5 6 7 8 9 18

Table of Contents

HTML

Usage

Inspecting XML