Disable built-in dragging of text and images

Posted Over 2 years ago by Dominic Beger.

Most browsers have built-in drag and drop support for different page elements like text and images. While this may...

Encrypting messages with age (alternative to PGP)

Posted Over 2 years ago by Emanuel.
github.com

age is a simple, modern and secure file encryption tool, format, and Go library. It features small explicit keys, no...

Unobtrusive JavaScript helper to progressively enhance HTML

Posted Over 2 years ago by Henning Koch.

The attached compiler() function below applies JavaScript behavior to matching HTML elements as they enter the DOM. This works like...

Triggering JavaScript when an element is clicked

Posted Over 2 years ago.

Often people need links which are not linked directly, but should trigger execution of JavaScript. ❌ Bad workarounds

CSS has a built-in clearfix

Posted Over 2 years ago by Henning Koch.

The need for clearfix hacks has been greatly reduced since we could layout with Flexbox or CSS Grid.

CSS: How to force background images to scale to the container, ignoring aspect ratio

Posted Over 2 years ago by Arne Hartherz.

You can scale background images in CSS to the container size using background-size (Demo). Commonly, we use contain or...

Setting SASS variables as value for CSS custom properties

Posted Almost 3 years ago by Dominic Beger.

When using custom properties in your stylesheets, you may want to set a specific property value to an existing variable...

How to: Ensure proper iconfont rendering with Webpack

Posted Almost 3 years ago by Michael Leimstädtner.

After switching a project from Sprockets to Webpack, I started observing a bug that was hard to debug: Our...

When does Webpacker compile?

Posted Almost 3 years ago by Henning Koch.

Webpack builds can take a long time, so we only want to compile when needed. This card shows what will...

What does 100% mean in CSS?

Posted About 3 years ago by Henning Koch.
wattenberger.com

The attached article examines what the percent unit (%) is relative to in CSS The article does a great job of...

Changes to positional and keyword args in Ruby 3.0

Posted About 3 years ago by Tobias Kraze.
ruby-lang.org

Ruby 3.0 introduced a breaking change in how it treats keyword arguments. There is an excellent blog post on the...

Ruby: How to convert hex color codes to rgb or rgba

Posted About 3 years ago by Arne Hartherz.

When you have a hex color code, you can easily convert it into its RGB values using plain Ruby.

Capybara: Pretending to interact with the document

Posted About 3 years ago by Henning Koch.

Browsers blocks abusable JavaScript API calls until the user has interacted with the document. Examples would be opening new tab...

Some tips for upgrading Bootstrap from 3 to 4

Posted About 3 years ago by Florian Leinsinger.
getbootstrap.com

Recently I made an upgrade from Bootstrap 3 to Bootstrap 4 in a bigger project. Here are some tips how...

WYSIWYG with Action Text

Posted About 3 years ago by Niklas Hasselmeyer.

Rails 6 includes a WYSIWYG editor, Action Text. It works out of the box quite well, but chances are that...

Rails: How to use custom flash types in controllers

Posted Over 3 years ago by Emanuel.

Rails supports alert and notice as default flash types. This allows you to use these keys as options in e.g...

A few recent CSS properties

Posted Over 3 years ago by Dominik Schöler.

Feature Queries (Edge 12+): Similar to @media queries, @supports blocks can be scoped to browsers that support a given declaration...

How to Make Your Code Reviewer Fall in Love with You

Posted Over 3 years ago.
mtlynch.io

Why improve your code reviews? Improving code review technique helps your reviewer, your team, and, most importantly: you.

Variable fonts for web developers

Posted Over 3 years ago by Michael Leimstädtner.

This card is mainly an explanation how variable fonts work in CSS, not necessarily a recommendation to actually use them...

Tailwind versus BEM

Posted Over 3 years ago by Henning Koch.
thoughtbot.com

The linked article compares two approaches for writing CSS: A component library (like BEM) Utility classes (like Tailwind)

CSS variables aka CSS Custom Properties

Posted Over 3 years ago by Dominik Schöler.

CSS variables are very different from preprocessor variables. While preprocessors use variables to compile a static piece of CSS, CSS...

Chrome Lighthouse

Posted Over 3 years ago.
developers.google.com

Chrome has a built-in utility to check performance and accessibility (and more) of your web app: Lighthouse.

BEM naming conventions

Posted Over 3 years ago by Henning Koch.

We structure our CSS using the BEM pattern. Our naming convention for blocks, elements and modifiers has evolved over the...

Vortrag: Content Security Policy: Eine Einführung

Posted Over 3 years ago by Tobias Kraze.

CSP hat zum Ziel einen Browser-seitigen Mechanismus zu schaffen um einige Angriffe auf Webseiten zu verhindern, hauptsächlich XSS...