
đ 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.
- PHP
- JavaScript
- Python
- Bases de données
- CMS
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.
No Comment