Archives par mot-clé : Developpement Web

Présentation de Yeoman

Developpement Web, JavaScript,

Aprés Grunt et Bower, je vais aujourd’hui vous présenter yeoman.

Yeoman est un « générateur » de projet.

Il est basé sur node.js et npm et utilise git pour la récupération des dépendances. Ces outils doivent donc être installés sur votre poste.

Installation

L’installation se fait via la commande suivante (avec l’option -g pour avoir la commande en global)

npm install -g yo

Bower et Grunt sont automatiquement installés.

Il faut également installer les générateurs que vous voulez utiliser. Vous pouvez trouver la liste des générateurs disponible ici. Pour notre exemple, nous allons installer le générateur pour angular via la commande suivante :

npm install -g generator-angular

Utilisation

Il suffit d’appeler ensuite la commande yo avec le générateur de votre choix :

yo angular

Quelques questions vous seront posées (voulez-vous utiliser sass, twitter bootstrap, ….,). Ces questions détermineront ce qui sera installé.Une fois les questions répondues, yeoman va se charger de télécharger toutes les dépendances du projet.

Création d'un projet angular via Yeoman

Comme je vous le disais, yeoman intègre grunt et bower. Des fichiers Gruntfile.js et bower.js seront donc déjà présent et configurés suivant le générateur utilisé. Pratique !!

Les générateurs peuvent également être utilisé pour créer des nouveaux fichiers comme dans le cas du générateur angular qui permet de créer des services, factory, controller, directives,  ….

Astuces

Pour connaître les générateurs installés, il faut lancer l’aide via la commande suivante :

yo -h

Liste des générateurs yoeman installésVous pouvez voir la liste des générateurs disponibles pour le seul angular. Notez également la présence de karma. En effet, le template de projet d’angular inclut Karma (anciennement Testacular), un lanceur de test multi-navigateur créé par l »équipe d’angular,  et permet donc d’initier un projet Karma .

Liens

Conclusion

Yeoman est très pratique pour démarrer rapidement un projet avec une bonne architecture et les bonnes pratiques d’un framework (tests unitaires, arborescence projet, …). Vous avez bien entendu la possibilité de générer votre propre générateur pour vos projets et les partager.

Astuces Web Essentials

Developpement Web, ,

Comme vous le savez peut être, je suis un fan de l’extension Web Essentials dans Visual Studio.

Je vais vous présenter ici quelques fonctionnalités méconnues de cette indispensable extension.

Ajout d’une image par copier coller

Prenons un exemple classique concernant la gestion d’image. Vous trouvez une image sur le net comme par exemple une icône (libre de droit bien entendu) et vous voulez l’intégrer dans votre projet. Il vous faut télécharger l’image, la copier dans votre arborescence projet, l’intégrer dans votre projet web et inclure la balise img dans votre code HTML.

WE vous simplifie la tache. Copier l’image dans le presse papier et coller celle-ci dans votre code HTML. l’extension va reconnaitre que vous tentez de coller une image et vous ouvre une fenêtre vous permettant de sélectionner le dossier où enregistrer l’image. Une fois cela fait, la balise img est générer dans votre code.

Gestion de Sprites

L’utilisation des sprites est une des bonnes pratiques qui permettent un gain en terme de chargement de votre site. Le principe est de générer un fichier image qui contient plusieurs images. Chaque partie du fichier correspondant à une image sera affichée via CSS. Cela permet de ne télécharger qu’un fichier au lieu d’une multitude de fichier. Voyons comment Web Essential permet de gérer ces sprites.

Sélectionner les images à utiliser pour la génération du sprite puis faire clic droit et cliquer sur Web Essentials > create image sprite….
Creation d'un Sprite

Donner un nom à votre sprite, sélectionner l’emplacement du sprite et cliquer sur OK. Le sprite est généré et inclus une images au format sprite qui est un fichier xml qui décrit votre sprites (liste des fichiers, orientation, format, ….), un fichier image du format spécifié (png par défaut) et du code css, less, scss et map qu’il ne vous reste plus qu’a utiliser !!!

Sprite généré

Aperçu d’image

Web Essentials vous permet de visualiser un aperçu de vos images directement depuis l’éditeur de code (avec affichage de la taille de l’image)

aperçu dans le code HTML

ou dans l’explorateur de solution

Aperçu au survol dans l'explorateur de solution

Traitement d’image

L’extension permet également de faire des actions sur vos images :

  • Encoder l’image en base64 : l’attribut src contiendra votre image en base64. Cela évite d’effectuer une requête serveur.

Image en Base64

  • Insertion des attributs width et height
  • Optimisation de la taille de l’image (disponiblé également au clic droit sur l’image dans l’explorateur de solution)

Options sur les images avec Web Essentials

Ajout/Suppression de parent

Sélectionner du code html qui vous souhaitez englober dans un tag. Cliquer dans le nenu Web Essentials > Surround with tag… ou via le raccourci clavier Shift+Alt+W. Votre code est maintenant inclut dans une balise div qu’il vous est très simple de modifier.

De la même façon, vous pouvez supprimer un nœud parent et garder les éléments enfants. Pour cela, au survol d’un nœud, un menu apparait et il faut cliquer sur Remove and Keep children.

Suppression d'un noeud parent

JSCS

JSCS (JavaScript Style Checker) est un outil permettant de valider le style de votre code JavaScript et il est un bon complément à JsHint. Les erreurs sont visibles dans la fenêtre des erreurs. WebEssentials inclut la validation via JSCS. Vous pouvez le configurer via un fichier .jscs.json dans votre projet ou de manière globale via Web Essentials > Edit Global JSCS Settings

Voici un exemple ci dessous :

JSCS dans Visual Studio

Extraire du JavaScript vers un fichier

Mettre du code JavaScript dans du code HTML n’est pas une bonne pratique. Web Essentials simplifie l’externalisation vers un fichier .js. Il suffit de cliquer sur le menu de la balise script et cliquer sur Extract To File.

Extract To File

Browser Link

Browser Link est une nouveauté apparue dans Visual Studio 2013 qui permet la communication entre Visual Studio et vos navigateurs. Cela permet par exemple de recharger les navigateurs automatiquement suite à une modification d’un fichier.

Web Essentials permet de rajouter des fonctionnalités à Browser Link comme :

  • Inpect mode : Sélectionner un élément dans votre code HTML et Visual Studio vous affichera le code qui a générer ce code.
  • Enregistrer les modifications effectués depuis les consoles web des navigateurs dans Visual Studio (ne fonctionne que pour les CSS pour le moment).
  • Validation de votre code
  • Trouvez les règles CSS non utilisées
  • …

Pour cela, il rajouter une barre de menu dans votre site afin d’accéder à ces différentes fonctionnalités

CSS

Web Essentials apporte un nombre impressionnnant d’améliorations concernant CSS. En voici quelques unes.

Ajout des préfixes vendeurs manquant

Ajout des préfixes

Affichage de la compatibilité des propriétés

Compatibilité CSS

Indication des préfixes obsolètes

CSS - Préfixes obsolètes

Amélioration de l’intellisense

Intellisense CSS

Tri des propriétés et Hack pour IE

Tri des propriétés CSS et Hack IE

Liens

Une vidéo de présentation de l’extension par son créateur Mads Kristensen sur Channel 9

Conclusion

Web Essentials est une extension indispensable pour le développement web sous Visual Studio. Cet article contient seulement quelques fonctionnalités et je vous encourage à aller consulter la liste complète de celles ci afin de profiter au maximum des possibilités de cette extension.

Chrome : Debug d’un site mobile

Developpement Web, Web, ,

J’ai présenté dans un précédent article comment debuger à distance avec Chrome sous android.

La dernière version de Google Chrome permet  d’aller plus loin dans le debug d’application web mobile sous Chrome. (Il faut actuellement avoir Chrome beta pour android (rev32) pour avoir cette fonctionnalité).

  • Plus facile pour débugger à distance car le driver est inclus dans Chrome
  • Visualisation du contenu du mobile dans le navigateur via un émulateur. Possibilité d’interagir directement dans l’émulateur (Utilisation du clavier, sélection d’élément via l’inspecteur, …)
  • Émulation d’une configuration d’un terminal
  • Redirection de port (permet de faire pointer sur le terminal  localhost sur la machine de dev)

Je vous conseille la lecture de l’article de présentation sur html5rocks, le lien vers la page des chrome DevTools, et la vidéo de présentation :

Outils CSS3 – HTML5 – JavaScript : Episode 8

CSS, Developpement Web, JavaScript, Web, , , ,

Html

  • Une liste d’articles sur l’utilisation d’Emmet(part 1, 2, 3 et 4) (mon article de présentation d’Emmet qui s’appelait à l’époque Zen coding) Toujours sur le même sujet, une cheat sheet de emmet assez complète.
  • Un article qui présente l’api de vibration
  • Responsinator : Permet de visualiser le rendu d’un site en mode responsive sur différents terminaux (iPhone 3/4, iPhone 5, iPad, Android, …) en portrait et paysage. Un exemple avec mon site.

CSS

  • Spinkit : Animations d’attente en CSS3
  • Myth : Myth is a preprocessor that lets you write pure CSS without having to worry about slow browser support, or even slow spec approval. It’s like a CSS polyfill.
  • CSS Zen Garden : La nouvelle version HTML5 Zen Garden.
  • lesshat.com : collection de mixins less
  • extractCSS : permet d’extraire les styles inlines d’un code HTML
  • Stitches : un générateur de Sprites
  • CSS Animate : Outil de génération d’animations CSS

JavaScript

Divers

Présentation de Bower

CSS, Developpement Web, JavaScript, ,

La gestion des librairies externes (javascript, css, font, …) d’un projet front end peut rapidement devenir contraignant. Il faut aller sur le site de chaque librairie pour télécharger les fichiers nécessaires et les copier dans votre arborescence projet. Sans compter sur la gestion des mises à jour et des dépendances.

Bower est un outil de gestion de librairies pour le web (NuGet est le pendant pour le monde .NET sachant que celui-ci n’est pas restreint aux librairies .net mais aussi les librairies front end comme jquery par exemple). Développé à l’origine par les équipes de Twitter, il est utilisé par de nombreux projets open source comme Bootstrap, Normalize, AngularJS, ….

La récupération des librairies se fait majoritairement sur Github via git, il faut donc que git soit installé sur votre poste.

Installation

Bower est basé sur Node.js et npm qui doivent également être installés sur votre machine. L’installation de Bower se fait via la commande suivante :

npm install -g bower

Bower est à installer en global via l’option -g afin de pouvoir l’utiliser sur tous vos projets.

Utilisation

Bower se base sur un fichier JSON, bower.json, qui va définir, à la manière d’un package.json en node.js, la liste des dépendances de votre projet.

Voici par exemple, le fichier bower.json pour ma page de gestion de score de volley, avec les dépendances vers jQuery, knockout et modernizr :

{
  "name": "Volley",
  "version": "0.2.0",
  "description": "Application de gestion de score de match de Volley",
  "main": "volley.html",
  "keywords": [
    "volley",
    "game"
  ],
  "authors": [
    "Julien Roy"
  ],
  "license": "MIT",
  "dependencies": {
    "modernizr": "~2.7.1",
    "jquery": "~1.7.2",
    "knockout.js": "~2.3.0"
  }
}

Bower va récupérer dans la plupart des cas, le projet entier de la librairie et le copier dans le répertoire des dépendances (par défaut bower_components).

Liste des commandes

Voici la liste des principales commandes de bower :

  • install : installer toutes les dépendances du projet définies dans le fichier bower.json
  • install package-name : installer une dépendance via son nom (il est possible de spécifier une version spécifique via #1.2.3 ). Utilisez l’option –save ou -S pour que la dépendance soit rajouté dans votre fichier bower.json
  • update : mettre à jour les dépendances d’un projet
  • search : rechercher des dépendances dans le répertoire de bower (possible de rechercher sur bower.io/search/).
  • uninstall package-name : supprimer une dépendance du projet (avec –save ou -s pour supprimer du fichier bower.json).
  • list : affiche la liste des dépendances

Configuration

Bower peut être configuré en utilisant un fichier JSON .bowerrc. Il permet de configurer par exemple le dossier dans lequel seront installées les librairies, le proxy à utiliser, ….

Voici mon fichier .bowerrc qui redéfinit le dossier dans lequel seront téléchargé les dépendances :

{
  "directory": "libs/"
}

Voici le lien vers la documentation.

Liens

Conclusion

Bower est un puissant outil de gestion de dépendances de projet web permettant de facilement installer un nombre impressionnant de librairies (prés de 7900 actuellement). N’hésitez pas à le coupler avec Grunt sur vos projets (déplacer vos dépendances dans un dossier build, concaténation, …).

Outils CSS3 – HTML5 – JavaScript : Episode 7

CSS, Developpement Web, JavaScript, Web, , ,

L’épisode 7 des outils liés aux technologies du web …

JavaScript

  • Une liste de plugins essentiels JQuery
  • jsdb.io : Un site qui répertorie les librairies JavaScript regroupés par thèmes avec recherche.
  • SnapSvg : une librairie pour gérer du SVG. Créée par Adobe (qui s’y connaît en vectoriel) en open-source, un des principaux développeurs est le concepteur de la librairie Raphael.js, une autre librairie qui permet de gérer du SVG.
  • Un article concernant la détection et l’avertissement lors d’une déconnexion d’un utilisateur
  • Normes de codage JS de airbnb (le site de réservation d’appartement entre particuliers)

CSS

  • Topcoat : une librairie CSS par adobe
  • Create CSS3 : Un générateur de règles CSS (assez complet, support des préfixes)
  • Koala : Une interface pour générer du CSS à partir de  LESS/SASS/Compass et du JavaScript à partir de CoffeeScript. Compatible Windows, Linux et Mac

HTML

  • Un très bon article sur sitepoint.com concernant la géolocalisation.
  • Real favicon generator : générateur de favicon (image représentant un site. Permet de générer également des icons pour Win 8, tablettes (iOS, Android, Windows Phone).
  • Ionicons : la police d’icône du framework ionic, pour créer des applications mobile en HTML5.
  • Runnable.com : permet de rechercher du code et de le tester (compatible avec pas mal de technos web (PHP, .NET, Ruby, NodeJs, …)
  • Une très bonne présentation (en anglais) sur l’automatisation de la partie front d’un projet
  • Un très bon article sur le Responsible Web design avec une boite à outils

NodeJs : Creer un serveur web avec Express

Developpement Web, JavaScript, ,

J’ai suivi récemment un formation HTML5 dans le cadre de mon travail. Lors de celle-ci, nous avons utilisé node.js pour la partie serveur.

Node.js est une plateforme basée sur le moteur JavaScript de Chrome qui permet de développer des applications en JavaScript. L’écosystème autour de nodejs est riche, outillé et très actif. Il est réputé pour ses performances (lié à son mode événementiel) et sa scalabilité.

Il existe notamment npm, node package manager, qui permet de gérer des modules et leurs dépendances. Il existe un très grand nombre de modules (+ de 48 000 actuellement) qui vous permettront de faire à peu tout ce que vous souhaitez (accès à une base de données, accès aux système de fichiers, …)

Dans notre cas, nous allons créer un serveur web avec node.js. Nous allons utiliser express, un module qui facilite la création d’un serveur web.

Installation d’Express

Nous allons donc installer Express via npm via la commande suivante en vous étant au préalable placer dans le dossier de votre future application (Pré-requis : NodeJs doit être installé.) :

npm install express

Cette commande va télécharger express et toutes ses dépendances dans le dossier node_modules (ce dossier contiendra tous les modules que vous installerez).

NB : Il est possible de définir un fichier package.json qui va définir votre projet dont ses références (guide interactif des propriétés du fichier package.json).

{
   "name": "demo",
   "description":"Mon serveur express",
   "version": "0.0.1",
   "dependencies": {
      "express": "3.x"
   }
}

Il suffit alors de lancer la commande pour que les dépendances du projet soit téléchargées :

npm install

Configuration du serveur

Node.js exécutant du JavaScript, notre serveur sera définit dans un fichier .js.
Voici l’exemple d’un fichier server.js qui permet de rapidement avoir un serveur http avec express.

//définition des dépendances et création d'un serveur express
var express = require('express'),
    app = express();

//configuration d'express
app.configure(function() {
  //__dirname est le chemin du dossier parent du fichier serveur
  //permet de renvoyer les fichiers à partir de la racine du fichier
  app.use(express.static(__dirname));
  //permet d'afficher la liste des fichiers d'un dossier
  app.use(express.directory(__dirname));
  //permet de gérer les erreurs
  app.use(express.errorHandler());
});

//on lance le serveur sur le port 8081
app.listen(8081);
//On affiche dans la console que le serveur tourne
console.log('Serveur lancé sur le port 8081');

il suffit de lancer dans la console de commande / terminal :

node server.js

Vous pouvez lancer votre navigateur à l’url http://localhost:8081 pour voir le résultat.

Voici par exemple l’affichage de la racine de mon serveur local pour le développement de mes exemples pour le blog.

Server web avec Express

Il affiche les dossiers et permet également de faire une recherche.

Le serveur ne renvoie que des fichiers statiques (html, css, js , images, …) mais il est tout à fait possible de renvoyer du contenu dynamique.

Références

Quelques liens pour bien débuter avec node.js

A noter, pour ceux qui font du .NET comme moi,  que viens de sortir une extension pour Visual Studio pour Node JS qui a l’air très bien

Brackets

Developpement Web

Brackets est un IDE pour le web nouvelle génération. En effet, il est écrit en JavaScript, HTML et CSS !! (Il utilise nodejs notamment sous le capot).

Brackets est open source mais est issu d’Adobe et sert de base pour leur éditeur Edge Code. Il est compatible Windows, Mac et Linux (à télécharger ici).

Il est développé en mode agile via des sprint (une version toutes les 2 semaines et demi environ) et il est possible de suivre l’avancement et de proposer des idées via Trello (Un tableau agile).

Brackets

Fonctionnalités

Il offre des fonctionnalité de base très intéressante :

Editeur CSS

Intégration d’un sélecteur de couleur dans l’éditeur CSS (via Ctrl-E ou clic-droit > Edition Rapide)
Brackets - Sélecteur de couleur

Intégration d’un documentation dans l’éditeur CSS (via Ctrl-K ou clic-droit > Documentation Rapide)
Brackets - Documentation Rapide

Editeur HTML

Possibilité d’éditer ou de créer les règles CSS d’un élément directement depuis le HTML (via Ctrl-E)
Brackets Edition CSS dans Editeur HTML

Pré-visualiseur d’image au survol d’un élément image
Brackets - Prévisualisation Image

Editeur JavaScript

Intégration native de JSLint
Brackets - JSLint

Extension

Il est également extensible via un système d’extensions. La gestion se fait directement dans Brackets en cliquant sur l’icône en forme de lego en haut à droite.
Brackets - Extensions

Vous pouvez trouvez sur le blog de brackets une présentation des extensions. La liste complète est disponible ici.

Voici quelques extensions que j’utilise :

  • brackets-code-folding : permet de pouvoir afficher / masquer du code
  • Autoprefixer : permet d’ajouter automatiquement les préfixes CSS
  • Theseus for Brackets : debuger JavaScript pour Chrome
  • Emmet : génere du code HTML à partir d’une syntaxe CSS
  • CanIUse : les informations de CanIUse.com directement dans Brackets
  • Indent Guides : afficher les lignes d’indentation

Live Reload

Brackets inclus par défaut la fonctionnalité de Live Reload (en cliquant sur l’éclair en haut à droite). Cela permet de recharger la page dans Chrome (version incluse dans Brackets) automatiquement à la sauvegarde d’un fichier.

Liens

Conclusion

Brackets est éditeur encore jeune mais très prometteur. Je vous invite à le tester d’autant que le développement en mode agile permet d’apporter régulièrement de nouvelles fonctionnalités.

Glimpse : Debugger votre application ASP.NET

.NET, Developpement Web, Non classé, , ,

Je vais présenter aujourd’hui Glimpse, un outil qui va vous permettre de debugger votre application ASP.NET (MVC ou WebForms) plus facilement.

Installation

Glimpse s’installe facilement via NuGet. Pour cela, faire clic droit sur votre projet ASP.NET et cliquer sur Gérer les packages NuGet … . Sélectionner En Ligne et rechercher Glimpse. Il existe une version de Glimpse pour chaque version de MVC et pour WebForms.

Glimpse - Installation

Installez la version en fonction de votre application web.

Utilisation

Lors de l’ajout de Glimpse via NuGet, Glimpse rajoute automatiquement une section permettant de configurer Glimpse dans votre web.config.

Par défaut, glimpse est activé coté serveur seulement en local via la ligne suivante rajoutée dans le web.config :

<glimpse defaultRuntimePolicy="On" endpointBaseUri="~/Glimpse.axd">

Vous pouvez désactiver complétement Glimpse en passant defaultRuntimePolicy à Off. Il est également possible de configurer plus finement Glimpse. Pour cela, je vous renvoie vers la documentation concernant la configuration.

Par défaut, Glimpse n’est pas activé coté client. Lancer votre application web et aller à l’adresse racine de votre application et ajouter Glimpse.axd (http://localhost:portname/Glimpse.axd).

Cette page permet de configurer Glimpse et de l’activer. L’activation se fait via les boutons Turn Glimpse On et Turn Glimpse Off (ces boutons sont des bookmarklets qui vous pouvez glisser / déposer dans votre barre d’adresse pour une activation/désactivation rapide). Cette page permet également de gérer les onglets qui seront affichés dans Glimpse.

Glimpse - Configuration

(en vert dans la barre d’addresse, les bookmarklets permettant l’activation/désactivation rapide).

Vous pouvez maintenant retourner sur votre application. Une fois activée, vous verrez en bas à droite de votre écran la barre Glimpse.Cette barre affiche les informations relative à la page courante :

  • HTTP : temps de réponse, …
  • Host : Information Serveur (Controller/Action, Vue, …)
  • Ajax : le nombre de requêtes AJAX.

Glimpse - Mode Reduit
Au survol d’une zone, on affiche un volet afin plus d’information :

Glimpse - Information Http
Au clic sur le g (en bas à droite), on passe en mode avancé avec un système d’onglet comme on peut l’avoir avec une barre d’outils comme Firebug.

Voici quelques onglets présent dans cette vue avancée :

L’onglet Configuration permet de consulter la configuration (web.config) de l’application :

Glimpse - Configuration

L’onglet Timeline présente l’exécution de la requête dans le temps

Glimpse - Onglet TimeLine

L’onglet Request présente les informations de la requête :

Glimpse - Onglet Requete

L’onglet Route présente la résolution de la route :

Glimpse - Onglet Route

L’onglet Trace permet d’afficher les messages écrit via System.Diagnostics.Trace et Debug 

public ActionResult Index()
{
    System.Diagnostics.Trace.Write("Je suis une trace");
    System.Diagnostics.Debug.Write("Je suis un debug");
    return View();
}

Glimpse - Trace

Plugins

Glimpse supporte des extensions, à installer via NuGet, qui permettent de rajouter un onglet contenant les informations relatives à l’extension. Il existe notamment :

  • une extension pour Entity Framework (comme pour ASP.NET veillez à installer le package lié à la version d’EF que vous utilisez), qui permet d’afficher les requêtes effectuées ainsi que leur temps d’exécution.
  • une extension pour Log4Net qui permet de voir les entrées de Log4Net

Liens

Outils CSS3 – HTML5 – JavaScript : Episode 6

CSS, Developpement Web, JavaScript, , ,

Une petite liste d’outils/librairies/… pour les développeurs web trouvés ici et là …

JavaScript

CSS

  • CSS3 Flexible Box Layout Explorer : Comprendre le layout flexbox de CSS3
  • Preboot : une collection de fonctions utiles (mixins, variables) pour less
  • CSS3 Click Chart : Exemple d’utilisation des propriétés CSS3
  • Stylify Me : Affichez facilement les couleurs, police, dimensions d’un site web.
  • Tridiv : Un éditeur CSS pour créer des formes 3D
  • CSSLisible : CSSLisible va réindenter vos blocks de code, ordonner vos propriétés, afin de fournir un code CSS Lisible et plus maintenable. Attention, les commentaires internes aux sélecteurs sont retirés !

HTML

Tout ce qu’il faut savoir les favicons

Font

Fontello : Un Générateur de police d’icône.

Divers

Une liste de points à vérifier lors de vos développements web :

DevDocs : un site regroupant la documentation pour HTML/CSS/JavaScript/DOM/JQuery/… bien fait avec la compatibilité par navigateur.