Sass Mixins vs Extends: The Data - Belly Card Engineering

Posted About 9 years ago by Henning Koch.
tech.bellycard.com

The debate between using mixins or extends in Sass has been heating up recently. From the surface it appears they...

An auto-mapper for BEM classes in Cucumber selectors

Posted About 9 years ago by Dominik Schöler.

When you are using the #selector_for helper in Cucumber steps, as e.g. Spreewald does, the following snippet will save...

Understanding z-index: it's about stacking contexts

Posted About 9 years ago by Dominik Schöler.

The CSS property z-index is not as global as you might think. Actually, it is scoped to a so...

flag-icon-css: Scalable country flags

Posted Over 9 years ago by Arne Hartherz.
github.com

Use it like this for inline icons: Germany They also work as block elements:

Jasmine: Testing AJAX calls that manipulate the DOM

Posted Over 9 years ago by Henning Koch.

Here is a Javascript function reloadUsers() that fetches a HTML snippet from the server using AJAX and replaces the current...

velesin/jasmine-jquery

Posted Over 9 years ago by Henning Koch.
github.com

This jasmine plugin helps with testing DOM manipulation in two ways: It gives you DOM-related matchers like toBeVisible() or...

AngularJS: Binding to Perl-style getter/setters functions

Posted Over 9 years ago by Henning Koch.

Angular 1.3+ has an alternative getter/setter pattern: You can bind ng-model to an accessor function. This is a function...

Make jQuery.animate run smoother with almost no code changes

Posted Over 9 years ago by Henning Koch.

jQuery comes with .animate() that lets you transition some CSS selectors: function floatIn($element) { $element.css({ 'opacity': 0, 'margin-top': 200px...

thoughtbot/bourbon

Posted Over 9 years ago by Arne Hartherz.
github.com

Bourbon is a library of pure Sass mixins that are designed to be simple and easy to use. No configuration...

Managing vendor libraries with the Rails asset pipeline

Posted Over 9 years ago by Dominik Schöler.

The benefit of the Rails asset pipeline is that it compiles your stylesheets and javascripts to a single file, respectively...

Asset Pipeline Basics

Posted Over 9 years ago by Dominik Schöler.

The Rails asset pipeline improves delivery of application assets (javascripts, stylesheets, images, fonts). Here are some basic facts about its...

josephschmitt/Clamp.js

Posted Over 9 years ago by Arne Hartherz.
github.com

Clamps (ie. cuts off) an HTML element's content by adding ellipsis to it if the content inside is too...

Prevent LibreOffice from changing standard styles when you format individual characters

Posted Over 9 years ago by Henning Koch.

You select some characters, make them bold and suddenly your entire document is bold? Here's how to fix that...

bower-rails can rewrite your relative asset paths

Posted Over 9 years ago by Henning Koch.

The asset pipeline changes the paths of CSS files during precompilation. This opens a world of pain when CSS files...

When Sass-generated stylesheets print a Encoding::CompatibilityError

Posted Over 9 years ago by Henning Koch.

We upgraded a Rails 2 application to Rails 3.2 and Ruby 2.1, changed the mysql adapter from mysql to mysql2...

What we know about PDFKit

Posted Over 9 years ago by Henning Koch.
github.com

PDFKit converts a web page to a PDF document. It uses a Webkit engine under the hood...

Transactional HTML Email Templates

Posted Over 9 years ago by Henning Koch.
blog.mailgun.com

Styling HTML email is painful. Tables, inline CSS, unsupported CSS, desktop clients, web clients, mobile clients, various devices, various providers...

Vertical align anything with just 3 lines of CSS

Posted Over 9 years ago by Henning Koch.
zerosixthree.se

See attached link. The gist is: .element { position: relative; top: 50%; transform: translateY(-50%); } Works in all web browsers and...

Sass partial names must always start with an underscore

Posted Almost 10 years ago by Dominik Schöler.

Be careful to name any file @imported by SASS with a leading underscore. SASS files not beginning with an underscore...

SudoSlider: a jQuery slider

Posted Almost 10 years ago by Arne Hartherz.
plugins.jquery.com

SudoSlider is a simple yet powerful content slider that makes no (or very few) assumptions about your markup and is...

Cucumber step to manually trigger javascript events in Selenium scenarios (using jQuery)

Posted Almost 10 years ago by Dominik Schöler.

When you cannot make Selenium trigger events you rely on (e.g. a "change" event when filling in a form field...

Get the last leaf of a DOM tree (while considering text nodes)

Posted Almost 10 years ago by Henning Koch.

I use this to simulate the (non-existing) :last-letter CSS pseudoclass, e. g. to insert a tombstone at the...

Chrome 34+, Firefox 38+, IE11+ ignore autocomplete=off

Posted Almost 10 years ago by Arne Hartherz.

Since version 34, Chromium/Chrome ignores the autocomplete="off" attribute on forms or input fields. Recent versions of other browser do...

About "unexpected '#' after 'DESCENDANT_SELECTOR' (Nokogiri::CSS::SyntaxError)"

Posted Almost 10 years ago by Dominik Schöler.

The error unexpected 'x' after 'DESCENDANT_SELECTOR' (Nokogiri::CSS::SyntaxError) (where x may be basically any character) occurs when the...