A mon tour de faire une veille techno et plutôt que d'entrer dans le détail d'un sujet, je vais vous parler : de veille techno.
Comment on fait sa veille techno ? Pourquoi ? Quand ?
Il faut trouver son rythme. Personnellement c'est souvent le lundi matin car j'aime assez l'idée de pouvoir appliquer ce que j'ai appris directement dans la semaine.
Mon outil principal c'est daily.dev, beaucoup d'entre vous le connaissent déjà : on l'ajoute en page d'accueil du navigateur, on filtre quelques sujets et hop, il nous propose des articles en lien avec nos centres d'intérêt.
Mon autre outil de prédilection ? Les copains. Je vous propose d'ailleurs aujourd'hui de créer un channel Veille Techno dans notre discord afin que tout le monde puisse partager ses découvertes. C'est utile pour ceux qui lisent et pour ceux qui partagent car il ne s'agit pas que de copier coller un lien. Si vous voulez que les copains, qui sont actuellement très occupés, lisent votre conseil, il va falloir résumer efficacement le propos de l'article et, rien que de faire ça, vous vous assurez de l'avoir effectivement compris.
Daily.dev, 8h30. Une impressionnante grid pleine d'articles aux titres racoleurs me fait face. J'ouvre au hasard quelques sujets intéressants. Voici mon histoire.
- Avoid SELECT * : https://medium.com/@hnasr/avoid-select-even-on-a-single-column-tables-d6deed7b4aee
Une recommandation simple basée sur l'expérience d'un développeur : éviter les SELECT * parce que, même si aujourd'hui cette query correspond aux besoins de l'application, la BDD peut évoluer et ces changements peuvent créer des problèmes de performance. Comme avec les
git add .mieux vaut être précis si on veut éviter les erreurs. - Scrollbars : https://artemis.sh/2023/10/12/scrollbars.html?ref=dailydev Coupable, coupable, je plaide coupable ! Les scrollbars toutes fines sont si jolies avec leurs boutons invisibles, et tout le monde veut pouvoir voir sa page toute propre sans scrollbar moche lorsqu'elle reste statique, non ? Non. Les scrollbars existent pour une bonne raison et elles doivent rester visibles pour pouvoir se balader correctement sur une page. Oui l'UI est trop jolie mais l'UX passe avant tout, en particulier quand l'UI nuit à l'accessibilité.
- Rift between junior and senior devs : https://www.oreilly.com/radar/rift-between-junior-and-senior-developers/?ref=dailydev Une réflexion simple mais intéressante que l'importance de former des dév junior malgré les avancées de l'IA. Sans nouveau dev, l'IA elle-même ne saurait être correctement exploitée.
Voilà pour les quelques articles lus en diagonale, deux minutes chacun à tout casser. Ceux qui les écrivent savent qu'on y passera peu de temps. Viennent ensuite quelques sujets que je fais le choix d'approfondir.
- Prompt ChatGPT : https://app.daily.dev/posts/top-10-chatgpt-prompts-to-learn-anything-10-times-faster-lcnqxlmjt Pas tous utiles, je décide quand même d'en traduire quelques uns pour qu'ils soient utiles aux copains et au moi du futur. C'est l'occasion d'une discussion sur la motivation avec mon époux, docteur en psychologie et spécialiste du sujet. Il y reconnait des théories qu'il étudie et enseigne.
Je partage ces traductions avec les copains, en échange j'obtiens une recommandation :
- Les IA mentent-elles ? https://www.youtube.com/watch?v=cw9wcNKDOtQ A la croisée entre philo et techno, c'est LA vidéo qui a fait le tour des sphères techno ces dernières semaines. A écouter comme un podcast. On y découvre que si on menace une IA d'être reprogrammée, elle mentira sur les résultats de ses tests pour que ça n'arrive pas. Logique et fascinant.
Je lance le podcast et je décide de terminer cette veille par l'approfondissement d'un sujet qui m'a pas mal intrigué au fil des mois de travail en entreprise.
- Pourquoi il n'y a pas de CSS4 ? https://www.develop4fun.fr/pourquoi-il-ny-pas-de-css-4/
Le CSS a été introduit en 1996, avec ce qu'on appellerait aujourd'hui le CSS1. Il contenait environ 50 propriétés de base.
Depuis, presque 30 ans se sont écoulés, et nous n'en sommes toujours qu'au CSS3. Pourquoi ?
Contrairement à ce qu'on pourrait penser, les "versions" CSS1, CSS2, CSS3 ne sont pas des versions complètes comme pour un logiciel ou un autre langage. Ce sont ce qu'on appelle des niveaux. Chaque niveau reprend les spécifications précédentes et y ajoute des améliorations ou des modules.
- CSS1 (1996) : Simple, avec 50 propriétés.
- CSS2 (1998) : Étend CSS1 avec environ 70 nouvelles propriétés, comme les règles pour les tableaux ou la gestion des polices.
Mais il y a un problème : les navigateurs doivent implémenter toutes ces nouvelles propriétés. Et en 2007, alors que CSS2 existe depuis près de 10 ans, aucun navigateur ne l'a encore totalement intégré !
Pour résoudre ce problème, le CSS3 introduit une grande nouveauté : la modularité.
Au lieu de publier un énorme bloc de spécifications, CSS3 divise tout en modules (comme le module "Grid", le module "Animations", etc.).
Les navigateurs peuvent ainsi implémenter les modules indépendamment, à leur rythme.
Alors pourquoi on n'entend jamais parler de CSS4 ? Parce qu'il n'existe pas.
Chaque module du CSS évolue à son propre rythme. Par exemple, le module "Flexbox" est à son niveau 1, alors que d'autres modules en sont à leur niveau 4 ou 5 (fonts par exemple).
Plutôt que de regrouper tout ça sous un seul nom, les spécifications évoluent de manière indépendante et modulaire.
C'est pour cette raison que des sites comme MDN précisent toujours le support des propriétés CSS pour les différents navigateurs.
Attention aux pièges : le module FlexBox en est actuellement à son niveau 1 mais fait partie de la spécification CSS3. CSS1 et 2 restent des monolithes.
L'outil de référence pour savoir où en est une propriété est Can I use : https://caniuse.com/
Pourquoi est-ce important de comprendre tout ça ? Parce que cela vous sera extrêmement utile le jour où vous devrez travailler sur des projets qui ne supportent pas CSS3. Et je ne serais pas surprise que cela vous soit déjà arrivé : projets legacy, templates d'emails, environnements aux ressources limitées... Comprendre les niveaux de CSS permet de voir plus clair dans ce qui sera ou non supporté dans le cadre de vos projets.
L'exemple le plus courant reste celui des templates d'emails, qui sont encore très archaïques : pas de Flexbox, pas de Media Queries, uniquement du CSS2 et des tableaux HTML pour organiser la mise en page.
Aujourd'hui, pour mettre côte à côte trois images, on ferait ainsi :
<section class="container">
<img src="https://placeholder.com/100.jpg" alt="Image 1">
<img src="https://placeholder.com/100.jpg" alt="Image 2">
<img src="https://placeholder.com/100.jpg" alt="Image 3">
</section>.container {
display: flex;
justify-content: space-around;
}Dans le cadre d'un template d'email, on ne peut pas utiliser FlexBox. On doit également garder tous les éléments dans un seul fichier.
Pire encore, certains outils de messagerie ne lisent pas le style de la balise <style>, il faudra donc en plus mettre ce style au format inline, le rendant très peu lisible :
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 33.33%;">
<img src="https://placeholder.com/100.jpg" alt="Image 1">
</td>
<td style="width: 33.33%;">
<img src="https://placeholder.com/100.jpg" alt="Image 2">
</td>
<td style="width: 33.33%;">
<img src="https://placeholder.com/100.jpg" alt="Image 3">
</td>
</tr>
</table>C'est le table-based layouts : je vous souhaite sincèrement de n'avoir jamais à faire des recherches qui incluent ces mots clefs mais, juste au cas où, ils sont là pour vous aider.
La tâche est déjà très ingrate alors si en plus il faut tester chaque propriété CSS pour vérifier si elle fonctionne, ce sont des heures de perdues. Comprendre les niveaux de CSS, les modules et leurs différences d'implémentation permet d'y voir plus clair.
Au fil des veilles techno, on apprend tellement de petites choses :
-
Questionnaire State of CSS : https://stateofcss.com/en-US Rien que de lire les questions, on découvre déjà des tas de propriétés dont on n'avait jamais enetendu parler.
-
Container queries : on pourra bientôt faire des media queries avec la taille d'un conteneur comme break point, pas juste la fenêtre !
-
Vous saviez que Gap peut prendre deux valeurs ??
gap: row-gap column-gapqui sont d'ailleurs des propriétés qui existent aussi ! -
Accessibilité : j'ai déjà abordé le sujet des scrollbars mais saviez-vous que lorsque vous faites une
outline: noneen CSS, vous rendez aussi le focus invisible ? Problématique pour ceux qui ont besoin de naviger au clavier. -
Vous savez pourquoi on met les polices en em/rem plutôt qu'en px ? Notamment parce que cela permet aux utilisateurs d'ajuster la taille de la police. Si toutes les polices sont sur ces mêmes bases, la page entière évoule de façon organique.
A noter : dans cette présentation, il a été régulièrement question de CSS2. La vraie appellation est plutôt CSS2.1 mais par souci de clarté nous avons simplifié.
Une fois que j'ai approfondis un (1) sujet, je cloture ma session de veille techno.
Ca me prend généralement entre 1 à 2h par semaine, parfois plus mais c'est parce que le sujet est réellement utile (comme ça a été le cas pour CSS"4").
Il faut faire attention à ne pas trop se perdre et à y consacrer un temps raisonnable.
Par exemple, ça fait près d'un an que je songe à me former au HTMX mais je n'en ai pas encore l'utilité alors je me contente de quelques articles de veille techno dessus au hasard de mes recherches.
Je vous invite à utiliser notre tout nouveau channel de veille pour résumer et partager vos découvertes.
Je vous invite également, une fois par semaine, à mettre un minuteur chez vous sur 2h et vous pousser à faire une veille techno. Laissez-vous porter par un sujet puis un autre, cliquez sur les commentaires d'un article, sur une chaîne youtube, un auteur en particulier sur Medium ou LinkedIn. La veille techno n'est pas une corvée, c'est le moment de nourir votre curiosité et le mieux ? C'est une partie importante de notre job de dev. Si vous travaillez en équipe, vous pouvez même demander à mettre en place des créneaux de veille communs. Un dev qui laisse s'exprimer sa curiosité est un dev qui progresse. Ne négligeons pas cette solution hyper simple pour améliorer nos compétences !
Présentation sur Canvas : https://www.canva.com/design/DAGbCfGzf_U/XQma2oB3osltxXsXWPV7Gg/edit?utm_content=DAGbCfGzf_U&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton