DEV Community: Anthony PENA

Revue de presse - Juillet 2023

Anthony PENA — Wed, 02 Aug 2023 08:00:00 +0000

Comme tous les mois j'ai mis de côté les news qui m'ont le plus marqué. Ce mois-ci peu de chose technique ont retenu mon attention, je pense que c'est les vacances d'été pour tout le monde !

Je n'ai rien à cacher.

#Vie-privée #Sécurité

Site regroupant pas mal d'informations sur le pourquoi on ne veut pas d'une surveillance généralisée, ce que c'est que le degré de séparation (et comment il a évolué). Je vous recommande cette lecture si vous manquez d'argument ou si vous n'êtes à la base pas convaincue qu'on a tous des choses à cacher !

Twitter : thread sur l'utilisation des serveurs la nuit

#Divers #Écologie #Datacenter

Kobayashi nous fait un debunk sur la consommation électrique des serveurs, le comment ça fonctionne, pourquoi ça tourne ou pas, pourquoi ça n'a pas forcément de gros intérêt écologique (aujourd'hui en tout cas) d'éteindre les serveurs la nuit et que c'est déjà le cas en vrai dans pas mal de cas (via la virtualisation, la juste répartition des services, etc.)

Je suis assez d'accord avec ce qui est dit, ça me paraît plutôt logique (même si j'aurai pas forcément formulé les choses comme ça sachant que j'ai jamais mis les pieds dans un datacenter et donc je me permettrais pas d'affirmer ce qui s'y passe à ce niveau). J'ai juste un doute sur le fait qu'écologiquement ça apporte rien de couper la nuit si on s'en sert pas, mais je suis pas un expert du sujet

Père Bodul, raconte-nous une histoire !

#IA #ChatGPT #GPT

Un père qui fabrique une petite app avec ChatGPT qui utilise GPT pour générer des histoires pour sa fille. Usage plutôt intéressant d'outils et en plus il nous donne sa conversation avec ChatGPT, donc on peut savoir comment il a prompt l'outil pour avoir le code attendu. Par contre assez d'accord avec l'auteur : si on sait ce qu'on veut c'est potentiellement efficace mais si on a moins d'expérience c'est pas aussi évident

Astuces photos en quelques images

#Divers #Photographie

Récapitulatif visuel de quelques astuces en photos sous forme de post à scroller sur Instagram. Ça montre ce que représente l'ISO, l'obturation, la composition, etc.

C'est très orienté appareil photo mais une partie s'applique aussi aux téléphones (en particulier la partie ISO et composition)

Creapills : Une sensibilisation créative et puissante pour un message important à destination de TOUS les parents !

#Divers #Vie-privée

Creapills a réalisé une campagne pour la sensibilisation des parents à la protection de la vie privée et digitale de leurs enfants. C'est une campagne malheureusement parfaitement réaliste...

Tiktok de Athéna Sol sur le mot "mademoiselle"

#Divers #Société #Féminisme

Ce Tiktok explique pourquoi le mot "mademoiselle" c'est sexiste, en tout cas dans notre société patriarcale, et pourquoi on devrait utiliser tout le temps madame.

J'avoue que je me vois pas dire "madame" de prime abord si je parle à une fille de genre 8-10 ans, mais au fond c'est clairement une question d'habitude et de réflexe vu que ça me choquerait pas de dire monsieur à un garçon du même âge. En tout cas ça amène à réfléchir, prendre du recul, et déconstruire nos habitudes et réflexes. Le tout sans jugement !

🧶THREAD - Un programme de 15 lignes de code Python arrive à rivaliser avec les meilleures intelligences artificielles !

#Divers #IA #Science #Recherche

Mathis Hammel nous présente les résultats d'un papier de recherche qui montre qu'avec 15 lignes de code en Python (avec un peu de triche vu que y'a aussi des libs comme gzip et des fonctions) on peut écrire un algo qui classifie des textes avec un niveau de précision au niveau de l'état de l'art des IA qui font ça (comme Google BERT). Le tout sans entraînement, mais tout le même un dataset. Mathis prend le temps de tout détailler dans son thread. Je suis assez bluffé sur le fait qu'on ait aussi à priori des bons résultats sur des langues hors du dataset !

Ce genre de résultat est hyper intéressant. Ça ne veut pas dire qu'il faut jeter toutes les IAs, mais ça montre qu'on peut encore faire des algos très simples qui font des choses qui rivalisent avec les IA pour certaines tâches. Ça veut dire moins de ressources (pas de GPU, pas d'entraînement), potentiellement moyen d'embarquer ça plus facilement qu'avec de l'IA, et c'est algo à priori portable (si en Python c'est faisable, c'est faisable en Java, JavaScript, C, etc.) !

Le truc qui me fait rire c'est que j'ai réfléchi à faire un truc dans le genre y'a pas longtemps (sans la partie gzip, mais directement au niveau des mots) pour faire de la proposition de tag pour un outil de revue de presse (je vous présente ça bientôt !), mais je me suis dit que c'était trop bête comme méthode pour fonctionner… Comme quoi, j'aurai dû tester 😅

Why even let users set their own passwords?

#Divers #Sécurité #Mot-de-passe

Réflexion sur comment on utilise actuellement les mots de passes, la considération qu'on leur donne, le fait qu'on recommande (voir impose) du 2FA qui peut être discuté, avec une notion "d'appareil connu" qui n'a aucun sens dans les specs du web (2 browsers sur la même machine sont vu comme 2 appareils, si on a une purge automatique des cookies, notre navigateur devient un nouvel appareil aussi, etc.).

L'auteur va jusqu'à proposer qu'on ne laisse plus à l'utilisateur le choix de son mot de passe, qu'on lui en génère un et qu'on lui montre une fois. L'obligeant à avoir un gestionnaire de mot de passe pour conserver son mot de passe qui sera vraiment sécurisé.

Je trouve toute cette réflexion intéressante. J'aurais juste aimé que soit évoqué l'authentification par magic link, mais je suis assez d'accord l'article sur le reste

Benchmarking String Literal

#JavaScript #TypeScript #Frontend #Backend #Web

L'article montre une comparaison très simple des performances entre les string literal (const s = 'my String ' + thing) et les template string (const s = `my String ${foo}`) en particulier en ce qui concerne la concaténation. Les résultats montrent que les template strings sont plus 5 fois plus lentes que les string literal pour une concaténation du type 'text' + thing + 'other text' ce qui assez effrayant… Je savais que c'était plus lent mais pas à ce point…

Clairement quand je vois les résultats du benchmark qui est fait sur node 18 (comme c'est du v8 en dessous je pense qu'on verrait quelque chose de similaire dans le navigateur), je me dis qu'on devrait peut-être limiter l'utilisation des template string quand on les appelle beaucoup (typiquement le cas décrit par l'auteur : quand on fait du React)… Ou alors voir si on peut ajouter une étape de compilation pour virer les template string…

Créer une timeline avec uniquement du CSS !

Anthony PENA — Tue, 18 Jul 2023 08:00:00 +0000

Parfois on a pas forcément besoin de quelque chose de très compliqué, mais on veut un truc propre pour présenter des dates. Je vous propose de réaliser une timeline uniquement avec du CSS avec aucun élément parasite dans le code HTML pour avoir quelque chose de super simple.

Note : la magie du CSS opérant, vous pouvez copier-coller les extraits de CSS au fur et à mesure sans fusionner les sélecteurs, ça va fonctionner parfaitement ! Donc profitez-en pour vous concentrer sur ce qu'il se passe 😉

La base : les données

Alors pour mon exemple je vais partir de la liste des sorties des consoles Nintendo (à partir de la NES), parce que pourquoi pas ? (et puis j'aime les jeux-vidéos et leur histoire 😇). Donc voici cette liste brute :

Fin octobre 1987 Nintendo Entertainment System
28 septembre 1990 Game Boy
11 avril 1992 Super Nintendo
Fin 1996 Game Boy Pocket
1er septembre 1997 Nintendo 64
23 novembre 1998 Game Boy Color
22 juin 2001 Game Boy Advance
3 mai 2002 GameCube
28 mars 2003 Game Boy Advance SP
11 mars 2005 Nintendo DS
4 novembre 2005 Game Boy Micro
11 juin 2006 Nintendo DS Lite
7 décembre 2006 Wii
3 avril 2009 Nintendo DSi
5 mars 2010 Nintendo DSi XL
25 mars 2011 Nintendo 3DS
28 juillet 2012 Nintendo 3DS XL
30 novembre 2012 Wii U
3 mars 2017 Nintendo Switch
20 septembre 2019 Nintendo Switch Lite
8 octobre 2021 Nintendo Switch OLED

Comment afficher un ensemble de dates ?

L'option qu'on va retrouver le plus pour faire ça ce sera le tableau. C'est le choix qu'on retrouve sur Wikipédia (la source de mes données) par exemple, mais ce n'est pas forcément le plus sympa visuellement. De plus on a uniquement des dates et des noms de console à mettre en face, donc on aurait un tableau à deux colonnes, pas vraiment nécessaire.

Personnellement je vous propose d'utiliser une liste. En HTML, on a des balises pour ça <ul> (= Unordered List) et <li> (= List Item) :

<ul>
    <li>Fin octobre 1987 Nintendo Entertainment System</li>
    <li>28 septembre 1990 Game Boy</li>
    <li>11 avril 1992 Super Nintendo</li>
    <li>Fin 1996 Game Boy Pocket</li>
    <li>1er septembre 1997 Nintendo 64</li>
    <li>23 novembre 1998 Game Boy Color</li>
    <li>22 juin 2001 Game Boy Advance</li>
    <li>3 mai 2002 GameCube</li>
    <li>28 mars 2003 Game Boy Advance SP</li>
    <li>11 mars 2005 Nintendo DS</li>
    <li>4 novembre 2005 Game Boy Micro</li>
    <li>11 juin 2006 Nintendo DS Lite</li>
    <li>7 décembre 2006 Wii</li>
    <li>3 avril 2009 Nintendo DSi</li>
    <li>5 mars 2010 Nintendo DSi XL</li>
    <li>25 mars 2011 Nintendo 3DS</li>
    <li>28 juillet 2012 Nintendo 3DS XL</li>
    <li>30 novembre 2012 Wii U</li>
    <li>3 mars 2017 Nintendo Switch</li>
    <li>20 septembre 2019 Nintendo Switch Lite</li>
    <li>8 octobre 2021 Nintendo Switch OLED</li>
</ul>

Bon on a commencé à structurer un peu, mais ce n'est toujours pas la folie : on ne distingue pas les dates, on a une bête liste à puce.

Parenthèse balise oublié : `<time>`

Cette balise est là depuis quelques années déjà (dispo dans Firefox dès 2013, elle est dans Chrome depuis fin 2017), on l'utilise peu alors que c'est un super outil ! Globalement elle fait partie des balises créées pour donner de la sémantique à notre contenu. L'idée ici est d'indiquer qu'un texte représente une date, et donner une indication plus orientée "machine" de notre date via l'attribut datetime.

Dans notre cas, on peut transformer Fin octobre 1987 Nintendo Entertainment System en <time datetime="1987-10">Fin octobre 1987</time> Nintendo Entertainment System ou 28 septembre 1990 Game Boy en <time datetime="1990-09-28">28 septembre 1990</time> Game Boy. Il y a plein de format autorisé de date, le texte affiché restant totalement libre. Mais on peut imaginer pouvoir greffer des Web Extension qui vont reformater les dates à format qui nous convient mieux dans les pages avec ce système (on se rappelle qu'en France on utilise des dates au format dd/MM/yyyy, aux USA c'est yyyy/MM/dd, au Japon c'est yyyy-MM-dd).

En tout cas je propose qu'on ré-écrive notre liste comme ceci :

<ul>
    <li><time datetime="1987-10">Fin octobre 1987</time> Nintendo Entertainment System</li>
    <li><time datetime="1990-09-28">28 septembre 1990</time> Game Boy</li>
    <li><time datetime="1992-04-11">11 avril 1992</time> Super Nintendo</li>
    <li><time datetime="1996">Fin 1996</time> Game Boy Pocket</li>
    <li><time datetime="1997-09-01">1er septembre 1997</time> Nintendo 64</li>
    <li><time datetime="1998-11-23">23 novembre 1998</time> Game Boy Color</li>
    <li><time datetime="2001(06-22)">22 juin 2001</time> Game Boy Advance</li>
    <li><time datetime="2002-05-03">3 mai 2002</time> GameCube</li>
    <li><time datetime="2003-03-28">28 mars 2003</time> Game Boy Advance SP</li>
    <li><time datetime="2005-03-11">11 mars 2005</time> Nintendo DS</li>
    <li><time datetime="2005-11-04">4 novembre 2005</time> Game Boy Micro</li>
    <li><time datetime="2006-06-11">11 juin 2006</time> Nintendo DS Lite</li>
    <li><time datetime="2006-12-07">7 décembre 2006</time> Wii</li>
    <li><time datetime="2009-04-03">3 avril 2009</time> Nintendo DSi</li>
    <li><time datetime="2010-03-05">5 mars 2010</time> Nintendo DSi XL</li>
    <li><time datetime="2011-03-25">25 mars 2011</time> Nintendo 3DS</li>
    <li><time datetime="2012-07-28">28 juillet 2012</time> Nintendo 3DS XL</li>
    <li><time datetime="2012-11-30">30 novembre 2012</time> Wii U</li>
    <li><time datetime="2017-03-03">3 mars 2017</time> Nintendo Switch</li>
    <li><time datetime="2019-09-20">20 septembre 2019</time> Nintendo Switch Lite</li>
    <li><time datetime="2021-10-08">8 octobre 2021</time> Nintendo Switch OLED</li>
</ul>

Ce qui visuellement ne change absolument rien mais va nous servir plus tard !

Les points c'est moche…

Alors on en convient, une timeline on l'imagine souvent avec une ligne sur laquelle on va placer des cercles dessus pour indiquer où se place la date. Donc on va commencer par remplacer les points par des cercles bleus (pourquoi bleu ? Pourquoi pas ?)

Pour ça on va commencer par ne plus afficher le point avec list-style-type: none, puis on va fabriquer en CSS un pseudo-élément avant chaque élément de notre liste. En effet, pour chaque élément html, on peut cibler en CSS l'élément ::before, définir son contenu (pour lui donner une existance dans le DOM), puis ajouter du style. Pour le style de l'élément ::before, on définit une taille, une bordure bleue, un arrière-plan blanc (sinon on verra à travers le cercle) et passer la bordure en arrondi sur la moitié de la taille de l'élément. On va aussi devoir le passer en inline-block pour que l'élément reste aligné avec le texte mais pouvoir définir sa taille (sinon un élément ::before ou ::after est inline).

Si on compile tout ça sous forme de code, ça donne ça :

ul {
    list-style-type: none;
}
ul li::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 4px solid #20a2fd;
    background-color: white;
    border-radius: 50%;
}

La ligne verticale

Pour la ligne verticale, on peut opter une l'ajout d'une bordure sur la liste complète, mais je préfère le faire de nouveau à partir d'un pseudo-élément ::before pour être libre niveau style.

Donc le style qu'on va appliquer : on va mettre une bordure sur la droite du ::before de la liste, ensuite pour pouvoir positionner cet élément, on va définir l'élément <ul> comme position: relative (ce faisant les éléments enfants en position: absolute seront placés en se basant sur cet élément ensuite), puis on va positionner la ligne un peu au-dessus du haut de la liste, un peu en dessous (ce qui va lui donner la même hauteur que la liste, peu importe sa taille), et à gauche.

Sous forme de code :

ul {
    position: relative;
}
ul::before {
    content: "";
    border-right: 4px solid #20a2fd;
    position: absolute;
    top: -4px;
    left: 0;
    bottom: -4px;
}

Positionner tout correctement

On peut voir qu'il nous manque un peu de positionnement. En effet les cercles bleus sont collés au texte du fait qu'on ne lui a donné aucune position et qu'ils sont inline, la ligne est complètement décalée à gauche à cause du padding standard qu'on va avoir à gauche d'une liste.

L'idée c'est donc de corriger tout ça en rapprochant la ligne du texte et à l'inverse en éloignant un peu les cercles du texte, le tout en faisant en sorte que les cercles et la ligne soit alignés verticalement mais avec toujours les cercles au-dessus de la ligne.

Les faits ces choix pour que ça fonctionne :

on ajoute un position: relative sur les <li>, car qui va augmenter le stacking context (on pourrait faire de nombreux articles sur ce sujet… mais en vulgarisant ça revient à dire que le z-index des <li> sera toujours plus haut que celui de la balise parente, ici <ul>)
on change le padding de la liste pour mettre une valeur plus petite (pour rapprocher la ligne du texte)
on passe aussi les li::before en display: block et position: absolute, en faisant ça on va pouvoir gérer précisément la position du cercle
comme pour les parties précédentes, on va jouer sur les padding et les positions pour que tout s'aligne
on ajoute aussi un peu de padding sous chaque élément pour aérer un peu la timeline

Sous forme de code :

ul {
    padding-left: 4px;
}
ul::before {
    bottom: 0;
}
ul li {
    position: relative;
    padding-bottom: 8px;
    padding-left: 16px;
}
ul li::before {
    display: block;
    position: absolute;
    top: 4px;
    left: -10px;
}

Ce coup-ci c'est bon on a notre timeline !

Quelques améliorations possibles

Utiliser des custom properties

Pour l'article j'ai tout écrit sans variable (custom properties), mais dans un contexte professionnel je passerai par des variables pour rendre le code plus clair et éviter d'avoir des nombres qui sortent de nulle part ou des couleurs en double.

ul {
    --timeline--font-size: 16px;
    --timeline--color: #20a2fd;
    --timeline--width: calc(var(--timeline--font-size) / 4);
    --timeline--circle-width: calc(var(--timeline--font-size) / 2);

    list-style-type: none;
    position: relative;
    padding-left: 4px;
    font-size: var(--timeline--font-size);
}
ul::before {
    content: "";
    border-right: var(--timeline--width) solid var(--timeline--color);
    position: absolute;
    top: calc(-1 * var(--timeline--width));
    left: 0;
    bottom: 0;
}
ul li {
    position: relative;
    padding-bottom: 8px;
    padding-left: var(--timeline--font-size);
}
ul li::before {
    content: "";
    display: block;
    width: var(--timeline--circle-width);
    height: var(--timeline--circle-width);
    border: var(--timeline--width) solid var(--timeline--color);
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: var(--timeline--width);
    left: calc(-1 * (var(--timeline--circle-width) + var(--timeline--width) / 2));
}

Mettre en avant la date

Comme on a placé nos dates dans des balises <time>, on va pouvoir les utiliser pour les mettre en évidence et même ajouter un séparateur entre la date le texte.

ul li time {
    font-weight: bold;
}
ul li time::after {
    content: ' - ';
}

Mettre en évidence les décennies

Comme on a une indication de la date, on peut jouer dessus en combinaison avec un sélecteur avec un pattern de type "commence par" (ce qui donne time[datetime^="199"] pour les dates qui commence par "199", autrement dit, les dates de la décennie 1990).

C'est suffisant pour colorer la date, par contre si ce n'est pas la date qu'on va chercher à mettre en évidence mais le cercle sur la timeline, alors on va avoir besoin du + (qui permet de sélectionner le premier voisin de l'élément pointé avant le +) et du pseudo-sélecteur :has() (qui permet de valider un sous sélecteur sans changer l'élément pointé).

Note : le code suivant ne produit aucun résultat sous Firefox, en effet le pseudo-sélecteur :has() est encore derrière un flag au moment où j'écris cet article, mais on pourra prochainement l'utiliser !

ul li:has(time[datetime^="199"]) + li::before {
  border-color: green;
}
ul li:has(time[datetime^="200"]) + li::before {
  border-color: orange;
}
ul li:has(time[datetime^="201"]) + li::before {
  border-color: red;
}

Conclusion

Je souhaiterais conclure en faisant un rappel car comme toujours à ce qu'on fait avec du CSS, au sens où il ne faut pas communiquer que par des couleurs ou des positions visuelles, en effet notre contenu peut être lu par des gens qui auront des déficiences visuelles (du petit daltonisme à la cécité complète avec tout le spectre qu'on peut imaginer ou non entre les deux), et pour eux aussi il faut que le contenu soit accessible. Ici on a quelque chose qui reste plutôt accessible comme on garde uniquement une liste en termes de DOM, par contre le choix des couleurs pour l'indication visuelle de décennie laisse à désirer (je n'étais pas très inspiré pour les couleurs, donc j'ai fait simple mais ne copiez pas bêtement ces couleurs au-delà du test !).

En tout cas j'espère que je vous aurai appris quelques éléments et que ça vous donnera des idées 😎

Sources :

Crédit photo : https://pixabay.com/photos/typewriter-word-history-5516925/

REX : Camping des Speakers 2023

Anthony PENA — Wed, 28 Jun 2023 08:00:00 +0000

Comme l'année dernière pour la première édition du Camping des Speakers, j'étais présent cette année encore une fois pour donner un talk. Cette année il y a eu des changements sur ma participation : j'ai joué mon talk sans slide et j'étais bénévole sur l'événement !

Comme d'habitude je ne vais vous parler que des talks qui m'ont le plus marqué ! Même si je dois admettre qu'au Camping des Speakers il y a beaucoup de talks atypiques, beaucoup de talks marquants donc la sélection a été rude ! Comme le format est atypique, c'est peu probable que vous puissiez voir les talks dont je vais parler en vidéo (et évidemment ce n'est pas filmé "ce qui se passe Camping reste au Camping") mais vous pouvez toujours contacter les auteurs, je pense qu'ils seront ravis d'échanger avec vous sur le sujet !

J-1 : Le diner speaker

Comme pour la plupart des conférences, on peut participer la veille à un dîner avec les speakers, les organisateurs et les bénévoles. Cette année j'ai pu y participer !

C'est toujours un moment que j'apprécie, car on peut y rencontrer d'autres gens passionnées, ça me permet aussi de voir quelques personnes que je vois essentiellement en conférence ! Cette année au camping, le repas c'était un food truck faisant des galettes et crêpes. On se lève avec son assiette, on se pose à une table et on rencontre les gens présents. C'est détente et convivial c'est tout ce qu'on attend de ce moment où on souffle avant que l'événement ne commence !

Mes sessions préférées

"Il était une fois un arbre qui parle" par Paul Pinault

Si le titre n'est pas forcément des plus parlants, au sens où il n'indique pas vraiment le sujet dont il va être question, le talk en lui-même était extrêmement intéressant ! En effet Paul est venu nous parler d'objets connectés et d'IoT !

Pendant tout le talk, Paul sort des boites de sa valise, de la même façon qu'on défilerait des slides. Chaque boite contient un ensemble de carte électronique affilié au monde des objets connectés et de l'Iot. Tour à tour Paul nous les présente, nous explique leurs capacités, leur consommation, dans quel cas les employer. Quand la boite est terminée, avant de passer à la suivante, Paul nous passe la boite pour qu'on puisse voir de près le matériel qu'il vient de nous présenter.

Je ne suis clairement pas un expert des objets connectés mais c'est un domaine qui m'intéresse -- en particulier tout ce qui concerne les smart homes -- et clairement c'était passionnant ! On sent que Paul a une grande expertise du sujet. Il peut nous parler du simple Raspberry Pi qu'on connait pratiquement tous à la carte un peu niche qui utilise un réseau très peu courant.

À travers son talk il nous amène à réfléchir à ce qu'on cherche avec les objets connectés et l'IoT, les contraintes du matériel, mais aussi leurs points forts. Il nous prouve aussi que c'est un milieu essentiellement de logiciel, car c'est souvent loin de l'objet en lui-même que va être le gros de l'intelligence, l'objet ne servant qu'à porter des capteurs et transmettre les données captées.

"Imager, matérialiser sa pensée" par Virginie Ferey

Dans cette session j'ai dessiné une fourmi qui était perdue à tourner autour d'une patate ! 😵‍💫

La session était très confidentielle, car on était que 5 participants ! Eh bien dommage pour vous les autres, vous avez loupé une bonne session ! 😛

Virginie a commencé par nous faire un peu de théorie sur dessin avant de nous donner du papier et de quoi dessiner. On a commencé par faire des dessins abstraits (des lignes parallèles, des cercles, des cubes, des cylindres) pour nous mettre dans le mood et nous détendre. Puis on a fait une partie de Gartic Phone où on s'est prouvé que le plus important pour dessiner des choses c'est de se lancer, pas de "savoir dessiner", juste se lancer, représenter comme on le pense les choses et voir comment les gens interprètent ce qu'on dessine. Pour passer un message on a pas besoin du talent d'un grand peintre, juste gribouiller des choses qui parlent aux autres !

"On vit déjà dans un monde fédéré !" par Anthony Pena

Même si c'est un peu égocentrique, je ne peux que vous parler de ma session !

Pendant 15 min j'ai expliqué aux présents ce qu'est un réseau centralisé, un réseau décentralisé et un réseau fédéré. Je me suis appuyé sur des exemples qu'on connait tous, pour montrer quelques avantages et inconvénients des différents réseaux. À commencer par Mastodon qui est un des gros représentant des réseaux fédérés. Mais j'ai aussi parlé des mails, parce qu'au fond le réseau mail est construit comme un réseau fédéré aussi, sans que ça choc personne.

J'ai été très content de pouvoir jouer ce talk sans slide, dans un parc pour enfant ! Merci à tous les présents pour être venu !

"JavaScript : une histoire d'amour 💔" par Jordane Grenat

Clairement je pense que c'est possible uniquement au Camping des Speakers de voir ça : un talk entièrement en rime. Jordane a encore relevé le défi qu'il s'est fixé et avec brio, il nous a expliqué pourquoi il essaie de complètement abandonner JavaScript pour des langages plus fortement typés comme Elm ou Reason.

On y trouve des vrais arguments contre JavaScript (l'historique un peu cracra de JavaScript, le fait qu'on doit toujours jongler avec toutes les erreurs du début par compatibilité, la navigation dans le code qui est souvent compliqué, etc.), mais aussi des arguments pour le changement, le tout saupoudrés d'humour ! Franchement bravo Jordane !

"Esprit de famille, méthodes, rapport à l'argent, ambitions - l'héritage d'une famille d'entrepreneurs depuis 100 ans" par Mathieu Passenaud

Talk assez différent, car il ne parle pas de tech. Mathieu nous parle de sa famille, du fait qu'il est la 4ème génération d'entrepreneurs, sur plus d'un siècle : ça met une certaine pression.

En effet Mathieu est membre de la famille Passenaud qui est une grosse entreprise de traitement des déchets, en particulier métallique mais pas que. En toute transparence il nous a parlé de sa famille, de comment elle s'articule autour de l'entreprenariat et des entreprises familiales, mais aussi de l'esprit de famille et les conseils qu'il a reçus depuis qu'il s'est lui-même lancé dans l'entreprenariat pourtant dans un milieu très différent (son affaire est spécialisée dans les solutions d'autorisation et d'authentification). Pourtant être la nouvelle génération d'entrepreneur n'est pas simple, car il y a une certaine pression à passer après plusieurs générations d'entrepreneur qui ont réussi !

Vraiment merci Mathieu pour cette histoire !

"La Pull Request de l'horreur" par Jean-François Greffier

Encore un talk non tech, mais on reste un peu dans le milieu. Jean-François est venu nous parler de sa dépression. Une dépression qui part pratiquement d'un craquage face à une Pull Request sur laquelle il a semble-t-il beaucoup trop réagi. Des passages compliqués, des moments de doutes, un travail qui l'a miné, tous les symptômes d'une dépression qui s'installe doucement et qui devient omniprésente.

Je n'en dirais pas plus sur son histoire qu'il nous a raconté en privé, alors que sa dépression n'est pas finie. Mais, si tu passes ici : merci Jean-François de nous avoir partagé ton histoire, je te souhaite bon courage pour le chemin qu'il te reste à parcourir !

"Récits d'épouvante MLOps : Oseras-tu y faire face ?" par Yulianna Khorolich

Encore des histoires, mais cette fois-ci tournées de façon drôle ! Yulianna est venue nous raconter des histoires qu'elle a vécues, qui ne se sont pas vraiment bien passées, et qui assez étrangement nous rappelle les vieilles pratiques qu'on voyait y'a 20-30 ans dans le milieu du développement. Je ne dis pas par là que le milieu ML/Data est en retard mais juste on dirait qu'il y a un manque de maturité au niveau des entreprises sur comment on doit gérer les personnes et projets ML/Data au point de reproduire des schémas qu'on sait non-fonctionnel !

En tout cas c'était très sympa de pouvoir faire une session en cercle à écouter les histoires Yulianna avec sa lampe torche lui éclairant le visage comme si on était autour d'un feu !

Conclusion

Je vous ai parlé de quelques sessions, mais ce n'est qu'une facette du Camping des Speakers. La partie la plus facile à raconter en fait. C'est une conférence qui se vit ! J'ai encore passé un très bon moment au Camping, aller nager entre deux conférences pour me détendre un peu avant de reprendre, courir un peu partout pour s'assurer que tout roule, pouvoir participer à l'envers du décor avec les organisateurs en filant des coups de mains à droite à gauche, me battre avec d'autres comparses face à un lave-vaisselle de plonge qui nous aura fait suer (Note pour la prochaine fois : bien attendre la chauffe avant de commencer à vouloir laver la vaisselle !! 😡), mais aussi beaucoup de rire !

Je connaissais déjà le lieu et la conférence, mais cette année a une saveur particulière, et je pense qu'avec pu porter le t-shirt bleu du Staff a joué pas mal ! Merci aux organisateurs de m'avoir à la fois fait confiance pour jouer un talk et à la fois fait confiance pour faire mon premier bénévolat dans une conférence tech, en espérant avoir mis convenablement ma pierre à l'édifice !

Une troisième édition a été annoncé à demi-mot avec beaucoup de ouink-ouink (😉) mais qu'il y ait ou non une troisième édition, je suis très heureux d'avoir pu participer à cette aventure avec vous ! Donc encore une fois merci à Horacio, Aurélie, Pierre, Steffy, Sebi, et les autres bénévoles (en particulier Robin, ça a été un vrai plaisir de travailler avec toi !) ! ❤️

Sources :

https://camping-speakers.fr/

Bref, je suis certifié React Level 2

Anthony PENA — Wed, 21 Jun 2023 08:00:00 +0000

Après avoir fait le tour des certifications Angular en passant les niveau 2 et 3, je me suis attaqué aux certifications React. J'ai commencé par le niveau 1, puis le niveau 2 quand ce dernier est sorti.

Comme pour mes précédentes certifications, je vous fais un retour d'expérience sur comment ça se passe et comme s'y préparer pour vous lancer sereinement !

Certification ? Kézako ?

Pour faire très simple, une certification c'est un document délivré par un organisme qui vise à attester que vous avez certaines compétences théoriques et/ou pratique sur un sujet.

La plupart du temps les certifications sont délivrées par des groupes éditant une solution technologique (par exemple : Amazon pour AWS, Google pour GCP, Microsoft pour Azure, Oracle pour Java) ou un partenaire. Parfois il s'agit d'une certification par une entreprise externe qui n'a pas d'affiliation directe avec la solution.

React Developer Level 1 & 2

Dans le cas de certification que j'ai obtenue, il s'agit du second cas : c'est la société Interstate 21 qui fait passer l'examen et délivre la certification. Interstate 21 est un organisme de formation et certification qui est piloté par Alain Chautard qui est Google Developer Expert Angular (mais aussi Web et Maps). Cette société délivre des formations et certification Angular (via la partie Angular Training) et depuis récemment des certifications React via la partie React Certification.

Il ne s'agit donc pas d'une certification officielle provenant de Facebook ou de la core team React, mais Alain Chautard est un expert du web reconnu, il sait de quoi il parle.

Il faut comprendre que cette certification a pour but de valider des compétences pratiques en React. Si vous ne connaissez pas la documentation du bout des doigts, ce n'est pas un souci.

En effet contrairement à d'autres certifications (au hasard Oracle Certified Professional Java), le but n'est pas de vous faire manger et digérer toute la documentation, pour ensuite tout coucher sur papier, comme on aurait pu le faire pour un examen classique à la fac par exemple. Ici on vient valider des compétences et connaissance pratique acquises avec l'expérience.

Parlons prix

Le niveau 1 coûte $30 et n'inclu que la première partie du niveau 2.

Le niveau 2 coûte $70. Si comme moi vous vivez en France, il faut ajouter à ce prix la TVA de 5%, soit $3.85, portant donc la certification à $73.85. Au taux de change que j'ai eu par ma banque au moment du paiement, j'en ai eu pour environ 70€.

Si vous souhaitez faire passer cette certification en note de frais, après paiement, le mail de confirmation contient un lien permettant de générer une facture avec les informations nécessaires.

Un examen en 3 parties

L'examen pour la certification se compose de trois parties : un QCM, un projet et un entretien.

Le fait de payer pour la certification ne déclenche pas le démarrage de l'examen (contrairement à comment ça se passait avant, donc pas d'inquiétude si vous voyez l'inverse pour des articles un peu plus vieux), on obtient un code qu'il faut entrer pour commencer l'examen. Par contre entrer le code démarre de suite la première partie !

Partie 1 : QCM

La partie QCM est très simple : 50 questions, 25 minutes, donc 30 secondes par question en moyenne. Comme on est seul face à un ordinateur, qu'on connaît très bien la documentation React, on a juste assez de temps pour revérifier 2-3 réponses mais clairement si vous avez besoin de le faire pour chaque question, vous n'aurez pas le temps.

Sans vous donner de question, on retrouve des questions concernant React au quotidien et un peu plus : des questions sur le fonctionnement de React, sur les hooks, les classes components, react-router, redux ou encore JavaScript.

Si on obtient au moins 70% de bonne réponse (soit 15 erreurs maximum), on peut passer à l'étape suivante. La réponse est instantanée, on reçoit un mail avec un récapitulatif directement après la fin du questionnaire avec un lien qui nous amène à la partie suivante (sauf si vous êtes sur le niveau 1, là vous aurez directement votre certificat).

Partie 2 : projet

La partie projet est composé d'un Google Doc avec tout ce qui est attendu, les liens des différents éléments dont on a besoin (URL pour récupérer les données) et le lien sur lequel il faut poster notre projet.

En théorie on a le choix d'utiliser Stackblitz ou de travailler sur le projet en local (pour utiliser notre éditeur/IDE habituel) et fournir un dépôt git, dans mon cas j'ai choisi d'avoir le projet en local parce que j'ai mes habitudes avec Vite (mais j'aurai pu utiliser le Stackblitz fourni par Vite et juste forker le projet sur mon github).

Je ne donnerais pas beaucoup plus de détail sur cette partie, le but étant que vous fassiez le projet pendant la certification pas que vous le fassiez en amont. Le projet est volontairement simple, mais il permet de mettre en pratique la plupart des éléments de base que vous utilisez normalement au quotidien.

Le style ne compte pas sur ce projet, donc ne perdez pas de temps avec ça, concentrez-vous sur l'essentiel : la partie React. Pour le style j'ai opté pour un Bootstrap, car c'est rapide à mettre en place et c'est complet.

Ici pas de score particulier, il suffit de poster notre projet dans les temps pour que son projet soit review.

Partie 3 : entretien

Une fois la review fait on reçoit un lien choisir un créneau d'entretien avec Alain Chautard ou un de ses collaborateurs. Dans mon cas, j'ai fait l'entretien avec Alain Chautard. Vous avez le choix de la langue de l'entretien parmi : anglais, français, espagnol et italien.

Le créneau dure 20-25min, mais l'entretien peut déborder un peu. Dans mon cas j'y ai passé à peine 20min, le temps de faire le tour du projet.

Le but ici pour l'évaluateur est de vérifier que vous avez bien compris ce que vous faisiez, que c'est bien vous qui avez fait le projet (c'est évident que sans l'entretien, certains seraient tentés de faire faire le QCM et le projet par quelqu'un d'autre) et que vous êtes habitué à manipuler des projets React.

Note : attention à prévoir une pièce d'identité avec photo (carte d'identité ou permis), car on va vous la demander pour être sûr que c'est bien vous qui passez l'entretien. J'avais oublié de mon côté et j'ai dû courir hors du bureau pour aller chercher mon permis 😅

La réponse

Alain m'a directement dit qu'il validait ma certification. Je ne sais pas si c'est systématique. Dans les minutes qui suivaient la fin de l'entretien j'ai reçu un mail m'indiquant que j'étais certifié et avec un lien pour télécharger mon certificat.

Quelques conseils

Pour vous entraîner si vous avez un doute ou si vous n'êtes pas habitué à bootstrapper des projets, je vous conseille de créer une application React très simple avec un peu de routage, un petit formulaire, des appels REST et un peu de donnée à afficher. C'est pas très palpitant mais une todo app peut faire l'affaire.

Je vous conseille aussi de ne pas faire trop de zèle et de vous cantonner à ce qui est demandé : ajouter des fonctionnalités, changer le style, faire des tests ne sera pas valorisé ici, concentrez-vous sur l'essentiel ! Par contre dites-vous quand même que vous allez devoir discuter de votre projet avec quelqu'un, il faut donc que vous maitrisiez votre code, qu'il soit un minimum bien structuré et mettre en place des bonnes pratiques qu'on utiliserait sur des vrais projets.

À la fin du questionnaire, vous aurez 7 jours pour rendre le projet, c'est pratique pour pouvoir faire la certification sur plusieurs jours, mais je vous conseille quand même d'enchaîner les deux premières parties. Ce que j'ai fait : j'ai fait le questionnaire et le projet le samedi, mais j'ai attendu le mardi pour le rendre de sorte à avoir le temps de relire le code à tête reposée. Le projet n'est clairement pas compliqué mais ça aurait été dommage de me précipiter alors que j'avais le temps de relire et voir si je n'avais pas loupé des points ou possibilité de faire les choses plus proprement sans grand effort.

Pour l'entretien vous avez le choix de la date et de l'heure parmi une plage qui s'étale sur plusieurs semaines. Je vous conseille si possible de prendre un créneau le plus proche possible. Comme vous allez devoir parler du projet que vous avez réalisé, ce sera plus simple si vous l'avez encore bien en tête. Personnellement j'ai choisi un créneau le lundi en fin de journée, 1 semaine et demie après mon rendu (pas de créneau avant).

Conclusion

Je suis content d'avoir pu passer cette certification. C'est une clé de plus pour la suite, et une petite validation du temps que j'ai pu passer à ces 4 dernières années à comprendre toute la logique de ce framework.

Plus qu'à attendre que le niveau 3 arrive pour le passer ! 😎

Être prestataire

Anthony PENA — Wed, 14 Jun 2023 08:00:00 +0000

On me demande régulièrement ce que je fais, comment ça se passe d'être prestataire (ce qu'on appelle aussi l'assistance technique (AT) contractuellement), donc comme ça fait 7 ans que c'est mon quotidien je vous livre ma vision des choses. Aussi bien pour les gens qui se pose la question de changer de monde (passé d'un éditeur à une ESN faisant essentiellement de la prestation) que pour les gens qui découvrent le secteur de l'informatique.

Disclaimer : j'oppose un peu plusieurs postures et très souvent le fait d'être interne à celui d'être presta mais n'y voyez aucun jugement, tous les status ont des avantages et des inconvénients, être interne comme prestataire n'est pas fait pour tout le monde, vous allez le voir en lisant cet article.

Faire de la régie

Je commence par évoquer une autre option du monde de l'ESN (Entreprise de Services du Numérique) : la régie. En gros l'idée c'est que plutôt que d'aller chez le client, on va travailler dans les locaux de l'ESN pour laquelle on travaille, avec des gens de notre ESN, en fait toute l'équipe est de l'ESN globalement et on va réaliser un projet pour un client donné. Souvent on va être en engagement de résultat ici : on a un engagement sur un résultat défini à réaliser dans un délai défini avec souvent des éléments contractuels du type de retard toléré, pénalité de retard, etc.

Je n'ai jamais été dans ce cas exact, mais j'ai vécu une situation presque identique : j'ai été en mission pour le compte d'une ESN qui m'a envoyé en mission chez une autre ESN qui avait besoin d'un développeur en plus pour travailler en régie sur un de ses pôles. Donc j'ai vécu la régie pendant un peu plus d'un an mais juste par pour l'ESN qui m'employait.

Je ne vais pas parler de ce cas qui n'est pas le cas qui m'intéresse ici, mais je pourrais en parler dans un autre article si ça intéresse des gens.

Faire de l'assistance technique

Le premier point c'est qu'on ne travaille pas au quotidien avec nos “vrais” collègues (ceux qui sont employés par la même ESN), on travaille chez le client. En fait c'est assez proche de l'intérim sauf qu'on est en CDI classique avec une ESN, donc si on se retrouve sans mission c'est l'ESN qui gère le fait qu'on ne rapporte pas d'argent, là où en intérim si on a pas de mission on est généralement au chômage.

Je sais que ça inquiète pas mal de gens car ça veut dire s'intégrer à une nouvelle équipe régulièrement (on va forcément changer de mission à un moment donc changer d'équipe) et on a parfois l'impression de devoir en faire beaucoup et apporter plus que les autres.

En vrai il faut se dire qu'on est là pour travailler comme les autres, mais juste on est une ressource modulable plus facilement, car si besoin le client peut nous sortir des effectifs relativement facilement. Dans les faits, si tout va bien, le client fera tout pour nous garder le plus longtemps possible, car comme les internes, on est vite porteur de connaissance et le fait de partir veut dire une perte de connaissance automatique. Par contre on est pas là en remplacement d'un interne de la manière dont parfois on prend un intérimaire en attendant un retour de congé parental ou arrêt maladie. On est généralement intégré à une équipe comme un interne, sans vrai limite de temps.

Préparer son départ en continu

Comme je disais il arrive forcément un moment où on va partir. Il y a pas mal de raisons à ça. La première c'est la limite à 3 ans pour les contrats de prestation (mais qui peut être étendu avec une dérogation), parfois des entreprises ont une limite même plus courte pour être sûr de ne pas avoir de problème. La seconde c'est l'envie de partir, en effet je fais partie des gens qui sont toujours partis par choix, non pas parce que ça se passait mal mais parce qu'il était temps de partir à mon sens pour continuer d'évoluer. La troisième raison qui arrive c'est les réorganisations qui font que notre mission n'a plus de sens ou bien juste l'objet de notre mission est terminé (imaginons qu'on soit là pour faire la migration d'une application d'une techno à une autre, une fois fait le client peut juger que les internes suffiront pour tout gérer). La dernière raison qu'on voit de temps en temps c'est des problématiques de budget, en effet sortir un prestataire est relativement facile et peut se faire en moins d'un mois très souvent, là où pour un interne il faudra jongler avec les périodes de préavis de plusieurs mois.

Beaucoup de cas mais tout dans tous les cas : on a pas vocation à rester. En tout cas, à priori, car on peut théoriquement passer interne si le client est intéressé de nous garder. Mais sauf dans ce cas, on doit cherche à ne pas être « LE sachant », être la personne qui centralise tout, sans qui rien ne fonctionne. De toute façon c'est toujours une mauvaise chose d'avoir un rôle comme ça, parce qu'on se retrouve en situation de truck factor (imaginons au hasard que LE sachant se fasse renverser par un camion et meurt sur le coup, on fait comment ? ou même juste s'il est malade ou qu'il parte en vacances ?). Globalement ça ne veut pas dire qu'on ne doit rien savoir, mais juste jamais être le seul à porter la connaissance d'un gros sujet.

Un point qui est parfois frustrant : on ne peut garder aucun code (c'est pas uniquement moral/éthique, c'est aussi légal, car c'est la propriété du client), mais on peut engranger de l'expertise et la réutiliser dans les missions suivantes. C'est même ça qui fait de quelqu'un un bon prestataire à mon sens : être capable de monter en compétence mission après mission pour ensuite réutiliser cette expertise sur les missions suivantes.

On apporte autre chose

Rentrons sur un gros sujet : c'est quoi la bonne durée pour une mission ? Je ne peux pas vraiment vous donner une réponse parfaite, chacun est différent, chaque mission est différente et on peut avoir un rôle différent en fonction des missions. À mon avis, en tant que développeur une mission d'environ 1 an c'est pas mal, on a le temps de s'installer mais sans trop se poser, on a le temps de monter en compétence et souvent faire le tour de ce qu'on peut apprendre aussi. Après ça dépends des missions et des contextes, j'ai vu des contextes où il fallait au moins 6 mois pour monter vraiment en compétence, du coup là il faut plutôt viser autour de 18 mois, sinon on en tirera pas grand-chose. Pour des rôles différents, ça peut varier aussi, avec un rôle de lead dev je pense qu'il faut plutôt viser 2 à 3 ans, car on a souvent une vue plus large, plus de responsabilité, et on est un peu garant de la stabilité de l'équipe dans un sens, et sans s'interdire de passer à autre chose, ça me parait un peu abusif de rester moins de 2 ans (sauf si la mission est bornée à un projet ou autre). À l'inverse on peut être face à des missions d'expertises avec un cadre très restreint et qui pourra durée entre quelques jours et quelques mois.

Le sujet était sous entendu, mais du fait qu'on accumule des expériences plus courtes, on a aussi une expérience souvent plus variée que nos collègues internes. Ce n'est pas toujours le cas, j'ai connu des internes qui étaient passés par beaucoup de prestations ou pas mal de clients finaux ou même qui travaillaient pour des entreprises assez ouvertes aux mutations internes pour avoir vu beaucoup de choses. Par contre en général les internes ont des expériences disons plus “stable”, ce qui leur permet de maitriser beaucoup plus certains éléments des projets, des process internes ou du métier, là où nous on peut apporter plus variété de pratiques et d'expériences.

Un gros avantage qu'on a en tant que prestataire c'est qu'on peut facilement ouvrir des sujets, parfois faire bouger certaines lignes pour améliorer les choses. Ce n'est pas vrai partout, mais en général on peut s'appuyer sur notre expérience pour proposer des choses, bien sûr sans arriver et casser l'existant pour casser. Mais si on voit un point qui ne fonctionne pas ou pas bien, c'est évident qu'on peut proposer autre chose en appuyant sur nos précédentes expériences.

Le plus important pour moi c'est de partir avec une nouvelle expérience, des nouvelles pratiques, des nouvelles méthodes de travail qu'on utilisera (ou pas) pour les missions suivantes.

Beaucoup plus de collègues

Un avantage qu'on ne réalise pas forcément au début c'est qu'on a beaucoup plus de collègue et qu'on rencontre beaucoup plus de gens.

Déjà on a une ESN derrière nous. Ça veut dire qu'on a accès un réseau de ce fait, parfois une vraie communauté. C'est mon cas chez SFEIR par exemple, où quasiment dès le tout début je me suis retrouvé en contact avec un collègue de l'agence du Luxembourg, car on bossait sur le même support de formation sans oublié tous mes collègues à Nantes a qui je peux demander un coup de main ou une info sans souci parce qu'on s'entraide autant qu'on peut !

Dans le même temps, on a tous nos collègues « de mission », qui sont nos collègues autant que ceux de notre ESN, voir plus, car c'est avec eux qu'on travaille le plus au final. C'est une équipe qu'on intègre, avec un besoin de s'intégrer assez vite pour prendre ses marques ce qui parfois n'est pas simple.

Parfois on peut aussi se sentir un peu seul chez le client, parce que pas de communauté dans notre ESN, pas vraiment de moment de rencontre, pas vraiment de contact, donc on est seul chez le client et on est pas aussi intégré qu'un interne donc c'est assez difficile.

Mais un entre deux perpétuel…

Quand on prend du recul on se retrouve entre deux entreprises : celle pour qui on travaille au quotidien et l'entreprise qui nous emploie (notre ESN).

Les deux sont déconnectées, avec chacune leurs objectifs, leurs choix, leurs ambitions. Ça peut bien se passer d'un côté et pas de l'autre, et en fonction des cas c'est pas toujours simple à gérer. En particulier sur la partie commerciale, car on travaille chez notre client et la relation commerciale est importante, c'est d'ailleurs un commercial qui est souvent notre point d'entrée avec notre ESN.

En parlant des commerciaux, on est aussi tributaire de leur capacité à nous trouver des bonnes missions. On a pas toujours la même vision de ce que c'est une bonne mission et si on a pas une vraie relation de confiance avec notre commercial c'est compliqué. Je n'ai pas de souci de ce côté-là aujourd'hui mais ça n'a pas toujours été le cas, et les commerciaux qui ne cherchent pas plus loin que la première mission qui veut nous prendre, ou le plus gros TJM, j'ai aussi connu…

À prendre en compte aussi que ce n'est pas directement notre travail au quotidien qui joue sur notre évolution dans notre ESN. En effet, que le client soit content c'est une chose mais si on souhaite évoluer dans notre ESN, ce n'est souvent pas ça le critère mais plutôt l'investissement qu'on aura dans notre ESN.

De l'intérim plus stable…

Comme je disais plus haut, être prestataire c'est un peu comme être intérimaire mais en plus stable au sens où on est en CDI qu'on soit en mission ou non.

Il y a par contre le TJM (Taux Journalier Moyen, le prix que dépense le client chaque jour pour qu'on travaille pour lui) qui peut parfois nous mettre une petite pression. Le TJM varie en fonction de plein de facteurs : grille de l'entreprise, expérience de la personne, compétences, négociation commerciales, etc. Mais autant on est souvent assez peu impacté par le TJM (mais ça dépend des ESN) autant avoir un gros TJM donne parfois l'impression à la fois de devoir en faire plus que les autres à la fois de se faire avoir par rapport à notre salaire journalier.

Attention à bien comprendre comment fonctionne une ESN. L'idée est de faire une marge journalière qui va permettre de payer : les taxes et impôts, les coûts immobiliers (les locaux, les véhicules, etc.), le staff (commerciaux, ressources humaines, direction financière, directeurs d'agences, etc. en gros tous ceux qui ne rapportent pas d'argent mais sans qui les rouages ne tournent pas), la formation, les congés (quand vous être en congés vous ne rapportez pas d'argent, mais l'ESN a toujours un coût de fonctionnement), les avantages du type participations à des conférences (si vous me suivez, vous savez que je profite pas mal de cet aspect), etc. donc j'évoque le fait qu'on peut avoir l'impression de se faire avoir parce que j'entends souvent ça mais ce n'est pas le cas à mon sens.

Dans beaucoup d'ESN on a un commercial pour manager. Je trouve ce système absurde, car un commercial ne connait pas notre métier, ne peut pas comprendre nos difficultés du quotidien, nous guider d'un point de vue carrière. Mais ce n'est pas le cas partout, encore une fois chez SFEIR mon manager est un développeur et ça change vraiment la donne !

Le cas du freelance

Depuis le début de l'article je dis globalement « être prestataire = travailler pour une ESN » mais il y a au moins un autre cas, c'est être freelance. On est pas forcément en assistance technique chez un client quand on est freelance, mais je connais quelques freelances qui calque ce modèle juste en étant leur propre commercial. C'est avantageux sur pas mal d'aspect, car on est plus du tout dépendant de la confiance envers une entreprise pour le choix des missions, et la part du TJM qu'on garde pour nous est plus importante, par contre on est sans doute un peu moins protégé en cas de crise (c'est plus simple de rompre un contrat avec un freelance qu'avec une ESN avec qui on a plusieurs dizaines de contrats).

Conclusion

J'espère vous avoir donné une vision assez large mais précise de ce que c'est la prestation. J'espère vous avoir rendu curieux de ce modèle de fonctionnement qui est mon quotidien depuis 7 ans maintenant. Je suis personnellement très à l'aise avec le modèle de la prestation qui me permet de changer assez souvent de mission, m'a permis de gagner assez vite en expérience et en particulier via Sfeir avoir accès à des rôles que je n'aurai pas pu avoir autrement.

Si vous avez des questions ou des remarques mes DM sont toujours ouverts sur les réseaux sociaux, n'hésitez pas !

Crédit photo : https://pixabay.com/photos/construction-worker-safety-2578410/

Revue de presse - Mai 2023

Anthony PENA — Tue, 06 Jun 2023 06:00:00 +0000

Wind farm in Germany is being dismantled to expand coal mine

#Société #Écologie #Divers

Après les centrales nucléaires, l'Allemagne commence à supprimer les champs d'éolienne pour étendre des mines de charbon. L'Allemagne est un pays plus vert que le nôtre il paraît…

Note : deux scores qui ne servent à rien

#Société #Divers #Santé #Voiture

Note de Timo sur le nutriscore et le Crit'Air qui ne servent à ce qu'on pense. Le nutriscore n'indique pas que l'aliment est bon pour la santé, le crit'air n'indique pas que le véhicule consomme/pollue moins.

Le nutriscore indique si le produit tel quel est intéressant en termes d'apport nutritif. Donc typiquement les frites surgelées c'est A vu que c'est de la patate (même s'il faudrait prendre en compte l'huile de friture pour être honnête).

Le Crit'Air indique uniquement la qualité des gaz d'échappement. Donc un vieux diesel même à faible consommation aura un Crit'air nul face à une berline moderne qui fait du 12L/100

Twitter : Thread sur les gitignores

#Git #Dev

Mini thread sur l’utilisation des nested .gitignore. Je suis assez d’accord avec ce qui est dit : Git est orienté fichier, si on a besoin de faire de l’exclusion à plein de niveau, le mieux c’est d’avoir plusieurs .gitignore la plupart du temps

Microsoft is forcing Outlook and Teams to open links in Edge and IT admins are angry - The Verge - Liens en vrac de sebsauvage

#Microsoft #Vie-privée #Windows #Microsoft-Edge

Les nouvelles versions de Teams et Outlook vont ouvrir les liens dans Edge peu importe le navigateur par défaut… Encore une fois les gens qui bossent chez Microsoft montrent qu'ils s'en tapent de l'avis de gens… Et les services qui gèrent les parcs de machines sont énervés parce qu'ils n'auront pas la main…

Maybe you should store passwords in plaintext.

#Dev #Tech #Société

Article intéressant sur comment on doit/peut récompenser le fait de bien travailler. L'article ne donne pas de solution, mais il pointe un vrai problème du doigt : si on travaille bien on n'est pas forcément récompensé. Faire économiser beaucoup d'argent à son entreprise ne nous rapportera rien, corriger une faille de sécurité sans qu'on ne nous le demande ne nous apporte rien, etc. En tant qu'interne faire bien son travaille n'apporte pas forcément grand-chose…

Personnellement j'ai la chance d'être passionné par mon travail, donc ça me paraît impensable de volontairement laisser passer du code pourri ou des failles de sécurités ou même ne pas pointer un truc qui peut améliorer le produit sur lequel je bosse, mais je comprends l'idée dans un sens

Générateur de VCard

#Outil #Tooling #Tech #Divers

Outil en ligne qui permet de générer un fichier .vcf ou un QRCode contenant une vCard, c'est-à-dire une carte de visite virtuelle de sorte à pouvoir donner ses informations sans prise de tête à quelqu'un ou pendant un échange

The JavaScript Ecosystem Is Delightfully Weird

#JavaScript #Frontend #Backend

L'idée de l'article c'est de montrer 3 grandes bizarreries de l'écosystème JS : on crée des langages qui ne se compilent pas mais se transpilent vers JS, le fait qu'on ne code pratiquement plus en JS (au sens ECMAScript standard), le fait que pas mal de framework/outil hack au moins en partie la syntaxe pour créer des nouvelles sémantiques

cdcsgit/lognote

#Tooling #Outil #Debug #Dev #Mobile #Android

Petit outil graphique très simple qui permet d’explorer les logs des applications Android. Ça m’a bien dépanné !

L'UE envoie à Apple un avertissement sévère concernant la charge USB-C sur les nouveaux iPhones, l'entreprise ne pourra pas brider les fonctionnalités des câbles USB-C tiers

#Apple #Écologie #USB-C

Avec le label "MFi" (Made For iPhone), Apple laissait penser qu'il pourrait y avoir une différence entre l'utilisation d'un câble officiel et un câble tiers. L'UE a fait un rappel indiquant que ça n'était pas autorisé par le texte et qu'il fallait accepter de la même façon n'importe quel câble.

Twitter : Thread d'AtaxyaNetwork sur le blocage d'un domaine via DNS menteur

#Telegram #Censure #DNS-menteur #DNS

Telegram sous blocage administratif en France parce qu'il y a une poignée de groupe qui s'échange des contenus pédopornographiques…

Du coup dans la même logique je propose qu'on bloque Facebook, Twitter, Dropbox, Drive, voir Internet complet et même les smartphones…

Edit : à priori c'était une "erreur" : https://sebsauvage.net/links/?_-M41g … Au fond le pire c'est quoi l'idée d'un vrai blocage ou le fait que là ça met en avant le fait que le système de blocage administratif français sans contrôle de juge est hasardeux et n'est validé par personne à priori…

Qu'est-ce que les "tagged literal templates" en JavaScript ?

#JavaScript #TypeScript #Frontend #Backend

Article démontrant l'usage et la création d'un tagged literal templates en JS (mais aussi TS). Globalement c'est une syntaxe permettant de surcharger la syntaxe des strings literal via une fonction

À noter que lit (le framework de webcomponent très léger) fonctionne à base de tagged literal template

Microsoft essaie de connaitre le contenu de vos fichiers zip, même s’ils sont protégés par mot de passe

#Sécurité #Microsoft #Vie-privée

Donc Microsoft se permet de lire le contenu à l'intérieur des fichiers zip stocké sur Sharepoint (énormément utilisé en entreprise) et OneDrive même si c'est protégé par un mot de passe. Ça marche pas à 100% mais rien que le fait qu'ils essaient de brute force les mots de passes est un problème pour moi…

Lancement des Fairbuds, le casque audio de Fairphone

#Écologie #Fairphone #Fairbuds

Fairphone bien connu pour ses smartphones durables et écoresponsable a lancé un casque à 250€ modulaire (11 pièces), avec ANC (réduction de bruit actif), qu’on pourra facilement réparer et améliorer au fil du temps.

Autant je suis fan de l’idée des smartphones Fairphone, mais j’ai pas forcément un très bon retour dessus du fait des performances un peu light à mon goût (même si j’adhère complètement au projet), autant un casque je m’en fous totalement de pas être à la pointe à l’achat (surtout que pour un casque aucun risque niveau sécurité), et je suis très fan de l’idée d’un casque que je pourrais garder vraiment très longtemps

Malheureusement les retours des tests sont pas extraordinaires, en particulier sur le confort et la qualité son… https://www.frandroid.com/marques/fairphone/1688175_test-du-fairbuds-xl-un-casque-eco-concu-a-lacoustique-discutable

Twitter : Thread de BB27000 sur le conflit entre la SNCF et les cigognes

#Divers

”Conflit” entre la SNCF et les cigognes ! Les cigognes font leurs nids sur les poteaux caténaires sauf que ça crée des problèmes pour les trains et les cigognes (risques de chute, d'électrocution, etc.).

Les explications sont intéressantes même si je suis toujours partagé entre “c’est l’habitat naturel des cigognes” et être pragmatique sur le fait qu’on a besoin des trains donc faut trouver un compromis. En tout cas la SNCF a une dérogation pour déplacer les nids de cigogne (un beau bébé de 300-400 kg quand même) pour éviter les problèmes

Netflix : le partage de compte en France est officiellement fini, ce qu'il faut savoir

#Divers #Netflix

Clap de fin pour le côté openbar du partage de compte Netflix. Il faudra souscrire à une option pour pouvoir partager son compte.

Le problème c’est que Netflix n’est plus LA plateforme avec presque tout ce qui se fait sur le marché des films et séries. Netflix comme ses concurrents ne possèdent plus qu’un fragment du catalogue et il faudrait plein d’abonnements pour avoir tout, abonnements dont les prix sont tous en train de grimper (parce que le tarif agressif n’est pas viable sur le long terme).

Clairement il faut s’attendre à un retour massif au piratage dans les mois à venir. Pas par malveillance des utilisateurs ou volonté de nuire aux ayants droits comme on lit parfois mais juste par praticité et coût par rapport aux plateformes VOD ou les supports physiques.

Avec un peu de recul, à priori un compte partagé par 2 personnes ne pose aucun problème, et on doit payer un supplément qu'à partir de 3 personnes

L'Espagne voudrait que l'Europe interdise le chiffrement de bout en bout

#Vie-privée #Sécurité

Projet de Loi au niveau européen qui propose d'interdire lé chiffrement bout en bout en particulier sur les messageries… Mais c'est pour protéger les enfants victimes d'agressions sexuelles ! Grosse blague…

Y'a pas longtemps un gros réseau pédophile a été démantelé sur Facebook et Instagram ! J'en parlais dans la revue de presse d'avril justement ! Aucun chiffrement bout en bout ici pourtant ça faisait des années que ça courrait.

Du coup moi je propose que pour limiter les risques d'agressions sur les enfants, on interdise aux gens de fermer la porte d'entrée de chez eux et au passage une petite caméra à l'entrée pour s'assurer que y'a pas d'enfant qui rentre chez quelqu'un de force ! Et pareil, qu'on interdise de fermer les courriers papiers et les colis !

Twitter : Thread sur le coup du service en ligne Météo France

#Divers #Météo-France #Service-Public

Ok donc c’est 600k€ d’argent public qui sont dépensés chaque jour pour maintenir un service premium utilisé par une seule entreprise : la branche commerciale de Meteo France… Le tout en maintenant un service gratuit pas du tout utilisable pour extrêmement cher. Ça fait quelque temps que je suis Nicolas Baldeck qui parle régulièrement du cas Meteo France et c’est fou comment ça se passe…

Twitter : Thread charge mentale

#Divers

Thread très intéressant sur la charge mentale au sens “poids cognitif” des choses de certaines activités pour certaines personnes.

indélébile

#Divers #Jeux-videos

Un roman interactif (décrit par William comme “une non-fiction interactive”) qui raconte un passage de sa vie, de ses angoisses, de comment il a vécu la chose et comment il l’a géré.
C’est très touchant à lire, je recommande !

Que contient la proposition de loi sur le congé menstruel ?

#Divers #Société

Une proposition de Loi vient de tomber pour l'instauration d'un congé menstruel. Globalement on ne devrait pas vraiment parler de congé, car c'est un arrêt de travail sans carence, via un financement par la sécurité sociale.

Globalement, il suffira de voir avec son médecin traitant, sa sage femme ou sa gynéco pour se voir prescrire une ordonnance confirmant les douleurs menstruelles (pour moi cette étape est absurde, comment le personnel médical peut valider les douleurs de règle ? Mais bon admettons) et délivrer une ordonnance offrant 13 jours d'arrêts à poser librement sur l'année. Mais cette ordonnance n'est pas à donner à son employeur mais à Ameli qui va ensuite nous permettre de générer des arrêts de travail classique pour son employeur à la demande. Pour les personnes ayant besoin de plus de 13 jour/an il sera possible de renouveler plus tôt l'ordonnance qui sera normalement à renouveler chaque année.

Clairement on ne va pas se mentir ce serait déjà un très gros progrès. Maintenant je trouve que la première étape devrait être optionnelle et toutes les personnes menstruées devraient juste avoir 13j/an de base et éventuellement devoir demander plus. Ensuite ce projet ne tient pas compte de cas comme l'endométriose ou le SOPK qui peut vous plier en deux avec des douleurs horribles plusieurs jours d'affiler chaque mois, là ça devrait être à part de ce système pour offrir un peu plus de souplesse. Mais comme j'ai dit plus haut : c'est déjà un progrès donc voyons ce que ça donne !

Valve's "Secret Weapon" - Youtube

#Jeux-videos #Agilité #Dev

Valve est potentiellement l’entreprise la plus “agile” du monde, car ils n’utilisent pas de sprint, de backlog, de kanban, de SAFe, ou quoi que ce soit du genre. Ils ont un cycle de développement très simple : créer un projet avec un bootstrap ultra minimal permettant de lancer le jeu (même moche, même si la première salle est vide et fait 2m² peu importe, on peut le démarrer), le faire tester le vendredi à des gens, sans rien donner comme indication voir ce que la personne fait et prendre des notes. À la fi de la session éventuellement échanger avec les personnes qui ont testé. Prendre ces feedbacks et améliorer le jeu sur la semaine suivante, jusqu'à la session de test du vendredi et ainsi de suite.

C’est comme ça qu’ont été construit les Half-life, les Left4Dead et les Portal. Clairement c’est des jeux excellents ! Pourquoi ? Grace à ce process qui permet de mettre l’utilisateur (ici le joueur) au centre du projet

Twitter : Thread OSINT

#Réseaux-sociaux #Sécurité

Mathis Hammel a découvert un réseau d’entreprise bidon avec plein de salarié tout aussi bidon sur LinkedIn. C’est intéressant de voir comment il a repéré le truc (c’est bateau), et dans le même temps c’est flippant de se dire que des gens ont pu monter un réseau comme ça surtout qu’on ne sait pas encore dans quel but ce réseau a été créé
Il donne le nom des 3 fausses entreprises qu’il a repérées, je vous conseille de jeter un coup d'œil à vos contacts

J'ai infiltré un réseau d'arnaqueurs au SMS - YouTube

#Arnaque #Sécurité #Divers

Vidéo reportage super détaillé de Micode sur un gros réseau d’arnaqueurs SMS. On y voit quasi tout : le niveau d’organisation, les méthodes, comment ça se passe, les différents rôles, etc. Vraiment tout !

C’est ignoble mais le reportage est passionnant ! C’est pas technique globalement, donc on peut le diffuser à tout le monde

JustWatch - The Streaming Guide

#Divers #Outil

Je cherchais un moteur de recherche pour tout le contenu disponible sur les plateformes de VOD (streaming ou location) pour chercher ce qui est dispos d’un coup sur Netflix, Prime, Disney+, etc. sans avoir besoin de faire une recherche sur chaque plateforme. Ça m’a l’air de correspondre à ce que je voulais. Je partage si des fois ça vous intéresse aussi 😉

Transformer les objets connectés en mouchards : la surenchère sécuritaire du gouvernement – La Quadrature du Net

#Société #Sécurité #Vie-privée

Le gouvernement a sereinement proposé d'autoriser la police ou les gendarmes à prendre le contrôle des objets connectés pour pouvoir voir et entendre leurs propriétaires à leur insu…

C'est ultra problématique ce genre de proposition et les dérives vont trop vite arriver… Et l'argument avancé est le risque d'installer un dispositif de surveillance là où des objets connectés déjà en place ont déjà la même capacité, sauf que le gros du temps le piratage des objets connectés par la personne suspecte se fera physiquement car beaucoup plus simple…

2023-03-08 Incident: Infrastructure Connectivity Issue Affecting Multiple Regions | Datadog

#Cloud #Datadog #Tech

Datadog a eu un incident en mars 2023 et l'entreprise a publié un postmortem de ce qu'il s'est passé à la mi-mai. J'ai lu par endroit que c'était lié à SystemD (par exemple ici venant du Twitter de Devuan, une distribution Debian sans SystemD), mais pas du tout !

Globalement ce qu'il s'est passé :

Datadog a fait une erreur sur le canal de mise à jour de sécurité utilisée
Il se trouve que y'a eu un patch de sécurité appliqué sur ce canal au niveau de systemd-networkd ce qui a provoqué sa mise à jour quasiment en même temps sur 5 datacenters (des dizaines de milliers de machine virtuelles)
cette mise à jour à fait redémarrer le service systemd-networkd ce qui a eu pour conséquence de vider une partie des tables réseaux (la partie configurée par CNI (Container Network Interface)), ce qui a rendu inaccessible les VMs
la manière dont était configuré la gestion des machines unhealthy n'a pas généré un reboot de ces dernières ce qui aurait corrigé le problème (car au boot CNI démarre après systemd-networkd)

Donc globalement oui c'est via systemd-networkd que tout a planté mais c'est pas SystemD, c'est que Datadog a mal configuré plusieurs éléments autours qui ont amené à cet état. Est-ce qu'il faut blamer Datadog ? Non je ne pense pas parce qu'en vrai c'était improbable que ça s’aligne comme ça et Datadog c'est avant tout des humains qui font des erreurs. Tant que l'erreur ne se reproduit pas pour moi il n'y a pas de problème. Ce qui est sûr c'est que ça aurait pu tomber sur n'importe quel autre service installé sur les VMs et c'est le hasard qui a fait que c'est tombé sur systemd-networkd

Cortana, c'est fini. Microsoft débranche son assistant vocal.

#Assistant-personnel #Divers #Tech #Microsoft #Windows

Microsoft abandonne Cortana.

En vrai ce n'est pas tellement surprenant, le rapprochement (quasi rachat) avec OpenAI apporte à Microsoft des technologies bien plus puissante que ce que proposait Cortana, sans compter Copilot (développé chez Github qui appartient à Microsoft) qui est intégré un peu partout dans les produits Microsoft.

Configurer la preview d'un site sur les réseaux sociaux

Anthony PENA — Tue, 30 May 2023 06:31:43 +0000

Récemment j'ai eu besoin de configurer la preview d'un site qui s'affichait de manière affreuse sur les réseaux sociaux, que ce soit LinkedIn ou Messenger en passant par Twitter. Je m'attendais à devoir faire énormément de configuration mais en fait c'est très simple à faire ! 🤓

À noter que sans qu'on fasse rien sur nos sites, on aura une preview de celui-ci sur les réseaux sociaux. Malheureusement cette preview ne va pas forcément correspondre à ce qu'on veut, le rendu sera vite très basique, on aura pas un bon référencement non plus, en effet les métadonnées qu'on va ajouter pour les previews ont aussi un impact sur le référencement. On fait une pierre deux coups !

Open Graph Protocol

Là où j'ai été assez surpris c'est par la découverte d'Open Graph Protocol. Ce protocole est un ensemble de balise meta qu'on peut ajouter dans le header de notre site pour déclarativement indiqué ce qu'on veut afficher comme informations sur notre carte de preview : le titre, le type de contenu, l'image à prendre, l'url sur laquelle pointer, la description, etc.

À la base ce système a été créé chez Facebook puis s'est répandu à la concurrence avant d'être confié à l'Open Web Foundation. Maintenant il est largement utilisé par la majorité des acteurs du web donc pas besoin de faire une configuration spécifique pour chaque plateforme sur laquelle on veut contrôler l'affichage de la preview.

Exemple

Je ne vais pas détailler l'ensemble du protocole, mais plutôt vous donner un exemple concret de quoi indiquer pour avoir un rendu propre :

<html>
  <head>
    ...
    <meta property="og:title" content="European Travel Destinations" />
    <meta property="og:type" content="article" />
    <meta
      property="og:image"
      content="http://euro-travel-example.com/thumbnail.jpg"
    />
    <meta
      property="og:url"
      content="http://euro-travel-example.com/index.htm"
    />
    <meta
      property="og:description"
      content="Offering tour packages for individuals or groups."
    />
    <meta property="og:site_name" content="European Travel, Inc." />
    ...
  </head>
  <body>
    ...
  </body>
</html>

‌Si vous remplissez chacun de ces champs vous aurez une preview card propre partout ! Ou presque...

Pour Twitter

Twitter utilise aussi Open Graph Protocol mais pour certaines informations, il utilise ses propres tags… Ce n'est pas bien grave, mais on se retrouve à ajouter à minima trois tags pour avoir une vraie preview propre sur Twitter :

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@nytimes" />
<meta name="twitter:creator" content="@SarahMaslinNir" />

Tester le rendu

Le meilleur moyen de tester le rendu des previews est de directement créer un post sur les différentes plateformes mais certaines vont quand même proposer un outil pour tester nos rendus.

Quelques exemples de site/apps :

Twitter proposait un outil en ligne, mais depuis quelques mois il ne fonctionne plus et on nous redirige vers la preview au moment de créer un tweet
pour Facebook :
- côté Facebook, on peut tester via la preview au moment de la création d’un post, mais on peut aussi utiliser l’outil Sharing Debugger qui permet directement de valider les informations, voir une preview, et avoir des indications sur les informations qui manqueraient
- côté Messenger et Whatsapp, on peut tester via les sites/applications eux-mêmes
côté LinkedIn on peut utiliser la preview au moment de la création de post ou l’outil Post inspector

Dans tous les cas, je vous conseille même si c'est long à faire, de valider si le rendu est bon à la fois sur les versions web desktop et mobile mais aussi sur les applications, car on a parfois des surprises. Par exemple au niveau des images certaines plateformes (comme Whatsapp) n'affichent pas les images si elles dépassent 300Ko !
‌

Conclusion

C'est assez simple de configurer les previews sur les différentes plateformes, par contre il ne faut pas négliger les balises plus classiques comme title et description qui sont totalement standards et sans lesquels vous aurez un très mauvais référencement !

Sources :

Crédit photo : https://pixabay.com/photos/media-social-media-apps-998990/

Angular 16 : le point sur les nouveautés

Anthony PENA — Wed, 24 May 2023 06:54:07 +0000

Angular Signals

Le gros morceau de cette version : les Signals. Je pense que vous n'êtes pas passé à côté, on entend parler que de ça ces derniers mois et ce coup-ci c'est en version finale qu'on voit les Signals débarquer !

En résumé les Signals c'est une nouvelle API proposée par Angular (en s'inspirant de ce qui est fait ailleurs) pour proposer un mécanisme de réactivité fine permettant des re-rendus très fin de l'affichage et simplifiant la syntaxe pour pas mal de cas. L'ajout des Signals va très fortement changer la manière dont on code une application Angular en cassant un peu la dépendance à RxJS (même si RxJS va rester très présent mais peut-être moins visible pour pas mal de cas), et cassant très fortement le besoin de ZoneJS 🎉.

Comme tout le monde je ne vais pas déroger à la règle de vous montrer la syntaxe des Signals en copiant directement l'article officiel :

@Component({
  selector: 'my-app',
  standalone: true,
  template: `
    {{ fullName() }} <button (click)="setName('John')">Click</button>
  `,
})
export class App {
  firstName = signal('Jane');
  lastName = signal('Doe');
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

  constructor() {
    effect(() => console.log('Name changed:', this.fullName()));
  }

  setName(newName: string) {
    this.firstName.set(newName);
  }
}

Il faut bien comprendre une chose : ça ne casse pas le fonctionnement actuel de vos applications, donc ne vous inquiétez pas, vous n'avez pas besoin de ré-écrire vos applications à base de Signals, mais c'est potentiellement le moment de vous poser la question de retoucher les morceaux de code que vous savez manquer un peu de performance pour gratter un peu sans gros efforts 😉

`DestroyRef` & `takeUntilDestroyed`

Cette version introduit la notion de DestroyRef qui permet de s'abonner au destroy d'un composant sans passer par la méthode onDestroy(). C'est utile dans pas mal de cas, en particulier si on veut extraire une logique qu'on répète un peu partout, au hasard se désabonner des flux RxJS quand le composant est détruit ! Ça tombe bien parce que l'équipe Angular propose juste un opérateur qui fait ça en exploitant la DestroyRef du composant depuis lequel on appelle l'opérateur, ce qui permet d'écrire des choses du genre :

data$ = this.mySerivce.getData().pipe(takeUntilDestroyed());

SSR et Hydratation

Si vous n'avez jamais entendu parler de SSR (Server-Side Rendering) avec Angular c'est que vous êtes passé à côté d'Angular Universal qui était une librairie tierse permettant de faire du SSR avec Angular, je dis "était" car le projet devient un projet officiel et va bientôt être intégré comme partie intégrante du framework Angular.

Un gros travail a été effectué en parallèle de cette décision pour améliorer l'expérience utilisateur en ré-écrivant la manière dont est effectué le bootstrap d'une application Angular (sous le capôt uniquement, vous n'avez rien à faire) de sorte à éviter tout clignotement au moment de l'hydration (moment où on passe d'une page statique générée côté serveur à une SPA faisant un rendu côté client).

Plus généralement l'intégration de la partie SSR à Angular fait partie des hautes priorités de l'équipe Angular pour répondre aux attentes de la communauté et avoir une solution clé en main pour Angular (comme on a avec Next/ReMix chez React ou Nuxt chez Vue).

Renouveaux côté tests

Tout n'est pas complètement sec mais Karma est maintenant déprécié (j'étais de mon côté passé à côté de la nouvelle qui date d'avril 2023), il faut donc préparer l'avenir du testing avec Angular. Et pas mal de chose bougent à ce sujet.

Premier point qui fera plaisir à pas mal : le support de Jest comme runner de test est ouvert en expérimental. Comme ce n'est pas un code qui part en prod, je pense que vous pouvez tester sans trop vous poser de question, surtout qu'il s'agit d'une ligne à changer dans votre angular.json. Par contre il ne faut pas oublier que Jest n'exécute pas les tests dans un navigateur donc la représentativité des tests peut être discutable.

Karma ne sera prochainement plus utilisé pour exécuter les tests unitaires et sera remplacé par Web Test Runner pour conserver par défaut des tests unitaires exécutés dans un navigateur. Il sera couplé à Jasmine qui est déjà utilisé conjointement à Karma ce qui devrait permettre une migration avec très peu de modifications (modifications qui seront à priori prises en chargent par ng update comme d'habitude !).

Quelques petits sujets

Passage à TypeScript 5.0

Le passage à TypeScript 5.0 est optionnel c'est plus qu'Angular supporte cette version qui vient casser les décorateurs. Quand je dis "casser" ne vous inquiéter pas ça ne veut pas dire de gros changement mais un passage des décorateurs expérimentaux qu'on a l'habitude d'utiliser (et qui correspondent à une ancienne version de la spécification des décorateurs ECMAScript) à la version officielle des décorateurs. La casse se trouve dans le non support des décorateurs sur les paramètres (exemples : @Optional, @Inject, etc.) qui devront être remplacés par d'autres manière de faire (typiquement les @Inject pourront être remplacés par l'utilisation de la fonction inject()).

Comme ces décorateurs sont maintenant standards, ça permet aussi de réduire le travail de ngcc permettant de gagner un peu en performance de build.

esbuild en developer preview

On est plus proche que jamais de la sortie finale de cette feature très attendue : le support d'esbuild par le CLI. L'intérêt étant de gagner en performance au moment du build. Avec l'activation d'esbuild vient aussi l'utilisation de ViteJS pour ng serve ce qui va aussi améliorer l'expérience développeur.

À noter qu'on est toujours en preview essentiellement à cause de problème avec la gestion d'Angular i18n qui est problématique, donc si vous utilisez Angular i18n je pense que vous pouvez passer votre chemin pour l'instant, vous ne pourrez pas tester.

Conclusion

Comme j'entends pas mal dire ces derniers temps "2023 est l'année d'Angular", et cette verison 16 le prouve. Après une grosse version 15, on retrouve encore des gros ajouts, des grosses promesses pour l'avenir aussi avec des éléments qui arriveront dès la version 17 (en particulier côté SSR).

Sources :

Crédit photo : https://pixabay.com/photos/sweet-sixteen-balloons-sweet-sixteen-701710/

DEV Community: Anthony PENA

Revue de presse - Juillet 2023

Créer une timeline avec uniquement du CSS !

La base : les données

Comment afficher un ensemble de dates ?

Parenthèse balise oublié : <time>

Les points c'est moche…

La ligne verticale

Positionner tout correctement

Quelques améliorations possibles

Utiliser des custom properties

Mettre en avant la date

Mettre en évidence les décennies

Conclusion

REX : Camping des Speakers 2023

J-1 : Le diner speaker

Mes sessions préférées

"Il était une fois un arbre qui parle" par Paul Pinault

"Imager, matérialiser sa pensée" par Virginie Ferey

"On vit déjà dans un monde fédéré !" par Anthony Pena

"JavaScript : une histoire d'amour 💔" par Jordane Grenat

"Esprit de famille, méthodes, rapport à l'argent, ambitions - l'héritage d'une famille d'entrepreneurs depuis 100 ans" par Mathieu Passenaud

"La Pull Request de l'horreur" par Jean-François Greffier

"Récits d'épouvante MLOps : Oseras-tu y faire face ?" par Yulianna Khorolich

Conclusion

Bref, je suis certifié React Level 2

Certification ? Kézako ?

React Developer Level 1 & 2

Parlons prix

Un examen en 3 parties

Partie 1 : QCM

Partie 2 : projet

Partie 3 : entretien

La réponse

Quelques conseils

Conclusion

Être prestataire

Faire de la régie

Faire de l'assistance technique

Préparer son départ en continu

On apporte autre chose

Beaucoup plus de collègues

Mais un entre deux perpétuel…

De l'intérim plus stable…

Le cas du freelance

Conclusion

Revue de presse - Mai 2023

Configurer la preview d'un site sur les réseaux sociaux

Open Graph Protocol

Exemple

Pour Twitter

Tester le rendu

Conclusion

Angular 16 : le point sur les nouveautés

Angular Signals

DestroyRef & takeUntilDestroyed

SSR et Hydratation

Renouveaux côté tests

Quelques petits sujets

Passage à TypeScript 5.0

esbuild en developer preview

Conclusion

Parenthèse balise oublié : `<time>`

`DestroyRef` & `takeUntilDestroyed`