Nouvelles ressources pour les concepteurs et les développeurs Web (mars 2019)

Il s'est passé beaucoup de choses au cours des derniers mois dans le monde du développement Web. Tout d'abord, le nouveau éditeur basé sur les blocs, nom de code Gutenberg, a finalement été fusionné dans WordPress 5.0. C'est un très grand changement depuis sa création, car il jette de nouvelles bases pour l'évolution de WordPress et changera la façon dont les développeurs étendent les fonctionnalités de WordPress..

Deuxièmement, quelques-uns de nos collègues développeurs ont créé des outils vraiment utiles, tels que ceux qui permettent voir JSON dans le terminal et quelques bibliothèques React qui peuvent s'avérer d'une grande aide dans les projets de conception et de développement Web.

Et enfin, certains des plus efficaces ressources, références et plugins ont été lancés pour vous aider à mettre à jour vos projets en fonction des nouvelles tendances.

Mettons-nous sur la liste la plus complète de nouvelles ressources de développement Web.

Manuel de Gutenberg

Le manuel WordPress officiel où vous pouvez rechercher des références pour la conception, exemples de code pour la création de blocs et d'autres et un guide pour contribuer au projet. C'est votre première référence pour développer avec Gutenberg.

Bloc d'échafaudage

Avec l’éditeur basé sur des blocs, WP-CLI offre désormais un moyen pratique de commencer à utiliser créer un bloc Gutenberg avec une nouvelle commande CLI, bloc d'échafaudage wp. Vous pouvez le créer et l'inclure dans vos plugins et thèmes existants.

CGB

Create Guten Block (CGB) est un autre moyen de démarrer facilement un bloc Gutenberg. générer un passe-partout développer un bloc de Gutenberg. Il consiste en des outils modernes tels que React.js, Webpack, ESLint, Babel, etc. Le meilleur atout est que vous pas besoin de configurer aucun de ces outils afin que vous puissiez simplement vous concentrer sur l'écriture de votre code.

Blocs Elementor pour Gutenberg

Un plugin WordPress qui vous permet de insérer des modèles Elementor et prévisualisez-le directement dans l'éditeur. Le plugin est livré avec de nombreuses autres compatibilités qui fournissent expérience d'édition sans faille entre Elementor et Gutenberg. Regardez cette vidéo pour voir comment ça se passe en action.

Blocs Atomiques

Un ensemble de blocs de Gutenberg avec un nombre croissant de collections. Au moment d'écrire ces lignes, il fournit la “Bloc de poteaux” ce qui vous permet de ajouter une liste de publications de votre site dans une grille. Il y a aussi un “Bloc de témoignage” ce qui, comme son nom l'indique, consiste à insérer un témoignage dans la page. Découvrez les aperçus complets des blocs dans cette page.

Block Gallery

Un bloc accrocheur pour insérer votre galerie d'images, Block Gallery fournit une expérience transparente pour ajouter des images à votre message. Déposez simplement vos images, stylez l'affichage de la galerie (style maçonnerie, carrousel ou plein écran) et tout est réglé. Pour le moment, c'est tout simplement le meilleur Bloc de Galerie pour WordPress..

CoBlocks

Une suite de blocs du même auteur qui a développé la galerie de blocs susmentionnée, CoBlocks se compose d'un certain nombre de blocs qui amélioreront le contenu de votre site avec, par exemple: Accordéon, Tableau de prix, GIF, Click-to-Tweet, et plus de blocs à ajouter.

StagBlocks

Une autre suite de blocs de Gutenberg. Le plugin apporte un certain nombre de blocs intéressants que beaucoup d’entre vous apprécieraient. Il inclut le bloc de statistiques qui vous permet de personnaliser les statistiques dans vos publications et vos pages. Bloc de carte de site Web qui site de prévisualisation dans un style de carte de fantaisie. Bloc de code qui rendra le code avec la couleur en surbrillance.

Otter Blocks

En outre, une collection de blocs de Gutenberg tels que le “Bloc Google Maps” insérer une carte, “Notre bloc de service” à insérer une liste de services avec un bouton dans une vue de grille, et “Bloc de témoignages” insérer une liste de témoignages. Otter Block est une collection de blocs de Gutenberg que les entreprises et les développeurs de thèmes apprécieraient.

Blocs de Gutenberg avancés

Ce plugin est livré avec une poignée de blocs avancés pour enrichir votre contenu comme la table des matières générée automatiquement, “Giphy Blocks” inclure une image GIF de Giphy.com, “Bloc Unsplash” insérer des images de Unsplash.com, “Bannière publicitaire”, WooCommerce “Bloc de boutons Ajouter au panier”, et beaucoup plus.

Bloc laboratoire

Block Lab facilite la création d'un bloc Gutenberg pour les développeurs. Le plugin vous permet de enregistrer un nouveau bloc avec une interface graphique conviviale et des modèles en PHP. Vous n'avez même pas besoin d'apprendre React.js.

Blocs EDD

Un plugin qui vous permet de restituer les produits Easy Digital Downloads dans Gutenberg Editor. Contrairement à l'utilisation du Shortcode, le bloc affichera les vues des produits..

Testez Gutenberg

Vous n'êtes pas prêt à installer le plugin Gutenberg ou à mettre à jour votre site vers WordPress 5.0? Vous pouvez simplement charger ce site pour essayer le nouvel éditeur.

Nuage de Gutenberg

C'est comme un AppStore pour Gutenberg Blocks. Un endroit central où vous pouvez obtenir Gutenberg Blocks pouvant être utilisés dans WordPress et Drupal. Oui, Drupal va également adopter l'éditeur de Gutenberg pour l'éditeur.

Exemples de Gutenberg

Un référentiel Github d'échantillons de code pour créer des blocs de Gutenberg. Ici vous pouvez trouver le Bloc le plus simple à un exemple plus complexe, comme celui qui crée un “Bloc de recettes” qui définit un modèle dans l'éditeur pour que les utilisateurs puissent l'ajouter recette contenu. Une bonne référence pour ceux qui préfèrent apprendre à partir d'exemples réels plutôt que d'un manuel.

GutenbergJS

La version de Gutenberg exclusivement en JavaScript. Il est disponible sous la forme d'un package NPM qui vous permet d'intégrer Gutenberg dans n'importe quelle application JavaScript..

Désactiver Gutenberg

Bien que Gutenberg apporte de nouvelles possibilités à WordPress, tout le monde n’est pas prêt pour cela. Si vos sites existants ne fonctionnent pas bien avec Gutenberg, vous pouvez installer ce plugin. Cela vous permet de désactiver l'éditeur Gutenberg pour des messages particuliers, types de messages, rôles d'utilisateur, thèmes, ainsi que désactiver les feuilles de style Gutenberg dans le front-end.

Éditeur classique

Alternativement, vous pouvez installer ce plugin pour pouvoir rester à jour avec WordPress 5.0 tout en continuant à utiliser l'ancien éditeur classique. Ce plugin sera supporté jusqu'en 2022.

ClassicPress

Une autre alternative consiste à basculer vers un fork de WordPress, ClassicPress. ClassicPress se concentre sur entreprises, stabilité et sécurité. Il est compatible avec les plugins WordPress et prévoit d’apporter de nouvelles fonctionnalités intéressantes dans leurs futures versions. Consultez notre article: ClassicPress: Alternative à WordPress sans Gutenberg & React.js

Accélérer WordPress

Comme WordPress est devenu si gros; plus qu'une simple plateforme de blogs. Gutenberg, en particulier, a ajouté sur votre site des charges, des codes et des fichiers supplémentaires susceptibles de ralentir votre site. C’est un détail que vous pouvez consulter pour vous aider à identifier les points faibles sur votre site et à y appliquer les meilleures pratiques en vigueur dans l’industrie..

Aperçu du navigateur de code Visual Studio

Un éditeur de code visuel qui ajoute un véritable navigateur Web optimisé par Chrome Headless dans Visual Studio Code. Cela vous permet de prévisualisez votre travail en temps réel directement dans l'éditeur de code et active des fonctionnalités telles que le débogage dans l'éditeur.

Taille de paquet

Bundlesize est un outil pour conservez votre fichier JavaScript groupement taille en échec. Vous pouvez définir la taille maximale de chacun des fichiers que vous regroupez. Il vous alertera dès que la taille maximale définie aura été dépassée. Bundlesize peut être intégré à un service CI tel que TravisCI et CircleCI pour un déploiement transparent du flux de travail dans votre projet..

WP Emerge

Un moderne Cadre de thème WordPress basé sur le modèle MVC. Si vous avez l'habitude de travailler avec un framework PHP tel que Laravel et Slim, je suis sûr que vous apprécierez vraiment ce framework. Vous pouvez utiliser des éléments tels que routeur et contrôleur, conteneur DI et Middlerware.

Phare Bot

Un utilitaire qui vous permet d’exécuter Lighthouse dans un service CI à l’aide de Docker. C'est un excellent outil pour automatiser le contrôle des performances de votre site Web chaque fois que vous appliquez un nouveau changement au code de votre site Web.

Apprendre React App

Apprendre React App est une ressource pour apprendre React.js. Mais contrairement aux autres ressources disponibles, cela devrait être installé localement sur votre ordinateur. Il contient non seulement du matériel d'apprentissage, mais aussi du code et des exemples interactifs. La meilleure partie est que vous pouvez le faire en mode hors connexion une fois qu'il est installé.

Acceptation WP

WP Acceptance est un nouvel outil qui vous permet d'effectuer des tests d'acceptation. Pour le dire simplement, les tests d’acceptation est une série de tests pour émuler le comportement de l'utilisateur. Il existe un certain nombre de cadres pour effectuer ce type de test.

Cependant, si vous travaillez principalement avec WordPress, vous apprécierez cet outil pour sa facilité d'utilisation, car il est conçu et adapté aux besoins typiques des projets WordPress..

Brillant

Une bibliothèque JavaScript pour émuler la réflexion de la lumière sur votre site Web sur un appareil mobile. Vous pouvez voir la démo sur https://pqina.nl/shiny/. Il est à noter que cela ne fonctionnera que sur un appareil mobile, car il repose sur une certaine API qui n'est disponible que sur un appareil mobile..

Réagir Lucide

ReactLucid est un outil pour vous aider déboguer les applications React et GraphQL d'une manière plus interactive. Il vous permet de voir en temps réel la hiérarchie des composants, les modifications d’état / accessoires dans votre application React, ainsi que le schéma, les requêtes et les mutations GraphQL..

Fonctionnalités CSS Toggle

Une extension Chrome qui vous permet de désactiver certaines fonctionnalités CSS dans Chrome. Avec cela, vous pouvez voir comment votre site Web va se rendre et se comporter lorsque certaines fonctionnalités n'existent pas. Très utile pour vous aider à implémenter de nouvelles fonctionnalités CSS qui peuvent ne pas être implémentées dans tous les navigateurs.

Blendy

Un outil qui peut vous aider personnaliser les modes de fondu CSS avec votre image. Vous pouvez prévisualiser les modes de fusion, changer les couleurs et appliquer des dégradés. Vous pouvez utiliser des images de Unsplash ou les télécharger à partir de l'ordinateur..

Réactif élémentaire

Une collection d’éléments React qui fonctionnent immédiatement. Pas de CSS externe pour importer ou personnaliser les configurations à ajouter sur Webpack. Il est livré avec des composants essentiels comme le bouton, la case à cocher, la liste de sélection, les onglets, les infobulles, etc..

FX

Si vous utilisez souvent un format JSON, je suis sûr que vous apprécierez cet outil.. fx est un outil de ligne de commande permettant de visualiser les données JSON dans Terminal avec mode interactif. de manière à pouvoir développer ou réduire les données. fx peut être installé via NPM ou Homebrew.

Monica

Monica est tout à fait dans sa propre catégorie. C'est une sorte de CRM (Customer Relationship Manager), mais il n'est pas destiné à votre client mais à vos proches comme votre famille et vos amis..

Comme un CRM, il vous permet de garder trace de vos activités, de la dernière fois que vous les avez appelées, etc. Il peut même être paramétré pour vous rappeler d'appeler une personne à qui vous n'avez pas parlé depuis un moment. Ils appellent cela un PRM (Personal Relationship Manager).

Cadre ionique

Le cadre ionique existe depuis un moment. Mais ces derniers temps, sa fonctionnalité a fait un bond considérable. Maintenant, non seulement que c'est plus rapide, mais Ionic est maintenant compatible avec deux cadres étoiles montantes: React.js et Vue.js.

Ceci jette les bases pour que Ionic soit un cadre agnostique. Ainsi, non seulement cela fonctionne pour des cadres particuliers, mais peut-être aussi avec les nouveaux, à mesure que le développement frontal évoluera à l'avenir..

Notable

Notable est une application de bureau prenant des notes. Contrairement à toute autre application similaire, elle ne vient pas avec une mise en forme propriétaire, WYSIWYG, ou autres cloches et sifflets typiques. le l'éditeur de l'application est principalement alimenté par Markdown aromatisé par Github. Les notes sont stockées dans un fichier plat .Maryland fichiers ainsi que la pièce jointe. Ça marche et simple.

TipTap

TipTap est un éditeur WYSIWYG construit sur ProseMirror avec Vue.js. Outre l'héritage prédéfini de certaines fonctionnalités de ProseMirror, telles que l'impressionnant support de la syntaxe Markdown, TipTap apporte quelques fonctionnalités modernes telles que la bulle de menu dans laquelle le menu de mise en forme apparaîtra lorsque vous mettez en surbrillance du texte, la fonctionnalité Suggestion une personne dans le contenu, et exporter le possibilité d'exporter du contenu au format JSON.

Restplain

Restplain est un plugin WordPress qui vous permet de générer facilement de la documentation sur vos points de terminaison API RPress WordPress, y compris les points de terminaison personnalisés de votre site ainsi que faire un appel API à partir de la documentation. Une chose à noter est qu'il se base sur le schéma de noeud final pour générer la documentation. Assurez-vous donc que vous avez ajouté un schéma approprié pour vos noeuds finaux personnalisés..

React Content Loader

React Content Loader est un composant personnalisé de React qui vous permet d’afficher un espace réservé pour le contenu pendant le chargement du contenu réel. C'est semblable au type de chargeur que vous voyez sur Facebook et Instagram .

Mythique

Mythic est un thème de démarrage WordPress proposant les meilleures pratiques modernes telles que l’injection de dépendance, les vues et les contrôleurs, ainsi que des outils modernes tels que l’utilisation de Webpack, Sass, Linting, PHP7 exigence minimale, et BEM. C'est un excellent thème pour améliorer vos compétences en tant que développeur de thèmes..

Github raffiné

Une extension de navigateur pour affiner votre expérience avec Github. Il ajoute plusieurs touches de raccourci pratiques, affine certaines dispositions et interfaces utilisateur, ajoute automatiquement un lien vers les problèmes et les PR, et bien plus encore..

WC ouvert

Open WC est un ensemble d’outils vous permettant de créer un composant Web personnalisé. Il comprend la bibliothèque principale pour créer un composant Web, des générateurs Yeoman pour générer rapidement un “WC ouvert” projet, qui comprend l'échafaud pour les tests, peluches, et continue l'intégration.

Open WC peut être une bonne alternative si vous voulez préférer l'implémentation avec une fonctionnalité web native plutôt que d'utiliser un framework comme Vue.js ou React.js.

Gridsome

Gridsome est un outil pour construire des sites Web statiques et des applications Web avec Vue.js et GraphQL. Il est capable de gérer plusieurs flux de données tels que des systèmes de gestion de contenu tels que WordPress et Drupal, un fichier local tel que Markdown ou Yaml ou des API externes telles que AirTable et Contentful. C’est une très bonne alternative à Gatsby.js, surtout si vous préférez Vue.js à React.js.

Le navigateur

C'est le navigateur imaginé par l'inventeur du World Wide Web, Tim Berners-Lee. C'est un navigateur simple pour rendre HTML et ne montre pas une barre d'adresse comme un navigateur moderne, mais vous pouvez afficher en accédant à Document> Ouvrir depuis la référence complète du document et collez une URL et cliquez sur Ouvrir. Et là, vous verrez comment votre site sera rendu avec le navigateur d'origine..

Raster

Raster est un framework de grille moderne construit avec les spécifications HTML et CSS modernes, telles que la grille CSS, les propriétés personnalisées CSS (variable) et les éléments personnalisés. Un cadre parfait pour ceux qui aiment vivre sur les bords.

Hooper

Un composant Vue.js pour ajouter un carrousel ou un curseur. Il est accessible et utilisable via le toucher, le clavier, la molette de la souris et d'autres fonctions de navigation assistée. Il prend en charge RTL et la direction verticale, extensible et, bien sûr, la réponse..