Jetbrains PHPStorm est un environnement de développement intégré spécialisé pour le développement Web. Initialement conçu pour le développement PHP avec tout le support de Webstorm, grâce à son extensibilité, plusieurs plugins existent pour étendre ses fonctionnalités. Il supporte nativement les langages PHP, HTML, CSS et JavaScript.

AVANTAGES ET FONCTIONNALITES

Si plusieurs développeurs Web se penchent vers cet IDE, c’est grâce aux nombreux avantages et fonctionnalités que possède PHPStorm qui rendent vraiment facile la vie des développeurs en occurrence :

  1. Le support de la coloration syntaxique
  2. Un générateur de code
  3. L’auto complétion intelligent du code
  4. Une documentation du langage PHP intégré
  5. La factorisation du code
  6. File watcher, un outil qui fait la surveillance des fichiers surtout pour la transpilation des codes pour ceux qui utilisent des préprocesseurs comme SASS ou Webpack
  7. Un support de gestion de version (GIT, SVN) intégré
  8. Les supports des framework (Symfony) PHP intégré
  9. Les supports des moteurs de templates comme blade, twig intégré.

Et on est loin d’atteindre la moitié des fonctionnalités qu’offre cet IDE nativement… Il est quasi entièrement customisable et est très extensibles grâce aux nombreux plugins disponibles sur le web.

INCONVENANTS

Et que pensez-vous ? Que dans toutes ces features, il ne manquera pas de point faible ? Détrompez-vous ! PhpStorm est génial avec ces fonctionnalités mais cela lui rend gourmand en ressource mémoire. Il peut consommer jusqu’à 700Mo de mémoire vive.

Télécharger PhpStorm

PhpStorm n’est malheureusement pas gratuit, mais ils sont une version d’essaye d’une durée de 30 jours à voir dans le site officiel

SI vous avez commencé le développement web avec notepad++ comme c’est le cas de la plus part, c’est le moment de voir un peu plus grand et professionnel en migrant vers PHPStorm. Si vous ne voulez pas PhpStorm en raison de sa gourmandise, pensez à SublimText.

La librairie CSS d’animation animate.css est une excellente solution quant aux animations courantes. Tout un tas d’animations prédéfinies existent mais le problème avec est que les animations avec cette librairie sont un peu incontrôlable.

Généralement, on peut avoir besoin d’exécuter une animation selon une condition donnée. Par exemple, lors d’un clic, d’un scrolling, etc… Découvrons WOW.js, une librairie JQuery qui en mélangeant avec animate.css, déclenche les animations au scroll de la page.

WOW.Js est une librairie JavasScript qui permet de déclencher les animations lors d’un scroll. L’animation est lancée seulement après que l’élément HTML apparaisse à l’écran, et avec l’avantage que tout cela soit configurable. Il est par défaut configurer pour être utilisé avec animate.css, mais vous pouvez utiliser une autre librairie d’animation qu’animate.css.

Installation

  1. Télécharger animate.css
  2. Télécharger WOW.js
  3. Incluez animate.css dans l’entête du document
  4. Incluez WOW.js (avant la fermeture de la balise body est l’une de meilleurs habitudes
  5. Instancier WOW.js (après avoir inclus WOW.js

Utilisation

Quelques classes suffisent pour animer un élément quand il se voie à l’écran

  • wow : Signale qu’il faut animer cet élément lors d’un scroll
  • bounce : Le nom de l’animation (toutes les animations ici)

Exemple complet

Configuration de WOW.js

WOW.js comme dit dans le début est entièrement configurable. Voyons en détail quelques configurations essentielles.

Et puis il y a les attributs data-wow-* qui permettent de configurer aux plus fines les détails des animations de chaque animation.

  • data-wow-duration : La durée de l’animation. L’équivalent de animation-duration en CSS
  • data-wow-iteration : Le nombre de fois que l’animation va se répéter. L’équivalent de animation-iteration-count en CSS
  • data-wow-offset : La distance entre le bas de la page et l’élément lui seul, avant le lancement de l’animation.
  • data-wow-delay : Le temps avant que l’animation soit lancée. L’équivalent de animation-delay en CSS

Exemple

Pour plus d’informations, allez sur WOW.JS , Animate.css et dans l’utilisation de Animate.css