Defensive CSS

Posted Over 2 years ago. Visible to the public. Linked content.

Flexbox wrapping
Spacing
Long content
Prevent an image from being stretched or compressed
Lock scroll chaining
CSS variable fallback
Using fixed width or height
- The fixed height
- The fixed width
Forgetting background-repeat
Vertical media queries
Using justify-content: space-between
Text over images
Be careful with fixed values in a CSS grid
Show a scrollbar only when it's needed
Scrollbar gutter
Minimum content size in CSS flexbox
Minimum content size in CSS grid
Auto fit vs auto fill
Image maximum width
position: sticky css grid
Grouping selectors

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

Prevents you from data breaches and liability risks
Upgrade at your own pace
Works with modern Rubies

Related cards:

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

Summary

We want to move away from jQuery in future projects
Motivations are performance, bundle size and general trends for the web platform.
The native DOM API is much nicer than it used to be, and we can polyfill the missing pieces
Un...

Differences between transactions and locking

Web applications can be used by multiple users at the same time. A typical application server like Passenger has multiple worker processes for a single app. In a distributed deployment setup like we use at makandra you w...

How to create giant memory leaks in AngularJS (and other client-side JavaScript)

This guide shows how to create an AngularJS application that consumes more and more memory until, eventually, the browser process crashes on your users.

Although this guide has been written for Angular 1 originally, most of the advice is relevant...

Using feature flags to stabilize flaky E2E tests

A flaky test is a test that is often green, but sometimes red. It may only fail on some PCs, or only when the entire test suite is run.

There are many causes for flaky...

Always convert and strip user-provided images to sRGB

Debugging image color profiles is hard. You can't trust your eyes in this matter, as the image rendering depends on multiple factors. At least the operation system, browser or image viewer software and monitor influence the resulting image colors ...

Use -webkit-line-clamp to natively truncate long (multi-line) texts with an ellipsis

Note: You won't need this for single lines of text. In this case it is better to just use the text-overflow property: Use CSS "text-overflow" to truncate long texts

You can use -webkit-line-clamp in your CSS/SA...

Video transcoding: Web and native playback overview (April 2020)

Intro

Embedding videos on a website is very easy, add a <video> tag to your source code and it just works. Most of the time.

The thing is: Both the **operating system and Browser of your client must support the container ...

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

Scrolling overflowing elements with JavaScript

HTML elements with overflow-y: auto or overflow-y: scroll will get a scrollbar when their content is higher than their own height.

When you scroll an element , the element's scrollTop prope...

Preventing users from uploading malicious content

When you allow file uploads in your app, a user might upload content that hurts other users.

Our primary concern here is users uploading .html or .svg files that can run JavaScript and [possibly hijack another user's session](#section-att...

List of handy Ruby scripts to transcode different file types (often by using GPT)

It's 2024 and we have tools like ffmpeg, imagemagick and GPT readily available. With them, it's easy to convert texts, images, audio and video clips into each other.

For the everyday use without any parameter tweaking I'm using a collection of ti...

Posted by Emanuel to makandra dev (2021-12-13 07:19)