Tontof A simple and smart (or stupid) blog http://tontof.net/index.php fr tontof 2024-04-10T10:04:24+02:00 kriss blog daily 1 2024-04-10T10:04:24+02:00 10 : Kriss ecmd http://tontof.net/index.php?2024/04/10/10/04/24-10-kriss-ecmd
execCommand combiné à contenteditable est super pratique pour éditer une page html même s'il génère un code HTML un peu nul (par exemple les balises <i> ou <b> pour l'italique et le gras). Maintenant le problème ne se pose plus car l'usage de execCommand est devenu obsolète.

À ma connaissance il n'y a aucune alternative à execCommand et s'il existe des éditeurs HTML sympathiques, j'aimais bien ContentTools qui semble abandonné, j'avais envie d'étudier comment fonctionnaient les sélections en javascript et j'ai donc commencé KrISS ecmd.

C'est encore loin d'être complet, mais j'ai réussi à gérer plusieurs problèmes qui se posaient sur les sélections qui ne correspondaient pas toujours à ce que j'imaginais (quand on sélectionne du texte qui est dans une balise html, ça peut sélectionner le texte à l'intérieur dans les balises mais aussi le texte avec les balises) ainsi que sur la qualité du code HTML généré avec entre autres la fusion de même balises pour éviter la duplication de code (quand on veut mettre en gras du texte à côté de texte en gras, ça fusionne les 2 balises de gras).

L'objectif final de ce code serait de l'utiliser dans un projet de création de pages HTML statiques dans l'esprit de mobirise mais en plus simple, un KrISS edit ? En attendant le code est disponible sur Github.]]>
2024-04-10T10:04:24+02:00 fr tontof A simple and smart (or stupid) blog
execCommand combiné à contenteditable est super pratique pour éditer une page html même s'il génère un code HTML un peu nul (par exemple les balises <i> ou <b> pour l'italique et le gras). Maintenant le problème ne se pose plus car l'usage de execCommand est devenu obsolète.

À ma connaissance il n'y a aucune alternative à execCommand et s'il existe des éditeurs HTML sympathiques, j'aimais bien ContentTools qui semble abandonné, j'avais envie d'étudier comment fonctionnaient les sélections en javascript et j'ai donc commencé KrISS ecmd.

C'est encore loin d'être complet, mais j'ai réussi à gérer plusieurs problèmes qui se posaient sur les sélections qui ne correspondaient pas toujours à ce que j'imaginais (quand on sélectionne du texte qui est dans une balise html, ça peut sélectionner le texte à l'intérieur dans les balises mais aussi le texte avec les balises) ainsi que sur la qualité du code HTML généré avec entre autres la fusion de même balises pour éviter la duplication de code (quand on veut mettre en gras du texte à côté de texte en gras, ça fusionne les 2 balises de gras).

L'objectif final de ce code serait de l'utiliser dans un projet de création de pages HTML statiques dans l'esprit de mobirise mais en plus simple, un KrISS edit ? En attendant le code est disponible sur Github.]]>
9 : KrISS klok http://tontof.net/index.php?2024/04/04/16/04/04-9-kriss-klok Isidore de Séville le patron des internautes, des informaticiennes et informaticiens... En tout cas je m'en sers d'excuse pour publier KrISS klok aujoud'hui !

L'idée vient du « puzzle chess » qui adapte les horloges des jeux d'échecs aux puzzles et qui permet de les aborder d'une façon bien différente de ce qu'on a l'habitude de faire avec. Voici une vidéo de présentation.

KrISS klok est encore bien loin de ce que j'ai en tête, mais j'essaye de publier même en l'état : « Not perfect, just good enough »

En tout cas c'est fonctionnel même si grandement imparfait. Comme à mon habitude je n'ai pas vraiment passé du temps sur le graphisme et je suis allé à l'essentiel de la fonctionnalité de base. Contrairement aux horloges d'échecs classiques, KrISS klok offre la possibilité d'avoir plus de 2 horloges, l'idée finale étant de pouvoir découper l'espace de façon plus agréable pour qu'on puisse l'adapter en fonction de la position des personnes autour de l'écran. J'aimerais pouvoir utiliser un diagrame de Voronoï en pondérant les points pour avoir des zones de tailles plus ou moins égales.

J'ai voulu utiliser des ServiceWorker pour le rendre accessible hors ligne, mais comme il s'agit d'une simple page html, le charger dans le navigateur ou l'enregistrer en local permet aussi de s'en servir directement sans trop de complication, je verrai donc plus tard pour améliorer cette partie là.

Il faudrait aussi qu'on puisse l'inverser en mode chronomètre plutôt que décompte. Une chose est sûre, ce ne sont pas les idées qui manquent pour l'améliorer. Le code est dispo sur Github en attendant que je trouve le temps de voir comment je peux faire avec mon hébergement pour gérer les git de mon côté.

Bon puzzle chess avec KrISS klok !]]>
2024-04-04T16:04:04+02:00 fr tontof A simple and smart (or stupid) blog Isidore de Séville le patron des internautes, des informaticiennes et informaticiens... En tout cas je m'en sers d'excuse pour publier KrISS klok aujoud'hui !

L'idée vient du « puzzle chess » qui adapte les horloges des jeux d'échecs aux puzzles et qui permet de les aborder d'une façon bien différente de ce qu'on a l'habitude de faire avec. Voici une vidéo de présentation.

KrISS klok est encore bien loin de ce que j'ai en tête, mais j'essaye de publier même en l'état : « Not perfect, just good enough »

En tout cas c'est fonctionnel même si grandement imparfait. Comme à mon habitude je n'ai pas vraiment passé du temps sur le graphisme et je suis allé à l'essentiel de la fonctionnalité de base. Contrairement aux horloges d'échecs classiques, KrISS klok offre la possibilité d'avoir plus de 2 horloges, l'idée finale étant de pouvoir découper l'espace de façon plus agréable pour qu'on puisse l'adapter en fonction de la position des personnes autour de l'écran. J'aimerais pouvoir utiliser un diagrame de Voronoï en pondérant les points pour avoir des zones de tailles plus ou moins égales.

J'ai voulu utiliser des ServiceWorker pour le rendre accessible hors ligne, mais comme il s'agit d'une simple page html, le charger dans le navigateur ou l'enregistrer en local permet aussi de s'en servir directement sans trop de complication, je verrai donc plus tard pour améliorer cette partie là.

Il faudrait aussi qu'on puisse l'inverser en mode chronomètre plutôt que décompte. Une chose est sûre, ce ne sont pas les idées qui manquent pour l'améliorer. Le code est dispo sur Github en attendant que je trouve le temps de voir comment je peux faire avec mon hébergement pour gérer les git de mon côté.

Bon puzzle chess avec KrISS klok !]]>
8 : KrISS aaaa : html http://tontof.net/index.php?2024/03/26/19/04/24-8-kriss-aaaa-html Transphporm montre une approche différente des autres projets plus classiques comme Twig. À ma connaissance c'est vraiment le seul projet qui utilise cette idée et théoriquement c'est très élégant dans le monde de la programmation object.

Pour mon approche plus impérative avec KrISS aaaa, j'ai imaginé l'utilisation d'un tableau associatif pour manipuler le code html à générer. Pour cela j'ai donc fait plusieurs fonctions pour transformer du code html en tableau associatif et vice versa.

En pratique, ça donne :
<?php include('src/helpers/html/html.php');

$string '
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body>
    body
  </body>
</html>
'
;
$array html_to_array($string);
var_dump(array_to_html($array));
$arraySimplified array_html_simplify($array);
$arraySimplified['html']['head']['title'] = "New title";
$arraySimplified['html']['body'] = [["p" => "new body"]];
$arraySimplified['html']['body'][] = ["p" => "add body"];
var_dump($arraySimplified);
var_dump(array_to_html($arraySimplified)); ?>



Ce qui donne comme résultat :
string(110) "<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Title</title></head><body>body</body></html>"
array(2) {
  '!DOCTYPE' =>
  array(1) {
    '@' =>
    array(1) {
      [0] =>
      string(4) "html"
    }
  }
  'html' =>
  array(3) {
    '@' =>
    array(1) {
      'lang' =>
      string(2) "en"
    }
    'head' =>
    array(2) {
      'meta' =>
      array(1) {
        '@' =>
        array(1) {
          'charset' =>
          string(5) "utf-8"
        }
      }
      'title' =>
      string(9) "New title"
    }
    'body' =>
    array(2) {
      [0] =>
      array(1) {
        'p' =>
        string(8) "new body"
      }
      [1] =>
      array(1) {
        'p' =>
        string(8) "add body"
      }
    }
  }
}
string(140) "<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>New title</title></head><body><p>new body</p><p>add body</p></body></html>"



Une remarque importante, cela ne génère pas de code html avec des retours à la ligne et des indentations mais c'est un choix volontaire. Bien sûr cela peut poser problème avec les affichages inline-block qui ne réagissent pas exactement de la même façon s'il y a des espaces entre les balises ou non.

Le but étant de rester minimaliste, ce comportement est donc voulu !
It's not a bug it's a feature!]]>
2024-03-26T19:04:24+01:00 fr tontof A simple and smart (or stupid) blog Transphporm montre une approche différente des autres projets plus classiques comme Twig. À ma connaissance c'est vraiment le seul projet qui utilise cette idée et théoriquement c'est très élégant dans le monde de la programmation object.

Pour mon approche plus impérative avec KrISS aaaa, j'ai imaginé l'utilisation d'un tableau associatif pour manipuler le code html à générer. Pour cela j'ai donc fait plusieurs fonctions pour transformer du code html en tableau associatif et vice versa.

En pratique, ça donne :
<?php include('src/helpers/html/html.php');

$string '
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body>
    body
  </body>
</html>
'
;
$array html_to_array($string);
var_dump(array_to_html($array));
$arraySimplified array_html_simplify($array);
$arraySimplified['html']['head']['title'] = "New title";
$arraySimplified['html']['body'] = [["p" => "new body"]];
$arraySimplified['html']['body'][] = ["p" => "add body"];
var_dump($arraySimplified);
var_dump(array_to_html($arraySimplified)); ?>



Ce qui donne comme résultat :
string(110) "<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Title</title></head><body>body</body></html>"
array(2) {
  '!DOCTYPE' =>
  array(1) {
    '@' =>
    array(1) {
      [0] =>
      string(4) "html"
    }
  }
  'html' =>
  array(3) {
    '@' =>
    array(1) {
      'lang' =>
      string(2) "en"
    }
    'head' =>
    array(2) {
      'meta' =>
      array(1) {
        '@' =>
        array(1) {
          'charset' =>
          string(5) "utf-8"
        }
      }
      'title' =>
      string(9) "New title"
    }
    'body' =>
    array(2) {
      [0] =>
      array(1) {
        'p' =>
        string(8) "new body"
      }
      [1] =>
      array(1) {
        'p' =>
        string(8) "add body"
      }
    }
  }
}
string(140) "<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>New title</title></head><body><p>new body</p><p>add body</p></body></html>"



Une remarque importante, cela ne génère pas de code html avec des retours à la ligne et des indentations mais c'est un choix volontaire. Bien sûr cela peut poser problème avec les affichages inline-block qui ne réagissent pas exactement de la même façon s'il y a des espaces entre les balises ou non.

Le but étant de rester minimaliste, ce comportement est donc voulu !
It's not a bug it's a feature!]]>
7 : KrISS turn http://tontof.net/index.php?2024/03/19/19/03/24-7-kriss-turn
C'est plus ou moins vrai avec KrISS turn qui est un peu un entre 2. J'ai écrit plusieurs fois à blasten pour savoir si je pouvais publier mes modifications à son projet turn.js mais mes messages sont restés sans réponse. Sur github son projet semble abandonné à la version 4 mais sur son site, il y a une version 5 qui est bien plus aboutie même si la démo qui affiche des pages en html n'est pas forcément très convainquante : http://turnjs.com/catalog/

J'ai donc apporté quelques modifications afin de pouvoir faire un lecteur PDF en intégrant la bibliothèque Mozilla PDF.js. Je n'ai pas modifié la bibliothèque turn.js, juste quelques lignes de son script principal qui utilise sa bibliothèque.

Comme je n'ai pas eu de réponse, je ne publie pas sur github mais en regardant le code source il est assez facile de récupérer ce qu'il faut pour pouvoir héberger votre propre lecteur PDF sous forme de magazine.

Voici quelques exemples :
- https://tontof.net/turn/
- https://tontof.net/turn/?pdf=assets/pdf/classes.pdf
- https://tontof.net/turn/?pdf=assets/pdf/turnjs4-api-docs.pdf

J'ai 1 mois pour publier les 4 derniers projets, j'espère que je vais tenir le rythme !]]>
2024-03-19T19:03:24+01:00 fr tontof A simple and smart (or stupid) blog
C'est plus ou moins vrai avec KrISS turn qui est un peu un entre 2. J'ai écrit plusieurs fois à blasten pour savoir si je pouvais publier mes modifications à son projet turn.js mais mes messages sont restés sans réponse. Sur github son projet semble abandonné à la version 4 mais sur son site, il y a une version 5 qui est bien plus aboutie même si la démo qui affiche des pages en html n'est pas forcément très convainquante : http://turnjs.com/catalog/

J'ai donc apporté quelques modifications afin de pouvoir faire un lecteur PDF en intégrant la bibliothèque Mozilla PDF.js. Je n'ai pas modifié la bibliothèque turn.js, juste quelques lignes de son script principal qui utilise sa bibliothèque.

Comme je n'ai pas eu de réponse, je ne publie pas sur github mais en regardant le code source il est assez facile de récupérer ce qu'il faut pour pouvoir héberger votre propre lecteur PDF sous forme de magazine.

Voici quelques exemples :
- https://tontof.net/turn/
- https://tontof.net/turn/?pdf=assets/pdf/classes.pdf
- https://tontof.net/turn/?pdf=assets/pdf/turnjs4-api-docs.pdf

J'ai 1 mois pour publier les 4 derniers projets, j'espère que je vais tenir le rythme !]]>
6 : KrISS lldc http://tontof.net/index.php?2023/06/11/13/06/23-6-kriss-lldc
Je vous ai déjà parlé avec KrISS tuto d'un petit cours sur la compression de données où je présente les algorithmes classiques de compression sans perte (Huffman, Huffman adaptatif, le codage arithmétique, rle, lz77, lz78, lzw).

Pour la partie pratique, j'ai eu du mal à trouver des algorithmes qui fonctionnaient bien et qui permettaient d'illustrer ce que je montrais en cours. J'ai utilisé un temps https://sourceforge.net/projects/compressions/ mais la compilation n'était pas toujours simple et j'ai donc cherché des versions python que j'ai regroupé dans KrIIS lldc. C'est vraiment à but pédagogique et je ne vous invite pas à utiliser ce code pour compresser de vrais fichiers ! Personnellement je ne le ferai pas.

J'ai uniformisé l'usage des algorithmes et ajouté un petit bout de code pour le codage binaire du résultat. Les ordinateurs stockent l'information avec des octets (8 bits) mais quand on a besoin de stocker un nombre de bits précis qui n'est pas multiple de 8 c'est un peu compliqué, il faut trouver une méthode pour arriver à relire le résultat. J'imagine qu'il y a une solution existante mais je n'ai pas vraiment cherché et je me suis dit qu'il suffisait d'utiliser les 3 derniers bits d'un octet pour savoir combien de bits sont à supprimer.

"0": "00000100"
"1": "10000100",
"01": "01000011",
"010": "01000010",
"0110": "01100001",
"01110": "01110000",
"011110": "0111100000000111",
"0111110": "0111110000000110",
"01111110": "0111111000000101",
"011111110": "0111111100000100"

Il suffit de prendre les 3 derniers bits par exemple pour "0111110000000110" on a "110" ce qui donne 6 en décimal. On supprime donc les 3+6 derniers bits et on retrouve "0111110" qu'on voulait stocker à l'origine.]]>
2023-06-11T13:06:23+02:00 fr tontof A simple and smart (or stupid) blog
Je vous ai déjà parlé avec KrISS tuto d'un petit cours sur la compression de données où je présente les algorithmes classiques de compression sans perte (Huffman, Huffman adaptatif, le codage arithmétique, rle, lz77, lz78, lzw).

Pour la partie pratique, j'ai eu du mal à trouver des algorithmes qui fonctionnaient bien et qui permettaient d'illustrer ce que je montrais en cours. J'ai utilisé un temps https://sourceforge.net/projects/compressions/ mais la compilation n'était pas toujours simple et j'ai donc cherché des versions python que j'ai regroupé dans KrIIS lldc. C'est vraiment à but pédagogique et je ne vous invite pas à utiliser ce code pour compresser de vrais fichiers ! Personnellement je ne le ferai pas.

J'ai uniformisé l'usage des algorithmes et ajouté un petit bout de code pour le codage binaire du résultat. Les ordinateurs stockent l'information avec des octets (8 bits) mais quand on a besoin de stocker un nombre de bits précis qui n'est pas multiple de 8 c'est un peu compliqué, il faut trouver une méthode pour arriver à relire le résultat. J'imagine qu'il y a une solution existante mais je n'ai pas vraiment cherché et je me suis dit qu'il suffisait d'utiliser les 3 derniers bits d'un octet pour savoir combien de bits sont à supprimer.

"0": "00000100"
"1": "10000100",
"01": "01000011",
"010": "01000010",
"0110": "01100001",
"01110": "01110000",
"011110": "0111100000000111",
"0111110": "0111110000000110",
"01111110": "0111111000000101",
"011111110": "0111111100000100"

Il suffit de prendre les 3 derniers bits par exemple pour "0111110000000110" on a "110" ce qui donne 6 en décimal. On supprime donc les 3+6 derniers bits et on retrouve "0111110" qu'on voulait stocker à l'origine.]]>
5 : KrISS json http://tontof.net/index.php?2023/05/26/14/00/00-5-kriss-json KrISS aaaa : middleware et il y a quelques années j'ai voulu testé cette même approche pour l'utilisation de schémas json https://json-schema.org

Le résultat final est plutôt chouette :

tests suite: nb tests nb files
draft3: 520/520 35/35
draft4: 735/735 38/38
draft6: 995/995 48/48
draft7: 1286/1286 57/57
draft2019-09: 1571/1651 59/68
draft2020-12: 1579/1677 58/68
draft-next: 1623/1724 58/68

C'était il y a quelques temps et j'ai dû faire 2/3 modifications pour valider les mises à jours des tests fournis par https://github.com/json-schema-org/JSON-Schema-Test-Suite pour continuer à valider les premiers drafts comme à l'époque où j'avais codé ça.

S'il n'y a qu'un seul fichier à regarder c'est la validation des URI/IRI à partir de la RFC
https://github.com/tontof/kriss_json/blob/main/schema/core/inc/rfc.php

Les validations proposées par PHP ne fonctionnaient pas pour tous les tests, j'ai donc dû lire un peu les RFC pour arriver à la validation de tous les tests. C'est à faire au moins une fois dans sa vie...

Pour valider un schéma json, il suffit d'inclure le fichier "json.php" et d'appeler la fonction "json_schema"

<?php 
include_once(__DIR__ '/schema/json.php');

$json 'https://json-schema.org/learn/examples/address.schema.json';
$address file_get_contents($json);

$data '
{
  "locality":"locality",
  "region":"region"
}
'
;
var_dump(json_schema(json_decode($address), json_decode($data)));

$data '
{
  "locality":"locality",
  "region":"region",
  "country-name":"country-name"
}
'
;
var_dump(json_schema(json_decode($address), json_decode($data)));

$data '
{
  "locality":"locality",
  "region":"region",
  "country-name":"country-name",
  "post-office-box":"post-office-box"
}
'
;
var_dump(json_schema(json_decode($address), json_decode($data)));

$data '
{
  "locality":"locality",
  "region":"region",
  "country-name":"country-name",
  "post-office-box":"post-office-box",
  "street-address":"street-address"
}
'
;
var_dump(json_schema(json_decode($address), json_decode($data)));
 
?>

Ce qui donne comme attendu :

bool(false)
bool(true)
bool(false)
bool(true)

En pratique, je vous invite à utiliser une approche plus classique https://json-schema.org/implementations.html#validator-php mais KrISS json reste intéressant de par son approche fonctionnelle]]>
2023-05-26T14:00:00+02:00 fr tontof A simple and smart (or stupid) blog KrISS aaaa : middleware et il y a quelques années j'ai voulu testé cette même approche pour l'utilisation de schémas json https://json-schema.org

Le résultat final est plutôt chouette :

tests suite: nb tests nb files
draft3: 520/520 35/35
draft4: 735/735 38/38
draft6: 995/995 48/48
draft7: 1286/1286 57/57
draft2019-09: 1571/1651 59/68
draft2020-12: 1579/1677 58/68
draft-next: 1623/1724 58/68

C'était il y a quelques temps et j'ai dû faire 2/3 modifications pour valider les mises à jours des tests fournis par https://github.com/json-schema-org/JSON-Schema-Test-Suite pour continuer à valider les premiers drafts comme à l'époque où j'avais codé ça.

S'il n'y a qu'un seul fichier à regarder c'est la validation des URI/IRI à partir de la RFC
https://github.com/tontof/kriss_json/blob/main/schema/core/inc/rfc.php

Les validations proposées par PHP ne fonctionnaient pas pour tous les tests, j'ai donc dû lire un peu les RFC pour arriver à la validation de tous les tests. C'est à faire au moins une fois dans sa vie...

Pour valider un schéma json, il suffit d'inclure le fichier "json.php" et d'appeler la fonction "json_schema"

<?php 
include_once(__DIR__ '/schema/json.php');

$json 'https://json-schema.org/learn/examples/address.schema.json';
$address file_get_contents($json);

$data '
{
  "locality":"locality",
  "region":"region"
}
'
;
var_dump(json_schema(json_decode($address), json_decode($data)));

$data '
{
  "locality":"locality",
  "region":"region",
  "country-name":"country-name"
}
'
;
var_dump(json_schema(json_decode($address), json_decode($data)));

$data '
{
  "locality":"locality",
  "region":"region",
  "country-name":"country-name",
  "post-office-box":"post-office-box"
}
'
;
var_dump(json_schema(json_decode($address), json_decode($data)));

$data '
{
  "locality":"locality",
  "region":"region",
  "country-name":"country-name",
  "post-office-box":"post-office-box",
  "street-address":"street-address"
}
'
;
var_dump(json_schema(json_decode($address), json_decode($data)));
 
?>

Ce qui donne comme attendu :

bool(false)
bool(true)
bool(false)
bool(true)

En pratique, je vous invite à utiliser une approche plus classique https://json-schema.org/implementations.html#validator-php mais KrISS json reste intéressant de par son approche fonctionnelle]]>
4 : KrISS aaaa : middleware http://tontof.net/index.php?2023/05/19/15/00/00-4-kriss-aaaa-middleware KrISS MVVM qui est une sorte de projet générique pour développer rapidement des petites applications en utlisant la programmation orientée objet, KrISS aaaa a le même but mais avec l'esprit programmation fonctionnelle. À l'heure où j'écris ces lignes KrISS aaaa n'est pas vraiment opérationnel mais j'ai déjà quelques briques que je vais présenter petit à petit après avoir mis en place quelques tests pour présenter comment tout cela fonctionne.

La programmation fonctionnelle n'a plus vraiment le vent en poupe mais je pense qu'elle peut être intéressante car plus facile à comprendre que la programmation orientée objet et j'espère donc trouvé du temps pour concrétiser tout ça. J'ai même pensé mettre à jour KrISS feed en utilisant ce principe, un jour peut-être...

Voici donc une première présentation de middleware qui correspond au principe de la couche d'oignon illustré dans cet article : http://esbenp.github.io/2015/07/31/implementing-before-after-middleware/ mais en programmation fonctionnelle :

<?php include('src/helpers/middleware/middleware.php');

function 
before($object$next) {
    
$object[] = 'before';
    return 
$next($object);
}

function 
after($object$next) {
    
$object $next($object);
    
$object[] = 'after';
    return 
$object;
}

function 
core($object) {
    
$object[] = 'core';
    return 
$object;
}

$middleware middleware(['after''before''after''before'], 'core');

var_dump($middleware());
 
?>

Le résultat est le suivant

array(5) {
[0] =>
string(6) "before"
[1] =>
string(6) "before"
[2] =>
string(4) "core"
[3] =>
string(5) "after"
[4] =>
string(5) "after"
}

J'imagine utilisé ce principe de middleware pour gérer des plugins dans KrISS aaaa. Plus d'exemples dans le fichier de tests : https://github.com/KrISS/aaaa/blob/main/tests/MiddlewareTest.php
]]>
2023-05-19T15:00:00+02:00 fr tontof A simple and smart (or stupid) blog KrISS MVVM qui est une sorte de projet générique pour développer rapidement des petites applications en utlisant la programmation orientée objet, KrISS aaaa a le même but mais avec l'esprit programmation fonctionnelle. À l'heure où j'écris ces lignes KrISS aaaa n'est pas vraiment opérationnel mais j'ai déjà quelques briques que je vais présenter petit à petit après avoir mis en place quelques tests pour présenter comment tout cela fonctionne.

La programmation fonctionnelle n'a plus vraiment le vent en poupe mais je pense qu'elle peut être intéressante car plus facile à comprendre que la programmation orientée objet et j'espère donc trouvé du temps pour concrétiser tout ça. J'ai même pensé mettre à jour KrISS feed en utilisant ce principe, un jour peut-être...

Voici donc une première présentation de middleware qui correspond au principe de la couche d'oignon illustré dans cet article : http://esbenp.github.io/2015/07/31/implementing-before-after-middleware/ mais en programmation fonctionnelle :

<?php include('src/helpers/middleware/middleware.php');

function 
before($object$next) {
    
$object[] = 'before';
    return 
$next($object);
}

function 
after($object$next) {
    
$object $next($object);
    
$object[] = 'after';
    return 
$object;
}

function 
core($object) {
    
$object[] = 'core';
    return 
$object;
}

$middleware middleware(['after''before''after''before'], 'core');

var_dump($middleware());
 
?>

Le résultat est le suivant

array(5) {
[0] =>
string(6) "before"
[1] =>
string(6) "before"
[2] =>
string(4) "core"
[3] =>
string(5) "after"
[4] =>
string(5) "after"
}

J'imagine utilisé ce principe de middleware pour gérer des plugins dans KrISS aaaa. Plus d'exemples dans le fichier de tests : https://github.com/KrISS/aaaa/blob/main/tests/MiddlewareTest.php
]]>
3 : KrISS tuto http://tontof.net/index.php?2023/05/05/16/00/00-3-kriss-tuto
Comme je suis un grand fan du duo OrgMode et RevealJs grâce à Org Reveal, j'ai voulu voir si je pouvais intégrer un cours de base de données.

Mission réussie grâce à SQL.js. Comme en plus j'ai besoin d'avoir certaines commandes basées sur MySQL/MariaDB, j'ai apporté quelques modifications pour gérer par exemple les dates, AUTO_INCREMENT, etc : https://github.com/tontof/kriss_tuto/blob/master/common/lib/sqlite/sqlite.js

Il n'a actuellement pas de contenu pour le cours mais des exemples qui montrent comment intégrer du SQL pour présenter un cours de base de données :
- Exécuter du SQL directement : https://tontof.net/tuto/bdd/#/slide-requetes-simples
- Charger un fichier SQLite : https://tontof.net/tuto/bdd/#/slide-fichier-sql
- Afficher une table à partir d'un fichier : https://tontof.net/tuto/bdd/#/slide-sql-integre

Pour le code source Org correspondant : https://github.com/tontof/kriss_tuto/blob/master/bdd/index.org]]>
2023-05-05T16:00:00+02:00 fr tontof A simple and smart (or stupid) blog
Comme je suis un grand fan du duo OrgMode et RevealJs grâce à Org Reveal, j'ai voulu voir si je pouvais intégrer un cours de base de données.

Mission réussie grâce à SQL.js. Comme en plus j'ai besoin d'avoir certaines commandes basées sur MySQL/MariaDB, j'ai apporté quelques modifications pour gérer par exemple les dates, AUTO_INCREMENT, etc : https://github.com/tontof/kriss_tuto/blob/master/common/lib/sqlite/sqlite.js

Il n'a actuellement pas de contenu pour le cours mais des exemples qui montrent comment intégrer du SQL pour présenter un cours de base de données :
- Exécuter du SQL directement : https://tontof.net/tuto/bdd/#/slide-requetes-simples
- Charger un fichier SQLite : https://tontof.net/tuto/bdd/#/slide-fichier-sql
- Afficher une table à partir d'un fichier : https://tontof.net/tuto/bdd/#/slide-sql-integre

Pour le code source Org correspondant : https://github.com/tontof/kriss_tuto/blob/master/bdd/index.org]]>
2 : KrISS cast http://tontof.net/index.php?2023/04/28/17/00/00-2-kriss-cast reveal.js par l'intermédiaire de Org mode comme pour KrISS tuto avec le mode présentation (touche 's') permet de vidéoprojecter une fenêtre spécifique mais reste quand même limitée.

J'avais un besoin assez spécifique. Je voulais partager mon écran sur un vidéoprojecteur sans avoir à tourner la tête pour voir ce que j'écrivais dans un terminal. La solution la plus simple est de dupliquer l'écran. Sauf que je voulais aussi avoir la possibilité d'ouvrir d'autres applications que je ne voulais pas projecter et dans ce cas la duplication ne fonctionne plus.

Au départ, je pensais pourvoir projecter un bureau linux spécifique mais je n'ai pas vraiment trouvé comment faire. En partageant des applications sur plusieurs bureaux je pense qu'on peut s'en sortir avec un gnome ou KDE. Sauf que de toute façon avec lightdm, je ne pense pas que j'aurais pu m'en sortir.

Après avoir cherché rapidement, je n'ai pas trouvé non plus d'application qui réponde à mon besoin alors j'ai pensé au partage d'écran sur Firefox (ou un autre navigateur) et après quelques lignes de javascript KrISS cast est né !

C'est assez basique mais ça fait le job. On ouvre une fenêtre avec KrISS cast dedans et on vidéoprojète la fenêtre. On clique sur ▶ en haut à gauche pour sélectionner la fenêtre à partager et c'est parti. Grâce à Split Grid, j'ai ajouté la possibilité de partager plusieurs fenêtres en même temps.

Pour résumé :
- les boutons + permettent de partager la fenêtre courante en 2 en fonction du bouton cliqué
- ▶/■ en haut à gauche démarre ou arrête le partage d'écran
- ⨯ en haut à droite ferme la fenêtre courante
- ⛶ en bas à gauche met en plein écran la fenêtre courante
- 🗖 en bas à droite met en plein écran la fenêtre globale

Quelques petits bonus :
- tous les vidéoprojecteurs n'ont pas l'option pour faire un écran noir, il suffit de découper la fenêtre en 2 et d'agrandir la zone pour avoir le même effet. Pratique pour écrire au tableau tout en vidéoprojetant
- pour zoomer la fenêtre projetée il suffit de redimensionner la fenêtre partagée d'origine

Pour utiliser KrISS cast directement ajouter #cast dans l'url. Vous pouvez également télécharger un seul fichier index.html compilé de 17K. Comme d'habitude les sources sont disponibles sur Github.

Bon partage d'écran !]]>
2023-04-28T17:00:00+02:00 fr tontof A simple and smart (or stupid) blog reveal.js par l'intermédiaire de Org mode comme pour KrISS tuto avec le mode présentation (touche 's') permet de vidéoprojecter une fenêtre spécifique mais reste quand même limitée.

J'avais un besoin assez spécifique. Je voulais partager mon écran sur un vidéoprojecteur sans avoir à tourner la tête pour voir ce que j'écrivais dans un terminal. La solution la plus simple est de dupliquer l'écran. Sauf que je voulais aussi avoir la possibilité d'ouvrir d'autres applications que je ne voulais pas projecter et dans ce cas la duplication ne fonctionne plus.

Au départ, je pensais pourvoir projecter un bureau linux spécifique mais je n'ai pas vraiment trouvé comment faire. En partageant des applications sur plusieurs bureaux je pense qu'on peut s'en sortir avec un gnome ou KDE. Sauf que de toute façon avec lightdm, je ne pense pas que j'aurais pu m'en sortir.

Après avoir cherché rapidement, je n'ai pas trouvé non plus d'application qui réponde à mon besoin alors j'ai pensé au partage d'écran sur Firefox (ou un autre navigateur) et après quelques lignes de javascript KrISS cast est né !

C'est assez basique mais ça fait le job. On ouvre une fenêtre avec KrISS cast dedans et on vidéoprojète la fenêtre. On clique sur ▶ en haut à gauche pour sélectionner la fenêtre à partager et c'est parti. Grâce à Split Grid, j'ai ajouté la possibilité de partager plusieurs fenêtres en même temps.

Pour résumé :
- les boutons + permettent de partager la fenêtre courante en 2 en fonction du bouton cliqué
- ▶/■ en haut à gauche démarre ou arrête le partage d'écran
- ⨯ en haut à droite ferme la fenêtre courante
- ⛶ en bas à gauche met en plein écran la fenêtre courante
- 🗖 en bas à droite met en plein écran la fenêtre globale

Quelques petits bonus :
- tous les vidéoprojecteurs n'ont pas l'option pour faire un écran noir, il suffit de découper la fenêtre en 2 et d'agrandir la zone pour avoir le même effet. Pratique pour écrire au tableau tout en vidéoprojetant
- pour zoomer la fenêtre projetée il suffit de redimensionner la fenêtre partagée d'origine

Pour utiliser KrISS cast directement ajouter #cast dans l'url. Vous pouvez également télécharger un seul fichier index.html compilé de 17K. Comme d'habitude les sources sont disponibles sur Github.

Bon partage d'écran !]]>
1 : KrISS jams http://tontof.net/index.php?2023/04/21/18/00/00-1-kriss-jams KrISS jams

J'ai déjà présenté KrISS jams pour imprimer des étiquettes de confitures et Nono m'a rapidement demandé s'il était possible d'avoir une version pour les pots de miel.

Plutôt que de faire une autre version spécifique aux pots de miel, j'ai ajouté un petit éditeur qui permet de personnaliser les étiquettes puis d'exporter les infos dans l'URL. Ça me paraît assez complet et fonctionnel en l'état même s'il y aurait des améliorations à apporter. Par exemple pour les confitures, la couleur du texte dépend du parfum et ce n'est actuellement pas possible de le faire simplement avec l'éditeur qui impose la couleur du texte pour toutes les étiquettes.

Il n'y a pas vraiment de documentation, mais ça me paraît assez intuitif :
- Edit list gère la liste des variétés des étiquettes (pour les différents parfums)
- Edit template est utilisé pour éditer le nom d'une étiquette et ses éléments (texte, image)
- Edit labels permet la mise en page des étiquettes dans une page (pour l'impression)

Toujours avec les magnifiques images de Daria Ustiugova, voici un petit exemple de ce que ça pourrait donner pour des étiquettes de pots de miel]]>
2023-04-21T18:00:00+02:00 fr tontof A simple and smart (or stupid) blog KrISS jams

J'ai déjà présenté KrISS jams pour imprimer des étiquettes de confitures et Nono m'a rapidement demandé s'il était possible d'avoir une version pour les pots de miel.

Plutôt que de faire une autre version spécifique aux pots de miel, j'ai ajouté un petit éditeur qui permet de personnaliser les étiquettes puis d'exporter les infos dans l'URL. Ça me paraît assez complet et fonctionnel en l'état même s'il y aurait des améliorations à apporter. Par exemple pour les confitures, la couleur du texte dépend du parfum et ce n'est actuellement pas possible de le faire simplement avec l'éditeur qui impose la couleur du texte pour toutes les étiquettes.

Il n'y a pas vraiment de documentation, mais ça me paraît assez intuitif :
- Edit list gère la liste des variétés des étiquettes (pour les différents parfums)
- Edit template est utilisé pour éditer le nom d'une étiquette et ses éléments (texte, image)
- Edit labels permet la mise en page des étiquettes dans une page (pour l'impression)

Toujours avec les magnifiques images de Daria Ustiugova, voici un petit exemple de ce que ça pourrait donner pour des étiquettes de pots de miel]]>