Voilà un pari qui semble irréalisable et sûrement un peu stupide. Pourquoi s’infliger une perte possible d’informations essentielles pour planifier sa journée ?

En fait, ce que je tente depuis plusieurs mois maintenant, c’est de planifier l’ensemble de mes tâches bien en amont de ma journée qui débute.

J’ai longtemps eu le réflexe de partir à l’aventure du nouvel email dès l’ouverture de mon ordinateur. Alors qu’au final, la plupart des tâches importantes à réaliser sont la suite logique du travail de la veille.

Depuis assez longtemps maintenant, je prends le temps en fin de journée de préparer ma liste de tâches à exécuter pour le restant de la semaine. Je prends 10 minutes chaque soir pour passer en revue les projets que je dois terminer et évaluer le temps restant.

Un peu comme le travail qu’effectue un Product Owner sur le suivi de production : découper, évaluer, prioriser et planifier les tâches.

Concernant le lundi et le vendredi, même chose. Au final, tout projet peut être découpé et du coup réparti dans une tranche horaire déterminée. 

Le passage à la vie de free-lance m’a forcé à être plus assidu sur ma gestion interpersonnelle de mon emploi du temps. Sans équipe, il faut savoir se responsabiliser sur l’ensemble des compétences requises. Cela paraît ridicule à écrire (et à lire, je pense), mais il s’agit de la vérité que l’on aime généralement se cacher lorsqu’on travaille en équipe.

Avec le temps, j’ai eu à gérer des projets de plus en plus conséquents, avec de plus en plus d’interlocuteurs et à monter une équipe de plus en plus grande. La transmission de l’information est alors devenue essentielle pour éviter les frustrations de chacun. 

Plutôt qu’un gros bloc indigeste, il est plus facile de transmettre des paquets d’informations rapides à assimiler et à utiliser. Cette transmission passe nécessairement par un rythme régulier de points et une astreinte aux process simples. 

Ce premier process est de mettre à plat les projets, les tâches, les informations. Puis de les organiser sans se perdre dans de nouvelles considérations.

Un peu comme assainir une pièce et ouvrir un nouveau placard le matin alors que celui ouvert la veille n’est pas encore rangé. Le résultat est (sans surprise) un bordel presque organisé, mais surtout réellement peu pratique.

Il y a certaines situations où voir d’un coup d’œil l’ensemble des placards ouverts permettrait de mieux organiser le rangement. Mais en y allant étape par étape (itération par itération comme on dit chez la startup nation), on arrive généralement plus rapidement à ses fins.

Je suis persuadé qu’il vaut mieux avancer rapidement sur de petites étapes plutôt que de viser directement le résultat parfait et terminé.

Mes petites étapes matinales sont donc d’avancer sereinement sans nouveau placard à ouvrir. De travailler, trier et ranger au fur et à mesure les tâches avant d’en prendre de nouvelles à bras le corps.

Cela m’est particulièrement utile lorsque je gère en simultané plusieurs projets de tailles variables et de thématiques réellement opposées. La division pour l’organisation est finalement une pratique qui me permet de travailler plus efficacement.

Alors, si vous avez une information essentielle à me transmettre qui doit être lue dès le matin, pensez au téléphone. C’est bien aussi d’entendre la voix de ses interlocuteurs 😉

P.S. : Cette pratique a certaines failles, c’est bien évidemment ce que je fais en dehors des moments un peu stressants de validation finale (pas la validation intermédiaire qui dure des plombes) ou de mise en production finale (pas la staging qui passe en préprod).

C.

Comment créer une carte Google Maps à propos des zones de couvre-feu ?

Parmi les petites aventures que j’aime mener de front, il y a la création de cartes de territoires. Par exemple, durant le confinement j’ai pu expérimenter la fameuse zone des 100 kilomètres autour du domicile, lors de l’arrivée du port du masque obligatoire ce fut la même chose avec une carte de l’ensemble des villes concernées. Ou encore avec LesGrossesCartes qui permet à n’importe qui de créer une carte avec beaucoup d’informations à partir d’un back-office dédié ou via une API.

Mais tout ceci ne se résume au final qu’à une chose : avoir des choses à partager sur un support bien visuel.

C’est donc le défi que je me suis lancé avec la carte des zones à couvre-feu.

Le petit lien : https://restrictionsenfrance.fr

Mais alors, comment on fait exactement ?

Le plus simple est de repartir un peu en arrière. Un site web est composé de différentes choses : un serveur, un nom de domaine et d’un ensemble de fichiers (les informations que l’on affiche aux visiteurs).

À ceci, s’ajoutent les services annexes, des APIs par exemple. Ce qui est le cas avec l’usage de Google Maps et l’intégration par la suite de Google Analytics pour suivre le trafic du site. J’utilise la suite d’outils de chez Google par simplicité et rapidité.

Je vois déjà pointer le nez de ceux qui défendront le libre et l’open source. Je suis de tout cœur avec eux, étant également de ceux qui souhaitent que l’information circule le plus librement possible. Toutefois, la facilité technique et la rapidité d’exécution étaient pour moi indispensables : mon choix s’est tourné vers ce que je connais et ce que je peux maîtriser en peu de temps.

Cette carte, comme les autres que je crée parfois, est un MVP de ce que j’ai en tête.
MVP : Minimum Viable Product

Je ne compte pas dégager de profit de ce site, je souhaite simplement faire vite, bien et sans accrocs majeurs.

Voici à quoi ressemble l’ensemble de fichiers que j’ai déposé sur mon serveur, il s’agit d’un site statique, sans base de données, réalisé avec de vieilles technologies : HTML, CSS et JavaScript.

Ensuite, un petit détour du côté de Google Cloud Platform pour activer l’utilisation de plusieurs API nécessaires (Google Maps API, Places API, Directions API), maintenant il est temps de passer au gros du sujet.

Les données, les données, les données.

La cartographie en France est un joli sujet. Nous disposons aujourd’hui d’un tas de sources différentes pour récupérer de l’information qualifiée à moindre coût (et même gratuitement).

La plateforme OpenDataFrance fourmille de sources de données que l’on peut réutiliser comme bon nous semble. C’est ainsi que j’ai pu créer la première version du site, avec la zone de couvre-feu par métropole concernée.

Par la suite, avec les changements du 22 octobre 2020, j’ai dû adapter le site avec l’affichage des départements touchés par les restrictions. Ceci n’aurait pas été possible sans les fichiers GeoJSON trouvés sur Internet et sur GitHub.

Parfois ceux-ci nécessitaient une légère mise à jour pour être totalement fonctionnels, mais rien d’insurmontable pour ceux qui prennent le temps d’en comprendre le fonctionnement.

L’une de mes sources de données a été le site et le compte GitHub de Grégoire David :

Par la suite, j’ai pris sur moi de trouver les bonnes ressources, les mélanger puis faire en sorte que tout fonctionne correctement.

GeoJSON ?

Le format GeoJSON est une variante du format JSON qui permet de décrire des zones géographiques à placer sur une carte. Ce format permet de diffuser des informations géographiques rapidement, de façon normée et avec des informations complémentaires (il est possible d’y ajouter des noms, descriptions …).

Le code !

Il était alors temps de mettre les mains dans le concret pour proposer un système simple de représentation visuelle de notre territoire sous couvre-feu. J’ai repris la base qui m’avait servi sur 100km.space au niveau graphique puis je l’ai de nouveau adaptée aux nouveaux besoins.

La première nécessité était de positionner une adresse sur la carte et d’y apposer la couleur de la zone (rouge = couvre-feu, rien = tout va bien).

La seconde nécessité était de proposer une fonctionnalité de calcul d’itinéraire pour vérifier que nos futurs déplacements ne risquaient pas de nous propulser dans l’illégalité en nous rendant dans une zone de couvre-feu à la mauvaise heure.

J’y ai ensuite ajouté différents GeoJSON correspondants aux départements concernés et la technique fait le reste. Voici ci-dessous le code qui fait toute la magie :

Pour réagir vite concernant les zones concernées, j’ai décidé de travailler avec Google Sheets pour pouvoir générer mon code JavaScript. Ce qui fait qu’à partir d’une liste des départements de France, je peux en quelques clics avoir un code propre à déposer sur le serveur, sans manipulations fastidieuses.

J’ai également pris le temps de réunir les liens les plus demandés : le générateur de déplacements et la foire aux questions du site gouvernemental.

Ensuite ?

Par la suite, je vais analyser ce que les utilisateurs attendent du site, suivre l’évolution de la réglementation et proposer des choses utiles pour la plupart des personnes concernées.

Loin de moi l’idée d’en faire un couteau suisse perfectionné, mais d’en garder absolument le côté facile d’accès.

N’hésitez pas à proposer vos axes d’améliorations directement depuis Twitter !

A.

Avoir une idée le matin, lancer un site dans la foulée et finir sur BFMTV le soir : la petite histoire derrière 100km.space

S’il y a bien une chose à laquelle je ne m’attendais pas, c’était ce qu’allait devenir la petite idée d’une carte qui affiche un cercle.

Parce que finalement, il ne s’agit que de cela. Afficher une carte, prendre des coordonnées géographiques et placer un rond équivalent à 100 kilomètres autour de ce point précis.

Au réveil, j’ai eu la pensée toute bête de savoir ce que représentait cette future zone de déplacement autorisée lors des phases de déconfinement. Mine de rien, ça fait quand même pas mal de kilomètres et les déplacements professionnels vont reprendre très rapidement et beaucoup plus fréquemment pour certains (je pense par exemple à certains clients qui souhaitent absolument voir un prestataire avant de lui confier une mission).

Ne sachant pas ce que cela représentait, j’ai décidé de me remettre à l’API de Google Maps. J’aime bien les cartes, ça me permet de me situer dans l’espace, ça me parle, ça m’attire.

Ni une, ni deux, j’en profite pour me dire que si ça me sert, ça pourra sûrement servir à deux ou trois potes un peu geek sur les bords. Au moins pour échanger sur ce défi que représentait cette idée.

Petite routine du matin, check des emails, réunion d’équipe, échanges avec les collègues et il est 10h.

C’est parti, je prends un nom de domaine, court de préférence et que je pourrais partager sans l’écorcher.

Direction OVH. Et ses promos.

Je vois que le .space est dispo pour le titre du site : ce qui se trouve dans un rayon de « 100km ». Moins de 1,5€ plus tard, je me retrouve devant la facture de location du nom de domaine, je paie, j’attends de pouvoir le relier à un hébergement existant, après tout, il ne s’agit qu’un simple fichier HTML et d’un peu de mise en page. Pas besoin d’une bête de course.

Bienvenue : https://100km.space !

Google Cloud Platform. Et les APIs.

Cela faisait quelque temps que je n’avais pas mis les mains dans cet espace. Beaucoup de possibilités sont offertes à ceux qui veulent s’intéresser à la création de service grâce aux outils de Google.

Certes, aux yeux de beaucoup, il s’agit d’un géant prêt à tout pour récupérer vos données, votre argent, votre identité. Mais il s’avère que c’est surtout celui qui propose des APIs simples à prendre en main, en peu de temps, avec peu de moyens, pour des prototypes rapides.

De ce fait, activation des bonnes ressources, liaison à ma carte de paiement (mon aide à l’effort collectif, en plus de chercher du matériel pour les EHPAD), récupération de ma clé API, sécurisation pour éviter l’usurpation de site … Bref, c’est fait.

Les mains dans le JavaScript. Et les à-côtés.

Le prototype du site a été rapide à sortir. Je me suis servi d’un builder HTML5/CSS3 que j’avais déjà sous le coude, l’idée était de faire du quick & dirty.

Prendre le temps de boucler une première version qui marche avant de passer du temps à l’optimiser.

Timing serré, je me donne le défi de boucler tout ça en moins d’une heure. Pari réussi, je pousse en ligne après quelques microajustements :

  • OpenGraph : indispensable pour être bien vu par les plateformes sociales
  • Balises de header : au cas où ce serait utile
  • Test rapide sur mobile : j’ai un souci de zoom, mais ça marche quand même
  • Google Analytics : juste pour voir d’où les gens se connectent, c’est mon petit plaisir

En ligne. Et que ça saute.

Canva pour générer les visuels de partage ainsi que la favicon. Transmit pour tout envoyer sur le serveur. SublimeText pour optimiser à la volée les scripts.

Sélectionner le dossier, cliquer sur envoyer en ligne, attendre. Vérifier. Changer de petites choses du côté de OVH sur le DNS. Vérifier. Publier un tweet. Il est 10h59, j’ai réussi à lancer un prototype fonctionnel en 1h.


Les premiers retours arrivent, on me dit que c’est marrant, que c’est cool, que ça change, que je devrais modifier des choses.

Dès lors, il m’a suffi d’adopter une méthode bêtement simple :

  • Accuser réception du retour, car c’est assez génial pour ça Internet, le fait de pouvoir avoir un feedback immédiat
  • Engager la discussion pour comprendre les frustrations ou les envies
  • Tenter en direct de modifier le prototype local puis le pousser une fois au carré
  • Tenir au courant en répondant à la personne qui m’a donné le feedback de la nouveauté
  • Tenir au courant en créant un thread à partir de mon premier tweet des évolutions du site
  • Itérer

Ceci a été fait sur les réseaux où je suis présent, sur chaque compte personnel que j’ai, et non sur un compte d’entreprise. Il s’agit d’une démarche personnelle. L’adresse a donc été communiquée sur :

  • Twitter
  • Facebook
  • LinkedIn
  • Instagram en storie

Aucune campagne email de lancement en grande pompe. C’est juste l’histoire d’un mec dans son coin qui a relevé un défi qu’il s’est lui-même lancé.

Manger un bout. Et regarder les statistiques.

À partir de ce moment, j’ai compris qu’il se passait quelque chose. Je passais plus de temps à répondre à chaque commentaire / chaque partage qu’à prendre le temps de faire une nouvelle itération sur le code source.

Toutefois, j’ai pu avancer sereinement suite aux feedbacks complets et éclairés. Régler le souci du zoom sur mobile. Régler l’apparence de la carte. Régler le temps de chargement. Implémenter la fonctionnalité multipoint sur la carte …


À chaque sortie d’une fonctionnalité, je reprenais ces deux points essentiels :

  • Tenir au courant individuellement
  • Tenir au courant collectivement

Sans omettre une chose radicalement essentielle :

On peut partager les succès et les ratés. Les certitudes et les inquiétudes.

Rapidement, je me suis rendu compte que le tarif chez Google allait commencer à gonfler au fur et à mesure des visites. En fin de journée, vers 21h, il y avait déjà eu plus de 5000 personnes ayant effectué des recherches. Plus de 7000 pages vues, avec une moyenne de 43 secondes sur la page.

Oui, cette simple page HTML marche et plait.

J’ai alors décidé de finir la journée en répondant à ceux qui partagent encore le lien ou les publications originales. C’est alors qu’à 23h, je reçois une mention sur Twitter : « tu es passé sur BFMTV ».


Effectivement, le journaliste a pris une capture d’écran pour son sujet du jour qui traitait des fameux 100 kilomètres promis. Plusieurs sites ont étés abordés, mais mon projet matinal en faisait partie, à côté de productions bien meilleures techniquement.

Bilan de la journée, 6385 visiteurs uniques, 9399 pages vues, 46 secondes en moyenne sur la page. Pour 1 heure de développement au tout départ.

À la fin, ça fait des Chocapic.

Ce site ne reste qu’un bout de code, réalisé en peu de temps, pas très W3C, pas forcément parfait techniquement, avec des lacunes côté marketing (oui, c’est gratuit, oui, c’est moi qui paie encore).

Mais ce qui se passe, c’est que dès le lendemain matin, Twitter m’alerte à coup de notifications nombreuses : le site est encore plus partagé.

Cette fois-ci, au cours de la journée, il s’agit de Clubic qui décide de publier un article. Ensuite dans les sources du site je découvre des newsletters qui en parlent, des forums qui partagent le lien, quelques blogs avec des articles sur le sujet du déconfinement.

J’ai vraiment été content de faire ce projet, qu’il serve est une situation géniale à vivre. Surtout que ce n’était pas gagné, j’ai une fâcheuse tendance à vouloir concrétiser beaucoup d’idées du matin, sans forcément le faire.

La suite. Et la fin ?

Il est 18h30, le jour d’après. 14998 visiteurs uniques sur la journée, 23313 pages vues, 48 secondes en moyenne sur la page. Clairement, mes dépenses chez Google ont explosé.

Je ne sais pas si je vais continuer à financer ce site. Une cagnotte est en place, pour le moment pas de logo de sponsor à afficher.

Quelques pas gentils se sont proposés pour une récupération du site afin d’y mettre une marque. Ce que j’ai refusé. Il s’agit d’un outil créé par un individu pour les individus.

Mécénat ok, sponsoring ok, récupération non.

Au final, je ne sais pas encore ce que ça va devenir. En tout cas merci, c’était une riche expérience de vivre ce petit moment avec vous, les Internets.