Tanguy Krotoff tkrotoff

<svg xmlns="http://www.w3.org/2000/svg" />

flowchart TD
  format["What image format to use?"] --> source{"Analog or digital source?"}

  source -- "analog<br>(photo from a camera)" --> jpeg["JPEG lossy<br><br>(also AVIF, WebP, HEIF/HEIC, JPEG XL...)<br><br>Like MP3 format</span>"]
  source -- "digital<br>(using a software to draw the picture)" --> staticOrAnimated["Static or animated?"]

  staticOrAnimated -- "static" --> vectorOrRaster{"Can you make it scalable (vector based)?"}
  staticOrAnimated -- "animated" --> gif["GIF<br><br>(also APNG, AVIF, WebP, MNG, HEIF, video formats like MP4...)"]

What font to use? Web or system font?

Context and Problem Statement

Shipping system fonts to GitHub.com: https://markdotto.com/blog/github-system-fonts/
Implementing system fonts on Booking.com — A lesson learned: https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f
Web fonts: when you need them, when you don't: https://david-gilbertson.medium.com/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae
System Fonts vs. Web Fonts: Why Does The Difference Matter?: https://iloveseo.com/seo/system-fonts-vs-web-fonts-why-does-the-difference-matter/
Le guide Web fonts vs. System Fonts: https://www.linkedin.com/pulse/le-guide-ultime-de-laccessibilit%C3%A9-partie-2-web-fonts-vs-perrine-croix/
Modern Font Stacks: https://github.com/system-fonts/modern-font-stacks

Cube Editor SLX 2025 nightsky´n´ink

The Cube Editor is a very nice bike, unfortunately the Alfine 11 lower gear is not low enough for touring, let's fix that!

Bike web page: https://info.cube.eu/product?a=855400

Should URLs be translated?

What we are talking about

Let's say we have:

example.com/sign-up
example.com/sign-in
example.com/about-us
example.com/products/49LlMBmcE

Hybrid and flat bike pedals

Shimano pedals lineup chart

https://bike.shimano.com/technologies/details/pedal-lineup-chart.html

Shimano Deore XT PD‑T8000

JS is very nice when

Mobile and desktop UI are very different
- Easier to have 2 distinct HTML structure (cards vs table, burger menu vs horizontal menu) instead of having one and use media queries
To display/hide things
- Examples: a collapse, displaying more or less things depending on the screen width
  - Exception: if the hidden content needs to be indexed by search engines then use CSS 1 2

JS allows for:

As of 2025-12-30 (tested myself):

Mac 26.2, MacBook Pro M1 (laptop) with and without a mouse
- Chrome 143 in regular desktop mode, maxTouchPoints is 0
  - mobile mode using the DevTools, maxTouchPoints is 1
- Firefox 146 in regular desktop mode, maxTouchPoints is 0
  - mobile mode using the DevTools, maxTouchPoints is 1
- Safari 26 in regular desktop mode, maxTouchPoints is 0
Windows 11 24H2 x86 with a mouse (desktop computer)

	function decode(str: string) {
	try {
	return decodeURIComponent(str);
	} catch {
	return str;
	}
	}

	/**
	* Parses a `Cookie` HTTP header value or `document.cookie` into an object.

	import assert from 'node:assert/strict';

	/**
	* Parses a string containing environment variables and returns a map of key => value pairs.
	*
	* The string format is `KEY=VALUE` pairs separated by new lines;
	* it typically comes from UNIX command `printenv` or `env`.
	*/
	export function parseEnv(env: string) {
	const lines = env