Sickers generator — Statique.

Bon histoire de s’amuser un peu et d’accorder l’utile à l’agréable, voici un petit article sur la création de stickers digitals.

Attention je vais glisser deux mots qu’il vous faudra prononcer à haute voix : Détricotons, et sophistication.Dans cet article, on aura le résultat de l’utilisation de mes connaissances web et 2 ou 3 modèles LLM

Ça existe déjà ? Si ??
Réinventons la roue !!!
humble Anonyme

Pelote de fil : le prix de la sur-ingénierie

D’abord quel stack utiliser ou comment ne pas se laisser tomber dans le syndrome de la pelotte de laine et du chaton un peu énervé.

J’ai d’abord essayé le dernier modèle de Claude, Claude Opus 4.7 via IDE windsurf, mais c’était une mauvaise idée, cela à crâmé ma patience et mon quota de token sans avoir avancé dans la création de mon app web par contre j’avais les entrées de mon plugin prêt à l’emploi . En l’occurence encore un plugin wordpress avec un stack bien avancé et à la mode, mais dans les faits pas utile dans mon cas, mais intéressant à des fins d’éducation.

– Moteur canvas : Konva.js + react-konva. [La zone avec de dessin avec les images]
– Stack widget JS : React 18 + Konva + Zustand (state) + Vite (build) + TailwindCSS scopé (préfixe `px3ksg-`).

Ensuite après avoir fini ma journée je me suis dit et si j’essayais plutôt la méthode KISS via webui avec Gemini de chez google. En 15 minutes et en itérant pour ajouter des fonctionnalités je suis arrivé à un fichier html avec toutes les fonctionnalités dont j’avais besoin. Évidemment, je ne me suis pas occupé de faire du webdesign, on se concentre sur les fonctionnalités. Le design de l’interface a été donc laissé tel quel avec des emojis pour soutenir les rubriques de l’interface.

Image UI/UX

Avec une base faite maison, coeur, trèfle, étoile, tête !

La stack technique de mon Sticker Studio est moderne, légère et 100 % native (Vanilla) :

Données & Sauvegarde : LocalStorage du navigateur (pour l’auto-save du projet et des images importées en Base64) avec import/export en JSON et rendu final en PNG transparent 512x512px.

Rendu & Structure : HTML5 avec l’API Canvas (et un Offscreen Canvas en mémoire pour fusionner la silhouette et générer le contour blanc unique).

Style : CSS3 propulsé par Tailwind CSS (via CDN → maintenant en local) et des typographies expressives importées de Google Fonts (Bangers, Luckiest Guy, Comic Neue, etc. → maintenant en local).

Logique : JavaScript Vanilla (ES6+) pour le système de calques, le drag & drop, l’accordéon dynamique et la gestion des fichiers.

Technique Mixte :

Maintenant je vais mixer les 2 pour avoir mon plugin wordpress 🙂 ce qui signifie intégrer un widget Gutenberg avec un stickers studio. Une app PWA.

« La simplicité est la sophistication suprême. »
Léonard de Vinci

Détricotons la pelote : pourquoi j’ai troqué Node/React contre du vanilla JS

Dans mon cas, une petite app web sans prétention, mais juste un outil personnel que je partage, j’ai trouvé que

Simplicité : Serveur web apache, Aucun outil de build requis : un fichier .js suffit et pas de dépendances externes : le code s’exécute tel quel dans le navigateur.
Performance : Moins de calculs inutiles (ex. : pas de diffing du DOM comme React). Exécution native par le navigateur, sans couche d’abstraction. Fichiers légers (pas de bibliothèque à charger).
Maitrise : Pas de « boîte noire » : tout est visible et modifiable. Contrôle total sur le code et son exécution. Compréhension directe du DOM, des événements, et des APIs natives.

Il ne reste plus qu’à créer des assets, ici dans un éditeur vectoriel SVG :

Voici l’app directement dans cet article : ( Pour fermer l’app il faut trovuer la petite croix dans un cercle, good luck )

Attention la création est éphémère !!!

Les futurs fonctionnalités ?

Pour de petits assemblages, on va pas aller plus loin pour le moment. Mais il manquerait par exemple des fonctionnalités comme l’historiques, le groupage d’éléments, ou encore une meilleure gestion de la mise à l’échelle, des calques, …