Des JSFiddle sans en-tête

Parfois, les JSFiddle servent de schémas interactifs plus que de démonstrations de code HTML/CSS/JS. Pour ce genre de cas, il serait appréciable de pouvoir rendre le fiddle sans en-tête, comme ici, par opposition à cela.

Ca améliorerait le rendu de contenus interactifs (comme sur distill.pub) et peut-être encouragerait ce type de contenus.

Techniquement, ça me semble assez simple à implémenter, il suffit de gérer les urls https://fiddle.jshell.net/{id}/{version}/show/light/.

D’ailleurs, je me suis demander pourquoi ne pas inclure des parties de codes interactifs. C’est moyen niveau sécurité ou performance ?

Est-ce que le problème est pas plutôt le fait d’utiliser JSFiddle pour ce genre de choses, plutôt qu’une question d’affichage ?

Je ne dis pas qu’il ne faut pas d’interactivité, mais la solution est quand même assez peu adaptée à cet usage.

Je sais qu’il y a de nombreux sites qui ressemblent à ce dernier (je ne sais même plus ce que JSFiddle fait. Je me souviens juste du nom. Je me dis juste que ça permet à quelqu’un, directement sur le site de modifier une variable ou un argument et voir ce que ça fait comme changement. Quand je vais sur une documentation pour le HTML ou CSS (W3Schools ou le MDN), ça m’a beaucoup aidé.

Effectivement, ça marche assez bien pour ce genre de choses! Cela dit, il me semble qu’en l’occurrence, dans le cours de @Vayel, on n’est pas du tout intéressé par le HTML/CSS/JavaScript. Ce qui est intéressant pour nous, lecteurs, c’est simplement l’affichage dynamique du résultat. Et pour le coup, ça crée une dépendance à un service externe qui n’est pas vraiment justifiée, à mon avis, et qui relève plus du bricolage que de la vraie solution.

Je ne comprends pas ce qu’il propose pour le coup. Serait-il possible de me l’expliquer différemment que dans le message original ?

Je crois que Vayel propose d’utiliser JSFiddle en enlevant la possibilité de voir le HTML/CSS/JavaScript.

Quant à moi, je propose d’essayer de réfléchir à une solution qui ne nous fait pas dépendre d’un service externe pour du contenu qui fait partie du corps du texte, au même titre qu’une liste à puce.

Ma motivation derrière cela est double:

• dépendre d’un service externe est jamais très cool si celui-ci vient à disparaître
• ça rend le rendu d’un élément de texte vers du LaTeX encore plus complexe (voire quasi-impossible) qu’il ne l’est maintenant, et donc, probablement, moins fonctionnel, et ça, c’est vraiment pas cool

@dab, as-tu des alternatives en tête ?

Honnêtement, pas vraiment.
Je me demande d’ailleursà quel point ces animations sont pertinentes et utiles, mais si une demande est là, il faudra sûrement faire quelque chose.

Intégrer cela directement dans la mise en forme serait absolument irréaliste, Markdown n’étant pas fait pour ça et notre « parfum » déjà bien assez modifié à mon avis.

L’idée qui me vient en tête serait d’interpréter les images au format SVG comme des balises <svg> (en filtrant les scripts sauf quand ils sont explicitement autorisés, comme c’est le cas maintenant avec les fiddles), ce qui permetterait aux personnes qui le désirent d’animer le contenu de leurs SVG.

Si l’on n’a pas la sémantique du HTML, c’est une solution qui est meilleure, à mon avis, qu’une image animée, puisqu’elle permet au moins d’avoir du texte directement reconnu par le navigateur. Ca règle donc une partie des problèmes d’intégration, mais pas tous.

Ca n’a pas encore été proposé, mais je ne pense pas qu’autoriser du JavaScript ou du CSS dans les tutoriels soit envisageable, par sa portée globale.

Dans tous les cas, je pense que ça devrait être utilisé dans des conditions vraiment exceptionnelles et où une autre solution n’est pas envisageable.

Je me demande d’ailleursà quel point ces animations sont pertinentes et utiles, mais si une demande est là, il faudra sûrement faire quelque chose.

Perso je vois des tas de besoins légitimes pour les tutos musicaux.

Typiquement, pouvoir générer une partition interactive (qui se "lit" toute seule) avec un bête script (comme sur wikipedia) plutôt que se taper un upload sur youtube d’une capture video d’un logiciel d’édition de partitions…

Dans ce domaine, le moindre exercice demanderait de jouer des sons et un minimum d’interactivité pour être agréable.

@dab Un autre exemple de ce qui pourrait être fait : http://setosa.io/ev/

Apparemment, le site que tu mets en lien, @Vayel, passe par une solution analogue à celle que je propose.

Quant à la question de jouer des sons, je pense que c’est aussi possible via cette solution, en faisant un document.createElement('audio') dans le SVG.

(Cela étant, je me demande maintenant à quel point c’est plus intelligent que de permettre d’importer du HTML d’une façon ou d’une autre.)