Vous trouverez dans cet article une liste d’outils utilisés par notre agence dans le développement web et mobile.
Il nous a fallu plusieurs années pour trouver les outils adaptés à notre fonctionnemnet, nous les publions aujourd’hui pour faciliter la tâche des autres travailleurs du web.
Avant tout, je m’apprête à dévoiler des informations sur le fonctionnement interne de Buddyweb, notre agence web à Paris. Certains pensent qu’il faut “garder pour soi” ces informations pour ne pas se faire copier par la concurrence.
Chez Buddyweb, nous pensons le contraire. Nous avons nous-mêmes bénéficié d’applications et d’articles réalisés bénévolement, et nous pensons que le savoir doit être partagé plutôt que dissimulé.
Certains choix de cette liste sont subjectifs. Nous travaillons exclusivement sur des Macs, même si presque la totalité des applications sont disponibles sous Windows, certaines ne sont disponibles que sous Mac OS. La plupart de ces outils sont open-source et leur utilisation est donc gratuite.
PS : Il est probable que cette liste ait une durée de vie limitée : de nouveaux outils performants voient le jour et remplacent les anciens en un clin d’oeil.
A. Développement
Une liste des principaux outils utilisés pour le développement.
1. Sublime Text 2
Comment faisions-nous pour travailler sans Sublime Text ? Editeur de texte par excellence, Sublime Text 2 est pratique, simple et dispose de nombreux plugins pour ajouter des fonctionnalités en fonction de son utilisation.
J’utilise personnellement un thème avec une apparence semblable à Github et de nombreux plugins dont : Emmet pour coder rapidement, LiveReload pour ne plus jamais appuyer sur Cmd-R et Sass pour le syntax highlighting des fichiers .scss.
2. Firefox + Firebug
Aucune surprise là non plus ! Malgré l’amélioration de l’outil de développement de Chrome, difficile de faire mieux que Firebug pour inspecter le code.
Chrome est un très bon navigateur, même si trop de plugins ont tendance à le ralentir. Attention à ne pas trop en installer.
3. Mamp Pro
Mamp Pro permet de faire tourner Apache, MySQL et PHP en local, indispensable pour notre activité.
La version Pro permet de configurer l’envoi de mails, d’ajouter des virtual hosts et d’avoir un accès rapide aux configurations Apache et PHP (plusieurs versions de PHP disponibles).
4. CodeKit
CodeKit est une boîte à outils permettant tout d’abord de compiler vos fichiers SASS ou LESS automatiquement quand on les sauvegarde. Il offre d’autres fonctionnalités intéressantes comme l’optimisation des images (adieu ImageOptim), la minification des fichiers et l’utilisation de Bower (installation instanée de frameworks, librairies, CMS, etc.) via une interface visuelle.
5. MySQL Workbench
Malgré une interface pas vraiment user-friendly, MySQL Workbench permet d’y voir clair dans les bases de données SQL. L’utilisation de diagrammes pour construire une base permet de construire des tables visuellement et de générer la commande SQL pour les recréer.
6. Sequel Pro
Toujours dans les bases de données, Sequel Pro offre une alternative plus conviviale à phpMyAdmin. Les possibilités sont plus ou moins les mêmes, mais l’interface plus limpide permet de mieux s’y retrouver quand on a beaucoup de données.
7. MacGDBp
MacGDBp est un outil de debug PHP live pour inspecter les requêtes et les variables. Utile pour les frameworks qui n’ont pas de console de debug.
8. Dash
Grâce à Dash, il est possible de consulter nos documentations techniques préférées, même hors-ligne ! L’outil permet également d’enregistrer des snippets et de les utiliser directement dans les éditeurs de texte.
9. Terminal
Le Terminal est l’outil suprême. Dégagé de toute interface visuelle, il permet d’établir une communication proche avec la machine et les serveurs.
Le terminal Mac dispose de quelques fonctionnalités intéressantes, ma préférée : le drag-and-drop d’un fichier pour obtenir son chemin.
10. Google
Si vous rencontrez un problème, il est probable que d’autres personnes l’aient déjà rencontré avant vous. Google est l’allié idéal pour trouver la réponse.
En utilisant la commande “site:” directement depuis la barre de recherche, on peut limiter la recherche à un seul site. Exemple : “mysql error 1045 site:stackoverflow.com” pour chercher “mysql error 1045” sur Stackoverflow.
B. Code source
Le code source des projets doit être géré avec grande attention : versionning, backups, etc. Voici notre sélection d’outils :
1.Bitbucket
Bitbucket (par Atlassian) permet d’héberger des dépôts GIT simplement. Selon moi visuellement moins attractif que Github, mais ses tarifs sont beaucoup plus intéressants.
2. SourceTree
SourceTree est le client GIT d’Atlassian qui s’intègre parfaitement avec Bitbucket. Gratuit dans sa version complète sur Mac et PC, il fait son travail malgré une ergonomie difficile au premier abord (notamment les traductions françaises des termes en anglais).
3. Gitignore.io
A la racine de chaque projet GIT, on liste sur un fichier .gitignore les modifications dont on ne souhaite pas le versionning (fichiers de cache, fichiers de configurations propres à chacun, etc.).
Gitignore.io permet de générer un fichier .gitignore personnalisé en fonction des plateformes que vous utilisez et ainsi gagner beaucoup de temps dans la création de ce fichier.
4. Transmit
Nous n’aimons pas vraiment travailler avec FTP. Si nous n’avons pas d’autre option, nous utilisons Transmit. Il offre une interface proche du Finder et agréable à utiliser, tout le contraire de ce bon vieux (mais toujours fiable) FileZilla.
5. Dropbox
Utilitaire très populaire pour stocker et partager des fichiers dans le cloud, Dropbox dispose également d’une API performante que l’on peut utiliser pour héberger les backups des sites web. Il suffit de configurer une tache CRON pour faire des copies de sauvegardes régulières sur un compte Dropbox !
C. Teamwork
Pour un travail d’équipe efficace, il faut une d’abord communication efficace. Voici quelques outils utilisés par Buddyweb :
1. Trello
Trello, c’est la todo-list du futur, un tableau intéractif à partager avec toute l’équipe du projet. On peut y lister les toutes tâches et de marquer leur progression. On les assigne simplement à une personne, et on a également la possibilité d’ajouter une capture d’écran et même une check-list.
2. Redbooth
Redbooth (anciennement Teambox) est une application de gestion de projet qui permet de travailler en équipe facilement.
Redbooth est particulièrement efficace pour gérer les relations avec les clients. Il permet d’attribuer des tâches (moins précisément que Trello) et de stocker des fichiers importants comme les livrables et les comptes-rendus des réunions. Beaucoup moins casse-tête que des échanges interminables par mail.
3. Google Drive
Est-il vraiment nécessaire de présenter Google Drive ? Google a réussi son pari de remplacer Microsoft Office et iWork avec son Drive. Les options de partage de documents en temps réel sont d’une simplicité extrême. Les nouvelles versions des applications mobiles (notamment sur iPad) offrent une expérience utilisateur incomparable.
On regrette quand même la difficulté à trouver certains fichiers quand on a pas pris le soin de les nommer correctement (le revers de la médaille de la sauvegarde automatique).
4. Skype
Skype permet de réaliser des vidéo-conférences gratuitement et facilement. Très utile pour réduire les frais téléphoniques avec les clients à l’étranger, et pour partager son écran à ses collèges à distance.
Un compte premium permet d’utiliser la video et le partage d’écran à partir de 3 personnes. Cela permet également de ne plus avoir à utiliser cette application infâme appellée TeamViewer.
5. Messages
Lors d’un travail en équipe, on souhaite parfois demander ou donner une information sans avoir à géner l’ensemble du open-space.
Messages est l’application de messagerie d’Apple. Elle remplace le mail pour demander rapidement une information entre collègues ou envoyer un fichier.
Possibilité de connecter plusieurs comptes de messagerie, notamment Google Hangouts.
D. Testing / Debug
La phase de tests et de debug peut s’avérer plus longue prévue si elle n’est pas bien cadrée. Voici nos outils pour bien gérer cette phase du projet :
1. Mantis Bug Tracker
Ok je vous l’accorde, l’interface de Mantis est assez vieillotte, voire même carrément moche. Néanmoins, ce bug tracker open-source dispose de tout le nécessaire pour mener à bien le debug de la plupart des projets.
Installé sur votre serveur, la charte graphique peut être personnalisée selon vos envies. Pour les plus exigeants, JIRA (payant) est une alternative intéressante.
2. Sauce Labs
Malgré son nom étrange, Sauce Labs est redoutable pour les tests multi-navigateurs et les tests d’applications mobiles.
Capable d’émuler les principaux navigateurs et OSs, sa fonctionnalité Sauce Connect lui permet de venir chercher votre application en local pour l’afficher instantanément dans le terminal/navigateur de votre choix.
Dommage que l’application Mac ne soit pas stable, on se contentera de faire tourner Sauce Labs depuis le navigateur.
3. Un (vrai) PC
Et oui, nous n’utilisons pas que des Macs :)
Après de nombreuses prises de têtes avec des machines virtuelles comme VirtualBox, nous sommes arrivés à la conclusion que la meilleure façon de voir le résultat sur PC, c’est d’utiliser un PC !
4. Simulateur iOS (Xcode)
Le Simulateur iOS est une fonctionnalité de Xcode. Elle n’est pas facile à trouver au premier abord, mais elle est incroyablement fiable et rapide comparée à d’autres émulateurs.
Le simulateur iOS permet d’émuler les iPhones et iPads sous différentes versions de iOS (à installer séparément).
E. Création/intégration graphique et Maquettage
1. Un cahier et un crayon
Toute les technologies du monde ne remplaceront jamais le cahier et le crayon !
Nous commençons toujours par de brefs croquis sur un cahier en amont de toutes nos créations. Et parce que nous sommes un peu snobs, nous aimons écrire sur des Moleskine :)
2. Balsamiq Mockups
Balsamiq Mockups, what else ? Balsamiq Mockups est un outil pour créer les zonings et wireframes pour le prototypage d’un projet. L’application est fluide et fonctionne en cloud.
On a le choix entre de nombreux éléments UI bien catégorisés (mobile, desktop) et la possibilité d’importer des images pour une maquette “hybride”.
3. Adobe CC
La suite Adobe CC est la meilleure suite de logiciels de création réalisée par l’Homme à ce jour. Tout simplement indispensable.
4. GuideGuide
GuideGuide est un plugin pour Photoshop qui permet de créer des grilles pour les maquettes graphiques. Il permet donc de faciliter la création de maquettes graphiques en se basant sur une grille.
5. Tablette Wacom
Indispensable pour faire le lien entre la main de l’Homme et son ordinateur, Wacom produit des tablettes graphiques de qualité.
Avec cet outil il devient possible de dessiner directement dans vos logiciels de création préférés.
6. Can I use
Avec Can I use, il est facile de savoir si un élément est compatible ou non avec tel ou tel navigateur. Rapide et pratique.
7. De l’inspiration
L’inspiration est primordiale dans les métiers créatifs. Voici quelques plate-formes que nous aimons consulter pour trouver l’inspiration : 500px, Niice, Awwwards, Designspiration, Behance, Dribbble, FPO, Httpster…
F. Utilitaires / Général
1. Des Macs
Nous travaillons exclusivement sur Mac. Non, nous ne sommes pas des Apple Addicts ! Enfin presque pas :)
L’ergonomie intuitive de la marque de la pomme nous fait gagner du temps au quotidient. Les milliers de raccourcis clavier sont difficiles à maîtriser pour nos nouvelles recrues mais le bilan est plutôt positif à la fin.
2. Password Assistant
Grâce à Password Assistant, il est possible de générer un mot de passe très compliqué instantanément.
Il est possible de choisir parmi plusieurs options (lettres/chiffres, mémorable, etc.) et de choisir la taille du mot de passe généré.
3. Poedit
Poedit est un petit programme gratuit capable d’ouvrir les fichiers de traduction avec les extensions .po et .mo. Il est très utile pour gérer les traductions de systèmes comme Wordpress par exemple.
4. Lorem Builder
Toujours dans le même style, Lorem Builder est une application qui permet de générer rapidement du Lorem Ipsum. Une petite icône vient se greffer directement dans la barre des tâches.
5. Puush
Puush va mettre en ligne vos captures d’écran et vous fournir une URL raccourcie pour les partager.
Avec certains outils, il est impossible de joindre une image à votre texte. Puush est parfait dans ces situations là car vous pourrez toujours envoyer un lien.
6. Spotify Premium
Pour finir en musique, Spotify dispose d’un catalogue énorme de titres et de playlists aux noms inspirants : travailler en musique, creativity boost, taking care of business ou bien mood booster.
D’après nos tests (prouvés scientifiquement bien sûr), la musique electro est celle qui a le meilleur impact sur la productivité : tempo rapide et pas/peu de paroles pour rester concentré !
Conclusion
Le recherche des bons outils est une tâche chronophage. Avec cet article, nous espérons vous avoir fait gagner du temps et vous avoir montré de nouvelles possibilités.
Cette sélection n’est sans doute pas la meilleure, ni la plus adaptée dans votre cas. L’environnement de chaque agence, équipe ou individu est unique et son workflow doit l’être aussi.
Nous n’avons pas perçu un seul centime pour la publicité que nous faisons à certains logiciels. Malgré tout et grâce à la générosité de leurs développeurs, de nombreux outils sont gratuits ou disposent d’une version gratuite.
Vous avez aimé cet article ? Vous pensez qu’il peut être utile à d’autres ? Partagez-le ! Et si vous utilisez de meilleurs outils, faites-en profiter la communauté et écrivez-les dans les commentaires !
