#19789

The Holy Grail Layout with CSS Grid | CSS-Tricks

Et dire qu’à une époque on en chiait avec des structures en tableaux (au bûcher !) ou des astuces à la con du faux-background et des float-left.

Ouais, à une époque fait deux colonnes de taille identique et sans tableaux, c’était impossible ! Et je parle même pas d’IE6 :-D.

Niveau CSS/HTML, c’était pas mieux avant. Peut-être ce qu’on en faisait, mais pas la techno. Grid est difficile à cerner, mais c’est très puissant. Flex offre aussi beaucoup de possibilités, et perso je l’adore.

https://css-tricks.com/the-holy-grail-layout-with-css-grid/

#19788

Components: Server-Side vs. Client-Side | CSS-Tricks

Mh… Autant l’Ajax a ses désavantages (j’en explique un dans un récent article), autant parfois c’est pas mal.

Perso je l’utilise pour les éléments interactifs. Un blog, ce n’est pas interactif (au sens « inter-actif ») : l’article s’affiche, on le lit et ça s’arrête là.
Un lecteur RSS par contre, j’appelle ça interactif : les différents articles sont là dans une liste, on clic dessus pour les ouvrir, ils sont marqués comme lus, on les organise en dossier, on les trie… Bref, l’utilisateur agit sur la page. Même chose pour un agenda, ou un bloc note : on ouvre une note, on la modifie, on la referme…

Pour ces données là, j’utilise Ajax et JSON.
La page web (l’arbre DOM) est emmené à être modifié massivement quoi qu’il arrive à cause de cette interactivité. Du coup, est-ce bien utile de rendre le HTML côté serveur ? Perso j’ai pensé que non : le navigateur reçoit les données en JSON et construit la page lui-même. Vu que la page va changer, le navigateur doit déjà avoir les fonctions pour la reconstruire sans arrêt, donc autant s’en servir pour construire la page la première fois.

Le seul « soucis » c’est quand les données sont nombreuses. Rendre 1 000 éléments <li></li> parce que l’on a 1 000 éléments non-lus dans son lecteur RSS, ça peut être un peu long. De même pour la réception des données.

Pour ça, pour le RSS j’ai adopté la stratégie du contenu partiel : au chargement de la page, le JSON contient le titre du post RSS et sa date (en fait, tout sauf le contenu, plus lourd). Ensuite je fais une seconde requête pour récupérer le contenu. Comme ça, la page s’affiche très vite et les données sont rapatriées en arrière plan. Le tout, sans avoir d’animation « chargement » ou « patientez svp » qui ne servent à rien.
Une solution alternative pourrait être de se limiter à charger 100 éléments, et à les charger 100 par 100 sur demande. Dans le cas où on a juste une liste d’éléments, ça marche. Si on a des dossiers de flux RSS, ça ne marche plus.

Bref, y a des choix à faire et faut rester intelligent et pas tout jeter à la poubelle. Ce n’est pas simple de trouver le juste milieu, encore moins quand on a des contraintes de débit internet, par exemple.

https://css-tricks.com/components-server-side-vs-client-side/