Plan de cours JS/TW5


#1

Le post Documentation propose diverses sources dédiées à l’apprentissage ou à la pratique de JavaScript.

Il faut choisir un plan de cours destiné à notre étude


Le plan suivi par document de référence qu’a donné Mario Pietsch dans un post sur le forum en anglais que @sylvain a communiqué me plaît bien pour au moins trois raisons:

  1. Il est sous licence Creative Commons attribution-non commercial license [FR] donc librement traduisible et reproduisible
  2. Sur sa version en ligne, le code peut être exécuté directement dans la page web, sans avoir a utiliser la console du navigateur
  3. Il décrit par le menu les troncs JavaScript, Le navigateur et Node.Js3 largement utilisés par TiddlyWiki.

Voici pour le plan. Les contenus pouvant bien sur être collectés parmi l’ensemble des documentations dont nous disposons.

Ce n’est qu’une proposition, ce n’est peut être pas la meilleure.

Vos observations sont les bienvenues.


#2

Dans un premier temps, il faut se limiter au javascript côté client (la partie Node.js est du côté serveur)


#3

Salut Eric,
J’ai regardé le plan de cours de Mario, il me semble trop orienté JS et pas du tout TW5. Il va falloir mieux guider tout cela pour aller droit au but. L’idée qui se cache derrière les macros JS pour TW5 est de réaliser des extensions (plugins) qui étendent le fonctionnement basique de TW5.
Dans notre documentation, il conviendra de parler des shadowtiddlers par exemple, le packaging, les exports ou encore les widgets en se basant sur : https://tiddlywiki.com/dev/#HelloThere
Et certainement que ce sera une bonne chose que de décrire aussi le millier de macros “tw$” déjà présentes dans le “core”… Ce sont par extension tous les aspects de programmation qui gravitent autour de ces sujets qui rendent TW si particulier.


#4

Bonjour Jean-Bernard,

Au lieu de partir de Java-Script pour se tourner vers TiddlyWiki on va faire l’inverse, je suis d’accord.

Et l’on profite de l’étude de TyddlyWiki pour expliquer JavaScript, mais aussi (un peu) HTML et CSS.

Je suis un peu pris durant ces quelques jours mais reviens vite vers toi.


#5

Il est en effet illusoire de vouloir se servir de TiddlyWiki comme base d’apprentissage du langage JavaScript puisque TW5 ne fonctionne absolument pas comme une plateforme web classique.

Voici deux extraits éloquents issus des discussions sur le forum officiel en anglais:

1- Insertion JavaScript dans un Tiddler

Source Mail Archive

Jed Carty - Samedi, 04 Mars 2017

On peut toujours ouvrir un wiki et y ajouter du JavaScript, mais le code JS ne prendra effet qu’après le wiki aura été sauvegardé et relancé avec son nouveau contenu. De plus, le tiddler contenant le code doit être soit de type macro JavaScript et être tagué $:/tags/RawMarkup, soit contenu dans un widget.

Dans tous les cas, la sauvegarde et le rechargement du wiki doivent être effectués avant qu’un code JS quelconque intégré ne prenne effet.

Je pense que ce comportement peut être modifié mis que ce n’est pas généralement recommandé.

Vous ne pouvez pas entrer de code JavaScript après que le wiki soit chargé et que ce code prenne effet pour des raisons de sécurité.

BJ Dimanche, 05 Mars 2017

On peut aussi utiliser un ifame dans un fichier tid standard:


<iframe sandbox = "allow-same-origin allow-scripts allow-popups 
allow-forms"  src= """data:text/html;charset=utf-8,<script 
src="http://www.reddit.com/.embed?limit=5"; 
type="text/javascript"></script>"""/>

PMario Dimanche, 05 Mars 2017

TW assainit le code JavaScript écrit dans un tiddler standard pour des raisons de sécurité.

Les macros standard sont définies par \define ... \end ..
Ces macros sont et restituent du texte (“text substitutions”). Tout ce qui se trouve entre les termes “define - end” est du wikiTexte, qui est certes puissant mais tout de même limité comparé à du code JavaScript.

‘‘Les macros JavaScript’’ peuvent emprunter toutes les possibilités de JavaScript mais restent limitées à retourner du texte. En cela, elles fonctionnent exactement de la même manière que que les ‘‘macros wikitext’’… Les macros ne sont pas en mesure de “rafraîchir” le rendu de la sortie (output) comme peuvent le faire les ‘‘widgets’’. En conséquence elles sont plus simples à utiliser et à définir mais vous aurez toujours utiliser un réglage développeur.

Les macros JavaScript ont été introduites parce-que l’on en avait besoin pour traiter quelques cs particuliers. Il n’en demeure pas moins que le wikitext de TiddlyWiki reste très performant. Ces macros ne restent donc utilisées que dans quelques parties du core TW5.

Jeremy Ruston Dimanche, 05 Mars 2017

L’objectif des restrictions de sécurité de TiddlyWiki est de permettre de partager en toute sécurité le contenu entre les utilisateurs. Cela exige que le code JavaScript soit clairement identifié afin que le destinataire puisse décider s’il dispose de la confiance nécessaire ou non pour exécuter ce contenu; autoriser JavaScript en ligne (inline) dans des blocs en Wikitext rendrait impossible au destinataire de savoir s’ils peut restituer le wikitext entrant en toute sécurité.

D’où le fait que les macros JavaScript sont autorisées parcequ’elles sont déjà identifiées comme étant sûres et qu’elles peuvent être bloquées si nécessaire.

Le second facteur dans la conception de TiddlyWiki qui empêche l’utilisation de bibliothèques JavaScript tierces est que TiddlyWiki ne supporte pas le paradigme de développement Web traditionnel qui vise à conserver l’état des dans le DOM (c’est le paradigme popularisé il ya une décennie par jQuery). Au lieu de cela, TiddlyWiki utilise un DOM virtuel et des mises à jour différentielles (c’est le paradigme utilisé par les frameworks récents comme REACT).

Le résultat c’est que TiddlyWiki ne prend généralement pas en charge simplement la suppression dans une balise de script comme les pages Web traditionnelles. Cela dit, la bibliothèque de plugins TiddlyWiki contient de nombreux exemples d’intégration correcte des bibliothèques tierces.

PMario Lundi, 06 Mars 2017

Le core TW5 ne comporte que 11 macros JvaScript et 860 macros \define déclarations dans l’interface utilisateur et dans les gabarits. dont environ 200 d’entre elles sont dupliquées dans les éditions TW5 traduites. Les macros se trouvent donc partout dans le noyau et nous n’avons que 11 exceptions qui ont été écrites en JavaScript. Tout le reste n’est que pure wikitext… À mon sens, c’est impressionnant.

Les macros JavaScript ne peuvent pas être modifiées par la plupart des utilisateurs. Les macros standard peuvent être modifiées par tous les utilisateurs. C’est une énorme différence.

Il y a une grande différence entre les macros de TiddlyWiki Classique (TWc) et TiddlyWiki5 (TW5). Ce sont deux choses totalement différentes.

Les macros TW5 ne sont que des substitutions de texte sans mécanisme de rafraîchissement intégré.

Les macros TWC ressemblent plus aux widgets actuels de TW5…

l’analyse et le rendu d’un langage spécifique à un domaine (DLC) est un sujet complètement différent, mais réalisable. Nous avons déjà de tels plugins.

Voyez par exemple des plugins tels que railroad, markdown, katex, qui peuvent vous mettre sur la voie…

2- Comment adapter des librairies JavaScript tierces à TiddyWiki

Source Mail Archive

Le problème de fond est que de nombreuses bibliothèques JavaScript utilisent une technique par laquelle l’état de l’interface utilisateur est stocké dans le DOM.

Ceci ne fonctionne pas dans TiddlyWiki5 (tout comme dans d’autres frameworks JavaScript modernes) car code est conservé dans les objets JavaScript et reconstruit de nouveaux éléments à la volée, sans passer par la case de rechargement du DOM. (Autrement dit, JavaScript en ligne est désactivé)

Il n’y a aucun moyen de convertir automatiquement le code JavaScript basé sur DOM pour travailler avec TiddlyWiki5.

La réponse à cette question nécessite donc

  1. D’apprendre JavaScript,
  2. Et d’apprendre TiddlyWiki5.

Jeremy Ruston (2015)


Tout ceci est un peu frustrant, mais il va falloir s’y faire…

Je pense qu’avant tout il faut impérativement comprendre les différents concepts sous-tendus par TW5, par exemple:

  • Macros JavaScript
  • Macros WikiText
  • Widgets…

Il y en a d’autres dont il faut comprendre le sens avant d’étudier plus avant TW5.


#6

Bonjour à tous,

Je connais le javascript, TW est créée avec du javascript et je n’arrive pas à exécuter simplement du javascript sauf avec l’outil (<> <<script 0>>).

Je pense qu’un petit helloworld à faire fonctionner sur notre TW5 serait la bienvenue.

Qu’en pensez-vous?


#7

Bonsoir @delta
Il faut un champ module-type: macro

(function(){
exports.name = "HelloWorld";
exports.params = [{name: "word"}];
exports.run = function(word) {
	return "Hello World! "+word;
};
})();

à utiliser comme ça :
<<HelloWorld delta>>

Enjoy!


#8

Je ne pensais pas à ça.

Mais si on crée un “helloworld” en javascript par exemple :

<script>alert("HelloWorld");</script>

qui fonctionne très bien quand on copie-colle dans un fichier txt (ensuite renommé en html), comment on peut l’intégrer tel quel dans un TW ?

Si on arrive à faire cette manipulation on peut intégrer n’importe quel script dans TW ce qui ouvrirais de nombreuse possibilité.

Exemple avec ce fameux code :

`

.<script>
eval(z='p="<"+"pre>"/* ,.oq#+     ,._, */;for(y in n="zw24l6k\
4e3t4jnt4qj24xh2 x/* =<,m#F^    A W###q. */42kty24wrt413n243n\
9h243pdxt41csb yz/* #K       q##H######Am */43iyb6k43pk7243nm\
r24".split(4)){/* dP      cpq#q##########b, */for(a in t=pars\
eInt(n[y],36)+/*         p##@###YG=[#######y */(e=x=r=[]))for\
(r=!r,i=0;t[a/*         d#qg `*PWo##q#######D */]>i;i+=.05)wi\
th(Math)x-= /*        aem1k.com Q###KWR#### W[ */.05,0<cos(o=\
new Date/1e3/*      .Q#########Md#.###OP  A@ , */-x/PI)&&(e[~\
~(32*sin(o)*/* ,    (W#####Xx######.P^     T % */sin(.5+y/7))\
+60] =-~ r);/* #y    `^TqW####P###BP           */for(x=0;122>\
x;)p+="   *#"/* b.        OQ####x#K           */[e[x++]+e[x++\
]]||(S=("eval"/* l         `X#####D  ,       */+"(z=\'"+z.spl\
it(B = "\\\\")./*           G####B" #       */join(B+B).split\
(Q="\'").join(B+Q/*          VQBP`        */)+Q+")//m1k")[x/2\
+61*y-1]).fontcolor/*         TP         */(/\\w/.test(S)&&"#\
03B");document.body.innerHTML=p+=B+"\\n"}setTimeout(z)')//
</script>

`

Qui fonctionne en le mettant aussi dans un fichier txt (impressionnant !)


#9

Tu auras une explication ici :
https://tobibeer.github.io/tw/enable-js/#script

Dans la console F12 tu copies :

$tw.config.htmlUnsafeElements = [];

Ensuite tu crées un tiddler avec ton script :

<script>confirm("Caution: Do not use lightly!");</script>

#10

Je connaissais déjà la macro <<script>> et le HelloWorld fonctionne très bien.

De plus il n’y a pas besoin du F12.
Ce qui est très bien comme ca on peut tester nos javascript sur le smartphone.

Je suis près à vous accompagner dans l’appentissage du javascript dans un TW.

Pour info le 2e script ne marche pas. Ca doit être à cause de la complexité de celui-ci.


#11

Je suis super content que tu veuilles t’investir à nos côtés. U R Welcome!
Pour le fonctionnement du script, c’est un problème de rendu sur le DOM. Il faut savoir que TW5 utilise comme REACT les techniques de “fake dom” ou virtual dom, qui recréé un DOM simplifié pour contrôler l’affichage des tiddlers.

Ici : https://anybox.fr/blog/appli-web-histoire-du-dom-react-redux

Et sinon, pour ceux qui aiment l’ascii, par ici :
http://aem1k.com/world/
http://aem1k.com


#12

Hello @delta

Et bien ça c’est une vrai bonne nouvelle :star_struck:

Bienvenue sur cette section du forum.

Trois Mousquetaires ! (il manque le quatrième) ou la @delta Force va frapper fort !!

Bref ! Je suis également super content.

Au sujet des fortes restrictions imposées par la conception même de TiddlyWiki concernant l’usage du JavaScript en ligne, j’ai eu un peu la même réaction que toi : Zut ! je ne pourrais pas m’amuser à récupérer du code JS externe pour mon apprentissage. Mais l’être humain est ainsi fait: il suffit qu’on lui impose un interdit pour qu’il veuille le transgresser. Mais si l’on dit à un enfant “Tu ne dois pas te gaver de bonbons en cachette” mais qu’on lui laisse accéder à la bonbonnière s’il en a vraiment l’envie, alors il cessera de penser aux bonbons et n’en abusera pas.

Et puis il faut bien constater que Jean-Bernard et les

sont capables de faire des miracles avec notre Tiddlywiki. Et comme le dit @jeremy (Ruston) : Il suffit d’apprendre TiddlyWiki :sweat_smile:


#13

Tu as raison Eric de poser les bases de l’éducation des enfants :smile: car il faut aussi se prémunir de dire à l’enfant qu’il aille se laver les mains systématiquement avant de passer à table : « Va te laver les mains ! » car ça pourrait l’enfermer dans une étroitesse d’esprit en l’obligeant à ne penser plus qu’à ça.

Ainsi, on pourrait jauger des difficultés des concepts proposés dans notre documentation par un niveau (facile, normal, difficile) ou bien (débutant, expert) et/ou un temps (express, long)

Tps : :large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle: Difficulté : :red_circle::red_circle::red_circle: :white_circle::white_circle: Niveau : :black_circle::black_circle::black_circle::white_circle::white_circle:

◉◉◉◎◎


#14

INTRODUCTION

  1. Wikitext
  2. Javascript
  3. Nos conseils

Les bases

  1. Hello World!
  2. Eval

Organisation

  1. Comment fonctionnent les shadowtiddlers
  2. Module core
  3. $:/plugins/ Publisher / Plugin

Les modules

  1. module-type: library
  2. module-type: macro
  3. module-type: filter
  4. module-type: widget
  5. d’autres modules comme global, startup

Les internes $tw, $tw.utils, $tw.config, $tw.wiki

  1. wiki.getTiddler
  2. getVariable
  3. parseText

L’interface

  1. Dom et Fakedom
  2. storyview
  3. CSS
  4. module-type : animation

Actions sur l’édition

Création de filtres

Les “Parsers”

Utilitaires

Le packaging des plugins

En savoir plus sur divers sujets

  1. prototype
  2. refresh
  3. autres

CONCLUSION


#15

Bonjour Jean-Bernard

Tu fais bien de tirer le premier car je ne sais pas trop par quel bout prendre notre plan de cours. Je reste actuellement un peu en retrait sans être très offensif…
Mais bon ! Après tout ce n’est que le début. Voyons par quels chemins tu entends nous faire passer pour accéder à la maîtrise JS/TW5.


#16

Bonjour Jean Bernard

Que signifie le chapitre “Les commandes”. Que contiendra t’il ?

Peux tu donner plus de précisions ?

merci :face_with_monocle:


#17

Bonjour Éric,

Je suis allé sur


pour remarquer quelques constructions de scripts intéressantes en exports.command (en fait, on pourrait très bien choisir d’exposer le répertoire “editor”

Dans notre introduction, il faudrait raconter comment sont structurés les javascripts dans le core, présenter l’exemple de @delta, “HelloWorld” et ouvrir sur des exemples plus copieux.

Comment vois-tu la chose ?


#18

Bonjour Jean-Bernard

Je ne vois pas trop (la chose). Ceci m’ l’air bien compliqué pour un débutant…

Si je comprends bien, les propriétés exports.* (name, params, run) passent leurs contenus à la fonction.

Dans l’exemple HelloWorld,

<<HelloWorld Eric>>

devrait logiquement retourner “Hello World Eric”. Chez moi cela ne retourne rien du tout:

Avec un Tiddler type application/javascript + un champ module-type: macro et le code que tu as indiqué

(function(){
exports.name = "HelloWorld";
exports.params = [{name: "word"}];
exports.run = function(word) {
	return "Hello World! "+word;
};
})();

Par ailleurs, J’ai consulté les fichiers du répertoire TiddlyWiki5/core/modules/ commands /

mais je suis bien incapable d’expliquer à quoi servent ces tiddlers. Par exemple

version.js : Use the version number from the package.json file

Ne devrait pourtant pas être compliqué à comprendre! Mais en lisant le code je ne comprend pas de quoi ça parle.

Je comprend mieux la Macro $:/core/modules/macros/version.js

Donc quelle est l’utilité première des modules commands et quelle est la raison de débuter par ceci.


#19

Bonjour Eric,

Tout d’abord, tu as bien raison, il n’y a aucune logique à commencer par “command” qui sont des instructions de ligne de commandes : c’est l’ordre alphabétique d’un plan construit sur un premier jet peu adapté :wink:

D’autre part, il faut recharger le TW pour prendre en compte les scripts (d’un côté le tiddler avec le texte javascript, et de l’autre un tiddler avec le texte d’appel de la fonction)
Il faut noter de suite qu’on peut appeler cette fonction de deux façons :
<< HelloWorld Eric>>
et

<$macrocall $name="HelloWorld" word="Eric"/>

word correspond au name décrit dans params.

◉ Sources : https://tiddlywiki.com/static/MacroCallWidget.html


#20

Sur le même principe, on peut écrire :

<$macrocall $name="now" format="0hh:0mm, DDth MMM YYYY"/>

Il existe donc 12 macros prédéfinies à découvrir ici :
◉ Sources : https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/macros

  • changecount.js
  • contrastcolour.js
  • csvtiddlers.js
  • displayshortcuts.js
  • dumpvariables.js
  • jsontiddler.js
  • jsontiddlers.js
  • makedatauri.js
  • now.js
  • qualify.js
  • resolvepath.js
  • version.js

Il y a 51 widgets :

  • action-createtiddler.js
  • action-deletefield.js
  • action-deletetiddler.js
  • action-listops.js
  • action-navigate.js
  • action-sendmessage.js
  • action-setfield.js
  • browse.js
  • button.js
  • checkbox.js
  • codeblock.js
  • count.js
  • diff-text.js
  • draggable.js
  • droppable.js
  • dropzone.js
  • edit-binary.js
  • edit-bitmap.js
  • edit-shortcut.js
  • edit-text.js
  • edit.js
  • element.js
  • encrypt.js
  • entity.js
  • fieldmangler.js
  • fields.js
  • image.js
  • importvariables.js
  • keyboard.js
  • link.js
  • linkcatcher.js
  • list.js
  • macrocall.js
  • navigator.js
  • password.js
  • qualify.js
  • radio.js
  • range.js
  • raw.js
  • reveal.js
  • scrollable.js
  • select.js
  • setvariable.js
  • text.js
  • tiddler.js
  • transclude.js
  • vars.js
  • view.js
  • widget.js
  • wikify.js