Introduction

1. Action d’introduire, de faire entrer (qqn). 2. Action de faire adopter (une mode, un produit…)

Hello World. Voilà. Vous pouvez lire la suite.

Cette news c’est de la bonne. 

(☞ﾟヮﾟ)☞ Win + ; ☜(ﾟヮﾟ☜)

Aidez-nous à l’améliorer en contribuant ou en proposant des idées d’articles ou de sujets !

Le coin des mises à jour

On compile pour vous l’actu de la semaine (et un peu beaucoup plus) de vos langages et frameworks.

• PHP
  • Symfony 4.4.20 et 5.2.4
  • End of life Laravel 7 et Laravel 8.30
• JavaScript
  • Vite v2, Vuex 5 RFC, Vuetify pour Vue 3 alpha
  • NestJS 7.6.13
  • TypeScript 4.2
  • Mises à jour de sécurité pour Node.js
• Python
  • Python 3.9.2 et 3.8.8
  • Django 3.1.7, 3.0.13 et 2.2.19, et Django 3.2 Beta 1
• Bases de données
  • MariaDB 10.5.9, 10.4.18, 10.3.28, 10.2.37
• CMS
  • WordPress 5.6.2
  • Joomla 3.9.25

La feature CSS de la semaine : @property

Et celle-là n’est que sous Chrome, pour le moment !

Je vous propose cette semaine d’explorer la nouvelle fonctionnalité à paraître bientôt dans vos navigateurs aux moteurs de rendus en retard, Firefox et Safari : @property, une fonctionnalité qui apporte un peu de TypeScript (enfin, de typage) à vos feuilles de style.

Un œil sur le futur de JS : ES2021

Allons explorer les proposals !

Peut-être avez-vous un jour bataillé avec un langage dans lequel vous vous êtes dit : “mais c’est pas vrai ! Langage de #$£+^ ! Tu peux pas faire ça ! Mon-autre-langage-préféré-trop-bien le fait, lui !” (bon, JS est le seul à avoir un comportement rigolo avec [] + {} ; {} + [] et ainsi de suite).

Il vous est tout à fait possible de jeter un œil dans les propositions pour le futur de vos langages favoris. Par exemple, pour JavaScript, cela se fait au travers des proposals d’ECMAScript. Je vous propose d’en découvrir une (choisie au hasard) : les assignations logiques, prêtes à être intégrées dans ES2021. Sémantiquement, cela ressemble à l’opérateur de coalescence, mais agit davantage comme un court-circuit pour vos valeurs par défaut.

Déjà disponible chez Chrome, Firefox, Edge et Safari !

La minute sécuritaire

Parce que les bots chinois et ukrainiens écument le net et que c’est pas terrible, quand même.

Zero-day dans Chrome. Mettez-le à jour si vous l’utilisez.

Vous connaissez l’adage : “ne jamais faire confiance aux données saisies par l’utilisateur”. Oui, mais voilà : vous vous êtes peut-être dit que vous deviez absolument sécuriser vos sorties, votre HTML est exempt de tout JavaScript. Au pire, l’utilisateur pourra utiliser quelques balises CSS personnalisées et puis c’est tout. Rien de bien méch-

Eh, que viens-je de dire là ? Ne jamais, jamais, JAMAIS faire confiance aux données dont vous ne pouvez assurer la provenance. Il est en effet possible de dérober des données personnelles à partir du CSS, via une technique nommée CSS Exfil(tration). Redoutable, insensible aux “noscripts”, elle se sert de la même astuce que tous ces courriels mercantiles avec le pixel blanc, pour savoir si vous avez lu vos emails.

Petit rappel sur les bonnes pratiques de sécurité : utilisez un gestionnaire de mots de passe comme Keepass. Utilisez des mots de passe longs, et ne lésinez pas sur les caractères qui sortent de la table ASCII (évitez les suites évidentes et mots connus, pour éviter les attaques par dictionnaire). Vérifiez de temps en temps que vos informations ne fuitent pas sur Internet ; Numérama a un bon article faisant écho à la faille de sécurité qui a touché plusieurs grands prestataires (et la fuite massive qui a suivi…), avec les conseils d’usage pour sécuriser ses comptes (2FA, entropie des mots de passe, etc.).

Qui veut des bibliothèques JavaScript ?

Saviez-vous que NaN === NaN retourne “false” ? Ah ! Le JavaScript !

S’il y a bien quelque chose qui fait tout le charme de JavaScript, c’est sa capacité à nous fournir une trouzaine de bibliothèques qui font la même chose. En moins ou en mieux, en sécurisé ou non. Bref ! Cette semaine, je vous propose de découvrir Svelte, une “alternative” à React (ou si vous aimez les choses légères, mais à la React, voici Preact, HyperApp, Mithril.js, ou pourquoi pas Polymer ?). Il n’y a pas que Vue, React, Angular, Ember.js.

Quelques petites pépites très intéressantes pour accroître votre productivité ou la qualité de votre code : recours aux variables immuables via Immutable, génération d’identifiants uniques sécurisés (cryptographiquement) et url-friendly avec nanoid.

Changeons de langage : Rust

Parce qu’écrire un site en Fortran, c’est inutile, mais ça fonctionne quand même.

Vous savez, parfois, changer de langage peut être amusant. Une espèce de joie que d’autres que vous ne pourraient comprendre sur l’instant. L’autre fois, en plein hiver, j’utilisais deux build (Angular et Java) pour me réchauffer, alors déjà sous la couette. Me vint alors la réflexion : “suis-je obligé de monopoliser les ressources d’une centrale nucléaire pour faire un site” ? Non. Je refusais cette perspective. Je me suis donc engagé dans une quête : trouver quelque chose de léger pour permettre à un utilisateur de farm du Bitcoin via une jolie interface faite en SVG. Et si possible, sans que ce soit trop long, parce que faire un article de vingt-trois pages pour afficher un Hello World, hein, bon.

Commençons par regarder le classement des frameworks, en termes de performances, via le benchmark de TechEmpower. Drogon est cool, et nous le couvrirons sûrement plus tard. Parlons un peu de Rust. Rust est un langage généraliste, basé sur un ensemble de bonnes pratiques et techniques éprouvées (l’immutabilité par défaut, le borrowing, le pattern matching, mieux gérer la concurrence, etc.). Mieux : c’est vous-mêmes qui devez gérer la mémoire ; toutefois, Rust vous offre un ensemble d’outils qui permettent d’éviter les fuites et autres erreurs courantes. L’installateur est également livré avec son gestionnaire de paquets Cargo doté de plusieurs outils très pratiques ancrés dans l’écosystème Rust, comme la génération de documentation.

Prenons donc Actix, qui est le premier qui me vient dans la liste. Ce projet a eu une histoire mouvementée mais se classe aujourd’hui comme un framework simple et efficace pour créer des projets ayant besoin de vitesse. Et la mise en place, alors ? Je vais ici suivre la procédure de la documentation. 

J’ai déjà rustup (l’outil en CLI de Rust) d’installé, je peux vérifier qu’il soit à jour sur le canal stable. En effet, il existe plusieurs canaux de publication, dont nightly, que certains paquets pourront demander. Allons-y, d’abord je m’assure d’être sur le canal stable :

rustup default stable

Puis je mets à jour

rustup update stable

Parfait. Je peux me mettre dans mon dossier à grands coups de cd, puis je crée un nouveau projet avec cargo :

cargo new hello-world

Mon fichier de dépendances Cargo.toml est automatiquement créé, ainsi qu’un point d’entrée dans src/main.rs. Parfait ! Je peux donc ajouter la dépendance à Actix dans le Cargo.toml :

[dependencies] actix-web = « 3 »

Quelques lignes de code plus tard :

use actix_web::{get, App, HttpResponse, HttpServer, Responder}; #[get(« / »)] async fn hello() -> impl Responder {     HttpResponse::Ok().body(« Hello world! ») } #[actix_web::main] async fn main() -> std::io::Result<()> { HttpServer::new(|| {     App::new()         .service(hello) }) .bind(« 127.0.0.1:8080 »)? .run() .await }

use actix_web est la commande qui me permet d’importer mes paquets. Ici, nous choisissons de n’importer que certaines composantes. Les plus connaisseurs auront reconnu un opérateur de résolution de portée :: qui fait référence aux Path, concept proche des espaces de nom.

Rust est un langage typé statiquement : on doit donc, bien souvent, préciser nos types. Même si ici, c’est un cas particulier : impl Responder indique que la fonction doit retourner une structure qui doit contenir le trait Responder. En Rust, c’est souvent une affaire de traits. Il n’y a pas de return, car celui-ci est implicite lorsque l’on ne met pas de point-virgule au dernier élément d’une fonction. Le double pipe || indique la présence d’une lambda (ou closure…) sans arguments. Enfin, le marqueur d’erreur ? est un raccourci pour la gestion des erreurs. Tout cela peut paraître abscon, mais ça ne l’est pas vraiment. Deux (très !) bonnes références pour apprendre Rust : The Book et Rust by Example. Rust est un langage qui reprend beaucoup à d’autres, et peut-être aurez-vous remarqué des emprunts à des langages que vous connaissez (async/await, les attributs façon C#, etc.).

Compilons et démarrons notre serveur ! Il me suffit de taper la commande :

cargo run

Et mon serveur tourne ! Je n’ai plus qu’à aller sur 127.0.0.1:8080 pour voir qu’il me répond, qu’il est vivant. Bien sûr, Actix n’est pas le seul framework Rust pour le web et loin de là : il existe Rocket, et pléthore d’autres !

Pour terminer, soulignons que Rust a été créé par Mozilla. De ce fait, il est intimement lié au monde du web. Il existe un grand nombre de projets en ce sens : un ORM efficace et puissant pour des bases SQL : Rbatis ; une alternative à Électron légère et non énergivore : Tauri ; le “successeur” de Node.js : Deno, un support pour la compilation en WebAssembly (exemple de projet) ; le nouveau moteur de rendu expérimental conçu par Mozilla : Servo ; une surcouche prête à l’emploi pour l’API Vulkan : gfx-rs ; un framework pour créer des jeux (structure Entity-Component-System) : Amethyst. Tout cela est bien sûr non exhaustif, tant Rust s’enrichit de semaines en semaines.

Adieu, Twitter Bootstrap

Bootstrap en 2021, c’est un peu comme importer jQuery.

Et si je vous proposais de vous débarrasser de twitter bootstrap ? Souvent, je l’importe sur les projets en mode “scss”, c’est-à-dire que je prend la version non compilée de Bootstrap pour uniquement me servir de la grille et des variables, par exemple.

Aujourd’hui je vous présente comment devenir indépendant de Bootstrap tout en continuant à coder avec ses grilles. Quand le designer fabrique une maquette avec, c’est bien pratique pour gagner du temps !

Tout d’abord, il faut définir la taille de nos containers :

$container-widths: ( m: 360px, // mobile ml: 480px, // mobile large t: 720px, // tablet tl: 960px, // tablet large d: 1200px, // desktop);

Précisons ensuite la taille de nos breakpoints. Ce sont les dimensions cibles pour lesquelles nous allons changer de grille.

$grid-breakpoints: ( reset: 0, m: 424px, ml: 544px, t: 784px, tl: 1024px, d: 1300px,);

Ajoutons maintenant le nombre de colonnes ainsi que l’espace entre elles. Les deux formats les plus répondus sont  12 et 24 colonnes. 

$columns: 12;$column-gap: 2rem;

On va maintenant utiliser la puissance des mixin scss pour se faire une fonction permettant de générer les medias queries qui correspondent à chaque breakpoint.

@mixin device-up($name, $breakpoints: $grid-breakpoints) { $min: map-get($breakpoints, $name); @if if(0 != $min, $min, null) {   @media (min-width: $min) {     @content;   } } @else {   @content; }}

Lorsque nous faisons du CSS avec des grilles, nous avons besoin de deux groupes de règles : une liste de règle dans un container et une liste en dehors pour avoir notre grille sur des affichages fluides, par exemple.

Il suffit donc de générer un container et d’utiliser notre fonction device-up pour générer les média queries enfants du container :

.container { width: 100%; padding-right: ($column-gap / 2); padding-left: ($column-gap / 2); margin-right: auto; margin-left: auto; display: flex;  @each $breakpoint, $width in $container-widths {   @include device-up($breakpoint, $grid-breakpoints) {     max-width: $width;   } }}

Enchaînons avec la création d’une classe pour nos colonnes avec le code générique qui correspond à une colonne : display, width et margin !

.col { flex-wrap: wrap; margin-right: ($column-gap / -2); margin-left: ($column-gap / -2);}

Il nous reste le plus compliqué ! Maintenant que nous avons nos colonnes, notre container et nos breakpoints, nous allons écrire une grosse mixin pour construire notre grille.
Pour ce faire, nous avons besoin de plusieurs paramètres : le nombre de colonnes, l’espace entre les colonnes et les breakpoints.

@mixin build-columns($columns: $columns, $gap: $column-gap, $breakpoints: $grid-breakpoints) { %defaults { // % utilisé pour créer un template réutilisable   position: relative;   width: 100%;   min-height: 1px;   padding-right: ($gap / 2);   padding-left: ($gap / 2); }  @each $breakpoint in map-keys($breakpoints) {   $min: map-get($breakpoints, $breakpoint);   $label: if(if(0 != $min, $min, null), $breakpoint, ‘all’);   // Extend Defaults   .#{$label},   .#{$label}-auto {     @extend %defaults;   }   @for $i from 1 through $columns {     .#{$label}-#{$i} {       @extend %defaults;     }   }   @for $i from 1 through $columns {     .#{$label}-#{$i} {       flex: 0 0 calc(100% * #{$i} / #{$columns});       max-width: calc(100% * #{$i} / #{$columns});       @if not ($label == « all » and $i == 0) {         &–offset {           $num: $i / $columns;           margin-left: if($num == 0, 0, calc(100% * #{$i} / #{$columns}));         }       }     }   }  }}@include build-columns();

Bon, tout ça c’est bien joli, mais est-ce que cela s’utilise ?

<div class= »container »> <div class= »col »></div> <div class= »col »></div></div> <!–Toute la largeur en mobile–> <div class= »container »> <div class= »col m-12″></div> <div class= »col m-12″></div></div>

Y a pas que la tech’ dans la vie

Y a le reste aussi…

Linkedin. Une jungle intraitable, avec ses speakers, ses détracteurs 🚜, et son audience. Difficile de peser dans le game tellement il y a d’interactions. On y vend ses services, on y recrute, on y échange des informations intéressantes (ou pas), on y demande l’avis de ses membres… Les possibilités y sont infinies selon nos propres intérêts.

Alors, pour dompter cette jungle de contenu intéressant (ou pas) et surfer sur la vague du like et du reach, je vous propose de consulter ces conseils. Ils vous serviront peut être pour vous lancer, ou pour perfectionner votre approche.

Aussi, je vous invite à suivre la page de Web-atrio, cela nous aide à avoir plus de visibilité sur ce réseau. A quoi ça sert vraiment ? A recruter, à décrocher des projets, à faire démarrer des missions… Comme je l’ai dit, les possibilités sont infinies.