un simple agrégateur, lecteur de flux rss pour tout suivre .... par: fonds d'écran - Kriss Feed, version : 7 - Google
  • Wednesday 10 April 2024 - 10:04
    from Tontof
    Avant dernier bout de code avant le 11e prévu mardi prochain \o/

    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.
  • Thursday 04 April 2024 - 16:04
    from Tontof
    J'étais un peu trop à la bourre pour publier du code mardi et puis j'ai appris par hasard qu'aujourd'hui 4 avril était une fête un peu spéciale car pour ce que ça vaut, c'est la Saint 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 !
  • Tuesday 26 March 2024 - 19:04
    from Tontof
    L'idée de Tom Butler pour la génération des pages PHP est vraiment originale. Son implémentation avec 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!
  • Tuesday 19 March 2024 - 19:03
    from Tontof
    Quand dans le dernier article j'ai écrit que je ne pourrais pas garder le rythme des publications, je pensais que je reprendrais tranquillement à l'automne mais force est de constater que c'est avec le printemps qui arrive que je vais pouvoir reprendre la publication de code.

    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 !
  • Sunday 11 June 2023 - 13:06
    from Tontof
    Nous voilà à la moitié des présentations des codes (06/11 coïncidence je ne crois pas) et si j'ai réussi à garder à peu près le rythme depuis mon retour en ligne, je sens qu'avec l'été qui arrive, cela va être plus compliqué et je ne pense pas que je pourrais garder ce rythme. Il me reste 1 ou 2 projets à peu près présentables mais il y a encore un peu de boulot pour les derniers. Donc, pas d'inquiétude si je suis plus discret les prochaines semaines !

    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.
  • Friday 26 May 2023 - 14:00
    from Tontof
    Je vous ai dit que j'avais exploré la programmation fonctionnelle avec 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
  • Friday 19 May 2023 - 15:00
    from Tontof
    La semaine passée était bien chargée et je n'ai pas eu le temps de partager un peu de code. Cette semaine, c'est un début de présentation d'un projet encore en cours. À l'image de 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
  • Friday 05 May 2023 - 16:00
    from Tontof
    Une petite mise à jour pour garder le rythme d'un message par semaine !

    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
  • Friday 28 April 2023 - 17:00
    from Tontof
    L'utilisation d'une présentation classique à l'aide de 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 !
  • Friday 21 April 2023 - 18:00
    from Tontof
    Première présentation d'une mise à jour de 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