Applications Windows pour les développeurs Web

Lorsque l'éditeur de Nettuts + a demandé un article pour montrer son amour pour les développeurs Windows en répertoriant les applications de développement Web les plus répandues, j'étais partout. Les développeurs OSX attirent beaucoup d’attention, il est donc bon de mélanger les choses un peu.

Ce que je veux faire, c'est répertorier les outils de développement que j'utilise fréquemment en tant que développeur Web sous Windows. Il se peut qu’il n’inclue pas vos favoris et, dans le cas contraire, faites-le-moi savoir dans la section commentaires. Je suis toujours impatient de trouver de nouveaux outils pour améliorer mon flux de travail!


Code d'écriture

Visual Studio 2012

J'ai déjà écrit sur Visual Studio et je pense que c'est un IDE génial. Il est riche en fonctionnalités avec des tonnes de cloches et de sifflets.

Web Essential Extension pour VS2012

Dieu merci, les outils de débogage basés sur un navigateur ont évolué pour devenir ce qu'ils sont aujourd'hui.

C'est l'extension qui fait de Visual Studio un outil idéal pour le développement Web. Il apporte des fonctionnalités dont les développeurs Web ont besoin, telles que:

  • Regroupement de fichiers pour traitement ultérieur
  • Minification des actifs
  • Support JSHint pour le filtrage de votre code JavaScript
  • Principaux moteurs de gabarit côté client, notamment Guidon, Moustache et JSRender
  • Le langage de feuille de style LESS avec prévisualisation à la volée
  • CoffeeScript et TypeScript

Mads Kristensen, le créateur de l'extension, est une rock star!

Sublime Text 2

C'est le petit éditeur qui peut. Sublime Text est un outil extraordinaire. Package Control complète les extensions dont vous avez besoin pour rationaliser votre développement. Nettuts + a une tonne d'articles sur ce puissant éditeur, y compris un cours complet (et gratuit).


Les navigateurs

Je tire pour des sites multi-navigateurs, il est donc essentiel d’avoir la couverture la plus large possible. J'aime également rester au fait des nouvelles fonctionnalités qui vont bientôt sortir, et j'installe également des versions de développement et de navigateur nocturnes pour rester au courant. Voici la liste des navigateurs que j'utilise pour tester:

  • IE10
  • Chrome - Stable et Canary
  • Firefox - Stable & Aurora
  • Opera - Stable & Next
  • Safari v5.1

Une chose à noter est que Safari ne propose plus sa dernière version de Safari sous Windows. Il semble que la v5.1.7 sera la dernière, mais je la garde toujours pour les tests.


Outils de développement basés sur un navigateur

Heureusement, les outils de débogage basés sur un navigateur ont évolué pour devenir ce qu'ils sont aujourd'hui. Sinon, nous utiliserions toujours alerte() boîtes pour tester notre code. Le grand avantage est que tous les principaux navigateurs modernes disposent d’outils de débogage sophistiqués intégrés qui vous aident à analyser votre code, les performances de votre site, etc. Voici un article que j'ai écrit sur les outils de développement F12 d'IE pour vous mettre à jour rapidement..

  • Outils de développement IE F12.aspx)
  • Pyromane
  • Outils de développement Chrome
  • Opera DragonFly
  • Outils de développement Web Safari

Extensions du navigateur

Je trouve les add-ons et les extensions de navigateur indispensables à mon travail de dépannage. Non seulement ils aident au débogage du code, mais ils facilitent également la création de pages..

Firefox:

J'envisage Currents pour garder mon ordinateur de bureau et mon ordinateur portable synchronisés.

  • Firebug - L'ancien fiable qui a lancé la révolution des outils de navigation. Toujours génial dans mon livre.
  • ColorZilla - Donne-moi une pipette de couleur qui peut m'aider à attraper le code de couleur pour la plupart des éléments d'une page. Aimer!
  • MeasureIt - Vous avez toujours voulu voir les dimensions de quelque chose sur une page. Ceci est l'extension pour obtenir.
  • YSlow - L'add-on original créé par Steve Souders alors qu'il était chez Yahoo! pour aider les développeurs à analyser les attributs clés des performances de leur site.
  • Page Speed ​​- Steve est ensuite passé à Google et est sorti avec Page Speed. Les deux sont géniaux et appliquent ses principes pour améliorer les performances du site.
  • Barre d'outils de développeur Web - Il s'agit toujours du deuxième add-no que j'installe, car il me donne des détails aussi détaillés sur mes pages. L'option "Source générée" à elle seule en vaut la peine.

Le hub de modules complémentaires de Mozilla comporte un certain nombre d'excellents modules complémentaires, non seulement pour le développement Web, mais pour tous les types de choses amusantes. Assurez-vous de vérifier.

Chrome:

  • Chrome Sniffer - Me donne un rapide aperçu des bibliothèques et des frameworks utilisés sur une page spécifique.
  • Barre d'outils de développeur Web: identique à l'add-on que j'ai décrit ci-dessus, mais porté sous Chrome.
  • Pendule - Très similaire à la barre d'outils pour développeur Web, mais je trouve que son interface utilisateur est meilleure et que sa fonction de redimensionnement de la fenêtre d'affichage est vraiment bien aménagée..

Contrôle de version

Git a gagné; les doigts dans le nez. Et il existe une pléthore d'outils disponibles; certains sont géniaux et d'autres sont trop compliqués.

  • Git (ligne de commande) - Appelez-moi old school mais j'aime beaucoup utiliser Git via la ligne de commande.
  • GitHub pour Windows - Cela dit, le client Windows de Github est très simple et facilite l'utilisation de Git et de leurs services via une interface utilisateur attrayante..

La virtualisation

Même sous Windows, je dois toujours utiliser des ordinateurs virtuels pour des versions non modernes d'IE, et bien que je souhaite pouvoir tester ces différentes versions côte à côte, je sais au moins que je peux activer des instances d'ordinateur virtuel et résoudre ce problème. Voici le logiciel que j'utilise:

  • VirtualBox - Facile à utiliser, supporte tous les principaux systèmes d'exploitation et, mieux encore, gratuit!
  • BrowserStack.com - Si j'ai besoin de voir à quoi mon site ressemblera sur un autre système d'exploitation, je lance ce formidable service qui crée une session de navigation virtualisée dans mon propre navigateur. Il prend même en charge le développement local afin que je puisse faire la jonction entre mon développeur local et les serveurs cloud de BrowserStack..
  • modern.IE - Microsoft essaie de réduire les frictions liées aux tests d’IE et ce projet est un grand pas en avant dans cette direction. Vous pouvez analyser votre site à la recherche de problèmes communs et télécharger des ordinateurs virtuels pour tester les versions d'IE.

Les VM

Comme je l'ai mentionné précédemment, j'utilise des ordinateurs virtuels pour tester des versions non modernes d'IE. Heureusement, je n'ai pas besoin d'aller récupérer les anciennes images VPC, ce qui a limité mes options pour le logiciel VM. Je peux maintenant aller à modern.IE et récupérer des ordinateurs virtuels pour ma plate-forme.

  • IE8 & 9 - Disponible sur modern.IE dans une variété de systèmes d'exploitation cibles et de plates-formes de machines virtuelles.
  • Ubuntu Server - Lancez l'une des distributions Linux les plus populaires et lancez-vous.

Screencasts

Les screencasts sont l’un des meilleurs moyens d’enseigner aux développeurs. Pour moi, la meilleure option, à mon avis, est Camtasia Studio 8. Cela rend la création, l’édition et la production de captures d’écran triviales. J'étais opérationnel depuis une heure et TechSmith propose des didacticiels vidéo gratuits pour vous aider à démarrer rapidement..


Capture d'écran

Nous y avons tous été. Nous voulons faire une capture d'écran rapide, mais en appuyant sur "PrtScn", et coller dans MS Paint est la succion. Mon choix pour cela est Snagit. Il se lie à la touche "PrtScn" et vous permet de choisir facilement les parties de l'écran que vous souhaitez capturer. Il peut même faire défiler une page entière dans un navigateur si la page est plus longue que la fenêtre d'affichage. Une fois la capture terminée, vous disposez de toute une gamme d’outils d’édition pour peaufiner l’image et la publier. Outil solide.


Serveurs locaux

Les développeurs Web ont besoin de serveurs Web, et comme je travaille avec des développeurs Web MS et non-MS, j’aime avoir la possibilité de basculer entre IIS (dont une version locale est intégrée à Windows) et WampServer, ce qui permet de travailler avec Apache, MySQL et PHP si facile.

J'ai aussi installé Node.js mais je ne l'ai pas encore fait. C'est définitivement sur mon radar et un must-have puisque de nombreux outils (comme Grunt) s'appuient dessus.


la communication

Je suis un travailleur à distance, il est donc vital pour moi de rester en contact. J'essaie d'utiliser autant d'outils que possible pour pouvoir communiquer avec mes collègues et mes pairs de la communauté. Voici ce que j'utilise:

  • Skype - Vous ne savez pas s'il existe un autre service d'appel qui fonctionne aussi bien que Skype. Pour la voix et la vidéo, je ne connais pas mieux.
  • Pidgin - Ce client de messagerie instantanée open source est génial et facile à configurer.
  • XChat - Il est intéressant de voir qu'IRC a repris ses activités après que IM ait été le choix du bavardage pendant si longtemps. XChat m'a bien servi dans cet espace

Ligne de commande

Mes frères * nix me disent comment ils passent leur vie dans le terminal. Je ne peux pas dire que je fais la même chose, mais lorsque je le fais, je choisis Windows PowerShell. Personnellement, c’est juste un "sentiment" car la façon dont vous travaillez (par exemple: accéder aux annuaires) me rappelle les terminaux basés sur * nix. Je ne tire pas pleinement parti de ses fonctionnalités, mais je l'aime bien.


FTP

Pour mes besoins FTP, je n'ai rien trouvé qui remplace FileZilla. C'est open-source et coincé à la jante avec les fonctionnalités que je veux. Ce serait bien s'il avait le support AWS, mais à part ça, c'est l'un de mes favoris.


HTTP Proxy de débogage

J'ai récemment écrit sur les serveurs proxy de débogage Web pour expliquer les avantages réels de l'utilisation d'un analyseur de trafic tiers pour inspecter vos demandes HTTP. Ce sont des outils indispensables, quel que soit le système d'exploitation sur lequel vous travaillez.

  • Fiddler - À mon avis, c'est le meilleur proxy pour Windows. Tant de fonctionnalités et vous pouvez obtenir un livre de plus de 300 pages qui indique tout ce que vous devez savoir sur son utilisation..
  • Charles - Une seconde TRÈS proche et multiplate-forme pour démarrer. C'est mon choix pour OSX et Linux. Si vous voulez une interface utilisateur cohérente sur tous les systèmes d’exploitation, c’est celle-là à choisir.

TCP / IP

Pouvez-vous croire que les développeurs Windows doivent parfois utiliser telnet ou SSH sur des serveurs? Oui, cela arrive parce que non seulement nous travaillons sous Windows, mais nombre d'entre nous supportons les systèmes et les utilisateurs * nix. Allez comprendre. Le mastic est la voie à suivre, et il est également gratuit.


Stockage en ligne

Les applications suivantes ne sont pas nécessairement des applications, mais ces services de stockage en ligne sont utiles pour partager du code avec des pairs:

  • Dropbox
  • SkyDrive
  • Google Drive
  • Box.com
  • Méga

J'ai aussi entendu parler d'un nouveau service de Carbonite appelé Currents, qui vous permet de synchroniser les dossiers et les fichiers. J'envisage Currents pour garder mon ordinateur de bureau et mon ordinateur portable synchronisés.


Plus?

Cette liste est assez longue et au moment où je l'écrivais, le nombre d'applications que j'utilise régulièrement me heurtait, mais je suis encore plus curieux de connaître le nombre d'applications dont je n'ai pas encore entendu parler. J'espère que cette liste aidera certains d'entre vous et j'espère aussi que vous contribuerez aux commentaires. Je veux apprendre de nouveaux outils sympas.