PWA & Lighthouse

Ne pas oublier Lighthouse nous rappel quelques point pour être PWA compilent dont: disposer d’un manifest.json et du set de png allant avec pour les icones et splash-screen (outil) tout passer en http2 (le pré-requis étant de déja servir les pages en https), donc configurer le reverse proxy (pour ngninx: listen 443 ssl http2;) doit

Node.js

Ce blog post regroupera les quelques infos de bases à propos de Nodejs et son écosystème. Les instructions sont valables pour des environnements compatibles Linux (dont MacOS et WSL pour Windows 10)

Installation de Node.js

installer NodeJS via NVM of course (suivre la procédure d’install de NVM)) qui est en résumé:

  • récupérer et installer NVM:
    wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

    puis recharger votre .bashrc (à qui viennent d’être ajouté qqs lignes dont le PATH de NVM)

    source ~/.bashrc

WSL: un shell Bash sous Windows 10 et dans VSCode

Lorsqu’on travaille sous Windows, il est souvent nécessaire, pour des raisons de compatibilité avec l’outillage d’un environnement de développement orienté JS (Node, React, Webpack etc.) ou du code récupéré sous Github (souvent dév sous MAC OS qui utilise un shell Linux), nous avons « besoin » d’un système Linux et si possible on aimerai pouvoir l’utiliser dans le terminal intégré de Visual Studio Code (CTRL + ALT + O) .
Pour cela nous allons utiliser Linux Debian fournie par Microsoft dans Windows 10 64 bit dénommée WSL pour Windows Subsystem for Linux (MSDN, aperçu global de l’archi et interop Win/Linux).

Installer WSL Debian

installer Linux (WSL) pour Windows 10 depuis le Microsoft Store (build > 1709) et choisir sa distribution parmi celles-ci (Debian forever ????) :

pour les anciennes build de Windows 10 précédent la Fall Creators Update, suivre le tuto de Korben ou la doc Ubuntu-fr et plus d’infos ici)

Git Server sur un NAS Synology

En tant que développeur ou devops il est primordial de garder une sauvegarde de ses fichiers (sources ou conf) et si possible de garder un historique des modifications (versionning) pour pouvoir s’y référer, c’est là qu’intervient git qui est l’un des systèmes de gestion de version les plus utilisés dans le monde.
Git est le système de gestion que l’on peut installer soi même sur un serveur mais la concurrence est rude chez les SAAS Git pour proposer des hébergement et services associés à Git (Github, Bitbucket, Azure Devops).

Préparation de l’installation

  1. créer un nouvel utilisateur git sur le DSM, ce qui permettra les push coté clients via SSH
  2.  ajouter les clés SSH publiques des clients (ceux qui vont se connecter aux répos) dans ~/.ssh/authorized_keys de ce nouvel utilisateur, pour permettre l’authentification lors des commandes git
  3. créer un dossier où seront stockés les repos par ex: /volume1/git_repos
  4. puis appliquer les permissions adéquats:
    chown git:git-users /volume1/git_repos && chmod g+s /volume1/git_repos

Installation de l’application Git Synology

Sublime Text 3 – Raccourci clavier indispensables

nouveau logo 2017 sublime text 3

Sublime text 3 est devenu en quelques années le nouveau VI des développeurs web Front, bien que supplanté par VSCode en terme de popularité (sorti en 2016).
Il est extrêmement léger, rapide, customisable à souhait, entièrement pilotable par le clavier et la version d’essai ne dispose pas de limites (ce qui ne veut pas dire qu’il ne faut pas acheter la licence 💸).
Je vais vous exposer ici les raccourci claviers que j’utilise le plus et qui me paraissent indispensable pour profiter de la puissance de cet outil.

Nous allons voir les principaux raccourci claviers (indispensables si vous vous souciez de votre productivité) pour la recherche du code et l’éditer.
Comme toujours, la meilleurs façon d’apprendre est de pratiquer, alors à vos claviers 🙂

Require.js

Qu’est ce que c’est ?

Un outil (bibliothèque) qui nous permet en javascript d’écrire du code « modularisé », de gérer les dépendances entre nos différents modules et de les charger de manières asynchrone.

A quoi ca sert ?

Ça sert à ne plus avoir un paquet de balises <script> dans nos fichiers HTML qui référencent des fichiers javascript (tel que jquery.js, bootstrap.js, monscript.js, etc.). Il faut savoir qu’un amas de script peut poser des problèmes d’interférences (notamment lorsque ces scripts définissent des variables dans le scope global) et vous empêcher d’utiliser les fonctionnalités souhaitées de ces librairies qui sont pourtant bien incluses là ou le voulez dans vos scripts.

Pour cela il faut découper notre code javascript en modules (l’utilisation d’autres bibliothèque tel que Backbone.js facilite cela), qui sont simplem

ent des parties isolables de notre code JS.

Sublime Text

modifier la couleur de surlignage Tools > Command Palette > package control (ou CTRL + SHIFT + P puis pckctl ) PackageResourceViewer: Open Resource Entrer le nom du thème à modifier (ex: Boxy Theme ) Schemes > nom du thème surlignage : <key>selection</key> <string>#FFFF33</string> Ajouter une icone dans le contexte menu (clique droit) de Windows Regedit: