The latest articles on DEV Community by Hebert Romero (@hromero). https://dev.to/hromero https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F177124%2Fcb5dd80b-4f4e-48c4-85d0-babfd041c408.jpeg https://dev.to/hromero en Hebert Romero Tue, 23 Jun 2020 20:09:48 +0000 https://dev.to/hromero/re-escribiendo-un-switch-2ge4 https://dev.to/hromero/re-escribiendo-un-switch-2ge4 <p>Hace poco me toco realizar un filtro que tenia una particularidad, <br> este filtro tenia 8 opciones, pero desde la base de datos yo recibía solo un id, para lo cual en la vista me tocaba realizar comparación del id que me llegaba desde la base de datos con los nombres de los filtros que tenia en un array. Inmediatamente pensé en un switch, pero los switch son estructuras que no me gusta usar mucho cuando tengo mas de 3 opciones porque se puede volver un tanto incomodo de mantener.</p> <p>Esto es algo muy común y hoy vamos a ver algunas alternativas</p> <h2> switch tradicional </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--szWWXBpg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3c0gpdtj3onu5a7wlxac.PNG" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--szWWXBpg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3c0gpdtj3onu5a7wlxac.PNG" alt="switch "></a></p> <p>Aquí podemos ver como la implementación se va volviendo una <br> estructura compleja que no es fácil de interpretar. </p> <h2> switch refactoring </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FdMzEaxI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/nj7wfxzt8drzmwgee07e.PNG" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FdMzEaxI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/nj7wfxzt8drzmwgee07e.PNG" alt="Alt Text"></a></p> <p>Aquí podemos ver como en una sola linea <br> resolvimos lo mismo que teníamos anteriormente. </p> <p>Buscar otras formas de hacer tareas comunes como esta puede ser una muy buena practica para mejorar nuestras habilidades y si se te ocurre alguna otra forma me gustaría leerla.</p> <p><iframe height="600" src="https://codepen.io/Corovino/embed/zYrwaVv?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> Hebert Romero Mon, 01 Jun 2020 18:07:59 +0000 https://dev.to/hromero/lazy-loading-nativo-para-la-web-5h8l https://dev.to/hromero/lazy-loading-nativo-para-la-web-5h8l <p>Hace un par de semanas <a class="comment-mentioned-user" href="https://dev.to/addyosmani">@addyosmani</a> nos sorprende con este tweet </p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--DSIHmBbS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/6kqwyi32qbwkm3a415ru.PNG" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DSIHmBbS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/6kqwyi32qbwkm3a415ru.PNG" alt="Alt Text"></a></p> <p>Esto tiene unas implicaciones magnificas ya que mejorará muchísimo<br> el rendimiento de nuestros sitios. </p> <h2> <strong>¿En qué consiste ?</strong> </h2> <p>Desde la versión 76 de chrome ya nos es posible usar el atributo <strong>loading</strong> sin la necesidad de crear lógicas complicadas y solo <br> cargando las imágenes o iframes solicitados en el punto exacto del <br> scroll. </p> <h2> <strong>¿Cómo funciona ?</strong> </h2> <p>Su implementación es muy sencilla, solo debemos agregar el atributo<br><br> <strong>loading</strong> a el elemento img, con esto debería ser suficiente <br> para tener una carga diferida de nuestras imágenes qué estén en foco y <br> fuera de el.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--PliOutt---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/mx1scxpau15nz003ktgh.PNG" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PliOutt---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/mx1scxpau15nz003ktgh.PNG" alt="Alt Text"></a></p> <ul> <li> <strong>Auto</strong>: Comportamiento por defecto del elemento, es como si notuviera el trbuto </li> <li> <strong>lazy</strong>: Aplaza el llamado al recurso hasta que este en foco de pantalla</li> <li> <strong>eager</strong>: carga el recurso inmediatamente sin importar donde este localizado en nuestra pagina.</li> </ul> <h2> <strong>Compatibilidad en navegadores</strong> </h2> <p>Hasta el día de hoy esta funcionalidad esta soportada por navegadores basados en chromium y Firefox. Pero siempre es posible consultar <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Browser_compatibility">Compatibilidad en buscadores</a> </p> <h2> <strong>Demo</strong> </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--e7n2Rujj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/wnmpt5j29bm1jev2mkvl.PNG" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--e7n2Rujj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/wnmpt5j29bm1jev2mkvl.PNG" alt="Alt Text"></a></p> <p><iframe height="600" src="https://codepen.io/Corovino/embed/JjGPyZG?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> <strong>Conclusiones</strong> </h2> <p>Este es un gran aporte para mejorar el desempeño de nuestros proyectos, solo queda ponerla aprueba y disfrutar. </p> <p>Este post es un resumen en español del articulo en ingles<br> <a href="https://web.dev/native-lazy-loading/?fbclid=IwAR2CgCFtNfXBLCMm0dvOtAxUbp8Cz9TymNPaEninvl3JUTedjoPhFkegItA">web.dev</a> donde podrás profundizar mas sobre esta nueva funcionalidad. </p> html webdev javascript css