Javel's notes

TIL; customize checkbox or radio buttons without additional markup

Its possible to fully customize HTML input checkboxes and radio buttons using appearance and some pseudo element classes.

Sources

* * *

TIL; count number of files that matches a given pattern

$ find ./apps/frontend-v2/src -name "i18n.ts" -printf '.' | wc -m
* * *

TIL; alpha channel on hex colors

The alpha channel of an hex color can be controlled using a base 16 value at the end of the hex code of a regular color. The resulting hex code will be a string of 8 characters.

  background-color: #0080FF80;

Sources

* * *

Functional programming fundamentals memento

Currying

A function of arity n can be expressed as a sequence of n unary function.

// this:
const curriedSum = (a: number) => (b: number): number => a + b

// is the curried version of this
const sum = (a: number, b: number): number => a + b

Partial application

The main point of currying functions is to achieve partial application.

// this
const inc = curriedSum(1)

// returns a new unary function (b: number) => number
const twelve: number = inc(11)

Composition

const set: number[] = [1, 2, 3]

// this:
set.map(n => inc(n))

// is the same as this:
set.map(inc)

Given dec is a unary function and multiply a curried function of arity 2, we may compose those functions together to achieve trivial operations.

// this resolves as ((n + 1) * 2) - 1
const calculate = (n: number): number => dec(multiply(2)(inc(n)))

// and can be rewritten using a left to right composition utility
const calculateR = (n: number): number => o(dec, multiply(2), inc)(n)

// which is the same as
const calculateR = o(dec, multiply(2), inc)

// which for all n, the following is a tautology
calculate(n) === calculateR(n)

Sources

* * *

TIL; check validity & report validity

No need to call form.checkValidity() after a form has been submitted. That verification has already been performed on submission.

In a React component, the function passed to onSubmit attribute is only executed when the form is valid. Errors are shown to the user as a tooltip otherwise.

That being said, it's still possible to use element.reportValidity() to force the browser to perform this verification, without submitting the form.

Sources

* * *

TIL; PHP nullable and default parameters

function test(int $a, bool $b) {}

test(1, false) // ok
test(1)        // ArgumentCountError
test(1, null)  // TypeError Argument #2 ($b) must be of type bool, null given

a & b are both required.

function test(int $a, ?bool $b) {}

test(1, false) // ok
test(1)        // ArgumentCountError
test(1, null)  // ok

b is nullable but always required.

function test(int $a, bool $b = false) {}

test(1, false) // ok
test(1)        // ok, $b = false
test(1, null)  // TypeError Argument #2 ($b) must be of type bool, null given

b is optional, but not nullable (default value will be false)

function test(int $a, ?bool $b = false) {}

test(1, false) // ok
test(1)        // ok, $b = false
test(1, null)  // ok

b is optional and nullable. When not specified on function call, b will be false by default. It's value may also be null.

© Joris Langlois 2023