Commencez à Programmer En Javascript ES6 (ES2015) Doucement

Si vous faites du Web, vous avez sans doute entendu abondamment parler de Ecmascript 6.

C'est une norme qui décrit la syntaxe du langage Javascript (pour simplifier)

Voyons les innovations syntaxiques que vous devez absolument connaitre car tous les navigateurs les utilisent aujourd'hui.

Déclaration de variable avec var (méthode historique)

Jusqu'à présent vous ne déclariez les variables qu'avec var.

Or il cause beaucoup de poblèmes : son scope est global à l'objet window.

 

var prenom  = 'Yvon'

 

On dit que son scope (sa portée) est globale. Si vous venez du monde du php, vous avez dû voir qu'on peut déclarer une variable comme globale avec le mot clé global.

Pour des raisons de bonne pratique de sécurité, il faut éviter de déclarer des variables globales.

Revenons au Javascript, var déclare une variable de porté globale, c'est à dire qu'elle peut être utilisée partout.

Jusqu'à récemment avant ES6, nous ne pouvions déclarer de variable de porté de type bloc. Un bloc est tout ce qui est compris dans une parie d'accolade.

Une variable de type bloc, de portée bloc, n'existe que dans la paire d'accolade, en dehors on ne la connait pas.

Historiquement var a été introduit pou faciliter la programmation, afin que les programmeurs novices puissent utiliser rapidement Javascript. Mais au fil du temps cela s'est avéré être un mauvais choix. Aujourd'hui (seulement) les concepteur du langage on décidé d'introduire deux nouvelles façons de déclarer une variable. Ces deux nouvelles façons const et let déclarent des variables de porté de bloc.

 

Déclaration de variable avec const

A la différence de PHP par exemple, const ne déclare pas une constante ! La signification de const est que le binding est constant, invariable, vous ne pouvez pas réassigner la variable à un pointeur différent, mais vous pouvez modifier sa valeur. En Javascript, la notion de constante existe dans le cadre de la programmation fonctionnelle via des librairie comme immutable.js .

const prenom = 'Yvon'

Pour vous montrer que const a sa valeur qui peut changer :

const prenom = 'Yvon'
prenom = 'Julien'
console.log(prenom)  // Erreur Uncaught TypeError: Assignment to constant variable.

Le code ci-dessus montre que la valeur de la primitive n'est pas modifiable. Par contre, si on déclare un objet litéral :

const eleve = { 
prenom :'Yvon',
nom : 'Huynh'}
eleve.prenom = 'Julien'

console.log(eleve.prenom)  //  Julien

 

 On peut modifier une propriété d'un objet litéral. eleve est bindée par référence à cet objet. Mais si on essai de réaffecter par référence :

const eleve = {
	prenom : 'yvon',
	nom : 'huynh'
}

eleve = {
	prenom : 'toto'
}

console.log(eleve.prenom) // Uncaught TypeError: Assignment to constant variable.

Une autre particularité de const est que vous devez initialiser dè sla déclaration de la variable, sinon vous avez une erreur.

const pays; //Uncaught SyntaxError: Missing initializer in const declaration

Block scope avec const

Enfin regardons l'aspect le plus important concernant const, il est block scoped, c'est à dire qu'en dehors (à l'extérieur) des accolades où la variable a été définie, elle n'existe pas.

function saluer(ami){
const pays = 'France'
	if(pays === 'France'){
		const greet  = ' Monsieur'
		console.log('Bienvenue en ' + pays + greet)
	}
    console.log('A une autre fois en ' + pays)	
    console.log('Au revoir ' + greet)
    
}
saluer('Yvon') // imprime Bienvenue en France Monsieur,A une autre fois en France, mais affiche Uncaught ReferenceError: greet is not defined

 Alors que pays reste en valable, greet n'est plus connue en dehors des accolades où greet a été définie.

Un exemple encore plus flagrant on va créer deux variables portant le même nom,mais avec des valeurs différentes :

const ville = 'Paris'
function saluer(nom){
	const ville = 'Nantes'
	console.log('bienvenue à ' + ville)
}


saluer('Yvon')  //bienvenue à Nantes
console.log('Euh non on est à ' + ville) //Euh non on est à Paris

Nantes ne peut exister en dehors des accolades de la fonction.

 

Peut on rendre une variable const vraiment immuable?

Même si dans votre vie vous aurez probablement peu l'opportunitéde rendre un objet immuable, il existe une façon de rendre immuable une variable déclarée avec const.

const eleve = Object.freeze(
	{prenom : 'yvon',
	adresse : { rue : ' De gaulle',
                ville : 'Nantes',
                codepostal : 44000}
               })

eleve.prenom ='Julien'

console.log(eleve.prenom) // yvon

Vous remarquez que la propriété prenom est inchangée. Si vous utilisez "use strict"; vous aurez une erreur Uncaught TypeError: Cannot assign to read only property 'prenom' of object '#<Object>'.

Object.freeze est 'shallow' comme on dit en anglais, cela veut dire que vous pouvez quand même altérer les propriétés des objets imbriquée.

"use strict";	
const eleve = Object.freeze(
	{prenom : 'yvon',
	adresse : { rue : ' De gaulle',
                ville : 'Nantes',
                codepostal : 44000}
               })

eleve.adresse.codepostal = 44100
console.log(eleve.adresse.codepostal)  // 44100

Le code ci-dessus est tout à fait valide.

A quoi ça sert const en Javascript?

On dit que les variables déclarées avec const sont "block scoped". Un bloc c'est ce qui est entre accolade dans la définition d'une fonction. C'est pour pallier au défaut de var (qui est défini dans les accolades d'une fonction, on dit que var est function scoped), qu'on a introduit const afin de mieux structurer son code et d'éviter des collisions.

 

Qu'est ce que la Temporal Dead Zone?

 Lorsqu'un code javascrip est exécuté, une variable ne peut être settée ou gettée tant que l'exécution n'a pas atteint la ligne de code où la variable a été définie.

function saluer(name){ // début de la fonction

	if(name === 'yvon'){ //début du block
		var ville = 'Paris'
		console.log('Pays = ' + pays +  ' Ville destination = ' + ville)

		var pays = 'France'
	}
}

saluer('yvon') // Pays = undefined Ville destination = Paris

On voit que la variable pays étant définie après le console.log, il est à undefined. Par contre que se passe-t-il si on a const à la place de var ?

function saluer(name){ // début de la fonction

	if(name === 'yvon'){ //début du block
		var ville = 'Paris'
		console.log('Pays = ' + pays +  ' Ville destination = ' + ville)
		const pays = 'France'
	}
}

saluer('yvon') //Uncaught ReferenceError: pays is not defined

 Vous avez une erreur (un avertissement) comme quoi votre variable n'est pas définie. Au moment ou le console.log s'exécute, pays n'est pas encore définie, elle n'a pas de valeur attribuée. L'utilité de la Temporal Dead Zone (TDZ) est de vous permettre de coder plus proprement, en lançant des avertissements.

2017-02-16 17:02:55 0 Commentaires

Résoudre Les Crash Mysql

J'ai récemment eu quelques souci sur une base mysql sous Linux, le disque étant plein, il y a eu quelques tables qui ont crashé.

Le résultat est un site web qui ne marche pas.

Premier réflexe : essayer de redémarrer Mysql

Seconde chose à faire quelquesoit le résultat de la première étape : regarder les logs mysql ! En génral c'est sauvé dans /var/log/

 

J'ai eu donc deux tables qui ont crashé avec le message suivant dans les logs :

Mysql : is marked as crashed and should be repaired

170127  8:58:26 [ERROR] /usr/libexec/mysqld: Table './mydatabase/user_sessions' is marked as crashed and should be repaired

Pourquoi? plus loin en arrière, j'ai le message très parlant :

170126 21:10:08 [Warning] Retry in 60 secs. Message reprinted in 600 secs
170126 21:20:08 [Warning] Disk is full writing './mydatabase/archives_factures.MYD' (Errcode: 28). Waiting for someone to free space... (Expect up to 60 secs delay for server to continue after freeing disk space)

 

C'est bien un problème d'espace disque qui est à l'origine de la panne !

Pour s'en convaincre, on peut utiliser les comande Linux df et du pour diagnostiquer l'espace restant.

 

Réparer les tables Mysql crashées

Vous pouvez le faire en ligne de commande ou sous phpmyadmin, mais je vous conseille de le faire en ligne de commande dans le shell, parce que c'est plus performant et plus sûr.

Une fois connecté sous Mysql, la commande à faire est :

$ repair table table_defectueuse

Voilà c'est à peu près ce qu'i faut faire.

Mais il arrive que certaines tables soient plus endommagée que çà, et que la commande ci-dessus ne suffisent pas, on a le message :

 Can't find file: 'table_defectueuse' (errno: 2)

Pour connaitre la signification de l'erreur, faire la commande shell suivante :

$ perror 2

$ OS error code   2:  No such file or directory

 

 

 

 

2017-01-27 09:01:40 0 Commentaires

Magento Api: Invalid Webservice Adapter Specified

Que faire quand vous avez ce message lorsque vous désirez tester une API SOAP Magento

en local?

Lorsque vous tentez d'accéder à cette url dans votre navigateur :

http://www.magentostore.fr/api/v2_soap/?wsdl=1

Sachez que si vous recevez ce message "Magento api: Invalid webservice adapter specified" , vous pouvez accéder normalement à votre site en local, au moins, mais que pour une raison ou une autre le serveur ne peut retourner la ressource demandée.

La réponse est à trouver dans la configuration Apache, on rentre dnas le concept de négociation de contenu.

Il faut trouver la ligne :


            Options Indexes FollowSymLinks MultiViews

 

et la remplacer par ceci :


            Options Indexes FollowSymLinks -MultiViews

 

Appliquer cette modification dans le fichier httpd.conf d'Apache n'a pas produit les effets escomptés, mais le faire dans le fichier htaccess de Magento est couronné de succès. En plus cela vous évite de redémarrer les services de WAMP si vous êtes sous Windows.

En réalit sur Magento 1.9,la ligne à modififier est exactement :

     Options -MultiViews

Entendez bien ajouter un signe moins devant MultiViews.

C'est quoi la négociation de contenu?

Selon Wikipédia :

"La Négociation de contenu est un mécanisme défini dans la spécification HTTP qui offre la possibilité de proposer pour une même URI, différentes versions d'un même document (ou plus généralement, une ressource). Les User-Agent peuvent ainsi choisir la version la mieux adaptée à leurs capacités. Une des utilisations classiques de ce mécanisme est de proposer une image aussi bien au format GIF que PNG. Ainsi un User-Agent qui ne peut pas afficher le format PNG peut toujours utiliser la version en GIF."

Donc vous entendez parler de négociatin de coontenu que dans le domaine de HTTP puisqu'elle en est une spécification.

Mais il est probable que vous en entendrez parler peu mêmeen tant que développeur web.

2016-08-20 08:08:03 0 Commentaires

Comprendre L'objet Window Dans Javascript

Quelle est la différence entre Window, Document, Screen?

Window est l'objet principal du DOM, le document object model, qui est la base de la page web et quand je dis la base ça comprend vraiment tout, les images, les scripts javascript, et autres objets, bref ce que vous voyez dans la fenêtre de votre navigateur.

Quand vous faite un script javascript, vous ne le savez peut être pas, mais vous utiliser une méthode ou un objet de l'objet Window, qui est le parent de tous les objets javascripts.

 

Document est un sous objet de Window. Document est en fait la vraie partie visible de la page qui est dans votre navigateur.

Pour savoir ce que l'objet Window contient, je vous invite à faire tourner le script suivant dans la console javascript (pour Chrome, faire F12,cliquer sur console) :

console.log(window);

 

cette ligne de javascript va afficher l'objet Widow dans la console de debug. Déplier le et vous allez être submergé, car il contient beaucoup d'objet, et vous allez vous rendre compte qu'il est facile de faire une radiographie de la page web et très facilement.

Ne sous estimez pas la puissance d'un simple console.log, il vous permet d'afficher n'importe quel objet, même les lus obscure. Par exemple, quend vous chargez un script Jquery, il est rattaché au DOM donc à window. Vous pourrez afficher tout l'objet Jquery et regarder ce qu'il contient ! De même si vous ne savez pas ce qu'il y a dans l'objet Angular, vous pouvez l'afficher de cette façon. Attention, c'est gros et vous allez peut etre vous y perdre.

 

Cas des iframes

Lorsqu'il y a des iframes dans votre page html, le code JS qu'il y a dans le ifrmae ne peut pas accéder directement à la fenêtre qui le contient. Si vous êtes dans l'iframe, pour accéder à un élément du DOM de la fenêtre parente, vous devez faire :

var topWindow = window.top

votre variable topWindow contiendra une référence vers l'objet window le pus haut dans la hiérachie des windows, oui il peut avoir plusieurs windows dans une page web.

Le parent immédiat :

Si vous êtes dans une iframe et que vous voulez le parent immédiat :

var parentWindow = window.parent

 

 

 

 

2016-07-19 21:07:43 0 Commentaires

Utiliser NPM Script Au Lieu De Gulp Pour Builder

On entends sur le net beaucoup à propos de Grunt ou de Gulp, ces outils vous permettent de compiler du sass en css, de minifier les script css et javascript, de rassembler en un seul fichier etc.

Cependant, il vous est tout à fait possible de faire ce que fait Gulp par exemple rien qu'en utilisant ce qui est disponible avec NPM script.

NPM est le gestionnaire de package sous nodeJS. Il vous permet de télécharger les dépendances nécessaire au fonctionnement de votre application web et du développement de ce dernier.

Voyons voir comment on peut compiler du Sass en CSS en utilisant NPM script.

les scripts NPM sont logés dans le fichier package.json, dans la propriété scripts.

C'est un objet json qui contient des paire clé-valeurs. La clé étant le nom d'un script, et la valeur est la commande NPM que vous auriez tapé en ligne de commande.

 Bon assez parlé on y va !

Compiler du Sass en css

c'est la tâche que l'on aura le plus souvent à faire.

Donc je suppose que vous avez déjà installé nodeJS, donc que vous pouvez utiliser NPM.

> npm install node-sass

Ensuite dans l'objet scripts qu'il y a dans le fichier package.json, créez une entrée comme ceici:

  "scripts": {
    "scss-build": "node-sass --include-path src/scss src/scss/style.scss public/css/style.css",
    "watch-scss": "node-sass -w src/scss/ -o public/css/"
  },

 

les chemins sont relatifs à l'emplacement du fichier package.json

le premier script "scss-build" va dire à node de compiler le fichier style.scss en style.scss

  1. src/scss est le répertoire source
  2. src/scss/style.scss est le fichier sass à compiler
  3. public/css/style.css est le fhicer cible

Rien qu'avec ce premier script (n'ajoutez pas le second script watch-scss pour l'instant), faite ceci:

> npm run scss-build

 et voilà !

PAssons au second script, comme avez à modifier un grand nombre de fois le fichier sass, vous aurez envie que la compilation se fasse à chaque fois que vous sauvez le fichier sass,

le "watch-scss" va surveiller toute modification du ficheir et va le compiler.

Il suffit donc de lancer non pas le premier script, mais le second script seul.

> npm run watch-scss

 

et voilà !

Il y a plus dans les npm scripts que la compilation. On aura envie de minifier le css,minifier le javascript, linter le javascript (linter veut dire vérifier que le code soit aux normes),autopréfixer les propriétés css, et même compresser les images (ce qui est très intéressant !). Le top du top est de pouvoir travailler avec Browsersync quand vous développez en cross browser.

 

 

2016-04-15 02:04:50 0 Commentaires

Creer Un Projet Avec NPM Proprement

Pour un projet web en php pour le backend, et javascript pour le front(en fait vous n'avez pas d'autres choix que le javascript pour le front car c'est le seul langage côté navigateur à l'heure actuelle),

je vais vous montrer comment initier un projet avec NPM.

 

Créez votre répertoire web, entrez-y, et commencez par:

>npm init

Vous aurez une suite de question pour configurer votre application, les paramètres globaux de la solution sera sauvée dans un fichier package.json.

A ce niveau votre fichier json ne contient pas de dépendance vers une quelconque bibliothèque javascript.

On va installer Angular (la dernière version):

> npm install --save angular

L'argument save a pour but de sauver la ligne d'installation du module Angular dans el fichier package.json.

Vous faites de même avec les autres librairie (sass, gulp etc), pour savoir ce qu'il faut taper exactement, allez sur le site officiel de NPM, maintenant on va faire une installation d'une autre catégorie de librairies, les dev dependencies. Ce sont les librairies qui sont utilisée seulement en développement mais ne figureront pas dans la version production.

Par exemple je vais installer la librairie de test unitaire Karma, qui est un orchestrateur de tests, et Jasmine qui est la librairie de test unitaire proprement dite.

>npm install --save-dev karma


Voilà ce que vous aurez comme fichier package.json

{

 "name": "monprojet",
  "version": "1.0.0",
  "description": "monprojet",
  "main": "index.php",
  "dependencies": {
    "angular": "^1.5.8"
  },
  "devDependencies": {
    "karma": "^1.1.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Yvon Huynh",
  "license": "ISC"

}

Si vous versionnez avec GIT par exemple, vous n'allez pas versionner le répertoire node_modules (le répertoire dans lequel sont entreposés les dépendances). Mais vous allez par contre versionner le fichier package.json. C'est lui qui contient toutes les informations sur les dépendances, si un collègue ou un contributeur désire cloner le projet chez lui, il fera un :

> npm update

pour lancer le processus de chargement des modules npm. Npm va lire le package.json et réinstaller les modules. Comme ça pas de repository Github surchargé par du code non en liaison directement avec votre application.

2016-01-08 08:01:45 0 Commentaires