Material-UI une bibliothèque de composants React

Material-UI est une librairie de composants React qui implémentent les guidelines de Google en terme de Material Design que l’on retrouve dans les interface des applications Google comme Gmail, Google Photos ou encore dans les applications Android. Pre requis Material-UI a été conçu pour être utilisé avec avec un ensemble de Fonts pour : les

Veille Techno 2018 S1

Webpack 4

Webpack 4 (release announcement) & new Plugin system (tuto complet)

  • CommonsChunkPlugin (blog) a été remplacé par optimization.splitChunks
  • une propriété mode (défaut production) permet de setter l’environnement dans le webpack.config.js et webpack peut etre lancé avec les flags -d  et -p
  • 0CJS : aucune configuration n’est nécessaire pour un démarrage rapide (sans entry et output)

Webpack et Visual Studio 2017

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

Linux Networking

Linux dispose depuis longtemps d’outils puissant en ligne de commande pour diagnostiquer les problèmes réseau ou récupérer des informations sur les éléments présent sur le réseau, comme nmap, whois, dig etc.

netstat

Netstat est une commande shell qui affiche les informations sur les connexions réseau locales, les tables de routage et un certain nombre de statistiques:

sudo netstat -tupln

nmap

Port scan

stealthy (furtif) ou SYN scan (known as a stealthy port scan because it does not finish the full TCP handshake) est plus rapide car ne renvois pas de réponse, mais le SYN/ACK de retour de la cible est parfois filtrée par les firewalls… pour scanner les 65.535 ports (juste 1000 par défaut) utiliser -p:

nmap -sS -p- pi

Service scan

Chocolatey et Homebrew Packages Managers pour Windows et MAC OS

Qu’est ce qu’un package manager

Un package manager (gestionnaire de packages) est un outil la plupart du temps en ligne de commande (CLI), qui permet de chercher, télécharger et d’installer des packages simplement (exécutables ou librairies) sur votre système (Linux, Windows ou MAC OS).

Les utilisateurs de Linux Debian (et donc d’Ubuntu mais aussi Raspbian) connaissent depuis bien longtemps la commande apt (Advanced Packaging Tool). Heureusement les utilisateurs de Windows et MAC ont maintenant des outils similaires :

Chocolatey pour Windows (choco pour les intimes)
Voici la page vous permettant de chercher un package chocolatey : https://chocolatey.org/packages
et le référentiel des commandes

Homebrew est l’équivalent de choco pour MAC OS
Homebrew possède un vocabulaire propre et un système de packages (les formulas) reposant sur Git pour la distribution et si vous souhaitez savoir  si un programme est disponible (et trouver des infos sur le package) à travers Homebrew, voici un « index » : brewformulas.org et le référentiel des commandes

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.

JQuery must have tools

Listes et dropdown lists chosen: plugin jQuery permettant de créer des dropdown lists perfectionnées comme des multipleSelect. bootstrap-select: possiblité de créer des dropdown lists avec groupage, champs de saisie, validation etc. Très très complet, voir les nombreux exemples. Dépend de jQuery et Bootstrap. fuzzy: permet de filtrer un ensemble de données en mode Fuzzy Search