Skip to content

Instantly share code, notes, and snippets.

View tkrotoff's full-sized avatar

Tanguy Krotoff tkrotoff

141 followers · 47 following
View GitHub Profile
@tkrotoff
tkrotoff / JSvsCSS.md
Created October 16, 2025 15:10
JS vs CSS

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:

@tkrotoff
tkrotoff / HybridBikePedals.md
Last active July 26, 2025 15:49
Hybrid bike pedals
@tkrotoff
tkrotoff / translate-URLs.md
Last active July 18, 2025 09:47
Should URLs be translated?

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
@tkrotoff
tkrotoff / CubeEditorSLX2025.md
Last active September 22, 2025 09:25
Cube Editor SLX 2025 lower gear range

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

Cube Editor SLX 2025 nightsky´n´ink

@tkrotoff
tkrotoff / #parseEnv.ts
Last active April 8, 2025 14:55
Parse an env string (printenv output)
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
@tkrotoff
tkrotoff / font.md
Last active October 10, 2025 13:41
What font to use? Web or system font?

What font to use? Web or system font?

Context and Problem Statement

@tkrotoff
tkrotoff / ImageFormat.md
Last active March 12, 2025 00:18
What image format to use? 
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...)"]
@tkrotoff
tkrotoff / #parseCookie.ts
Created January 23, 2025 10:42
Parses a `Cookie` HTTP header value or `document.cookie` into an object
function decode(str: string) {
try {
return decodeURIComponent(str);
} catch {
return str;
}
}
/**
* Parses a `Cookie` HTTP header value or `document.cookie` into an object.
@tkrotoff
tkrotoff / MinimalSVG.md
Last active March 11, 2025 23:28
Minimal SVG structure 
<svg xmlns="http://www.w3.org/2000/svg" />
@tkrotoff
tkrotoff / #mockWindowLocation.ts
Last active March 21, 2025 20:20
Jest/Vitest mocks for JSDOM window.location & window.history
/* eslint-disable unicorn/no-null */
/*
* Resetting window.location between tests is unfortunately a hard topic with JSDOM.
*
* https://gist.github.com/tkrotoff/52f4a29e919445d6e97f9a9e44ada449
*
* FIXME JSDOM leaves the history in place after every test, so the history will be dirty.
* Also its implementations for window.location and window.history are lacking.
* - https://github.com/jsdom/jsdom/blob/22.1.0/lib/jsdom/living/window/Location-impl.js