Archives de catégorie : En une minute

Pour une fois, ce ne sera pas un article de dev ou de culture technique, de perfos ou de tests mais un appel à contributions. En ce moment, au sein de ParisJS, se tient le débat de savoir si ParisJS reste sur EventBrite ou bascule sur Meetup. Le vote se passe ici : https://docs.google.com/forms/d/1OB4jVu0WTdoYsn5IY_Axm50gujPVWxgBNwX1UfrqD90/viewform Le vote et les resultats sont public, mais un pseudo « connu » sur la mailing list / Twitter / etc sera obligatoire pour que le vote soit prit en compte. ParisJS étant une association de fait, c’est l’anarchie, la bonne, celle qui fait que chacun a le droit de mettre son grain de sel pour faire avancer les choses.

Vous venez ou allez lancer un service web ? C’est bien ! Qu’il soit intuitif c’est bien aussi. Mais prendre la peine d’expliquer à vos « clients » comment ils fonctionnent, c’est mieux ! Les outils suivants permettent de mettre en place une visite guidée de votre site. Vous placez plein de petites étapes ordonnées un peu partout assez facilement et voilà, votre visiteur est beaucoup plus en confiance. Peu importe votre framework CSS Un super outil qui ne gère malheureusement pas le multipage : IntroJS. Bootstrap Si, pour construire votre service, vous vous êtes basés sur Bootstrap, je vous recommande vivement l’usage d’un outil tel que Bootstrap Tour. Il gère le multipages et d’autres trucs cools. Je sais qu’il y a notamment aussi un plugin tiers pour Drupal. Foundation Le plugin jQuery Joyride est ce qu’il vous faut. Directement développé par les … Continuer la lecture

Sitespeed est un outil de mesure de la vitesse et des performances de votre site. La différence avec WebPageTest se situe dans l’idée que Sitespeed est beaucoup plus simple à installer en local et n’est pas prévu (de base) pour pouvoir être à la disposition de tous sur l’internet mondial. Vous pouvez avoir instance privée sur votre poste sans soucis. Autre particularité, WebPageTest va vous donner en sortie une page pas réellement exploitable automatiquement et selon un temps de réponse parfaitement aléatoire. Alors que Sitespeed lui pourra au choix sortir du HTML ou XML compatible JUnit. Pratique pour exploiter sous Jenkins ou autre outil d’intégration continue.

Je l’ai déjà évoqué à de multiples reprises sur ce blog, mais je vais le refaire. La mise en cache est une pratique clé pour les performances. L’idée est simple : mettre dans une variable locale une autre variable contenue dans une autre. Pas besoin que l’élément mis en cache soit très bas dans l’arborescence de son objet. Même au premier niveau vous aurez un gain si l’objet parent tout en haut est global. Exemple : var App = function () { controllers : [ one : {}, two : { some : "value" } ] }; if(undefined !== App.controllers[0].some) { App.controllers[0].some = "thing"; } Ici le script va d’abord vérifier si monObjet est local. Non. Il va donc remonter d’un score et non, toujours pas. Encore un scope, on arrive en global, et là on y est. Cette recherche … Continuer la lecture

Une assertion est un terme utilisé dans le cadre des tests unitaires. Elle définit un appel de fonction qui est censée retourner true. Ce sont l’ensemble des assertions qui constituent les tests effectifs. Si toutes les assertions répondent vraies, le test est donc valide. Exemple, avec MochaJS, outil de tests unitaires pour JavaScript : var assert = require("assert"); describe('Array', function(){ describe('#indexOf()', function(){ // ici, on annonce le début du test it('should return -1 when the value is not present', function(){ // Ceci est une assertion, répondant vrai assert.equal(-1, [1,2,3].indexOf(5)); // Ceci en est une autre, répondant faux assert.equal(-1, [1,2,3].indexOf(3)); }) }) }) Ici les assertions sont tous les appels à l’objet assert. La fonction it() est le test effectif.

J’abordais il y a peu le sujet de l’outil WebPageTest. J’espère que vous avez bien joué avec. Ceci dit, sur Paris, et même tout simplement en France, le nombre de serveurs de tests laisse à désirer (bah ouais : 1). Ce qui ne permet pas de faire des tests réellement complets et intéressants. WebPageTest met à dispo un soft en open-source sur Github à faire tourner sur un poste Windows dédié en DMZ (tests IE oblige). Toutes les explications sont ici : https://sites.google.com/a/webpagetest.org/docs/other-resources/hosting-a-test-location Merci au seul sponsor actuel français d’ailleurs : Akamai.

On m’a toujours dit que $("#test").hide().show(); // est moins rapide que $("#test").css('display', 'none').show(); Mais, ça m’embêtait un peu parce que hide n’est pas réellement un alias de display:none. Sauf que moi, je suis aussi un peu fainéant. J’aime bien hide parce que ça va plus vite écrire. Et surtout, ça donne pas un peu moins l’idée qu’on peut jouer directement avec les CSS dans du code JS. Après tout, à part pour quelques raisons pratiques quasi indéfendables, manipuler les styles via le JS plutôt que le CSS n’est pas une bonne idée. Autant ne pas y faire explicitement allusion. Du coup, j’ai fait un JS Perf. Je suis satisfait de voir que je vais pouvoir continuer de faire mon fainéant et utiliser hide(). Les résultats ici : http://jsperf.com/jquery-hide-or-display-none

J’arrive un peu après le gros du buzz mais pour ceux qui ne connaissent pas encore, je vous invite à essayer Gulp (https://github.com/wearefractal/gulp). C’est un concurrent de Grunt. Au lieu de réécrire/remplacer des fichiers à chaque fin de tâche, il préfère les mettre dans un flux. Moins de IO, plus de performances. Et la syntaxe est bien plus confortable puisque vous ne configurez pas les tâches pour les exécuter, vous les appelez directement. Exemple : /* This is an EXAMPLE gulpfile.js You'll want to change it to match your project. Find plugins at https://npmjs.org/browse/keyword/gulpplugin */ var gulp = require('gulp'); var uglify = require('gulp-uglify'); gulp.task('scripts', function() { // Minify and copy all JavaScript (except vendor scripts) gulp.src(['client/js/**/*.js', '!client/js/vendor/**']) .pipe(uglify()) .pipe(gulp.dest('build/js')); // Copy vendor files gulp.src('client/js/vendor/**') .pipe(gulp.dest('build/js/vendor')); }); // Copy all static assets gulp.task('copy', function() { gulp.src('client/img/**') .pipe(gulp.dest('build/img')); gulp.src('client/css/**') .pipe(gulp.dest('build/css')); gulp.src('client/*.html') .pipe(gulp.dest('build')); … Continuer la lecture

Aujourd’hui je vous propose de visualiser seconde par seconde comment votre site se charge. En simulant par exemple une connexion 3G d’un mobile dans Paris. C’est à dire avec les problématiques de bande passante, surtout. Ce petit miracle est dû grâce à Web Page Test. Ce site va charger votre page et vous afficher sur une courbe façon temps réel ce qui est chargé. Et par des captures à chaque seconde ce à quoi ressemble votre site sur l’entité utilisée. Pratique pour comprendre là où ça pêche sur les temps de chargement. Le tout accompagné d’une ligne de temps, à la Firebug ou Dev Tools, synchronisée aux captures pour bien visualiser les choses bloquantes (telles que les polices). Sympa non ?

Astuce d’utilisation des Chrome Dev Tools aujourd’hui. Faites un clic droit quelque part sur une page quelconque puis choisissez « Inspecter cet élément ». Dans le panneau des éléments, cliquez sur la valeur d’une des propriétés CSS. D’habitude, vous effacez, changez la valeur et vous recommencez tant que ça ne vaut pas la bonne valeur. Problème, c’est pas très efficace comme méthode quand on cherche au pixel près la bonne taille et que l’élément perd sa taille de référence et donc clignote à chaque fois que l’on teste une nouvelle valeur. Bof. Appuyez donc sur la flèche haute ou la flèche basse. La valeur change, ça ne clignote plus. Beaucoup plus efficace Le principe : flèche haut et bas, pas de 1. Page suivante ou précédente : pas de 10.