mon titre de page

Alsacreations.com - Actualités

Passer de node-sass à dart sass ()
Si vous utilisez régulièrement Sass dans vos projets en tant que pré-processeur CSS, pour tous les avantages qu'il apporte, vous devez certainement utiliser l'une des deux implémentations : Dart-Sass ou Node-Sass, ce dernier étant en réalité une interface pour LibSass. Ces outils sont utilisables en ligne de commande ou intégrés aux environnements de développement dans le processus de compilation, par exemple dans weboack, pour Vue, Nuxt, React, etc. Or, le module node-sass (libSass) est désormais obsolète bien qu'il semble plus performant selon Quick comparison between sass and node-sass par Peter Bengtsson et Node-Sass or Dart-Sass : The CSS Preprocessor Dilemma par Ali Bahraminezhad. Il y a plusieurs façons de migrer. Même si la documentation vous indique qu'il suffit de remplacer node-sass par sass dans package.json car dart-sass se veut compatible... cela peut être bien plus subtil. Voici quelques explications complémentaires, simplifiées, car évidemment cela dépend de chaque projet et de la version de Node utilisée (12+). ⚠️ Faites une sauvegarde avant toute modification en profondeur. Si votre projet est versionné sur git, c'est encore mieux. Identifier la situation Consultez le fichier package.json à la racine du projet. S'il comporte "node-sass": "^5.0.0" ou autre numéro de version, dans les dependencies (dépendances) c'est que vous utilisez bien, pour le moment, node-sass. Désinstaller/installer Vous pouvez supprimer manuellement la ligne concernée et le dossier correspondant dans node_modules, cependant le plus propre sera de passer par les commandes npm : npm uninstall --save sass npm install --save sass À partir de là, vous pouvez déjà tenter de relancer la compilation, et avec un peu de chance vous n'aurez pas besoin de faire autre chose, par exemple npm run dev ou npm run serve selon votre framework. Si des avertissements et erreurs apparaissent, cela signifie que vous utilisez probablement des syntaxes Sass qui doivent être adaptées au nouveau module. Adapter la syntaxe Nous prendrons ici un seul exemple car il sera le plus fréquent : la division en CSS. D'autres évolutions peuvent être faites par la suite, optionnelles ou nécessaires si bloquantes. Dans les fichiers, le caractère / est utilisé à la fois comme séparateur (dans Grid, rgb, hsl) et comme opérateur de division. C'est une difficulté pour Sass qui doit en comprendre le sens selon le contexte. L'usage de math.div() pour poser une division devient alors nécessaire. Exemple : /* node-sass */ line-height: (19 / 14); height: (1rem / 16); /* dart-sass */ line-height: math.div(19, 14); height: math.div(1rem, 16); Il existe un script de migration automatique sass-migrator qui peut faire le travail pour vous, mais il ne fonctionnera que sur les fichiers *.scss, pas les fichiers .vue qui associent différentes syntaxes (et il ne semble pas prévu de faire évoluer l'outil pour les supporter). Vous devez l'installer pour y avoir accès en ligne de commande et spécifier le fichier à analyser comme point d'entrée, par exemple : npm install -g sass-migrator sass-migrator division --migrate-deps assets/css/main.scss L'option --migrate-deps indique que l'outil passe aussi sur tous les fichiers importés à l'aide de règles @use, @import... La transformation menée ici est la division, il existe aussi module et namespace, reportez-vous à la documentation de Migrator. ⚠️ La règle @import est aussi destinée à devenir obsolète. Sass:math Il est possible que selon votre organisation de fichiers, la fonction math.div nécessite l'ajout de l'instruction @use "sass:math"; en début de fichier puisqu'elle dépend du module math. Or, le compilateur pourra vous renvoyer des erreurs si vos fichiers sont assemblés depuis de multiples dossiers ou composants car il ne souhaite cette instruction qu'en début de fichier. La solution est alors d'indiquer à webpack d'injecter cette ligne en préfixe via son loader dédié à Scss, dans la section build (fichier webpack.config.js, vue.config.js, nuxt.config.js, etc) : build: { /* Autres instructions existantes... */ loaders: { scss: { additionalData: '@use "sass:math";' } } Et voilà le travail ! Publié par Alsacreations.com
>> Lire la suite

L'enfer numérique - Voyage au bout d'un like ()
Quelles sont les conséquences physiques de la dématérialisation ? Guillaume Pitron analyse l'impact que peut avoir le numérique dans nos vies et notamment dans notre environnement. L'enquête porte à la fois sur les ressources naturelles nécessaires à la construction des équipements, la consommation énergétique pour faire tourner l'ensemble, le bilan carbone et les métaux rares, les conséquences du Cloud et le lobby des grandes entreprises de la Silicon Valley, la géopolitique d'Internet en somme. Ainsi on découvre pourquoi Facebook s'intéresse au grand nord, pourquoi choisir la bonne couleur de bleu est si important pour Microsoft, et qu'il faut des milliers de tonnes d'eau chaque jour pour graver les puces de nos smartphones. L'ouvrage comporte de nombreuses sources, certaines sont un peu discutables et sensationnalistes (quant à l'énergie nécessaire pour accomplir telle ou telle action), d'autres comparaisons hasardeuses (nombre de lignes de code pour concevoir une application mobile ou lancer une navette spatiale) mais l'ensemble se tient même si on sent un tendance à noircir un peu le tableau : si Internet ne se résume pas à TikTok et à des usages ludiques, il est indéniable que le bilan écologique de nos habitudes numériques est loin d'être négligeable, d'autant plus qu'elles vont s'intensifier avec le temps. C'est un livre de référence pour mesurer les liens tentaculaires qui unissent le monde physique, réel, autour de nos données et interactions virtuelles. Publié par Alsacreations.com
>> Lire la suite