Oliver Roick

Kelpwatch.org extends to South Africa and Namibia

Oliver Roick — Wed, 30 Apr 2025 10:34:00 +0000

Kelpwatch.org expands to the South Africa and Namibia, showing kelp canopy coverage along coastline over the past 40+ years, derived from continuous Landsat data.

The maps create a continuous historical record that allows researchers and managers to track long-term patterns of kelp growth, loss, and recovery. “Mapping the canopy-forming kelp forests of southern Africa is an exciting opportunity to better understand how environmental conditions influence these vital systems,” says WHOI’s Dr. Henry Houskeeper, a lead scientist for the project. “Testing kelp forest responses to changing water clarity, upwelling intensity, and ocean circulation across the region will provide valuable insights into how kelp forests respond to shifting conditions.”

I only played a small role in this project so far, processing the data for the expansion.

Relative Absolute Positioning of an Element in CSS

Oliver Roick — Thu, 20 Mar 2025 01:57:00 +0000

The post title is a mouthful, but here it goes: It is possible to absolute-position an element relative to the position of the preceding sibling element. You’ll need this for Combobox implementations to place a list of options underneath an input element.

If the sibling element preceding the absolutely-positioned element is relatively positioned and the absolutely-positioned element has no top property, then the absolutely-positioned element will be placed just underneath the preceding sibling element.

<style>
  .parent {
    position: relative;
  }
  .sibling {
    position: relative;
  }
  .absolute-position {
    position: absolute;
  }
</style>

<div class="parent">
  <input type="text" class="sibling" />
  <ul class="absolute-position">
    ...
  </ul>
</div>

I think of it this way: position: absolute removes an element from the normal document flow on the page. When the element has no top property it assumes the same position as if it were part of the normal document flow.

Setting Colours in Xterm.js

Oliver Roick — Wed, 20 Nov 2024 00:01:00 +0000

Xterm.js is a JavaScript library that can be used to build terminal-like user interfaces. We use it in jupyterhub-fancy-profiles to display the output from the custom-image build process.

Xterm.js comes with a reasonable set of predefined colours; red for errors, yellow for warnings, and so on. At the same time the colours are static, and when used with a dark background, the contrast between the specified colour and the background is too low, thus rendering the text hard to read.

Overwriting the default colours in Xterm.js is possible, but it’s not straightforward, especially if you have a web-development background and are used to specifying colours in hex or RGB.

Xterm.js, like all terminal implementations, uses ANSI escape codes to alter the colour of a line in terminal. The colours in the Xterm.js theme need to be specified in the same way, using the pattern

\x1b[38;2;{red};{green};{blue}m

Breaking down the sequence:

\x1b[ is the Control Sequence Introducer, or CSI; it signals that the following sequence should be interpreted as an ANSI escape code,
38 signals that we want to change the text colour,
2 means we want to provide a 24-bit colour, and
{red}, {green}, {blue} are the values in each individual channel.

Consequently, the ANSI equivalent to color: rgb(248, 113, 133) in CSS is \x1b[38;2;248;113;133m.

To specify custom colours for a Xterm.js instances we alter the theme:

const term = new Terminal({
  theme: {
    red: "\x1b[38;2;248;113;133m",
    green: "\x1b[38;2;134;239;172m",
    yellow: "\x1b[38;2;253;224;71m",
    blue: "\x1b[38;2;147;197;253m",
    magenta: "\x1b[38;2;249;168;212m",
    cyan: "\x1b[38;2;103;232;249m",
  }
});