Lloyd Kupchanko lloydk

Let's Flip For Color

Q: I want my text color to switch to black or white, depending on the background color the user chooses. Just where is that flip point?

Short Answer:

Calculate the luminance (Y) of the given color, and flip the text either black or white based on a pre-determined middle contrast figure. For a typical sRGB display, flip to white when Y < 0.36 (i.e. 36%)

Longer Answer

First I want to acknowledge the massive amount of misinformation on the internet on this particular subject. The fact this field is still a subject of active research and unsettled science adds to the fun. I came to this conclusion as the result of the last few years of research into a new contrast prediction method for readability.

The field of visual perception is dense and abstract, as well as developing, so it is common for misunderstandings to exist. For instance, HSV and HSL are not even close to perceptually accurate. For that you need a perceptually uniform model such as CIELAB or CIELUV or CIECAM02 etc

CSS is Complex. We can do better.

Posted on https://twitter.com/karlhorky/status/1082622697325166592

Ok, thread time.

CSS is unnecessarily complex. And we can do better.

There have been side conversations here and there, but I want to consolidate the information and opinions here. This will be a running thread, and I'll add to it as new things crop up.

I learned a little bit about building queries (even with Rails/ARel) of postgres JSONB columns in my side project that I wanted to share.

I have a model that represents a Japanese word:

{"id"=>4111,
 "type"=>"vocabulary",
 "characters"=>"洗う",
 "meanings"=>[{
    "meaning"=>"To Wash",

Fix absolutely positioned divs when people turn their phones sideways

The problem

In Safari, if you have a layout container that's absolutely positioned to take up, at a minimum, its whole container (which isn't unheard of in "appey" internet home page thingies) using CSS like this:

.absolutely

	# THIS LINUX SETUP SCRIPT HAS MORPHED INTO A WHOLE PROJECT: HTTPS://OMAKUB.ORG
	# PLEASE CHECKOUT THAT PROJECT INSTEAD OF THIS OUTDATED SETUP SCRIPT.
	#
	#

	# Libraries and infrastructure
	sudo apt update -y
	sudo apt install -y \
	docker.io docker-buildx \
	build-essential pkg-config autoconf bison rustc cargo clang \

	# ActiveJob natively captures constructor arguments in an `@arguments` instance variable
	# which is also exposed as an `arguments` property on each job instance.
	#
	# Calls to `perform_now` and `perform_later` both forward arguments to the constructor.
	#
	# For example, all of these invocation styles work.
	#
	# result = DoStuffJob.new("foobar").perform # sync
	# result = DoStuffJob.new.perform("foobar") # sync
	# result = DoStuffJob.perform_now("foobar") # sync

	// Copyright 2022 Google Inc. Use of this source code is governed by an
	// MIT-style license that can be found at https://opensource.org/licenses/MIT.

	import 'dart:typed_data';

	import 'package:rational/rational.dart';

	// Matrix values from https://www.w3.org/TR/css-color-4/#color-conversion-code.

	final d65 = chromaToXyz(Rational.parse('0.3127'), Rational.parse('0.3290'));

	import type {ReactiveController, ReactiveControllerHost} from 'lit';

	/**
	* A reactive controller that updates a host when slotted content changes and
	* provides helper methods for checking and getting assigned slot content.
	*/
	export class SlotController implements ReactiveController {
	private _host: ReactiveControllerHost & Element;
	private _slotNames?: ReadonlyArray<string>;


	# frozen_string_literal: true

	class Users::SessionsController < Devise::SessionsController
	# before_action :configure_sign_in_params, only: [:create]

	# GET /resource/sign_in
	# def new
	# super
	# end

	ruby '2.7.1'

	gem 'rails', github: 'rails/rails'
	gem 'tzinfo-data', '>= 1.2016.7' # Don't rely on OSX/Linux timezone data

	# Action Text
	gem 'actiontext', github: 'basecamp/actiontext', ref: 'okra'
	gem 'okra', github: 'basecamp/okra'

	# Drivers