Nouvelles ressources pour les concepteurs et les développeurs Web (avril 2018)

Ce mois-ci, nous avons vu quelques annonces de grands noms de la technologie. Par exemple, Apple a ouvert un nouveau système de base de données, Google a publié un nouvel outil permettant de mesurer la vitesse de votre site Web sur mobile et Github propose un cours gratuit pour vous familiariser avec Git, Github et le codage en général..

Aussi, dans le post d'aujourd'hui, je vais aussi présenter un certain nombre de nouveaux outils qui sont actuellement à la hausse. Passons à ce que nous avons plus sur la liste.

VuePress

Un nouvel outil du créateur de Vue, VuePress est un générateur de site statique conçu avec Vue.js à l'esprit. Il génère et pré-rend du HTML statique pour chaque page, et fonctionne en tant que SPA (application d'une seule page). Certaines fonctionnalités sont prêtes à l'emploi, notamment la possibilité d'ajouter un identifiant Google Analytics, la recherche, la navigation suivante et précédente, la barre latérale et PWA.

IMG-2

Une bibliothèque JavaScript qui introduit un élément personnalisé, img-2. Le nouvel élément ajoute un certain nombre d'optimisations qui ne viennent pas avec la norme img élément, amélioration du chargement de l'image pour les utilisateurs. Avec l’élément personnalisé, l’image sera mise en cache, elle sera aussi charge paresseuse les images et le serveur serviront à partir du cache uniquement lorsque les images entrent dans la fenêtre de visualisation de l'utilisateur. Découvrez la démo.

Tabler

Un élégant tableau de bord / panneau d'administration basé sur Bootstrap 4. Le tableau de bord contient des composants prédéfinis tels que des graphiques, des formulaires, des galeries, un tableau de tarification et un collection d'icônes personnalisées. Un excellent point de départ pour permettre aux développeurs de créer rapidement un panneau d’administration. Découvrez la démo!

DayJS

DayJS Bibliothèque JavaScript pour formater les dates et les heures. Encore plus, DayJS dispose d’API similaires à Moment.js, mais pèse seulement 2 Ko. Cela étant, cela pourrait être un excellente alternative à Moment.js, si vous souhaitez une bibliothèque plus légère tout en restant familier avec ce que vous avez déjà connu.

UnifiedArchive

Une bibliothèque PHP pour gérer les fichiers compressés, UnifiedArchive prend en charge un large éventail de formats, notamment: RAR, Zip, Gzip, Tar, et beaucoup d'autres types de compression. Avec cette bibliothèque, vous pouvez archiver et extraire des fichiers ou des répertoires. Il fournit un poignée d'API pour manipuler des fichiers après avoir été extrait de l'archive. UnifiedArchive est disponible en tant que package Composer.

Laboratoire d'apprentissage Github

Github vient d'annoncer une cours gratuit couvrant principalement Git en Github. Il y a 5 cours en ce moment où vous pouvez apprendre quelques choses utiles telles que comment utiliser Github héberger vos codes, comment utiliser les pages Github obtenir un site ou un blog gratuit pour votre projet et savoir comment gérer les conflits de fusion qui se produisent souvent lorsque vous travaillez avec de nombreux développeurs sur un projet.

Analyseur DOM WordPress UnitTest

Un bon conseil de Takayuki Miyauchi sur test de DOMElement lors de l'exécution de UnitTest dans des applications WordPress. J'ai personnellement trouvé cela vraiment utile; j'espère que vous trouvez le même.

Popmotion

Une bibliothèque JavaScript pour une animation en douceur sur le web, “Popmotion” fournit une API appelée Physique qui vous permet de créer avec des effets d'animation proches de la vie réelle. Il est non sollicité; la bibliothèque simplement affiche les valeurs en fonction de l'ensemble spécifique de la configuration. Cela vous permet d’appliquer ces sorties pour animer n’importe quel support, y compris CSS, SVG, Three.js et même React.js..

Driver.js

Une bibliothèque JavaScript qui vous permet de “conduire” focus utilisateur sur une page. Ceci est particulièrement utile si vous souhaitez introduire des fonctionnalités spécifiques ou les guider vers des tâches spécifiques sur la page. Driver.js est juste 4 Ko de taille, personnalisable et facile à utiliser avec le clavier.

Remplacer le GIF animé par une vidéo

GIF est partout, après avoir fait un excellent retour. Mais le problème avec GIF est qu’il est généralement très énorme. C'est un gaspillage de bande passante, mais la qualité graphique est souvent mauvaise. Ce guide de Google montre comment “Vidéo” peut remplacer le format GIF pour afficher des graphiques animés.

Masque de texte

Une bibliothèque JavaScript pour transformer le texte qui nécessite un formatage spécial comme un numéro de téléphone, une devise ou un numéro de carte de crédit. Au fur et à mesure que l'utilisateur tape, le texte sera automatiquement transformé en un formatage approprié améliorant l'expérience utilisateur. Masque de texte peut être utilisé avec React, Vue ou tout simplement le vieux JavaScript.

Comparer la vitesse du site mobile

C'est un autre outil pratique de Google. Cet outil vous permettra de vérifier la vitesse de votre site Web lors du chargement depuis un mobile et estimer la perte totale de revenus lorsque le site Web se charge lentement. Vous pouvez sélectionnez le pays et la vitesse dont votre site sera testé contre.

VueNut

Compagnon de développement lors de la création d’une application Web avec Vue.js et Vuex, VueNut permet plus facile d'explorer l'état des données stockées et vous permet de manipuler facilement les données pendant le développement. Truc cool!

FoundationDB

Apple a récemment créé Open Source FoundationDB dans Github. C'est un système de base de données de paires clé-valeur cela promet évolutivité et performance. C’est bien d’avoir de grosses entreprises de technologie qui commencent à consacrer certains de leurs produits au libre accès.

Livres d'histoire

StoryBooks est un outil pour construire un composant React en isolation. Il fournit une interface utilisateur sur le navigateur vous permettant de visualiser les différents états de chaque composant ainsi que tester les composants.

GhostText

Une extension de navigateur qui synchronisez ce que vous écrivez sur le navigateur avec votre éditeur de texte ou vice versa. J'ai finalement trouvé cela utile si vous souhaitez pouvoir écrire sur un site Web avec le confort et les fonctionnalités de votre éditeur de code. GhostText est disponible pour Chrome, Firefox et Opera..

Coala

Coala est un L'interface de ligne de commande fournit une interface pour le filtrage et la correction du code, quelles que soient les langues utilisées. Vous pouvez utiliser Coala dans un éditeur de code, l'intégrer à un CI (intégration continue) et le personnaliser à l'aide d'une syntaxe de configuration. .coafile. Coala supporte de nombreux langages tels que CSS, JavaScript, PHP, et vous en trouverez plus dans ce répertoire.

ReactStrap

ReactStrap est une collection de composants Bootstrap 4 transformés en composants React réutilisables. Si vous souhaitez moderniser votre ancien site Web basé sur Bootstrap, vous voudrez peut-être examiner cette bibliothèque..

Reacto

Reacto est un autre outil lié à React. IDE basé sur Electron et conçu pour développer des applications Web avec ReactJS. Cela semble très pratique si votre développement principal tourne autour de ReactJS.

PicoJS

Une bibliothèque JavaScript qui permet la détection de visage. Cela fonctionne avec une photo ou de la caméra intégrée. C'est vraiment fascinant de voir comment la technologie Web a évolué au cours des dernières années..