Relative Color Syntax

2025-11-28

Brand Primitive

:root {
  --spanish-sky-blue: #009ce1;
}

Tints

:root {
  /* blue */
  --color-blue: var(--spanish-sky-blue);

  --color-blue-dark-1: oklch(from var(--color-blue) calc(l - 0.1) c h);
  --color-blue-dark-2: oklch(from var(--color-blue) calc(l - 0.2) c h);

  --color-blue-light-1: oklch(from var(--color-blue) calc(l + 0.1) c h);
  --color-blue-light-2: oklch(from var(--color-blue) calc(l + 0.2) c h);
}

An Icon Component in Liquid

2025-11-27

When working with Shopify themes, it’s common to need a variety of icons throughout your site. Instead of hardcoding each icon individually, you can create a reusable Liquid component to streamline the process. Here’s how you can create a simple icon component in Liquid.

{%- comment -%} Simple icon snippet: use name and optional class {%- endcomment -%}
{%- assign file_name = name | append: '.svg' -%}
{%- assign svg_content = file_name | inline_asset_content -%}

{%- if svg_content != blank -%}
  <i class="henk-icon {{ class }}">
    {{ svg_content }}
  </i>
{%- else -%}
  <!-- Icon "{{ name }}" not found -->
{%- endif -%}

Overscroll Behavior

2025-11-27

On iOS devices, when you scroll to the top or bottom of a webpage, you might notice a “bounce” effect. This can be undesirable in certain web applications. To prevent this behavior, you can use the overscroll-behavior CSS property. Here’s a simple example to disable the bounce effect on the entire page:

html, body {
  overscroll-behavior: none;
}

React rabbit hole part 1

2025-10-07

I watched a short doc on React’s origins and revisited Sophie Alpert’s 2013 post about Khan Academy’s question editor — one of the sparks for React’s early adoption. I’ve always been a bit wary of React, so I wanted to see if I could find a case where it really shines. Following her example roughly was interesting but impossible to reproduce exactly, and it made me realize how specific her case was (MathJax rendering).

Obvious use cases are the ones Facebook solved for themselves: the timeline, messaging, Instagram. It’s a good reminder that React solves particular problems, and not every website with some interactivity actually needs it.

CSS color-contrast

2025-08-25

A useful article by Lea Verou on CSS color-contrast.

:root {
  --example-bg-color: pink;
}

.example {
  background-color: var(--example-bg-color);
  color: lightgrey;
  display: flex;
  place-content: center;
  padding: 2lh;

  .example__content {
    border: 1px solid #000;
    display: flex;
    flex-direction: column;
    gap: 1lh;

    > * {
      margin: 0;
      padding: 0;
    }
  }
}

@supports (color: contrast-color(white)) {
  .example {
    /* Set contrasting text color automatically */
    color: contrast-color(var(--example-bg-color));
  }
}

Note: if your browser does not support contrast-color(), the text will be lightgrey as defined in the first rule and black if your browser supports it.

CSS @function

2025-08-25

A useful article by Una Kravets on the upcoming CSS @function.

/* Return a semi-transparent value
Accepts color and opacity/alpha value */
@function --opacity(--color, --opacity) {
  result: rgb(from var(--color) r g b / var(--opacity));
}

P3 color

2025-08-25

Check on a P3 display to see the difference.

Japan red

The national flag of Japan is a rectangular white banner with a red circle at its center. The flag is officially called the Nisshōki (日章旗, ‘flag of the sun’) but is more commonly known in Japan as the Hinomaru (日の丸, ‘ball of the sun’).

When you look up the red of the Japanese flag online, the hex value you’ll often find is #BC002D. At first glance, it seems right—but on screen, it reads more like a deep burgundy than the bright, iconic red of the flag. Clearly, this isn’t quite what was intended.

Initially, the color was defined using the Munsell color system as 5R 4/12.

Later, in 2008, the Ministry of Defense updated the specifications to:

Acrylic fiber: 5.7R 3.7/15.5

Nylon: 6.2R 4/15.2

These values describe a red with a slightly orange hue and high chroma, intended to be vibrant and noticeable in various lighting conditions .

source: https://en.wikipedia.org/wiki/Flag_of_Japan

Also CMYK 0-100-90-0 is mentioned as value. Which roughly converts to #FF001A. Much more of a bright red.

Also check out this page showing the colours of a rainbow both in hex and oklch.

Graphic apps

2025-07-13

• Kite - motion graphics
• graphite
• pixelmator
• Keyshape
• Rive - web based
• Natron
• Apple Motion
• Apple Final Cut Pro
• Davinci Resolve
• Blender
• Cartoon Animator
• principle
• moho

Photo Software mac os

2025-06-26

Oh aperture, where art thou?

• Capture One Pro - great but can’t justify the subscription cost.
• Adobe Crap - Allergic to Bullies.
• Nitro - UI / work flow sucks
• Luminar Neo - UI / work flow sucks
• DXO - No Fuji X-trans
• Darktable - horrible UI
• Photomator - bought by Apple
• Dehancer plugin
• darkroom - only apple photos?
• RawTherapee - Open Source

Show and hide nav on scroll

2025-06-09

<script is:inline data-astro-rerun>
  (() => {
    const nav = document.querySelector(".Header");
    if (!nav) return;

    let lastScrollY = window.scrollY;
    let ticking = false;

    function onScroll() {
      const currentScrollY = window.scrollY;

      if (currentScrollY > lastScrollY) {
          nav.classList.add("hide");
      } else {
          nav.classList.remove("hide");
      }

      lastScrollY = currentScrollY;
      ticking = false;
    }

    const scrollHandler = () => {
      if (!ticking) {
          window.requestAnimationFrame(onScroll);
          ticking = true;
      }
    };

    window.addEventListener("scroll", scrollHandler);

    // 💡 Clean up on navigation
    document.addEventListener("astro:before-swap", () => {
        window.removeEventListener("scroll", scrollHandler);
    });
  })();
</script>

CSS

nav {
  transition: transform 0.3s ease;
}
nav.hide {
  transform: translateY(-100%);
}