Il y a un an aujourd'hui, à Hong-Kong, je commençais la migration du présent site de Drupal 7 à Drupal 8.

Au départ, ça ne devait n'être qu'une bête conversion, comme celle de Drupal 6 à 7, et ne prendre que quelques heures de travail. Mais j'y ai vu la possibilité de repenser entièrement le site, de le moderniser radicalement après 10 ans de quasi-immobilisme (car il n'y a pas de raison que les cordonniers soient toujours les plus mal chaussés).

Et puis, il y a quelques minutes, ému, mes doigts tremblotant sur le clavier, j'ai fait le grand saut :

$ git tag "v3.0.0"
$ git show v3.0.0
commit 05440c62ed102923c2f1d841383e2e2c7418a4bc
Author: Pierre <pierre.dureau.me>
Date:   Sun Apr 3 22:18:16 2016 -0500

J'ai donc l'immense plaisir de vous présenter mon site perso en version 3.0, publié le dimanche 3 avril 2016 à 22:40, heure de Guadalajara. Qu'en pensez-vous ?

Le site a été conçu avec quelques solides convictions en tête. Attention, après la ligne, ça devient un peu technique. Prêts ?

---

Minimum Viable Product

Pourquoi ? Je ne suis pas ultra-fan des méthodes agiles, mais certains concepts agiles m'ont beaucoup apporté. Notamment, le salvateur "always be shippable" (voir aussi le billet de Dries).

Comment ? La version précédente avait quatre fonctionnalités : accueil, carnet, voisinage et contact. La présente version n'a que la page d'accueil et le carnet, pour commencer. Les autres arriveront bientôt, quand je serai plus à l'aise avec certaines implémentations.

Aller plus loin ? Géolocalisation des billets, recherche avancée, agrégateur pour le voisinage… La réorganisation technique va faciliter la mise en œuvre de ces évolutions.

REST/Hypermedia

Pourquoi ? Parceque c'est du Web ! Et que je me prétend architecte...

Comment ? Les trois formats suivants ont été favorisés : XHTML, Atom (qui remplace le RSS que je n'ai jamais beaucoup aimé) et SVG. Que du XML, que du costaud, que de l'hypermédia, que du bon. Pas de JSON, non.

Et puis, bien sûr, HTTP GET pour les actions sûres et idempotentes et HTTP POST pour les autres.

Aller plus loin ? Il n'y a pas encore de mécanisme de négociation de contenu, car Drupal ne le gère pas nativement ("because browsers suck"). Et puis, il reste de quoi s'amuser du côté d'AtomPub.

Linked Data

Pourquoi ? C'est le grand rêve du Web, celui qu'on a longtemps appelé "sémantique" et qu'on a voulu rendre intelligent. Moi, je continue à y croire, surtout que des petits usages concrets bien sympas sont apparus les dernières années, chez Facebook, Twitter ou Google.

Comment ? Le site a d'abord été conçu comme un grand graph RDF, puis implémenté avec le système d'entités de Drupal. C'était une manière très agréable de travailler, seulement contraint par la sémantique des propriétés RDF d'une part, et par la reprise des URL du site existant d'autre part.

Au sein de chaque page, ce graphe est matérialisé dans des annotations RDFa, avec à chaque fois :

• la propriété du vocabulaire schema.org car c'est devenu la norme,
• la propriété des bons vieux vocabulaires "legacy" (DC, SIOC, SKOS…) car je suis un grand sentimental.

Aller plus loin ? Mon graphe n'est pas vraiment connecté au web of data, il y a pourtant des données intéressantes à lier pour améliorer l'expérience de mes visiteurs. Par exemple, les localisations des billets avec les donnéees de wikipedia ou celles d'openstreetmap.

Uncomplicated Web

Pourquoi ? Le Web est bloated. Il devient inutilement compliqué, lent et lourd. Des initiatives comme AMP montrent qu'il y a un réel besoin de revenir à plus de simplicité et légèreté.

Comment ? En gros, le site est quasi-conforme avec cette excellente liste d'erlehmann. Les formats choisis, en plus d'être hypermédias, sont déclaratifs et peu capables.

Le site ne contient presque pas de JS, vous pouvez le désactiver sans être pénalisé et il y en aura sûrement de moins en moins. Il n'y a pas de cookies non plus pour les anonymes, sauf Piwik.

Aller plus loin ? Je réfléchis à des moyens de rendre les pages plus légères. Car mon obstination à ne pas utiliser de CURIEs ainsi que les nouvelles illustrations HD (avec un grain 2,6 fois plus fin que les anciennes), ont annulé la plupart des optimisations faites par ailleurs.

Material Design

Pourquoi ? Me méfiant du "design pour le design" et un peu fatigué par toutes ces années à collaborer avec des agences de com', j'ai été séduit par la présentation du Material Design par Mathias Duarte en juin 2014. Design as a visual language. Oui !

Comment ? Je me suis principalement inspiré des sections Material is the metaphor et Bold, graphic, intentional, et j'ai repris la police Roboto et une partie de la palette de couleurs. J'éspère ainsi que mon site est plus clair, agréable et joli, quel que soit le support de navigation.

Le tout en responsive design évidemment, ce n'est plus un débat en 2016, (presque) sans breakpoints s'il vous plaît. Et puis, plus de menu global. Parceque c'est bon de se faire plaisir.

Aller plus loin ? Il me manque la partie Motion provides meaning. Il faut que je me plonge dans les transitions et animations CSS.