🍖 😴 🕘 5 outils gratuits de productivité pour les développeurs Web ✋🏻 👩🏼‍✈️ 🤡

L'auteur de l'article, dont nous publions la traduction aujourd'hui, dit que l'une des façons d'organiser rationnellement le travail du développeur est d'utiliser des outils qui vous permettent de faire plus avec moins d'effort. Ici, il veut parler de 5 merveilleux outils qui permettront à tout développeur d'augmenter sa productivité. Voici une vidéo qui donne un aperçu de ces outils.

Notes préliminaires

Je sais que ceux qui lisent ceci n'ont pas trop de temps, alors je ne décrirai ici que brièvement les outils mis à votre disposition. Si vous aimez quelque chose, vous pouvez facilement l'intégrer dans votre flux de travail. De plus, je tiens à souligner que je n'ai rien à voir avec aucun des projets examinés ici. Je veux juste partager avec tous ceux qui veulent me bénéficier.

1. Excalidraw

Excalidraw

Si vous concevez une architecture logicielle et dessinez toujours toutes sortes de schémas, vous aimerez peut-être le projet Excalidraw . Cet outil vous permet de participer à différents types de schémas de team-building dans le navigateur. Nous à Devias, nous utilisons Excalidraw pour mener des sessions de brainstorming sur diverses questions, telles que le comportement des utilisateurs sur le site ou l'architecture de notre backend. Comme déjà mentionné, Excalidraw prend en charge la collaboration. Et cela, surtout maintenant, pendant la quarantaine, lorsque beaucoup travaillent sur un site distant, est particulièrement utile. Le seul inconvénient de ce projet, résultant de son ouverture et de sa gratuité, est qu'il ne prend pas en charge le stockage des données cloud, ce qui permettrait, par exemple, de sauvegarder les résultats des travaux sur votre compte. Mais, franchement, ce n'est pas un problème particulièrement important, car les résultats du travail peuvent être enregistrés localement, et, si nécessaire, téléchargés sur le site.

2. Transition des icônes Nucleo

Transition d'icônes Nucleo

Passons maintenant à des choses plus pratiques et parlons d'un petit outil qui vous permet de générer des transitions entre deux icônes SVG. Il s'agit d'un projet Nucleo Icon Transition . Ici, vous pouvez configurer l'effet de transition (échelle ou rotation), sélectionner le type d'événement qui déclenche la transition (clic ou survol). Cet outil génère un seul fichier SVG contenant les descriptions des deux icônes et le code JavaScript responsable de la transition. L'essence de cet outil est qu'il équipe les icônes des classes avec lesquelles le script fonctionne.

Afin d'ajouter une icône animée à votre projet, chargez simplement le fichier SVG résultant et ajoutez son contenu à votre code HTML. Voici à quoi pourrait ressembler le contenu de ce fichier.

Contenu d'un fichier SVG généré automatiquement

Voici ce que j'ai obtenu.

Icône animée générée automatiquement

Si vous prévoyez d'utiliser l'effet de transition pour de nombreuses icônes, vous pouvez optimiser le code avec un script, car le même script est utilisé partout.

3. Type d'échelle

Type Scale

Si vous, comme moi, créez souvent des sites à partir de zéro, vous aimerez peut-être le projet Type Scale , qui peut vous aider dans la sélection des polices. Il prend en charge la sélection de polices et la personnalisation de ses propriétés, telles que la taille et le facteur d'échelle. Les paramètres de police sont immédiatement affichés sur la page à l'aide d'un texte de modèle contenant divers éléments. Vous pouvez exporter du code CSS contenant des options de police. J'utilise généralement cet outil lorsque j'ai besoin de polices spéciales, et je ne veux pas passer trop de temps à choisir leurs paramètres.

4. Recherche itinérante

Recherche itinérante

Ma productivité aide à maintenir l'utilisation continue des listes de tâches. Pour gérer ces listes, j'utilise l'application Roam Research, qui, entre autres, vous permet de connecter votre entreprise. Le projet utilise quelque chose comme un langage de balisage spécial. Les relations entre les cas vous permettent d'envisager des listes de tâches sous la forme d'entités interconnectées, ce qui aide, par exemple, à remonter aux origines d'une idée et à analyser les étapes associées à sa mise en œuvre. En fait, la façon dont ce projet fonctionne est assez difficile à expliquer, ou peut-être que je ne sais pas comment exprimer de telles idées. J'ai commencé à utiliser Roam Research il y a quelques jours à peine, mais je dois dire que j'ai vraiment aimé l'idée de ce projet. Cela est peut-être dû au fait qu'il me pousse à créer de courtes notes qui expriment les descriptions les plus importantes, plutôt que longues, des cas que je n'ai jamais lus. Maintenant, Roam Research est un projet gratuit, en raison de sa nouveauté. Mais je suis sûrque son option gratuite existera toujours.

5. Happy Hues

Happy Hues

Cet outil est destiné aux développeurs qui sont un peu impliqués dans la conception. Il s'agit du projet Happy Hues . Ce n'est pas une application, mais une ressource conçue pour ceux qui ne savent pas très bien choisir les palettes de couleurs. Sur ce site, vous pouvez trouver de nombreuses combinaisons de couleurs présélectionnées. Je suppose qu'il est tout simplement impossible de ne pas trouver quelque chose qui correspond à votre style. Je garde toujours cette ressource à portée de main, y recourant, par exemple, lorsque j'ai besoin de trouver une bonne combinaison de couleurs, qui se distingue par un niveau de contraste décent et réussit les tests de disponibilité du contenu.

Sommaire

Je viens de partager avec vous une liste secrète d'outils qui m'aident à travailler de manière productive. Il est possible que certains d'entre eux vous soient utiles. Si vous connaissez des outils intéressants qui augmentent la productivité des développeurs Web, partagez-les dans les commentaires!

Nous vous rappelons que nous poursuivons le concours de pronostics dans lequel vous pouvez gagner un tout nouvel iPhone. Il est encore temps de s'y attaquer et de faire les prévisions les plus précises sur les valeurs d'actualité.

5 outils gratuits de productivité pour les développeurs Web