{"id":3151,"date":"2021-07-22T12:21:08","date_gmt":"2021-07-22T17:21:08","guid":{"rendered":"https:\/\/giovanirodriguez.dev\/?p=3151"},"modified":"2022-05-20T14:50:56","modified_gmt":"2022-05-20T19:50:56","slug":"10-increibles-herramientas-para-desarrolladores-web","status":"publish","type":"post","link":"https:\/\/giovanirodriguez.dev\/es\/10-increibles-herramientas-para-desarrolladores-web\/","title":{"rendered":"10 Incre\u00edbles Herramientas para Desarrolladores Web"},"content":{"rendered":"\n<p>El mundo de la programaci\u00f3n es cada vez m\u00e1s accesible. Los desarrolladores sabemos que vale m\u00e1s trabajar de manera inteligente que arduamente. Por eso creamos y compartimos recursos para nuestra comunidad. Es posible aprender desarrollo web por tu cuenta, s\u00f3lo hace falta tener las herramientas adecuadas. A continuaci\u00f3n, te muestro algunas herramientas para desarrolladores web que me son muy \u00fatiles.<\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-8789912029337488\" data-ad-slot=\"9182886459\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">1. Hidden Tools<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"461\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114135-1024x461.png\" alt=\"P\u00e1gina principal de la herramienta para desarrolladores Hidden Tools \" class=\"wp-image-3153 lazyload\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114135-1024x461.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114135-300x135.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114135-768x346.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114135.png 1350w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/461;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"461\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114135-1024x461.png\" alt=\"P\u00e1gina principal de la herramienta para desarrolladores Hidden Tools \" class=\"wp-image-3153\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114135-1024x461.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114135-300x135.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114135-768x346.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114135.png 1350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>La biblioteca de las bibliotecas, la fuente de las fuentes de herramientas para desarrolladores... Si necesitas una herramienta para dise\u00f1ar, construir un sitio o editar texto, seguro la encuentras en Hidden Tools. Este sitio tiene una compilaci\u00f3n enorme de recursos hechos por desarrolladores para ti. La variedad de categor\u00edas es asombrosa: desde herramientas para construir p\u00e1ginas, de anal\u00edtica, dominios, buscadores\u2026 Lo que se ocurra, seguro est\u00e1 aqu\u00ed. Algunos recursos son m\u00e1s bien para trabajar en equipo de manera organizada, que quiz\u00e1s te haga m\u00e1s falta que una herramienta para hacer degradados de color. De cualquier forma, Hidden Tools es un sitio que vale la pena explorar.<\/p>\n\n\n\n<p>Pru\u00e9balo <a href=\"https:\/\/hiddentools.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. VisBug<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114528-1024x473.png\" alt=\"p\u00e1gina principal de la p\u00e1gina de prueba de Vis Bug \" class=\"wp-image-3154 lazyload\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114528-1024x473.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114528-300x139.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114528-768x355.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114528.png 1344w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/473;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114528-1024x473.png\" alt=\"p\u00e1gina principal de la p\u00e1gina de prueba de Vis Bug \" class=\"wp-image-3154\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114528-1024x473.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114528-300x139.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114528-768x355.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-114528.png 1344w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>Programar ser\u00eda mucho m\u00e1s f\u00e1cil si s\u00f3lo se tratara de mover cosas directamente sobre la p\u00e1gina web. Vis Bug se acerca mucho a eso. Esta es una extensi\u00f3n de Google Chrome que te permite interactuar de manera visual con tu p\u00e1gina web. \u00bfA qu\u00e9 me refiero? Al usarla, ver\u00e1s sobre cada elemento de tu p\u00e1gina un borde rosado que te permitir\u00e1 mover elementos de tu p\u00e1gina de lugar, medirlos, cambiar el estilo y mucho m\u00e1s. As\u00ed podr\u00e1s jugar con c\u00f3mo se ve tu p\u00e1gina sin pasar horas probando diferentes c\u00f3digos. Despu\u00e9s de que quede justo c\u00f3mo te gusta, te diriges al inspector para de ah\u00ed copiar el nuevo c\u00f3digo y listo. Una maravilla de extensi\u00f3n y es gratis.<\/p>\n\n\n\n<p>Pru\u00e9balo <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/visbug\/cdockenadnadldjbbgcallicgledbeoc\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Insomnia<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"460\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115015-1024x460.png\" alt=\"p\u00e1gina principal de Insomnia, depurador web\" class=\"wp-image-3156 lazyload\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115015-1024x460.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115015-300x135.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115015-768x345.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115015.png 1346w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/460;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"460\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115015-1024x460.png\" alt=\"p\u00e1gina principal de Insomnia, depurador web\" class=\"wp-image-3156\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115015-1024x460.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115015-300x135.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115015-768x345.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115015.png 1346w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>No existen c\u00f3digos perfectos. Desafortunadamente y por los motivos que sea, siempre hay que regresar y corregir errores. Pero, hay maneras de hacerlo m\u00e1s f\u00e1cil y eficientemente. Insomnia es una herramienta de depuraci\u00f3n (debugging) que te ayuda a agilizar este proceso. Es muy buena para mantenerte organizado a lo largo del proceso. Insomnia, hace la introspecci\u00f3n, no hace falta que reescribas solicitudes HTTP y puedes reutilizar valores. Si como desarrollador batallas con esta parte del proceso, no dudes en usarla.<\/p>\n\n\n\n<p>Pru\u00e9balo <a href=\"https:\/\/insomnia.rest\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. 30 Seconds of Code<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"448\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115111-1024x448.png\" alt=\"P\u00e1gina principal de 30 Seconds of Code\" class=\"wp-image-3157 lazyload\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115111-1024x448.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115111-300x131.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115111-768x336.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115111.png 1362w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/448;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"448\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115111-1024x448.png\" alt=\"P\u00e1gina principal de 30 Seconds of Code\" class=\"wp-image-3157\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115111-1024x448.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115111-300x131.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115111-768x336.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115111.png 1362w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>\u00bfHabr\u00e1 alguna manera de ahorrarte tiempo escribiendo c\u00f3digo? Hay muchas, 30 Seconds of Code es una. Esta biblioteca tiene fragmentos cortos de c\u00f3digo que te ahorrar\u00e1n tiempo programando. El sitio se encuentra bastante bien organizado por lenguajes de programaci\u00f3n. Cuentan con: Java Script, CSS, <a class=\"btl_autolink_hyperlink\"  href=\"https:\/\/giovanirodriguez.dev\/go\/vuexy-vuejs-react-angular-html--laravel-admin-template\"   >React<\/a> Hooks, Python y Java Scripts Algorithms. Adem\u00e1s, uedes buscar por nombre, lenguaje o descripci\u00f3n. Una herramienta muy bien pensada para saltarte pasos tediosos.<\/p>\n\n\n\n<p>Pru\u00e9balo <a href=\"https:\/\/www.30secondsofcode.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Can I Use<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"483\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115250-1024x483.png\" alt=\"Pantalla principal de Can I Use\" class=\"wp-image-3158 lazyload\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115250-1024x483.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115250-300x141.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115250-768x362.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115250.png 1343w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/483;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"483\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115250-1024x483.png\" alt=\"Pantalla principal de Can I Use\" class=\"wp-image-3158\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115250-1024x483.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115250-300x141.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115250-768x362.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115250.png 1343w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>\u00bfEst\u00e1s seguro de que la p\u00e1gina que est\u00e1s construyendo es compatible con todos los navegadores? Puede ser un problema responder a esta pregunta, Can I Use lo sabe y da una soluci\u00f3n. Con esta app puedes visualizar f\u00e1cilmente si las tecnolog\u00edas de uso final que est\u00e1s usando corren bien con determinado navegador. Se han asociado con Browser Stack, lo cual ahora permite que revises la compatibilidad de tu p\u00e1gina en m\u00e1s de 2000 buscadores y dispositivos. Esta herramienta es buen\u00edsima para anticiparte a problemas de este tipo. Puedes revisar antes de empezar qu\u00e9 tecnolog\u00edas son compatibles y ahorrarte mucho tiempo. Es muy \u00fatil.<\/p>\n\n\n\n<p>Pru\u00e9balo <a href=\"https:\/\/caniuse.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Keyframes<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"466\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115405-1024x466.png\" alt=\"Pantalla principal de KeyFrames\" class=\"wp-image-3159 lazyload\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115405-1024x466.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115405-300x136.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115405-768x349.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115405.png 1365w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/466;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"466\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115405-1024x466.png\" alt=\"Pantalla principal de KeyFrames\" class=\"wp-image-3159\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115405-1024x466.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115405-300x136.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115405-768x349.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115405.png 1365w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>Hacer una animaci\u00f3n es dif\u00edcil. M\u00e1s cuando debes escribir c\u00f3digo y luego regresar a la p\u00e1gina, ver si funcion\u00f3, regresar, corregir, volver al navegador a ver si se reflejaron los cambios\u2026 Puede ser un infierno. Por eso existe Keyframes, una app que lo simplifica todo. Su creador la hizo justamente pensando en este problema y en que ten\u00eda que valerse de muchas herramientas separadas para hacer animaciones. Con esta app puedes programar y en la misma pantalla ver c\u00f3mo va resultando tu animaci\u00f3n. Keyframes es gratuita, sencilla y sin anuncios. Necesitas ya saber algo de CSS pero hay tutoriales y ejemplos para guiarte. Vale mucho la pena, libera mucho estr\u00e9s de todo el asunto de hacer animaciones.<\/p>\n\n\n\n<p>Pru\u00e9balo <a href=\"https:\/\/keyframes.app\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. Bundlephobia<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"466\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115511-1024x466.png\" alt=\"\" class=\"wp-image-3160 lazyload\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115511-1024x466.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115511-300x136.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115511-768x349.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115511.png 1339w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/466;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"466\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115511-1024x466.png\" alt=\"\" class=\"wp-image-3160\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115511-1024x466.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115511-300x136.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115511-768x349.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-115511.png 1339w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>Como desarrolladores sabemos que lo m\u00e1s importante es la velocidad. Si el sitio carga lento, algo va mal. Por eso, hay que evaluar el peso de los paquetes que instalamos en nuestra p\u00e1gina. Bundlephobia es la herramienta perfecta para esto. En esta app introduces el nombre de un paquete o buscas por categor\u00eda y te despliega los costos de performativo de agregar ese paquete. Te desglosa su peso y el tiempo de carga. Esto ayuda much\u00edsimo para saber qu\u00e9 vale la pena incluir y qu\u00e9 podemos dejar pasar, destaca mucho entre las herramientas para desarrolladores web.<\/p>\n\n\n\n<p>Pru\u00e9balo <a href=\"https:\/\/bundlephobia.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. Figma<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"470\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120214-1024x470.png\" alt=\"\" class=\"wp-image-3161 lazyload\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120214-1024x470.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120214-300x138.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120214-768x353.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120214.png 1341w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/470;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"470\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120214-1024x470.png\" alt=\"\" class=\"wp-image-3161\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120214-1024x470.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120214-300x138.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120214-768x353.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120214.png 1341w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>Para dise\u00f1ar o hacer modelos de la app que est\u00e1s desarrollando, no hay como Figma. Esta app hace que hacer dise\u00f1os vectoriales sea f\u00e1cil y r\u00e1pido sin perder el sentido de la est\u00e9tica. Adem\u00e1s, te permite hacer un modelo de la app que est\u00e9s desarrollando, sea para Android o iOs. Est\u00e1 en la web, entonces tus proyectos se guardan ah\u00ed y estar\u00e1n disponibles desde cualquier dispositivo. Lo mejor de todo: es completamente gratis. Esta es en definitiva una app que no te puedes perder.<\/p>\n\n\n\n<p>Pru\u00e9balo <a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">9. Font Flipper<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"453\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120345-1024x453.png\" alt=\"Front Flipper editor\" class=\"wp-image-3162 lazyload\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120345-1024x453.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120345-300x133.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120345-768x340.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120345.png 1346w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/453;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"453\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120345-1024x453.png\" alt=\"Front Flipper editor\" class=\"wp-image-3162\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120345-1024x453.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120345-300x133.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120345-768x340.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120345.png 1346w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>Muchas veces no sabemos realmente c\u00f3mo se ver\u00e1 una fuente en nuestro dise\u00f1o. Puedes haber descargado cien fuentes diferentes y quedar insatisfecho con todas ellas una vez que las pruebas con el dise\u00f1o. Por eso es mejor usar Font Flipper antes de descargar cualquier. Esta app te permite subir tu dise\u00f1o y experimentar con diferentes fuentes directamente sobre \u00e9l. Si das a la izquierda, descartar\u00e1 la fuente, a la derecha la guardar\u00e1. Al final, cuando tengas una selecci\u00f3n de fuentes que te agraden, puedes volver a ellas para descargarlas directamente. Esta herramienta te ahorrar\u00e1 tiempo y espacio en tu computadora.<\/p>\n\n\n\n<p>Pru\u00e9balo <a href=\"https:\/\/fontflipper.com\/upload\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">10. Cloud Craft<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"472\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120544-1024x472.png\" alt=\"Pantalla principal de Cloud Craft\" class=\"wp-image-3163 lazyload\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120544-1024x472.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120544-300x138.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120544-768x354.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120544.png 1344w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/472;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"472\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120544-1024x472.png\" alt=\"Pantalla principal de Cloud Craft\" class=\"wp-image-3163\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120544-1024x472.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120544-300x138.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120544-768x354.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-22-120544.png 1344w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>Por \u00faltimo, pero no menos importante: Cloud Craft. Esta herramienta sirve para dise\u00f1ar diagramas inteligentes para AWS. Estos diagramas son como los planos de un arquitecto, te ayudan a tener visualizada la estructura que est\u00e1s construyendo y hace que sea un proceso m\u00e1s comprensivo. Son ideales si vas a trabajar en equipo y necesitas que todos est\u00e9n en la misma p\u00e1gina. Cloud Craft te ayuda a hacer un presupuesto para tu proyecto, te indica en tiempo real los costos de lo que est\u00e1s construyendo. Aunque esto no es todo, con Cloud Craft Live puedes conectarte a la nube para modelar tu medio. Esto tambi\u00e9n hace que te mantengas al d\u00eda y as\u00ed te aseguras de estar construyendo con tecnolog\u00edas compatibles. De todas las herramientas para desarrolladores, esta es excelente, es f\u00e1cil de usar, te ayuda a mantenerte organizado y a contemplar tu proyecto de manera visual.<\/p>\n\n\n\n<p>Pru\u00e9balo <a href=\"https:\/\/www.cloudcraft.co\/#Create-your-cloud\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<p>Hacer un trabajo minucioso r\u00e1pidamente es lo m\u00e1s satisfactorio en el trabajo de un desarrollador. La pr\u00e1ctica te har\u00e1 m\u00e1s experimentado en cada parte del proceso, pero la ayuda siempre es bienvenida. Estas herramientas seguro te ser\u00e1n un gran apoyo.<\/p>\n\n\n\n<p>\u00bfCu\u00e1les son tus herramientas para desarrollo web favoritas? Dime en los comentarios.<\/p>\n\n\n\n<p>Si te gust\u00f3, sigue leyendo:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/giovanirodriguez.dev\/es\/10-mejores-herramientas-seo-gratuitas\/\" target=\"_blank\" rel=\"noreferrer noopener\">10 Mejores Herramientas SEO Gratuitas<\/a><\/li><li><a href=\"https:\/\/giovanirodriguez.dev\/es\/extensiones-utiles-de-google-chrome\/\" target=\"_blank\" rel=\"noreferrer noopener\">Extensiones \u00datiles de Google Chrome<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Es posible aprender desarrollo web por tu cuenta, s\u00f3lo hace falta tener las herramientas adecuadas. A continuaci\u00f3n, te muestro algunas herramientas para desarrolladores web que me son muy \u00fatiles.<\/p>\n","protected":false},"author":6,"featured_media":3179,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wds_primary_category":0,"footnotes":""},"categories":[328],"tags":[326],"class_list":["post-3151","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mejores-10","tag-herramientas"],"_links":{"self":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/posts\/3151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/comments?post=3151"}],"version-history":[{"count":1,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/posts\/3151\/revisions"}],"predecessor-version":[{"id":6700,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/posts\/3151\/revisions\/6700"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/media\/3179"}],"wp:attachment":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/media?parent=3151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/categories?post=3151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/tags?post=3151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}