🆕 WA-Tech&DevNews N°14

🆕 WA-Tech&DevNews N°14

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.

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. 

William

Super HĂ©ro du web / CTO Si vous venez dans nos bureaux je vous fais un cafĂ© ☕ et on discute sur Rocket League

Related Posts

[WA Tools] JSON Visio, pour vous aider a visualiser votre json

[WA Tools] JSON Visio, pour vous aider a visualiser votre json

Le Web3 c’est quoi ?

Le Web3 c’est quoi ?

🆕 WA-Tech&DevNews N°21 0 commentaire

🆕 WA-Tech&DevNews N°21

🆕 WA-Tech&DevNews N°20 0 commentaire

🆕 WA-Tech&DevNews N°20

No Comment

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.