Open Time

Dix ans, au moins, que je n’avais pas eu un fer à souder dans les mains, ça a été un peu laborieux au départ, mais mes soudures sont encore propres, c’est cool ! Combiné avec l’apprentissage d’une nouvelle forme de codage, le visual-coding, extrêmement ludique puisque ça ressemble à assembler des legos, ni plus ni moins et c’est un excellent point d’entrée pour tous ceux et celles qui voudraient apprendre à développer !

Ensuite j’avais choisi d’aller voir de quoi il retournait question Javascript fonctionnel, que je pensais benoîtement plus simple que ce qu’on essaie de faire en langage orienté objet — ce que Javascript n’est pas mais que tout le monde, ou presque, aimerait qu’il soit —, eh bien grossière erreur, c’est plutôt pointu et j’ai été largué dès le premier exercice, pressé par un tempo trop rapide pour mes maigres connaissances dans ce domaine. Il va falloir que je reprenne ça tranquillement, avec les conseils d’un bon prof. Heureusement, je connais très bien un de ceux qui menait l’atelier et je vais pouvoir le solliciter à volonté :gnark: :gnark: \o/

Puis, pour terminer cette journée, un petit tour du côté des Flexbox où, après quelques rappels je me suis senti beaucoup plus à l’aise que dans l’atelier précédent, alors que mon profil pourrait faire croire le contraire. D’ailleurs, une fois que j’aurai porté la CSS de l’admin de Dotclear sous Sass/Compass, j’ai bien l’intention de saupoudrer un peu de display: flex; et consort ici et là (mais pas trop, parce que c’est pas non plus applicable partout)^[1].

Tiens, pour la petite histoire, vous saviez qu’il y a déjà du flexbox dans la CSS de l’admin de Dotclear depuis déjà quelques versions ? Un indice, pour trouver où : Vous vous souvenez de ma baseline dans la team : « Footer de merde » ? Eh bien voilà ;-)

Pour les curieux (uniquement les propriétés flex utilisées aujourd’hui) :

#dotclear-admin {
  display: flex;
  min-height: 100vh;
  flex-direction: column; }

#wrapper {
  flex: 1; }

Le premier est l’identificateur positionné sur l’élément body (qui contient, en gros, le header, le wrapper et le footer), et sert à positionner le mode flex en mode vertical et lui faire occuper (a minima) tout l’espace visible.

Le second indique simplement au wrapper d’occuper toute la place restante, ce qui forcément va faire descendre le footer en bas de l’écran (ou de page si le wrapper est plus long).

Plus besoin de CSS alambiquée, plus besoin de code javascript qui fait « coller » le footer en bas de page, juste ces quelques lignes. Astucieux, non ?