kumquats labs Veille technique et R&D sur les technologies HTML5 et Symfony

Animations avancées en JavaScript avec mo.js

Animations avancées en JavaScript avec mo.js

On est tombés ce matin sur cette démo d’icônes animées utilisant Mo.js assez sympas : http://tympanus.net/Development/Animocons/ et force est de constater que les animations sont plutôt réussies mention spéciale à la licorne et ses problèmes digestifs) !

Du coup, après avoir cherché à en savoir plus sur cette fameuse librairie, nous sommes tombés sur des démos encore plus convaincantes  : http://codepen.io/sol0mka/full/ogOYJj/, http://codepen.io/sol0mka/full/yNOage/, http://codepen.io/sol0mka/full/OyzBXR.

La librairie fournit des animations par défaut (Burst, Transit, Swirl, etc…) mais également une classe Tween permettant de développer nos propres animations en appelant un callback à intervalle régulier et en fournissant des outils de « easing » permettant de gérer simplement les différents type d’interpolation (bounce, bezier,elastic, bezier, etc…) tout en laissant la possibilité de créer sa propre courbe de progression en fournissant un path SVG !La documentation (http://mojs.io/tutorials/easing/path-easing/), bien qu’encore assez pauvre (et le mot est faible), nous explique tout de même comment réaliser pas à pas l’animation de la taupe donnée en exemple tout en abordant les notions fondamentales de la librairie.

Histoire d’avoir un aperçu un peu plus « basique » de code (les 3 codepen cités plus haut sont assez compliqués à comprendre) je vous invite à consulter ce petit codepen sur lequel on a codé une fantastique animation de rebond en quelques minutes (appréciez le feu d’artifice quand la balle touche le sol !! Attention les yeux, on avoue, on s’est lâchés) :
http://codepen.io/kumquats/pen/EPqdvE

Symfony Docker Edition

Symfony Docker Edition

Un développeur s’est amusé à créer sa propre distribution Symfony comportant la configuration nécessaire pour tourner avec Docker.
La distribution intègre évidemment Symfony 3.0 mais également les dépendances logicielles pour le faire tourner, à savoir:

  • Supervisord (Permet le monitoring des processus)
  • Nginx (Serveur web, équivelent Apache)
  • MariaDB (fork de MySQL)
  • Memcached
  • PHP 5.6.17 + PHP-FPM
  • Xdebug
  • Opcache (équivalent APC)

La configuration choisie ne correspond pas forcément à ce que nous utilisons habituellement puisque chez nous on utilise plutôt Apache et MySQL, mais ça pourrait être un point de départ pour créer notre propre conteneur Docker, plutôt que de partir complètement de zéro.

Pour plus d’infos: https://github.com/drgomesp/symfony-docker

Symfony3 : L’authentification simplifiée avec Guard

Symfony3 : L’authentification simplifiée avec Guard

Profitant de quelques jours de calme bien mérités, on en profite pour continuer de se familiariser avec Symfony3. Bon autant être clair, la vérité c’est que pour l’instant les vraies nouveautés ne se bousculent pas au portillon, mais, il en existe au moins une qui mérite vraiment d’être étudiée : Symfony Guard.Symfony Guard est le nouveau système d’authentification apparu dans la version 2.8 de Symfony, il a pour vocation de simplifier la mise en place d’une stratégie d’authentification. En effet, alors que jusqu’à maintenant il fallait implémenter des milliers (on exagère à peine) d’interfaces et factory différentes, il n’est désormais nécessaire d’implémenter qu’une interface : Le « AbstractGuardAuthenticator« .

Cette interface ne contient que 7 méthode à implémenter:

  • getCredentials: Permettant d’extraire les identifiants de la requête (on peut imaginer un login/password soumis via un formulaire, une clé d’API passée en paramètre GET, etc.)
  • getUser: Permet de récupérer un utilisateur en fonction de ses identifiants (pouvant se trouver dans une BDD, un fichier, etc…)
  • checkCredentials: Permet de vérifier les identifiants
  • createAuthenticationToken: Permet de créer le token d’authentification
  • onAuthenticationFailure: Retourne un objet Response dans le cas où l’authentification échoue
  • onAuthenticationSuccess: Retourne un objet Response dans le cas où l’authentification réussit
  • supportsRememberMe: Permet de spécifier si la stratégie d’authentification supporte la fonctionnalité « Se souvenir de moi »

Ensuite il suffit simplement d’enregistrer cette classe en tant que service afin de pouvoir l’utiliser dans le security.yml et le tour est joué !

Pour plus de détail, vous trouverez ci-dessous un tutoriel expliquant comment implémenter un mécanisme d’authentification avec Symfony Guard: https://symfony.com/doc/current/cookbook/security/guard-authentication.html

Facile !

Developers Tools Google Chrome

Developers Tools Google Chrome

Ce matin je souhaite partager avec vous un article d’Addy Osmani (excellent, forcément) qui présente les Developers Tools Google Chrome aux utilisateurs de Sublime Text (càd NOUS !).

DevTools Tips For Sublime Text Users liste ainsi quelques raccourcis similaire à ceux de Sublime Text. Comme pare exemple le « Goto Anything » Ctrl/Cmd + P permettant de naviguer dans un fichier en fonction des méthodes, ou règles CSS. On se sent vite comme à la maison, avec même la possibilité d’avoir du multi-caret !

La liste complète des raccourcis se trouve ici : https://developer.chrome.com/devtools/docs/shortcuts.

Deuxième fonctionnalité intéressante : la possibilité d’éditer ses fichiers directement avec les DevTools. Cela se fait en ajoutant des Workspaces afin de pouvoir persister les modifications faites sur nos fichiers. Utile pour ne pas avoir à repasser dans Sublime Text pour modifier le nom d’une variable ou une condition avant de tester notre nouveau code.

Enfin comme dans Sublime Text il est possible d’installer des thèmes, comme par exemple pour avoir une interface sombre pour reposer nos yeux. C’est encore expérimental mais on a tout de même testé ZeroDarkMatrix.

Bonne lecture et amusez-vous bien avec ces nouveaux raccourcis !

L’article complet : DevTools Tips For Sublime Text Users : https://medium.com/google-developers/devtools-tips-for-sublime-text-users-cdd559ee80f8#.7dxwgvg54

React : L’impact des composants purs sur les performances

React : L’impact des composants purs sur les performances

Il y a quelque mois s’est déroulé la React Europe Conférence à Paris. Durant ces deux jours, pas mal de sujets ont été traités comme Flux, React Native, React Router, Relay & GraphQL, etc… Jusque là, rien de nouveau.

En revanche, la conférence qui nous intéresse ici est Making your app fast with high-performance components par Jason Bonta. React est connu pour être un framework performant de base (cette vidéo nous le prouve d’ailleurs dans les 5 première minutes: [youtube z5e7kWSHWTg]) mais un mauvais usage de cette technologie pourra tout de même entrainer l’apparition de lenteurs dans nos applications.

Dans cette conférence, Jason parle notamment de l’usage de shouldComponentUpdate qui fait partie des lifecycle methods et qui est aujourd’hui trop peu utilisée.
Cette méthode reçoit les props et le state précédent ainsi que les props et le state suivant et son rôle est de déterminer si oui ou non le composant doit se rendre à nouveau (en retournant true ou false).
Dans la majorité des cas, il suffirait de vérifier s’il existe une différence entre les props précédentes et suivantes ainsi que le state précédent et le state suivant.

Heureusement, il existe dans React un mixin permettant d’implémenter cette fonctionnalité facilement: Le PureRenderMixin.
Ce mixin implémente tout simplement le méthode shoudComponentUpdate qui effectue une comparaison entre les props et les state.

Cependant, Il est important de noter deux choses:
Le PureRenderMixin ne fonctionnera correctement que si le composant est « pur », c’est à dire que pour un même state et un même props, il affiche le même résultat.
Aussi, le mixin n’effectue qu’un « shallow equal » (c’est à dire une comparaison uniquement sur le premier niveau de profondeur de l’objet) car sur des objets complexes cela pourrait devenir vite contre productif.
Ainsi si les props ou le state contiennent des sous objet, la comparaison se fera au niveau des références.

C’est là qu’interviennent les objets immutables. Ces objets ont la particularité de conserver la même référence si leurs attributs n’ont subit aucun changement au cours d’une mise à jour. Ainsi, peu importe la complexité d’un objet immutable il est possible de comparer deux objets immutables simplement par leur référence. La librairie la plus connue permettant de profiter de cette fonctionnalité est ImmutableJS que nous utilisons déjà.

Dans la suite de la conférence, Jason fait mention des éléments enfants qu’il est possible de transmettre à un composant auquel ce dernier a accès via la  propriété this.props.children. Cette propriété pose problème car la référence de this.props.children change à chaque nouveau rendu de l’élément parent rendant encore une fois le PureRenderMixin inutile. Ainsi, sa conclusion est qu’il faut les éviter au maximum.

En bref, cette conférence regorge de plein de précieux conseils et astuces que nous pouvons mettre facilement en application dans nos projets, alors pourquoi s’en priver ?

 

React Template : Une alternative au JSX

React Template : Une alternative au JSX

Il y a quelque temps nous avons décidé de migrer à React. Ce choix, qui n’a pas été immédiat, est le résultat d’une longue hésitation avec l’autre leader du marché qu’est Angular JS.
A l’époque, les points qui nous rebutaient le plus dans React étaient la syntaxe JSX et le fait de mélanger l’affichage et la logique du composant au sein d’un même fichier même si, en réalité, il s’avère que ce dernier point est plutôt pratique à l’usage.
Cependant, il reste certaines choses qui restent un peu fastidieuses, comme les conditions ou les boucles.
C’est là qu’intervient React Template, un moteur de template permettant d’écrire du JSX avec une syntaxe proche de celle utilisée dans Angular JS.
En effet, il suffira d’un attribut « rt-if » pour définir la condition d’affichage d’un élément, d’un « rt-repeat » pour répéter un élément selon une condition précise, etc…
Vous trouverez ci-dessous un exemple de template React:

Les templates peuvent se compiler simplement avec la majorité des task runner ou builder courants tels que Grunt, Gulp, Browserify ou Webpack.
De la compilation résulte un module javascript contenant une fonction destinée à remplacer la méthode render du composant. De ce fait, l’inconvénient, s’il en est, est que le template sera toujours séparé du composant.
En bref, React Template est une alternative intéressante au JSX et, même si la syntaxe peu déplaire pour ceux qui ont fuit Angular à cause de tout ces attributs ng-*, il prouve qu’il est possible de rendre l’écriture des composant React un peu plus pratique pour ceux qui ont peur de ne pas se faire au JSX !

 

Validateur mobile et a11y

Validateur mobile et a11y

Vous ne l’aviez peut-être pas vu le W3C a mis en ligne un validateur de site mobile.
Vous pouvez ainsi valider que votre site fonctionnera sur 3 périphériques différents (2 smartphones, 1 tablette).
Comment ça marche ? Le validateur fait automatiquement une capture d’écran du site et analyse ensuite les éléments suivants :

  1. Réseau : nombre de requêtes, compression, redirections, erreurs HTTP, optimisation d’image ;
  2. Responsive Design : utilisation de meta viewport valide, détection du scroll horizontal/vertical ;
  3. Interopérabilité : utilisation des préfixes CSS, détection de flash ;
  4. Interactions : détection d’utilisation de popins modales.

Pour chaque problème le validateur vous indique quelles actions effectuer pour le corriger.
Autre outil intéressant pour améliorer l’accessibilité de nos sites et applications : tota11y


tota11yCette librairie JavaScript peut s’utiliser via un simple favori.
Lorsqu’elle est chargée un bouton s’affiche en bas à droite de la page et il est ensuite possible de visualiser les problèmes d’accessibilité tels que :

  • La structure des titres, et les erreurs pouvant s’y trouver (plusieurs h1, h3 avant h2…) ;
  • Les contrastes trop faibles ;
  • Les liens peu explicites (type cliquez-ici) ;
  • Les champs de formulaires sans label ;
  • Les images sans alt ;
  • Les attributs ARIA.

C’est un bon outil pour s’assurer que les règles de base en terme d’accessibilité sont respecter.
Pour aller plus loin il faudra se tourner vers le site http://a11yproject.com/ afin d’avoir plus de documentation et d’exemple de code.

 

Sécurité WordPress et Content Security Policy

Sécurité WordPress et Content Security Policy

Ce matin on souhaite vous partager deux articles concernant la sécurité. Chic !

Le premier, 10 tips to secure WordPress liste 10 manières de sécuriser un site développé avec le CMS WordPress.
En voici la version TL; DR :

  1. Utiliser un couple login/mot de passe unique et sécurisé
  2. Utiliser une authentification à deux facteurs
  3. Vérifier que l’utilisateur est un humain
  4. Protéger le wp-login.php par mot de passe
  5. Garder WordPress à jour
  6. Choisir thèmes et plugins judicieusement
  7. Suivre les bonnes pratiques de développement de thèmes et plugins
  8. Choisir un hébergeur qui automatise les mises à jour WordPress, et protège des attaques DDoS
  9. S’assurer que les droits sur les dossiers et fichiers sont corrects
  10. Gérer les droits d’accès à la BDD côté serveur, désactiver l’édition de fichier dans WordPress

Le second, Improving Web Security with the Content Security Policy expose en détail l’entête HTTP CSP.
Cette entête permet protéger son site des attaques XSS. C’est d’ailleurs aussi ce qu’utilise désormais Cordova, et PhoneGap, pour la sécurisation des applications mobiles.

Avec CSP il est donc possible de définir précisément les domaines depuis lesquels les scripts et styles sont autorisés à être exécuté.
Ainsi tout autre contenu chargé ne sera pas exécuté. De même il est possible de bloquer l’utilisation de la méthode eval en JavaScript.

Il est même possible de définir une URL sur laquelle toutes les violations de sécurité seront reportées via un JSON détaillant chaque problème.

L’article démystifie ce qu’est l’entête CSP et indique exactement comment l’utiliser.

Pour terminer, concernant le support navigateur on peut voir que même IE10 et 11 supporte cette entête, c’est dire !

 

 

Live démo Android

Live démo Android

Après l’excellent PhoneGap Day à Amsterdam (ahh souvenirs), on s’est posé la question de comment faire simplement une live démo sur PC/Mac de nos apps Android. Et voici.

La solution existe et s’appelle Android Screen Monitor. Cette application Java permet de visualiser l’écran de votre smartphone Android dans votre ordinateur. Fonctionnalité similaire à l’Apple AirPlay Mirroring.

Pour utiliser Android Screen Monitor il faut télécharger asm.jar et le lancer avec la commande suivante :

java -jar asm.jar

Une fenêtre s’ouvre et nous demande de choisir un périphérique
androidscreenmonitor1 androidscreenmonitor2

Lorsque vous avez sélectionné votre périphérique vous visualisez alors l’écran en live !

Tout n’est pas parfait, par exemple le framerate n’est pas extraordinaire mais ça rend déjà bien des services. A noter que pour enregistrer simplement une capture vidéo de l’écran pour une diffusion ultérieure, il est possible d’utiliser la ligne de commande adb pour enregistrer un fichier au format mp4.

 

Ecmascript 6, l’avenir du Javascript entre nos mains grâce à BabelJS

Ecmascript 6, l’avenir du Javascript entre nos mains grâce à BabelJS

Devinette : Je suis un langage de programmation qui est longtemps resté le vilain petit canard du développement web mais qui depuis plusieurs années se refait une image auprès des développeurs jusqu’à investir des domaines encore impensables il y a quelques années (serveur, outils en ligne de commande, objets connectés, etc.). Je suis basé sur la norme ECMAScript et m’exécute historiquement dans le navigateur mais pas que. Je suis ?

OK, c’était facile, vous l’aurez deviné, c’est du Javascript dont on parle.

Même si ce langage arrive à gommer petit à petit sa mauvaise image notamment grâce à l’arrivée de Frameworks permettant une architecture d’application plus professionnelle (React, Angular, Backbone, etc. ont fait beaucoup) la syntaxe et les fonctionnalités offertes aux développeurs sont souvent source de frustration. Il faut dire que le notion de langage prototypé peine à convaincre les développeurs qui ont souvent tendance à tenter de reproduire de la POO classique avec les prototypes, avec plus ou moins de succès.

C’est ainsi qu’est apparu l’ECMAscript 6. Cette nouvelle version de la norme ajoute de nouvelles fonctionnalités au langage attendues de longue date : de la vraie POO avec les « class » et les « extends », des constantes, et plein de sucre syntaxique pour le plus grand plaisir de nos petits doigts délicats de développeurs.
Malheureusement, là encore, un problème se pose. En effet, l’ES6 n’est pas encore supporté par tous les navigateurs et encore moins sur les vieilles versions. Oui Internet Explorer, c’est toi que je fixe !

Heureusement est né Babel ! Le principe est relativement simple : Babel est un programme qui permet d’écrire du Javascript dans sa version ES6 et de la transformer en ES5 pour assurer le support de toutes les machines. Le site officiel explique d’ailleurs très bien comment rédiger du code ES6. Vous pouvez même profiter d’un compilateur en temps réel !

Voir le Site officiel de Babel

Page 1 of 6 1 2 3 4 5 ... Last →