Archive for javascript

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

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 !

 

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

Les nouveautés de Cordova 5.0.0

Les nouveautés de Cordova 5.0.0

Le 21 avril est sortie la version 5.0.0 de Apache Cordova, et cette nouvelle version majeure apporte un nombre important de nouveautés et de changements dans l’écosystème.

Tout d’abord les plugins ont été renommés, les identifiants du type org.apache.cordova.* sont devenus cordova-plugin-*. Ce changement résulte du fait que les plugins sont désormais publiés sur npmjs.org.

Pour trouver de nouveau plugins il suffit d’utiliser la commande suivante qui liste tous les plugins cordova disponibles :

La classique commande cordova :

évolue aussi pour prendre en compte ce nouveau repository. D’ailleurs l’ancienne adresse http://plugins.cordova.io a vocation à fermer dans les prochains mois, le temps que la transition se fasse vers npm.

Concernant les plugins, autre changement : il est désormais nécessaire d’installer le plugin cordova-plugin-splashscreen pour Android si l’on souhaite ajouter un écran de chargement à notre application (qui n’est donc plus une fonction disponible par défaut).
De même le plugin cordova-plugin-whitelist est obligatoire pour Android afin d’autoriser le chargement de ressources externes.

Cordova 5.0.0 s’accompagne également de la version 4.0.0 de Cordova Android avec elle aussi son lot de nouveautés.
La plus importante (pour ne pas dire révolutionnaire) est qu’il est désormais possible d’utiliser d’autres WebViews que celle fournies de base par Android 4.* et 5.*
Grace au projet Android Crosswalk (développé par Intel) on peut maintenant s’assurer d’utiliser une WebView récente, identique sur tous les terminaux android, avec les dernières API JavaScript, le support de syntaxes et de propriétés CSS supplémentaires, et bien évidemment des outils de débogage avancés comme le remote debugging réservé jusqu’ici de base aux terminaux avec Android kitkat minimum.

Les autres plateformes Cordova ont elles aussi été mises à jour, les version actuelles sont les suivantes :
Cordova Amazon-FireOS: 3.6.3
Cordova Android: 4.0.0
Cordova BlackBerry10: 3.7.0
Cordova Browser: 3.6.0
Cordova FirefoxOS: 3.6.3
Cordova iOS: 3.8.0
Cordova Ubuntu: 4.0.0
Cordova Windows: 3.8.1
Cordova WP8: 3.8.0

Vous trouverez tous les détails sur les autres changements dans les articles officiels de Cordova :

Optimisation mémoire en JavaScript

Optimisation mémoire en JavaScript

Addy Osmani (qu’on ne présente plus) a partagé cet été une présentation concernant la gestion de la mémoire en Javascript qui vaut le détour et que vous pouvez trouver ici : https://speakerdeck.com/addyosmani/javascript-memory-management-masterclass

Il présente tout d’abord les différents outils de chaque navigateur permettant de surveiller la consommation mémoire de nos applications.
Il explique ensuite les cas les plus courants qui peuvent provoquer les fuites de mémoires ou le ralentissement de l’application.

On apprend par exemple que l’usage du « delete » sur la propriété d’une classe peut la rendre plus lente d’utilisation.
Autre point, les fonctions anonymes peuvent engendrer une grosse consommation de la mémoire étant donné qu’elles maintiennent des références sur toutes les variable du scope dans lequel elles ont été créées et, qu’ainsi, elles les empêchent d’être collectées par le garbage collector (ou « ramasse miettes » pour les puristes).
Pour le reste des exemples c’est ici: https://speakerdeck.com/addyosmani/javascript-memory-management-masterclass

Dans tous les cas l’auteur nuance et rappelle que l’optimisation n’est pas une fin en soi, et qu’au delà des bonnes pratiques élémentaires, mieux vaut privilégier une bonne conception et travailler à l’optimisation une fois le code réalisé et profilé. Il cite notamment Donald Knuth qui nous prévenait déjà en 1974 (pour ceux qui étaient nés ;) :

©Donald Knuth : We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil

Keypress : Gérer les entrées clavier facilement en JavaScript.

Keypress : Gérer les entrées clavier facilement en JavaScript.

Petit article aujourd’hui pour parler de « Keypress », une librairie JavaScript pour gérer facilement les entrées clavier.
Premier avantage de cette libraire, elle permet nous abstraire de ces « keyCode » censés représenter les touches du clavier mais qui sont une horreur en terme de lisibilité. Si l’on veut détecter l’appui sur la touche ‘a’ on écrit ‘a’, si l’on veut détecter l’appui sur la touche ‘shift’, on écrit ‘shift’, etc.

Ensuite, Keypress permet de gérer trois types d’entrée clavier :

  • Les « Simple combo » : il s’agit là d’une simple combinaison de touche. Lorsque les touches renseignées sont appuyées au même moment, l’événement est déclenché. Pratique pour gérer des raccourcis clavier dans ses applications.
  • Les « Counting combo » : Il fonctionne comme le précédent, à la différence qu’il est possible de connaitre le nombre de fois que la combinaison a été effectuée.
  • Les « Sequence combo » : Il s’agit ici de détecter une séquence de touche. Lorsque les touches renseignées ont été rentrées les unes à la suite des autres alors l’événement est déclenché. Utile pour créer un easter egg à base Konami code sur son site !

Bref, c’est par là :  http://dmauro.github.io/Keypress/

Uniformiser le rendu des typos web

Uniformiser le rendu des typos web

Vous êtes-vous déjà rendu compte que les typos web n’étaient pas affichées de la même manière suivant les navigateurs ?

 

Avec Type Rendering Mix, une librairie javascript, vous pouvez jouer avec les rendus des typos pour obtenir un affichage identique (ou pas loin) sur les différents navigateurs ou OS.

Cet outil est à réserver aux adeptes du pixel perfect car tout se gère manuellement !

 

 

Changer de visage grâce à JS et une webcam !

Changer de visage grâce à JS et une webcam !

Envie de rajeunir, de vous voir en Justin Bieber ou Walter White ? C’est maintenant possible en JavaScript et la démo est assez impressionnante, comme en atteste la photo de notre Terminator & développeur JS.

Face substitution utilise la librairie javascript clmtrackr, qui permet d’ajuster des modèles de visage à des vidéos et des images. Gardez votre visage immobile le temps que le modèle de visage s’ajuste à vous et essayez différents masques depuis la liste déroulante. Cela marche mieux avec un bon éclairage et le support de WebGL dans votre navigateur, à votre Google Chrome ou Firefox donc !

Un petit bout de code intéressant; dans leur exemple, ils utilisent l’API navigator.getUserMedia() pour capter le flux de la webcam :

Le lien vers la démo : http://auduno.github.io/clmtrackr/examples/facesubstitution.html

Un exemple par étapes : http://auduno.github.io/clmtrackr/example.html

Le GitHub du projet : https://github.com/auduno/clmtrackr

A vos expérimentations, merci JS !

Page 1 of 3 1 2 3