Útiles herramientas de desarrollo en línea que me encanta usar.

Internet está lleno de herramientas increíbles que nos hacen la vida más fácil como desarrolladores frontend. En esta publicación, daré una revisión rápida de 12 herramientas que uso con frecuencia en mi trabajo de desarrollo.






1. CanIUse



https://caniuse.com/#home







¿Alguna vez ha estado inseguro de si una API web sería compatible en cierto navegador o incluso estaría disponible en navegadores móviles? Esta herramienta en línea le facilita probar una API web para la compatibilidad del navegador.


Digamos que queremos saber qué navegadores y su versión admitirán la API de Web Share: navigator.share(...)





2. Minify



https://www.minifier.org/











Para reducir el tamaño del paquete de nuestro código de aplicación, empujamos a producción y los minimizamos. La minificación elimina espacios en blanco, código muerto, etc. Esto da como resultado una reducción drástica en el tamaño del paquete de la aplicación que conducirá a tiempos de carga más rápidos en los navegadores.


Esta herramienta en línea minify.com nos permite minificar el código de una aplicación web.






3. Bit.dev




Bit.dev es un excelente centro de componentes. Lo uso para alojar, documentar y administrar componentes reutilizables de mis diferentes proyectos. Es una excelente manera de aumentar la reutilización de código, acelerar el desarrollo y optimizar la colaboración de su equipo.


También es una buena alternativa para construir un sistema de diseño desde cero (ya que esencialmente tiene todo lo que un sistema de diseño necesita). Bit.dev funciona perfectamente con Bit , una herramienta de código abierto que maneja el aislamiento y la publicación de componentes.


Bit.dev es compatible con React, React with TypeScript, Angular, Vue y muchos otros.











4. Unminify








Esta herramienta le permite hacer que una pieza de código JS minimizado sea legible nuevamente al desempaquetar, desofuscar y prettificarlos.


5. Stackblitz




Esta es la herramienta popular de todos. Stackblitz nos ofreció la posibilidad de utilizar el IDE más popular y más utilizado en el mundo, Visual Studio Code en la web.





https://stackblitz.com










Stackblitz ofrece un andamiaje rápido de proyectos Angular, React, Vue, Vanilla, RxJS, TypeScript con un solo clic.





Stackblitz es particularmente útil cuando desea probar un código o una función en cualquiera de los marcos JS actuales desde su navegador. Imagina que estás leyendo un artículo angular y te encuentras con un código que quieres probar. Puede minimizar su navegador y construir un nuevo proyecto Angular solo por unos pocos LOC. Simple, no minimiza su navegador, simplemente cree una nueva pestaña y navegue a stackblitz, com y haga clic en el icono del proyecto Angular, se le presentará un proyecto Angular completo en línea.





Rapido y facil.





Hay otros IDE increíbles en línea, pero creo que el punto de inflexión de Stackblitz fue utilizar la sensación favorita de Visual Studio Code, una herramienta con la que todos están familiarizados.





6. JWT.io



Si usa JSON Web Tokens (JWT) para proteger su aplicación o usa JWT para permitir que sus usuarios accedan a recursos protegidos en su back-end.





Una forma de tomar una decisión sobre si se debe acceder o no a una ruta o recurso es verificar el tiempo de vencimiento del token. Hay momentos en los que queremos decodificar un JWT para ver su carga útil, jwt.io proporciona precisamente eso.





https://jwt.io













Esta herramienta en línea nos permite conectar tokens para ver su carga útil. Una vez que peguemos el token, jwt.io decodifica el token y muestra sus cargas útiles.



7. Storybook




Esta es una herramienta en línea donde puede crear, editar, probar y ejecutar cualquier componente de forma aislada.





https://storybook.js.org







Permite el desarrollo estructurado de IU, pruebas y documentación para cada capa de vista principal, incluyendo React, Angular, Vue, React Native, Ember.




8. BundlePhobia



¿Alguna vez ha estado inseguro del tamaño de su node_moduleso simplemente quiere saber el tamaño de un pakckage.json se instalará en su máquina? BundlePhobia proporciona la respuesta





https://bundlephobia.com







Esta herramienta nos permite cargar un archivo package.json y muestra el tamaño de las dependencias que se instalarán desde package.json.





9. Babel REPL



Babel es un transcompilador JS gratuito y de código abierto que se utiliza para convertir el código ES moderno a JavaScript ES5 simple.





Esta herramienta es una configuración de aplicación web en línea realizada por el equipo de Babeljs donde podemos transpilar el código ES6 + a ES5.





https://babeljs.io/en/repl










Nos permite probar adiciones recientes hechas a ES o algunas características que se encuentran en ciertas etapas de adición a la ECMA. TI puede embellecer el código, limitar el tamaño del archivo y nos permite viajar en el tiempo a través de la duración de la transpilación.





10. Prettier



Prettier es un formateador de código JS obstinado. Aplica un estilo consistente al analizar su código y volver a imprimirlo con las mejores prácticas de codificación de JS.





Esta herramienta se ha utilizado popularmente en nuestro entorno de desarrollo, pero también tiene un área de juegos en línea donde puede embellecer su código.





https://prettier.io/playground










11. Postman



https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop










Esta herramienta ayuda con una prueba rápida de sus puntos finales API: OBTENER, PUBLICAR, BORRAR, OPCIONES, PONER.





He usado esta herramienta y vale la pena ubicarse en la undécima posición.





12. JSLint



En el mundo de JS linters, JSLint encabeza la liga. Esta versión de la herramienta en línea de JSLint nos permite conectar un fragmento de código JS o un archivo JS en nuestro navegador.





Navega a https://jslint.com para probarlo.







Conclusión



Hay muchos más en la lista, pero estos son las mas usadas.





Si tiene alguna pregunta con respecto a esto o cualquier cosa que deba agregar, corregir o eliminar, siéntase libre de comentar, enviarme un correo electrónico o enviarme un mensaje.





Gracias ATT anezsoft !!!