Je viens de croiser pour la première fois la propriété windom.customElements (from). Elle fait partie de l'ensemble des technologies qui composent ce que l'on appelle les Web Components.

Je connais depuis longtemps les Web Components, mais je n'ai jamais essayé de mettre en œuvre cette technologie. Je me suis contenté de lire et d'écouter des retours d'expérience et de suivre l'évolution des spécifications.

#JaiDécouvert que je peux facilement créer des Web Components en Svelte : https://svelte.dev/docs/svelte/custom-elements.

Custom elements can be a useful way to package components for consumption in a non-Svelte app, as they will work with vanilla HTML and JavaScript as well as most frameworks.

source

#JaiDécouvert le site Custom Elements Everywhere (https://custom-elements-everywhere.com/). Je lis que les Web Components sont maintenant parfaitement supportés par les frameworks majeurs : ReactJS, VueJS, Angular, Svelte, Solid… Ce qui est une très bonne nouvelle 🙂.
Je vais essayer de garder cette information à l'esprit, les Web Components me seront sans doute utile à l'avenir.

Avec Svelte, j'apprécie une sorte de "retour aux sources", c'est-à-dire, vers un web un peu plus "vannila", celui que j'ai connu au début des années 2000.
Je pense que Web Components vont encore renforcer cette sensation, comme par exemple le fait que si j'utilise la fonctionnalité développeur "inspection" du navigateur sur un Web Component, je vais voir, par exemple, la balise <button>....</button> du Web Component et non sa "soupe" HTML, comme c'est le cas avec un composant ReactJS ou Svelte (je sais qu'il existe des extensions navigateur pour éviter cela).

#JaimeraisUnJour prendre le temps d'étudier les performances des Web Components versus les composants de ReactJS, Svelte et Solid.

#JaiLu le thread du Subreddit ReactJS : Is it worth learning Web Components?. Voici quelques extraits :

Not worth it to be quite honest. I expect to get some hate for this.

I worked on a design system for three years that was written in Stencil (web component framework) that was used by multiple teams all using React, Angular, Vue. I regret everything, it should have all been react but the dumb decision to allow different teams to use different frameworks in order to do "micro frontend architecture" was the reason web components were picked shortly before I joined and took the lead.

Web components are also impossible to version and whichever one loads first is going to be the one that is globally used. This means production breaking changes without teams even knowing their breaking changes were going to fuck over another team.

source

Un peu plus loin du même auteur :

No, I view “micro frontend architecture” as a total disaster and it usually is implemented badly. When each application is a different framework too it’s quite honestly so difficult as to not even be worth entertaining.

source

Web components can be a great way to add functionality to legacy web apps. I don't know if I'd set out to use them in any other scenario though. I suppose you could, but I don't know many people writing vanilla HTML/JS apps these days.

source

J'ai effectué une recherche GitHub sur le topic "web-components" et j'ai trouvé des choses intéressantes :

• wired-elements - j'adore ! ( Voir note la 2024-12-11_1708)
• Open UI (https://open-ui.org) - cela semble être intéressant
• https://github.com/github/github-elements
• https://github.com/nolanlawson/emoji-picker-element
• https://atomicojs.dev

#JaiDécouvert Introducing the new Svelte CLI.

We’ve just released sv, a new Command Line Interface (CLI) for creating, enhancing, and upgrading Svelte projects.

...

This package merges the previous create-svelte and community-led svelte-add tools into a single package.

Je viens de créer les projets suivants :

• Projet 16 - Créer un POC d'application PWA
• Projet 17 - Créer un POC de création d'une app smartphone avec Capacitor

Je viens de réfléchir à l'usage des termes "development environment" et "development kit".

Je pense que le dépôt gitlab-development-kit est un "development kit" qui permet d'installer et configurer un "development environment" pour travailler sur le projet GitLab.

Je viens de publier un nouveau playground pour tester Hasura : hasura-graphql-engine-playground.

Note de comparaison de la documentation Hasura version 2 versus PostGraphile.

J'essaie d'exposer une mutation GraphQL qui exécute et retourne de résultat d'une fonction PL/pgSQL.

Postgraphile

Voici le parcours pour découvrir comment implémenter cette fonctionnalité dans PostGraphile :

• 1. J'ouvre la page documentation : https://www.graphile.org/postgraphile/introduction/
• 2. Je vois dans la navigation de droite, "Opération", ensuite "Functions".

• 3. J'ouvre la page "Functions"
• 4. Je clique sur la page "Custom Mutations"

Et sur cette page je peux lire une explication du fonctionnement et un exemple :

Hasura

Voici le parcours pour découvrir comment implémenter cette fonctionnalité dans Hasura :

• 1. J'ouvre la documentation https://hasura.io/docs/2.0/index/

• 2. Contrairement à la navigation de la documentation de PostGraphile qui affiche directement les mots clés "Function" et "Custom Mutation", j'ai eu quelques difficultés à trouver la page qui contient ce que je cherche. Cela s'explique par le fait que Hasura propose plus de fonctionnalités que PostGraphile et plus d'abstractions.
• 3. En explorant, j'ai fini par trouver la section en ouvrant les sections "GraphQL Schema" => "Postgres".

• 4. J'ouvre la page "Extend with SQL functions"

Été 2021, j'ai essayé d'utiliser PostgREST dans un projet professionnel, mais j'ai abandonné cette option en raison de trop nombreuses limitations rencontrées.

Depuis, je constate que PostgREST a beaucoup évolué : CHANGELOG.md.

Cela pourrait valoir la peine que je redonne une chance à ce projet lors de ma prochaine réalisation d'une API REST.

#JeMeDemande si la bonne santé du projet est liée au sponsoring de Supabase.

Sur la page Patreon du projet, je constate qu'il reçoit 1375 € de don récurrent par mois.

Je rassemble ici quelques notes au sujet de projet Hasura.

À l'origine, Hasura était uniquement un moteur GraphQL open-source qui se branchait directement sur une base de données PostgreSQL. Le projet a commencé en 2018, bien que le site web soit plus ancien — 2015.
D'après le dépôt GitHub, les premiers développeurs d'Hasura sont Shahidh K Muhammed, Vamshi Surabhi, Aravind Shankar et Rakesh Emmadi, tous basés à Bangalore, en Inde.

En 2019, dans un cadre professionnel, j'ai choisi d'utiliser un autre moteur GraphQL : PostGraphile.

Début 2020, j'avais également identifié Hasura et Supabase comme alternatives.

J'avais choisi d'utiliser PostGraphile pour plusieurs raisons :

• Supabase était encore un jeune projet, lancé en octobre 2019.
• Hasura était codé en Haskell, un langage que je ne maîtrise pas. En revanche, PostGraphile, développé en JavaScript, m'inspirait plus confiance, car je savais que j'avais les compétences nécessaires si je devais intervenir sur son code source, par exemple, pour corriger un bug.
• D'autre part, PostGraphile n'était pas financé par des Venture capital, ce qui m'inspirait bien plus confiance sur son avenir que Supabase et Hasura.
• J'apprécie énormément la façon de travailler de Benjie. J'apprécie sa manière d'organiser ses projets, ses documentations et ses choix techniques. Je pense que notre doctrine est assez similaire.

Quatre plus tard, je constate que PostGraphile a choisi de rester concentré sur un seul objectif : être un moteur GraphQL, tandis que Supabase et Hasura, bénéficiant d'un financement par des Venture capital, ont diversifié leurs offres.

Alors que PostGraphile se limite au support de PostgreSQL, Hasura peut se connecter à Mysql, MongoDB, Clickhouse, Elasticsearch…
Et d'après la documentation, Hasura permet d'exposer, en plus d'une API GraphQL, une API REST (RESTified Endpoints).

Dans le thread Hacker News "Rsbuild – A Better Vite?" #JaiDécouvert :

• Rsbuild : The Rspack-based build tool. It's fast, out-of-the-box and extensible.
• SWC : (stands for Speedy Web Compiler) is a super-fast TypeScript / JavaScript compiler written in Rust.
• VoidZero : a company dedicated to building an open-source, high-performance, and unified development toolchain for the JavaScript ecosystem.
• Oxc : is building a parser, linter, formatter, transformer, minifier, resolver ... all written in Rust.
• Rolldown : Rolldown is a JavaScript/TypeScript bundler written in Rust intended to serve as the future bundler used in Vite.

Voici ce que j'ai compris.

Tous ces outils sont écrits en Rust.

Rsbuild est une alternative à : Vite, Create React App et Vue CLI et qui offre d'excellente performance (les tâches de build… sont exécutées bien plus rapidement).

Jiahan Chen, développeur de chez ByteDance, a commencé le projet Rsbuild en octobre 2023.

Dans le thread HackerNews je lis ce commentaire :

The better, faster, Rust-powered Vite is… Vite.

https://voidzero.dev/posts/announcing-voidzero-inc

J'ai creusé le sujet et j'ai compris que le créateur de Vite, Evan You a fondé une société nommée VoidZero, composée de core développeurs des projets Oxc, Vite, Rolldown.

Accel a injecté 4,6 millions de dollars dans VoidZero avec comme objectif de financer le développement de Rolldown qui sera intégré dans une future version de Vite.
D'après ce que j'ai compris, Rolldown utilise Oxc.

Je me demande si Accel envisage de tirer des bénéfices directs de VoidZero ou si cette initiative relève davantage du mécénat. Du côté des intérêts indirects : plusieurs sociétés du portefeuille d'Accel utilisent la stack Javascript, ce qui permet de financer et de mutualiser le développement d'outils clés.

Voici les points principaux que je retiens. Rsbuild semble une alternative performante Vite qui est utilisable dès aujourd'hui.
Le projet Vite est bien structuré et financé, ce qui lui permettra de sortir une nouvelle version optimisée.
Pour ma part, j’espère voir le projet VoidZero réussir afin d’éviter une dilution des efforts au sein de la communauté Javascript dans une multitude de projets.

La version 5 de Svelte vient de sortir : 5.0.0.

Il y a un an, j'avais lu le billet Introducing runes. Depuis, j'ai suivi ce sujet de loin.

J'aimerais tester et apprendre à utiliser la fonctionnalité rune.
#JeMeDemande dans quel projet 🤔. Est-ce que je préfère refactorer vers rune le projet sklein-pkm-engine ou gibbon-replay 🤔. Je pense que ces deux projets utilisent trop peu de "reactive state".
Je souhaite prochainement débuter le projet que j'ai présenté dans 2023-10-28_2008. Je pense que ça serait une bonne occasion pour créer mon premier projet 100% TypeScript avec Svelte 5 avec Rune.

En étudiant l'annonce Développeur(se) back-end en CDI de Brief.me j'ai été intrigué par :

Migrer notre front-end existant de Nuxt.js vers HTMX.

Je me suis demandé quelle est la motivation de passer d'un framework de type Nuxt.js, NextJS ou SvelteKit à htmx 🤔.

J'utilise SvelteKit depuis deux ans, qui est comparable Nuxt.js, principalement en mode SSR avec Hydration, et je suis totalement satisfait. Ma Developer eXperience est excellente. Je trouve ce framework minimaliste, conforme au principe Keep it simple, stupid! (KISS), et performant.

Après réflexion, j'ai réalisé que mon expérience de développeur (DX) serait moindre si j'héritais d'un backend codé dans un langage autre que Javascript : Python, PHP, Ruby, Golang…

Et Brief.me semble être dans ce cas de figure :

• Back-end : Django, PostgreSQL, RabbitMQ, Celery
• Front-end : HTMX
• Tests : pytest
• Infra : Platform.sh

Je me suis connecté à mon compte Brief.me et en regardant ce que me retourne Wappalyzer, je constate que le site est effectivement propulsé par Nuxt.js, VueJS.

En regardant ce qu'il se passe dans l'onglet Réseau de mon navigateur, je constate que https://app.brief.me est un site web de type SPA. Le contenu des articles est chargé via l'api https://www.brief.me/api/ qui est propulsée par Django REST framework.

Si je résume, la stack est la suivante : PostgreSQL => Django => Django REST framework <=> Nuxt.js => Rendu HTML via VueJS.

Je suppose que ce qui motive la migration de Nuxt.js vers HTMX est la suppression de couches.
Plus précisément, je suppose que l'équipe tech de Brief.me souhaite supprimer les couches suivantes :

• Django REST framework
• Nuxt.js
• VueJS

Et utiliser simplement le système de template de Django en SSR pour afficher le contenu des articles et implémenter les quelques éléments dynamiques côté browser avec HTMX.
De mon point de vue, ceci a pour avantage de largement simplifier la stack, de simplifier le déploiement et d'accélérer le chargement des pages.

Ma conclusion : la librairie HTMX semble être un choix très pertinent quand elle est utilisée dans une stack non NodeJS.

Je suis triste de constater que SvelteKit ne propose toujours pas de hooks pour lancer une fonction au démarrage du serveur 😔, voir l'issue Expose a way to inject a start script into adapter-node.

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.

#JaiDécouvert le terme Cumulative Layout Shift (CLS) (from).

J'ai lancé mon activité de freelance en juillet 2024.

Depuis, j'ai déjà travaillé pour deux clients en régie : l'un pour du développement web, et l'autre pour une mission DevOps. Actuellement, je suis en discussion pour deux nouvelles missions.

Jusqu'à présent, je n'ai fait aucune promotion de mon activité #freelance, même parmi mes amis. Très peu de personnes sont au courant de ma nouvelle activé.

Mon premier projet en tant que freelance a été la continuation d'un projet sur lequel je travaillais depuis près d'un an.
Quant au second projet, il m'est venu grâce à un ami développeur qui m'a mis en relation avec le client.

Place de maché de freelances

La dernière semaine d'août, j'ai créé et activé un compte sur Malt, mais pour le moment, personne ne m'a contacté.

Plus d'informations au sujet de mon aventure Malt dans la note suivante : Première itération de mon aventure Malt.

Je me suis aussi inscrit sur Collective, j'ai reçu cette semaine deux opportunités de missions auxquelles je dois répondre :

Je suis aussi inscrit sur Jean-Paul.io, pour le moment, je n'ai reçu aucun message.

J'ai prévu de m'inscrire sur Comet et LeHibou.

Ma stratégie de publication LinkedIn

Maintenant que les sections CV, Mes services et Mes disponibilités et tarifs sont a jours sur mon site personnelle et que j'ai enfin édité un nouveau CV au format A4 — ce fut difficile d'être concis — je me suis dit que je suis prêt à poster un message sur LinkedIn pour informer mon réseau de ma nouvelle activité.

Voici les messages que je souhaite poster :

Bonjour, petit message "publicitaire" 😉 pour vous informer que je suis #Freelance depuis juillet.

Depuis mon lancement, j'ai déjà travaillé pour deux clients en régie, pour du développement web et une mission DevOps. Actuellement, je suis en discussion pour deux autres missions.

Il me reste entre 30 et 40 jours de disponibilité d'ici fin décembre, et je suis donc à la recherche de nouvelles missions pour compléter mon planning.

Si vous avez des projets ou connaissez des personnes qui pourraient avoir besoin de mes services, n'hésitez pas à me contacter ou à partager mon profil. 🙏

#PayItForward : Un grand merci par avance pour tout partage (repost) ou recommandation en commentaire !

Pour plus d'informations :

• Mon CV : https://sklein.xyz/fr/cv/?campaign=ryxHYa
• Exemples de services que je propose : https://sklein.xyz/fr/services-freelance/?campaign=ryxHYb
• Mes disponibilités et tarifs : https://sklein.xyz/fr/availability-and-pricing/?campaign=ryxHYc

À bientôt ! 🙂

Et 3 jours plus tard :

Vous travaillez au sein d'une organisation et vous cherchez quelqu'un pour lancer une application web de type MVP (Produit Minimum Viable) soignée, développée et déployée à partir de zéro avec un minimum de bug ?

Si la réponse est oui, n'hésitez pas à me contacter, je peux peut-être vous aider à réaliser ce projet.

Pour plus d'informations :

• Mon CV : https://sklein.xyz/fr/cv/?campaign=ryxHYa2
• Exemples de services que je propose : https://sklein.xyz/fr/services-freelance/?campaign=ryxHYb2
• Mes disponibilités et tarifs : https://sklein.xyz/fr/availability-and-pricing/?campaign=ryxHYc2

À bientôt ! 🙂

#Freelance #WebDev #MVP

3 jours plus tard :

En tant que #Freelance, je propose mes services en software engineering pour des prestations que je qualifie de "pompiers", par exemple :

• Correction de bugs sous forme de "quick win" ;
• Réduction des lenteurs de votre application sous forme de "quick win" ;
• Traitement en urgence de problèmes d'hébergement (hosting).

Si vous rencontrez de type de problème, n'hésitez pas à me contacter, je peux peut-être vous aider sur ces sujets.

#Freelance #DevOps #BugFix #OpenToWork

Je souhaite également publier ces messages sur Twitter et Mastodon, et éventuellement le premier sur Facebook (même si je pense que ce n'est pas l'endroit idéal pour ce type de contenu).

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.

#JaiDécouvert https://github.com/sapics/ip-location-api (pour gibbon-replay).

#JaiDécouvert https://github.com/ghostdevv/svelte-hamburgers

Je l'ai utilisé dans https://sklein.xyz.

#JaiDécouvert better-sqlite3, je vais sans doute l'utiliser dans gibbon-replay à la place de Redis.

Dans le cadre du projet gibbon-replay, j'ai étudié sendBeacon pour traiter l'erreur NS_BINDING_ABORTED

qui a lieu ici lors de l'exécution de fetch lors d'événements beforeunload :

window.addEventListener('beforeunload', save);

C'est-à-dire, quand l'utilisateur quitte la page.

Dans ce commit, j'ai remplacé fetch par navigator.sendBeacon.

Après une mise en pratique plus approfondie, la technique présentée dans pnpm workspace et Docker build n'a pas fonctionné comme je l'attendais.

À cause de cette ligne du /demosite/pnpm-lock.yaml :

    dependencies:
      gibbon-replay-js:
        specifier: 0.2.0
        version: link:../packages/gibbon-replay-js

Pour générer un fichier pnpm-lock.yaml qui contient :

      gibbon-replay-js:
        specifier: 0.2.0
        version: 0.2.0

j'ai créé un script nommé demosite/scripts/generate-local-pnpm-lock-file.sh qui contient :

#!/usr/bin/env bash
# This script generates a pnpm-lock.yaml file in the local directory,
# without including dependencies from workspace projects.
# For example, the version of gibbon-replay-js installed is the version
# published on npmjs.
# This point is crucial to ensure the correct operation of the docker build
# command when creating the Docker image of the demo-site project.
set -e

cd "$(dirname "$0")/../"

export npm_config_link_workspace_packages=false
export npm_config_prefer_workspace_packages=false
export npm_config_shared_workspace_lockfile=false

pnpm install --lockfile-only

Cela me permet de générer un fichier pnpm-lock.yaml qui sera présent dans le dossier /demosite/ et utilisé lors de l'exécution de Docker build.

En complément de cela, j'utilise les paramètres suivants dans /demosite/.npmrc :

link-workspace-packages=true
prefer-workspace-packages=true
shared-workspace-lockfile=true

cela permet en phase de "développement", c'est-à-dire en dehors du build Docker, d'utiliser le fichier pnpm-lock.yaml à la racine et la version locale du package packages/gibbon-replay-js.

Tout cela me paraît un peu complexe, mais pour l'instant, je n'ai pas trouvé de méthode alternative permettant de configurer un environnement de développement répondant à ces deux exigences :

• En mode développement, utiliser directement le code du packages/gibbon-replay-js sans qu'aucune action ne soit requise de la part du développeur.
• Pouvoir générer l'image Docker en une seule commande.

Je suis ouvert à toute suggestion 🙂 (contact@stephane-klein.info).

J'écris cette note pour me souvenir pourquoi j'ai paramétré .npmrc avec les options suivantes :

link-workspace-packages=true
prefer-workspace-packages=true
shared-workspace-lockfile=false

Sans l'option link-workspace-packages=true, je devais configurer package.json comme ceci

"gibbon-replay-js": "workspace:*"

pour que /demosite utilise le package local /packages/gibbon-replay-js.

Cette contrainte me posait un problème, parce que /demosite/Dockerfile ne pouvait pas être buildé.

L'option link-workspace-packages=true permet de configurer la dépendance suivante

"gibbon-replay-js": "0.2.0"

qui pourra être installé correctement lors du build de l'image Docker.

Attention, cette version de gibbon-replay-js doit avoir préalablement été publiée sur npm registry.

Seconde option qui m'a été utile : shared-workspace-lockfile=false.

Avec cette option, pnpm install génère les fichiers /demosite/pnpm-lock.yaml et /app/pnpm-lock.yaml, fichiers indispensables pour build les images Docker.

#JaiDécouvert cet article pnpm "Working with Docker".

J'y ai découvert corepack.

Pour le moment, je ne comprends pas l'avantage d'utiliser :

FROM node:20-slim AS base
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable

plutôt que :

FROM node:20-slim AS base
RUN npm install -g pnpm@9.10

🤔

Dans ce Dockerfile j'ai tout de même utilisé cette technique pour tester.

J'ai utilisé le système de cache store de pnpm :

RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile

Je me suis posé la question de partage le cache de ma workstation :

$ pnpm store path
/home/stephane/.local/share/pnpm/store/v3

Mais je ne pense pas que cela soit une bonne idée dans le cas où cette image est buildé par une CI.

#JaiLu l'article de DHH : Design for the web without Figma.

This is perhaps the biggest, open secret to the productivity and viability of our two-person teams at 37signals. All our web designers work directly with the native materials of HTML, CSS, and usually even a fair bit of JavaScript and Ruby. The design process and its iterations flow through updates to the real code that runs the real app, and, as quickly as possible, against real data.

Voici encore une pratique à contre-courant de DHH, que je suis moi aussi depuis des années.

#JaiDécouvert Mini Spreadsheet Component with Svelte 5 : sveltejs.

Très minimaliste et sympatique 🙂.

#JaiDécouvert isbot.

Detect bots/crawlers/spiders using the user agent string

#JaiDécouvert le package goatcounter-js pour directement charger le code JavaScript de Goatcounter. Ce qui, je pense, permet d'éviter le blocage de chargement de ce script par uBlock Origin.

Je viens de vérifier, il n'est toujours pas possible d'utiliser des slot nommés dans les layout SvelteKit : Treat layout pages like components when using named slots.

J'ai perdu énormément de temps à essayer de passer de ce rendu :

à celui-ci :

De base, j'utilise font-variant-caps: small-caps.

Ensuite, j'ai essayé les paramètres suivants pour obtenir des "lining figures" :

font-variant-numeric: tabular-nums;
font-variant-numeric: oldstyle-nums;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum";

Rien n'y faisait !

J'ai fini par trouver la solution !

J'utilisais le package @fontsource/source-serif-pro or, celui contient des fontes de caractères au format TrueType et non pas OpenType.

$ hexdump -C -n 32 node_modules/@fontsource/source-serif-pro/files/source-serif-pro-latin-200-italic.woff
00000000  77 4f 46 46 00 01 00 00  00 00 5f 4c 00 0e 00 00  |wOFF......_L....|

00 01 00 00 signifie que la fonte de caractères est au format TrueType.

J'ai ensuite installé le package source-serif et cette fois, les Fontes de caractères sont au format OpenType.

$ hexdump -C -n 32 node_modules/source-serif/WOFF2/OTF/SourceSerif4-BoldIt.otf.woff2
00000000  77 4f 46 32 4f 54 54 4f  00 01 47 bc 00 0d 00 00  |wOF2OTTO..G.....|

4f 54 54 4f signifie que la fonte de caractères est au format OpenType.

Avec une fonte de caractères au format OpenType la hauteur des chiffres en small-caps est alignée avec la taille des lettres.

#JaiDécouvert la fonctionnalité Skew Protection de Vercel : Introducing Skew Protection.

#JaiLu aussi Version Skew.

#JeMeDemande comment implémenter le même système que la fonctionnalité Skew Protection de Vercel en self hosted, par exemple, avec SvelteKit 🤔.

#JaiLu l'article Don’t Build A General Purpose API To Power Your Own Front End.

TL;DR YAGNI, unless you’re working in a big company with federated front-ends or GraphQL.

It’s popular in web dev nowadays to build a backend that serves JSON, and a frontend that renders the app. This is fine. I’m not the biggest fan, but it’s really okay. Except it’s not okay if you think that your backend needs to be designed like a generic public API. This will not save you time.

Je partage à 100% cette opinion.

https://whatpwacando.today/

https://github.com/nodejs/corepack

https://htmx.org/

https://tina.io/

Article Wikipedia : https://en.wikipedia.org/wiki/Server-side_scripting

Définition de SvelteKit : https://kit.svelte.dev/docs/glossary#ssr

Article Wikipedia : https://en.wikipedia.org/wiki/Static_site_generator

Définition de SvelteKit : https://kit.svelte.dev/docs/glossary#ssg

Article Wikipedia : https://en.wikipedia.org/wiki/Single-page_application

Définition de SvelteKit : https://kit.svelte.dev/docs/glossary#spa

Voici une définition : https://kit.svelte.dev/docs/glossary#hydration

https://web.dev/articles/cls/

https://www.django-rest-framework.org/

https://max.engineer/server-informed-ui

Date de création de cette note : 2024-11-18.

Quel est l'objectif de ce projet ?

Je souhaite apprendre à créer des applications web de type Progressive Web Apps (PWA).

J'ai déjà une certaine culture dans ce domaine, mais je n'ai jamais créé d'application de ce type.

Voici les éléments que je souhaite apprendre / tester dans ce POC :

• [ ] Accélérer le chargement d'une app web qui a déjà été visitée (configurer correctement la gestion du cache)
• [ ] Rendre l'app web installable
  • [ ] Define your app icons
  • [ ] Display a badge on the app icon
  • [ ] Essayer de publier l'app sur (basé sur PWABuilder)
    • [ ] Google Play Store
    • [ ] iOS App Store
• [ ] Implémenter l'envoie de notification via un worker
• [ ] L'application doit être accessible même offline.

Si possible, j'aimerais implémenter ce POC avec SvelteKit.

Idéalement, j'aimerais intégrer le travail de "Projet GH-339 - Implémenter un POC de Automerge" dans un PWA.

Ressources :

• https://svelte.dev/docs/kit/service-workers
• https://vite-pwa-org.netlify.app/frameworks/sveltekit.html
• https://web.dev/learn/pwa/workbox

Date de création de cette note : 2024-11-18.

Quel est l'objectif de ce projet ?

Je souhaite apprendre à créer une app smartphone avec Capacitor.

Idéalement, suivre la documentation "Using Capacitor in a Web Project" pour transformer l'app PWA créée dans Projet 16 - Créer un POC d'application PWA en application smartphone.

Capacitor fully supports traditional web and Progressive Web Apps. In fact, using Capacitor makes it easy to ship a PWA version of your iOS and Android app store apps with minimal work.

-- from

Todo :

• [ ] ...
• [x] Essayer d'utiliser l'offre Apple Mac mini M1 de Scaleway pour builder l'app pour iOS
• [ ] À la fin, rédiger une note de comparaison de Capacitor versus PWABuilder.

Repository de ce projet :

• https://github.com/stephane-klein/poc-capacitor

https://datatables.net/

https://developer.mozilla.org/en-US/docs/Web/API/Web_components