Using the Oklch color space to generate an accessible color palette

Posted 12 months ago. Visible to the public. Linked content.

The linked content describes:

The different color space of Oklch and RGB/HSL (HDR colors)
The advantage of Oklch when you change a base color and your derived colors will keep the same assertions on contrast level

Warning

This feature landed in browsers at the end of 2022. According to our support policy this will become generally usable starting Dec 2024.

The oklch() functional notation expresses a given color in the Oklch color space. It has the same L axis as oklab(), but uses polar coordinates C (Chroma) and H (Hue).

Source: mdn web docs Show archive.org snapshot

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:

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...

Invoices: How to properly round and calculate totals

While it might seem trivial to implement an invoice that sums up items and shows net, gross and vat totals, it actually involves a lot of rules and caveats. It is very easy to create invoices where numbers don't add up and a few cents are missing....

Customize tokenization of the MySQL FULLTEXT parser

The way MySQL's FULLTEXT tokenizer splits text into word tokens might not always be what you need. E.g. it splits a word at period characters.

Since the tokenizer has near-zero configuration options (minimum word length and stopwords list), you n...

The JavaScript Object Model: A deep dive into prototypes and properties

Speaker today is Henning Koch, Head of Development at makandra.

This talk will be in German with English slides.

Introduction

As web developers we work with JavaScript every day, even when our backend code uses anothe...

Insert an ndash and other special characters using the Compose key on Linux

Although you can access many symbols using the AltGr key you may be missing some, like the en-dash (–) or em-dash (—). You can use a compose key for them instead...

How to: Upgrade CarrierWave to 3.x

While upgrading CarrierWave from version 0.11.x to 3.x, we encountered some very nasty fails. Below are the basic changes you need to perform and some behavior you may eventually run into when upgrading your application. This aims to save you some...

Inspect and Debug CSS Flexbox and Grid Layouts by using the Layouts Tab in Dev Tools

tl;dr

In Chrome DevTools in the Layouts tab you have handy options to debug CSS Flexbox and Grid. Including:

Display size and lines along with labels

Changing their attributes

Change how overlay is colored and fastl...