Un bloc-notes natif au navigateur, sans installation ni serveur, avec prise en charge du mode Vim
(yupkidangju.github.io)Je présente WebMemo Pro, un éditeur web purement local que j’ai développé moi-même, pour les moments où lancer un IDE lourd basé sur Electron est contraignant et où les applications de notes dans le cloud soulèvent des inquiétudes en matière de sécurité.
Il s’agit d’un projet personnel conçu pour tester les limites du navigateur en utilisant uniquement du Vanilla HTML/JS/CSS, sans outils de build comme React ou Webpack.
[Principales caractéristiques techniques]
Sauvegarde de fichiers native (File System Access API) : dans le navigateur, quand on appuie sur Ctrl+S, le fichier d’origine sur le disque local est directement écrasé, sans ouvrir de fenêtre « Enregistrer sous ».
Prise en charge complète du mode Vim : un émulateur Vim basé sur CodeMirror 6 est intégré. Le point intéressant, c’est que la commande :w de Vim est réellement reliée à l’enregistrement sur le système de fichiers local, et que :wq a été implémenté pour sauvegarder puis fermer l’onglet du navigateur.
Machine à remonter le temps locale (IndexedDB) : au lieu de localStorage, limité à 5 Mo, l’application utilise IndexedDB pour permettre un stockage hors ligne à l’échelle du Go. De plus, pour chaque onglet, les 10 révisions les plus récentes sont automatiquement conservées en arrière-plan afin d’éviter toute perte de données.
Zero-Dependency & fonctionnement hors ligne : il n’y a tout simplement aucun serveur backend. Il suffit de télécharger le dépôt GitHub et de double-cliquer sur index.html pour que toutes les fonctionnalités marchent parfaitement, même totalement hors ligne.
En plus de cela, l’application propose une UX pensée pour les développeurs, avec notamment l’ouverture de fichiers par glisser-déposer, le rendu Markdown en temps réel (avec Floating TOC) et une minimap.
Cela peut être utile lorsqu’on a besoin d’une édition de texte légère ou de rédiger du Markdown. Les retours et les revues de code sont toujours les bienvenus !
Démo : https://yupkidangju.github.io/webmemo/
Code source (GitHub) : https://github.com/Yupkidangju/webmemo
20 commentaires
C'est génial.
Merci !
Le code est propriétaire, mais je développe un scratchboard 100 % hors ligne : https://zetopad.site/
Vraiment superbe. Le design est excellent. C’est un projet très prometteur !
Superbe~
Merci !
C’est bien
Sur mobile, ce serait bien d’empêcher aussi le défilement vertical de la partie en-tête
J’ai ajouté le code et fait des tests de mon côté, et il ne semble pas y avoir de problème. Mais s’il y en a malgré tout, faites-moi un retour et je le prendrai en compte.
J’aime bien
Merci !
C’est sympa !
Je l’ai essayé rapidement et je vous laisse quelques retours :
cmdplutôt quectrl, donc sur Mac il serait sans doute préférable d’accepter les deux (ctrl/cmd) pour les commandes, ou même uniquementcmd(par ex. enregistrer le fichier ->ctrl/cmd+s) ; après vérification, certaines commandes ne fonctionnent d’ailleurs qu’aveccmd(par ex. annuler : seulcmd-zfonctionne).ctrl/cmd+s, accepter aussictrl/cmd+ㄴ).J’ai pris en compte les retours que vous m’avez donnés. S’il y a quoi que ce soit qui ne fonctionne pas, dites-le-moi et j’essaierai de le corriger. La prise en charge des commandes en coréen et le passage à une nouvelle ligne avec Entrée relevaient en fait du même problème..
https://github.com/Yupkidangju/AIHack
https://github.com/Yupkidangju/SheetPicker
Les autres projets sont aussi impressionnants.
Merci ! Tout ça est encore en cours de développement. Il faut aller jusqu’au bout pour que ce soit vraiment terminé !
Oh… c’est vraiment excellent ~~
Merci !
Waouh !
Merci !
C’est génial.
Merci. J’ai fait quelques mises à jour supplémentaires pour permettre aussi le rendu de cartes Mermaid et de diagrammes !