Outils et approches pour accélérer le flux de travail du développeur Web

Le développement Web regroupe une énorme quantité de piles, d'outils, de langages de programmation, etc. Certains des outils / workflows ici fonctionneraient dans certains cas, d'autres dans d'autres. Pour mieux aborder cela, considérez cet article comme écrit du point de vue d'un développeur WordPress Front-End, bien que les outils soient assez larges et puissent être utilisés dans de nombreux cas.

1 - tmux

L'un des plus gros changements que j'ai eu dans mon flux de travail a été la configuration de tmux sur ma machine (macOS mais cela fonctionne aussi pour Linux bien sûr). Bien que je ne l'utilise peut-être pas à son vrai potentiel, il fait un excellent travail et me permet de basculer instantanément entre les projets, ce qui fait gagner beaucoup de temps.

tmux a une longue page de «démarrage» écrite sur le référentiel GitHub du projet à extraire. Il fonctionne également avec un clavier dès la sortie de la boîte avec le support de la souris qui peut être activé. tmux utilise des fichiers de configuration qui peuvent être partagés entre les systèmes pour une configuration instantanée.

Alors, comment cela a-t-il changé mon flux de travail?

• tmux vous offre un moyen facile de diviser les écrans et de naviguer dans un projet en appuyant simplement sur deux touches. Ainsi, vous pouvez avoir un «gulp» en cours d'exécution dans une vue, des commandes à exécuter sur une autre, SSH sur le serveur en troisième et des statistiques en quatrième.
• Il vous donne des fenêtres pour chaque projet qui sont comme des «onglets». Ici, vous pouvez passer à différents projets en appuyant sur deux touches. J'ai plus de 20 projets ouverts dans les onglets tout le temps et quand je dois travailler sur un nouveau projet, je le change simplement là-bas, et gulp est déjà en cours d'exécution. Je suis dans les bons répertoires et je peux commencer à travailler en moins de 2 secondes.
• Garde toute la configuration allumée en permanence. Vous n'êtes pas obligé de le faire à chaque fois que vous commencez à travailler, c'est toujours là. Si votre machine s'éteint et que vous la redémarrez, vous pouvez simplement «ressusciter» (avec un simple plugin) votre configuration standard et en 5 secondes environ, elle est à nouveau opérationnelle. C'est drôle qu'il faut une utilisation à 100% sur I7-9900K pour le faire.
• Chaque panneau d'une fenêtre est sa propre instance. Ainsi, vous pouvez facilement exécuter différentes versions de Node pour chaque panneau.

La source

2 - Alfred (ou alternative)

Alfred est une «application de productivité» pour Mac avec des équivalents pour Windows et Linux également. Certaines des choses qu'Alfred fait sont:

• Il vous donne un accès rapide aux programmes ouverts en tapant simplement quelques lettres
• Accédez rapidement aux répertoires
• Naviguez jusqu'à ce que vous trouviez ce dont vous avez besoin directement dans la fenêtre contextuelle
• Ouvrir des fichiers avec différents programmes
• Recherchez sur le Web ou dans vos programmes intégrés et bien d'autres.

Avec son bloc d'alimentation, il existe de nombreuses autres intégrations «Workflow» qui peuvent également automatiser le travail.

Il fonctionne également comme une calculatrice d'accès rapide, gère les extraits de code dans le système d'exploitation (pas besoin même d'y accéder, il les développe automatiquement), enregistre un historique du presse-papiers (bouée de sauvetage), s'intègre au terminal, etc. Vous pouvez tout trouver sur le site de l'application.

Comment je l'utilise:

• Tout d'abord, bien sûr, pour ouvrir des applications. Je ne clique pas avec le pointeur sur les icônes, je tape juste des lettres et c'est parti.
• Utilisez-le comme calculatrice lors de l'écriture de CSS (cela arrive souvent avec des valeurs EM).
• Historique du presse-papiers - J'empile parfois 5 à 6 éléments dans le presse-papiers, puis je les colle dans l'éditeur de code là où c'est nécessaire. Ou revenez quelques jours en arrière pour trouver des courriels, des extraits de code, etc. ou même une petite fonction qui fait quelque chose dans un projet et aiderait dans un autre. Cela prend 2-3 secondes au lieu de 10+ minutes pour parcourir le code.
• Accédez aux répertoires de travail lors de la conception ou directement aux fichiers XD sans parcourir le Finder. Prend à nouveau 2-3 secondes contre une minute environ dans le viseur.
• Extraits - J'ai préparé un bon extrait de «commentaire» pour Asana avec des captures d'écran des résultats, un endroit pour ajouter le lien de validation, un message aux prochains développeurs, l'état s'il est en préparation ou non, etc. Il s'agit d'un message cohérent dans tous les commentaires que l'équipe suit facilement. Il faut moins de 2 secondes pour taper et déplier l'extrait.

3 - Outils terminaux / plugins

Oh My Zsh - Rendez le terminal utile - ZSH est un trésor. Il y a plus de 270 plugins parmi lesquels choisir. Il utilise un simple fichier de configuration, qui n'a pris que quelques minutes pour migrer de mon ancienne configuration vers la nouvelle. tmux fait la même chose, donc toute la configuration du développement a duré quelques minutes. Avec une telle quantité de plugins à choisir, vous trouverez certainement quelque chose d'utile pour votre flux de travail.

L'un des plugins les plus souvent utilisés dans ZSH que j'utilise est "Z", qui apprend les chemins que vous utilisez pour accéder aux choses. Il vous emmènera alors où vous le souhaitez en utilisant seulement quelques caractères clés.

Exemple: $z te passerait à /folder/path/inner/more/content/testing - un raccourci vers l'endroit où vous êtes allé précédemment. Rend le saut entre les répertoires sans douleur.

exa - Une plus jolie sortie LS. Vous pouvez en trouver plus sur leur site Web. En bref, il fournit également une sortie rapide et agréable des fichiers et des répertoires. Encore une fois - jolie.

ripgrep - Une recherche super rapide. Lorsque vous avez besoin de rechercher des milliers de fichiers avec des milliers de lignes de code, vous ne devez pas trop attendre. Ripgrep est là pour vous sauver. Et bien sûr, il est livré avec une tonne d'autres fonctionnalités utiles et des indicateurs significatifs avec lesquels travailler. Il suit également les fichiers .gitignore pour que les résultats restent significatifs.

La source

git-open - Un petit outil de Paul Irish sur Github qui fait ce qu'il dit - il ouvre le dépôt git. Quel est le problème que vous pourriez dire? Vous souvenez-vous de l'URL exacte du projet sur lequel vous travailliez, pour la première fois, en 6 mois? Combien de temps faut-il pour y accéder? Cette commande l'ouvrira directement pour vous. Et plus - il vous dirigera également vers la bonne branche.

Votre CLI! Dans mon cas, notre travail tourne autour de WordPress. Qui heureusement comme une CLI à travers laquelle vous pouvez travailler avec l'installation WP. Une nouvelle configuration de site simple prend des commandes de base comme mkdir (créer un dossier), git clone (cloner un dépôt), wp core download, wp db create, wp db import (le tout de WP-CLI). Tapez tout cela et une configuration rapide et après 1 minute, vous avez une nouvelle configuration en cours d'exécution.

Assurez-vous de vérifier s'il existe d'autres CLI similaires qui fonctionneraient pour vous avec les outils que vous utilisez!

La source

4 - Plugins VS Code

Mon choix pour l'éditeur de code / IDE est VS Code. C'était sublime avant, mais avec une machine plus robuste, je peux maintenant utiliser correctement le code VS sans les 3 FPS que j'avais auparavant en faisant défiler un document plus grand.

Pour la liste ci-dessous, je n'irai pas avec des extensions super célèbres telles que ESLint, GitLense ou des packs de thèmes / icônes, car elles sont bien couvertes dans presque tous les articles que vous trouverez.

• Balise de fermeture automatique - Pour que vous n'ayez pas à écrire les balises de fermeture à chaque fois. Inutile lorsque vous faites du HTML propre avec Emmet, mais aide lorsque vous devez faire une modification rapide
• Balise de renommage automatique - Également très utile lorsque vous effectuez des modifications. Cela changera directement les balises de fermeture / ouverture lorsque vous en éditerez une seule.
• Vérificateur d'orthographe de code - Désormais, vous n'avez pas à vous sentir gêné dans les relations publiques lorsque vous avez écrit quelque chose avec une faute de frappe. Ou utilisez-le simplement pour garder les choses belles et jolies pour les projets open source.
• Action en double - Super utile pour créer de nouveaux fichiers à partir de fichiers existants. C'est une commande à exécuter avec Cmd + P. Fonctionne très bien avec la création de nouveaux fichiers sass / js dans le travail frontal.
• Jumpy - Un outil génial! Appuyez simplement sur un raccourci que vous définissez et il affichera deux petites boîtes aux lettres à côté de chaque mot. Tapez-les et votre curseur y sautera. Un moyen rapide de naviguer dans un fichier sans utiliser de souris.

Et un conseil / rappel professionnel - vous pouvez prévisualiser les images dans le code VS. Lorsque vous développez une interface utilisateur et suivez une image de votre concepteur, vous pouvez simplement la faire glisser vers la fenêtre et la regarder sur le côté.

En bref:

Il est plein d'outils et d'instruments incroyables. Chaque fois que vous repérez un travail répétitif que vous faites ou que vous vous demandez «ne devrait-il pas y avoir un moyen plus simple de le faire», faites simplement une recherche! Il existe très probablement un moyen plus rapide. Si vous faites cela plusieurs fois au cours de l'année, vous vous retrouverez avec un bon flux de travail serré qui vous permet de produire du travail à un rythme très rapide.

Si possible, trouvez également des «mesures de sécurité» - configurez des peluches, automatisez votre configuration de construction, construisez des «modèles de démarrage» avec lesquels travailler, peut-être même écrivez un petit CLI pour vous-même.