🌋 Sous le cratùre du volcan


#1

Bonsoir Ă  tous,

Cette fois-ci je vous propose CRATÈRE : une compilation de 85 tiddlers autour du CSS, l’occasion de vivre une expĂ©rience inoubliable garantie.

Lien direct au cƓur du Cratùre : https://oxydum.github.io/cratere/

Enjoy!


#2

Bonjour Jean-Bernard,

Encore un thÚme fort intéressant.

Une suggestion tout de mĂȘme : tu devrais mentionner les sources de ces exemples ne serais-ce que pour permettre de voir comment tu adaptes les CSS sources Ă  TiddlyWiki.

J’avais utilisĂ© le CSS de ton tiddler “breadcrumb” sur un de mes sites il y a dĂ©jĂ  quelques annĂ©es, mais je n’arrive pas Ă  me souvenir d’oĂč je l’avais extirpĂ© (c’est un anglais retraitĂ© qui maintient ce site comportant des centaines de scripts Ă©tonnants)


#3

En fait ton code se trouve sur Codepen::grinning:


#4

Et puis juste encore une petite question :

Par quoi faut il remplacer les liens HTML <a href="#">Lien</a> pour qu’ils puissent effectivement ouvrir les tiddlers spĂ©cifiĂ©s (remplacer # par le titre d’un tiddler ne fonctionne pas)

Autrement dit du code brut HTML ne fonctionne pas non plus dans TW5. Peut ĂȘtre faut il l’enrober avec du wikitext ?


#5

Salut Eric,
Dans le tiddler 8, tu trouveras la mention des sources en commentaire :
/* From http://lea.verou.me/css3patterns/ /
/
Playing with CSS */
Pour le reste, ce sont des copier-coller de dĂ©mos open-source en licence CC que je collectionne parfois depuis des annĂ©es, mais gĂ©nĂ©ralement je traĂźne sur github et sur codepen. Si tu as un code dont tu veux connaĂźtre l’auteur formidable, je peux faire les recherches nĂ©cessaires. Pour mes adaptations propres, considĂ©rons qu’elles sont toutes en “public domain” ou “copyleft” car tout ce que je partage est pour le bien commun. Je regrette d’ailleurs de faire du code dans mon quotidien professionnel qui est parfois tout aussi incroyable, mais je ne peux le diffuser.
Au delĂ  de tout cela, il faut savoir que les “auteurs” sont souvent eux-aussi dans ce contexte, en adaptant ligne par ligne des Ă©lĂ©ments qu’ils trouvent dans les docs, sur les forums et dans leurs expĂ©riences quotidiennes. Pour moi, il est inutile de citer tout le monde, comme il conviendrait de citer @jermolene pour tiddlywiki alors que le produit regorge d’inconnus fantastiques qui participent au succĂšs (relatif) de notre ami
 maintenant si je cite Eric Schumann ou Tobias Beer (@tobibeer) comme porteur de travaux gĂ©niaux autour de TW, ne risquais-je pas masquer leurs propres sources et leurs dĂ©rivĂ©es, en suggĂ©rant que leurs partages Ă  contribuer Ă  me former et m’inspirer (et tant d’autres) ?
C’est ce gars improbable Tom Grennan qui cite dans Sweet Hallelujah :

Find your courage, find your lion

et qui m’a beaucoup motivĂ© pour montrer qu’on peut aller plus loin avec tiddlywiki.

Enjoy!


#6

Dans [[button.css]], j’ai incorporĂ© ce code oĂč id1 est le bouton prĂ©cĂ©dent :

<$button message="tm-close-tiddler" class="tc-btn-invisible">
<$list filter="[tag[$id1$]]">
<$action-navigate $to={{!!title}}/>
<$action-sendmessage $message="tm-open-tiddler"/>
</$list>

qui m’a Ă©tĂ© inspirĂ© par cette bande de Tiddlyzouzous :copyright: internationaux :
https://groups.google.com/forum/#!topic/tiddlywiki/Eqcsb-B6iLk


Plan de cours JS/TW5
#7

Rien de prĂ©cis actuellement, d’autant plus que mon auteur du moment, c’est toi. On peut donc dire que je suis au plus prĂšs de la source!

D’une maniĂšre gĂ©nĂ©rale les sources me permettent de me situer par rapport Ă  un contexte. Pour ce qui est de TW, un contexte plus gĂ©nĂ©ral et que je maĂźtrise peut-ĂȘtre mieux (le source), va me donner - par rapprochement - une idĂ©e plus prĂ©cise par de la maniĂšre dont un sujet particulier sera traitĂ© : “GĂ©nĂ©ralement on fait ci, dans TW on fait ça”.

Également, une source n’est jamais plus qu’un point de dĂ©part qui renvoie vers d’autres sujets plus ou moins liĂ©es au propos d’origine. C’est comme ça que l’on passe une bonne partie de la nuit et que l’on se dit subitement : M
e, demain je dois aller bosser!!:grinning:


#8

Mais c’est normal, ici nous sommes au pied du volcan et la source est chaude !


#9

Plus sĂ©rieusement, je crois que le wiki n’est pas encore rentrĂ© dans l’histoire. Et pourtant, en lui apportant quelques Ă©lĂ©ments, on peut en faire un espace complĂštement nouveau, support Ă  faire grandir notre communautĂ©. C’est ambitieux, mais en se focalisant sur les problĂ©matiques, on pourra rĂ©soudre l’équation par la preuve : tiddlywiki !
Bien sĂ»r, on est dĂ©jĂ  dans un univers copieux, mais insuffisant. Il y a un an, je cherchais Ă  faire de l’affichage dynamique, comme le propose l’outils Xibo ou le framework Spectacle dans une moindre mesure.

Alors, j’ai crĂ©Ă© “Vertical” et publiĂ© ici :

http://vertical.tiddlyspot.com/

Mais c’est restĂ© insuffisant et j’ai mis ça de cĂŽtĂ©.

Il y a une autre idée qui devrait fusionner tiddlywiki avec ce que tous les deux nous portons :
une gestion de comptes personnelle du genre “Microsoft Money”
 mais pas un truc tout simple reposant sur des comptes en T, mais un systĂšme embarquĂ© sur son smartphone qui gĂšre ses dĂ©penses au plus prĂšs de ses achats.

Bien sûr, il y a la contribution à la Doc JS/TW5 en cours qui est une priorité. Une adaptation JS pour un breadcrumb serait une bonne idée je crois que ça existe. Je vais voir.


#10

Évidemment, si tu le prend par ce bout là :

Faire un logiciel de comptabilitĂ©, ou de finances personnelles avec TiddlyWiki, c’est comme un rĂȘve de gosse pour moi.

Et c’est TOTALEMENT rĂ©alisable.

Mais bon, Doc JS/TW5 d’abord. Aprùs on pourra jouer.


#11

Jean-Bernard,

Pour un BreadCrumb, il y a celui de Jed:

Qui est celui que j’ai installĂ© sur mon wiki. (Petit rĂ©sumĂ© ici)

Il me semble qu’il ne resterait qu’à l’habiller de CSS.

Je le prĂ©fĂšre Ă  celui de TonGerner qui n’est en fait que la liste horizontale des tiddlers ouverts.

PrĂ©cision: il faut cliquer sur le bouton Breadcrumbs pour voir le chemin. Je n’ai pas cliquĂ© sur l’option qui fait que le chemin est automatiquement visualisable.


#12

La bonne nouvelle Éric, c’est qu’on peut fusionner à l’arrache le BreadCrumb de Jed avec le design de Arkev sur Codepen
 je reviens vers toi avec mes essais :wink:


#13

Tu peux le prendre ici :

Il faudrait que j’amĂ©liore encore le design “flat” ou “black” et mettre un item en “active”

https://oxydum.github.io/ariane/


#14

Salut Jean-Bernard,

J’essaie de comprendre le code:

Pour la logique, je comprend :Racine, IA, fils et petit fils avec les tags qui vont bien.

Mais il y a deux choses que je ne comprend pas:

1- Comment est-il possible d’avoir deux tiddlers dont le title est identique ?

Je vois tout de mĂȘme que les noms ne sont pas strictement identiques puisque le premier est:

$:/Tiddler Breadcrumbs Flat

et que le second est:

$:/Tiddler Breadcrumbs Flat%0A (Chiffre 0 ou lettre O ?)

Second tiddler que je n’arrive pas Ă  rĂ©cupĂ©rer sur mon wiki.

Et pourquoi 2 tiddlers ?

Le plugin https://joshuafontany.github.io/TW5-JsonManglerPlugin/ entre-il dans ta combinaison ?

2- Je ne vois nulle part de code CSS. D’oĂč vient-il ?

En fait donc je n’arrive pas à faire fonctionner l’ensemble.

Ton résultat est bluffant !!

Addendum : pour la duplication des tiddlers je suppose que l’explication est à trouver dans le tiddler $:/plugins/joshuafontany/jsonmangler/readme/Deduplication

Mais cela ne m’aide pas mieux à comprendre



#15

Salut Eric,

  1. Il n’y a aucune raison d’avoir 2 [[$:/Tiddler Breadcrumbs Flat]] identiques
 cela est un effet de bord lors des tests. Pareil pour le plugin JsonMangler : je n’ai pas fait assez de mĂ©nage.

  2. Le code CSS se trouve dans : [[$:/Tiddler Breadcrumbs Template]]
    Regarde dans la fonction \define breadcrumbs() la partie <style>
    J’attire particuliùrement ton attention sur :

	content: counter(flag);
	counter-increment: flag;

qui permet une numérotation automatique en CSS

La doc : https://developer.mozilla.org/fr/docs/Web/CSS/counter-increment


#16

DĂ©solĂ©, c’est de ma faute.

J’ai comparĂ© ton $:/Tiddler Breadcrumbs Template au mien (je les compare sur un fichier excel)

Sauf que comme une mule j’ai copiĂ© 2 fois le tiens; donc comme je n’y voyais pas de diffĂ©rences j’en ai bĂȘtement conclus que les modifs ne venaient pas de ce tiddler
:weary:

Comme quoi l’inattention joue de vilains tours.


#17

Tu sais, c’est nĂ©cessaire de faire des erreurs. C’est mĂȘme une source importante de progrĂšs.


Tout ce monde qui échappe à ça ne font pas grand cas des innovations.


#18

VoilĂ ,

Ça marche trop bien !!!

Ce petit exercice fut fort utile. Petite rĂ©cap et je l’ajoute sous un nouveau mot clĂ© : “Études de cas”

Ce serait cool en effet

Note:

J’ai mis ton travail en ligne, avec quelques modifications cosmĂ©tiques pour l’adapter au wiki. On pourra mĂȘme permettre Ă  l’utilisateur de choisir ses couleurs (de fond, au passage de la souris
). Mais ça je peux le faire tout seul.

Encore merci pour cette belle dĂ©monstration d’adaptation pour TW5 :grinning:


#19

FĂ©licitation ! Je t’ai mitonnĂ© un petit bouton pour basculer le fil en noir ou en fil plat


https://oxydum.github.io/ariane/

C’est encore une belle “Études de cas” :stuck_out_tongue_closed_eyes:

  1. une macro javascript cloné à partir de checkbox.js
  2. une macro TW pour styler tout ça
  3. un exemple pour basculer les champs dans un dictionnaire de données

Enjoy!


#20

Jean-Bernard,

C’est tout bon sauf sur un point (chez moi):

Sur le tiddler CheckBoxAriane, au passage du bouton Ă  “black”, j’'ai un gros pavĂ© noir sous le fil ariane :

ariane1

Le bouton “Flat” fonctionne bien.

Le tag “transparent” ne semble avoir aucun impact sur ce point. AjoutĂ© ou retirĂ© du tiddler “CheckBoxAriane” ne change rien. De toute façon il agit sur la couleur de fond de “Flat”, pas de “Black”

J’ai tournĂ© le code dans tous les sens sans meilleur rĂ©sultat.

Ce qui est Ă©tonnant c’est que si je clique sur l’un des boutons du tiddler “CheckBox”, le pavĂ© noir disparaĂźt.

Je n’arrive pas Ă  comprendre le lien entre les tiddlers CheckBox et CheckBoxAriane sauf bien sur que le second utilise le premier. Mais il y a quelque-chose qui m’échappe.