HTML emails with inline stylesheets and webpacker

Posted About 5 years ago by Natalie Zeumann.

Many mail clients do not support external style sheets. Some even require all styling inline, which means you'll have...

CSS: Flex and "min-width"

Posted About 5 years ago by Dominik Schöler.

min-width is known as a CSS property that can be set to define a least width for an element...

Bootstrap 4 skin for the Rome datepicker

Posted About 5 years ago by Arne Hartherz.

Here is how to make Rome datepicker look like the rest of your Bootstrap 4 application. Rome comes with very...

Upgrade guide for moving a Rails app from Webpack 3 to Webpack 4

Posted About 5 years ago by Arne Hartherz.

Webpacker is Rails' way of integrating Webpack, and version 4 has been released just a few days ago, allowing us...

JavaScript without jQuery (presentation from 2019-01-21)

Posted About 5 years ago by Henning Koch.

We want to move away from jQuery in future projects Motivations are performance, bundle size and general trends for...

Auto-generating plain-text bodies for HTML e-mails in Rails apps

Posted Over 5 years ago by Arne Hartherz.

When building an application that sends e-mails to users, you want to avoid those e-mails from being classified...

CSS: How to find out the rendered font in chrome

Posted Over 5 years ago by Emanuel.

The rendered font often depends on the local font your system provides, therefore you often find a rule like below...

How to: expand an element's cover area beyond its container

Posted Over 5 years ago by Arne Hartherz.
codepen.io

Occasionally, your designer will hand you designs where elements break the layout's horizontal container width, like navigation buttons of...

How to access before/after pseudo element styles with JavaScript

Posted Over 5 years ago by Arne Hartherz.

Accessing pseudo elements via JavaScript or jQuery is often painful/impossible. However, accessing their styles is fairly simple. Using getComputedStyle

Does <html> or <body> scroll the page?

Posted Over 5 years ago by Henning Koch.

Scrolling overflowing elements with JavaScript HTML elements with overflow-y: auto or overflow-y: scroll will get a scrollbar when...

Minify Font Awesome fonts with webpack

Posted Over 5 years ago by Tobias Kraze.

Font Awesome 5 is a comprehensive solution for vector icons on your website. Originally, Font Awesome came as an icon...

Do not use "flex: 1" or "flex-basis: 0" inside "flex-direction: column" when you need to support IE11

Posted Over 5 years ago by Arne Hartherz.
plnkr.co

Flexbox is awesome. Most of it even works in IE11, but flex: 1 won't work reliably in Internet Explorer...

How to make changes to a Ruby gem (as a Rails developer)

Posted Over 5 years ago by Dominik Schöler.

At makandra, we've built a few gems over the years. Some of these are quite popular: spreewald (> 1M downloads...

Chrome bug: Wrong stacking order when transitioning composited elements

Posted Almost 6 years ago by Dominik Schöler.

Google Chrome has a subtle rendering bug that hits me once in a while. It usually occurs in sliders with...

Introduction to Google Tag Manager (for web developers who know Google Analytics)

Posted Almost 6 years ago by Dominik Schöler.

As a web developer, you know Google Analytics (GA). Probably you've dropped the GA snippet into more than one...

Designing HTML emails

Posted Almost 6 years ago by Dominik Schöler.
litmus.com

The 90s are calling: they want their tables back. Unfortunately, you need them all for laying out your HTML emails...

Logic in media queries

Posted Almost 6 years ago by Dominik Schöler.
developer.mozilla.org

Here is how to model basic logic in media queries. AND With keyword and. # Target viewport widths between 500 and...

CSS: Using interaction media detection to disable hover styles for devices that have no hover

Posted Almost 6 years ago by Dominik Schöler.
caniuse.com

Since late 2015, all major browsers (still excluding Firefox) support pointing device media queries. These can be used to distinguish...

RSpec: Expect one of multiple matchers to match

Posted Almost 6 years ago by Henning Koch.
rspec.info

RSpec let's you chain a matcher with .or. The expectation will then pass if at least one matcher matches...

Printing background color of elements

Posted Almost 6 years ago by Natalie Zeumann.
developer.mozilla.org

Browsers' printing methods usually don't print background colors. In most cases this is the desired behavior, because you don...

CSS: Using the current text color for other color properties

Posted Almost 6 years ago by Dominik Schöler.
caniuse.com

There is a kinda secret, yet well supported CSS feature called currentColor. It's like a special CSS variable that...

When you want to format only line breaks, you probably do not want `simple_format`

Posted Almost 6 years ago by Arne Hartherz.

For outputting a given String in HTML, you mostly want to replace line breaks with or tags.

Two CSS layouting techniques compared: Flexbox vs. Grid

Posted About 6 years ago by Dominik Schöler.
hackernoon.com

CSS Flexbox has become extremely popular amongst front-end developers the last couple of years. This isn’t surprising, as...

Generating test images on the fly via JavaScript or Ruby

Posted About 6 years ago by Arne Hartherz.
jsfiddle.net

When you need test images, instead of using services like lorempixel or placehold.it you may generate test images yourself.