Archives mensuelles : janvier 2013

Les Pascaleries

De nature, je suis quelqu’un de très visuel. Lorsque je tente de comprendre un concept ou que je l’explique à quelqu’un, j’ai toujours tendance à utiliser des images ou des analogies très imagées.

Le moment où j’ai le plus d’occasions de faire des comparaisons de ce genre est lorsque je suis en contact avec un client. Notamment lorsque je suis à faire du support où je dois, parfois, expliquer l’inexplicable.

Or, lors d’une explication imagée, un ami m’a fait remarquer ce comportement en question. Cette habitude d’utiliser des images assez fortes lorsque je tente d’expliquer mes idées. D’une certaine façon, c’était pour moi une découverte car il s’agissait de quelque chose que je faisais automatiquement. Par réflexe, si je peux m’exprimer ainsi.

L’expression utilisée au moment de me faire cette remarque est : l’analogiste.

Alors voilà, sans plus tarder, une liste des expressions tirées de mon propre livre. Les Pascaleries. Comme quoi un peu d’autodérision ne peut pas faire de mal.

Comment expliquer la désuétude d’un site par la mise à jour d’un navigateur

Un jour, lors d’une conversation avec un client très peu technique, j’ai eu à lui expliquer pourquoi le site web de sa compagnie avait une défaillance visuelle avec Internet Explorer 9.

L’explication la plus facile à donner, à ce jour, est de mentionner que chaque nouvelle version d’un navigateur apporte son lot de changements à l’interprétation du HTML présenté et ainsi cela impacte le rendu visuel.

Truc de pro : Si vous tentez cette expérience, votre interlocuteur aura probablement cette réaction-là.

L’anecdote s’est poursuivie ainsi. Désirant trouver une explication claire et précise, la première idée qui m’est venue en tête est celle-ci :

Une mise à jour de navigateur sur votre site équivaut à changer votre paire de lunettes alors que votre vision reste la même.

Le succès de cette comparaison a été sous-estimé. Elle a été utilisée, par la suite, à outrance dans mes conversations avec des clients.

L’analogie entre la voiture et le site web.

Une image vaut mille mots. Il s’agit d’un dicton que je m’amuse à répéter souvent.

Ceci étant dit, travaillant dans le domaine du service, je trouve qu’il y a beaucoup d’analogies à faire entre la mécanique automobile et le développement de sites web. Voici quelques exemples :

  • Développeur -> Mécanicien
  • Site web -> Voiture
  • CMS -> Moteur
  • Volant -> Navigateur

À chaque occasion, il peut y avoir une comparaison possible. Il faut aussi dire que j’ai beaucoup travaillé en développement post-mise en ligne pour des clients. Faire des ajustements et des ajouts de fonctionnalités, c’est ma tasse de thé.

Cache sur un site web

Tout comme la désuétude d’un site web par rapport à un nouveau navigateur web, expliquer le concept de la cache à quelqu’un de pas technique peut être un défi assez imposant.

Dans ce cas-ci, lorsqu’on utilise de la cache ou une autre technique de mise en mémoire, cela équivaut à prendre une photo du site web pour qu’on puisse la consulter rapidement. Toutefois, le défi est de trouver un temps opportun pour prendre une mise à jour de la photo en question pour qu’il y ait des changements significatifs d’une fois à l’autre sans que trop de temps se soit passé entre chaque prise.

L’expression chinoise : « Le oneshot »

Cette expression vient du fait que j’utilise certaines expressions anglaises dans mes conversations. Lorsque je discute avec un client, de façon humoristique, je vais devancer mon expression anglaise par un « Comme on dit en français ».

Or, cette fois-là, j’ai dit « Oui, ce sera, comme on dit en bon chinois, un oneshot« . Vous comprendrez que, cette fois-là, mes collègues se sont chargés de me rappeler mon écart de langage.

Être beige

Je n’ai pas vraiment inventé celle-là mais je l’aime beaucoup.

On se souvient tous de l’époque où nos ordinateurs étaient que des tours beiges sans attrait visuel particulier. Être beige est exactement de là que vient cette expression.

En général, les développeurs sont attirés vers les technologies qui ont du brillant ou des couleurs vibrantes qui les rendent attrayantes. On aime le sucre… syntaxique!

Du bouche-à-bouche pour le transfert de connaissance

Celle-ci doit être mise en contexte pour bien la saisir. Elle est survenue lors d’une réunion avec deux collègues alors que nous faisions état des connaissances d’un nouveau client envers une solution que nous proposons et qu’ils utilisaient déjà dans le passé.

Le point discuté était au sujet de comment ils avaient appris l’outil un peu par eux-mêmes et qu’ils avaient développé des habitudes de travail assez inusitées.

Alors, du tac au tac je m’exprime, très certain de mon coup, « Ah bien, c’est normal, très souvent le transfert de connaissance se fait par le bouche-à-bouche« .

Imaginez donc la tête de ces collègues en imaginant la scène chez le client à faire du bouche-à-bouche pour apprendre au lieu par un bouche-à-oreille pour apprendre le fonctionnement de l’outil.

Advertisements

Liens de la semaine – #15

Développement

.NET

Web

Science

Autre

Annonce d’intérêt public : Installez Web essentials

Vous êtes, tout comme moi, à faire du développement web avec Visual Studio sur une base quotidienne? Êtes-vous satisfaits des outils que vous utilisez?

Il est possible que vous utilisiez déjà ReSharper ou même CodeRush? Vous avez probablement une très ferme opinion sur le fait que Visual Studio a de sérieuses lacunes du côté des outils supportant le développement web? Vous avez déjà été frustré en tentant de faire un CSS dans votre projet? Vous trouvez dérisoires les fonctionnalités d’édition du Javascript?

Web Essentials 2012

Si cela est le cas, chose certaine, vous allez probablement avoir une opinion positive de Web Essentials 2012. Web Essentials 2012 est une extension à Visual Studio 2012 qui s’installe par NuGet. Un petit rappel : pour atteindre le gestionnaire d’extensions, il faut passer par Tools\Extensions and Updates.

L’extension est développée par Mads Kristensen. Dans le cas où vous ne le connaissez pas, il est un employé de Microsoft travaillant au sein de l’équipe Web Platforms and Tools. Pour faire simple, il est très bien placé pour développer ce genre d’outils.

Web Essentials offre des fonctionnalités, à différents niveaux dans Visual Studio, vous permettant d’être productif ou simplement de faire des choses qui n’étaient simplement pas possible dans le passé.

Des choses qui n’étaient pas possible? J’ai attiré votre attention n’est-ce pas? Il est question, par exemple, de pouvoir gérer vos fichiers CoffeeScript directement à partir de l’IDE. Le même support est aussi offert pour TypeScript et les fichiers LESS.

Les cinq fonctionnalités qui vont changer ma façon de travailler

Il serait vain de faire une liste détaillée des fonctionnalités offertes par Web Essentials. Alors, j’ai décidé de lister mon top 5 des fonctionnalités que, je crois, vont changer la façon que je travaille au quotidien.

Avant tout, sachez qu’en tout temps un menu « Web essentials » est accessible par un clic droit de votre souris. Cela va vous permettre d’accéder aux fonctionnalités que vous pouvez avoir accès selon le contexte.

Conversion aux DataURI

Il est maintenant possible, à partir de l’éditeur CSS, de convertir une image en un DataURI base64. Si vous avez plusieurs images statiques, vous pouvez économiser quelques requêtes HTTP de cette façon.

JSHint

L’outil de détection d’erreurs et de problèmes potentiels pour Javascript a été intégré directement à l’éditeur de Visual Studio. C’est à dire que vos erreurs et avertissements vont apparaître directement dans la fenêtre de notification d’erreurs.

Minification et Source Maps

La minification des fichiers Javascript et CSS est supportée de quelques façons différentes. La minification est possible à partir du menu « Build » et même dans vos fichiers source directement. J’ai même remarqué qu’il est possible de faire la minification d’une d’une partie de votre code source à partir d’une sélection.

Par le fait même, lorsque vous minifierez votre Javascript, le fichier .map permettant de faire le mappage entre votre version originale et la version minifiée est automatiquement généré.

Zen Coding et Lorem Ipsum generator

Qu’est-ce que Zen Coding? Il s’agit d’une syntaxe permettant l’écriture assez rapide du code HTML à l’aide d’une syntaxe minimale basée sur des conventions.

Par exemple, la ligne : div#page>div.logo+ul#navigation>li*5>a

Génère le code HTML suivant :

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

LESS

La cerise sur le sundae est l’ajout d’outils et de fonctionnalités permettant aux développeurs de pouvoir intégrer facilement des styles visuels conçu avec la syntaxe LESS.

Le support pour LESS est assez complet. Il y a notamment la prévisualisation côte à côte LESS/CSS et des aides contextuels dans l’éditeur comme l’extraction vers une variable.

Liens de la semaine – #14

Technologie

.NET

  • Un truc, très cool, pour intégrer la puce de traçage Google Analytics sans pénaliser votre score de performance Google Page Speed.
  • Une liste de validations à effectuer pour votre site ASP.NET.

Web

  • Une grande annonce de la part de l’équipe jQuery. La vision d’avenir de la librairie a été documentée et annoncée au public. Il est, notamment, question de jQuery 2.0 qui retirera la prise en charge des navigateurs Internet Explorer 6, 7 et 8.
  • Tout ce que vous devez savoir au sujet du z-index.
  • La prise de position de Google au sujet de l’avenir de JavaScript. La stratégie se divise en deux branches : faire évoluer EcmaScript et développer un nouveau langage nommé Dash.
  • Plain Text Offenders est une encyclopédie des sites et services en ligne qui envoie des noms d’usager et mots de passe en clair par courriel.

Divers

Découverte de la semaine : Glimpse

Glimpse est un outil permettant au développeur ASP.NET d’avoir une vue client sur se qui ce passe du côté serveur. Il agit comme l’équivalent de Firebug pour votre code côté serveur.

Installation

L’inclusion de Glimpse à votre projet se fait par NuGet, bien évidemment. La spécificité est reliée à sa configuration dans celui-ci.

Une fois l’installation complétée, votre projet contiendra tous les éléments nécessaires à la mise en action. Il y a notamment votre fichier web.config qui sera modifié pour son utilisation.

En ce qui concerne l’activation, il s’avère que l’outil n’est pas activé par défaut dans votre projet. Il faut visiter l’adresse /glimpse.axd pour accéder à la page de configuration. Avec cette page, vous pouvez l’activer, le désactiver et même personnaliser le nom de session utilisé.

config

La page de configuration /glimpse.axd

Il est à mentionner que les liens présents dans cette page sont, en fait, des bookmarklets pouvant être ajoutés à votre barre de favoris afin qu’ils soient encore plus accessibles.

L’autre utilité de cette page est de vous permettre de réviser vos paramètres de configuration. Bref, un guichet unique pour tous vos besoins.

Utilisation et remarques d’utilisation

En assumant que Glimpse est activé pour votre navigateur, vous devriez y voir une petite icône à l’image de celui-ci apparaître dans le coin droit de votre fenêtre. C’est par là que vous pourrez activer la fenêtre d’inspection de requêtes.

Avec cette fenêtre, il y a un paquet d’informations qui peuvent être consultées. Chaque onglet contient des informations qui vous permettre d’analyser un volet de la requête qui vient d’être exécutée.

Timeline de Glimpse

Timeline de Glimpse

Par exemple, l’onglet Timeline permet de consulter le détail du fil d’exécution de la requête détaillant le temps d’exécution pour chaque étape ainsi que les informations sur les fonctions qui ont été exécutées.

Une autre fonctionnalité très utile est l’onglet permettant d’identifier à quelle route appartient votre requête. Vous pouvez savoir, en quelques clics, si vous avez des routes qui sont inutilisées.

Conclusion

La beauté de tout cela est que Glimpse est un projet open source présent sur Github. Cela veut aussi dire que vous pouvez contribuer au projet si cela vous le dit.

Au moment d’écrire ce billet, le mot a même couru sur la liste de distribution du projet qu’ils étaient à la recherche de contributeurs afin de rehausser la documentation des différentes fonctionnalités de la librairie. Cela peut être une bonne façon de se mouiller et d’apprendre le fonctionnement d’un projet.

Dans ce billet, j’ai présenté uniquement la partie ASP.NET MVC de la librairie. Sachez qu’il y a aussi une adaptation pour Rack (le serveur web Ruby), PHPWSGI (Python Web Server Gateway Interface) et même ASP.NET. Alors, pour moi, il est hors de tout doute que Glimpse va maintenant faire partie de chacun de mes projets à partir de maintenant.