L'appli de documents que j'ai codée pour le taf...

Ça fait un moment que je parle de certaines de mes applis au fil de billets ou de commentaires, en particulier de celle que j'utilise au boulot. Un très long billet totalement dispensable destiné à ceux que l'enseignement intéresse (ou les logiciels dans l'enseignement)

Je me suis dit que ça pouvait intéresser des gens de voir avec quoi je taffe.

Les autres, vous  pouvez y aller...

Les attentes (le pourquoi du comment j'ai décidé de faire mon propre truc)

Tout est venu de l'aspect pour le moins instable et aléatoire des logiciels et environnements proposés dans le cadre de mon boulot que ce soit au niveau du ministère, de l'académie, du département ou même du collège.

1- du problème des évolutions 👎

En gros, on change soit de logiciel soit d'environnement soit de machines à peu près tous les ans ou les deux ans, ce qui induit une certaine appréhension au niveau de la conservation de nos données: les exercices réalisés dans les exerciseurs disparaissent, les données et documents de l'ENT également... bref: c'est du taf inutile à se retaper tous les ans (ou deux ans) 💩

2- du problème des logiciels 👎

Mon autre souci, c'est que les logiciels proposés sont rarement utilisés par ceux qui les codent puisqu'il s'agit d'applis à caractère administratif (appel/cahier de texte etc) ou pédagogiques (exerciseurs / stockage de données / expos etc)

Résultat, l'UI est merdique et il est impossible de faire la moindre opération sans un nombre de clics qui à lui seul justifierait qu'on vire le bureau d'études. Quand tu dois swapper clavier souris trois fois pour juste une case à cocher, on a un problème. 😬

Ce problème vient du fait qu'à vouloir donner la possibilité de réaliser des choses complexes, on complexifie inutilement la réalisation des choses simples... or, on fait plus souvent des cases à cocher ou des cases de texte à remplir que des formulaires insérés dans des vidéos. 😭

3- de mes attentes persos quant aux applis

Pour ma part, j'attends d'une appli destinée aux élèves et aux professeurs que:

Pour les élèves:

  1. la consultation et les exercices se retrouvent sur la même plate-forme et dans des espaces clairs
  2. les élèves n'aient pas à se logger pour pouvoir consulter ou s'exercer ( limiter la friction de travail selon mon adage: «si c'est galère il va pas le faire» 😅)
  3. ça passe partout y compris et surtout SUR LEUR PITIN DE TELEPHONES ! Quand tu vois l'ENT sur mobile, ça te donne des envies de suicide collectif.
  4. que ce soit clair, lisible et simple.
  5. que tous les documents / pdf etc utilisés lors d'un cours soient dispo depuis un seul lien de partage

Pour moi:

  1. pas de perte de temps au moment de mettre en ligne: je copiecolle le lien de partage de mon document dans l'ENT et c'est tout.
  2. pas de perte d'énergie au moment de réaliser les documents et travaux (limiter la friction d'usage selon mon adage «la vie est trop courte pour se faire chier deux heures sur un document»)
  3. mise en ligne rapide et simple des documents (et possibilité de partager des documents sur une page sans la réaliser vraiment: génération auto de la page de partage)
  4. pas de perte de mon boulot: c'est sur mon serveur, pas sur une merde académique hébergée aux USA qui va se perdre ou être fliquée.
  5. pas de flicage ni de moi ni de mes élèves.
  6. rapidité et simplicité de la création d'exercices

Naissance de Documentos

Il s'agit d'une appli en ligne de consultation libre des documents utilisés en cours.

Côté élève, un lien de partage conduit à la page que j'utilise en classe pour faire cours: il a donc toutes les ressources pour revoir la leçon ou récupérer le cours en un seul lien.

Cette même page me permet de mettre une image en plein écran en un clic, de faire plusieurs diapos simplement etc.

Côté enseignant, elle fournit un explorateur de fichiers , un éditeur de pages etc. On peut ainsi créer un nouveau dossier de travail pour les 5ème, y déposer en une fois mp3, images etc, y créer une page dans laquelle on organise le tout et même créer des exercices numériques sans que ça prenne plus de temps de le faire là que de le faire sous libreoffice (souvent, la version papier me prend grave plus de temps que la version numérique en fait 😅)

Ok, mais ça a quelle tronche ton truc ?

La racine de la page d'accueil donne accès à tous les niveaux

documentos1 copie.jpg

et dans chaque niveau, une page unique liste tous les documents disponibles. Quand le prof cherche le document du jour, il peut filtrer en tapant une partie du nom du dossier contenant lesdits documents.

documentos2 copie.jpg

Une fois sur le document, l'élève (ou le prof en classe) a une page claire avec documentation, questions, liens vers les fiches de révision et pdf éventuellement distribué.

document copie.jpg

L'enseignant peut également ajouter des éléments de formulaire dynamiques permettant de sélectionner, cocher, ordonner, compléter

documentos3 copie.jpg

Vous noterez au passage qu'on peut ajouter un bouton permettant de se rendre directement à un temps T d'une vidéo ou d'un enregistrement, pour guider les élèves.

J'ai ajouté un bouton servant à changer la police de caractères pour l'opendyslexic:

documentos3dys copie.jpg

Et côté admin alors ?

Le prof a un filemanager pour créer des dossiers et des fichiers simplement, uploader en glisser-déposer, éditer des fichiers. L'accent a été mis sur la rapidité et la simplicité d'utilisation.

filemanager copie.jpg

Si on se contente d'uploader sans mettre de page, le lien générera une page complète avec les documents. Sinon, on ajoute une page html qu'on édite ensuite (deux clics)

editeur copie.jpg

Tous les fichiers constituant un «document de classe» se trouvent dans le même dossier par défaut: si on crée des sous-dossiers dans celui du document, chaque sous-dossier devient une diapo indépendante générée comme des pages individuelles. Lorsqu'on se rend sur la page de partage, on passera de l'une à l'autre avec les flèches du clavier ou celles apparaissant sur les côtés de l'écran... pas besoin de se faire chmir à créer les diapos, les lier que sais-je.

On a donc: ROOT> niveau> document> fichiers ou ROOT> niveau> document> diapo1>fichiers , ROOT> niveau> document> fichiers>diapo2>fichiers etc.

Et la réalisation d'exercices alors ?

Pour la mise en page, on utilise markdown, donc, du texte brut. Hors de question pour moi de devoir me prendre le chou avec des mises en page compliquées.

Sur ce principe, pas de boîtes de dialogue, de clics multiples pour créer des exos: tout se fait par deux types de «balises» sans lâcher son clavier:

les {{}}

Propres à mon framework perso, je les ai adaptées à Documentos:

  • pour insérer un fichier à un endroit: {{fichier.ext}} et c'est tout.
  • pour insérer tous les fichiers d'un type {{*.jpg}}, et si on ne se souvient pas bien du nom {{*moncul.jpg}} fonctionne très bien.
  • pas de boutons ou balises spéciales selon les documents: documentos se démerde seul... ainsi {{fichier.jpg}} crée une image qui passe en fullscreen au clic, {{fichier.mp3}} crée un lecteur audio, {{fichier.mp4}} crée un lecteur video etc...
  • on peut ajouter facilement des choses plus poussées en insérant des {{fichier.css}} ou {{fichier.js}}spécifiques.
  • L'appli offre certaines constantes accessibles de la même façon: {{BLEU}} change le fond en bleu, {{FULLSCREEN}} passe en fullscreen dès le chargement, {{FECHA}} ajoute la date du jour en espagnol...

les []

Les éléments de formulaire sont générés via des commandes gu genre {{app->flashcards("")}} qui ne sont pas super simple à mémoriser ou sexy à voir. Du coup, j'ai créé des aliases plus simples qui utilisent les crochets. Ainsi:

  • une case texte ? [texte à trouver]
  • Il faut accepter plusieurs réponses ? [réponse1+réponse2]
  • une liste déroulante ? [choix 1,choix 2, +bon choix,choix3]
  • Une case à cocher ? []texte d'une case à ne pas cocher], [+]texte d'une à case cocher]
  • un verbe à conjuguer ? [conjugaison:llamo,llamas,llama,llamamos,llamáis,llaman]
  • une phrase à ordonner ? [ordonne:La primera pelota está en la estantería.]
  • des flashcards ? [flashcards:texteface:textedos;texteface2:textedos2]
  • Une liste de mots à trouver ? [mots:textefr:texteesp;textefr2:texteesp2]
  • Un mot avec traduction ? [texte es=texte fr]
  • Un bouton pour aller au temps T d'un media ? [espana.mp3>0:07] ou [>0:07] si un seul media est présent sur la page.
  • Un bouton pour stocker les réponses de l'élève ? [envoyer]
  • Un enregistreur pour les élèves n'ayant pas d'appli d'enregistrement ? [enregistreur]

Le fait de ne jamais quitter le clavier supprime la plupart des clics et la perte de temps du passage entre clavier et souris. ça s'avère redoutable dès qu'on a un peu l'habitude: on ne s'occupe que du contenu sans jamais perdre de temps à chercher comment faire (friction d'utilisation minimale)

Par contre, c'est moche

Tu as parlé de stocker les réponses des élèves ! ET LE RGPD ? 😱

T'inquiète, mon con de chef m'a suffisamment fait chier avec ça pour que je ne coure aucun risque (faire une recherche sur ce site avec le mot clé «j'abandonne» 😡):

  1. rien n'est hébergé hors serveur,
  2. je n'utilise rien que je n'ai fait moi-même (aucune lib notamment)
  3. les données des formulaires remplis qui sont sauvegardées le sont dans un fichier anonymisé: à aucun moment l'élève ne renseigne son nom et à aucun moment une donnée perso n'est utilisée pour le nommage de fichiers. Quand l'élève a envoyé le formulaire, le site lui donne un code à fournir au prof afin qu'il ait accès à la copie.

J'utilise Documentos depuis 2018 et je le modifie régulièrement. L'utilisation au quotidien est top et lors du confinement, je n'ai pas eu à changer grand-chose pour que le distanciel soit possible... je pouvais fournir presque en temps réel et mes élèves ont pu bosser dès les premières minutes de confinement sans être déroutés et depuis n'importe quel appareil (là où l'ENT était à genoux dès 8:10)

Pas de lien ?!

Je ne fournis pas le code de Documentos pour plusieurs raisons:

  1. c'est codé pour moi, avec mes habitudes... ça peut ne pas convenir à d'autres
  2. c'est fait pour l'espagnol: on peut l'adapter, mais faut coder
  3. il y a toujours des bugs par ci par là: je m'en accommode parce que je n'ai pas le temps de coder plus que ça et que ça ne touche pas le côté élève... mais ce serait chiant pour un autre.
  4. j'ai beau essayer de maintenir la cohérence et la logique du code, le patch à la truelle nécessite de reprendre certains aspects.
  5. pas de lien de démo car les documents fournis aux élèves sont copyrightés et que je ne veux pas d'emmerdes avec les éditeurs de bouquins

Après, on peut discuter, hein 😉

GitHub - LeaVerou/md-block: A custom element for rendering stylable (light DOM) Markdown

Un web component pour faire du markdown facilement par Lea Verou. Hop, de côté.

  • Zero dependencies (except marked, obvs, which is only loaded if a <md-block> or <md-span> element is actually used on the page)
  • Styleable with regular selectors, just like the rest of the page
  • Load external Markdown files or render inline content
  • Customize start heading level
  • Also comes with , for lightweight inline markdown
  • Prism is automatically used for syntax highlighting, if included (but can be included dynamically too)

Ha zut, comme dit ici https://bookmarks.ecyseo.net/?sAzyVQ ça ne fonctionne que sous chrome.... Merci copain...

POURQUOI ?! PFFF

L'outil inutile du jour : UNIBAR

Unicode, c'est bien joli, mais c'est chiant à coller quand t'en as besoin. Du coup, tu lâches l'affaire.

Bon, ben j'ai bricolé une page pour copier ces caractères qu'on utilise le plus.

J'vous préviens, j'ai fait ça   en mode vite fait
Qui a dit   «comme toujours» ?
Bon, c'est pas complètement  faux, en même temps...

Le but est de copier rapidement dans le presse-papier le (ou les) caractères unicode désirés.

Quand on clique sur un caractère il se passe deux choses:

  • 🥇 ledit caractère est copié dans le presse-papier
  • 🥈 il est également ajouté à la suite dans le bouton du haut qui donne la possibilité de cumuler plusieurs caractères de suite. (clic sur le bouton copie le contenu du bouton, double-clic l'efface)

captureunibar.jpg

Et pour configurer ?

Ben tu édites le code passque  j'avais pas envie de faire tout  un bouzin sécurisé en php  pour sauvegarder la config  alors qu'il suffit de modifier le  code et que du coup ça reste  du html avec JS tout bête
Il SUFFIT d'éditer les lignes  de variables unicode...

Capture du 2022-04-22 18-21-11.jpg

Vous noterez que les chaînes peuvent n'être qu'un seul caractère unicode ou toute une série, si vous en utilisez régulièrement.



unicode={
    "ONGLET1":"chaine1,chaine2,chaine3,etc",
    "ONGLET2":"chaine1,chaine2,chaine3,etc",
}

Comme c'est du html+js+css, pas besoin d'un serveur, on peut l'utiliser en local. 🎉

Ok, mais à quoi ça sert en vrai ?!

Ben je sais pas moi ! Vu que vous pouvez mettre les caractères/chaînes que vous voulez, ça peut servir pour les matheux (coucou les profs) qui ont besoin des symboles de math simplement ou ponctuellement , en musique, ou en électronique... explorez unicode !

Download

⭐ Pour l'utiliser, c'est par là (∩`-´)⊃━━☆゚.*・。゚ http://outils.warriordudimanche.net/outils/unibar

⭐ Pour le télécharger, c'est par ici (ノʘヮʘ)ノ*:・゚✧ http://outils.warriordudimanche.net/outils/unibar/unibar.zip

GitHub - asvd/microlight: highlights code in any programming language - Le Hollandais Volant

De la «coloration syntaxique» en 2ko ? je prends ! La différenciation se fait en jouant sur l'intensité et le contraste de la couleur de base.

Très joli rendu en tout cas !

via TImo : https://lehollandaisvolant.net/?id=20220226192717

petit outil: Bookmarklet generator 🆕 [EDIT]

Si toi aussi tu veux te faire un petit bookmarklet pour envoyer des données de la page courante vers un autre site, alors tu vas kiffer 😍 parce que ce petit bout de code te permet de le faire sans rien coder 😎.

Heing ?! 🤨

J'explique:

Si on veut pouvoir:

  • rechercher une sélection sur un site particulier (genre sur wikipedia, jeux videos.com, allocine...) ,
  • envoyer le titre de la page en cours et/ou son URL vers un site qui va s'en servir (par exemple pour bookmarker la page en cours),

alors ça peut se faire ici.

Fais voir ?

Voici deux exemples:

Capture du 2022-04-02 11-54-34.png

Capture du 2022-04-02 12-12-53.png

Quid ?

Pour faire simple,

  1. on donne un nom au bookmarklet,
  2. on choisit les données qui doivent être envoyées,
  3. on spécifie l'URL vers laquelle elles doivent être envoyées.

Le bookmarklet est généré en temps réel et une fois les réglages faits, il suffit de glisser-déposer le lien du bas.

J'ai ajouté la possibilité de modifier la variable permettant de passer les données; en effet, duckduckgo utilisera q=[recherche] mais un autre site pourra demander query=[recherche]...

De plus, on peut spécifier de ne pas utiliser le format URL?variable=[donnée] mais URL/[donnée] pour les sites ayant une rewriteurl (comme wikipedia qui exige un format fr.wikipedia.org/wiki/[RECHERCHE] )

Enfin, si vous spécifiez une URL contenant déjà des paramètres GET (comme mespagesquejaime.com/ajouter.php?user=MOI&apikey=321fd5613e32), le script le prendra en compte et les nouveaux paramètres s'ajouteront correctement ( mespagesquejaime.com/ajouter.php?user=MOI&apikey=321fd5613e32&title=mon cul sur la commode&url=www.monculsurlacommode.fr )

Exemple ?

Vous pouvez essayer de générer un bookmarklet pour rechercher directement la sélection sur youtube:

  1. donnez le nom «rechercher sur youtube»
  2. cochez le premier item : «le texte sélectionné» et renommez la variable en «search_query»
  3. remplissez la case URL avec : https://www.youtube.com/results/

Et voilà.

Ajout

Sur l'idée de DukeArt j'ai ajouté la possibilité d'éditer le code (vive contenteditable et obj.toggleAttribute 👍 ) ! Merci the Duke 🤘😎🤘

License

Vous pouvez utiliser librement et l'outil et le code en mode DBAD. Pour le télécharger, c'est par là

Il est possible de l'utiliser sans serveur php vu que c'est du HTML+JS vanilla (mais le script de téléchargement du script ne fonctionnera pas).

MAJ Plugin PluXML: Markdown_parser

📢 Petite mise à jour du plugin Markdown_parser qui permet d'ajouter la gestion du markdown dans PluXML.

☑ J'ai étendu le markdown aux commentaires

☑ j'ai ajouté la possibilité d'accéder à des caractères unicodes directement.

☑ Vous pouvez choisir lesquels en passant par la page de config et en collant les caractères à la suite. Le plugin générera un bouton par caractère.

config.png

unicode.png

📎 Pour télécharger : https://repo.warriordudimanche.net/ZIPFILES/Markdown_parser.zip

DBAD by philsturgeon

Ma future licence favorite ?

# DON'T BE A DICK PUBLIC LICENSE

> Version 1.1, December 2016

> Copyright (C) [year] [fullname]

Everyone is permitted to copy and distribute verbatim or modified
copies of this license document.

> DON'T BE A DICK PUBLIC LICENSE
> TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

1. Do whatever you like with the original work, just don't be a dick.

   Being a dick includes - but is not limited to - the following instances:

 1a. Outright copyright infringement - Don't just copy this and change the name.
 1b. Selling the unmodified original with no work done what-so-ever, that's REALLY being a dick.
 1c. Modifying the original work to contain hidden harmful content. That would make you a PROPER dick.

2. If you become rich through modifications, related works/services, or supporting the original work,
share the love. Only a dick would make loads off this work and not buy the original work's
creator(s) a pint.

3. Code is provided with no warranty. Using somebody else's code and bitching when it goes wrong makes
you a DONKEY dick. Fix the problem yourself. A non-dick would submit the fix back.
Merci à https://nicolas-delsaux.hd.free.fr/Shaarli/?X31NQQ

Une extension VS Code qui génère de la documentation à l’aide d’IA

/me regarde ça d'un oeil sceptique.

/me teste.

mâchoire de /me tombe par terre

Donc, c'est une extension pour VSCode qui est censée générer la doc d'une fonction ou d'une méthode automatiquement, toute seule et en un seul clic.

Taquin, j'ai testé avec des méthodes tirées d'applis à moi et ben franchement, elle s'en sort vraiment pas mal !

Elle s'avère capable d'interpréter plutôt bien le code sélectionné:

elle a par exemple «compris» la méthode insertValue() de mon framework et a déduit qu'elle servait à insérer des valeurs dans un template

Capture du 2022-03-16 13-21-19.png

ou la méthode getVar() dont elle a saisi le but et la logique

Capture du 2022-03-16 13-22-58 copie.jpg

voire la méthode ifLoggedRender() dont elle a même compris le paramètre $echo !

Capture du 2022-03-16 13-23-39.png

Plus fort ?!

Le test a été poussé avec des méthodes moins évidentes pour une machine mais plus pour un humain, comme une méthode destinée à renvoyer le pluriel d'un nom en espagnol, pour laquelle AIDoc déduit la règle grammaticale pratiquement au mot près !

Capture du 2022-03-16 13-17-03 copie.jpg

ou la méthode consonne():

Capture du 2022-03-16 13-16-30 copie.jpg

et même la méthode estarGerondif() pour retourner la forme progressive d'un verbe en espagnol qu'AIDoc a comprise (identifiant la forme grammaticale «present tense» !!!)

Capture du 2022-03-16 13-16-15 copie.jpg

autres exemples

Capture du 2022-03-16 13-15-21 copie.jpg

Capture du 2022-03-16 13-15-50 copie.jpg Capture du 2022-03-16 15-19-38 copie.jpg Capture du 2022-03-16 15-18-49 copie.jpg

C'est un truc de fifou

Conclusion

Ça marche tellement bien que je vois une autre utilisation au truc: t'expliquer à quoi servait ton code quand tu y reviens trois semaines plus tard et que t'y comprends plus rien ...

<video> : c'est du <track> cas ! HELP [EDIT 2h après] [Merci Bill2]

Et allez, encore une matinée de perdue pour un truc que j'avais pas prévu et qui devrait fonctionner parfaitement: la balise <video> et la balise <track> pour ajouter les sous-titres.

Pour afficher une video pour les élèves avec les sous-titres que j'ai traduit de youtube, en gros, je fais un truc comme ça:


<video controls title="sdfgsdfg" preload="auto" >
    <source src="http://serveur/Marco Castelblanco.mp4"  type="video/mp4">
    <track kind="subtitle" srclang="fr" label="sous-titre" src="http://serveur/Marco Castelblanco.vtt" default="true"/>
    Sorry, your browser doesn't support embedded videos.
</video>

Pour ce fichier de sous-titres, J'ai :

  • récupéré vidéo+sous-titres avec JDownloader
  • j'ai traduit les sous-titres
  • j'ai converti le format .srt fourni par yt en .vtt, le format compatible avec track

MAIS ÇA MARCHE PAS

  • J'ai beau essayer en local, en distant,
  • en http et en https,
  • dans un fichier html ou php,
  • sur firefox/chromium/vivaldi,
  • tous les fichiers se chargent normalement (ils n'apparaissent pas comme 404 dans la console-réseau.)
  • l'encodage est bon
  • le format de fichier (vtt) est bon aussi...
  • [edit] l'attribut crossorigin sur video ne change rien

J'ai cherché partout, je me prends la tête depuis des heures...

J'ai même essayé de forcer le track.mode à "showing" au cas où. Mais non.

Si quelqu'un a une idée, je prends...

Solution !

Il suffit de mettre kind="captions" au lieu de kind="subtitle" pour que ça fonctionne...

Merci à Bill2 pour la solution !

EN FAIT C'EST MOI K'É COUILLON

Une matinée perdue pour un «s» manquant à subtitleS : kind="subtitles"

B64: outil + API

En passant, je vous mets le lien vers un petit outil pour convertie en et de Base64.

Bon, yen a plein, hein, en particulier celui de Timo ... J'en ai quand même refait un from scratch pour pouvoir l'utiliser comme une appli online (le front end ci-dessous) ou bien comme une «API» utilisable via un bookmarklet par exemple: ainsi, en sélectionnant du texte puis en lançant le bookmarklet qui va bien, on peut encoder/décoder en un clic...

Capture du 2022-03-10 13-50-08.png

Comme d'habitude, si ça intéresse quelqu'un, on sait jamais... https://api.warriordudimanche.net/b64/ et pour télécharger

Plinstagram: j'ai trouvé Euréka pis tout ça... Modsecurity

Yesss ! J'ai trouvé   pourquoi  ça bloquait !

Dans Cpanel, il y a une option activée par défaut, c'est le module ModSecurity qui est là précisément pour kéblo les requêtes un peu... comment dire... originales ? exotiques ? Bref, exactement celles que semble faire Plinstagram.

modsecurity.jpg

https://www.webfulcreations.com/how-to-fix-an-appropriate-representation-of-the-requested-resource-could-not-be-found-on-this-server-this-error-was-generated-by-mod_security-error/[/center]

Une fois ce module désactivé, la requête aboutit bien à la page article.php...

Chus trô cônten !  Comment j'a pô  lâché l'affaire
Mais bon, premièrement je suis  cramé et j'ai passé deux jours   là-dessus par pure obstination.
Et deuxièmement, je ne suis  pas persuadé qu'il soit très   malin de laisser désactivé un   module d'Apache qui protège le   serveur des requêtes malignes...

Bref: pain.jpeg



Mardi 1 Mars 2022: Plinstagram, c'est toujours pas ça... [Edit à 14:23]

Précédemment sur le Warriordudimanche: https://warriordudimanche.net/index.php?article1636/ya-pas-que-les-voitures-qui-sont-allergiques-vanille-php-aussi-fait-trucs-passionnants-help

Bon, je bosse dessus parce que je suis entêté et que j'aime bien comprendre mais là... j'ai du mal.

Ce que j'ai fait

Côté frontend

  • J'ai épuré mon code JS au max
  • j'ai simplifié le formulaire en laissant tomber les noms de fichier: je n'envoie que le contenu de l'image en base64 et je génère un nom backend.
  • j'ai changé l'ajout des hidden servant à transmettre les images au format base64: au lieu de les ajouter au fur et à mesure de la génération des images redimensionnées, je les crée dans l'événement onSubmit du formulaire.
  • j'ai essayé de virer l'enctype du formulaire vu que, avec l'URL_rewriting à off j'obtenais une erreur 406 en distant... J'ai même essayé en text/plain pour voir... C'est pas ça.

    Capture du 2022-03-01 11-03-18.png

côté backend

  • j'ai simplifié au max
  • j'ai ajouté la création d'un nom de fichier local (l'extension est déduite des données base64 qui démarrent comme suit: base64:image/jpeg ...)
  • j'ai regardé, en local, la taille des données envoyées:
    'data' => 
      array (size=6)
        0 => string 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAOEBLADAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1'... (length=286259)
        1 => string 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAOEBLADAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1'... (length=782555)
        2 => string 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAOEBLADAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1'... (length=900279)
        3 => string 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCASwA4QDAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1'... (length=903563)
        4 => string 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAOEBLADAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1'... (length=636547)
        5 => string 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAOEBLADAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1'... (length=1020399)

Je sais, on a l'impression que c'est toujours la même image mais en fait non... c'est sans doute dû au fait que base64 est très verbeux et que le début est toujours le même pour des images.

Le tout fait un post d'environ 4.5 Mo ce qui n'est pas choquant dans un formulaire multipart/form-data et reste très en dessous des limites de PHP_INI sur le serveur.

Aucun fichier .htaccess ne vient non plus foutre le bran...

HELP

Encore une fois, ça marche impeccable en local.

J'ai commenté au max mon code pour le cas où quelqu'un se sent de regarder, parce que pour ma part, je commence à voir flou et à avoir des hallucinations... je vous mets un zip: http://warriordudimanche.net/vrac/Plinstagram.zip

PISTE DE RECHERCHE

Omagad ! en cherchant, j'ai trouvé un truc: un problème éventuel avec ModSecurity disponible sur CPanel ( https://doc.ubuntu-fr.org/modsecurity & https://www.webfulcreations.com/how-to-fix-an-appropriate-representation-of-the-requested-resource-could-not-be-found-on-this-server-this-error-was-generated-by-mod_security-error/ ) En le mettant sur off depuis cpanel, mon script parvient à la page article.php !

Bon, ça fait une erreur de token, hein, mais on progresse !!!

Ya pas que les voitures qui sont allergiques à la vanille... PHP aussi fait des trucs passionnants. HELP

(wink @Sebsauvage : https://sebsauvage.net/links/?-WagqA )

Bon, accrochez-vous les lacets,   mettez du collyre, prenez un   Xanax, parce que là,   j'ai besoin de parler.

Je me suis aperçu que mon plugin Plinstagram faisait des trucs étranges et refusait parfois de poster. Pensant à une erreur d'identification, j'ai repris le code mais rien n'y faisait.

J'ai commencé à avoir des problèmes de redirection incompréhensibles: le header("location") ne fonctionnait pas (voir https://warriordudimanche.net/article1635/1635 )

Une fois la ruse très moche appliquée, ça semblait revenu à la normale. Puis j'ai décidé d'aller marcher un peu et j'ai pris des photos dans l'idée de tester à nouveau Plinstagram.

Et là, c'est le drame

J'ai beau tout essayer, pas moyen d'envoyer le post avec les photos... mais curieusement, j'aboutis à une erreur 404 et pas à une erreur d'exécution. Je me dis que ça doit être un problème de taille de formulaire et je me rappelle que, comme un con, j'ai omis de virer l'input files du formulaire avant envoi. J'explique rapidement comment fonctionne Plinstagram:

Côté JS

1 - l'utilisateur sélectionne des photos sur son ordinateur

2 - pour chaque image, le script js se charge de:

  • récupérer les images sélectionnées,
  • créer une miniature avec un canvas
  • stocker l'image réduite sous forme de donnée base64 dans un input hidden (avec le nom de fichier dans un autre input hidden) créés à la volée

Ainsi on obtient un $_POST[data] et un $_POST[filename] qui contiennent chacun un tableau avec les données de chaque image pour l'un et le nom de chaque image pour l'autre.

Quand on poste, le script vire l'input file pour éviter l'upload de grosses photos.

Côté PHP

Vient ensuite le hook AdminArticlePrepend de la page core/admin/article.php vers laquelle pointe le formulaire de plinstagram: celui-ci se charge de :

1 - parcourir l'array des images redimensionnées postées en base64,

2 - récupérer le nom de chaque image

3 - sauvegarder localement chaque image dans un sous-dossier dédié à l'article

4 - générer une galerie qu'il ajoute au corps du post

5 - finaliser la création des données de l'article.

À ce moment-là pluXML reprend la main et s'occupe du stockage de ces données.

Quand je teste en distant (sur WDD)

Avec une photo, tout se passe normalement. Si j'en mets ne serait-ce que deux, pluXML me renvoie à la page 404, comme si l'URL était fausse: or, il n'en est rien ! L'URL de la barre d'adresse est la bonne, celle du formulaire aussi... pourtant, avec plus d'une photo, la requête n'arrive jamais à core/admin/article.php

Pire, une fois sur la page 404, si je clique dans la barre d'adresse puis que j'appuie sur entrée, j'arrive sans encombre à la page voulue (mais sans les données de formulaire bien entendu): l'URL est donc bonne.

J'ai pensé à une redirection foireuse mais la seule redirection qui reste est celle qui se fait AVANT le formulaire et seulement dans le cas où l'utilisateur n'est pas connecté.

Et puis ça ne semble pas être la faute de mon script PHP vu qu'on n'arrive même pas jusqu'à lui (j'ai collé des exit('moncul'); partout pour voir et rien !)

Quand je teste en local... ô surprise!

TOUT FONCTIONNE SANS PROBLEME ! (le fameux «ça marche sur mon ordi»)

  • J'ai pensé à un problème de version de PHP: j'ai essayé de changer et c'est pas ça
  • j'ai songé à une limite de la taille de fichiers ou la limite de taille de post... c'est pas ça (puis ça générerait une erreur, pas un pseudo 404)

Pour résumer

index.jpeg

Conclusion

J'en suis à me dire qu'il doit y avoir un genre de restriction pour la taille des données contenues dans des inputs et que cette restriction ne doit pas être la même en local.

Une autre piste que je dois explorer est une éventuelle incompatibilité entre deux plugins... Mais je vois pas lesquels et pis là, faut que j'aille pleurer d'abord.

EDIT dix minutes plus tard:

Tiens, la différence entre le local et le distant, c'est la configuration du rewrite URL dans pluXML: activée en distant. Je mets sur OFF et là, j'obtiens une erreur 406:

Not Acceptable: An appropriate representation of the requested resource could not be found on this server.

ça progresse. Je retourne pleurer.

Cette conférence sur le thème de   la loose en programmation et la   remise en question de mes   passions, compétences et priorités   générales dans la vie est à présent   terminée... Vous pouvez disposer.

Note : Je pense que je vais faire un "shaarli" pour partager des commandes bash/batch/* en tout genre - Le Hollandais Volant - Liens en vrac de sebsauvage - Le Hollandais Volant

Pour SnippetVamp, j'ai refait une version from scratch récemment en utilisant mon framework perso, un peu pour le tester. Cette version utilise SQLite pour le stockage des snippets, possède un meilleur moteur de recherche et s'avère plus rapide.

C'est la version actuellement en ligne sur http://snippetvamp.warriordudimanche.net/

Par contre, ce n'est pas la version sur github: tenir tous mes dépôts github à jour me prenait trop de temps et je trouve ça trop compliqué pour mon usage, j'ai lâché l'affaire.

Si certains sont intéressés, je peux mettre cette version à disposition de qui n'en veut ...

@Knah Tsaeb :

( https://book.knah-tsaeb.org/?yZAGiQ )

Merci copain ! J'ai beaucoup bossé sur Helium et ça m'a permis d'évoluer (beaucoup) dans ma façon de coder et d'envisager les applis que je fais: avant, je partais du principe tout from scratch et en mode structure minimaliste et peu de fichiers (one script si possible)... le souci majeur étant que tu passes ton temps à réinventer la roue ou à essayer de faire coller tes briques de codes entre-elles...

Avec Helium, je pars d'un environnement cohérent et j'ajoute la logique de l'appli, les templates de l'appli, le style de l'appli le tout dans un dossier spécifique. Si j'ai besoin de nouveaux ajouts qui me semblent dignes d'être pérennisés, je les intègre au framework.

Le résultat est plus cohérent, plus simple à mettre à jour, plus cloisonné, plus rapide à mettre en oeuvre (en général )

Tu me diras, pourquoi pas un framework existant ? Ben parce que j'adore coder et qu'on n'apprend pas un langage en utilisant les frameworks mais en mettant les doigts dans le cambouis et en se grattant la tête pour savoir comment faire ou pourquoi ça ne marche pas

Via https://bookmarks.ecyseo.net/?0poTJA

Nouveau ! Bloguons JavaScript

J'adore Mastodon : tu suis quelqu'un parce que tu l'as trouvé drôle et tu apprends qu'il a un blog sur le javascript qu'il partage parce que « il se dit qu'il ne doit pas être le seul javascripteur sur la planète.»

Si vous vous dites, mouais encore un blog sur JS, gardez à l'esprit que voilà un bloggueur qui intitule un billet «jQuery doit mourir», qui écrit qu'XMLHttpRequest est «inutilement compliqué» mais que dieu merci on a créé fetch, même si on ne comprend pas toujours bien ce qu'il renvoie...

Et là, je suis certain   que vous allez y jeter   un oeil !
En tout cas, je souhaite   une longue vie à   Blogons javascript !
Fil RSS des articles