Multi dragndrop avec CTRL + click et jQuery UI

 Voici un snippet permettant de faire du multi dragndrop en utilisant CTRL + clic. Ce snippet, inspiré du snippet suivant, se base sur la fonction sortable de jQuery UI.

Cookies vs Web storage

Source : https://www.smashingmagazine.com/2019/08/shopping-cart-html5-web-storage/

JavaScript + Flow

Flow est un outil d'analyse statique de code permettant d'ajouter la notion de vérification de typage au JavaScript, par inférence de type.

Tandis qu'ESLint est porté sur la vérification de règles JavaScript (code style, best-practices), Flow permet de définir et de vérifier les types des données manipulées en JavaScript :

• Avec l'utilisation de commentaires d'annotations
• En ajoutant directement les types comme en TypeScript, puis en rajoutant à Babel le plugin de suppression des types à la compilation en JS

La vidéo suivante résume les objectifs et outils que propose Flow.

Flow peut être utilisé en CLI et / ou en tant que plugin VSCode pour lancer une validation de types.

Ajouter EsLint avec auto-fix sur un projet VueJS avec VSCode

Pour ajouter EsLint avec l'option de fix automatique des erreurs dans des fichiers .vue, sous l'éditeur VSCode, voici les étapes à suivre :

1. Dans le projet VueJS, installer les modules suivants avec un npm install --save-dev :
   

   "eslint"
   "eslint-config-standard"
   "eslint-plugin-import"
   "eslint-plugin-node"
   "eslint-plugin-promise"
   "eslint-plugin-standard"
   "eslint-plugin-vue"
   

2. Toujours dans le projet, créer un fichier .eslintrc avec le contenu suivant :
   

   module.exports = {
       parserOptions: {
           parser: 'babel-eslint',
           sourceType: 'module'
         },
         env: {
           browser: true,
         },
         // Extends default rules with eslint-plugin-vue plugin rules
         // Extend current rules with standard rules : https://github.com/standard/eslint-config-standard
         extends: [
           'plugin:vue/recommended',
           // https://github.com/standard/standard/blob/master/docs/RULES-en.md
           'standard'
         ],
         // Lint *.vue files
         plugins: [
           'vue'
         ],
         rules: {
           // allow async-await
           'generator-star-spacing': 0,
         }
   }
   

   
   On définit comme parser "babel-eslint", on utilise le plugin vue pour rajouter des règles de linting propres à vue, en plus des règles standards.
3. Dans VSCode, télécharger l'extension ESLint, puis mettre à jour l'option validate pour linter les fichiers .vue, dans les settings du plugin ESLint.

Substituer un fichier sur un server par un autre, sous Chrome (Network file forwarding)

Lors d'une phase de debug, notamment en PROD, on souhaite parfois modifier un fichier, par exemple JavaScript pour faire des tests.

Pour cela, il est possible de modifier les fichiers statiques téléchargés par le browser dans le panel "Source" du devtools de la plupart des navigateurs (dans cet article, il s'agira de Chrome).

Cependant, cette solution a des limites :

• Lors d'un rechargement, les modifications locales sont perdues
• Parfois, il est nécessaire de debugger un fichier chargé dès la homepage
• Lorsque l'on modifie des fichiers en local, dans certains cas le devtools peut planter et donc les modifications locales sont perdues

Une solution possible consiste à substituer de manière permanente (et non local) le fichier à modifier du serveur par une autre copie de ce fichier (contenant nos modifications), qui serait délivré par un autre serveur via un "proxy".

Au lieu de mettre en place un proxy, certaines extensions (Chrome) sont disponibles, et permettent de proxifier les requêtes, pour servir des fichiers provenant par exemple un serveur local.
Dans cet article, il s'agit de Ressource-override, qui utilise l'API webRequest, pour intercepter les requêtes HTTP, et replacer leur contenu.

Dans cet article, je souhaite servir substituer un fichier JS d'un site, par une copie que j'héberge sur un serveur local (http-server sous NodeJS).

1) Mise en place du serveur qui contiendra la version modifiée du fichier JS

npm install -g http-server

http-server directoryContainingJSFile -p 1337

2) Mise en place des règles de substitution avec l'extension Ressource-override

Transformer une Google spreadsheet en API

Publier une Google spreadsheet pour le Web permet de la rendre, non seulement accessible en lecture-seule à tout le monde, mais également requêtable via HTTP. Il est alors possible de l'utiliser comme base de données.

Publier pour le Web

Pour publier une Google spreadsheet pour le Web :

Il est alors possible d'obtenir l'ID publique de la spreadsheet dans l'URL : 

Accéder à la spreadsheet au format JSON

Une fois la spreadsheet publiée sur le Web, elle devient accessible également via des URLs spécifiques, qui permettent d'en obtenir les données au format JSON. Il est possible d'avoir par exemple :

• Les informations à propos de la spreadsheet (nom, liste et id des sheets s'il y en a plusieurs) : https://spreadsheets.google.com/feeds/worksheets/SPREADSHEET_ID/public/basic?alt=json

• Le contenu d'une sheet en particulier, une fois l'id récupéré via la requête précédente (default pour la première sheet) : https://spreadsheets.google.com/feeds/list/SPREADSHEET_ID/SHEET_ID/public/values?alt=json

Le JSON renvoyé par Google étant assez verbeux, il est possible d'utiliser une librairie pour récupérer une version plus concise du contenu d'une sheet.

Expressions inline en JS avec les virgules

Parfois lorsque l'on doit consulter du code JS obfusqué, il arrive de tomber sur des expressions obscures.
Dans ce nouvel épisode, nous allons découvrir les "expressions inline, séparées par des virgules".

Voici un exemple :

console.log('test'), console.log('test1') // Affichera 'test', suivi de 'test1'

Un autre exemple :

1, 2, 3 // Affichera 3

En JS, les virgules sont utilisées pour séparer une suite d'expressions, 1, console.log, étant des expressions.

Ce qu'il faut noter c'est que le résultat d'une suite d'expression séparée par des virgules, sera l'expression la plus à droite.

Voici ce que dis la spec JS :

The comma operator evaluates both of its operands (from left to right) and returns the value of the second operand.

Ainsi, le statement suivant est tout à fait valide :

if (console.log('if expr'), 1, false, true) {
    console.log('ok');
}
// Affichera "if expr", suivi de "ok"

En effet, chaque expression sera évaluée dans le if statement et l'expression la plus à droite sera le résultat de la suite d'expressions, soit true, ce qui aura pour effet de valider le if statement.

Credits : https://stackoverflow.com/questions/15485735/use-of-commas-versus-semicolons-in-javascript

Tracking des changements sous VueJS

VueJS, en tant que librairie JS MVVM, intègre le  two-way data-binding. Ainsi, lorsque que le view modèle (que l'on appelera vm) change, la vue liée est mise à jour (re-render).

Dans VueJS, la partie view modèle se situe au niveau de la propriété "data".

new Vue({
    data: {
        message: 'Un message'
    }
});

Pour tracker tout changement sur les propriétés de data, VueJS utilise le mécanisme de getters / setters introduit dans ES5, via Object.defineProperty.

A l'initialisation de l'instance de VueJS, des getters / setters sont crées pour toutes les propriétés contenue dans data.

Dans l'exemple ci-dessus, l'instance de VueJS contient une propriété message. A son initialisation, des getters et setters sont crées pour la propriété message.

Ainsi, toute modification d'un propriété contenue dans data se fait implicitement via son setter associé, qui notifie un watcher chargé de déclencher la mise à jour de la vue. VueJS utilise par ailleurs le virtual DOM afin de modifier uniquement l'élement du DOM impacté.

https://vuejs.org/v2/guide/reactivity.html

L'utilisation des getters / setters pour tracker toute modification de la data implique aussi quelques restrictions. En effet, la création des getter / setter (qui servent d'observateurs) se fait à l'initialisation de l'instance de VueJS. Ainsi, une fois que la vm est instanciée, il n'est plus possible de rajouter des propriétés trackable dans data, sans passer par des méthodes spéciales de la librairie.

C'est pourquoi l'une des bests-practice de VueJS consiste à déclarer toutes les propriété de la vm directement dans la propriété data, en les initialisant à null par exemple, afin de les rendre trackable.

Debugger du JS exécuté avec eval()

Certaines librairies, dont les libraires de chargement comme RequireJS, chargent des scripts JS et les évaluent avec eval(). Le problème avec ce genre de chargement, est qu'il rend plus difficile le debug du JS avec les outils du navigateur. En effet, les points d'arrêt ne peuvent être posés que sur du code situé dans un fichier dont le nom a été défini par l'utilisateur.Cependant, dans le cas d'un code executé par eval, le contenu a été extrait hors de son fichier d'origine, puis est exécuté dans la VM de Chrome. Le plus souvent, le code est situé dans une source dont le nom est généré dynamiquement à chaque chargement, ex : "VM 7799".

"Breakpoints can be set in dynamic JavaScript only if it has a user supplied name." Sources

Cependant, il existe une solution alternative consistant à "dire à Chrome" de donner un nom spécifique et fixe au fichier lorsqu'il sera exécuté dans la VM, en utilisant les sourceURL.

Dans le fichier qui sera exécuté par eval, il faut placer à la fin l'instruction suivante :

//# sourceURL=dynamicScript.js

Cette instruction, destinée au navigateurs, aura pour effet de ne pas générer à chaque chargement, un nom de fichier différent dans la VM, mais d'utiliser celui définit via la sourceUrl.

Créer un certificat SSL self-signed pour un serveur et le valider dans Chrome

Créer un certificat SSL

Pour créer un certificat SSL self-signed, il est possible d'utiliser OpenSSL. Les exe, selon les plateformes, sont disponibles ici.

OpenSSL fournit un outil .exe en ligne de commande permettant de générer une clé privée ainsi que le certificat associé. Tel que décrit sur ce site, voici la procédure pour générer la clé et le certificat:

openssl.exe genrsa -out key.pem 2048
openssl.exe req -new -sha256 -key key.pem -out csr.csr
openssl.exe req -x509 -sha256 -days 365 -key key.pem -in csr.csr -out certificate.pem

Lors du lancement des 2 dernières commandes, une série de questions seront posées. Il est important de fournir le Common name / FQDN (Full Qualified Domain Name), avec l'adresse IP / domain du serveur auquel le certificat sera associé.

Normalement, trois fichiers vont être créés :

• key.pem
• csr.csr
• certificate.pem

Pour un serveur WS sous NodeJS, il sera nécessaire de fournir la key.pem et le certificate.pem afin de créer une connexion sécurisée (WSS / HTTPS).

var tls = require('tls');
var fs = require('fs');

var options = {
   key  : fs.readFileSync('private.key'),
   cert : fs.readFileSync('public.cert')
};

var server = tls.createServer(options, function (res) {
   res.write('Hello World!');
   res.pipe(res);
}).listen(8000);

Le serveur est ensuite accessible avec l'option SSL sur le protocole utilisé :

• WSS://adresseduserveur, pour du WebSocket
• HTTP://adresseduserveur, pour de l'HTTP

Ajouter le certificat en tant Trusted Root CA dans Chrome

Pour ce faire, il suffit de suivre les instructions ci-dessous, détaillées sur ce post StackOverflow, qui consiste à se rendre sur l'adresse du serveur, exporter le certificat SSL pour le réimporter en tant que Trusted Root CA dans Chrome :

Une fois le certificat importé dans Chrome, redémarrer le navigateur puis accéder au serveur voulu, via WSS ou HTTPS.

Transpiler du JS ES6 en ES5 avec Babel dans une tache Gulp

Pour transpiler de l'ES6 vers de l'ES5, Babel est un outil de référence. Dans les process de build automatisés en JS, il est souvent nécessaire de transpiler le JS ES6 vers une version antérieure de JS car les navigateurs n'ont pas encore tous implémentés les nouvelles spécifications.

Prérequis : Avoir NodeJS installé.

Pour installer Gulp : https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

Installer le module Babel

Dans le répertoire du projet pour lequel vous souhaitez configurer Babel, lancez la commande suivante :

npm install --save-dev gulp-babel babel-preset-es2015

Cette commande permet d'installer Gulp-Babel, avec les presets d'ES5 (vers lequel on va vouloir transpiler), en tant que dépendance de dev du projet.

Utiliser Babel dans une tâche

// On importe gulp-babel
var babel = require('gulp-babel');

gulp.task('build', function() {
    return gulp.src('folder_avec_es6_scripts')
        // on transpile vers de l'ES5
        .pipe(babel({
            presets: ['es2015']
        }))
        .on('error', console.error.bind(console))
        .pipe(gulp.dest('folder_de_destination_es5'));
});

Installer ESLinter pour Atom

Installer ESLinter pour Atom

Linter + ESLinter sont des plugins permettant d'effectuer du contrôle statique de qualité de code (dît "Linter" en anglais), au même titre que JSLint.

Pour installer les plugins, il suffit de se rendre dans le gestionnaire de packages, tel que décrit ici ou ici.
Une fois les packages installés et Atom redémarré, le linter est normalement activé et effectue une analyse statique à chaque sauvegarde d'un fichier JavaScript.

Néanmoins, le linter a besoin d'un fichier de configuration nommé ".eslintrc", pour effectuer son analyse. Il est possible de le définir dans un niveau de dossier supérieur à celui du fichier JS à analyser, afin de couvrir plusieurs dossiers. En effet, ESLinter cherchera de manière récursive un fichier ".eslintrc" en remontant petit à petit les dossiers.

Voici une liste de fichiers ".eslintrc" exploitables :

• https://gist.github.com/Corhero/856c9612ce61d22bf100
• https://gist.github.com/dmnsgn/75926316af5360c379da

Installer Sublime EsFormatter

En regardant différents repository JavaScript, notamment sur Github, j'ai pu constater que beaucoup de développeurs utilisent un format de code spécifique dans leur projet. Ceci permet notamment d'améliorer la qualité et la lisibilité du code mais aussi, pour le travail en équipe, d'uniformiser le format des fichiers et d'imposer une structure homogène.

Sur Sublime Text, il existe de nombreux packages permettant de formater le code JavaScript, cependant, je présenterai EsFormatter qui dispose de plus d'option que certains autres plugins.