Il était un blog…

Fidèle à un grand classique de notre métier, mon tout premier article de blog parle de mon propre blog.

📝 Le contenu

Je dis blog, mais c’est plutôt un site perso. Comme dirait Jeremy Keith, c’est mon « online home ». L’objectif principal, c’est évidemment d’écrire des articles, mais je compte aussi y référencer d’autres contenus : des pages détaillées pour mes conférences, des listes de trucs, des liens et des notes courtes. J’écrirai surtout en anglais, mais certains articles pourront être traduits ou écrits directement en français quand ça aura plus de sens.

La plupart des contenus tourneront autour de sujets techniques liés au Web :

😍 HTML/CSS/JavaScript
🦊 Les navigateurs
🕸️ HTTP
🔐 La sécurité
⚡ La performance

Depuis IE5, je cultive mes connaissances et mes compétences autour du Web, alors je pense avoir deux ou trois choses à raconter sur le sujet. Ça prendra la forme de petites astuces, de tutos plus longs, de recherches fouillées, d’expériences un peu folles, voire de coups de gueule pas très apaisés si je suis vraiment énervé.

J’ai aussi envie d’écrire sur des sujets moins techniques, mais liés à mon métier :

🗣️ Parler en public
🤯 Transmettre des connaissances
🖊️ Écrire de la documentation
💻 Travailler à distance (dans un espace de coworking)
☁️ Les services de cloud
🛡️ La souveraineté numérique

Il y a quelques années, j’ai donné des cours de Web/JavaScript à des étudiants formidables (qui me lisent peut-être…). Et ça fait 6 ans que je donne des conférences. J’adore parler en public et transmettre en général. J’apprends encore beaucoup, mais j’ai envie d’écrire là-dessus.

Ça fait maintenant 4 ans que je travaille à distance, depuis un espace de coworking. Ça a eu un gros impact sur ma vie et sur ma façon de travailler. La plupart du temps, les gens en remote écrivent sur le travail à la maison, mais je vois assez peu d’articles sur les espaces de coworking.

Je pourrais aussi écrire sur d’autres sujets qui me passionnent :

🎬 Le cinéma
🎹 La musique
🎼 Cinéma + musique = les bandes originales
🎮 Les jeux vidéo
🪓 La menuiserie

Je ne suis pas sûr d’avoir déjà des choses intéressantes à en dire, mais des recommandations et des critiques seraient un bon début.

🎯 Mes motivations

Le but de ce blog, c’est de partager ce que je sais et ce que je vis, mais d’autres m’ont appris que je devais aussi écrire pour moi. C’est un peu comme quand t’écris des commentaires dans ton code ou dans de la documentation. La plupart du temps, c’est toi, plus tard, qui as besoin de ces explications détaillées.

J’ai aussi lu qu’écrire sur un sujet te pousse à l’approfondir encore plus. Je l’ai pas mal vécu en préparant mes conférences et mon cours de Web/JavaScript et j’ai adoré ça. Et puis soyons honnêtes, j’ai toujours été impressionné par les gens qui répondent à une question par « Ah, j’ai écrit un article là-dessus, tiens, voilà l’URL ».

Autre motivation : progresser à l’écrit, surtout en anglais. Pour moi, c’est vraiment important pour n’importe quel développeur qui manipule des issues, des pull/merge requests et de la documentation en général.

🤩 Mes inspirations

Le style du site n’est pas encore terminé. C’est en fait un design très simple, commencé il y a 3 ans et jamais fini. J’ai envie d’essayer autre chose, mais ce n’était pas la priorité. Je te parlerai de mes inspirations graphiques quand je m’y remettrai.

Au début de ma carrière, je lisais régulièrement A List Apart et Smashing Magazine. Des articles longs, documentés, soigneusement relus et bien écrits. Je lisais aussi beaucoup d’articles sur les blogs perso de développeurs et de développeuses. Beaucoup m’ont donné envie d’écrire et de lancer un blog. En voici quelques-uns qui me viennent en tête :

Jake Archibald

Jake écrit des articles avec des SVG animés dedans, avoue que c’est la classe. Plus sérieusement, j’aime beaucoup son ton. Il a tendance à creuser un sujet jusqu’au bout, et ça finit toujours par donner une lecture passionnante.

jakearchibald.com

Jeremy Keith

Jeremy est un fervent défenseur de l’amélioration progressive (progressive enhancement) et de l’IndieWeb. Ses articles ont souvent une pointe de sagesse que j’apprécie beaucoup. Son site est l’un des meilleurs exemples d’IndieWeb que je connaisse et il m’inspire énormément sur la façon de publier et de partager mes contenus.

adactio.com

Lea Verou

Léa est comme le CSS : elle est géniale ! Elle a une voix qui porte et je l’admire pour ça. Au fil des années, elle a partagé plein de super projets et d’articles intéressants. C’est toujours du temps bien investi de la lire.

lea.verou.me

Remy Sharp

Remy partage mon enthousiasme pour les expériences un peu folles avec Web Audio. J’ai lu beaucoup de ses articles et, comme Jeremy, il partage des liens et des notes sur son site. C’est aussi lui qui sort ses recommandations de films de Noël chaque année.

remysharp.com

Nicolas Martignole

Quand j’ai commencé ma carrière, je faisais beaucoup de Java et le blog de Nicolas Martignole, « Le Touilleur Express », a été un des premiers que j’ai suivis assidûment. Avec les années, il s’est mis à écrire sur des sujets moins techniques, comme gérer des développeurs ou être un développeur senior. C’est toujours intéressant.

touilleur-express.fr

Nicolas Hoizey

Sur le terrain de l’IndieWeb, je pourrais décrire Nicolas Hoizey comme « le Jeremy Keith français ». Comme Jeremy, il applique le principe POSSE et la structure de son site est une superbe source d’inspiration pour moi. J’ai beaucoup appris en fouillant son dépôt GitHub pour voir comment il a tout construit et configuré. Il a écrit énormément de très bons articles, tu as sûrement déjà lu celui sur la hauteur du viewport.

nicolas-hoizey.com

Boris Schapira

Boris écrit sur le Web, mais il écrit aussi sur la politique, la citoyenneté et le fait d’être papa. Je ne suis pas sûr d’être prêt à sortir de ma zone de confort là-dessus, mais il m’inspire. Il écrit souvent sur la webperf et quand il le fait, c’est 0 % de blabla devrel et 100 % de terrain. Comme pour Nicolas Hoizey, je vais souvent voir son dépôt GitHub pour comprendre comment il a construit et configuré son site.

boris.schapira.dev

🛠️ La stack

À l’heure où j’écris ces lignes, ce site est surtout un site statique construit avec Eleventy et hébergé sur Clever Cloud.

La dernière fois que j’ai essayé de lancer un blog, j’ai passé tout mon temps à écrire mon propre générateur de site statique. Au final, je me suis retrouvé avec une page d’accueil et aucun vrai article. Cette fois, je me suis promis de ne pas procrastiner (trop) et de prioriser les fonctionnalités.

Construit avec Eleventy

J’ai choisi Eleventy parce que j’ai beaucoup entendu parler de ses performances et de sa simplicité. Soyons honnêtes, je l’ai aussi choisi parce qu’il est écrit en JavaScript et parce que tous les gens cool l’utilisent en ce moment (hype-driven stack choices FTW). Après quelques semaines, je comprends bien mieux comment il fonctionne, et je trouve qu’il colle très bien à ma façon de penser. Il n’essaie pas d’en faire trop, il a un seul job, et il le fait très bien.

J’ai démarré avec la config la plus basique possible en me disant que j’ajouterais des choses au fur et à mesure. Si tu jettes un œil à mon fichier de config, tu verras que je n’ai activé que deux plugins pour l’instant :

RSS parce que le RSS, c’est la vie !
La coloration syntaxique pour un prochain article avec des exemples de code HTML/CSS.

C’étaient les seuls plugins dont j’avais vraiment besoin avant de publier les premiers articles. Il existe plein d’autres plugins Eleventy que j’avais envie d’essayer. J’ai même commencé à bidouiller une intégration asciidoctor. Mais si je veux battre la procrastination, il faut vraiment que je me concentre sur le contenu et que je remette cette expédition au pays des plugins à un autre jour.

Optimisé avec Parcel (v2)

Comme expliqué dans cette issue, Eleventy n’a pas de pipeline d’assets officiel. Je ne pense pas que ce soit un problème, surtout dans mon cas où je n’utilise aucun outil CSS (Sass, Less, Tailwind et compagnie).

Je crois beaucoup au découplage en général. Chaque couche devrait faire une seule chose et la faire bien. Chaque couche devrait en savoir le moins possible sur les autres. Pour mon propre site, je voulais découpler ces deux couches : construire le contenu et optimiser les performances.

Quand Eleventy a fini de construire mon contenu, j’obtiens un site statique valide que je pourrais héberger tel quel. Il n’est juste pas encore optimisé pour la performance. J’ai failli mettre en ligne comme ça, sans la moindre optimisation, mais j’ai fini par essayer Parcel (v2) et je me suis beaucoup amusé.

J’ai pu prendre le dossier de sortie d’Eleventy comme entrée et générer un site optimisé avec :

Du HTML minifié
Du CSS minifié
Des images optimisées
Des assets renommés avec un hash, pour pouvoir leur coller un cache « infini qui n’expire jamais »

Tu as utilisé un bundler JavaScript pour un site qui n’a pas une ligne de JS ?

Eh oui, mon ami. Parcel, c’est bien plus qu’un bundler JavaScript. Contrairement à Webpack ou Rollup, il est vraiment centré sur le Web, et il sait partir d’un point d’entrée HTML. Je l’ai aussi trouvé plus pertinent pour mon contexte par rapport à des solutions plus bas niveau comme Gulp parce qu’il comprend comment les fichiers HTML, CSS, JS et images dépendent les uns des autres.

Parcel v2 est encore en bêta. J’ai dû écrire quelques plugins maison et j’attends avec impatience la sortie de plugins officiels pour ajouter d’autres améliorations sur les images. Tu trouveras plus de détails sur la façon dont je m’en sers dans cette pull request.

Hébergé sur Clever Cloud

Quand j’ai acheté ce domaine en 2015, j’hébergeais ce site chez OVH, avec Docker, sur un serveur privé virtuel que j’avais. Configurer tout ça moi-même était amusant au début, mais c’était clairement une plaie à maintenir et à sécuriser.

Quelques années plus tard, je l’ai déplacé sur Netlify. Pour déployer un site statique, leur produit est vraiment sympa, même quand tu n’as qu’une page d’accueil et zéro article.

Quand je m’y suis remis en septembre, j’ai décidé de déplacer le site sur Clever Cloud. Première raison, la plus évidente : je travaille pour Clever ! On a une philosophie push-to-deploy avec plein de fonctionnalités autour : logs en direct, métriques détaillées, monitoring, auto-scaling, rollbacks, HTTPS automatique…

Pour déployer des sites statiques sur notre plateforme, il y a plusieurs options :

Tu peux utiliser le type static (Apache), voir cet article de blog
Tu peux utiliser Cellar, notre stockage objet compatible S3, voir cet article de blog

J’ai choisi une troisième option : déployer une application JavaScript avec notre support Node.js. Ce n’est clairement pas le choix le plus raisonnable pour un site statique. Mais c’est encore une occasion de dogfooder ce sur quoi je bosse tous les jours (même si notre plateforme est déjà hébergée sur notre plateforme).

L’autre raison, c’est qu’au-delà de servir des fichiers statiques, j’avais envie d’expérimenter des fonctionnalités dynamiques côté backend. Avec une app Node.js, je peux servir des fichiers statiques facilement et coder les parties dynamiques dans mon langage préféré.

🙈 Servi par mon propre framework HTTP

Avec ces contraintes, n’importe quel développeur raisonnable aurait pris Express, Hapi ou Fastify, mais ça aurait été trop facile, non ?

Sur un autre projet, j’avais commencé mon propre framework HTTP en Node.js pour apprendre. J’ai essayé de le réutiliser ici pour servir le site, mais j’ai fini par le réécrire de zéro avec une autre approche. Cette fois, j’ai écrit des tests unitaires. La procrastination m’a clairement pété à la figure cette fois-ci, mais je dois t’avouer un truc, j’adore fouiller dans les RFC HTTP, c’est mon petit plaisir à moi. Au final, c’est pas si grave, et cette personne est d’accord avec moi : Why You Shouldn’t Feel Bad When You Procrastinate.

La page que tu es en train de lire a été servie par ce framework HTTP maison. Tu peux jeter un œil à la configuration si tu es curieux, mais s’il te plaît, vraiment s’il te plaît, NE T’EN SERS PAS, et SURTOUT PAS en production. J’aimerais te dire que je sais ce que je fais, mais non. Ce que je peux dire par contre, c’est que ça marche à peu près et que j’apprends beaucoup en bossant dessus.

👋 À suivre…

Merci d’avoir lu cette intro. En attendant les prochains articles, tu peux déjà t’abonner à mon flux RSS :

https://www.hsablonniere.com/articles-feed.xml

Si tu as des suggestions pour les prochains articles, contacte-moi ou ouvre une issue sur le dépôt GitHub.

Merci

😍 Merci à vous, les gens formidables : Alexandre Berthaud pour ta relecture détaillée, Nicolas Géraud pour tes retours, Anthony Ricaud pour ton soutien bienveillant, et Marc-Antoine Perennou pour m’avoir poussé à finir, avec tes gentils messages (et tes blagues répétitives).