Le Web a beaucoup changé par rapport à mes débuts dans cette industrie. Les API Web natives sont davantage normalisées sur tous les navigateurs et de nouvelles spécifications CSS et JavaScript sont introduites. Celles-ci permettent aux développeurs de créer de nouveaux outils entourant ces fonctionnalités.

Dans cette série de cette série, vous trouverez des outils de développement Web frontaux, tels que le chargement de liens de prélecture , une bibliothèque pour charger des images, des vidéos et des iframes, ainsi qu’une bibliothèque pour créer facilement un outil de téléchargement de fichiers. Faisons un saut pour voir la liste complète.

CSSFX

Collection d’effets visuels spéciaux s’appliquant à un bouton, à une entrée et à un chargeur. Ces effets sont uniquement construits avec CSS avec très peu de CSS et HTML, et vous pouvez appliquer l’effet simplement en copiant et collant le code.

cssfx

Fusuma

Fusuma est un outil qui vous permet de créer une présentation à l’aide du fichier et de la syntaxe Markdown. Elle est connectée à l’ API de présentation du navigateur natif afin de permettre une expérience similaire à celle de l’outil de présentation tel que PowerPoint et Keynote.

Fusuma

Svelte

Svelte est un outil qui vous permet de créer des applications Web. Contrairement à React.js et Vue.js qui vous obligeront à écrire vos applications Web dans un sytanx spécial ou propriétaire et à utiliser ce qu’on appelle Virtual DOM, il utilisera uniquement les codes HTML, CSS et JavaScript. C’est une approche assez intéressante de la construction d’une application Web.

Svelte

Frontity

Comme React.js est inclus dans WordPress 5.0 pour donner plus de pouvoir à Gutenberg, nous pouvons également l’utiliser immédiatement pour mettre en marche notre plug-in ou thème frontal. La Frontity est un outil qui nous permet de faire exactement cela. construire un thème WordPress moderne avec React.js. Le projet est actuellement à un stade précoce. Vous pouvez suivre les progrès dans leur référentiel Github .

Frontity

Quicklnk

Cet outil est l’initiative de l’équipe Google Chrome visant à accélérer le chargement des sites Web en effectuant une pré-extraction des liens dans la fenêtre. Quick Link est conçu comme une bibliothèque en accès libre avec une configuration très minimale. Vous pouvez simplement ajouter la bibliothèque à votre page et exécuter le lien, et c’est tout.

lien rapide

Élément allumé

Une bibliothèque JavaScript de Polymer pour créer un composant Web natif personnalisé. Il permet de créer facilement le composant personnalisé et de fournir un remplissage multiple aux navigateurs qui ne prennent pas encore en charge les composants personnalisés.

Élément allumé

Brevis

Un framework CSS conçu pour des applications évolutives. Contrairement à un framework tel que Bootstrap, livré avec des composants d’UI perspicaces, Brevis définit simplement une «spécification» qui exclut la référence CSS, la convention de dénomination, certains modèles et palletes. Cela ne suppose pas que l’interface utilisateur que vous allez créer.

Brevis

Terrain de jeu CSS Transform

Un outil pratique pour visualiser CSS Transform. L’outil prend en charge les transformations 2D et 3D, notamment Rotation, Échelle, Perspective et Inclinaison. C’est un excellent outil pour apprendre le fonctionnement de CSS Transform.

Terrain de jeu CSS Transform

Fontanello

Une extension de navigateur pour Google Chrome et Firefox permettant d’obtenir les informations typographiques du texte sélectionné. Ces informations incluent les font-familyfont-weightfont-sizeet color.

Fontanello

GradPad

Un bel outil pour générer des dégradés CSS. Certains contrôleurs vous permettent de personnaliser la sortie du dégradé, par exemple en ajoutant une composition en dégradé, en modifiant leur couleur et leur opacité et en faisant glisser leur position.

GradPad

React95

Une collection de composants d’interface utilisateur React.js qui ressemble à l’interface utilisateur Windows 95. Vous pouvez trouver les boutons, le sélecteur de date, la table, les onglets et les info-bulles. Se sentir nostalgique?

React95

Zoom moyen

Une bibliothèque JavaScript pour implémenter le même effet de zoom d’image que celui observé sur Medium. Assez chic!

Zoom moyen

Flexulateur

Flexbox est l’un des modules puissants de CSS3 pour créer une mise en page, mais cela peut parfois être déroutant. Cet outil vous aiderait à le visualiser en temps réel lorsque vous modifiez la configuration des propriétés Flex.

Flexulateur

Micromodal

Une bibliothèque JavaScript légère pour créer un modal popup. Construit dans un souci d’accessibilité, Micromodal est conforme à la directive standard WAI-ARIA pour une interface modale. C’est une petite bibliothèque JavaScript globale dotée de fonctionnalités puissantes.

Micromodal

Yall.js

Yall.js est une bibliothèque JavaScript permettant le chargement «paresseux» de vos images, de vos vidéos et de votre iframe. Il est également capable de charger une image associée à un arrière-plan via CSS. En dépit de ces puissantes fonctionnalités, Yall.js supporte de nombreux navigateurs modernes, y compris Internet Explorer 11.

Yall.js

Autonumérique

Comme son nom l’indique, AutoNumeric.js est une bibliothèque JavaScript qui vous permet de formater automatiquement des données numériques lorsque vous les saisissez. Il ne nécessite aucune dépendance, ce qui lui permet de maintenir des performances rapides et de s’intégrer facilement dans un cadre. AutoNumeric.js est disponible dans un module officiel de Vue.js , ainsi que dans d’ autres frameworks .

Autonumérique

TextBlock

Une bibliothèque JavaScript avancée qui vous permet d’ajuster des caractéristiques typographiques telles que la taille, les majuscules et les notes pour une typographie toujours réactive sur votre site Web.

TextBlock

Uppy

Uppy est une bibliothèque de téléchargement de fichiers avancée qui vous permet de télécharger des fichiers provenant de nombreuses sources différentes, notamment Dropbox, Instagram, Google Drive et bien sûr de votre ordinateur. En plus de cela, il prend également en charge plusieurs destinations de téléchargement. Vous transférez le téléchargement vers un compartiment Amazon S3 , Tus , en plus du téléchargement sur votre propre serveur.

Uppy

Formation

Formation est un script Shell à exécuter sur votre nouveau macOS afin de simplifier l’installation à certains des outils et applications les plus courants dont vous aurez besoin, notamment le navigateur (Chrome et Firefox), le gestionnaire de packages et de versions tel que NVM et Yarn, et beaucoup d’autres choses.


NerdsFont

Une collection de polices pour votre âme de nerd . La collection regroupe certaines polices populaires dotées de caractères ringards, telles que FontAwesome, Powerlines, Devicons, Octicons, Font Linux, pour en nommer quelques-unes. NerdsFont a également corrigé ces polices pour qu’elles soient compatibles avec Windows, Linux et macOS.

NerdsFont

Laisser un commentaire