Dans l'article "Dependency management fatigue, or why I forever ditched React for Go+HTMX+Templ" (from), #JaiDécouvert :

• templ, qui permet de générer du code HTML SSR avec Golang en utilisant une syntax proche de JSX ;
• Datastar :

Datastar brings the functionality provided by libraries like Alpine.js (frontend reactivity) and htmx (backend reactivity) together, into one cohesive solution.

from

Cela me donne envie d'essayer ces technologies 🙂.

Suite à quelques cherches, j'ai décidé d'utiliser "commander" plutôt que "yargs" dans sklein-pkm-engine : lien vers le commit.

Je trouve cette librairie minimaliste :

program
  .option('--dry', 'Run in dry mode')
  .parse();

console.log(program.opts());

Résultat de "commander vs inquirer vs meow vs yargs" :

Je viens de mettre en œuvre better-sqlite3-helper ici dans le projet gibbon-replay, afin d'utiliser son système de migration de schemas.

L'expérience développeur (DX) est bonne, j'ai apprécié les fonctions helpers query, queryFirstRow, queryFirstCell, insert, etc.

Je souhaite essayer de créer un #playground qui intègre UnoCSS et qui permet de builder un fichier HTML qui contient toutes les dépendances.

Suite de 2024-09-17_1707.

Mon but est toujours de convertir une donnée datetime UTC vers la timezone du navigateur.

L'équivalent du code :

return Temporal.PlainDateTime
	.from(value)
	.toZonedDateTime('UTC')
	.withTimeZone(
		Intl.DateTimeFormat().resolvedOptions().timeZone
	)
	.toString({
		offset: 'never',
		timeZoneName: 'never'
	})
	.replace('T', ' ');

avec date-fns est :

import { format } from 'date-fns';
import { fromZonedTime, toZonedTime } from 'date-fns-tz';

return format(
	toZonedTime(
		fromZonedTime(value, "UTC"),
		Intl.DateTimeFormat().resolvedOptions().timeZone
	),
	"yyyy-mm-dd HH:MM:SS"
);

Ce qui m'évite de devoir utiliser .replace('T', ' ').

Par contre, j'aurais bien aimé pouvoir utiliser une syntax du style :

return (
	fromZonedTime(value, "UTC")
	.toZonedTime(Intl.DateTimeFormat().resolvedOptions().timeZone)
	.format("yyyy-mm-dd HH:MM:SS")
);

ce qui ne semble pas possible avec dns-fns.

Luxon semble proposer une syntax plus agréable :

import { DateTime } from 'luxon';

return DateTime
  .fromISO(value, { zone: 'UTC' })
  .setZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
  .toFormat('yyyy-MM-dd HH:mm:ss');

Ici, dans le projet gibbon-replay, j'ai utilisé la librairie Temporal.

import { Temporal } from 'temporal-polyfill';

return Temporal.PlainDateTime
	.from(value)
	.toZonedDateTime('UTC')
	.withTimeZone(
		Intl.DateTimeFormat().resolvedOptions().timeZone
	)
	.toString({
		offset: 'never',
		timeZoneName: 'never'
	})
	.replace('T', ' ');

Le but est de convertir une donnée datetime UTC vers la timezone du navigateur.

Cependant, j'ai été déçu de constater qu'il n'existe pas de fonction de formatage intégrée similaire à celle de date-fns pour formater une date/heure.

Je trouve dommage de devoir utiliser .replace('T', ' '); pour supprimer le caractère T dans la date formatée.

Dans la branche gibbon-replay-js du projet Idée d'un outil de session recoding web minimaliste basé sur rrweb, j'ai essayé sans succès d'extraire du code dans un package Javascript.

Pour le moment l'import suivant ne fonctionne pas :

import gibbonReplayJs from 'gibbon-replay-js';

Quand je lance pnpm run build, j'ai l'erreur suivante :

$ pnpm run build
...
x Build failed in 336ms
error during build:
src/routes/(record)/+layout.svelte (2:11): "default" is not exported by "packages/gibbon-replay-js/dist/index.js", imported by "src/routes/(record)/+layout.svelte".
file: /home/stephane/git/github.com/stephane-klein/gibbon-replay-poc/src/routes/(record)/+layout.svelte:2:11

1: <script>
2:     import gibbonReplayJs from 'gibbon-replay-js';

Et quand je lance pnpm run dev, j'ai l'erreur suivante :

$ pnpm run dev

...

11:21:21 [vite] Error when evaluating SSR module /packages/gibbon-replay-js/dist/index.js:
|- ReferenceError: exports is not defined
    at eval (/home/stephane/git/github.com/stephane-klein/gibbon-replay-poc/packages/gibbon-replay-js/dist/index.js:5:23)
    at instantiateModule (file:///home/stephane/git/github.com/stephane-klein/gibbon-replay-poc/node_modules/.pnpm/vite@5.4.3/node_modules/vite/dist/node/chunks/dep-BaOMuo4I.js:52904:11)

11:21:21 [vite] Error when evaluating SSR module /src/routes/(record)/+layout.svelte:
|- ReferenceError: exports is not defined
    at eval (/home/stephane/git/github.com/stephane-klein/gibbon-replay-poc/packages/gibbon-replay-js/dist/index.js:5:23)
    at instantiateModule (file:///home/stephane/git/github.com/stephane-klein/gibbon-replay-poc/node_modules/.pnpm/vite@5.4.3/node_modules/vite/dist/node/chunks/dep-BaOMuo4I.js:52904:11)

Suite à cette frustration, j'ai envie de créer un projet, sans doute nommé javascript-package-playground dans lequel je souhaite étudier les sujets suivants :

• mise en place d'une librairie /packages/lib1/ qui contient une librairie javascript, qui peut être importé avec la méthode ECMAScript Modules ;
• mise en place d'une app NodeJS dans /services/app1_nodejs/ qui utilise lib1 ;
• mise en place d'une app SvelteKit dans /services/app2_sveltekit/ qui utilise lib1 dans un fichier coté server et dans une page web coté browser ;
• mise en place d'une librairie /packages/lib2 qui utilise lib1

Je souhaite décliner ces 2 libs et 2 apps sous plusieurs déclinaisons d'implémentation :

• avec le build basé sur tsc
• avec le build basé sur esbuild
• avec le build basé sur Babel (Javascript)
• et sans build

Et le tout encore dans deux déclinaisons : Javascript et TypeScript.

Je ne souhaite pas supporter CommonJS qui est sur le déclin, remplacé par ECMAScript Modules.

Dans ce playground, je souhaite aussi me perfectionner dans l'usage de pnpm link et pnpm workspace.

#JeMeDemande si ces connaissances sont totalement maitrisées et évidentes chez mes amis développeurs Javascript 🤔 et s'ils les considèrent comme "basiques".

#JaiDécouvert isbot.

Detect bots/crawlers/spiders using the user agent string

#JaiDécouvert Sobek (from) qui a maintenant utilisé par Grafana k6.

Alexandre m'a partagé JS Dates Are About to Be Fixed

Many people think that by working with UTC or communicating dates in ISO format, they are safe; however, this is not correct, as information is still lost.

Oui ! J'ai souvent fait l'erreur !

La librairie : Temporal

Commande que j'oublie toujours pour éviter que npm ou pnpm ajoute ^ devant le numéro de version des packages installés :

$ pnpm config set save-exact true

Qui ajoute ceci au fichier .npmrc : `

$ cat .npmrc
engine-strict=true

#JaiDécouvert la #library classix un équivalent à clsx mais :

String expressions have a few benefits over objects:

• A faster typing experience
• A more intuitive syntax (conditions first)
• else support through ternary operators

What's more, by leveraging them, classix provides:

• A simpler and consistent API
• A smaller library size
• Better performance

-- from

Après avoir vu cela, j'ai creusé un peu le sujet et #JaiDécouvert que clsx a sorti une nouvelle release après la création de classix : https://github.com/lukeed/clsx/releases/tag/v2.1.0

Add new clsx/lite submodule for string-only usage: 1a49142

This is a 140b version of clsx that is ideal for Tailwind and/or React contexts, which typically follow this clsx usage pattern.

clsx('foo bar', props.maybe && 'conditional classes', props.className);

Qui, d'après ce que je comprends, reprend en partie l'implémentation de classix.

Afin d'éviter un effet de balkanisation, je vais utiliser clsx.

Voici un extrait de l'article Turbo 8 is dropping TypeScript de David Heinemeier Hansson (DHH de Basecamp) :

This isn't a plea to convert anyone of anything, though. As I discussed in Programming types and mindsets, very few programmers are typically interested in having their opinion on typing changed. Most programmers find themselves drawn strongly to typing or not quite early in their career, and then spend the rest of it rationalizing The Correct Choice to themselves and others.

Je trouve ce point de vue intéressant.

Voir aussi : TypeScript

#JaiLu

Rich Harris explains this clearly. JSDoc for writing a lib. TypeScript for writing an app. (from)

Ce conseil entre en opposition avec ce que j'ai écrit en octobre 2023 :

Si je dois coder et publier une librairie sur npm alors, je choisis TypeScript.
Quand je dis librairie, je parle de librairie qui contient des classes, des fonctions ou des composants importés par d'autres projets.

Pourquoi est-ce que je choisis d'utiliser TypeScript pour les librairies ?

• Je permets aux développeurs qui utilisent TypeScript dans leur projet, de pouvoir bénéficier de la documentation, l'autocomplétion, la détection des erreurs… de la librairie que j'aurais mise à disposition ;
• Je n'ai pas vérifié, mais je pense que le typage de TypeScript permet à des outils d'auto générer une grande partie de la documentation d'une librairie.

Ce conseil entre aussi en opposition avec ce second élément que j'ai écrit en octobre 2023 :

Si je dois coder une application web, alors pour le moment, je choisis JavaScript.
Le code implémenté dans une application web, n'est généralement pas utilisé par des utilisateurs "externes". Par conséquent, je ne trouve pas très important de mettre à disposition une documentation aux autres développeurs. Je pense qu'à petite taille, l'effort ne vaut pas la peine. Ma réponse est peut-être différente si 10, 20… développeurs contribuent à la même base code 🤔.

• Généralement, le code d'une application web est plutôt simple, beaucoup de CRUD et peu de librairie complexe.
• Pour le moment, je pense que l'effort d'ajouter le boilerplate code de typage TypeScript (importer les types, d'ajouter le typage dans le code) ne sera pas compensé par les fonctionnalités de détection d'erreurs , d'autocomplétions et de refactoring que permet TypeScript.

Je pense qu'il serait bon que je revoie ma doctrine d'artisan développeur sur ce sujet.

Dans la page suivante Elkjs Tree – Svelte Flow #JaiDécouvert la librarie Javascript elkjs :

ELK's layout algorithms for JavaScript

Les deux fois où j'ai essayé d'utiliser Jupyter pour réaliser, par exemple, une calculatrice financière, j'ai fini par constater que je ne trouve pas cet outil pratique. Après quelques heures, je retourne soit à un script Python classique, soit à la création d'une page web basée sur HTML et JavaScript, qui me donne bien plus de flexibilité que Jupyter.

Il est possible que ce soit parce que je connais mal Jupyter, mais j'y ai tout de même consacré plus de deux heures hier soir, explorant notamment les Jupyter Widgets (ipywidgets).

Voici ma dernière itération du Projet -1 "CodeMirror, autocomplétion, Svelte".

Code source https://github.com/stephane-klein/svelte-codemirror-autocomplete-poc

#pensée : je travaille depuis plusieurs jours sur Projet -1 "CodeMirror, autocomplétion, Svelte" et je fais le constat que j'ai énormément de difficultés à comprendre et à utiliser la librairie #codemirror .

Bien que la documentation contienne déjà un certain nombre d'exemples, je constate que j'en ai besoin de beaucoup plus.

La documentation contient des exemples, mais la librairie est vaste et j'ai besoin de beaucoup plus d'exemples !

Comme je ne trouve pas mes réponses dans les exemples, je passe beaucoup de temps à :

• chercher dans le forum https://discuss.codemirror.net/
• chercher dans le code source https://github.com/codemirror/
• chercher dans les issues, par exemple https://github.com/search?q=org%3Acodemirror+bracket&type=issues
• à chercher dans le moteur de recherche global de GitHub https://github.com/search?q=codemirror+bracket&type=code
• à poser des questions à ChatGPT mais il me donne des réponses qui ne fonctionnent généralement pas

#JeMeDemande si je dois essayer de passer du temps à lire et comprendre le code source de #codemirror 🤔.
Mais, je sais qu'il m'est difficile de comprendre et de me faire une carte mentale d'une librairie de cette taille 🤔.

#JeMeDemande si mes amis développeurs arriveraient plus facilement que moi à comprendre le code source de #codemirror 🤔.

#JeMeDemande si le code de SilverBullet.mb pourrait m'inspirer dans mon travail sur Projet -1 "CodeMirror, autocomplétion, Svelte" 🤔.

J'ai l'impression que le code qui m'intéresse se trouve vers ici.

Je pense que CompletionTooltip est la classe qui est responsable de l'affichage du "completion picker".

09:56 : J'ai réussi à afficher un "completion picker" minimaliste :

10:02 : Prochaines itérations :

• [ ] Essayer d'implémenter le chargement de la liste d'items de suggestion de manière dynamique. Je souhaite obtenir cette liste via une requête GET http, sur l'url /get-suggestions/. Cette fonctionnalité est souvent nommée « remote data fetch » (exemple ici).
• [ ] Essayer d'implémenter un chargement dynamique d'items de manière progressif. Au lieu de charger toutes la listes des items, l'objectif et de les charger au fur et à mesure, par exemple en petit paquets de 100 items). L'objectif de cette tache ressemble à https://github.com/vtaits/react-select-async-paginate.

#JaiPublié le playground https://github.com/stephane-klein/mermaid-sveltekit-playground parce que j'ai besoin de faire une intégration Mermaid dans mon projet Value Props.

Ce playground n'a que peu d'intérêt pour le moment, mis à part de confirmer que je n'ai pas eu de difficulté à initialiser Mermaid dans un projet SvelteKit.

Dans Projet 5 - "Importation d'un vault Obsidian vers Apache Age", j'utilise les librairies remark mais pour le moment, je les trouve bien plus difficiles à utiliser que gray-matter couplé avec markdown-it.

Par exemple, je souhaite extraire dans un dict le contenu frontmatter de fichiers markdown, ainsi que la partie body.

Avec remark j'ai écrit avec difficulté le code suivant :

#!/usr/bin/env node
import { glob } from "glob";
import fs from 'fs';
import { unified } from 'unified';
import markdown from 'remark-parse';
import frontmatter from 'remark-frontmatter';
import extract from 'remark-extract-frontmatter';
import { parse } from 'yaml';
import stringify from 'remark-stringify';

const processor = unified()
    .use(markdown)
    .use(frontmatter, ['yaml'])
    .use(extract, { yaml: parse })
    .use(stringify);

const processMarkdown = async (filename) => {
    const fileContent = fs.readFileSync(filename);
    const result = await processor.process(fileContent);

    const body = result.toString().split(/---\s*$/m)[2] || '';

    return {
        frontmatter: result.data,
        body: body.trim()
    };
};

for (const filename of (await glob("content/**/*.md"))) {
    processMarkdown(filename).then(data => {
        console.log('Frontmatter:', data.frontmatter);
        console.log('Body:', data.body);
    });
}

Et voici mon implémentation avec gray-matter :

#!/usr/bin/env node
import { glob } from "glob";
import matter from "gray-matter";
import yaml from "js-yaml";

for (const filename of (await glob("content/**/*.md"))) {
    console.log(matter.read(filename, {
        engines: {
            yaml: (s) => yaml.load(s, { schema: yaml.JSON_SCHEMA })
        }
    }));
}

Je préfère sans hésitation cette seconde implémentation.

#JaiDécidé d'utiliser gray-matter.

#JeMeDemande quels seraient les avantages que j'aurai à utiliser remark 🤔.

#JeMeDemande les librairies qui existent pour afficher des graphes basés sur les résultats retournées par une base de données orienté graphe, comme Apache Age.

#JeMeDemande si je peux arriver à faire quelque chose avec la librairie Svelte suivante : https://svelteflow.dev/

Autre librairies :

• https://js.cytoscape.org/
• https://visjs.org/
• https://www.sigmajs.org/
• https://d3js.org/

Obsidian Quartz utilise d3js : https://github.com/jackyzha0/quartz/blob/v4/quartz/components/scripts/graph.inline.ts

#JaiDécouvert https://github.com/dotenvx/dotenvx

a better dotenv–from the creator of dotenv

🤔.

Dans l'application web que je développe pour Value Props, je n'utilise actuellement aucune librairie de configuration pour l'app.

J'utilise uniquement process.env.CONFIG_PARAM || "default value".

En contexte, cela ressemble à ceci.

import nodemailer from "nodemailer";

let transporter;

if (process.env?.SMTP_USER && process.env?.SMTP_PASS) {
    transporter = nodemailer.createTransport({
        host: process.env.SMTP_HOST || "127.0.0.1",
        port: process.env.SMTP_POST || 1025,
        secure: true,
        auth: {
            user: process.env.SMTP_USER,
            pass: process.env.SMTP_PASS
        }
    });
} else {
    transporter = nodemailer.createTransport({
        host: process.env.SMTP_HOST || "127.0.0.1",
        port: process.env.SMTP_POST || 1025,
        secure: false
    });
}

export default transporter;

Je commence maintenant à utiliser des paramètres de configuration à différents endroits. Conséquence, je me dis que c'est peut-être maintenant le bon moment pour utiliser une librairie de configuration du type Convict.

Pourquoi j'ai cité Convict ? Parce que c'était le choix que j'avais fait en 2019, dans le projet gibbon-mail.

#JeMeDemande qu'elle est en 2024, la librairie [Javascript] de type environment-variables, configuration-management la plus populaire actuellement.

Pour répondre à cette question, j'ai commencé à faire une recherche sur npm trends et il m'a proposé la suggestion suivante config vs configstore vs convict vs cross-env vs dotenv

dotenv semble se détacher assez franchement.

dotenv et cross-env sont listés dans Delightful Node.js packages and resources.

Je constate que cross-env est abandonné et conseille ici de migrer vers env-cmd.

Je vais demander avis à des amis, mais pour le moment, je pense que je vais utiliser dotenv.

Quelque heure plus tard :

• J'ai décidé de continuer à utiliser la lib Convict de configuration management
• et un peu plus tard Comment définir la valeur par défaut des variables d'environement dans SvelteKit ?

En lien avec 2024-05-01_1205 :

#JeMeDemande si je peux utiliser le moteur de template EJS pour parser et render le template présent dans le markdown pour ensuite lancer le rendu markdown.

Je n'ai pas réussi à trouver mention de fonctionnalité de loop ou condition dans la documentation du plugin Obsidian Templater mais après lecture de ces deux threads :

• Using an IF statement in Templater
• For Loops in Templates

il semble que Templater supporte bien les fonctionnalités permettant d'implémenter des loop et condition dans un template.

Je pense que cela va me servir de source d'inspiration pour 2024-05-01_1205.

En lien avec 2024-05-01_1205, dans le code source du plugin Obsidian nommé Templater, #JaiDécouvert la librairie Javascript rusty_engine :

A Javascript templating engine in WASM

En dehors de l'aspect performance, je me demande si cette librairie serait plus adaptée à mes besoins que EJS 🤔.

Après 11 mois de procrastination, j'ai enfin pris le temps de faire ce script https://github.com/stephane-klein/toggl-report-helper-script

Au départ, j'hésitais entre une implémentation en Python ou en JavaScript. J'ai finalement opté pour JavaScript, car cela correspond à ma nouvelle doctrine.

Même si Python reste le langage que j'affectionne profondément, que je trouve toujours aussi élégant, j'ai pris la décision de me consacrer pleinement à JavaScript.

Btree est un job scheduler écrit en NodeJS.

Bree is the best job scheduler for Node.js and JavaScript with cron, dates, ms, later, and human-friendly support.

Dépôt GitHub : https://github.com/breejs/bree

Date de la création de cette note : 2024-05-17 .

Quel est l'objectif de ce projet ?

Je souhaite essayer de réaliser avec Svelte Flow, une page web qui permet de :

• Glisser / déposer 2 types d'objets vers un flow container.
• Permettre de saisir du texte dans ces deux types d'objets.
• Permettre de relier les objets de type 1 vers ceux de type 2 et inversement.
• Interdire les liaisons entre des objets de même type.

Idéalement j'aimerais que les objets soient placés "harmonieusement" entre eux dans le flow container.

Pourquoi je souhaite réaliser ce projet ?

Je besoin de créer ce type d'éditeur dans mon projet Value Props

Repository de ce projet :

• https://github.com/stephane-klein/svelteflow-playground

Ressources :

• Documentation de SvelteFlow : https://svelteflow.dev/learn

Résultat

2024-05-22 : je déclare le projet terminé.

Voir détail dans cette note : 2024-05-22_1033

https://github.com/remarkjs

https://github.com/rehypejs

Site officiel : https://yargs.js.org/

Dépôt GitHub : https://github.com/yargs/yargs

Yargs helps you build interactive command line tools, by parsing arguments and generating an elegant user interface.

Voir aussi commander.

https://github.com/sindresorhus/ora

https://github.com/markdown-it/markdown-it

https://github.com/jedisct1/libsodium.js

https://github.com/TryGhost/node-sqlite3

Voir aussi better-sqlite3.

Dépôt GitHub : https://github.com/tj/commander.js

node.js command-line interfaces made easy.

Voir aussi : yargs.

https://github.com/npkgz/cli-progress

🏛️ The fastest and tiniest utility for conditionally joining classNames.

https://github.com/alexnault/classix

https://github.com/chjj/blessed

https://github.com/WiseLibs/better-sqlite3

https://github.com/farjs/better-sqlite3-migrate

https://github.com/beenotung/better-sqlite3-helper

SWC (stands for Speedy Web Compiler) is a super-fast TypeScript / JavaScript compiler written in Rust.

Dépôt GitHub : https://github.com/swc-project/swc

SWC is 20x faster than Babel on a single thread and 70x faster on four cores.

-- from

https://github.com/porsager/postgres

The Oxidation Compiler is creating a collection of high-performance tools for JavaScript and TypeScript.

Oxc is building a parser, linter, formatter, transformer, minifier, resolver ... all written in Rust.

Dépôt GitHub : https://github.com/oxc-project/oxc

Site officiel : https://listr2.kilic.dev/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates

https://github.com/mde/ejs

https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Modules

• 2017 : ajout du support ECMAScript Modules dans Chrome, Firefox
• 2018 : prise en charge de ECMAScript Modules dans Babel (Javascript), Webpack, Rollup
• 2019 : début de prise en charge de ECMAScript Modules dans NodeJS