The L*u*v* and LChuv colour spaces

Posted by Michał ‘mina86’ Nazarewicz on 9th of May 2021

I’ve written about L*a*b* so it’s only fair that I’ll also describe its twin sister: the L*u*v* colour space (a.k.a. CIELUV). The two share a lot in common. For example, they use the same luminance value, base their chromaticity on opponent process theory and each of them has a corresponding cylindrical LCh coordinate system. Yet, despite those similarities — or perhaps because of them — the CIELUV colour space is often overlooked.

Panther Chameleon
Fig. 1. Picture of a chameleon with its decomposition into L*, u* and v* channels. Photo by Dr Pratt Datta.

Even though L*a*b* seems to be getting all the limelight, L*u*v* model has its advantages. Before we start comparing the two colour spaces, let’s first go through the conversion formulæ.

Names of operands of arithmetic operations

Posted by Michał ‘mina86’ Nazarewicz on 2nd of May 2021

Every now and again I need a specific name for operands or results of various arithmetic operations. It usually takes me embarrassingly long time to look that information up. To save time in the future, here’s the list: $$ \begin{align} \left. \begin{matrix} \text{augend} + \text{addend†} \\ \text{summand} + \text{summand} \\ \text{term} + \text{term} \end{matrix} \right\} & = \text{sum} \\[.5em] \left. \begin{matrix} \text{minuend} - \text{subtrahend} \\ \text{term} - \text{term} \end{matrix} \right\} & = \text{difference} \\[.5em] \left. \begin{matrix} \text{multiplier} × \text{multiplicand} \\ \text{factor} × \text{factor} \\ \end{matrix} \right\} & = \text{product} \\[.5em] \left. \begin{matrix} \text{dividend} ÷ \text{divisor} \\ {\text{numerator}\over\text{denominator}} \end{matrix} \right\} & = \left\{ \begin{matrix} \text{ratio} \\ \text{fraction} \\ \text{quotient‡} + \text{remainder} \end{matrix} \right. \\[.5em] \text{base}^{\text{exponent}} & = \text{power} \\[.5em] \sqrt[\text{degree}]{\text{radicand}} & = \text{root} \\[.5em] \log_\text{base}(\text{anti-logarithm}) & = \text{logarithm} \end{align} $$

† Occasionally used to mean any operand of addition.
‡ Occasionally used to mean the fraction itself rather than just the integer part.

List in big part thanks to Wikipedia.

Most vexing parse

Posted by Michał ‘mina86’ Nazarewicz on 25th of April 2021

Here’s a puzzle: What does the following C++ code output:

#include <cstdio>
#include <string>

struct Foo {
	Foo(unsigned n = 1) {
		std::printf("Hell%s,", std::string(n, 'o').c_str());
	}
	~Foo() {
		std::printf("%s", " world");
	}
};

static constexpr double pi = 3.141592653589793238;

int main(void) {
	Foo foo();
	Foo bar(unsigned(pi));
}

Will the real ARG_MAX please stand up? Part 2

Posted by Michał ‘mina86’ Nazarewicz on 18th of April 2021

In part one we’ve looked at the ARG_MAX parameter on Linux-based systems. We’ve established experimentally how it affects arguments passed programs and what influences the value. This time, we’ll look directly at the source to verify our findings and see how the limit looks from the point of view of system libraries and kernel itself.

Pro tip: Start your passwords with /!

Posted by Michał ‘mina86’ Nazarewicz on 11th of April 2021

Anyone who uses a screen locker surely can recall a situation where they approached their computer and started typing their password to unlock it even though it was never locked. Even if the machine is configured to lock automatically after a period of inactivity, there may be situations when power saving blanks the monitor even before the automatic locking happens.

If one’s lucky, they realise their mistake in time before hitting Return in a chat window. It’s not uncommon however that one ends with the password blasted into ether over IRC or Google Docs; lazy people might ignore the secret getting saved in their shell history file but even that should facilitate, often annoying, password change.

What if I told you there’s a way to avoid those problems? A one simple trick which will eliminated at least some forms of possible leaks. Simply prefix all your passwords with /! (slash followed by an exclamation mark).

Fun fact: ∞ is even

Posted by Michał ‘mina86’ Nazarewicz on 1st of April 2021

Some people find it surprising that zero is an even number. Turns out it’s such a controversial point that Wikipedia’s article on the subject has nearly 5000 words and 75 citations. That’s ten times as long as an entry on toast sandwich which is clearly a more important topic. On the other hand perhaps the confusion is to be expected considering that for centuries zero has been judged an odd digit (if a digit at all). Regardless, zero being even is not news and this is not what this post is about.

Rather, I wish to share another bit of knowledge. As it turns out, infinity is even. Who would have thought! As the working group for the C programming language (SC22 WC14) explains in C99 rationale, ‘all large positive floating-point values are even integers’.

There you go. Next time your Maths teacher asks what’s -42 to infinite power go ahead and exclaim with conviction that it’s plus infinity! The teacher will fail you of course (and rightfully so) unless you’re so lucky that they turn out to secretly be an expert on IEEE 754 standard.

Dark theme with media queries, CSS and JavaScript

Posted by Michał ‘mina86’ Nazarewicz on 28th of March 2021

Split view of Tower Bridge during the day and at night.
(photo by Franck Matellini)

No, your eyes are not deceiving you. This website has gone through a redesign and in the process gained a dark mode. Thanks to media queries, the darkness should commence automatically according to reader’s system preferences (as reported by the browsers). You can also customise this website in settings panel in top right (or bottom right).

What are media queries? And how to use them to adjust website’s appearance based on user preferences? I’m glad you’ve asked, because I’m about to describe the CSS and JavaScript magic that enables this feature.

Media queries overview

body { font-family: sans-serif; }
@media print {
	body { font-family: serif; }
}

Media queries grew from the @media rule present since the inception of CSS. At first it provided a way to use different styles depending on a device used to view the page. Most commonly used media types where screen and print as seen in the example on the right. Over time the concept evolved into general media queries which allow checking other aspects of the user agent such as display size or browser settings. A simple stylesheet respecting reader’s preferences might be as simple as:

body {
	/* Black-on-white by default */
	background: #fff;
	color: #000;
}
@media (prefers-color-scheme: dark) {
	/* White-on-black if user prefers dark colour scheme */
	body {
		background: #000;
		color: #fff;
	}
}

That’s enough to get us started but not all browsers support that feature or provide a way for the user to specify desired mode. For example, without a desktop environment Chrome will report light theme preference and Firefox users need to go deep into the bowels of about:config to change ui.systemUsesDarkTheme flag if they are fond of darkness. To accommodate such situations, it’s desirable to provide a JavaScript toggle which defaults to option specified in system settings.

Fortunately, media can be queried through JavaScript and herein I’ll describe how it’s done and how to marry theme switching with browser preferences detection. TL;DR version is to grab a demonstration HTML file which includes a fully working CSS and JavaScript code that can be used to switch themes on a website.

sRGB↔L*a*b*↔LChab conversions

Posted by Michał ‘mina86’ Nazarewicz on 21st of March 2021

After writing about conversion between sRGB and XYZ colour spaces I’ve been asked about a related process: moving between sRGB and CIELAB (perhaps better known as L*a*b*). As this may be of interest to others, I’ve decided to go ahead and make an article out of it. I’ll also touch on CIELChab which is a closely related colour representation.

Panther Chameleon
Picture of a chameleon with its decomposition into L*, a* and b* channels. Photo by Dr Pratt Datta.

The L*a*b* colour space was intended to be perceptually uniform. While it’s not truly uniform it’s nonetheless useful and widely used in the industry. For example, it’s the basis of the ΔE*00 colour difference metric. LChab aim to make L*a*b* easier to interpret by replacing a* and b* axes with more intuitive chroma and hue parameters.

Importantly, the conversion between sRGB and L*a*b* goes through XYZ colour space. As such, the full process has multiple steps with a round trip conversion being: sRGB​→​XYZ​→​L*a*b*​→​XYZ​→​sRGB. Because of that structure I will describe each of the steps separately.

Will the real ARG_MAX please stand up? Part 1

Posted by Michał ‘mina86’ Nazarewicz on 14th of March 2021

arg max is a set of values from function’s domain at which said function reaches its maxima. That’s certainly an arg max but spelled without an underscore thus not the one we are searching for. No, this article is regarding the ARG_MAX that limits the length of arguments to an executable.

Or in other words, why you are getting:

bash: command: Argument list too long

HTML: No, you don’t need to escape that

Posted by Michał ‘mina86’ Nazarewicz on 7th of March 2021

This website being my personal project allows me to experiment and do things I’d never do in professional settings. Most notably, I’m rather found of trying everything I can to reduce the size of the page. This goes beyond mere minification and eventually lead me to wonder if all those characters I’ve been escaping in HTML code really need such treatment.

Libraries offering HTML support will typically provide a function to indiscriminately replace all ampersands, quote characters, less-than and greater-then signs with their corresponding HTML-safe representation. This allows the result to be used in any context in the document and is a good choice for user-input validation. It’s a different matter when it comes to squeezing every last byte. Herein I will explore just which characters and when exactly really need to be escaped in an HTML document.