blog

Respond / React

Ça ne devait être à la base que quelques lignes de CSS pour rendre le blog adaptatif - exercice plutôt facile et rapide sur le papier. Ça s'est transformé en une mise à jour majeure, avec au menu :

  • Mise à jour vers Django 1.8
  • Passage à jQuery 2.1
  • Refonte intégrale du balisage et du CSS
  • Nouveau design

Le blog en profite donc pour devenir adaptatif, et la shoutbox et les commentaires sont désormais des composants React.

Concrètement, les données sont désormais servies via une API (merci Django Rest Framework) pendant que l'état de l'application et de l'interface sont maintenus par React.

Adieu génération de template côté serveur, adieu événements attachés de manière fragile, adieu duplication de code - les composants React sont rendus côté client, de manière déclarative, et la manipulation du DOM est optimisée.

La shoutbox se met ainsi à jour automatiquement, et poster un nouveau message apparaît comme plus rapide - chose que je peux encore optimiser, quand j'aurais réglé un problème de génération de clé unique.

Bref, je pense encore ajuster le code ces prochains jours. En attendant, j'espère que vous appréciez l'effort apporté à l'ensemble.

Le temps de la migration

Je viens d'effectuer une migration du blog d'un framework PHP homemade à Django :

  • Tous les commentaires et shouts antérieurs à l'espace membre ont été rattachés à un compte utilisateur, existant ou créé pour l'occasion. J'ai relié tant que possible les anciens pseudos aux pseudos actuels (Toinou et Antoine vers Solidus par exemple)
  • Les shouts et commentaires historiques ont été nettoyés : non éditables, ils contenaient de l'HTML
  • Le plugin de tagging en Javascript a été réécrit - il passe de 380 à 250 lignes
  • La mise à jour de l'avatar se fait désormais via l'objet FormData natif sur les navigateurs récents, ce qui permet de supprimer l'iframe utilisée jusqu'ici
  • Une couche de cache niveau template permet de rendre le chargement du blog plus rapide
  • Un flux RSS des derniers hors-contexte a été ajouté
  • Le blog s'appuye désormais sur un framework, ce qui le rend plus stable, robuste et extensible

Des effets de bord sont peut-être visibles ici et là, merci de me les remonter via la shoutbox ou les commentaires.

Quelques corrections bienvenues

Cela faisait plusieurs jours que mon flux Twitter ne s'affichait plus et que j'avais remarqué un bug relatif à l'affichage du nombre de shouts non lus. J'ai enfin pris le temps de me replonger dans mon code de l'année dernière et de corriger ces problèmes.

  • L'appel au flux Twitter est désormais conforme - j'utilisais depuis le début et sans le savoir une URL dépréciée
  • La mise à jour de la date de dernière connexion se fait désormais lors de la sérialisation de l'objet utilisateur en session, et non plus lors de sa réinstanciation
  • La vérification de la publication de nouveaux shouts s'appuye désormais sur la date du dernier shout, et non plus sur la date "d'impression" de la shoutbox

Je vais peut-être également travailler sur de nouvelles fonctionnalités, si j'arrive à les intégrer de manière efficace dans l'interface existante.

MVC + HTML5 + jQuery 1.7

La différence à l'affichage est très faible mais depuis hier le blog a connu sa plus grosse refonte : refonte de la base de code PHP, balisage HTML5 et optimisation du Javascript.

Mon intention originale était d'utiliser PDO, l'interface de base de données de PHP à travers mes classes, mais je suis rapidement rendu compte que ma base de code n'était pas durable. J'ai donc réimplémenté un patron d'architecture Modèle-Vue-Contrôleur perso, que j'ai développé à partir de mes expériences avec Django, WordPress et Joomla.

Durant le développement, je me suis également frotté à Doctrine - un ORM PHP - avant d'abandonner face au rapport flexibilité/complexité clairement négatif. J'ai l'impression que certains cherchent à faire du Python ou du Ruby avec PHP, et cela se ressent à travers des choix de design inadaptés au langage.

Côté HTML5, pas grand chose à se mettre sous la dent pour l'instant, car à part le balisage sémantique et l'attribut placeholder (qui permet de pré-remplir un champ de formulaire) je n'ai rien introduit.

Quoiqu'il en soit, j'espère que vous apprécierez les petites touches de nouveauté, dont celles apportées à la shoutbox, qui mettent en avant la possibilité de poster.

Logo HTML5

Grand ménage d'automne

Les changements sont quasi imperceptibles à l'oeil nu mais j'ai procédé à une refonte du balisage du blog et de son moteur. Voici une liste non exhaustive des changements :

  • Utilisation de l'application minify pour compiler et compresser mes fichiers Javascript et CSS
  • Meilleure utilisation des classes et objets en PHP
  • Versioning du code du blog
  • Suppression des balises HTML utilisées à des fins de présentation (meilleure utilisation du CSS)
  • Mise en cache prolongée des éléments statiques (images et scripts)
  • Ajout de permaliens pour les shouts (cliquez sur l'heure d'un shout pour voir)
  • etc.

J'ai principalement mis en application ce que j'avais appris dans le web depuis que je n'avais plus touché aux rouages de ce blog. Le but établi de cette refonte est d'obtenir le score le plus élevé possible au test Page Speed (j'en parlerai plus tard quand tout sera réellement optimisé). En attendant, si vous trouvez des bugs, revenez vers moi s'il vous plait !

Pierre Salviac, le martyr de Yahoo! Sport

J'ai découvert le blog de Pierre Salviac il y a un peine un mois. Pierre Salviac est actuellement commentateur de rugby à la radio et sur le web, sur Yahoo! depuis 2009.

Sa particularité est de canaliser l'animosité des membres de Yahoo! : les gens le détestent (il est soit disant partisan), il dit que les gens le détestent dans ces posts, les gens se sentent provoqués, il la joue encore plus cynique etc. Au point qu'au moment des voeux, le Pierre nous la joue "type dégoûté par le niveau intellectuel des commentaires qui n'honorera pas son contrat avec Yahoo! jusqu'à son terme".

Il revient malgré tout le 4 janvier, remotivé mais malheureusement toujours pas conscient des raisons pour lesquelles les gens ne l'aiment pas : ses derniers articles se font descendre en flèche, ici, et . Certains commentaires ne volent pas haut mais d'autres sont carrément drôles. Quoique Pierre Salviac fasse désormais, il est cuit.

Navigation à travers les articles améliorée

Cela faisait un moment que je cherchais à rendre le parcours des archives le plus efficace et le plus simple possible. Je pense être arrivé aujourd'hui à quelque chose de plutôt pertinent : en introduisant une nouvelle vue des articles - qui n'affiche que le titre, le nombre de commentaires et les tags associés - et en insérant des liens rapides vers les autres mois, naviguer à travers la base d'articles est devenu beaucoup plus rapide (partez du mois d'avril 2009 par exemple).

La vue par tag profite aussi de ce lifting, sauf si le tag n'a été utilisé qu'une fois, auquel cas l'article correspondant est affiché dans sa vue traditionnelle. Si vous avez des idées pour améliorer encore le système n'hésitez pas à me les soumettre.

Animated GIF : Unleashed

Chose promise, chose due. Grâce à l'installation par mon frère de la bibliothèque ImageMagick, il est désormais possible d'utiliser des gifs animés en tant qu'avatar sur le blog. La fin du monde est proche.

Mise à jour de la shoutbox

La shoutbox se dote d'une nouvelle fonctionnalité : désormais elle vérifie automatiquement si de nouveaux messages ont été postés depuis le chargement de la page. Si tel est le cas, le nombre de nouveaux shouts est indiqué et un lien permet de rafraîchir la shoutbox uniquement. La vérification s'effectue pour l'instant toutes les 20 secondes. J'attends vos retours !

Màj de 11:15 : le titre de la page indique également le nombre de nouveaux shouts, sous la forme "(1) Titre de la page"