📢 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.
📎 Pour télécharger : https://repo.warriordudimanche.net/ZIPFILES/Markdown_parser.zip
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./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
ou la méthode getVar() dont elle a saisi le but et la logique
voire la méthode ifLoggedRender() dont elle a même compris le paramètre $echo !
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 !
ou la méthode consonne():
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» !!!)
Ç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 ...
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 :
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...
Il suffit de mettre kind="captions" au lieu de kind="subtitle" pour que ça fonctionne...
Merci à Bill2 pour la solution ! 
Une matinée perdue pour un «s» manquant à subtitleS : kind="subtitles"
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...
Comme d'habitude, si ça intéresse quelqu'un, on sait jamais... https://api.warriordudimanche.net/b64/ et pour télécharger
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.
Une fois ce module désactivé, la requête aboutit bien à la page article.php...
Bref:
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.
base64:image/jpeg ...)'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...
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
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 !!!
(wink @Sebsauvage : https://sebsauvage.net/links/?-WagqA )
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.
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:
1 - l'utilisateur sélectionne des photos sur son ordinateur
2 - pour chaque image, le script js se charge de:
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.
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.
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 !)
TOUT FONCTIONNE SANS PROBLEME ! (le fameux «ça marche sur mon ordi»)
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.
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.
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 ...
( 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
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...
Le souci avec les CMS en général - et pluXML en particulier - c'est l'usage sur mobile: poster un article, même rapide ou schématique, reste un parcours du combattant dès qu'on doit se passer du combo clavier-souris-grand écran.
Par conséquent, adieu le post vite fait façon microblogging, goodbye la petite photo partagée fissa sur insta, arrivederci le meme envoyé aux copains vite fait sur le gaz...
Je me suis penché sur la question avec le cahier des charges suivant:
On y retrouve un placeholder d'image sur lequel cliquer pour sélectionner des images à envoyer ou prendre une photo. La première photo devient automatiquement la photo de titre et les autres figureront à la fin du post sous forme de galerie minimaliste.
A noter :
Avec ma maquette, hein... je vais pas tout faire non plus !
Il reste sans doute plein de trucs à améliorer (gestion de la rotation des photos, maquette, test sur tous les supports etc) et des bugs à débusquer (j'en ai trouvé un pas méchant en écrivant ce billet) mais, selon le dicton favori des programmeurs:
Le bidule est dispo sur mon repositorix : https://repo.warriordudimanche.net avec le lien direct vers le zip : https://repo.warriordudimanche.net/ZIPFILES/Plinstagram.zip
Dans la rubrique «je bosse une grosse fois pis c'est bon» j'ai eu besoin de pouvoir faire rapidement une page de révision de vocabulaire pour mes élèves; mais quand je dis rapidement, je veux que ce soit fissa avec une friction proche de zéro et sans avoir recours à une appli à la con: copier coller un lien dans l'ENT doit suffire.
J'ai donc opté pour les flashcards, qui sont très efficaces dans ce domaine et j'ai codé un truc vite fait qui ne représente pas une prise de tête quand on veut donner du boulot aux gamins.
En gros, tu écris les mots à apprendre sous la forme
question1:réponse1, question2:réponse2,...
Sur la page, tu cliques sur la carte et elle se retourne.
L'exemple de la capture est là
C'est un peu en béta, hein, mais ça marche. Si ça peut servir, c'est cadeau...
Bon, fô qu'jeul lis... un jour
Donc, pour résumer:
console.log({var})console.warn(), console.error() et console.info() pour différencier l'aspect du message.console.assert(condition,retour) pour éviter un if (condition){console.log(retour)console.trace() pour remonter la pile d'appelsconsole.group('nom'), console.groupCollapsed('nom') et console.groupEnd('nom') pour regrouper des console log() console.table(array) pour présenter les données sous forme de tableau$(selecteur) est équivalent à document.querySelector(selecteur)$$(selecteur) est équivalent à document.querySelectorAll(selecteur)Je me suis aperçu récemment de l'existence de la balise details et je me suis dit que je pourrais me noter celles qui me feraient de l'usage dans un éventuel avenir.
L'élément HTML details sert à créer une ligne de résumé permettant de révéler plus d'informations sur un clic.
L'attribut [open] permet de styler l'ensemble lorsqu'il est ouvert.
<style>
details{font-style:italic;cursor:pointer}
details:after summary{content:"▶"}
details[open]:after summary{content:"▼"}
details p{margin-left: 25px}
</style>
<details>
<summary>Ligne de résumé.</summary>
<p>Tout plein de détails extrêmement intéressants pour ceux qui veulent mais inutiles pour les autres...</p>
</details>
Tout plein de détails extrêmement intéressants pour ceux qui veulent mais inutiles pour les autres...
en savoir plus - compatibilité 92% et pas sur edge
Crée une boîte de dialogue dans laquelle on peut mettre ce que l'on veut. L'attribut open contrôle l'ouverture et la fermeture
en savoir plus - compatibilité 75%, c'est peu...
La balise data permet d'ajouter une valeur interprétable par une machine à une valeur lisible par un humain: plus simplement, on peut relier le nom d'un produit à son ID dans la base de données par exemple.
<p>New Products:</p>
<ul>
<li><data value="398">Mini Ketchup</data></li>
<li><data value="399">Jumbo Ketchup</data></li>
<li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>en savoir plus - compatibilité 99%
On peut spécifier une image qui s'affiche pendant le chargement de la vidéo en faisant <video poster="chemin/vers/image.jpg">
en savoir plus - compatibilité 82%
On peut autoriser ou interdire la vérification orthographique avec cet attribut <input type="text" spellcheck="false">
en savoir plus - compatibilité 99%
Fournit l'url de base et le target pour tous les liens relatifs de la page.
Astuce: en faisant <base target="_blank"> tous les liens s'ouvriront dans une nouvelle page...
en savoir plus - compatibilité 98%
Crée une jolie jauge dont on définit le remplissage afin de représenter visuellement une proportion. Elle utilise les mêmes attributs qu'input number (min, max, value) et y ajoute high, low et optimum qui définissent respectivement à partir de quel nombre la valeur est haute ou basse ainsi que la valeur considérée comme optimale.
Il faudra prévoir l'affichage de la valeur courante (et cette balise n'accepte pas les pseudo-éléments before et after)
<meter value="2" min="0" max="10" low="2">2 out of 10</meter>
meter value="0.6">60%
en savoir plus - compatibilité 95%
Comme meter, progress crée une... barre de progression. Elle utilise les attribut max et value.
Il faudra prévoir l'affichage de la valeur courante (et cette balise n'accepte pas non plus les pseudo-éléments before et after)
<progress value="2" min="0" max="10" low="2">2 out of 10</progress>
progress value="0.6">60%
en savoir plus - compatibilité 98%
Qui sert simplement à mettre en surbrillance un passage de façon plus sémantique.
en savoir plus - compatibilité 50%
pour regrouper les options d'un select <optgoup label="groupe1">
en savoir plus - compatibilité 77%
.jpg)