Je prends des notes à l'aide de #dendron
( première Bulle à ce sujet https://liens.vincent-bonnefille.fr/?AGBhmA )

Bon, les WikiLinks c'est formidable
( Internal links : [[lien_popup_sujet]] - doc wiki )

J'appelle WikiLinks des liens internes, qui lient des pages/notes entre elles...
Comme sur #wiki quand on survol un de ces liens il affiche un popup !
Si on clique dessus, le lien ouvre la page vers laquelle cette note/lien pointe.

Trop deep

Mais, quand j'écris en #md_markdown avec #dendron ...
Je peux me retrouver avec une hiérarchie de notes assez deep (profonde)
Les liens contiennent en effet tout le chemin des sous-parties (séparées par un (.))

[[Root.sujet.partie.élément_child]]
= lien vers =>
Root > sujet > partie > élément_child

Le lien devient long
Difficile à lire
Il prend de la place dans le texte
Je voudrais qu'il prenne moins de place
( comme dans son état final, quand on "preview" le code en HTML )

: qu'il soit +lisible :
lire seulement le titre de la note/fiche ( sans le chemin entier )
EX/ [[gparent.parent.child_name]] -> [[child_name]]

Solution : plugin

Heureusement, #vscode regorge de plugins/extensions...
vscode-inline-fold permet de rétracter ("fold") les bouts de code trop longs ...
( par exemple, on pourra réduire "fold" une chaine de classes dans un élément HTML )

->

Regex / préférence :

Mes préférences avec le #Regex pour les WikiLinks :

  "[markdown]": {
    "inlineFold.regex":"\\[\\[(([\\.A-Za-zÀ-ú0-9_\\-\\:]{1,}?)\\.)([A-Za-zÀ-ú0-9_\\-\\:]{1,}?)\\]\\]",
    "inlineFold.regexFlags": "g",
    "inlineFold.regexGroup": 1,
    "inlineFold.unfoldedOpacity": 0.6,
    "inlineFold.maskChar": "",
    "inlineFold.after": "",
    "inlineFold.maskColor": "#000",
    "inlineFold.unfoldOnLineSelect": true,
    "inlineFold.autoFold": true,
  }

On peut ensuite ajouter un raccourcis pour afficher/masquer les Wikiliens...

Final #Regex

https://regex101.com/library/nlSi7u (me)
https://regex101.com/r/5R0WQ1/1 (other user)

Jouer avec du text, des images, des filtres directement depuis le #navigateur
Zut, j'ia perdu la source ...

ya même une version/interface les regroupant toutes sous la forme d'un OS_like !
-> https://csos.constraint.systems

" Alternative interfaces for editing and creating images and text."

Entre autres :

• Cascade ( #js_css_html / #cours )
  https://cascade.constraint.systems/history/0
  https://cascade.constraint.systems/history/1120
  me parait intéressant comme jeu interactif à plusieurs ( #DIWO )
  sur la question de la retenue de groupe ;)
  ... dommage on peut pas "reset"
  ==> https://github.com/constraint-systems/cascade/blob/main/pages/index.tsx

Je note également

• Res
  ↳ https://res.constraint.systems/
• Type
  ↳ https://type.constraint.systems/

Un peu de #Regex (de bon matin)
j'utilise souvent https://regex101.com
qui permet entre autres de sauvegarder
NOTE : /Regex101/ a un debugger !
--> https://regex101.com/r/BDV74e/1/debugger

je viens de découvrir https://www.debuggex.com (cette {bulle}) via :

• https://www.michaelperrin.fr/blog/2019/02/advanced-regular-expressions

"Test your regex by visualizing it with a live editor. JavaScript, Python, and PCRE."

Debuggex et les autres

/Debuggex/ indique cibler des entreprises
En payant on peut sauvegarder +de regex
... /D/ est il en toujours en dev ? ( blog posts : 2013 )
.... https://alternativeto.net/software/debuggex/about/ -> Discontinued

Semblables, à tester :
( moins bien ergonomiquement )

• /Regulex/：JavaScript Regular Expression Visualizer
  https://jex.im/regulex/#!flags=&re=%5E(a%7Cb)*%3F%24
• /i Hate Regex/ - The Regex Cheat Sheet
  https://ihateregex.io/

Story

J'ai voulu refaire un Parser de #md_markdown -> JS
Bon en Regex ca se fait mais la mutliplication des cas particuliers rend vite la chose compliquée ! Un bon outil de diagnostique/débug devient vite essentiel !

Pour quoi ?

#Pandoc fait bien le boulot !
Oui oui mais j'ai quelques habitudes particulières dans mon écriture au quotidien !
#écrire c'est structurel mais on a nos propres mods de prise de note par exemple.
Des mécanismes de renvois
Ex/ j'utilise @ et # ( pour les auteur.ices et tags ) : comme {ici}
Ex/ j'utilise des renvois (indent)
...
des choses qui sont absentes ou mal interprétées dans les parser "de base"
: ca me sufisait pas, je voulais mon propre moteur

Dans cette recherche

Un raccourcis : des Regex pour cibler les éléments de #md_markdown

• https://javascript.plainenglish.io/simple-markdown-parser-with-javascript-and-regular-expressions-f0c8d53449a4

liens ( [text de desc](http://monlien.fr) )

• https://medium.com/@mattkenefick/regular-expressions-markdown-to-html-anchors-1e7d52905517

• Embed :
  \[([^\]]+)\]\(([^\)]+)\)
  
  Debuggex Demo

Summer #2022

• https://handmade-web.net/summer22/calendar.html

Coder : pour un web +libre +conscient +consenti

Au début de ce b.log je postais pas mal de contenus...
#indieweb en #langage_progra
( -> apprendre <- )
.. autour de l'idée d'un #www (wild like a garden) :
.. Et si le web était un jardin ?
.. pensé.réalisé par et pour les humains.
https://liens.vincent-bonnefille.fr/?fEu6wQ
( l'idée d'un digital-gardening )

je m'intéressais à l'auto-publication avec des outils comme #dendron
et autres solutions de #self_host_hébergement

L'idée était aussi de trouver un habillage de #cours
{ici} handmade-web.net propose... des #cours autour de #js_css_html

-> Il s'agit de m'inspirer de ressources existantes, de ne pas réinventer la roue
-> de connaitre l'existant, d'en faire l'actualité

Whaouuuu ( All in one )

via https://www.are.na/institute/code-pedagogy

• https://2023.software-for-people.net #2023
  ( déroulé de cours + ressources )
  ( dont : Google présentation : Histoire du web #www #pré_internet )
  ( dont Google présentation : différences entre #js_css_html )
  . . .

ALLs = https://drive.google.com/drive/folders/1IVCJn8-22PGfFBNmMka3W1Lm2szbi6Xy !
CODA = https://coda.io/d/Tech-lectures_dyrqG8B5yKE/Tech-course-spring-2023_sulDl !

@are.na

https://www.are.na/art-369-spring-2023

Tools.Sommaire :

• https://2023.software-for-people.net/resources.php

Voir aussi

• https://howtocode.club
• https://classes.dma.ucla.edu/Fall19/161/ < 3
• https://the-internet-of-me.katharinanejdl.com
• http://fall2019.will.graphics/syllabus/ < 3 #2019

{via}

• https://www.are.na/lovelli-fuad/digital-gardening-oly1myuhka4
• https://www.are.na/institute/code-pedagogy
• https://www.are.na/garry-ing/wwworkshop

Content sharing / reading

• Hypothes.is // annotations collectives #<3
  https://hypothes.is

• Are.na // Collection/Curation du web #<3
  https://www.are.na

Tableaux

• Excalidraw
  : https://excalidraw.com

• Miro // la porche, pas libre
  Avec on peut bouger / ajouter / annoter des éléments tous.tes ensemble !
  Très fluide, efficace, propriétaire.
  : https://miro.com/fr/

• MilaNote // Miro-like #<3
  Agencer des contenus en drag-n-drop, présenter, annoter, etc
  Un interface fancy comme Miro
  : https://milanote.com/

• Okso // dessiner, lier, noter
  Sobre, non interactif, permet de faire des présentations pas en live, on sauvegarde les pages.compositions dans des fichiers locaux (serverless) : "The OkSo app is a Progressive Web App (PWA)" https://okso.app/about
  : https://okso.app

• Digiscreen
  Un tableau libre où disposer des contenus numériques
  : https://ladigitale.dev/digiscreen/ (via)

IDE en ligne

Il y a plein d'IDE qui sont "passés" online !
( des interfaces graphiques de développement )
VSC s'y est mis : https://vscode.dev
( on est chez Microsoft, bof bof )
J'utilisais : https://www.codetogether.com

Chez la concurrence directe il y a :
https://www.jetbrains.com/code-with-me

Ya aussi :
... https://duckly.com
... http://demo.icecoder.net / https://replit.com / https://codesandbox.io

. . . mais on peut trouver plus modeste, simple
#web_master VS #indieweb ;)

Progra. Dev.

• Glitch // je l'utilisais pour des cours d'introduction au code
  Il est gratuit (on peut ajouter des ressources si le projet est trop gourmand)
  ya une gestion des fichiers, un terminal, un preview (dont auto-refresh)
  L'intérêt vàv de https://codepen.io c'est le côté interactif
  : https://glitch.com

• CodeBoard // Glitch-like
  Un interface moins accueillant mais des fonctions très proches. La nécessité de s'inscrire.
  : https://codeboard.io

• Neocities // un hébergeur de fichiers simples avec éditeur rudimentaire #<3
  Une référence dans le #indieweb (gratuit, associatif)
  Mais quelques restrictions.manques.limites
  : https://neocities.org

MAIS AUSSI ( #2023 )

• https://wowchemy.com/?utm_campaign=poweredby (free lesscode)
• https://vercel.com (environement de déploiement) //
• https://netlify.com
  ... utilisé pour installer par ex. /Jekyl/ + sync avec #git
  ... #jardin numérique : https://liens.vincent-bonnefille.fr/?fEu6wQ

#wordpress like ( source )

• Ghost: The Creator Economy Platform
  https://ghost.org
• Hexo
  https://hexo.io
• HTMLy - PHP Blogging Platform, and Flat-File CMS <- No DB !
  https://www.htmly.com

LiveCode - Editors

• CodePen // La référence
  Tout clef en main
  https://codepen.io

• JsArena // Js avec console
  Interface scindé (2 panneaux), simple élégant, efficace !
  Compte.Sauvegarde via Github
  : https://jsarena.dev

• PlayCode
  Plus abouti que JsArena, GUI plus léchée, avec Preview (3 panneaux)
  Plusieurs templates de départ (js/Vue/Bootstrap/etc)
  Proposent des #cours : https://playcode.io/learn
  : https://playcode.io/javascript-online

la star ( bonus ) alt. à Miro

• #Hotglue // Tableau drag-n-drop #<3
  Pour présenter des contenus, faire des sites à la façon web-n-craft : #indieweb
  Un projet collectif : http://kabane.org/thema/surveillance/
  : https://hotglue.me

Pensez aussi aux variants et variances d'éditeurs collaboratifs tel #EtherPad :
https://liens.vincent-bonnefille.fr/?searchtags=EtherPad

Par exemple :

• Your World.Of.Text // écrire à l'infini #<3
  Écrire toustes ensemble sur un tableau noir infini ( textuel #ascii_art )
  https://www.yourworldoftext.com/~vincentb/

Kanboards / Organisation

https://liens.vincent-bonnefille.fr/?searchterm=kanboard

Trouvez la documentation des commandes... #linux #cheatsheet

• https://cheat.sh/ls
  curl cheat.sh/ls ( ls = lister dossiers )

TLDR

• https://tldr.ostera.io/ls
• https://tldr.sh #<3 #self_host_hébergement

Linux commandes (et tuto, tldr)

• https://linuxcommandlibrary.com

Des #alternativeto :

• https://explainshell.com/explain/1/chmod

Not installed / cant run #linux

• https://command-not-found.com/mkexfatfs

https://wiki.gnome.org/Apps/Devhelp
#horsligne_offline_invisible

https://devdocs.io
#langage_progra #js_css_html #nodejs

Web 2 zine (css and more)

Imposition et autres ressources https://en.wikibooks.org/wiki/Zine_Making/Putting_pages_together

Webring maker ( js + css ) made easy !
https://garlic.garden/onionring/

Demo
wwww.bonnebulle.xyz

Découvert via a repertory
https://yesterweb.org/webring/
( contient de #CGU )

https://edwardtufte.github.io/tufte-css/

Mise en page de documents - mise en valeur des notes de bas de page sur le côté (plutôt qu'en bas de page)

"There are many ways you can go about picking up the skills you need to become a developer.
There are linear curriculums that teach you a bit of everything - like freeCodeCamp's full stack development curriculum."

Par où commencer pour apprendre à coder ?
#full_stack https://fr.wikipedia.org/wiki/D%C3%A9veloppeur_full_stack
#2019 #2020