15+ outils frontaux que vous devez connaître: mes découvertes préférées pour 2020

Une autre année s’est écoulée et si vous êtes comme de nombreux développeurs Web de l’industrie, vous avez probablement découvert toute une série de nouveaux outils frontaux que vous avez envisagé d’intégrer à votre flux de travail. Je suis dans le même bateau, d’autant plus que je suis profondément impliqué dans des recherches régulières sur les nouveautés le paysage des outils.


Dans cet article, Je vais rassembler (avec des captures d’écran et des démos) certains des outils frontaux les plus intéressants que j’ai trouvés, je pense que vous les trouverez utiles en 2020. Ce ne sont pas nécessairement les outils les plus populaires ou les plus chauds, mais je pense que chacun d’eux est unique dans son cas d’utilisation et mérite un peu plus d’attention. Ce sont essentiellement mes trouvailles préférées de l’année dans les outils frontaux.

Meilleurs outils frontaux

Raccourci clavier

Outils frontaux: raccourci clavier

Détecter les frappes avec JavaScript n’est pas une tâche trop complexe, mais ce petit utilitaire de l’équipe de GitHub le rend super simple.

Avec lui, vous pouvez déclencher une action sur un élément avec un raccourci clavier.

Les types de raccourcis incluent une touche, une combinaison de touches ou même une séquence de touches. Vous pouvez également avoir plusieurs raccourcis pour une seule action.

Le JavaScript n’est qu’une déclaration avec une importation:

import {install} de ‘./hotkey.js’;

for (const el of document.querySelectorAll (‘[data-hotkey]’)) {
installer (el)
}

Une fois ce code en place, le travail principal se fait en HTML. Voici une liste de liens que j’ai créés pour afficher du contenu en fonction du raccourci utilisé:

  • Exemple
  • Exemple
  • Exemple
  • Exemple
  • Exemple

Remarquez les attributs de raccourci clavier de données ajoutés à chacun des liens. Celles-ci permettent d’activer les raccourcis clavier pour les actions ciblées (dans ce cas, déclencher un sélecteur de cible via CSS). Plusieurs raccourcis clavier sont séparés par une virgule; les combinaisons de touches sont séparées par un symbole plus; et les séquences de touches sont séparées par un espace.

Voici une démo en direct:

Essayez chacun des raccourcis et notez que le code dans le panneau JavaScript est minimal. Très simple à configurer, une fois le module importé. Et comme point secondaire ici, si vous avez une application avec plusieurs touches de raccourci que vous souhaitez afficher dans une fenêtre modale (comme cela se fait sur Twitter, GitHub, etc.), vous voudrez peut-être vérifier QuestionMark.js, et mon vieux projet.

Bien sûr, avec les raccourcis clavier, vous voudrez prendre note des problèmes d’accessibilité, alors assurez-vous de consulter le README du référentiel pour plus d’informations à ce sujet..

Freezeframe.js

Outils frontaux: Freezeframe.js

L’intégration de brèves vidéos dans des pages Web est courante pour montrer qu’une action se déroule. Parfois, un GIF animé est également approprié. Mais les GIF ont tendance à être distrayants car ils lisent leur contenu automatiquement.

Ce petit utilitaire vous permet d’ajouter des fonctionnalités de type vidéo à des GIF animés intégrés dans votre HTML.

Une fois que vous avez inclus la source Freezeframe.js dans votre page, vous n’avez besoin que d’une seule déclaration JavaScript:

nouveau Freezeframe (‘. freezeframe’, {
déclencheur: «survoler»,
superposition: faux
});

Si vous omettez le deuxième argument (par exemple, nouveau Freezeframe (‘. Freezeframe’)), il ne sera par défaut aucun bouton de lecture et l’animation se déclenchera au survol. Le seul défaut est que, parce que c’est un GIF animé, vous ne pouvez techniquement pas "pause" vous pouvez seulement "Arrêtez" il (ce qui signifie qu’il recommence depuis le début). Mais généralement avec des GIF, ce n’est pas un gros problème.

Voici une démo avec trois exemples différents:

L’utilisation de cet outil seul, cependant, pourrait ne pas économiser sur les performances car il semble que les charges GIF complètes dans les coulisses. Mais je suppose que cela pourrait être utilisé avec une bibliothèque de chargement paresseux si le GIF est hors écran lorsque la page se charge.

ARC Toolkit

Outils frontaux: ARC Toolkit

Vos outils front-end devraient inclure de nombreuses options d’accessibilité.

Il s’agit d’une extension Chrome qui ajoute un onglet à vos outils de développement pour vous aider à trouver les erreurs d’accessibilité et les avertissements liés aux directives WCAG 2.1 niveau A et AA.

Deux raisons pour lesquelles cet outil est si génial:

  • Il s’intègre à votre flux de travail de test / débogage existant dans les outils de développement
  • Il est réalisé par The Paciello Group, qui est bien connu dans la communauté des développeurs pour ses perspectives d’accessibilité.

Caractéristiques de la boîte à outils ARC

Une fois l’extension installée, choisissez simplement l’onglet dans vos outils de développement et sélectionnez "Exécuter des tests". La sortie initiale sera similaire à ce que vous voyez dans la capture d’écran précédente. De là, vous pouvez effectuer une exploration vers le bas pour afficher tout problème d’accessibilité potentiel lié à une fonctionnalité spécifique, comme indiqué dans la capture d’écran suivante:

ARC Toolkit Features Drill-down

Remarquez le "Liens" L’option de gauche est cochée. C’est ce que j’ai choisi d’examiner dans ce cas. Cela ajoute également une superposition sur la page indiquant où se trouvent tous les objets sélectionnés, comme vous pouvez le voir ci-dessus les outils de développement sur la page en direct.

Scene.js

Outils frontaux: Scene.js

Chaque année, il semble y avoir une nouvelle bibliothèque d’animation sur le paysage des outils frontaux.

Mon choix pour cette année est Scene.js.

Ce n’est pas celui que vous pouvez simplement ramasser et travailler en quelques minutes comme les autres présentés jusqu’à présent.

Il y a une courbe d’apprentissage pour s’habituer à l’API, qui ressemble à ceci:

let scene = new Scene ({
".Barre de recherche": {
"0%" : "largeur: 50px",
"70%": "largeur: 300px",
},
".ligne": {
"30%" : "largeur: 0%",
"100%": "largeur: 100%",
}
}, {
durée: 1,
accélération: Scene.EASE_IN_OUT,
sélecteur: vrai,
}). exportCSS ();

scene.setTime (0);
laissez basculer = false;

document.querySelector (".soumettre") .addEventListener ("Cliquez sur", une fonction() {
toggle =! toggle;
scene.setDirection (basculer ? "Ordinaire" : "inverser");
scene.play ();
});

C’est le code de l’un des exemples sur la page d’accueil. C’est un simple petit champ de recherche animé. Voici leur démo CodePen:

Encore une fois, ce ne sera pas un outil facile à apprendre rapidement, mais si vous êtes intéressé à essayer une nouvelle bibliothèque d’animation avec ce qui semble être une API assez simple, cela pourrait être une bonne option.

Commento

Outils frontaux: Commento

Le paysage actuel de la confidentialité en ligne pourrait utiliser plus d’outils comme celui-ci. J’envisage des options pour améliorer les systèmes de commentaires sur mon site WordPress depuis un certain temps maintenant et Commento semble solide.

J’aime la fonctionnalité de quelque chose comme Disqus (votes positifs / négatifs, meilleurs commentaires, etc.) mais il a trop de ballonnement.

J’aime aussi que les commentaires WordPress soient auto-hébergés par défaut, mais ils n’ont pas les fonctionnalités supplémentaires de Disqus. Je pense que Commento est un pas dans la bonne direction pour résoudre ces problèmes.

Si vous envisagez de passer d’une plateforme de commentaires existante à Commento, il est pas mal de travail d’après ce que j’ai lu, c’est donc un gros inconvénient.

De plus, bien que Commento vous permette d’importer depuis Disqus, vous ne pourrez pas importer le "votes" sur les anciens commentaires de Disqus ou les avatars des utilisateurs qui ont posté des commentaires.

Il n’y a également aucun moyen d’importer d’anciens commentaires WordPress dans Commento sauf si vous exportez d’abord vers Disqus, puis importez de Disqus vers Commento (ce qui peut être fait à l’aide d’un outil d’importation Disqus lorsque vous vous inscrivez à Commento).

Le dernier inconvénient est le fait que Commento n’est pas gratuit à moins que vous ne l’hébergiez vous-même. Mais quand on considère les problèmes de ballonnement et de confidentialité de Disqus, les petits frais mensuels en valent la peine.

Histoire de Git

Outils frontaux: historique Git

Bien que ce ne soit pas uniquement dans la catégorie des outils frontaux, c’est l’un de mes favoris sur cette liste en raison de sa simplicité et de sa nouveauté dans le fonctionnement..

L’historique Git vous permet d’afficher l’historique de n’importe quel fichier dans un référentiel Git public (GitHub, GitLab ou Bitbucket).

Par exemple, supposons que vous souhaitiez afficher l’historique des modifications apportées au fichier source pour Normalize.css. Le fichier se trouve à:

https://github.com/necolas/normalize.css/blob/master/normalize.css

Pour afficher son historique, remplacez github.com dans l’URL par github.githistory.xyz:

https://github.githistory.xyz/necolas/normalize.css/blob/master/normalize.css

La sortie de la nouvelle URL se charge d’une manière claire et interactive pour afficher les modifications du fichier au fil du temps. Certaines animations intéressantes sont déclenchées chaque fois que vous choisissez un point d’historique, vous permettant de voir quels changements ont eu lieu et quel utilisateur les a validés.

Bascule des fonctionnalités CSS

Outils frontaux: bascule des fonctionnalités CSS

Si vous travaillez toujours dans un environnement où vous devez effectuer des tests de navigateur hérités, cela pourrait être une jolie petite extension Chrome à ajouter à votre boîte à outils de test.

Les bascules de fonctionnalités CSS, similaires à ARC Toolkit mentionnées ci-dessus, ajoutent un nouvel onglet aux outils de développement de votre navigateur.

Dans l’onglet, vous remarquerez une liste de fonctionnalités CSS modernes.

Fonctionnalités CSS disponibles pour basculer

Vous pouvez les basculer pour voir instantanément à quoi ressemble votre page lorsqu’un utilisateur visite la page dans un navigateur qui ne prend pas en charge cette fonctionnalité particulière. C’est un excellent moyen d’obtenir un aperçu rapide de la dégradation de vos mises en page dans les environnements plus anciens.

Lors de la sélection des différentes fonctionnalités, la page sera mise à jour automatiquement pour afficher les modifications. Un site construit avec Flexbox, par exemple, bénéficiera de certains CSS plus anciens pour garder la mise en page saine tout en améliorant progressivement les nouveaux navigateurs.

Créer une appli

Outils frontaux: créer une application

Il ne fait aucun doute que votre flux de travail d’outils frontaux comprend de nombreuses options pour les générations. Ce site Web est une combinaison d’un site d’apprentissage et d’un outil de génération de projet pour les développeurs utilisant (ou souhaitant apprendre à utiliser) webpack ou Parcel, les bundlers d’actifs populaires.

Explorez les catégories sur la gauche pour choisir les options que vous souhaitez pour votre build, puis voyez les fichiers nécessaires et les options de configuration apparaissent dans la fenêtre principale.

Créer des options de configuration d'application

La page est entièrement interactive, vous pouvez donc cliquer sur l’un des fichiers virtuels pour afficher leur contenu, ou vous pouvez survoler une option sélectionnée pour afficher une description ainsi que les parties en surbrillance de la construction qui sont pertinentes pour cette option.

Très utile à la fois pour l’apprentissage et la création de nouveaux projets!

CSSJanus

Outils frontaux: CSS Janus

Dans le domaine de l’internationalisation, il s’agit d’un outil en ligne qui vous permet de convertir des feuilles de style de gauche à droite en droite à gauche et vice-versa.

Cela vous permet de créer facilement des feuilles de style pour les langues de droite à gauche (rtl) comme l’arabe et l’hébreu.

Voici un exemple CSS:

.exemple {
flotteur: gauche;
alignement du texte: gauche;
rembourrage: 1px 2px 3px 4px;
marge gauche: 1em;
position d’arrière-plan: 5% 100px;
curseur: ne-resize;
rayon de bordure: 1px 2px;
}

Ce qui précède sera converti comme suit:

.exemple {
Flotter à droite;
alignement du texte: à droite;
rembourrage: 1px 4px 3px 2px;
marge droite: 1em;
position de fond: 95% 100px;
curseur: nw-resize;
rayon de bordure: 2px 1px;
}

Notez que les différences incluent non seulement les lignes comme float: left et text-align: left mais d’autres comme les déclarations de remplissage horizontal et les valeurs de position d’arrière-plan.

Et utilement, si vous voulez que l’outil ignore un bloc de style ou une seule déclaration, vous pouvez utiliser la directive @noflip:

/ * @noflip * / .ignored {
flotteur: gauche;
}

.non ignoré {
flotteur: gauche;
/ * @noflip * / background: #fff (poster-ltr.png);
}

Voleur de couleurs

Outils frontaux: voleur de couleurs

Color Thief est vraiment soigné et assez simple à utiliser mais est très spécifique dans ses cas d’utilisation.

Fondamentalement, en utilisant cet utilitaire, vous pouvez utiliser JavaScript pour saisir une palette de couleurs de 2 à 20 couleurs en fonction d’une image donnée.

Ce n’est pas quelque chose que vous utiliserez sur chaque site Web ou application, mais c’est une bonne idée et apparemment existe depuis un certain temps et a été mis à jour au cours de la dernière année.

En utilisant l’API simple, vous pouvez saisir une palette de l’image avec une seule ligne:

laissez myPalette = colorThief.getPalette (img, 10);

À partir de là, il suffit de manipuler le tableau renvoyé. Vous pouvez voir une démo que j’ai construite dans CodePen ci-dessous qui saisit un nombre de couleurs entré par l’utilisateur à partir de l’image montrée. Le code que j’utilise sur le tableau est:

myPalette.forEach (
élément => colours.innerHTML + = ""
);

Je crée la palette en utilisant des éléments et des styles en ligne. Les couleurs sont renvoyées sous forme de valeurs RVB.

Dans la démo CodePen, j’utilise une solution de contournement pour contourner les problèmes d’origine croisée que j’ai rencontrés sur CodePen, mais normalement vous n’aurez pas besoin de ces lignes (commentées) dans un environnement habituel.

RegexGuide

Outils frontaux: RegexGuide

Il semble que chaque année, je trouve une application interactive intéressante à ajouter à ma collection d’outils frontaux qui aide à créer des expressions régulières, alors voici l’entrée de cette année. Et si vous êtes comme moi, vous prendrez toute l’aide que vous pourrez obtenir pour les construire.

Celui-ci est un peu bizarre de se mettre en tête au début car il passe par les étapes une à une, comme un sorcier.

Lorsque vous avez terminé et que toutes les conditions sont en place, vous pouvez essayer différentes valeurs pour répondre aux conditions spécifiées et la page indiquera de manière interactive ce qui fonctionne..

Ces types d’outils sont toujours quelques-uns de mes favoris car ils fonctionnent non seulement comme un moyen de créer du code qui serait autrement fastidieux, mais ils vous aident également à apprendre la syntaxe.

Outils frontaux: mentions honorables

Donc, ce sont, à mon avis, certains des outils frontaux les plus intéressants que j’ai trouvés et qui, selon moi, n’ont pas reçu suffisamment d’attention au cours de la dernière année. Je suis sûr que vous avez vos propres trouvailles, n’hésitez pas à les déposer dans les commentaires ci-dessous. En attendant, voici une liste finale de choses qui ne faisaient pas tout à fait la liste principale, mais j’ai pensé qu’il valait la peine d’être mentionné:

  • wehatecaptchas – Une alternative captcha sans déchiffrement d’image ou de lettre / chiffre, pas même une case à cocher pour "confirme que je ne suis pas un robot"
  • simpleParallax – Un moyen facile de faire des effets de parallaxe avec JavaScript.
  • Intégration YouTube simplifiée – Apparemment 224X plus rapide que le code d’intégration traditionnel.
  • Styles par défaut du navigateur – Entrez n’importe quel élément HTML et cet outil vous indiquera le CSS par défaut de chaque navigateur pour cet élément.
  • Qui peut utiliser – Entrez une combinaison de deux couleurs et cet outil vous dira quels types d’utilisateurs malvoyants peuvent utiliser ce combo pour le texte / arrière-plan.

N’oubliez pas de rejoindre notre cours accéléré sur l’accélération de votre site WordPress. Avec quelques correctifs simples, vous pouvez réduire votre temps de chargement de 50 à 80%:

Mise en page et présentation par Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map