Outils pour un développement web plus rapide et meilleur

Au fil des ans, la plupart des développeurs Web auront construit un arsenal d’outils ou «d’outils du métier». Récemment, j’ai découvert rsync et je suis surpris de voir comment j’ai pu vivre sans toutes ces années. Quels outils considérez-vous comme les plus convaincants? Veuillez vous en tenir à ceux que vous utilisez régulièrement et jure par. Ils peuvent également être des frameworks, des plates-formes, des éditeurs et tout ce que vous pensez que les développeurs Web devraient utiliser (jquery, joomla, xdebug, vi, notepad ++, etc.).

Je vais commencer par un couple:

  1. rsync – Synchronisation en un clic avec les serveurs en direct ou vice-versa
  2. mysqldump – utilisé avec rsync pour synchroniser les bases de données
  3. styles de test bookmarklet – Live bookmarklet css editor qui bat hors du cycle ‘edit> save> reload’ en permettant une édition en direct.
  4. shell javascript – fenêtre shell javascript attachée à une fenêtre
  5. firebug – Débogueur avancé javascript / css / dom
  6. php-shell – Je l’utilise régulièrement pour tester rapidement des instructions, des fonctions, des classes ou des scripts
  7. CSS-Discussion Wiki – Je serais surpris si vous ne pouviez pas trouver une solution à votre problème CSS sur ce wiki (auquel cas vous devriez l’append)
  8. Font Masortingx – Aide à choisir des stacks de fonts
  9. PHPMyAdmin – Je suis certain que tout le monde l’utilise pour gérer ses bases de données MySQL, mais a pensé que je l’appendais à la liste pour faire bonne mesure

Même si j’ai mis en évidence des outils dans l’environnement LAMP, vous pouvez mentionner des outils que vous utilisez dans votre environnement.

Développement de la stack LAMP

  • IDE: Zend Studio / PDT pour Eclipse
  • Framework PHP: Zend Framework
  • Bibliothèque Javascript: jQuery
  • Contrôle de version du code source: SubVersion avec le client Tortoise
  • Bibliothèque de filtrage HTML: Purificateur HTML
  • Bibliothèque de manipulation d’images: php image
  • Cache de code d’opération: APC
  • Déploiement Javascript / CSS: réduire
  • Débogage d’inspection de balisage / javascript: Firebug
  • Administration de la firebase database: phpMyAdmin
  • Analyseur de charge de page: YSlow
  • Validation du balisage: validateur HTML
  • Client Shell: PuTTY
  • Client FTP: FlashFXP
  • Le manuel PHP
  • Expérience et compétence 🙂

(Je me suis concentré sur LAMP car c’est ce que j’utilise pour le développement web)

Plugins Firefox pour le développement

ColorZilla

Cela s’est avéré très utile pour moi. Vous pouvez regarder n’importe quelle couleur (je vais avec mon orthographe natif ici) sur n’importe quelle page Web, et aussi sur le chrome si vous êtes enclin!

Barre d’outils de développeur Web

La règle est très utile! Sans parler de tout le rest 🙂

VirtualBox facilite le développement car vous pouvez avoir une machine virtuelle comme “serveur” et parcourir les pages de votre système d’exploitation principal. Cela est particulièrement vrai si le système d’exploitation que vous ciblez n’est pas celui que vous développez.

Aptana Studio

Voici certains de mes éléments essentiels:

OS X:

  • éditeur de texte: Textmate
  • Éditeur CSS: CSSEdit
  • Outil FTP: Transmettre

Les fenêtres:

  • éditeur de texte et CSS: Aptana

Plate-forme croisée:

  • Gestion du code source: Git
  • Plugin du navigateur: Firebug
  • Framework: Ruby on Rails
  • Bibliothèque Javascript: Prototype et Scriptaculous
  • Navigation sur plusieurs ordinateurs: Synergy

En outre, voici une description que j’ai faite il y a quelques temps: Les bases de la boîte à outils d’un développeur Web

Cash (pour payer quelqu’un d’autre pour le faire).

Edit: La question dit clairement:

Veuillez vous en tenir à ceux que vous utilisez régulièrement et jure par. Ils peuvent également être des frameworks, des plates-formes, des éditeurs et tout ce que vous pensez que les développeurs Web devraient utiliser.

C’est un point très raisonnable d’externaliser une partie ou la totalité du développement Web.

Si vous trouvez rsync helful, je suis sûr que vous trouverez encore plus l’ unisson !

Juste quelques ajouts / remplacements à l’excellente liste de Galperin:

  • PHP IDE: VS.PHP / Textpad
  • Framework PHP MVC: CodeIgniter
  • Framework PHP ORM: phpDBO
  • PHP Template Framework: PHPTAL
  • Client FTP: FireFTP
  • Package WAMP: WAMP Server

Johnny Cache – Empêche la mise en cache dans Firefox pour certaines URL (sinon, Firefox mettra occasionnellement en cache des CSS et du javascript)

Ma liste

  • IDE: Visual Studio / Netbeans (fichier zip !, presque portable)

  • Éditeur: notepad ++ (portable) avec une police monaco

  • Comparaison de fichiers: winmerge (portable)

  • Contrôle des sources: subversion, tortue

  • Contrôle des tickets: redmine

  • Gestionnaire de fichiers: commandant libre (portable)

  • Navigateur Web: IE, FF (portable), chrome (portable), fer (chrom sans google crap, également portable), qtweb, arora,

  • Plugins FF: firebug, développeur web, xmarks

  • Imclient: pidgin

  • Client de messagerie: gmail

  • Gestionnaire de téléchargement: gestionnaire de téléchargement gratuit (portable)

  • Sites: STACKOVERFLOW !!!, gotapi … et google, tout le temps …

  • Divers: launchy (ne peut pas vivre sans!)

  • Virtualisation: boîte virtuelle (j’ai une image machine pour chaque environnement)

  • Office: openoffice (portable)

  • Pile de lampe: xammp (portable!)

  • Utilisation du disque: windirstat (portable), scanner (portable)

  • Visualiseur PDF: Foxit (portable), sumatrapdf (portable)

  • Uncompressor: portable 7-zip

  • Outil de comparaison M $ sql: sql delta

  • Gestion de M $ sql: visual studio sql manager

  • MySql

  • Gestion MySQL: phpmyadmin, gestionnaire fourni avec mysql

  • Utilitaire de désinstallation: revo unistaller (portable)

  • Nettoyeur de registre: ccleaner (portable)

  • FTP: filezilla (portable)

Comme vous l’avez peut-être remarqué, j’ai une prédilection particulière pour les applications portables …

Si vous souhaitez utiliser l’une des variantes de VIM en tant qu’éditeur de votre choix, un aperçu supplémentaire est la prévisualisation des couleurs CSS , qui “met en évidence les codes couleurs hexadécimaux CSS avec leur couleur réelle”.

jQuery

J’ai récemment commencé à l’utiliser et c’est si facile à utiliser! Tout devient deux fois plus facile à coder! Au moins!

Je ne peux pas insister assez sur cela. Une bibliothèque polyvalente comme celle-ci ne devrait pas être manquée, même par des personnes comme moi, qui ne tiennent généralement pas compte du code des autres.

Ne faites pas attention à moi, je suis juste là pour faire passer le mot à propos de ma suite de debugger / grepper d’éditeur / regex préférée. 🙂

  • EditPad Pro (IMO, le meilleur éditeur de texte disponible)
  • RegexBuddy (le seul débogueur regex réel que j’ai trouvé)
  • PowerGREP (n’utilisez plus jamais Windows Search)

Aucun d’entre eux n’est gratuit, mais ils ont une licence sécurisée et tous prennent en charge l’installation portable (bon pour le lecteur USB de votre trousseau). Mieux encore, l’auteur est un utilisateur SO.

E-Text Editor , vendu sous le nom de «La puissance de TextMate sous Windows». Je le trouve idéal pour le codage HTML et CSS. Il est très léger et comprend de nombreuses fonctionnalités qui augmentent la productivité. Les autres outils de note que j’utilise régulièrement sont:

  • Pyromane
  • Développeur web
  • Validateurs W3C

CakePHP – Framework MVC pour PHP

CakePHP est un framework de développement rapide pour PHP qui fournit une architecture extensible pour développer, maintenir et déployer des applications. En utilisant des modèles de conception connus tels que MVC et ORM dans le cadre de la convention sur la configuration, CakePHP réduit les coûts de développement et aide les développeurs à écrire moins de code.

Termine une grande partie du travail lié à CRUD et a tellement d’autres fonctionnalités qui réduisent le travail que nous devons faire.

http://cakephp.org/

Ajout à d’autres outils mentionnés ici, je trouve souvent une grande aide à avoir un bon proxy de débogage – Fiddler (gratuit, Windows uniquement) et Charles (commercial, multi-plateforme) sont excellents.

Faire le développement de front-end, beaucoup de temps est passé à comprendre pourquoi IE se comporte mal (en particulier IE6). Quelques excellents outils pour cela sont:

  • Barre d’outils de développement Internet Explorer
  • Companion.JS – c’est une application compagnon pour Microsoft Script Debugger qui vous donne des messages d’erreur Javascript utiles dans IE.
  • XRay – c’est un bookmarklet pour inspecter votre mise en page HTML. Cela peut sembler sortingvial, mais peut être très utile pour déboguer votre mise en page dans IE6

J’ai récemment découvert XRefresh qui recharge automatiquement les fichiers locaux (fichier: // URL) dès que vous enregistrez vos modifications. C’est absolument génial lorsque vous êtes au stade initial d’un projet et que vous effectuez des mises à jour fréquentes de fichiers HTML, CSS et JavaScript statiques dans votre répertoire de projet local.

Les clients http en ligne de commande comme lynx, wget et curl sont très utiles, du moins si votre style de développement est orienté vers la ligne de commande et les outils de texte. Je suis surpris qu’ils n’aient pas encore été mentionnés.

  • Par exemple, pour alimenter une url en données POST et imprimer les en-têtes de réponse et la sortie html: echo 'foo=1&bar=2' | lynx -post\_data -mime\_header http://localhost/my/app echo 'foo=1&bar=2' | lynx -post\_data -mime\_header http://localhost/my/app
  • Rapide à exécuter (uparrow, return) une fois dans l’historique de votre shell, moins de risque de rupture de stream ou de distraction que le passage au navigateur.
  • Scriptable, modifiable, reproductible. Vous pouvez le précéder avec un script pour placer la firebase database dans un état de démarrage connu, vous pouvez grep les en-têtes de réponse ou la sortie html pour la chose spécifique qui vous intéresse, et la suivre avec une requête de firebase database l’état est tel que requirejs.

IDE: Visual Studio

Framework: ASP.NET MVC

Côté client: jQuery et jQuery.ui

Barre d’outils de développement Internet Explorer

Si vous êtes un développeur Windows, vous devez consulter ces outils:

  • FreeCommander (Un explorateur d’annuaires avec des stéroïdes)
  • Agent Ransack (Recherche facilitée)
  • Komodo & Notepad ++ (Un combo gagnant)
  • Google Chrome (avec extensions):
    • Testeur de résolution
    • Choisissez la couleur de la page Web
    • SEO
    • Capture d’écran
  • IDE: PHPStorm, PyCharm (refactoring !!!)
  • VIRT: colinux on win32
  • GIT + sh
  • KiTTY + WinSCP

  • webinspector

  • firebug + addys
  • xpathbuddy (tbr)
  • rhino (CLI)
  • envjs
  • phpsh
  • xdebug + kcachegrind

  • ZF

  • poire
  • jQuery
  • outils de fermeture

Le développement ne se limite pas au codage. Il y a la capture des exigences, l’parsing, la conception, l’assurance qualité. Voici une introduction aux différentes phases du développement logiciel . J’ai publié cet article sur Top OSS for Coders il y a quelques années, mais cela rest pertinent pour moi. Cette liste comprend des outils OSS qui me sont très utiles dans toutes les différentes phases du développement logiciel et pas seulement dans la phase de codage.

Étant un gars de Windows devant programmer une application PHP pour un de mes clients, SFTPDrive m’a été très utile. My VM est une dissortingbution Linux Centos, et je travaille la plupart du temps à partir de mon environnement Windows (à quelques exceptions près, bien sûr).

J’utilise principalement Google 🙂

Pour être sérieux, un excellent addon firefox est TamperData – vous permet de modifier les en-têtes et les données de chaque requête.
L’éditeur d’images Paint.NET m’aide quotidiennement et je vous le recommande pour vos besoins d’édition de base.

RXP

Violoneux

Aide ViewState

TopStyle Lite

IE Developer Toolbar

Pyromane

NetBeans ou si vous êtes un gars de la console, emacs

Quelques addons de Firefox que j’ai trouvés très utiles:

  • En-têtes HTTP en direct – Très utiles pour inspecter les en-têtes HTTP de requête / réponse.

  • MeasureIt – Outil pour mesurer des choses à l’intérieur du navigateur.

Un encadré de fenêtres sur la synergie. Construire dans IE d’abord, puis peaufiner pour Firefox / Safari a apporté mon support IE au pair.

J’ai récemment commencé à utiliser HttpWatch et je l’ ai trouvé génial. Il vous permet d’inspecter tout le trafic HTTP de votre application Web. Quelle est la taille de votre réponse AJAX? Le navigateur a-t-il chargé le gif de son cache? Votre page fait-elle des demandes que vous ne connaissiez pas? Ce ne sont que quelques-unes des questions auxquelles HttpWatch peut vous aider à répondre.