PWA & Service Worker

Les PWA sont des types d’applications web, bénéficiant essentiellement aux mobiles et qui améliorent l’expérience utilisateur en proposant un chargement/navigation plus rapide, la possibilité de naviguer off-line ou encore d’installer l’application web sur son mobile. Une partie de ces bénéfices provient de l’usage d’un service worker, process détaché du main thread (de la famille des

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:

WSL: un shell Bash sous Windows 10

Lorsqu’on travaille sous Windows, il nous faut parfois la possibilité d’accéder à un environnement Linux.

Historiquement on utilisait (et on utilises toujours pour des raisons de perf) des ordinateur en dual boot (Bootcamp pour OSX) ou des machines virtuelles et depuis peu des conteneur Docker.

Linux est parfois encore « nécessaire » pour des raisons de compatibilité avec l’outillage Javascript (Node, React, Webpack etc.), ou automatiser des taches avec des scripts shell par exemple.

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).

Pour les développeurs qui utilisent VSCode, ce Linux est également disponible dans le terminal intégré (CTRL + ALT + O).

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: