Recursos frescos para diseñadores y desarrolladores web (marzo de 2019)

Han pasado muchas cosas durante los últimos meses en el mundo del desarrollo web. En primer lugar, la nueva Editor basado en bloques, con nombre en código Gutenberg, finalmente se ha fusionado en WordPress 5.0. Es un cambio realmente grande desde su inicio, ya que establece una nueva base para que WordPress evolucione en el futuro y cambiará la forma en que los desarrolladores amplían las funcionalidades de WordPress..

En segundo lugar, algunos de nuestros colegas desarrolladores han creado algunas herramientas realmente útiles, como una que permite ver JSON en la terminal y un par de bibliotecas React que pueden ser de gran ayuda en proyectos de diseño y desarrollo web.

Y por último, algunos de los más efectivos. Recursos, referencias y complementos. Se han lanzado para ayudarlo a actualizar sus proyectos de acuerdo con las tendencias más recientes..

Entremos en la lista más completa de recursos de desarrollo web nuevos.

Manual de Gutenberg

El manual oficial de WordPress donde puedes buscar referencias para el diseño., Ejemplos de código para crear bloques. y otros y una guía para contribuir al proyecto. Es tu primera referencia para desarrollar con Gutenberg..

Andamio de bloques

Con el editor basado en bloques, WP-CLI ahora proporciona una manera conveniente de comenzar con creando un bloque Gutenberg con un nuevo comando CLI, bloque de andamio wp. Puedes crearlo e incluirlo en tus complementos y temas existentes..

CGB

Otra forma de iniciar fácilmente un bloque Gutenberg es Crear un bloque Guten (CGB) es una herramienta para generar un repetitivo Para desarrollar un bloque de Gutenberg. Se compone de herramientas modernas como React.js, Webpack, ESLint, Babel, etc. Lo mejor es que No es necesario configurar ninguna de estas herramientas. por lo que simplemente puede centrarse en escribir su código.

Bloques de elementos para Gutenberg

Un plugin de WordPress que te permite inserte cualquier plantilla de Elementor y previsualizarlo dentro del editor. El complemento viene con muchas otras compatibilidades que proporcionan experiencia de edición perfecta entre Elementor y Gutenberg. Echa un vistazo a este video para ver cómo está funcionando..

Bloques atómicos

Un conjunto de bloques de Gutenberg con un número creciente de colecciones. En el momento de escribir este artículo, proporciona la “Bloque Post Grid” lo que te permite agregar una lista de publicaciones de su sitio en un diseño de cuadrícula. También hay un “Bloque de testimonios” que, como su nombre lo indica, para insertar un Testimonio dentro de la página. Echa un vistazo a las vistas previas completas de los bloques en esta página.

Galería de bloques

Un bloque llamativo para insertar tu galería de imágenes, Block Gallery brinda una experiencia perfecta para agregar imágenes a tu publicación. Simplemente suelte sus imágenes, aplique un estilo a la visualización de la galería (estilo de mampostería, carrusel o pantalla completa) y estará listo. Es, en este momento, simplemente el mejor Bloque de Galería para WordPress.

CoBlocks

Un conjunto de bloques del mismo autor que desarrolló la Galería de bloques mencionada anteriormente, CoBlocks consiste en una serie de Bloques que mejorarán el contenido de su sitio con, por ejemplo, Acordeón, tabla de precios, GIF, clic para twittear, y más bloques para agregar.

StagBlocks

Otra suite de Gutenberg Blocks. El complemento trae una serie de Bloques interesantes que muchos de ustedes apreciarían. Incluye el bloque de estadísticas que te permite personalizar las estadísticas dentro de tus publicaciones y páginas. Bloque de tarjetas del sitio web que Vista previa del sitio web en un elegante estilo de tarjeta. Bloque de código que hará que el código con color resaltado.

Bloques de nutria

Además, una colección de Gutenberg Blocks como el “Bloque de Google Maps” insertar un mapa, “Nuestro Bloque de Servicios” a Insertar una lista de servicios con un botón en una vista de cuadrícula, y “Área de testimonios del bloque” Para insertar una lista de testimonios. Otter Block es una colección de Gutenberg Blocks que las empresas y los desarrolladores de temas apreciarían.

Bloques avanzados de Gutenberg

Este plugin viene con un puñado de Bloques avanzados para enriquecer tu contenido. como la tabla de contenidos generada automáticamente, “Giphy Blocks” para incluir la imagen GIF de Giphy.com, “Bloqueo Unsplash” para insertar imágenes de Unsplash.com, “Bloque de anuncios de banner”, WooCommerce “Botón para agregar al carrito”, y mucho más.

Bloque de laboratorio

Block Lab facilita a los desarrolladores la creación de un bloque Gutenberg. El plugin te permite Registrar un nuevo bloque con una interfaz gráfica de usuario fácil de usar y plantillas en PHP. Ni siquiera necesitas aprender React.js.

Bloques EDD

Un complemento que te permite renderizar productos de Easy Digital Downloads en el editor Gutenberg. A diferencia del uso de Shortcode, el bloque mostrará vistas de productos.

Prueba de Gutenberg

¿No está listo para instalar el complemento de Gutenberg o actualizar su sitio a WordPress 5.0? Usted puede simplemente Carga este sitio para probar el nuevo editor..

Nube de Gutenberg

Es como una AppStore para Gutenberg Blocks. Un lugar central donde poder llegar. Bloques de Gutenberg que se pueden usar en WordPress y Drupal. Sí, Drupal también va a adoptar el editor de Gutenberg para su editor..

Ejemplos de Gutenberg

Un repositorio de Github de ejemplos de código para crear Gutenberg Blocks. Aquí puedes encontrar el Bloque más simple a un ejemplo más complejo., como el de crear un “Bloque de recetas” que establece una plantilla en el editor para que los usuarios agreguen receta contenido. Una buena referencia para aquellos que prefieren aprender de ejemplos reales, en lugar de un libro de texto..

GutenbergJS

La versión solo para JavaScript de Gutenberg. Está disponible como un paquete NPM que le permite integrar Gutenberg en cualquiera de sus aplicaciones JavaScript..

Desactivar Gutenberg

Aunque Gutenberg trae nuevas posibilidades a WordPress, pero no todos están listos para ello. Si sus sitios existentes no funcionan bien con Gutenberg, puede instalar este complemento. Te permite deshabilitar el editor de Gutenberg para publicaciones particulares, tipos de publicaciones, roles de usuario, temas, así como deshabilitar las hojas de estilo de Gutenberg en el front-end.

Editor clásico

Alternativamente, puedes instalar este complemento para mantenerte actualizado a WordPress 5.0 mientras usas el antiguo editor clásico. Este plugin será soportado hasta el 2022..

ClassicPress

Otra alternativa es cambiar a un fork de WordPress, ClassicPress. ClassicPress se centra en Negocios, estabilidad y seguridad.. Es compatible con los complementos de WordPress y planea traer nuevas características interesantes en sus futuras versiones. Revisa nuestra publicación: ClassicPress: Alternativa a WordPress sin Gutenberg & React.js

Acelerar WordPress

Como WordPress se ha vuelto tan grande; más que una plataforma de blogs. Gutenberg, especialmente, ha agregado algunas cargas adicionales, códigos, archivos a su sitio que pueden ralentizar su sitio. Este es un detalle que puede consultar para ayudarlo a identificar los puntos de dolor en su sitio y abordar las últimas prácticas recomendadas en la industria..

Vista previa del navegador de Visual Studio Code

Un editor de código visual que agrega un navegador real impulsado por Chrome Headless dentro de Visual Studio Code. Esto te permite Vista previa de su trabajo en tiempo real justo dentro del editor de código y habilita funciones como la depuración en el editor.

Tamaño de paquete

Bundlesize es una herramienta para guarda tu archivo JavaScript agrupamiento tamaño en control. Puede definir el tamaño máximo de cada uno de sus archivos empaquetados y le avisará cuando se trate o haya pasado el tamaño máximo definido. Bundlesize se puede integrar con un servicio de CI como TravisCI y CircleCI para una implementación perfecta del flujo de trabajo en su proyecto.

WP Emerge

Un moderno Marco de temas de WordPress basado en el patrón MVC. Si está acostumbrado a trabajar con un marco PHP como Laravel y Slim, estoy seguro de que realmente apreciará este marco. Puedes usar cosas como Router y Controller, DI Container y Middlerware.

Bot faro

Una herramienta de utilidad que le permite ejecutar Lighthouse en un servicio de CI usando Docker. Es una gran herramienta para automatice el chequeo de rendimiento de su sitio web Cada vez que presiona un nuevo cambio en el código de su sitio web.

Aprende React App

La aplicación Learn React es un recurso para aprender React.js. Pero a diferencia de los otros recursos que hay por ahí, esto debería ser instalado localmente en su computadora. No solo contiene materiales de aprendizaje, sino también códigos y muestras interactivas. La mejor parte es que puedes hacerlo sin conexión una vez que está instalado.

Aceptación de WP

WP Acceptance es una herramienta nueva que le permite realizar pruebas de aceptación. En pocas palabras, las pruebas de aceptación son una serie de Pruebas para emular el comportamiento del usuario.. Existen varios marcos para realizar este tipo de prueba..

Sin embargo, si trabaja principalmente con WordPress, apreciará esta herramienta por su facilidad de uso, ya que está diseñada y adaptada a las necesidades típicas de los proyectos de WordPress..

Brillante

Una biblioteca de JavaScript para emule la reflexión de la iluminación en su sitio web cuando se ve en un dispositivo móvil. Puede ver la demostración en https://pqina.nl/shiny/. Vale la pena señalar que solo funcionará en dispositivos móviles, ya que se basa en una determinada API que solo está disponible en dispositivos móviles..

Reaccionar lucido

ReactLucid es una herramienta para ayudarte aplicaciones de depuración React y GraphQL De una manera más interactiva. Le permite ver la jerarquía de los componentes, los cambios de estado / propiedades dentro de su aplicación React, así como el esquema GraphQL, las consultas y las mutaciones en tiempo real..

Activar características de CSS

Una extensión de Chrome que te permite deshabilita ciertas características de CSS en Chrome. Con esto, puede ver cómo se representará y se comportará su sitio web cuando no existan ciertas características. Muy útil para ayudarlo a implementar nuevas funciones CSS que pueden no estar implementadas en todos los navegadores..

Blendy

Una herramienta que te puede ayudar. Personaliza los modos de fusión de fondo CSS con tu imagen.. Puede previsualizar modos de fusión, cambiar colores y aplicar gradientes. Puedes usar imágenes de Unsplash o subirlas desde la computadora.

Reaccionar elemental

Una colección de elementos React que funcionan de inmediato. No hay CSS externo para importar o personalizar configuraciones para agregar en Webpack. Viene con componentes esenciales como el botón, casilla de verificación, lista de selección, pestañas, información sobre herramientas y mucho más.

FX

Si a menudo se trata de un formato JSON, estoy seguro de que apreciará esta herramienta.. fx es un Herramienta de línea de comandos que le permite visualizar datos JSON en Terminal con el modo interactivo. de una manera que puede expandir o contraer los datos. fx Se puede instalar a través de NPM o Homebrew.

Monica

Mónica está bastante en su propia categoría. Es un tipo de CRM (Customer Relationship Manager) pero no está pensado para su cliente sino para sus seres queridos como su familia y amigos..

Al igual que un CRM, le permite realizar un seguimiento de cosas como sus actividades con ellos, y la última vez que los llamó, etc. Aún más, se puede configurar para recordarle que llame a alguien con quien no ha hablado por un tiempo. Lo llaman un PRM (Personal Relationship Manager).

Marco jónico

El marco iónico ha existido por un tiempo. Pero últimamente, ha hecho un gran salto en su funcionalidad. Ahora no solo es más rápido sino que es iónico ahora. compatible con dos marcos de estrellas en ascenso: React.js y Vue.js.

Esto establece el terreno para que Ionic sea un herramienta agnóstica marco. Así que no solo funciona para marcos específicos, sino que también puede funcionar con los nuevos a medida que el desarrollo de front-end evoluciona en el futuro..

Incapaz

Notable es una aplicación de escritorio para tomar notas. A diferencia de cualquier otra aplicación similar, no viene con formato propietario, WYSIWYG, u otras alarmas típicas. los editor de aplicaciones está principalmente impulsado por Markdown sabor Github. Las notas se almacenan en un archivo plano. .Maryland archivos, así como el archivo adjunto. Simplemente funciona y es simple..

TipTap

TipTap es un editor WYSIWYG construido sobre ProseMirror con Vue.js. Además de heredar un número de características de ProseMirror fuera de la caja, como la increíble compatibilidad con la sintaxis de Markdown, TipTap ofrece algunas características modernas como la Burbuja de Menú donde aparecerá el menú de formato al resaltar texto, la función Sugerencia donde puede marcar o mencionar una persona dentro del contenido, y exportar el Posibilidad de exportar contenido en formato JSON..

Reposicionar

Restplain es un complemento de WordPress que le permite generar fácilmente documentación de sus puntos finales de la API REST de WordPress, incluidos los puntos finales personalizados en su sitio, así como Hacer una llamada a la API desde dentro de los documentos. Una cosa a tener en cuenta es que se basa en el esquema de punto final para generar la documentación, así que asegúrese de haber agregado un esquema adecuado para sus puntos finales personalizados.

React Content Loader

React Content Loader es un componente personalizado de React que le permite mostrar el marcador de posición del contenido mientras se carga el contenido real. Es similar al tipo de cargador que ves en Facebook e Instagram .

Mítica

Mythic es un tema de inicio de WordPress con las mejores prácticas modernas, como la inyección de dependencia, las vistas y los controladores, así como las herramientas modernas, como el uso de Paquete web, Sass, Linting, PHP7 requisito mínimo, y BEM. Es un gran tema para mejorar tu habilidad como desarrollador de temas..

Github refinado

Una extensión del navegador para refinar tu experiencia al usar Github. Agrega varias teclas de acceso directo útiles, refina algunos diseños e interfaces de usuario, agrega automáticamente enlaces a problemas y relaciones públicas, y mucho más.

WC abierto

Open WC es un conjunto de herramientas que le permiten crear un componente web personalizado. Incluye la biblioteca principal para crear un Componente Web, generadores Yeoman para generar rápidamente un “WC abierto” proyecto, que incluye el andamio para la prueba, forro, y continúa la integración.

El WC abierto puede ser una buena alternativa si Prefiero implementar con una característica web nativa en lugar de usar un marco como Vue.js o React.js.

Gridsome

Gridsome es un Herramienta para crear sitios web estáticos y aplicaciones web con Vue.js y GraphQL.. Es capaz de manejar múltiples flujos de datos como desde CMS como WordPress y Drupal, un archivo local como Markdown o Yaml, o API externa como AirTable y Contentful. Esta es una muy buena alternativa a Gatsby.js, especialmente si prefiero Vue.js sobre React.js.

El navegador

Este es el navegador previsto por el propio inventor de la World Wide Web, Tim Berners-Lee. Es un navegador simple para hacer HTML y no muestra una barra de direcciones como un navegador moderno, pero puede verla navegando a Documento> Abrir desde la referencia completa del documento y pegar en una URL y haga clic Abierto. Y allí verás cómo se renderizará tu sitio con el navegador original..

Raster

Raster es un marco de cuadrícula moderno que se construye con modernas especificaciones de HTML y CSS como CSS Grid, CSS Custom Property (Variable) y elementos personalizados. Un marco perfecto para aquellos que les gusta vivir en los bordes..

Tonelero

Un componente Vue.js para agregar un Carrusel o Control deslizante. Es accesible y se puede utilizar a través de Touch, Keyboard, Mouse Wheel y otra navegación asistida, admite RTL y dirección vertical, extensible y, por supuesto, respuesta.