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!
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!
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)
En fait ton code se trouve sur Codepen:
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 ?
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!
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 internationaux :
https://groups.google.com/forum/#!topic/tiddlywiki/Eqcsb-B6iLk
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!!
Mais câest normal, ici nous sommes au pied du volcan et la source est chaude !
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 :
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.
Ă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.
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.
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
Tu peux le prendre ici :
Il faudrait que jâamĂ©liore encore le design « flat » ou « black » et mettre un item en « active »
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âŠ
Salut Eric,
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.
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
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âŠ
Comme quoi lâinattention joue de vilains tours.
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.
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
FĂ©licitation ! Je tâai mitonnĂ© un petit bouton pour basculer le fil en noir ou en fil platâŠ
Câest encore une belle âĂtudes de casâ
Enjoy!
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 :
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.