Le compagnon de route des projets web Alsacréations. Une base de connaissances vivante, organisée selon le cycle de vie d’un projet web : de l’initialisation à la mise en production.
Kiwipedia est le fruit de notre veille technologique, librement partagée. Elle vise à :
- Uniformiser les processus de conception de l’agence Alsacreations.fr.
- Faciliter l’intervention de profils variés au sein d’une équipe.
- Pérenniser la maintenance de nos projets.
- Renforcer notre impact auprès des internautes via l’accessibilité, la qualité, l’ergonomie, la performance et le référencement.
flowchart LR
A([🚀 Démarrer]) --> B([🧱 Fondamentaux])
B --> C([🧩 Stacks])
C --> D([✅ Qualité])
D --> E([🎨 Design])
E --> F([📚 Aide-mémoire])
click A "#-démarrer-un-projet"
click B "#-fondamentaux--conventions"
click C "#-stacks--frameworks"
click D "#-qualité--exigences-non-fonctionnelles"
click E "#-design--production-visuelle"
click F "#-aide-mémoire"
Chaque section ci-dessous correspond à une étape de ce cycle. Les fiches sont annotées d’un statut (stable, draft, expérimental), d’un niveau (débutant, intermédiaire, avancé) et d’une date de mise à jour.
Tout ce qu’il faut pour bien initialiser un projet : outillage, configuration, workflow.
- Initialisation de projet — Squelette, conventions et configuration de base.
- Projet avec Vite — Bootstrap rapide d’un projet front moderne.
- Hébergement AWS S3 — Déploiement statique sur S3.
- Visual Studio Code — Extensions, configuration et bonnes pratiques.
- Workflow Git — Conventions de commits et de branches.
Le socle commun à tous les projets, à respecter scrupuleusement et à consulter aussi souvent que nécessaire.
- Conventions de nommage — Composants, fichiers, classes, variables.
- HTML — Sémantique, structure, microdonnées.
- CSS — Architecture, variables, dark mode, responsive.
- JavaScript — Style, idiomes et bonnes pratiques.
- TypeScript — Typage et configuration.
- Accessibilité — RGAA, ARIA, checklist et patterns.
Les guidelines spécifiques aux technologies que nous mettons en œuvre selon les projets.
- Vue.js — Architecture, composants, conventions.
- WordPress — Thème, sécurité, performance, recette.
- PHP / MySQL — Développement back-end.
- E-mailing — Templates HTML compatibles.
- CSS utilitaires (archivé) — Approche Tailwind / utilitaires.
Les bonnes pratiques transverses à valider en recette comme en production.
- Performances — Web Vitals, optimisation, audits.
- SEO — Référencement naturel.
- RGPD — Conformité, cookies, consentement.
- Écoconception — Sobriété numérique.
- Sécurité HTTP — En-têtes, CSP, bonnes pratiques.
- Interopérabilité — Compatibilité multi-navigateurs et appareils.
Les fiches dédiées au design, à la production graphique et aux assets.
- Webdesign — Maquettes, design system, livrables.
- Icônes — Choix, intégration et accessibilité des pictogrammes.
Pense-bêtes à garder sous la main pendant le développement.
- Cheatsheet Flexbox
- Cheatsheet Grid Layout
- Cheatsheet Git
- Cheatsheet Linux
- Cheatsheet Docker
- Cheatsheet htaccess
- Cheatsheet NPM
- Liens utiles — Veille, outils, articles de référence.
- Archives — Anciennes guidelines conservées pour mémoire.
Kiwipedia évolue : chaque fiche peut être amendée, enrichie ou repensée.
- 📐 Guide de style éditorial — Conventions typographiques, emojis sémantiques, blockquotes typés.
- 📄 Modèle de fiche — Squelette à dupliquer pour toute nouvelle guideline.
Auteur : Alsacréations.
Les contenus de ce dépôt sont disponibles sous licence Creative Commons « Attribution – Pas d’Utilisation Commerciale – Partage à l’Identique 2.0 France » (CC BY-NC-SA 2.0).