ClockPicker: Android-style time picker for Bootstrap

Posted Over 7 years ago by Arne Hartherz.
weareoutman.github.io

ClockPicker is a JavaScript and Bootstrap implementation of an Android-style time picker which looks and feels great. Unfortunately, it...

Sass: How to do math with shorthand values inside variables

Posted Over 7 years ago by Arne Hartherz.

If you need to modify (e.g. add 2px) a Sass variable that defines multiple values as one (e.g. for short...

The Current State of Telephone Links | CSS-Tricks

Posted Over 7 years ago by Henning Koch.
css-tricks.com

The linked article shows what current browsers do when you click a link like this: 1-562-867-5309

Building web applications: Beyond the happy path

Posted Over 7 years ago by Dominik Schöler.

When building a web application, one is tempted to claim it "done" too early. Make sure you check this list...

About the HTML and the BODY tag

Posted Over 7 years ago by Dominik Schöler.
phrogz.net

...The and tags both come with some non-default behavior that you know from other tags.

You can implement basic object-fit behavior with background images

Posted Over 7 years ago by Henning Koch.

So you want to use object-fit, but you also need to support Internet Explorer. One option is to use...

object-fit polyfill by lazysizes

Posted Over 7 years ago by Dominik Schöler.
css-tricks.com

All new browsers support the new object-fit CSS property. It allows to specify how an element behaves within its...

Dynamically uploading files to Rails with jQuery File Upload

Posted Almost 8 years ago by Dominik Schöler.

to create a Gallery that has a name and has_many :images, which in turn have a...

Preloading images with CSS

Posted Almost 8 years ago by Henning Koch.
thecssninja.com

Sometimes you want to preload images that you will be using later. E.g. if hovering over a an area changes...

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

Posted Almost 8 years ago by Dominik Schöler.

Spreewald gives you the within meta step that will constrain page inspection to a given scope. Unfortunately, this does not...

How to explain SQL statements via ActiveRecord

Posted Almost 8 years ago by Arne Hartherz.
guides.rubyonrails.org

ActiveRecord offers an explain method similar to using EXPLAIN SQL statements on the database. However, this approach will explain all...

Stretching an HTML page to full height

Posted Almost 8 years ago by Henning Koch.

This card existed before, but was outdated due to browser implementation changes. The information below is validated for the current...

Find the innermost DOM element that contains a given string

Posted About 8 years ago by Henning Koch.

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

How to reverse the order of HTML elements with CSS

Posted About 8 years ago by Dominik Schöler.

Imagine you have a list you want to render inline on large screens, but stacked on small screens. high

Centering with CSS vertically and horizontally (all options overview)

Posted About 8 years ago by Henning Koch.

There are a million ways to center s or text in CSS, horizontally or vertically. All the ways are unsatisfying...

Showing a custom maintenance page while deploying

Posted About 8 years ago by Pascal Roth.
github.com

Note The maintenance mode is enabled on all application server as soon as the file /public/system/maintenance.html is present. Installation

AllThingsSmitty/css-protips

Posted About 8 years ago by Henning Koch.
github.com

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

How to open a new tab with Selenium

Posted Over 8 years ago by Arne Hartherz.

Until recently, you could open a new tab via window.open when using execute_script in Selenium tests. It no longer...

CSS: Select elements that contain another selector

Posted Over 8 years ago by Henning Koch.

CSS4 comes with :has. E.g. h1:has(b) would select all tags that contain a tag. This is implemented in...

Spreewald: Click on an element with a CSS selector

Posted Over 8 years ago by Henning Koch.

Spreewald 1.4.0 comes with this step: When I click on the element ".sidebar" We recommend to define a selector_for...

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

Posted Over 8 years ago by Henning Koch.

Spreewald 1.3.0 comes with these steps: Then I should see an element ".panel" Then I should not see an element...

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

Posted Over 8 years ago by Dominik Schöler.
cssfontstack.com

Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same...

Lazy-loading images

Posted Over 8 years ago by Dominik Schöler.
github.com

Note This card does not reflect the current state of lazy loading technologies. The native lazy attribute could be used...

Keeping web applications fast

Posted Over 8 years ago by Tobias Kraze.

Our applications not only need to be functional, they need to be fast. But, to quote Donald Knuth, premature optimization...