Refonte du projet 100km.space

Tout à commencé sur Twitter, où j’ai entendu parlé du projet 100km.space de Florent Bertiaux. Il a d’ailleurs publié un article expliquant toute la folle histoire autour de ce projet.

L’utilisation de Google Maps pour son projet et le succès très rapide l’a laissé avec une facture un peu salée à régler à Google, parce qu’utiliser les API de Google Maps dans un projet, ce n’est pas gratuit (ni bon marché…). Il avait donc dut simplement coupé son service, pour éviter que la facture ne continue de grimper.

J’ai proposé à Florent sur Twitter de migrer toute la partie cartographie sur OpenStreetMap. L’intêret pour moi étant double : péreniser le projet en supprimant son coût de fonctionnement, et — petit combat personnel — sortir Google (ou autre GAFAM) de l’équation.

Le résultat est disponible ici :
https://remi-grumeau.com/apps/100km/

Carte des 100km autour de Toufflers, Hauts-de-France

1. Pourquoi vouloir remplacer Google Maps ?

Le géant du web a su se rendre incontournable, fournissant à tous des services de qualité souvent gratuitement. Mais comme l’a popularisé Robert A. Heinlein, “There Ain’t No Such Thing As A Free Lunch”, que je résumerais à “Si c’est gratuit, c’est toi le produit”.

Si les outils Google sont gratuits, c’est parce qu’il se finance sur les données utilisateurs aspirées. Et il a su pousser/forcer les développeurs du monde entier a installer au moins un de ses produits sur chaque site internet créé. La collecte de données est massive, et souvent invisible.

Sans une prise de conscience ni actions concretes des développeurs, on ne sortira jamais de cette Minitelisation d’Internet. Cette gratuité ayant pour effet de tuer toute concurrence, les rendant d’autant plus incourtournable vu qu’il n’y a plus qu’eux.

Heureusement, sur la cartographie, il y a encore d’autres acteurs, et une solution libre existe : OpenStreetMap (ou OSM pour la suite). Assez peu connu du grand public mais très utilisé par les profesionnels et scientifique, ce Wikipedia de carte est en effet totalement libre, gratuit et opensource. Tout un ecosystème s’est créé autour de ce projet, avec des librairies gratuite facilitant son utilisation, ou des services pro et payant comme par exemple MapBox.

2. Mettre en place OpenStreetMap

D’un point de vu développeur, c’est en réalité plus facile d’utiliser OSM que Google Maps. Pas de compte Google a créer, pas de clé API à générer. J’ai choisi d’utiliser Leaflet pour me faciliter encore plus le travail. En 30 secondes, j’ai une carte affichée.

var map = L.map(‘map’).setView([LATITUDE, LONGITUDE], NIVEAU DE ZOOM);

Non, ce n’est pas beaucoup plus compliqué que ça. A la rigueur si, il y a aussi une autre ligne de code pour poser le cercle de 100km.

L.circle([LATITUDE, LONGITUDE], {radius: 100000}).addTo(map);

Reste à detecter la position de l’utilisateur. Là encore, pas besoin d’aller chercher très loin, les navigateurs modernes intègrent tous la capacité de demander à l’utilisateur de partager sa position. Tout est parfaitement expliqué ici, et une exemple Leaflet avec la géolocation est disponible sur leur site.

3. Trouver une ville par son nom : le geocoding.

Voila peut-être la partie la plus compliquée. Enfin quand je dis compliqué…

Là aussi, un service libre et opensource de geocoding (un nom = une position GPS) et reverse geocoding (une position GPS = un nom) existe aussi : https://nominatim.org/. Géré par la fondation OpenStreetMap, toute la documentation est là.

Pour faire simple, une simple requête sur
https://nominatim.openstreetmap.org/search?q=toufflers
affiche la carte, et en ajoutant le format voulu, on récupère toutes les infos.

https://nominatim.openstreetmap.org/search?q=toufflers&format=json

Et voilà.
Il n’y a plus qu’à créer un formulaire HTML pour que l’utilisateur entre le nom de sa ville en texte, et vous récupérez sa coordonnée GPS latitude longitude (ou la liste des X villes si le nom est ambigu).

Bon, j’avoue, c’était un peu trop simple, et j’avais déjà une base de données des villes de France toute prête construite à partir des données publiques que je voulais mettre à l’épreuve. Je l’utilise habituellement plutôt sur mes projets clients de bornes tactiles en magasin et musées, là où l’accès Internet est parfois capricieux voir coupé. L’ayant sous la main, j’ai plutôt utilisé ça que Nominatim.

4. Un service redéveloppé en 3h

En une petite heure, le service 100km.space était donc plus ou moins refait à zéro, cette fois basée sur des technologies libres et gratuite, lui permettant de rester indefiniment en ligne. J’ai passé 2 petites heures de plus sur le reste  : l’intégration de l’interface en responsive (formulaire, boutons, textes, …) pour bien l’adapter sur smartphone, tablette et ordinateur.

https://remi-grumeau.com/apps/100km/

Florent a été séduit par l’initiative, et a mis un lien vers cette version “libérééééé” de 100km, restaurant le service offert à ses dizaines de milliers de visiteurs de pouvoir visualiser ce qu’est 100km autour de chez eux. Le temps de lui laisser le weekend pour réflechir à peut-être faire la même chose de son côté.

En 24h, c’est 38.000 visiteurs uniques et plus de 55.000 requêtes. En quelques jours, les chiffres montent à presque 60.000 visiteurs et plus de 250.000 requêtes.

Au final, Google France l’a contacté pour lui offrir l’accès aux API gratuitement, et Il a préféré restauré son service comme mis en place initialement avec cette carte, mais laissant un lien vers cette version alternative OpenStreetMap pour qui voudrait la retrouver.

Chose totalement inutile et donc primordiale, j’ai mis en place une page de stats donnant des chiffres anonymes et consolidés sur le nombre total des requetes sur ce service.
https://remi-grumeau.com/apps/100km/stats/.

5. Pour finir (et en finir)

Si cet article et ce projet peut permettre à au moins un développeur de changer sa vision, et de le pousser à toujours chercher une solution libre ou un service payant pro Français ou au moins Européen avant d’envisager les services des GAFAM, alors je serais content 🙂

Il est temps de dé-googliser le web. Une industrie totalement controlée par un seul et unique acteur, ce n’est pas sain. Que penseriez-vous si Total était propriétaire de 90% des rafineries, 80% des stations essence, que tout le monde est accepté que sa régie publicitaire pose un panneau dans leur jardin tout les 20 mètres sur le bord des routes contre 3% des revenus pub, routes où roule le même modèle unique de voiture produite par Total vu qu’il l’a propose gratuitement à chaque passage dans ses stations essence, tout ça en contrepartie d’un accès aux routes gratuite ?

Heureusement, des projets comme WikipediaOpenStreetMap, ProtonMail, Firefox ou encore e.foundation existent, et ils serait grand temps qu’on leur donne la visibilité et les dons qu’ils méritent ! Cette crise du Covid nous a montré à quel point les initiatives collectives et bénévoles sont bien plus efficaces que d’attendre la bonne volonté de nos politiques et industriels…

Le mode inversé, quand accessibilité devient fonctionnalité

Je suis toujours étonné que personne ne connaisse cette option d’accessibilité sur iOS et macOS. Je suis d’ailleurs assez impressionné à quel point l’accessibilité est prise en compte chez les systèmes Apple.

Notez que, bien qu’ayant des lunettes avec une correction assez forte, je n’ai pas de trouble visuel ni de pathologie médicale nécessitant un équipement ou des interfaces spécialisées. C’est juste que tout ce blanc me crame les yeux pour rien.

L’utilisation du mode « couleurs inversées » est d’ailleurs un confort qui m’a fait revenir à iOS après un passage (très) rapide sur Android. Et j’écris cet article dans le train en mode inversé (ctrl+alt+cmd+8, aucune idée si c’est activé par défaut ou non).

Apple MacOS en mode inversé

J’utilise ce mode principalement sur mon iPhone, en l’ayant activé en triple tap sur le bouton principal. Et c’est génial. Je m’en sers absolument tout le temps, que ce soit pour éviter de me péter les yeux (dans le canap le soir, dans le lit le soir ou au réveil, …) , mais aussi pour ne pas déranger autour de moi dans un endroit peu éclairé (meetup, conférence, train, passager en voiture).

Alors je vous vois venir : certaines applications intègre un mode nuit/sombre. Et c’est vrai, Twitter, Waze ou le mode liseuse de Safari font ça plutôt bien. Mais pas la plus grosse partie des applications. Et c’est là qu’est le gros intérêt de ce mode: il est global. Et c’est absolument toutes les applications qui se retrouvent en mode inversées. Le fait de pouvoir l’activer ou non rapidement en 3 taps rend cette option super adaptive au contenu affiché à l’écran.

Voici plusieurs exemples d’application. J’ai pris le téléphone en photo vu que ce n’est « que » l’affichage qui est inversé, et donc une capture d’écran reste dans le mode « normal », non inversé.

Apple iOS Calendar en mode inversé

Apple iOS Mail en mode inversé

Apple iOS Notes en mode inversé

Apple iOS Safari en mode inversé

Apple iOS AirBNB en mode inversé

Apple iOS Google Music en mode inversé

Sur du texte ou des menus, c’est vraiment très reposant. En revanche, lorsqu’il y a beaucoup d’images, les couleurs inversées détériore complètement le contenu. Autant dire que mieux vaut éviter sur Instagram ou YouTube…

Apple iOS Twitter en mode inversé

A noter que ces photos ont été faites en aout 2017, sous iOS 10. Quelques semaines plus tard avec la sortie d’ iOS 11, j’ai noté des comportements très bizarre. L’écran de veille et le principal avec les icônes ne s’inverse plus. Dans Twitter, les images ne s’inversent plus, mais les emoticones oui. En prenant une capture d’écran, les images sont inversées. J’en conclu que c’est donc détectable côté appli mais sans plus d’info.

Apple iOS Twitter en mode inversé

Styliser un element select uniquement avec CSS

Pour ceux qui n’ont pas encore totalement vendu leur âme à Bootstrap pour styliser un bouton, l’element select reste un de ceux qui pose le plus de problème.

Voici ma petite technique permettant de le styliser comme vous le voulez, tout en gardant la petite flèche vers le bas qui indique à l’utilisateur que ce n’est pas un bouton mais bien une liste déroulante.

Voici l’exemple :

Continue reading

Me and my shadow

Probably some dusty remains from my dark Flash dev past, i’ve always love small little online games. Huge big 3D games are ok on the XBOX but to my heart, 2D will always win! Probably because i’ve been a 2D games kid back in the 80’s: Sonic, Alex Kid, Kyrandia, Monkey Island, … oh my oh my 🙂

Yet again, i found a very nice and smart little yet-another-HTML5-game-framework-demo game on which i waste procrastinate spent an hour and loved it! Hope you’ll love it too

Me and my shadow

Posted in Uncategorized