Side project du (long) week-end du 1er mai : covid100.fr
Une carte interactive pour connaître sa zone de 100km autour de chez soi pendant le déconfinement.
Le site utilise :
Une carte interactive pour connaître sa zone de 100km autour de chez soi pendant le déconfinement.
Le site utilise :
- 🗺️ OpenStreetMap et Leaflet pour la carte interactive
- 🎨 CSS : il y a peu d'élément graphique je n'ai donc pas inclus de framework CSS pour gagner en performance
- Pour trouver un beau gradient de couleur : https://uigradients.com/
- 🚂 JS : Vanilla JS toujours pour gagner en performance
- 🖼️ HTML : de base je suis parti sur le template de https://html5boilerplate.com/ en supprimant tous les fichiers non utiles au projet
- 📱PWA : le minimum (pas de mode offline) a été mis en place pour que le site web soit une Progressive Web App.
- sur smartphone : on pourra donc ajouter le site web à son écran d'accueil et le site s'utilisera comme une application native
- 📱SEO/Social :
- utilisation de Share Api https://web.dev/web-share/ pour pouvoir partager l'application, via un bouton et un peu de JS, comme une application native(!)
- des balises et Open Graph pour avoir un beau snippet sur les réseaux sociaux
- exemple avec Twitter https://cards-dev.twitter.com/validator
- ⚖️ RGPD
- le site utilise Google analytics en mode anonyme et une (petite) bannière est affichée pour l'indiquer
- la documentation pour activer ce mode
- Hébergement : Github page https://pages.github.com/
- ⌨️ Code source (no code review please 😅): https://github.com/bilelz/covid100
