60 increíbles herramientas de desarrollo web para usar en 2021

60 increíbles herramientas de desarrollo web para usar en 2021

Hay algo romántico y emocionante en abrir TextEdit o Notepad y escribir " ”Para iniciar un nuevo proyecto. Así es como muchos de nosotros comenzamos nuestra obsesión con la codificación para la web. En 2021, las herramientas de desarrollo web hacen más que solo registrar nuestro texto: nos ayudan a crear proyectos y potencian todo el proceso. Más allá de eso, hay muchos más elementos a considerar además de HTML y CSS.

La etapa de planificación, por ejemplo, es vital. Debe considerar el wireframing, las opciones de diseño y los flujos de trabajo colaborativos. Luego está la elección del marco de JavaScript ideal, si utilizar un entorno de desarrollo integrado (IDE) y mucho más.

En esta publicación, veremos 60 herramientas de desarrollo web que querrá considerar usar en 2021. Pero antes de entrar en eso, hablemos de lo que creemos que es una herramienta de desarrollo web.

Índice

    Lo que consideramos una herramienta de desarrollo web

    A primera vista, categorizar una herramienta de desarrollo web parece simple. Sin embargo, incluso sumergirse en el extremo poco profundo presenta algunas consideraciones que difuminan las líneas.

    Por ejemplo, considere si un servicio de transmisión de video cuenta como una herramienta de desarrollo. En una burbuja, probablemente no. Sin embargo, si lo está utilizando para grabar su pantalla para una aplicación de diseño específica, de repente se transforma en una herramienta de colaboración única.

    En nuestra opinión, una herramienta de desarrollo web es algo que te ayuda a lograr los objetivos de tu proyecto de una manera enfocada. Si bien esto no incluye lenguajes de programación individuales, hay están subconjuntos, superconjuntos y marcos como TypeScript que se extienden a ambos lados de la línea. Si desea ganar mucho dinero, vigilar estos aspectos es vital.

    >

    Para otro ejemplo, considere Git. Se podría argumentar que este sistema de control de versiones (VCS) cubre mucho terreno. Hay un lenguaje específico que se usa para ejecutar comandos y la funcionalidad principal ofrece mucho en términos de desarrollo web. Sin embargo, también puede usarlo como una herramienta de aprendizaje, específicamente rastreando registros de seguimiento de problemas y confirmaciones.

    En general, una herramienta de desarrollo web podría ser prácticamente cualquier cosa que haga que su proyecto se ejecute de manera eficiente y productiva. Notarás esta diversidad en la lista de herramientas.

    Hay algo increíblemente emocionante en abrir TextEdit o Notepad y escribir " ”Para iniciar un nuevo proyecto 🤓 Estas 60 útiles herramientas de desarrollo web lo ayudarán a organizar y optimizar su experiencia ✅Haz clic para tuitear

    Cómo las herramientas de desarrollo web pueden agilizar su flujo de trabajo

    Le daremos una advertencia de activación antes de las siguientes palabras: "tiempo de crisis".

    Sí, esta temida frase pide a gritos herramientas de desarrollo web que ahorren tiempo para salvar el día. Las estadísticas muestran que más proyectos utilizan crunch como estándar, y muchas industrias de desarrollo todavía lo usan hoy.

    Independientemente de si su empresa utiliza o necesita horas extras, las herramientas de desarrollo web aún pueden ayudar. Estas herramientas hacen el trabajo pesado y automatizan el trabajo mundano que devora su día. Como tal, ofrecen un impulso orgánico a su productividad.

    Sin embargo, también pueden ofrecer una bonificación si opera bajo un marco de proyecto ágil como Scrum. Por ejemplo, considere cómo una herramienta como JSFiddle puede ayudarlo a compartir fragmentos con otros equipos durante la cola de un sprint, listo para el siguiente.

    Además, si bien las reuniones diarias no van a ninguna parte, un servidor de Discord o un canal de Slack podrían ofrecer una mejor manera de concentrarse y alinear un próximo conjunto de tareas, lejos de la presión de los objetivos de su sprint actual.

    En general, las herramientas de desarrollo web tienen que ver tanto con la planificación como con la ejecución.

    Cómo elegir la pila de desarrollo adecuada para su proyecto

    Es probable que estemos predicando a los convertidos, pero una herramienta de desarrollo web estelar vale su peso en una MacBook M1 de oro rosa. Como tal, obtener la combinación adecuada de herramientas para su proyecto específico es crucial para construir una base sólida para el trabajo.

    Si es algo que no ha considerado antes, una etapa de planificación inicial no tendrá precio. Tomarse un tiempo para decidirse por las herramientas que utilizará retrasa la fase de codificación del proyecto. Sin embargo, recuperará este tiempo más tarde, ya que habrá menos problemas potenciales relacionados con el software. También verá un nivel de salida más consistente (dado que todos estarán en la misma página).

    Consideraciones para elegir su pila de desarrollo

    La elección de la pila adecuada para el proyecto se reduce a lo siguiente:

    • Complejidad: Considere cuán complejo deberá ser su entregable, ya que esto determinará la complejidad de la pila.
    • Escalabilidad: Si su proyecto es para una empresa local, esto necesitará diferentes soluciones para una empresa global. Como tal, necesitará una pila más escalable para lograr sus objetivos.
    • Seguridad: Casi no hace falta decir que lo que elija no debe comprometer la seguridad del usuario y del sitio.
    • Costo: Por supuesto, a nadie le gusta gastar de más, y si se trata de presupuestos ajustados, esto tendrá más importancia que una chequera en blanco.

    Hay dos áreas en las que puede dividir las tecnologías:

    • Lado del servidor: Aquí, querrá ver las tecnologías de backend que usa. Por ejemplo, querrá ver su elección de alojamiento y servidor web, valor clave y almacenamiento SQL, cualquier aplicación y marcos de automatización que utilice y, por supuesto, el lenguaje de programación.
    • Lado del cliente: Podría decirse que las opciones de su herramienta de interfaz serán más sencillas, especialmente cuando se trata de los idiomas que usa. Si bien se incluirán HTML, CSS y JavaScript, su elección del marco de JavaScript (y el marco de automatización) necesitará cierta consideración.

    Cuando se trata de algunas pilas de desarrollo del mundo real, notará que muchos sitios grandes usan alguna combinación de JavaScript y React.js, junto con Nginx. También verá Memcached, Redis y Ruby on Rails en pilas de desarrollo.

    60 increíbles herramientas de desarrollo web para usar en 2021

    Sin más preámbulos, veamos la lista de herramientas de desarrollo web que recomendamos usar en 2021. Las hemos organizado en categorías, pero por lo demás, las herramientas no están en un orden específico. Si tiene prisa, no dude en pasar a una sección en particular que se enumera a continuación.

    Entornos de desarrollo local

    Un entorno de desarrollo local es una parte esencial de cualquier pila de desarrollo. Sin embargo, es particularmente vital para el desarrollo web. Estas son algunas de las herramientas de desarrollo local más destacadas.

    1. DevKinsta

    La pantalla de bienvenida de DevKinsta.

    Puede que estemos sesgados, pero DevKinsta podría convertirse en la herramienta de desarrollo web número uno para 2021 y más allá.

    Tacha eso - nosotros están sesgado, y estamos orgullosos de lo que hemos lanzado!

    Para los no iniciados, DevKinsta es una forma de ayudarlo a activar las instalaciones locales de WordPress en un instante. Es una suite completa que le permite diseñar, desarrollar e implementar un sitio de WordPress para máquinas macOS y Windows (con una versión de Linux en proceso).

    Puede adaptar su instalación a su proyecto actual. Por ejemplo, su "servidor" podría usar Nginx o Apache, su elección de la versión de PHP, ejecutar MariaDB o MySQL, y mucho más:

    Opciones de configuración de DevKinsta.

    Opciones de configuración de DevKinsta.

    También hay más debajo del capó. También puede depurar y probar el correo electrónico a través del servidor SMTP integrado y, para la gestión de la base de datos, puede utilizar la potente herramienta Adminer:

    El administrador de bases de datos de DevKinsta.

    El administrador de bases de datos de DevKinsta.

    En general, creemos que DevKinsta es ideal para el desarrollo moderno de WordPress. Puede encajar directamente en su flujo de trabajo.

    Hemos creado esta herramienta pensando en desarrolladores, diseñadores, autónomos y agencias. Sin embargo, prácticamente cualquier persona con necesidades de desarrollo diarias encontrará valor en DevKinsta, especialmente (pero no exclusivamente) los usuarios de Kinsta.

    Además, ¡DevKinsta es completamente gratis!

    2. MAMP

    El logo de MAMP.

    El logo de MAMP.

    Uno pensaría que las herramientas clásicas para crear e implementar páginas web están muertas y enterradas, dada la llegada de herramientas sandbox más rápidas. Sin embargo, las pilas de servicios web tradicionales, como LAMP, MAMP y XAMPP, siguen siendo sólidas.

    Por lo general, combinan un sistema operativo (SO), Linux, macOS o Windows, junto con el servidor web Apache, la base de datos MySQL y los lenguajes de programación Python, PHP y Perl en una sola pila. Como tal, una pila de servicios web como esta todavía se utilizará en 2021.

    MAMP es la versión específica de macOS de la herramienta. Este enfoque lo ve instalar una pila y trabajar en el diseño y la implementación. Si bien el proceso puede ser más largo que las configuraciones más modernas, todavía hay un nivel similar de flexibilidad bajo el capó, o al menos, el potencial está ahí.

    Mientras esté en una herramienta como DevKinsta, seleccionará de una elegante interfaz gráfica de usuario (GUI), con una pila de servicios web, debe instalar las adiciones que necesita manualmente. Por ejemplo, no hay una forma incorporada de hacer girar un sitio de WordPress sin "desarrollar el suyo". Es una situación similar con el correo electrónico de prueba.

    Al igual que con otras herramientas de entorno de desarrollo local, MAMP es completamente gratuito. Sin embargo, también hay una versión premium de MAMP tanto para Windows como para Mac que aumenta la funcionalidad y proporciona una herramienta de desarrollo web completa y sólida.

    El tablero de MAMP Pro.

    El tablero de MAMP Pro.

    Debido a la flexibilidad y el precio, las pilas de servicios web clásicos todavía se encuentran en muchas computadoras de desarrollo. Los aficionados a la línea de comandos gravitarán naturalmente hacia esta solución, especialmente si le encanta usar administradores de paquetes como Homebrew, Flatpak o Ninite.

    Por supuesto, los desarrolladores de Apache también usarán estas pilas, al igual que los desarrolladores de MySQL y Python o PHP. Por extensión, los desarrolladores de WordPress también se sentirán como en casa aquí.

    3. XAMPP

    La aplicación XAMPP.

    La aplicación XAMPP.

    XAMPP es otra pila de servicios web que recibe mucho cariño de los desarrolladores de PHP, incluidos los que crean productos de WordPress. La "X" en el nombre representa la naturaleza multiplataforma de la herramienta. Ofrece instaladores para máquinas Windows, macOS y Linux:

    La página de descargas de XAMPP.

    La página de descargas de XAMPP.

    Si bien solía haber una diferencia entre las distintas pilas de servicios web, las actualizaciones y mejoras constantes han igualado el campo. Aún así, XAMPP tiene un par de trucos únicos bajo la manga.

    Por ejemplo, MySQL ya no es el sistema de gestión de bases de datos relacionales (RDMS) predeterminado. En cambio, XAMPP usa MariaDB. Es probable que sea una representación más precisa de un servidor de producción, dado el cambio a otras soluciones después de la adquisición de Oracle.

    Además, hay un instalador de aplicaciones web dentro del paquete XAMPP. Bitnami es similar a soluciones como Softaculous, pero Bitnami es específico de XAMPP:

    La página de inicio de Bitnami.

    La página de inicio de Bitnami.

    Si bien hay muchas aplicaciones disponibles, es probable que esté más interesado en el instalador de WordPress. Aún así, hay muchos complementos para elegir, lo que convierte a XAMPP en una solución flexible para el desarrollo local.

    Editores de texto y código

    A la mayoría de los desarrolladores les encanta discutir sobre qué editor de código debería utilizar. Está bien, somos hiperbólicos, pero hay están muchas opiniones sobre el tema, con una ferviente base de fans para cada editor.

    Sin embargo, si las encuestas son correctas, probablemente esté usando Sublime Text, Visual Studio Code (VSCode) o IntelliJ IDEA. Tiene sentido, ya que estas tres herramientas escalan desde una simple edición de texto hasta un entorno de desarrollo integrado (IDE) completo. Sin embargo, también hay otros que merecen una mención. Echemos un vistazo a algunos de ellos.

    4. Código de Visual Studio

    Desde su lanzamiento en 2015, el uso de Visual Studio Code se ha disparado en todos los escritorios de desarrollo.

    El editor de código de Visual Studio.

    El editor de código de Visual Studio.

    Es un editor de código fuente abierto desarrollado por Microsoft que ofrece lo suficiente en la caja para ser considerado un IDE. Sin duda, ofrece suficiente funcionalidad para capturar más de la mitad del mercado: el 55% de los desarrolladores web usan Visual Studio Code a diario.

    En su configuración predeterminada, Visual Studio Code es, ante todo, un editor de texto. Sin embargo, cuando se combina con su biblioteca de extensión, se vuelve modular y lo suficientemente flexible como para satisfacer cualquiera de sus necesidades de desarrollo:

    La biblioteca de extensiones de Visual Studio Code.

    La biblioteca de extensiones de Visual Studio Code.

    Significa que puede instalar linters y fixers para el idioma que elija (sí, ESLint y PHP CS Fixer están ahí), junto con las extensiones de Docker y Vagrant, y mucho más.

    Hablando de lenguajes, Visual Studio Code es compatible con JavaScript, Node.js y TypeScript desde el primer momento. Sin embargo, el ecosistema de extensiones es tan rico que podrá encontrar algo que admita el idioma que está utilizando.

    Además, también encontrará una integración de primer nivel con otros productos de Microsoft, sobre todo GitHub:

    La integración de Visual Studio Code GitHub.

    Visual Studio Code tiene una integración de VCS dedicada con GitHub.

    Visual Studio es completamente gratuito y, dado el conjunto de funciones, es ideal para muchos. Consideramos que VSCode es un excelente término medio entre IDEA y Sublime Text. Hablando de eso, veamos este último a continuación.

    5. Texto sublime

    La aplicación Sublime Text.

    La aplicación Sublime Text.

    Sublime Text es un pilar dentro del mundo de los editores de texto. Es más reducido que la mayoría de las otras soluciones, aunque su apariencia oculta el poder bajo el capó.

    Por ejemplo, verá mucho de lo que Sublime Text ofrece en otros competidores. La paleta de comandos es algo que verá en muchas soluciones porque es fácil de usar.

    Paleta de comandos de Sublime Text.

    Paleta de comandos de Sublime Text.

    Además, existen potentes atajos de teclado de edición, como hacer selecciones múltiples para editar varias columnas a la vez. También el Ir a cualquier cosa La función ofrece combinaciones de atajos de teclado similares a las de Vim para recorrer sus archivos:

    Función Goto Anything de Sublime Text.

    Sublime Text puede combinar pulsaciones de teclas para ayudarte a navegar.

    Sublime Text es una herramienta premium con un período de prueba muy liberal. Se puede considerar gratis, pero para devolverle al desarrollador, debe comprar una licencia para un uso prolongado.

    En nuestra opinión, para muchos codificadores más pequeños o aficionados, Sublime Text ofrece una gran experiencia de usuario (UX), proporcionando lo esencial. Sigue encontrando el favor de muchos desarrolladores por sus agradables efectos visuales, su diseño sencillo y su capacidad de ampliación.

    6. Átomo

    En un momento, Atom disfrutó de un uso intensivo entre los desarrolladores. Sin embargo, desde que llegó Visual Studio Code, se ha visto menos adopción. Es una pena porque es un gran editor de código que es adecuado para muchas aplicaciones diferentes.

    La aplicación Atom.

    La aplicación Atom.

    Es una aplicación desarrollada por GitHub, lo que puede explicar por qué se ha reducido el orden jerárquico en Microsoft. Sin embargo, se actualiza con regularidad y puede considerarse una versión alternativa de Visual Studio Code.

    La edición de texto es funcional y, al igual que su hermano mayor, tiene integración GitHub incorporada. También hay muchos complementos llamados "paquetes":

    Instalador de paquetes de Atom.

    Instalador de paquetes de Atom.

    Hay muchos recursos disponibles para ayudar a adaptar Atom a su flujo de trabajo y proyectos. Atom incluye varios temas para elegir, y algunos, como One Dark, son tan populares que también se han abierto camino en otros editores:

    Tema de Atom's One Dark.

    Tema de Atom's One Dark.

    Atom es un editor de código funcional que merece ser probado. Sin embargo, como Atom se basa en Electron (sin juego de palabras), algunos usuarios se han quejado de que los archivos y proyectos grandes se ejecutan lentamente. Como tal, sugerimos que sea bueno para proyectos más pequeños y scripts rápidos (especialmente con el paquete de terminal incorporado), pero puede que no sea el mejor para trabajos complejos.

    7. Bloc de notas ++

    La página de inicio de Notepad ++.

    La página de inicio de Notepad ++.

    De buenas a primeras, vale la pena señalar que Notepad ++ podría no reemplazar a ninguno de los editores de código de "niño grande" que ya usa, como IntelliJ IDEA o Visual Studio Code. Sin embargo, le dará más poder bajo el capó para scripts simples y aplicaciones generales de edición de texto.

    Dependiendo de sus proyectos, podría tentarlo a cambiar. A pesar de su simplicidad, Notepad ++ se utiliza en una amplia variedad de proyectos.

    Es un editor de código solo para Windows, que explica el elemento "más-más" de su nombre. Por supuesto, el Bloc de notas es un editor de texto sensato que se encuentra de forma predeterminada en las instalaciones de Windows. Notepad ++ se parece a su hermano, pero también incluye características específicas de desarrollo como:

    • Ventanas divididas y con pestañas
    • Soporte para casi 80 lenguajes de programación
    • Funcionalidad de autocompletar
    • Una lista de funciones, que ofrece una excelente manera de ver todas las funciones utilizadas en un archivo de un vistazo

    Además, Notepad ++ es flexible en lo que respecta a la gestión de proyectos. Admite tres enfoques diferentes: sesiones, espacios de trabajo y proyectos. Una vez que comience a profundizar en Notepad ++, verá que puede usarlo para proyectos más extensos que los scripts de una sola página.

    Creemos que Notepad ++ se adaptará a los desarrolladores que desean una gran funcionalidad, que también es personalizable. En uso, tiene esa vibra Vim de código abierto a su favor, que se adaptará a ciertos tipos de proyectos más que a otros.

    8. La suite JetBrains

    Cuando se trata de IDE de desarrollo, el conjunto de soluciones JetBrains estará en (o muy cerca) de la parte superior de su lista. El modelo de negocio es inteligente, ya que si bien hay muchos editores disponibles en JetBrains, todos son en realidad "subconjuntos" de su editor de marquesina, IntelliJ IDEA.

    IntelliJ IDEA es un IDE de Java líder.

    IntelliJ IDEA es un IDE de Java líder.

    IDEA se anuncia a sí misma como un IDE de Java. Es compatible con prácticamente toda la funcionalidad de otras herramientas IDE de su gama. Y como tal, también es compatible con muchos lenguajes de programación.

    Por ejemplo, PyCharm extrae la mayor parte de la funcionalidad de Python de IDEA y la empaqueta como su propia herramienta. También encontrará que phpStorm y WebStorm hacen lo mismo.

    La aplicación PyCharm.

    PyCharm es un IDE específico de Python que es popular en el espacio del lenguaje.

    Usar IDEA es muy sencillo: JetBrains ha hecho un gran trabajo para que usted codifique en lugar de meterse en configuraciones y configuraciones. Puede ser una sorpresa, pero la línea entre usar un editor de línea de comandos como Vim y usar IDEA es a menudo delgada.

    Hay un enfoque similar en el flujo de trabajo y la eficiencia presente en ambas herramientas, aunque IDEA también le permite importar enlaces de teclado Vim si también se siente cómodo trabajando de esa manera.

    Extensión de combinaciones de teclas IDEAs Vim.

    Las extensiones IDEA le permiten usar enlaces de teclado Vim para que se sienta como un mago.

    Supondríamos que probablemente esté utilizando IntelliJ IDEA si está trabajando como parte de un gran proyecto o empresa con un acuerdo de software en vigor. Podría ser para compartir proyectos o trabajar en un entorno coherente. Muchos desarrolladores de WordPress están utilizando productos JetBrains debido a lo robustos que son en la gestión de proyectos.

    El precio también es un factor, e IntelliJ se basa en un modelo de suscripción que a menudo se ejecuta en tres o cuatro cifras por año.

    Pantalla de precios de IntelliJ IDEA.

    Pantalla de precios de IntelliJ IDEA.

    Aun así, hay están algunas ediciones "comunitarias" de los productos JetBrains. Sin embargo, son versiones reducidas del software principal; esencialmente, son soluciones de código abierto con los elementos propietarios eliminados.

    Además, JetBrains ofrece precios competitivos para proyectos de código abierto, nuevas empresas, instalaciones educativas, Docker Captains y muchos más grupos especializados.

    Herramientas de diseño web y creación de prototipos

    Por supuesto, una aplicación web no es nada sin una buena experiencia de usuario (UX). Como tal, la creación de prototipos de sus diseños y elementos visuales a menudo necesita una herramienta dedicada. Las herramientas de diseño serán vitales tanto en el lado del servidor como en el del cliente del desarrollo. Aquí hay algunas opciones populares.

    9. Figma

    Figma es una herramienta de desarrollo web que se menciona a menudo y que te permite colaborar en el diseño.

    El editor de Figma.

    El editor de Figma.

    Puede utilizar el editor de arrastrar y soltar para crear interfaces y otros elementos de cara al usuario. Para los desarrolladores, también puede obtener fragmentos de código para implantar en sus proyectos. Figma hace que el proceso, desde la ideación hasta la implementación, sea fluido y mantiene las revisiones bajas a lo largo de toda la cadena del proyecto.

    También obtiene el beneficio de un conjunto homogeneizado de herramientas para ayudar con las opciones de fuente y color. Este proceso contrasta con el uso de herramientas independientes como Escala de tipos:

    El sitio web de Type Scale.

    El sitio web de Type Scale.

    … Y un subconjunto de herramientas de desarrollo web como Adobe Color, Coolors, varios selectores de color y mucho más.

    El selector de color Coolors.

    El selector de color Coolors.

    Si bien Figma tiene valor para proyectos de un solo desarrollador, tiene más beneficios para un equipo a medida que aumenta de tamaño. A los equipos les gustarán los aspectos colaborativos de Figma, como el repositorio central de activos y los componentes reutilizables. Los líderes de equipo también apreciarán las opciones de informes integrales para ver cómo los miembros del equipo usan los diversos sistemas de diseño.

    En cuanto a los precios, Figma cuesta $ 12 por "editor" en el nivel estándar, que se eleva a $ 45 por "editor" para equipos basados ​​en la empresa (para "editor", lea "asiento", es el mismo concepto). Como tal, el precio podría aumentar en función de la cantidad de editores que le gustaría incorporar.

    10. Bosquejo

    Sketch es una aplicación solo para macOS cuyo nombre también se revisa mucho entre los desarrolladores:

    El logo de Sketch.

    El logo de Sketch.

    Es popular porque Sketch incluye muchas funcionalidades bajo el capó, y también es muy fácil de usar, lo cual tiene sentido dado que es una aplicación nativa de macOS. Se parece un poco al Xcode IDE de Apple, lo cual no es nada malo, y se siente genial para navegar.

    Por supuesto, puede realizar funciones esenciales como la edición de vectores y el cambio de tamaño de restricciones. Sin embargo, hay mucho más en la aplicación que lo ayudará a generar diseños y exportarlos a otros de una manera rápida.

    Por ejemplo, tome la funcionalidad Diseño inteligente de Sketch, que utiliza un cambio de tamaño adaptativo para que coincida con sus dimensiones y diseño actual. También hay muchas herramientas colaborativas para que todos puedan sumergirse en un diseño y ayudar a perfeccionarlo.

    Una descripción general de Sketch para equipos.

    Una descripción general de Sketch para equipos.

    Sketch se diferencia de una herramienta como Figma en que un profesional independiente o un desarrollador solitario puede participar de forma gratuita y luego comprar una suscripción una vez que sea necesario. En este sentido, el precio de Sketch es un pago único de $ 99 o $ 9 por mes por usuario.

    11. InVision Studio

    InVision Studio se vende únicamente como una aplicación de "diseño de pantalla". Tiene sentido y también es más claro de entender. InVision Studio proporciona todas las funciones y funciones estándar que usted esperaría, como un editor intuitivo basado en capas y compatibilidad con vectores.

    La aplicación InVision Studio.

    La aplicación InVision Studio.

    Sin embargo, hay mucho más en el cuadro relacionado con la creación de prototipos y la creación de animaciones. Por ejemplo, puede señalar, hacer clic y arrastrar para vincular mesas de trabajo y pantallas. Esta función le permite crear animaciones como parte del proceso de diseño en lugar de como algo que entregue más tarde.

    Animaciones dentro de la aplicación InVision Studio.

    Animaciones dentro de la aplicación InVision Studio.

    Hablando de transferencias, todo el equipo puede trabajar dentro de InVision Studio debido a las bibliotecas de componentes compartidas, las opciones de sincronización global, una sólida Inspeccionar modo, y más.

    La estructura de precios también es competitiva. La versión gratuita de InVision Studio le brinda casi toda la funcionalidad de la versión paga, con solo una restricción en la cantidad de documentos que puede guardar. El nivel Pro es valioso por la potencia de la aplicación (alrededor de $ 95 / usuario / año).

    12. Diseñador de afinidad

    Si es un usuario de Adobe Illustrator, se habrá encontrado con Affinity Designer en el pasado. El enfoque de Serif para el diseño gráfico busca darle una oportunidad a la solución de Adobe:

    La aplicación Affinity Designer.

    La aplicación Affinity Designer.

    Desde su lanzamiento, ha ganado una base de usuarios floreciente debido a su buena relación con la comunidad, principios de diseño estelares y un modelo de precios atractivo. Encontrará versiones para Mac, Windows y iPad, y cada versión puede funcionar con vectores, rásteres o ambos a la vez:

    Editor de Affinity Designer.

    Editor de Affinity Designer.

    Las herramientas a las que está acostumbrado de Illustrator están presentes, junto con un conjunto completo de perfiles de color y opciones de exportación:

    Las opciones de exportación en Affinity Designer.

    Las opciones de exportación en Affinity Designer.

    En resumen, las características y la funcionalidad están en su lugar para crear gráficos profesionales para sus proyectos. Además, el precio es súper competitivo. Cuesta alrededor de $ 50 a precio completo, que es un pago único. No tiene una opción adecuada basada en la nube como Illustrator. Aun así, por una tarifa única, obtiene el alcance de Adobe presentado de una manera subjetivamente mejor.

    13. CodePen o JSFiddle

    Cuando hablamos de IntelliJ IDEA anteriormente, no mencionamos una de sus características menores pero útiles: los archivos Scratch. Le permite escribir y probar rápidamente un fragmento de código sin tener que afectar su proyecto de trabajo actual.

    Para los usuarios de otros editores de código, una solución como CodePen o JSFiddle es un excelente sustituto. Ambos funcionan de manera similar: hay tres editores de texto para HTML, CSS y JavaScript, y una pantalla de salida para ver el resultado:

    La consola CodePen.

    La consola CodePen.

    Puede nombrar su "Pen" o "Fiddle" según su plataforma, guardarlo y compartirlo con otros. Es una idea tan simple, una que puede ayudarlo a tomar sus pensamientos a medias sobre un aspecto de un proyecto y realizarlos en segundos.

    Para los desarrolladores que desean arrojar luz sobre un elemento particular dentro de un archivo y mostrar dónde son posibles los cambios, un "IDE en línea" es invaluable. Además, la colaboración también es posible a través del chat o un "micrófono en vivo":

    La pantalla de colaboración de JSFiddle.

    La pantalla de colaboración de JSFiddle.

    En general, un IDE en línea podría considerarse una herramienta de desarrollo web "durmiente" en el sentido de que no se menciona con demasiada frecuencia, pero muchos desarrolladores lo utilizan para crear un código mejor.

    Clientes de Git

    Tener una forma centralizada de almacenar código, documentar los cambios y trabajar en él con un equipo sin duplicación es una tarea para un sistema de control de versiones (VCS). Aquí hay algunos clientes que manejan un VCS: git.

    Analicemos primero el VCS en sí.

    14. Git

    Git es esencial para un desarrollador moderno y, como tal, es una de las herramientas de desarrollo web más importantes disponibles. En pocas palabras, es una forma de documentar los cambios que realiza en el código de su proyecto y almacenarlos en "repositorios":

    Una lista de confirmaciones de WordPress GitHub.

    Una lista de confirmaciones de WordPress GitHub.

    Git fue inventado por el creador de Linux Linus Torvalds. y utiliza una serie de comandos para agregar cambios de archivo a un "área de ensayo", donde luego los "confirmará" en un repositorio. Desde allí, los "enviará" a un repositorio remoto alojado en línea.

    Si bien no es el único VCS disponible, el equipo de desarrollo de WordPress todavía usa Trac para muchos proyectos, es el más destacado. Un VCS como Git o Trac ayuda a los equipos a trabajar juntos alojando el código en una ubicación central.

    Los comandos básicos son funciones de una sola palabra precedidas de git, que a menudo se utilizan desde la línea de comandos. Por ejemplo:

    git add file.php

    Esta expresión agrega file.php a su área de preparación. En otras palabras, registra los cambios como algo que le gustaría almacenar sin darle los toques finales. Puede hacer esto con un archivo o un proyecto completo si lo desea.

    Para confirmar el archivo, ejecuta git commit. Desde aquí, puede agregar un comentario para contarles a otros sobre sus confirmaciones. Después de esto, sus cambios se almacenan y se envían a la "rama" principal. Por supuesto, eso depende de si está trabajando en un "repositorio" remoto.

    Si es nuevo en Git y VCS en general, GitLab tiene una excelente guía para principiantes sobre el uso de Git en la línea de comandos. También hablaremos un poco sobre el propio GitLab más adelante.

    15. GitHub

    Página de GitHub de Kinsta.

    Página de GitHub de Kinsta.

    Para la gran mayoría de desarrolladores, GitHub es la lugar donde se almacenan los repositorios de Git del proyecto:

    Tres de los muchos repositorios de WordPress GitHub.

    Repositorios de WordPress GitHub.

    Es una solución propiedad de Microsoft que cubre mucho más que el alojamiento Git. También hay un montón de herramientas de prueba automatizadas y un intento de ofrecer funciones de colaboración adicionales.

    Funciones de colaboración de GitHub.

    Funciones de colaboración de GitHub.

    Para proyectos de código abierto, plataformas como GitHub son casi la opción de facto. Dado esto, GitHub como herramienta de desarrollo web no tiene precio para muchos usuarios, estudiantes y desarrolladores de código abierto en general. Es especialmente cierto cuando se busca en el rastreador de problemas de GitHub para resolver un problema con los paquetes instalados.

    Rastreador de problemas de GitHub.

    Rastreador de problemas de GitHub.

    GitHub no es solo para almacenar repositorios de programas. También es para otros proyectos de codificación, como desarrollo web e incluso libros.

    En general, GitHub es una herramienta fantástica que ayuda a construir una comunidad saludable a partir de muchas ramas dispares. Sin embargo, no es la única plataforma que existe.

    16. GitLab

    El logo de GitLab.

    El logo de GitLab.

    Lo mencionamos anteriormente, pero GitLab es un competidor de GitHub, con un objetivo similar. Es esencialmente un host para repositorios de Git, pero también ofrece algunos otros extras.

    Mientras que GitHub se autodenomina una "plataforma de desarrollo", GitLab se centra en "DevOps". En su nivel gratuito, GitLab ofrece todas las etapas del ciclo de vida de DevOps, pruebas de seguridad de aplicaciones estáticas y alrededor de 400 minutos por mes para desarrollo continuo (CD) e integración continua (CI).

    GitLab cae en su sentido de comunidad, que es la gran diferencia cuando se trata de GitHub. Se trata más de la implementación y el ciclo completo de un proyecto. No es negativo, pero significa que GitLab es más una plataforma "insular", posiblemente no tan adecuada para proyectos de código abierto como GitHub.

    Para la mayoría de los equipos, el nivel gratuito de GitLab será suficiente. Por alrededor de $ 230 por año, por usuario, obtiene acceso a análisis de su código y productividad, aproximadamente 10,000 minutos de CD / CI y más.

    17. Árbol de origen

    Sourcetree no es un host de repositorio de Git, sino una interfaz gráfica de usuario (GUI) para administrarlos. Es una de las muchas soluciones, como GitKraken, Sublime Merge, GitHub Desktop y muchas más.

    La página de inicio de Sourcetree.

    La página de inicio de Sourcetree.

    Es un producto de Atlassian (¡y nos encanta Atlassian!) Que se conecta con otros productos como Bitbucket para ofrecer una representación visual de su repositorio de Git.

    Sourcetree se comercializa como un cliente Git fácil, y lo es, pero también es adecuado para usuarios experimentados. Tiene mucho debajo del capó para apoyar a un equipo que trabaja con Git (y Mercurial también).

    Por ejemplo, Sourcetree hace cosas simples, como resaltar los cambios de la última confirmación, pero también aborda más si lo necesita. Los líderes de equipo pueden revisar conjuntos de cambios, trabajar entre sucursales según lo necesiten y visualizar el código mediante gráficos y pestañas de información:

    Vista de gráfico de Sourcetree.

    Vista de gráfico de Sourcetree.

    Si un cliente de Git es adecuado para usted depende de sus circunstancias. Si aún está aprendiendo, le recomendamos que se mantenga en una Terminal mientras comprende el flujo y el proceso. Para los profesionales o equipos con un uso extenso de Git, un cliente como Sourcetree reducirá minutos del trabajo que realiza todos los días.

    Herramientas para desarrolladores de navegadores

    Sin un navegador web, no hay desarrollo web. Sin embargo, si bien el navegador elegido es fundamental para navegar por la web, también puede usarlo para averiguar cómo se ejecuta.

    La mayoría de los navegadores modernos incluyen herramientas de desarrollo específicas para ayudarlo a analizar el código de backend, que luego puede incorporar a su proyecto. Éstos son algunos de los más populares.

    18. Herramientas para desarrolladores de Chrome

    Las “DevTools” de Chrome son veneradas en todas las comunidades por su conjunto de funciones y diagnósticos estelares.

    Dado el aumento de los navegadores basados ​​en Chromium, muchos tienen el mismo conjunto de DevTools con atajos similares. Puede consultar Microsoft Edge, Brave, Chromium y muchos más clones y trabajar con sus proyectos dentro del navegador.

    Las DevTools que se encuentran en Brave Browser.

    DevTools del navegador Brave.

    La Elementos La pestaña será un lugar habitual, ya que aquí es donde verá el código fuente de la página. Y en nuestra opinión, el Actuación La pestaña brinda información sobre la carga de la página que otras herramientas de desarrollo del navegador no pueden igualar:

    Pestaña de rendimiento de Brave.

    Pestaña de rendimiento de Brave.

    La Seguridad La pestaña también brinda buena información, que será necesaria para monitorear (o investigar) el sitio web de un cliente:

    Pestaña de seguridad de Brave.

    Pestaña de seguridad de Brave.

    Aún mejor, podrá generar informes de Google Lighthouse directamente desde su navegador basado en Chromium:

    Un informe de Google Lighthouse de DevTools de Brave.

    Un informe de Google Lighthouse de DevTools de Brave.

    Las DevTools aquí son subjetivamente las mejores, por lo que encontrará que los usuarios de Chrome y Chromium se apoyarán en ellas. Aunque otros navegadores también tienen DevTools, también vale la pena considerarlos.

    19. Herramientas para desarrolladores de Firefox

    La página de inicio de Firefox.

    La página de inicio de Firefox.

    Con una base de usuarios activos mensuales de alrededor de 220 millones, Firefox sigue siendo un navegador popular, a pesar del dominio de Google. En el pasado, los desarrolladores alababan a Firebug y, a menudo, era líder en depuración dentro del navegador.

    Hoy tenemos las herramientas para desarrolladores de Firefox:

    Herramientas de desarrollo de Firefox.

    Herramientas de desarrollo de Firefox.

    Existe un conjunto básico de funciones para ver el código fuente del sitio (Inspector), a Depurador, Memoria, Almacenamiento, y más.

    Para principiantes, el Consola es una puerta de entrada a la codificación en general porque puede ejecutar JavaScript directamente en el navegador, y es una manera fácil de probar fragmentos y encontrar sus pies al comenzar:

    Un ejemplo de una consola de navegador.

    Un ejemplo de una consola de navegador.

    A pesar de esto, creemos que Firefox (y otros navegadores) está menos empaquetado en sus herramientas de desarrollo que los navegadores basados ​​en Chromium. Aún así, para la depuración y resolución de problemas en varios navegadores, a menudo presionará Firefox en servicio. Como tal, es bueno que sean ideales para casi todas las tareas.

    Marcos frontend

    Hablando de frontend, necesitará algo adecuado para crear sitios web impresionantes. Su elección del marco aquí es crucial. Siempre debe seleccionar la mejor herramienta para el trabajo.

    Con eso en mente, veamos algunas opciones populares.

    20. Bootstrap

    La capacidad de respuesta móvil es una característica estándar en el diseño web moderno. Es un paso bienvenido, dado que la navegación móvil ha superado a las computadoras de escritorio. Teniendo esto en cuenta, querrá una forma de activar rápidamente los sitios móviles primero.

    Bootstrap es una gran herramienta de desarrollo web que se está utilizando mucho:

    El logo de Bootstrap.

    El logo de Bootstrap.

    Es un conjunto de herramientas que combina complementos de JavaScript, variables de Sass, algunos componentes prediseñados, un sistema de cuadrícula de respuesta de calidad y mucho más. Incluso hay un mercado de temas oficiales que funcionan con Bootstrap, y muchos sitios web de WordPress también usan temas creados sobre el marco de diseño.

    Por supuesto, el uso o no de Bootstrap dependerá de lo que necesite su proyecto. Sin embargo, es lógico suponer que los proyectos de desarrollo web con presupuestos ajustados y entregas rápidas se convertirán en una solución "Bootstrapped" y la adaptarán a WordPress. Dado que el marco y WordPress son gratuitos, su tiempo se convierte en el único factor de costo.

    21. Tailwind CSS

    Sobre el papel, Tailwind CSS no tiene sentido. Es un marco de interfaz para un lenguaje que forma parte de la trinidad central del desarrollo web. Como tal, es lógico pensar que el usuario objetivo ya tendría el conocimiento adecuado sin la necesidad de un marco.

    En realidad, Tailwind CSS hace Perfecto sentido. Es una forma de diseñar la interfaz de su sitio sin dejar HTML.

    Un ejemplo de Tailwind CSS.

    Un ejemplo de Tailwind CSS.

    Utiliza clases de utilidad dentro de varias etiquetas para agregar CSS desde una hoja de estilo principal. Por supuesto, CSS sigue siendo la principal fuente de estilo. Está fuera de su vista mientras crea un diseño usando HTML. Por lo tanto, le permite desarrollar estructura y estilo al mismo tiempo.

    El enfoque nos recuerda al 960 Grid System y funcionaría bien si se integra con ese marco. Dicho esto, existe el peligro de empaquetar elementos con tantas clases que podría terminar con un lío de código espagueti. Necesitará paciencia y disciplina para trabajar con Tailwind CSS, pero si se adapta a su proyecto, es un marco rápido y sólido.

    22. Bulma

    Hemos logrado que todo el progreso que hemos logrado en el diseño de estructuras y diseños de sitios, creando columnas flexibles, receptivas y dinámicas, sea un obstáculo para muchos. Si bien manejar esto no es lo único que Bulma puede hacer, este tipo de aplicación es carne y papas al marco:

    El sitio web de Bulma.

    El sitio web de Bulma.

    Al igual que Tailwind CSS, Bulma oculta el CSS y le brinda clases de utilidad para su HTML. Está construido con Flexbox, móvil primero y modular. Es genial si solo necesita unos pocos componentes. También puede mezclar y combinar marcos si lo desea.

    Además, no necesitas JavaScript para que Bulma esté en funcionamiento, ya que solo es CSS. Puede agregar elementos de interfaz, como botones, con el mínimo de código. Es un marco de código abierto sencillo que puede adaptarse a las necesidades de su propio proyecto. En nuestro libro, ese es un rasgo valioso que haría bien en aprovechar.

    23. Fundación

    El equipo de ZURB tiene su versión única de un marco CSS en Foundation. Es una herramienta semántica para dispositivos móviles que tiene dos tipos de sitios y correo electrónico:

    La página de inicio de la Fundación.

    La página de inicio de la Fundación.

    Foundation se construye con la accesibilidad como prioridad. Cada fragmento de Foundation viene con atributos ARIA dedicados. Sin embargo, antes de llegar a esta etapa, Foundation es impresionante para la creación rápida de prototipos debido a cómo lo agrega a su HTML. Puede crear casi cualquier elemento estructural en su página, incluso varios tipos de menús y navegación:

    Creando un menú de navegación en Foundation.

    Creando un menú de navegación en Foundation.

    ZURB también proporciona una gran cantidad de documentación y tutoriales excelentes para que aprenda los entresijos del marco. Foundation es fácil de usar, pero sospechamos que puede profundizar en los sitios de construcción y obtener diseños y funcionalidades complejas.

    También encontrará un montón de plantillas en el sitio web de la Fundación. Son estructuras alámbricas básicas para ayudarlo a despegar, una inclusión bienvenida:

    Biblioteca de plantillas de la Fundación.

    Biblioteca de plantillas de la Fundación.

    En general, el marco de la Fundación hace lo que dice en la lata. Será fundamental para el desarrollo de su sitio, en lugar de permitirle obtener más funcionalidades. Como tal, es posible que no lo esté utilizando para todos los proyectos. Sin embargo, cuando se emplee, funcionará en todo tipo de sitios.

    24. Material-UI

    Discutiremos React con más detalle más adelante, pero por ahora, sepa que Material-UI se basa en la biblioteca de componentes de este marco de JavaScript. Para los que no lo saben, Material Design es la "filosofía" de Google sobre cómo diseñar la interfaz de un sitio web. Significa muchas fuentes Roboto y bloques de color:

    Material-UI busca cumplir con los estándares de diseño de Google.

    Material-UI busca cumplir con los estándares de diseño de Google.

    Importará la biblioteca a React, luego usará etiquetas HTML dedicadas para construir su sitio:

    Construyendo un botón en Material-UI.

    Creando un botón en Material-UI.

    Para personalizar aún más el elemento, agrega clases a sus etiquetas HTML. Todo el bloque de código está envuelto en una función, y renderizará los detalles (y la página por extensión) en React.

    También hay muchos temas gratuitos y premium disponibles, que cubren muchos casos de uso y precios:

    La biblioteca de temas Material-UI.

    La biblioteca de temas Material-UI.

    Dado que Material-UI tiene un caso de uso específico, la creación de sitios alrededor de Material Design, será un marco de referencia si este es su objetivo. En particular, la biblioteca de temas será un recurso valioso para comenzar, independientemente de su presupuesto.

    25. HTML5 Boilerplate

    La página de inicio HTML5 Boilerplate.

    La página de inicio HTML5 Boilerplate.

    Si eres un desarrollador de WordPress, es posible que te hayas encontrado con guiones bajos. Es un tema básico de WordPress básico que le ahorra innumerables horas al armar los elementos funcionales y básicos de su sitio. HTML5 Boilerplate hace lo mismo en un nivel de diseño general.

    Como tal, incluye siete archivos que abarcan HTML, CSS y JavaScript. Todos contienen solo los archivos y el código más necesarios para representar una página. Más allá de ese punto, el resultado de su página depende de usted.

    HTML5 Boilerplate tiene muchos fanáticos porque es más una utilidad que ahorra tiempo que un marco completo. Por lo tanto, no hay elementos visuales listos para usar para sorprender a los "intercambios de paso", pero si presiona HTML5 Boilerplate en servicio, puede encontrar que acelera su desarrollo de la manera que lo hace Underscores para los desarrolladores de WordPress.

    26. Materializar

    Si bien no llamaríamos a Materialise un competidor de Material-UI, es otro marco que busca utilizar los principios de Material Design para crear un diseño:

    La página de inicio de Materialise.

    La página de inicio de Materialise.

    Sin embargo, en lugar de usar React, Materialise es un marco CSS. Eso hace que Materialise sea más fácil de implementar en la interfaz. Al igual que otros marcos basados ​​en CSS, usa clases dentro del HTML para incorporar elementos en la interfaz.

    Dicho esto, también hay un montón de componentes de JavaScript para elementos como modales y menús desplegables:

    Un menú desplegable creado con Materialise.

    Un menú desplegable creado con Materialise.

    Como muchos de estos marcos, existen temas premium que le ayudan a crear diseños en un estilo específico. Sin embargo, todos son temas HTML estáticos, lo que puede resultar un problema si desea implementar JavaScript. En estos casos, es posible que desee considerar Material-UI en su lugar.

    Marcos de aplicaciones web

    En pocas palabras, un marco o biblioteca de JavaScript le permite trabajar con el llamado código “vanilla” de manera diferente. En este caso, es para crear sitios y aplicaciones web específicos. También hay muchos "sabores"; cubramos algunos.

    27. React.js

    Un ejemplo de código de zona de pruebas de React.

    Un ejemplo de código de zona de pruebas de React.

    React.js es una popular biblioteca de JavaScript diseñada por Facebook que impulsa muchos de los elementos más modernos de WordPress. Tanto el backend de WordPress.com como el Editor de bloques usan React, y lo consideraríamos una forma de usar JavaScript que es la primera en la interfaz.

    El backend de Calypso para WordPress.com se basa en React.

    El backend de Calypso para WordPress.com se basa en React.

    Como tal, los desarrolladores de WordPress deberían, parafraseando a Matt Mullenweg, aprender React.js en profundidad. Sin embargo, no es solo un marco para los desarrolladores de WordPress.

    En cualquier lugar donde necesite una interfaz de usuario (UI) moderna y dinámica, React será la consideración de primera elección. Utiliza una extensión de sintaxis de JavaScript llamada JSX para crear elementos, que luego se representan en el documento. Módulo de objetos (DOM):

    const name = "Ken Starr';
    
    const element = <h1>Hello, {name}</h1>;
    
    ReactDOM.render
      Element,
      document.getElementById('root')
    );

    La variable de JavaScript dentro de JSX puede ser cualquier expresión válida, lo que le permite crear argumentos complejos. Eso hace que React sea una opción sólida cuando se trata de marcos. Debido a su popularidad, creemos que React debería estar en su lista de "debe aprender", independientemente de dónde pase su tiempo de desarrollo.

    28. Vue.js

    Vue.js es otro marco de JavaScript para crear interfaces de usuario. Se basa en la "capa de vista" y es ideal para integrarse con otras bibliotecas y marcos.

    El sandbox de Vue.js.

    El sandbox de Vue.js.

    En el lado HTML, Vue no podría ser más accesible. Le da a su etiqueta una ID y llama a una clave de un diccionario configurado en el lado de JavaScript. Los datos ahora son reactivos y los datos y DOM están vinculados.

    De esta manera, Vue.js se parece mucho a algunos de los frameworks CSS que vimos anteriormente en este artículo. Este marco es convincente y le recomendamos que consulte la documentación para ver qué es posible.

    Si bien Vue.js admite declaraciones JSX, es más adecuado para usar plantillas basadas en las tecnologías web "clásicas". Como tal, será ideal para desarrolladores que no quieran trabajar solo en JavaScript.

    29. Express.js

    Estamos entrando en territorio de meta-framework aquí, ya que Express.js se conecta a Node.js y proporciona una base para otros frameworks.

    La página de inicio de Express.js.

    La página de inicio de Express.js.

    Es un marco minimalista (de ahí el nombre), y un beneficio principal es ayudarlo a organizar los componentes del lado del servidor en un formato conocido Modelo-Vista-Controlador (MVC). Como tal, el código parece más complicado que otros marcos, incluso JavaScript vanilla:

    var express = require('express');
    
    var app = express();
    
    app.get('/', function(req, res){
      res.send("Hello world!");
    });
    
    app.listen(3000);

    Creemos que Express.js se adaptará a las aplicaciones que extraen y empujan mucho desde bases de datos. Eso lo hace adecuado para muchas aplicaciones web modernas y desarrolladores de backend que desean trabajar en tareas de frontend con un mínimo de estrés.

    30. Svelte.js

    Una regla general sólida al desarrollar para la web es asegurarse de que sus sitios funcionen en tantos navegadores como sea posible. Dicho esto, en algunos casos, es posible que desee crear aplicaciones o sitios web sin admitir navegadores heredados. En estos casos, Svelte.js debería estar cerca de la parte superior de su lista.

    La página de inicio de Svelte.js.

    La página de inicio de Svelte.js.

    El marco recibe su nombre debido a su tamaño de archivo: apenas 5 kb una vez minificado. Tiene un formato similar a jQuery que será fácil para los usuarios familiares:

    $('.hello').text("Hello svelte");

    Hay menos de 40 funciones dentro de la API de Svelte, por lo que comenzar será sencillo. Además, puede agregar nuevas funciones con facilidad usando $.fn.

    Encontrará "polyfills" para el soporte de Internet Explorer 9, pero esta es casi la única concesión. Para la compatibilidad con navegadores hipermodernos que utilizan un marco súper delgado, Svelte.js podría ser el indicado para usted.

    31. Laravel

    Hasta ahora, hemos analizado los marcos de JavaScript o CSS. Dada la prevalencia de PHP, también tiene sentido cubrir un marco para este lenguaje. Laravel es la opción ideal aquí, ya que es popular entre muchos desarrolladores por su sintaxis y ecosistema:

    La página de inicio de Laravel.

    La página de inicio de Laravel.

    Es más apropiado decir que Laravel es un ecosistema, ya que incluye muchas herramientas para ayudarlo a construir proyectos. Incluso si no usa gran parte del marco en sí, puede usar Homestead de Laravel, un entorno de desarrollo local basado en Vagrant.

    Laravel en sí es un marco PHP basado en Docker y utiliza una CLI (llamada Sail) para interactuar con él. Al igual que Vagrant, usará navegar hacia arriba para construir contenedores y ejecutarlos.

    Sin embargo, Laravel tiene muchas más cuerdas en su arco. Por ejemplo, puede usarlo como un marco de pila completo, un backend de API para aplicaciones Next.js y casi todo lo que se encuentre en el medio.

    Si eres un desarrollador de PHP, Laravel será una herramienta central (si no familiar) para tu flujo de trabajo.

    32. Gatsby

    Gatsby es un marco de interfaz de código abierto que ha atraído mucha atención últimamente. Es porque Gatsby es rápido, escalable, eficaz y seguro.

    La página de inicio de Gatsby.

    La página de inicio de Gatsby.

    Hay un proceso de instalación superrápido que involucra al Node Package Manager (npm). Tendremos más sobre esto más adelante. Aunque es un marco de JavaScript, Gatsby genera archivos HTML estáticos en tiempo de ejecución, por lo que no hay forma de atacar un sitio. Además, Gatsby automatiza el rendimiento para mantener su sitio funcionando con una configuración óptima.

    Entre el rendimiento automatizado, el escalado dinámico y la construcción HTML estática, Gatsby se siente como un organismo vivo. Existe una “composición” de codificación compleja que involucra JSX, Markdown, CSS y mucho más en función de sus necesidades. Cada paso de su flujo de trabajo y parte de su pila se puede adaptar a sus requisitos.

    A los desarrolladores de WordPress también les gustará cómo se integra Gatsby con la plataforma. Sin embargo, no será adecuado en todos los casos. Por ejemplo, si necesita administrar completamente un CMS basado en la nube, esto no es para usted. Aun así, Gatsby puede adaptarse a su proyecto en la mayoría de los casos y funciona muy bien con WordPress.

    33. Django

    A pesar de todo lo que se habla de que Python es un lenguaje de programación "principiante" o "que aprende", sirve como la columna vertebral de muchos sitios de alto perfil. Algunos de los sitios web más grandes (Instagram, Uber, Reddit, Pinterest y más) usan Django. A menudo, no encontrará ninguna mención de Python en sí, sino solo de Django.

    Django es un marco que usa Python para crear aplicaciones web del lado del servidor. Es tan sencillo de usar como el propio Python, con un formato súper legible.

    Formato predeterminado de Django.

    Formato predeterminado de Django.

    Python es un excelente lenguaje de secuencias de comandos para proyectos basados ​​en lógica, por lo que aprovechar esto para una aplicación web es una buena opción. Además, la velocidad de procesamiento de Python es rápida y la estructura fundamental del archivo es ligera. Debido a que es rápido, Django es un excelente marco del lado del servidor en comparación con PHP y tiene tanto gruñido como el lenguaje más popular.

    Dicho esto, la aceptación es menor, lo que podría deberse a la reputación de Python como lenguaje de aprendizaje. A pesar de esto, Django funciona bien con otros lenguajes, como JavaScript, para ser la base de una aplicación web moderna.

    Por supuesto, si planea usar un CMS como WordPress, o está creando soluciones para proyectos basados ​​en React, tiene menos opciones. Aun así, creemos que en 2021 se verá un aumento en la cantidad de sitios que se ejecutan en Django.

    34. Ruby on Rails

    El lenguaje de programación Ruby fue el “favorito” de los lenguajes para principiantes y las alternativas de scripting a PHP hace unos años. A menudo se compara con Python.

    Y al igual que Django, Ruby on Rails también fue el favorito de muchos desarrolladores.

    La página de marcador de posición al iniciar un proyecto de Ruby on Rails.

    La página de marcador de posición para un nuevo proyecto de Ruby on Rails.

    Encontrará que Ruby se utiliza en muchas aplicaciones web internas y del lado del servidor. Además, Ruby on Rails se utiliza como marco del lado del servidor en innumerables sitios web. Utiliza un enfoque MVC y ofrece estructuras para el servicio web, las páginas y una base de datos. Como tal, tiene un sitio básico esperándolo, listo para usar.

    Ruby on Rails se adaptará a su proyecto si necesita programar muchos trabajos y trabajar con soluciones de terceros. Por ejemplo, existe una integración nativa con el almacenamiento de archivos como Google Cloud y un contenedor para enviar correos electrónicos.

    En general, es una buena opción si desea un conjunto sólido de valores predeterminados (como la estructura de carpetas) que se puede personalizar si es necesario. Por otro lado, no es una buena opción si le gusta usar API durante el desarrollo.

    La estructura del código de Ruby on Rails puede volverse compleja y difícil de entender con grandes proyectos. El tiempo de ejecución también puede verse afectado, por lo que es posible que no sea el mejor marco para proyectos de velocidad crítica.

    Aún así, Ruby on Rails es uno de los principales frameworks del lado del servidor web, y su uso no se está ralentizando para proyectos adecuados.

    35. TypeScript

    Un ejemplo de código TypeScript.

    Un ejemplo de código TypeScript.

    En pocas palabras, TypeScript proporciona una "verificación de tipo" estática opcional para JavaScript. Es un "superconjunto" del lenguaje y también es compatible con muchas otras bibliotecas de JavaScript. En general, TypeScript es JavaScript con algunas características adicionales, y puede compilar ambos lenguajes uno junto al otro.

    Muchos desarrolladores han recurrido a TypeScript para reducir la cantidad de errores en tiempo de ejecución que reciben. Los errores de tipo son uno de los más comunes, y reducirlos podría devolverle mucho tiempo extra.

    Para obtener un ejemplo muy simple de TypeScript, considere una cadena:

    let helloWorld = "Hola mundo";

    // ^ = dejar helloWorld: string

    Aquí, TypeScript usa let en lugar de que la var habitual para la variable helloWorld. A partir de ahí, TypeScript sabe que helloWorld es una cadena y lo verifica sobre esta base.

    En última instancia, TypeScript no es una herramienta de desarrollo web esencial, aunque se ha vuelto más popular debido a su característica principal de marquesina. Si termina ahorrando un tiempo muy necesario, podría volverse vital para su flujo de trabajo.

    36. GraphQL

    Esta es una herramienta única que puede encontrar el favor de los desarrolladores que trabajan con los datos dentro de una API. GraphQL es un lenguaje de consulta utilizado en una API que también actúa como un tiempo de ejecución para entregar los resultados de la consulta que realiza.

    El sitio web GraphQL.

    El sitio web GraphQL.

    Con una API REST estándar, a menudo tiene que cargar desde varias URL. Con GraphQL, puede obtener datos de una sola solicitud. Además, las API GraphQL están organizadas por tipo en lugar de por puntos finales. Esta clasificación ayuda a la eficiencia de su consulta y proporciona errores más explícitos cuando algo sale mal.

    Los tipos también se pueden usar para omitir la sobrescritura del código de análisis manual, dada la forma en que GraphQL los implementa. También puede agregar nuevos campos y tipos a su API sin afectar el trabajo que ha realizado hasta ahora.

    La herramienta es flexible y escalable en muchas áreas. Debido a que GraphQL crea una API uniforme para su proyecto, puede incorporar un motor que coincida con el idioma de su proyecto elegido. Eso lo hace ideal para una amplia gama de aplicaciones, en lugar de una solución de nicho para un problema generalizado.

    Encontrará GraphQL utilizado en sitios como GitHub, Spotify, Facebook y más. Debería darle una idea de cómo se usa GraphQL en sitios con muchas consultas de todo tipo. Como tal, es posible que deba utilizar esta solución más de una vez durante los próximos 12 meses y más allá.

    Gestores de paquetes

    Los lenguajes de programación, los marcos y más tienen muchas partes móviles. Estas dependencias deben descargarse e instalarse de la forma correcta para que funcionen. Ingrese a los administradores de paquetes. Estos le ayudan a descargar e instalar dependencias específicas desde la línea de comandos. Analicemos algunas herramientas con las que te encontrarás.

    37. Administrador de paquetes de nodos (npm)

    Sí, descargar instaladores tiene su lugar. Sin embargo, usar un administrador de paquetes desde la línea de comandos es muy simple en la mayoría de los casos. También proporciona una forma rápida de capturar e instalar archivos desde la web.

    Node Package Manager (npm) es una herramienta de desarrollo web específica de JavaScript propiedad de Microsoft que le permite instalar paquetes específicos del idioma a pedido:

    La página de inicio de npm.

    La página de inicio de npm.

    Por ejemplo, la búsqueda de paquetes de React arroja más de 155.000 resultados:

    Una búsqueda realizada dentro de npm.

    Una búsqueda realizada en npm.

    Al igual que con un IDE en línea, npm es una herramienta de desarrollo web que no recibe mucho "tiempo de uso", principalmente porque es ubicua. Como tal, prácticamente todos los desarrolladores web van a utilizar esta herramienta.

    Sin embargo, es increíble, y ahora que está bajo el ala de GitHub, más desarrolladores usarán npm en 2021 que nunca.

    38. Hilado

    Al igual que npm y pip para Python, Yarn le ayuda a instalar paquetes relacionados con su proyecto y sus herramientas. La diferencia aquí es que Yarn también es una herramienta de gestión de proyectos.

    La página de inicio de Yarn.

    La página de inicio de Yarn.

    La instalación es simple e inicializar Yarn para un nuevo proyecto también requiere un mínimo de esfuerzo. Se ha convertido en una sólida solución de código abierto para instalar paquetes y administrar su proyecto al mismo tiempo.

    Utilizará espacios de trabajo para crear "monorepos", y varias versiones de su proyecto se encuentran en el mismo repositorio y pueden tener referencias cruzadas. Puede instalar complementos para cualquier cosa que Yarn no pueda hacer (para lo cual desea agregar nuevos buscadores y resolutores). Para ser más preciso, podría instalar complementos, pero no hay demasiados, al menos en las listas oficiales. En cambio, codificará el suyo propio si está desesperado por la funcionalidad. Aún así, la elección está ahí para personalizar Yarn según las necesidades de su proyecto.

    Yarn es un caso único para convertirse en su administrador de paquetes principal. Para un proyecto del mundo real, puede apoyarse más en npm, pero Yarn se infiltrará en su flujo de trabajo de formas que solo pueden beneficiarlo.

    API y herramientas de prueba

    Asegurarse de que las cosas funcionen es un proceso que a menudo se omite, pero también conlleva remordimientos cuando las cosas van mal. Como tal, la fase de prueba de su proyecto debe ser sólida, sólida y exhaustiva.

    Dado esto, aquí hay algunas API y herramientas de prueba que tendrá a mano para sus proyectos.

    39. HoppScotch

    Desarrollado por Netlify, HoppScotch es una herramienta de desarrollo de API de código abierto. Los desarrolladores lo llaman un "ecosistema", lo que desmiente la funcionalidad bajo el capó.

    La página principal de HoppScotch.

    La página principal de HoppScotch.

    Es una solución sólida y sensata, y no es para los débiles de corazón. La curva de aprendizaje si nunca ha utilizado una herramienta como esta es empinada. Casi no hay instrucciones sobre el uso de HoppScotch en ninguna de las páginas de la aplicación, aunque esto no suele ser un problema, ya que la herramienta está destinada a desarrolladores experimentados de todos modos.

    Hay muchas conexiones en tiempo real (WebSocket, SSE y más) y una implementación GraphQL. También nos gusta el creador de documentación:

    La pantalla del creador de documentación de HoppScotch.

    La pantalla del creador de documentación de HoppScotch.

    Funciona con sus "colecciones" de HoppScotch para crear documentación sobre la marcha, lo que le permite ahorrar tiempo.

    En general, HoppScotch es una herramienta funcional que se abrirá mucho en su navegador. Es una de esas soluciones que siempre usará sin darse cuenta, ¡no podemos elogiarla más que eso!

    40. Cartero

    El logo del cartero.

    El logo del cartero.

    Advertencia: estamos a punto de mencionar la temida palabra "C": colaboración. Postman es una herramienta de desarrollo web que le ayuda a crear una interfaz de programación de aplicaciones (API) en equipo a través de la plataforma Postman:

    El tablero de Postman.

    El tablero de Postman.

    Hay muchos casos de uso para integrar Postman en su flujo de trabajo. Por ejemplo, puede usarlo de manera estándar para el desarrollo de aplicaciones, lo que se traducirá directamente en proyectos basados ​​en la web. Puede simular puntos finales utilizando servidores simulados, lo que atraerá especialmente a los desarrolladores de WordPress.

    Incluso puede crear incorporaciones para ayudar a los usuarios de sus API a aprender a manejar. Aquellos proyectos donde hay mucha rotación de usuarios o tráfico significativo verán el beneficio aquí.

    En cuanto a los precios, Postman ofrece un nivel gratuito, pero obtendrá el mayor valor de uno de los niveles premium. Tendrá que pagar entre $ 12 y $ 30, según su ciclo de facturación y la cantidad de usuarios.

    41. Biblioteca de pruebas

    El código que se ejecuta es ideal, pero las aplicaciones que funcionan son el objetivo final. Testing Library hace lo que sugiere su nombre: proporciona un conjunto de utilidades para ayudarlo a probar sus proyectos y alentarlo a utilizar buenas prácticas de codificación.

    La página de inicio de la biblioteca de pruebas.

    La página de inicio de la biblioteca de pruebas.

    La idea es que cree pruebas que representen el uso de su aplicación. Si se ejecutan sin problemas, es muy probable que su aplicación también lo haga. Es una herramienta agnóstica con respecto al marco y no es un ejecutor de pruebas. El propósito principal de Testing Library es ayudarlo a escribir pruebas mantenibles desacopladas de los detalles de implementación.

    Todo dentro de la herramienta Testing Library se centra en sus principios rectores. Como tal, no solo está creando pruebas, sino que está aprendiendo cómo hacerlas mejores y más valiosas.

    Debido a esto, Testing Library podría convertirse en una gran parte de su flujo de trabajo. Diríamos que casi todas las cadenas de proyectos podrían beneficiarse de Testing Library, y los usuarios de React seguramente querrán instalar esta herramienta como estándar.

    Herramientas de colaboración

    A pesar de que los desarrolladores son antisociales, la verdad es que la tecnología y la colaboración van de la mano.

    Como tal, resumamos algunas herramientas de colaboración estelares que encajarán en su próximo proyecto.

    42. Jira

    Atlassian es una empresa muy apreciada en lo que respecta a software. Somos grandes admiradores de algunas de las ofertas de la compañía: Confluence, Trello, Sourcetree, Bitbucket y nuestro enfoque aquí, Jira.

    La página de inicio de Jira.

    La página de inicio de Jira.

    Es una herramienta de desarrollo para equipos que utilizan marcos ágiles, Scrum en particular, ya que es muy popular. Debido a esto, obtiene una gran cantidad de funciones en el paquete. Por ejemplo, puede usar tableros kanban para ayudar a organizar tareas y sprints. También puede implementar su técnica de estimación, personalizada a su metodología y proyecto.

    Jira se centra en un flujo de trabajo repetible: planificar, realizar un seguimiento, publicar e informar. Es fundamental para varios marcos ágiles, aunque también puede crear el suyo según la planificación previa al proyecto. Si tiene que girar entre sprints, puede evolucionar su proyecto y escalar hacia arriba o hacia abajo.

    La gran noticia sobre Jira es que hay un nivel gratuito para comenzar y precios razonables para los otros niveles. Dicho esto, encontrará que un equipo de diez será el requisito mínimo para usar Jira de manera efectiva. Podría ser excesivo para cualquier grupo más pequeño.

    43. Taskade

    Cuando se trata de herramientas colaborativas, es raro encontrar Taskade. Le hace un flaco favor a la aplicación, ya que es una herramienta fantástica para mantener a un equipo enfocado y en el tema.

    El tablero de Taskade.

    El tablero de Taskade.

    Si eres usuario de otras herramientas de colaboración como Asana o Basecamp (más sobre ambas más adelante), estarás como en casa aquí. La información que más necesita, como las tareas pendientes y los recordatorios, está centralizada bajo el capó. Así, puedes presentarlo de muchas formas dependiendo de tu proyecto.

    Los tipos de presentación en Taskade.

    Los tipos de presentación en Taskade.

    Los tipos de vista "Mapa mental" y "Organigrama" son estelares y cada uno le brinda una perspectiva diferente de la información que ha agregado.

    Un mapa mental en Taskade.

    Un mapa mental en Taskade.

    La aplicación es engañosa por su simplicidad. Aparte de una forma flexible de presentar y gestionar tareas, hay poco más que ofrecer.

    Trabajar con su equipo requiere presionar un puñado de botones. Por ejemplo, cada pantalla tiene una ventana de chat expandible:

    La ventana de chat de Taskade.

    La ventana de chat de Taskade.

    Para algunos, especialmente cuando se compara con otras soluciones, Taskade podría ser visto como básico e incluso no equipado. Sin embargo, no es el caso. Taskade es una forma fantástica de colaborar con un equipo y, debido a su simplicidad, encajará directamente en cualquier proyecto en el que esté trabajando.

    44. Asana

    La página de inicio de Asana.

    La página de inicio de Asana.

    Asana es uno de los nombres más destacados en el campo de las herramientas de colaboración. Es un monstruo cuando se trata de agarrar un proyecto y darle forma con la ayuda de un equipo. Asana también es excelente para adaptarse a diferentes flujos de trabajo. Por ejemplo, puede cambiar entre listas y calendarios, pero también acceder a las líneas de tiempo.

    Tipos de flujo de trabajo de Asana.

    Tipos de flujo de trabajo de Asana.

    También hay algunas características y funcionalidades fantásticas basadas en equipos. Los informes son completos y, en planes superiores, obtiene acceso a un panel que muestra varios análisis relacionados con el desempeño de su equipo. Incluso hay una forma de monitorear las cargas de trabajo de cada miembro del equipo. Por lo tanto, Asana te ayuda a mantener la crisis al mínimo y evita que los miembros del equipo se agoten.

    Además, el nivel gratuito no es una demostración estropeada de la aplicación con todas las funciones. Puedes escalar Asana a medida que escalas un equipo, y aquí hay una buena funcionalidad para ayudarte. Por ejemplo, puede asignar trabajo a los miembros del equipo y administrar cada flujo de trabajo. También puede enviar mensajes generales por espacio de trabajo a todo el equipo.

    Enviar un mensaje en Asana.

    Enviar un mensaje en Asana.

    Es un veterano en la gestión de proyectos colaborativos, pero Asana cumple casi siempre. Descubrirás que una buena parte de tus clientes y compañeros de equipo también tienen una cuenta de Asana, lo que significa que el ensamblaje dentro de la aplicación ocurrirá con más frecuencia de lo que crees.

    45. Campo base

    Basecamp es otro gran actor en la gestión de proyectos en equipo. Es uno de los viejos guardias, habiendo existido casi tanto tiempo como el propio WordPress. El software central ha existido por mucho más tiempo, por lo que tiene un pedigrí y un historial digno de mención.

    La página de inicio de Basecamp.

    La página de inicio de Basecamp.

    Sobre el papel, Basecamp no tiene nada de emocionante en comparación con la competencia. Honestamente, muchas de las otras aplicaciones colaborativas se han puesto al día con lo que ofrece Basecamp. Sin embargo, no es toda la historia.

    Sí, puede crear tareas y listas de tareas pendientes, asignarlas a los miembros del equipo y trabajar con todo en todo el proyecto. Sin embargo, las características principales de Basecamp son la infraestructura y el diseño.

    Existe un enfoque simple para usar Basecamp: cree un proyecto, desarrolle su lista de tareas pendientes o programa y asigne las tareas a los compañeros de equipo. Cada proyecto tiene un montón de aspectos autónomos que le ayudan a conseguir que un proyecto supere la línea:

    Los elementos que componen un proyecto Basecamp.

    Los elementos que componen un proyecto Basecamp.

    Como dijimos, aquí no hay nada innovador, pero ese es el punto. Basecamp es un sistema de gestión de proyectos confiable sin muchas campanas y silbidos. Como tal, seguirá recurriendo a él porque es confiable y ampliable en función de sus necesidades.

    Corredores de tareas

    Trabajar en las pequeñas tareas dentro de un proyecto de desarrollo web presenta un problema. Son necesarios para hacerlo más eficiente y productivo. Tienes que gastar tiempo y energía para hacer que estas micro-tareas pasen de la raya por el otro lado.

    Para ayudar, necesitará un corredor de tareas. Aquí están algunos de nuestros favoritos.

    46. ​​Grunt

    La página de inicio de Grunt.

    La página de inicio de Grunt.

    Grunt es un corredor de tareas específico de JavaScript que busca automatizar algunas de las tareas mundanas y repetitivas que encontrará a diario. Considere las tareas que normalmente puede considerar ordinarias: borrado, minificación, compilación y muchas más.

    Grunt los maneja por usted a través de un archivo de configuración basado en JSON (llamado "Gruntfile"). He aquí un ejemplo:

    module.exports = function(grunt) {
      grunt.initConfig({
        jshint: {
          files: ['Gruntfile.js', "src/**/*.js', "test/**/*.js'],
          options: {
            globals: {
              jQuery: true
            }
          }
        },
        watch: {
          files: ['<%= jshint.files %>'],
          tasks: ['jshint']
        }
      });
      grunt.loadNpmTasks('grunt-contrib-jshint');
      grunt.loadNpmTasks('grunt-contrib-watch');
      grunt.registerTask('default', ['jshint']);
    };

    Si a menudo encuentra que sus proyectos pierden tiempo a través de tareas de rutina, Grunt probablemente se convertirá en parte de su caja de herramientas de desarrollo web como ya lo es para WordPress, Bootstrap y muchos otros.

    47. Gulp

    El logo de Gulp.

    El logo de Gulp.

    Cuando comparas los corredores de tareas, a menudo es un tiroteo entre Gulp y Grunt. Gulp es un conjunto de herramientas basado en JavaScript para automatizar su flujo de trabajo y aumentar su eficiencia.

    Utilizará archivos y "flujos" dedicados para actuar sobre sus activos y código antes de que se escriba en el disco. Cada tarea que crea es una función "asincrónica" y puede configurarla como privada o pública. La diferencia es uno de los permisos: las tareas privadas no pueden ser ejecutadas por el usuario final y están diseñadas para trabajar con otras funciones.

    Hablando de eso, puede usar las funciones de serie () y paralelo () para crear tareas. Significa que puede realizar pequeñas tareas, convertirlas en un engranaje en un sistema más extenso y luego anidarlas.

    Además, también puede ampliar la funcionalidad de Gulp a través de complementos creados por la comunidad:

    Una muestra de complementos de Gulp.

    Una muestra de complementos de Gulp.

    Puede ser una generalización, pero tanto Gulp como Grunt son buenos en cosas diferentes. Gulp es sólido cuando se trata de trabajar con activos que pueden ser parte de un conjunto de instrucciones más extenso. Debido a esto, querrá elegir el ejecutor de tareas adecuado para cada proyecto.

    Herramientas de contenedorización

    Nos arriesgaremos y diremos que si no está utilizando algún tipo de contenedorización o una herramienta de máquina virtual, su progreso como desarrollador web se verá afectado.

    Por supuesto, esto no es necesariamente cierto para todos, pero el uso de un entorno de desarrollo basado en contenedores tiene muchos beneficios. Aquí hay algunas soluciones de elección.

    48. Docker

    Para muchos, Docker es la entorno de desarrollo basado en contenedores de elección. La plataforma de código abierto no se trata solo de contenedores, pero esta es una razón que se menciona a menudo para usarla.

    El logo de Docker.

    El logo de Docker.

    En la interfaz, es un proceso simple: haga clic en un botón y obtenga un entorno de desarrollo de espacio aislado virtual. Por supuesto, cualquier cosa que parezca simple en la parte superior está muy por debajo. Docker combina una interfaz de usuario (UI), CLI y API con una disposición de seguridad para poner en sus manos una implementación rápida.

    Para muchos desarrolladores, Docker será fundamental para la creación de nuevas aplicaciones. Los desarrolladores web, en particular los desarrolladores de WordPress, tienen una selección de herramientas para el trabajo. Local by Flywheel y DevKinsta son plataformas líderes.

    La aplicación DevKinsta funciona con Docker.

    Docker impulsa la aplicación DevKinsta.

    Nota: Recientemente lanzamos DevKinsta, una herramienta de desarrollo local para ayudarlo a crear nuevos sitios de WordPress. También puede implementar los sitios en su cuenta de Kinsta con un solo clic.

    Docker también se integra con muchas herramientas, y varias de ellas ya estarán en su flujo de trabajo. Las aplicaciones como GitHub, VS Code y más pueden conectarse con Docker y ofrecer una integración fluida.

    En general, Docker podría abarcar toda una serie de artículos sobre su contenido. A pesar de esto, nada de eso puede ser necesario. Lo más probable es que estés usando Docker a diario, ¡y ya sabes lo increíble que es!

    49. LXD

    En términos simples, LXD es un administrador de contenedores para distribuciones de Linux. Está basado en imágenes y viene con varias imágenes prediseñadas para Linux. El uso de un LXD le da la tranquilidad de saber que desarrollará en el mismo sistema operativo predeterminado para el usuario final.

    El sitio web de LXD.

    El logo de LXD.

    Era fundada por los desarrolladores de Ubuntu Canonical y, por supuesto, mantiene una estructura de código abierto. Puede crear entornos seguros utilizando contenedores sin privilegios, controlar el uso de recursos utilizando muchos recursos e incluso administrar redes.

    LXD también es escalable, lo que significa que puede ejecutar miles de nodos de cómputo o simplificar las cosas. Para las aplicaciones basadas en la nube, LXD se integra con OpenNebula; este último tiene controladores oficiales para administrar instancias de LXD.

    De forma predeterminada, muchas herramientas de contenedorización utilizan Ubuntu como entorno virtual estándar. Aun así, LXD está optimizado para ejecutar la distribución. Si no es algo que haya probado antes, vale la pena el tiempo para ejecutarlo en un espacio de trabajo de prueba. Puede encontrar que se adapta mejor a flujos de trabajo específicos o proyectos de clientes que la competencia.

    Herramientas de optimización de imágenes

    Los activos (o medios, o cualquiera que sea su nombre preferido) abundan en la web. Hay culturas enteras en línea dedicadas y basadas en imágenes. Como tal, hacer que sus proyectos de desarrollo web funcionen bien a pesar de la cantidad de imágenes utilizadas es fundamental.

    Estas son algunas de las herramientas de optimización de imágenes más populares y excelentes disponibles.

    50. ShortPixel

    El sitio web de ShortPixel.

    El sitio web de ShortPixel.

    Hay muchas aplicaciones de optimización de imágenes disponibles, pero ShortPixel tiene un algoritmo subjetivamente robusto. Es capaz de aplastar el tamaño de los archivos de imagen sin afectar la calidad. Si somos quisquillosos, le sugerimos que debido a que la configuración predeterminada es la compresión más alta disponible, no hay otro lugar adonde ir si su imagen no está lo suficientemente comprimida. Aún así, esta no es una crítica significativa.

    ShortPixel tiene toneladas de funcionalidad debajo del capó. Hay tres niveles de compresión, un gran optimizador de PDF e incluso un compresor GIF. Este último es algo que no se encuentra en muchas otras herramientas, por lo que es una adición bienvenida a la línea de productos.

    También se puede acceder a toda la interfaz: arrastra y suelta imágenes en el cargador y espera a que ShortPixel haga su magia. Una vez que se procesan sus imágenes, puede descargarlas como un lote o seleccionar imágenes individuales para descargar:

    Descarga de imágenes de ShortPixel.

    Descarga de imágenes de ShortPixel.

    Las herramientas de la API de ShortPixel también son sólidas. Encontrará API independientes para reducir imágenes en línea y fuera de línea, bibliotecas cliente PHP y .NET completas, un motor adaptativo basado en JavaScript y más.

    Sugerimos que ShortPixel sea una herramienta para desarrolladores, ya que es excelente para conectar su sitio web o aplicación. También diríamos que superaría su adicción a TinyPNG en un instante, especialmente si quisiera usarlo como parte de un flujo de trabajo más amplio.

    51. TinyPNG

    Es hora de utilizar la herramienta de optimización de imágenes favorita de todos: TinyPNG. También puede incluir TinyJPG en esta entrada, aunque ambas herramientas funcionan con los mismos formatos de imagen.

    El sitio web de TinyPNG.

    El sitio web de TinyPNG.

    Descubrirás que TinyPNG no ha cambiado mucho a lo largo de los años. Sigue siendo una sencilla herramienta de arrastrar y soltar para optimizar sus imágenes. No hay campanas ni silbidos, y no hay un conjunto extenso de formatos de archivo. Aún así, ¿qué TinyPNG lo hace La oferta es una usabilidad suprema y un montón de integraciones con otras herramientas.

    Por ejemplo, hay un complemento de Photoshop y, para aplicaciones más detalladas, una API de desarrollador funcional. Incluso los usuarios de Python pueden participar, ya que la API también es compatible con este lenguaje. También se han creado varios complementos utilizando la API para muchas herramientas de terceros.

    No estamos sugiriendo que TinyPNG tenga el monopolio del mercado de optimización de imágenes, pero a menudo es la primera opción para muchos usuarios. Tomar una imagen y colocarla en el cargador lleva unos segundos, y cuando obtiene una representación perfecta del 99,9% de su imagen, es fácil confiar.

    Herramientas de prueba de sitios web

    Hablamos anteriormente sobre probar su API y el código principal del sitio, aunque esto pierde el rendimiento de su sitio web. A continuación, presentamos algunas herramientas que nos encantan y que también podrían ayudarlo a analizar el rendimiento de sus sitios.

    52. Responsivamente

    La aplicación Responsively.

    La aplicación Responsively.

    Si alguna vez se ha sentido abrumado por la cantidad de consultas de medios que necesita realizar y perfeccionar en su aplicación, consulte Responsively. Es una herramienta de interfaz de código abierto para ayudarlo a desarrollar sitios según las diversas ventanas gráficas de sus dispositivos elegidos.

    Ver diferentes dispositivos en Responsively.

    Ver diferentes dispositivos en Responsively.

    Lo mejor de esto es cómo puede comparar diseños uno al lado del otro. Le brinda una sólida oportunidad de aumentar la coherencia entre dispositivos. Cada dispositivo es preciso y hay muchos para elegir, lo cual es excelente si su sitio apunta a dispositivos específicos.

    También puede agregar las extensiones de navegador dedicadas para Mozilla Firefox, Microsoft Edge y Google Chrome para enviar páginas al navegador Responsively. Desde aquí, puede abrir las herramientas de desarrollo integradas y ponerse a trabajar.

    El inspector Responsively.

    El inspector Responsively.

    Hay muchas otras características, como la funcionalidad de captura de pantalla, soporte de carga en caliente y más para ayudarlo a desarrollar. Es difícil discutir con el lema de que Responsively es el "navegador del desarrollador web". Puede terminar siendo un componente central de su flujo de trabajo.

    53. Faro de Google

    Para muchos, PageSpeed ​​Insights de Google es una herramienta valiosa para descubrir cómo funciona un sitio web y dónde puede mejorar la velocidad de carga.

    PageSpeed ​​Insights de Google.

    PageSpeed ​​Insights de Google.

    Dicho esto, algunos de los programas que se encuentran bajo el capó son más interesantes de analizar en profundidad. También podría adaptarse mejor a sus necesidades. Google Lighthouse se puede ejecutar en cualquier página web y proporciona auditorías e informes para el rendimiento de la página, SEO, aplicaciones web progresivas (PWA), etc.

    Las formas principales de ejecutar Google Lighthouse son desde la línea de comandos, utilizando DevTools de Chrome o como un módulo de nodo. Si utiliza la interfaz de PageSpeed ​​Insights, Lighthouse genera algunas de las puntuaciones y los proveedores más información.

    Vale la pena señalar que, en la superficie, Google Lighthouse y PageSpeed ​​Insights parecen similares. Pero PageSpeed ​​Insights utiliza datos de laboratorio combinados con datos de usuarios del mundo real. El análisis de Lighthouse'suse ignora los datos del usuario y mide más elementos de su sitio web.

    En nuestra opinión, vale la pena ejecutar PageSpeed ​​Insights y Lighthouse, especialmente si el objetivo de su cliente es llegar a la cima de las páginas de resultados de motores de búsqueda (SERP). En cualquier caso, es una herramienta sólida a tener a mano, e incluso podría suplantar a PageSpeed ​​Insights como su herramienta de rendimiento preferida.

    54. Cypress

    Las pruebas de extremo a extremo son algo que no es una experiencia agradable para muchos desarrolladores. Cypress ha elegido esta colina para morir: es una solución sin complicaciones que se opone a la tendencia de las pruebas de extremo a extremo y produce algo estelar.

    La página de inicio de Cypress.

    La página de inicio de Cypress.

    Si bien la mayoría de las herramientas de prueba de un extremo a otro se basan en Selenium, Cypress va en una dirección diferente. Significa que los problemas que los usuarios encuentran con los probadores basados ​​en selenio no están presentes aquí. De hecho, los desarrolladores quieren que configurar, escribir y ejecutar pruebas sea muy sencillo.

    Para hacer esto, construyeron la arquitectura desde cero y se enfocaron en las pruebas de extremo a extremo con exclusión de otras formas. Para ayudar al rendimiento, Cypress se ejecuta en el mismo ciclo de ejecución que su programa, en lugar de ejecutar comandos remotos a través de la red.

    Debido a que el código de prueba se ejecuta en el navegador, no hay que tener en cuenta ningún controlador o enlace de idioma. Aun así, puede compilar en JavaScript antes de ejecutar las pruebas.

    Si es un ingeniero de control de calidad (QA) o un desarrollador que desea que sus pruebas de extremo a extremo tengan acceso nativo a su trabajo, Cypress debería llamar su atención. ¡La mejor parte es que también hay un nivel gratuito con todas las funciones!

    55. Stack Overflow y motores de búsqueda

    Por un momento, permítanos ampliar los límites de lo que se considera una herramienta de desarrollo web. Stack Overflow es bien conocido por cualquiera con un conocimiento pasajero de desarrollo web:

    El sitio web de Stack Overflow.

    El sitio web de Stack Overflow.

    Es un sitio de preguntas y respuestas centrado en la programación, y es parte de la red Stack Exchange que cubre todo tipo de otros temas:

    Uno de los muchos sitios de nicho en la red Stack Exchange.

    Uno de los muchos sitios de nicho en la red Stack Exchange.

    Es conocido como un recurso al que recurren miles de desarrolladores y, a pesar de cierta controversia sobre su comunidad, el tráfico sigue siendo considerable. Nos aventuramos a decir que Stack, junto con el motor de búsqueda de su elección, representa una herramienta de desarrollo web flexible para aprender y mejorar sus habilidades.

    Por ejemplo, es probable que se dirija a Stack Overflow cuando se encuentre con un obstáculo de desarrollo relacionado con el código. Del mismo modo, cuando aparece un error que no está seguro de cómo resolverlo, pegue en un motor de búsqueda es la forma más rápida de encontrar la respuesta que necesita.

    Dado que el 90% de los usuarios encuestados van a Stack Overflow para resolver problemas, es probable que todos usen la herramienta. Sin embargo, para los principiantes, o incluso si no puede articular su problema, los motores de búsqueda serán un poco más amigables.

    Referencias de desarrollo web

    Si es un desarrollador que se suscribe al espíritu de “RTFM”, no necesitará convencerse de las siguientes entradas. Por el contrario, si le gusta meterse en un problema y resolverlo, sepa que ha habido innumerables desarrolladores antes que usted que probablemente hayan encontrado una respuesta.

    Dado esto, observe las siguientes herramientas de desarrollo web, todas basadas en materiales de referencia web.

    56. Documentos web de MDN

    En los primeros días de la red, había un sitio llamado Webmonkey dirigido por Lycos y destinado a enseñar desarrollo web y programación a nuevos usuarios. El espíritu de ese sitio web sigue vivo en MDN Web Docs de Mozilla. Webmoney cerró en 2004 y MDN Web Docs llegó en 2005, por lo que existe una conexión natural entre los dos.

    La página de inicio de MDN Web Docs.

    La página de inicio de MDN Web Docs.

    Es una colección de recursos que le ayudarán a enseñarle a programar para la web en algunos casos y productos específicos de Mozilla en otros. El contenido se divide en dos grandes categorías: tecnologías y guías de referencia. Se le muestran varios tutoriales basados ​​en su capacidad y experiencia existentes, una guía de referencia dedicada y algunos recursos adicionales para el primero.

    Todas las guías están relacionadas con nichos e industrias específicas dentro de la industria del desarrollo. Por ejemplo, la referencia de desarrollo web actúa como una página de "piedra angular" para guías adicionales de HTML, CSS y JavaScript.

    Página de JavaScript de MDN Web Docs.

    Página de JavaScript de MDN Web Docs.

    También hay una mirada amplia a varias industrias, como el desarrollo de juegos y lo que se necesita para comenzar en el campo:

    La guía MDN sobre desarrollo de juegos.

    Guía de MDN Web Doc sobre desarrollo de juegos.

    MDN Web Docs es una lectura esencial para un desarrollador web principiante y también ofrece un valor más que suficiente para un experto. Si hay algún sitio que merezca un marcador de navegador, ¡este es!

    57. DevDocs - Navegador de documentación de API

    En el pasado, guardaba todos los manuales de los productos que compraba en un cajón o armario polvoriento. A medida que la vida se ha vuelto más digital, esos manuales en papel han dado paso a descargas en PDF desde el sitio web de cada fabricante.

    A través de esto, ahora tenemos sitios web que recopilan las versiones digitales de los manuales en bibliotecas seleccionadas. Le permite encontrar lo que necesita en un repositorio. Como tal, es lógico que también exista uno para temas de desarrollo web.

    En resumen, DevDocs es una biblioteca de documentación para API, y creemos que será valioso para casi todos los desarrolladores:

    La página de inicio de DevDocs.

    La página de inicio de DevDocs.

    Antes de revisar la biblioteca, querrá habilitar la documentación de la API que desee. Haces esto desde el Preferencias pantalla:

    La pantalla de preferencias de DevDocs.

    La pantalla de preferencias de DevDocs.

    Una vez hecho esto, podrá acceder a la documentación relevante desde un menú de árbol dedicado:

    La pantalla de la API de WordPress.

    La pantalla de la API de WordPress.

    Es una solución simple a un problema ineficiente, ya que tiene varias referencias de API en un solo lugar. DevDocs es otro sitio que merece un marcador, y es una pena que no haya una aplicación de escritorio disponible para una referencia aún más rápida.

    58. Trucos CSS

    Chris Coyier es un nombre que muchos desarrolladores web conocerán. Apostaríamos a que ya está familiarizado con el sitio web que fundó: CSS-Tricks. Como su nombre indica, es un sitio web dedicado a la codificación frontend, específicamente CSS, y cómo mejorar.

    La página de inicio de CSS-Tricks.

    La página de inicio de CSS-Tricks.

    Como señala la página Acerca de, durante los primeros años, CSS fue el tema predominante. Desde entonces, sin embargo, HTML, JavaScript, WordPress y más se han vuelto tan importantes y discutidos con frecuencia. El resultado es un sitio centrado en el desarrollo de frontend, con una gran cantidad de artículos, videos y guías para inspirarte.

    El blogroll para CSS-Tricks.

    El blogroll para CSS-Tricks.

    Un elemento simple pero valioso es el CSS Almanac, que describe los selectores y las propiedades dentro de CSS. Es una excelente fuente de referencia si necesita ponerse al día con ciertos aspectos del idioma.

    El Almanaque de Trucos CSS.

    El Almanaque de Trucos CSS.

    Si bien hay aspectos de referencia de CSS-Tricks, no es un recurso de referencia per se. Aún así, debería ser un lugar habitual para ti, ya sea a través de un canal RSS u otra solución. El contenido es de alta calidad y puede desafiarlo de formas en las que no había pensado antes. Como mínimo, suscríbase al boletín y espere a que CSS-Tricks llegue a su bandeja de entrada.

    59. Comunidad DEV

    Imagine que podría tomar las partes excelentes de las redes sociales, el desarrollo web y Stack Overflow, y luego crear un sitio que las combine. La comunidad DEV podría ser el resultado.

    La página de inicio de la comunidad DEV.

    La página de inicio de la comunidad DEV.

    Es una plataforma de blogs, pero también una forma de encontrar respuestas a preguntas de desarrollo. Selecciona etiquetas y personas a seguir, y su suministro de noticias se convierte en una línea de tiempo automatizada y seleccionada de publicaciones e información:

    La línea de tiempo de la comunidad DEV para la etiqueta JavaScript.

    La línea de tiempo de la comunidad DEV para la etiqueta JavaScript.

    Es justo sugerir que esta es información que puede encontrar en todas partes, si está dispuesto a encontrarla. El punto positivo de la comunidad DEV es que está aquí y es una recopilación dirigida de temas de desarrollo. Piense en ello como una pista de convención de desarrolladores, en lugar de escuchar y meterse en una conversación relacionada en la parada del autobús.

    Es otro sitio que funcionará bien dentro de su fuente RSS, o como un resumen en su bandeja de entrada. Como tal, también es un recurso "durmiente" en el sentido de que te dirigirás mucho aquí sin darte cuenta.

    60. ¿Puedo usar ...

    Se podría argumentar que Jeeves inició la tendencia de hacer preguntas en Internet para encontrar información. Fue reemplazado rápidamente por varios algoritmos de búsqueda, aunque la búsqueda basada en preguntas sigue siendo una forma confiable de encontrar lo que necesita.

    Puedo usar… es la respuesta del desarrollador de frontend a "¿Existe un Ask Jeeves para CSS?"

    La página de inicio ¿Puedo usar ...?

    La página de inicio ¿Puedo usar ...?

    La premisa es simple: escribe el selector CSS o la propiedad en el campo de búsqueda, y la base de datos devuelve si puede usarlo para crear sitios web. Tampoco estás restringido a CSS. También se admiten JavaScript y HTML:

    Buscando un elemento HTML en ¿Puedo usar…?

    Buscando un elemento HTML en ¿Puedo usar…?

    Es una base de datos de lenguaje de interfaz, por lo que no buscará devolver resultados para PHP, Python u otros lenguajes del lado del servidor. Aún así, Puedo usar… es una herramienta inmensa y valiosa que te ayudará cuando se trata de accesibilidad y diseño para múltiples dispositivos.

    Es una propuesta simple extraer un elemento específico y ver de un vistazo si su navegador de destino lo admite:

    La tabla de compatibilidad del navegador en ¿Puedo usar ...

    La tabla de soporte del navegador en Puedo usar…

    Si observa más de cerca, también puede encontrar estadísticas como la fecha de lanzamiento del elemento y un porcentaje de uso:

    Información para un elemento específico en ¿Puedo usar ...

    Información para un elemento específico en ¿Puedo usar ...

    En conjunto, Puedo usar… puede que no tenga un uso regular. Sin embargo, en ciertas etapas de un proyecto, estará abierto casi todo el tiempo. Una vez que haya descubierto qué admitirán sus navegadores de destino, Puedo usar… vuelve a aparecer en tus marcadores y espera la próxima vez que se necesite. Es un servicio útil que puede ser un "portador de agua" cuando se trata de su código de interfaz.

    Desde el wireframing hasta el diseño y la creación de flujos de trabajo colaborativos, hay muchas cosas que implican un proyecto de desarrollo exitoso 👨‍💻 Estas herramientas lo ayudarán a mantener las cosas optimizadas 😌Haz clic para tuitear

    Resumen

    El tiempo y el dinero son cortos, y hay algo de lógica para optar por las mismas herramientas de desarrollo web que siempre ha usado. Sin embargo, tomar una decisión meditada sobre las necesidades de un proyecto dará sus frutos en tiempo, costos y productividad.

    En esta publicación, hemos cubierto 60 increíbles herramientas de desarrollo web que puede usar en 2021 para brindarle a usted y a su equipo un impulso. Podría ser que ya lo hagas. Si las diversas encuestas son correctas, más desarrolladores que nunca recurren a GitHub, TypeScript, diferentes pilas de servicios web y una de las muchas Marcos de JavaScript para obtener proyectos sobre la línea.

    ¿Tiene una herramienta de desarrollo web para recomendar que los desarrolladores utilizarán en 2021? ¡Háganos saber sus pensamientos en la sección de comentarios a continuación!


    Si disfrutó de este artículo, entonces le encantará la plataforma de alojamiento de WordPress de Kinsta. Acelere su sitio web y obtenga asistencia las 24 horas, los 7 días de la semana de nuestro veterano equipo de WordPress. Nuestra infraestructura impulsada por Google Cloud se centra en la escalabilidad, el rendimiento y la seguridad. ¡Permítanos mostrarle la diferencia de Kinsta! Mira nuestros planes

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Subir