Webouille

! TRIGGER WARNING !
« Aux allergiques de la virgule, aux angoissés du blabla et aux phobiques du mot de trop, c'est le moment : « Fuyez ! Pauvres fous ! »

J'aime bien écrire. Si ce n'est pas votre première fois sur ce site, vous ne devriez pas être surpris·e de ce que vous trouverez sur cette page. Les autres, la majorité j'imagine, je vous préviens dès maintenant, ça risque d'être assez verbeux. Il y aura aussi des visuels et un peu de technique, mais je ne vais pas vous raconter d'histoire, enfin oui en fait, c'est plutôt ça l'idée, comme j'aime raconter des histoires, les origines de ce site constituant en soi une histoire, je vais la raconter.

Un peu de passif...

L'idée d'un site perso me trottait dans la tête depuis quelques années déjà. À l'époque, plutôt qu'un portfolio webdesigner, j'étais parti sur un site sur lequel je partagerais des nouvelles. Dans cette optique, j'ai donc commis pas mal de prototypes sur papier et sur Figma dont j'ai poussé certains jusqu'à la maquette animée (cf. ci-dessous). Au final, la flemme et des problèmes de compétences évident, ont toujours repoussé à plus tard la production de ces sites. De toute manière, arrivé le moment de l'intégration, syndrome de l'imposteur en bandoulière, j'aurais eu du mal à poster quoi que ce soit de consistant.

Le reboot du projet

En 2020, j'ai trouvé un travail de webdesigner/intégrateur qui m'a permis de me faire la main et surtout d'acquérir des réflexes professionnels. J'ai progressé auprès de mes collègues plus expérimenté·e·s et surtout, j'ai appris à travailler rapidement dans un cadre cependant peu propice à la créativité.

Puis est venu le temps du reboot. Ça a commencé en 2024, avec les copains du taf, des doutes, un ras-le-bol général et une envie collective de se faire un portfolio webdesigner. La première fois, on s'est donné rendez-vous un samedi après-midi au château de la Châtelaine et du CodeKeeper, pour travailler ensemble sur nos projets perso. L'idée était de miser sur l'émulation du groupe pour avancer et ne pas se laisser bouffer par la procrastination.

Après cette première réunion, on s'est vu une paire de fois, pas forcément au complet - moi le premier, j'ai raté quelques rendez-vous. Ces moments ont toujours été riches humainement, nos réunions ressemblaient à des fab lab sans pression, dans la bonne humeur, où le niveau de motivation était plus ou moins élevé suivant les personnes, et tout ça sous perfusion de junk food et de vannes foireuses. En ligne de mire, on s'était programmé une dernière réunion de présentation des portfolios terminés.

Sous le haut patronage du CodeKeeper

Au départ, sur les conseils du CodeKeeper, qui avait bien digué la question, on est parti sur une base :

• HUGO - framework web statique orienté blog, basé sur le langage Go
• Netlify - solution d'hébergement du site de travail/"recette"
• et GitHub - gestionnaire de version, de flux, réseau social, etc.

Vu que certains étaient à peu près noob en matière de création de site from scratch - c'est à dire en partant d'un document vierge, sans code prémâché - l'idée de passer par ce type d'outils était de fait une bonne idée, d'autant plus que le CK nous avait confectionné un tutoriel assez complet et précis pour débuter autour d'HUGO.

Bon, on va pas se mentir, cette première expérience a tourné court pour des raisons diverses et plus ou moins sérieuses, allant du licenciement à des voyages à l'autre bout du monde, en passant par un manque de temps et d'investissement standard. Je n'étais moi-même pas très à l'aise avec HUGO (notamment à cause de ma méconnaissance du langage GO), si bien que j'ai fini par laisser pourrir le bouzin dans son coin après quelques sessions de travail.

Pour ma défense, j'ai souhaité à l'origine installer HUGO sur mon vieux laptop qui avait déjà beaucoup de mal à lancer la moindre appli en ligne de commande et qui n'acceptait plus aucun périphérique de type écran secondaire. Alors, ça ressemble à une mauvaise idée évidemment, mais sur le moment, j'ai pesé le pour et le contre.

En gros :

• il fallait que je puisse trimbaler l'outil aisément, de chez moi au château, donc pas d'installation sur ma tour (plus tard je l'ai installé sur ma tour aussi),
• argument qui découle du précédent, je ne voulais pas utiliser celui du taf, par principe,
• mais aussi parce que je n'avais pas la possibilité d'installer un serveur local (retenez bien ce point, je vais en reparler plus tard)
• mon vieux machin tourne sous linux et l'installation d'un serveur local est très simple en ligne de commande,
• en fait, j'avais envie de l'installer sur mon laptop

Sans surprise, c'était bien une idée moisie :

• affichage en largeur max moins de 1366px,
• ordi en PLS 90 % du temps en raison d'un manque de mémoire,
• en lien avec le point précédent, des alt-tab de 8 ans,
• le branchement d'un deuxième écran toujours impossible (problème matériel ingérable).

Conclusion : le matos ça compte a minima quand même. Et oui, j'aurais évidemment perdu moins de temps si j'avais fait le choix d'utiliser le laptop du taf.

De fait, même si ce n'est pas le seul motif d'abandon en rase campagne, ça n'a pas aidé et j'ai fini par mettre de côté le projet en attendant des jours meilleurs. Jours meilleurs qui sont finalement arrivés assez vite l'année suivante.

2025, année du reboot du reboot

Le A, comme on l'appelle dans la Silicon Valley du Un Six, c'est pas le genre à se tanner la couenne au soleil quand il a quelque chose en tête, je vous invite à jeter un œil à son blog. Une fois encore, c'est lui, qui continuant à fouiller le web à la recherche des meilleurs outils possibles, nous a dégoté une solution alternative à HUGO, en l'occurrence Astro js, un autre framework web js, toujours optimisé création de blog html/css/js/md. Par ailleurs, il a l'avantage de ne pas exiger la maîtrise du langage GO.

Maintenant que j'ai les bons outils (ou presque)

• HUGO remplacé par Astro Js
• Netlify solution d'hébergement du site
• et GitHub gestionnaire de version, de flux, réseau social, etc.

Astro js c'est révélé être la solution idéale - pour un dev Frontend cela-dit - notamment grâce à son tuto création de blog très simple à suivre. La vf est assez complète et malgré quelques problèmes de traduction ou un manque de précision relativement pénible et bloquant par moments (pas toujours très clair de savoir quand on peut adapter les noms de dossier, fichiers, et quand on ne doit pas le faire du tout), on se laisse tranquillement porter jusqu'à la fin.

Repartir de "Zéro,5"

Avant de passer à cette étape, j'ai repris le projet 2024 en partant du principe que je me devais d'être moins ambitieux sur la forme, au moins dans le cadre d'une v1 - le but étant d'arriver à mettre en ligne le site assez rapidement et de me consacrer le plus tôt possible au contenu.

Pour commencer, je me suis fait un mini moodboard. J'avais déjà en tête une structure simplifiée du projet 2024 - qui comprenait du scrolling horizontal, des animations partout et j'en passe - mais si je n'avais pas encore d'idée très précise de ce que je voulais comme rendu définitif, j'entrevoyais déjà quelque chose de très graphique, qui intègre mes dessins.

Assez rapidement, j'ai créé la palette de couleur du site :

• un jaune assez chaud (#f3bd22),
• une couleur papier/beige très clair (#fdfaec),
• un gris très sombre (carbone ou anthracite). Au final j'ai dû me résoudre à choisir un noir #000 à cause des assets graphiques que j'utilise (dessins + éléments type "trace de peinture"). C'est d'ailleurs quelque chose que j'ai prévu de modifier à l'avenir.
• un blanc (pur) qui devait contraster suffisamment avec le beige sur les pages Écritouille par exemple.

Comme structure, j'ai gardé le concept de base du projet 2024 : mise en avant de mon travail perso (écriture et dessin) + une présentation du projet qui devait remplacer la page webdesign, sensée mettre en avant mon travail pro.

Le projet est donc parti, à l'origine, d'un besoin de portfolio webdesign professionnel avec +/- 50% du contenu orienté WD - 50% taf perso, et au fur et à mesure de mes états d'âme, il est (re ?)-devenu un projet plus général de présentation de mon travail perso avec +/- 45% illustration - 45% écriture - 10% webdesign.

Concrètement la structure est devenue la suivante :

• une page d'accueil en 4 parties qui redirige vers les pages,
• une page "Gribouille" : galerie d'images pour présenter mes illustrations,
• une page "Écritouille" : blog d'articles pour publier du texte (nouvelles, articles, etc.),
• une page "Webouille" : pour présenter le site, sa vie, son œuvre, « Mais où puise-t-il toute cette énergie ? »,
• une page "About" : pour me présenter (CV ultra simplifié, les copains, etc.) et d'autres choses plus tard

Les mains dans l'cambouis

À ce stade, la mise en chantier concrète du site a commencé. J'ai d'abord pris sérieusement en main des outils (créé des comptes, fait mes tests, etc.), j'ai refait quelques prototypes figma, puis j'ai débuté le travail from scratch en local, sans serveur, avec pour unique outils, un éditeur de texte simple pour balancer du code html et css.

En gros, j'ai créé les structures des pages, les classes, au passage ça m'a permis d'approfondir les orientations design en testant des backgrounds récupérés sur des banques d'images gratuites. J'ai également testé et codé quelques animations, parce que malgré tout, j'avais envie de caler une animation au scroll sur l'écran d'accueil. Pour le panache quoi.

Une idée plutôt sympa en soi, mais qui s'est révélée un peu casse-gueule quand je me suis rendu compte que les scroll-driven animations n'étaient toujours pas pris en charge par firefox. Après-coup, évidemment. Ça m'apprendra à coder pour chrome - on mettra ça sur les mauvaises habitudes du taf voyez-vous - et à oublier de checker sur différents navigateur, ce qui m'a obligé à bidouiller un truc moyennement satisfaisant pour le renard de feu. Je compte faire quelque chose de plus propre, mais c'est loin dans la pile des trucs à terminer/corriger/modifier.

Tout balancer sur Netlify... Et finalement non

J'ai d'abord terminé de configurer mon site, en créant un nom de domaine Netlify et lié le bouzin à mon GitHub.

À cette étape, j'ai donc copié/collé les fichiers de ma base de tests en local, puis j'ai remplacé mes premiers morceaux de code en dur par des components (menu, etc.) et des layouts (base de page + head, etc.) adaptés, en suivant le tuto Astro js. J'ai par ailleurs modifié le code css au besoin et commencé le responsive (pour les pages de base surtout).

Je pourrais détailler un peu plus, mais ça ne me parait pas très utile, la construction du site s'est faite, page par page, plus ou moins tranquillement au fil de l'eau, avec de la recherche de solutions adaptées, du code astro récupéré par-ci par-là, de la création de collections d'images (quelle tannée...), incluant la création de 2 fichiers json, malgré quelques besoins de coup de main et des blocages à se bouffer les doigts etc., bref, rien de bien original ou qui détonne des processus de création habituel (doutes, hésitations, re-doutes, et tutti quanti).

Il y a quand même une petite péripétie "rigolote" à raconter. Plus haut dans la page je listais les différents points qui m'avaient fait opter pour mon ordi perso, plutôt que celui de mon travail. L'un des arguments principaux était qu'il m'était impossible d'installer un serveur local dessus (action réservée aux admins). Le truc c'est que la vétusté de mon laptop perso évoquée plus haut, a eu raison de ma patience. Pour avancer correctement, je me suis résolu à utiliser le laptop du taf.

Un choix difficile, mais la vie n'est-elle pas une succession de choix difficiles ? *regard vers l'infini, couché de soleil, le vent dans les veuchs*.

The state of art, ou comment imbriquer les mauvais timing comme on empile les feuilles de style en cascade

Le fait de ne pas avoir les autorisations admin pour installer de serveur local sur le laptop du taf, à fait grimper le nombre de pushs de manière exponentielle. Même si j'ai pu installer un serveur local sur ma tour principale à la maison, le laptop reste indispensable quand on n'est pas chez soi. Évidemment, comme tout bon professionnel, j'ai surtout travaillé avec les inspecteurs de Chrome et Firefox, mais quand on peut push, surtout pour du code basique, au bout d'un moment, on push. Enfin, moi, je push en tout cas.

De fait, du jour au lendemain, j'ai commencé à pusher comme un sagouin (des trucs indispensables du genre modifier la taille d'une font ou passer d'un padding de 1 à 1.1rem), et puis très vite, j'ai reçu un message de Netlify : « STOP ! Non non, plus possible, tu donnes l'argent ou plus rien tu pusheras ». Waouh ! Calme toi mon petit, que je lui ai dit, j'ai pushé 4 fois et on est le 3 du mois ! La lourdeur du truc, il fallait que j'attende le début du mois d'après, pour pusher à nouveau. Ça n'a pas de sens. Sur le moment, j'ai cru à un problème configuration de compte, j'ai donc demandé aux potos qui avaient déjà bien avancé sur leur site, s'ils avaient déjà été confrontés à quelque chose dans le genre. Ils m'ont dit que non, on a regardé rapidement, puis je suis reparti diguer, histoire de comprendre.

Bon, en réalité, ça a été rapide. Entre le moment où les potos ont créé leur compte Netlify et le moment où j'ai créé le mien, il s'est passé une année environ, durant laquelle la société a changé ses offres. On est passé d'une offre gratuite, quasi-illimité en nombre de pushs par mois, à une offre gratuite super limitée en nombre de pushs par mois (c'est un peu plus compliqué que ça mais passons). La douille, sachant que je n'aurais pas eu ce problème si d'une part, j'avais créé mon compte un an plus tôt, quand on a commencé à travailler les portfolios, et d'autre part, si j'avais pu installer un serveur local sur le laptop du travail et surtout si j'avais pu continuer à travailler sur mon laptop perso. Le combo de merde, disons les termes.

En soit, on va pas se mentir, à part un peu plus de temps perdu, ça ne m'a pas coûté grand chose. Mais, bon ça reste pénible, vu que j'ai dû me mettre en quête d'un outil équivalent qui propose une offre gratuite "utilisable". Après quelques courtes recherches, j'ai opté pour Vercel, dont l'offre gratuite est généreuse, notamment en terme de Fast Data Transfer. Une fois mes datas transférées d'une société d'hébergement à une autre, j'ai repris le travail sur mon site.

Les outils que j'ai finalement utilisés :

• Notepad++
• Figma
• Astro js
• GitHub
• Vercel

Pour finir, il me restait en réalité une chose à faire avant de valider une v1 du site. Comme, je ne voulais pas me trimbaler avec une url "grammar-oisif.vercel-app" et que je voulais mon url "grammar-oisif.fr" seule, j'ai fait sauter la banque. Au lieu de passer par les fournisseurs de noms de domaines habituels, j'ai opté pour Lebureau.coop", une Scop française, économiquement et socialement plus "éthique".

Finish him !

Il y aurait peut-être encore des choses à raconter sur la fabrication du site, comme par exemple, approfondir les aspects techniques du projet - avec la description de cas pratiques notamment - mais j'ai voulu que cette page reste lisible pour la plupart des personnes qui passeront ici. J'aurais pû aussi commenter mes faits d'armes professionnels, présenter ce que je fais actuellement dans le cadre du travail ou pour des amis, mais en réalité, ce n'est plus tellement d'un portfolio dont j'ai besoin aujourd'hui, et c'est pour cette raison que grammar-oisif n'est pas à proprement parler le portfolio webdesigner qu'il ambitionnait d'être à l'origine.

Dans tous les cas, aussi inachevé (cf. la todo list) et imparfait soit-il, ce site représente une forme d'aboutissement, en tout cas est a minima un soulagement. Ça peut paraître un peu excessif dit comme ça, mais je suis un procrastinateur pathologique qui a une todo list de la vie, longue comme un film du MCU, qui ne se vide quasiment jamais, tout en continuant à se remplir inexorablement d'année en année. Et chacun sait que c'est coûteux tant psychologiquement que socialement.

Alors, oui, je n'ai pas grimpé l'Everest, entendons-nous bien, mais quelque part, c'est un peu ma randonnée Mont du Destin à moi si vous voulez, une rando Mont du Destin sans hobbits joufflus et mis en scène par Sam Raimi période Evil Dead, c'est à dire un poil bancale par endroit, mais une rando Mont du Destin honnête et personnelle.

Je vais terminer (cette fois c'est vrai) en remerciant le CodeKeeper, dont la capacité à mobiliser a permis à ce projet d'arriver quelque part. Et bien évidemment, je remercie ma B qui m'a toujours encouragé, alors que j'ai passé beaucoup de temps devant mon ordi à m'occuper de ma face.