javascript

Recursos de programación de javascript
▬▬▬▬▬▬ Título de la Sesión ▬▬▬▬▬▬ Mejora del rendimiento del componente TreeFilter en el panel de contenidos ▬▬▬▬▬▬ Ponente ▬▬▬▬▬▬ Beltrán Rengifo Beltrán es Senior Frontend Engineer en Liferay y entre sus pasiones Javascript está en primer lugar. Vue, React, Nuxt, Next, SASS/LESS/BEM, Styled Components. JS del lado del servidor con Node y a veces Python o PHP. Intentando con ahínco asumir los conocimientos necesarios de Frontend devops como Docker, CI/CD con Gitlab/GitHub, Jenkins y Rancher. Intentando controlar Webpack desde 2017. Admirando las plataformas Vercel y Netlify. * Linkedin - https://www.linkedin.com/in/beltranrengifo/ * Twitter - https://twitter.com/BeltranRengifo ▬▬▬▬▬▬ Resumen ▬▬▬▬▬▬ En este caso veremos cómo el equipo de Liferay se planteó la necesidad de auditar el rendimiento del componente React TreeFilter y nos compartirán los resultados obtenidos. En la sesión se aprenderá a detectar, analizar y resolver problemas de rendimiento en un componente React JS, para ello se realizará: * Detectar mediante la realización de pruebas pesadas * Analizar concluyendo sobre las métricas * Resolver implementando las tareas más eficientes y asequibles En el camino mostraremos algunas implementaciones de JS dentro de los componentes de React, cómo probamos el rendimiento utilizando el componente OOTB Profiler de React, y las correcciones finales que implementamos en la rama master. Primero se presentará el componente, sus principales funciones y los inconvenientes que detectamos en el camino, para después mostrar el test de rendimiento, los resultados y la implementación de las mejoras. La agenda de la sesión de este miércoles será la siguiente: 18:30 - Bienvenida y Anuncios 18:40 - Meetup Enero 2022 - Mejora del rendimiento del componente TreeFilter en el panel de contenidos - Beltrán Rengifo. 19:25 - Q & A 19:30 - Networking (Mozilla Hubs) ▬▬▬▬▬▬ Organizadores de la sesión ▬▬▬▬▬▬ - - - ▬▬▬▬▬▬ LUGSpain ▬▬▬▬▬▬ Twitter - https://twitter.com/LUGSpain Slack - https://liferay.dev/chat Meetup - https://www.meetup.com/es-ES/Liferay-Spain-User-Group/
Quieres montar una startup para darle una vuelta a cómo gestionamos las dailies a día de hoy. Tienes la idea de montar una app. Objetivo: que las personas del equipo puedan comunicarse de forma asíncrona y disfrutar más del rato que coincidamos conectados. Conclusión: ¿Por dónde empiezas? ¿JavaScript vanilla? ¿React? ¿React Native? ¿React Native Web? ¿Progressive Web App? ¿Nativo en iOS y Android? ¿Core compartido en Rust? 🤯 Hoy hablamos con Jorge y Sergi, 2 de los fundadores de Cassette que pasaron justamente por esta experiencia y nos contarán qué decisiones tecnológicas han tomado, cómo quieren replantear las dailies, y enseñarnos un poco de detalles de implementación 😬 📼 Cassette ├ 🔗 Web: https://cassetteapp.com ├ 🐦 Twitter: https://twitter.com/cassette_app ├ 👤 Jorge: https://twitter.com/jorgeavila_ss └ 👤 Sergi: https://twitter.com/SergiGP {▶️} CodelyTV ├ 🎥 Suscríbete: https://youtube.com/c/CodelyTV?sub_confirmation=1 ├ 🐦 Twitter CodelyTV: https://twitter.com/CodelyTV ├ 💂🏼 Twitter Rafa: https://twitter.com/rafaoe ├ 🧔🏻 Twitter Javi: https://twitter.com/JavierCane ├ 📸 Instagram: https://instagram.com/CodelyTV ├ ℹ️ LinkedIn: https://linkedin.com/company/codelytv ├ 🟦 Facebook: https://facebook.com/CodelyTV └ 📕 Catálogo cursos: https://bit.ly/cursos-codely
Pasamos de la típica discusión en #TypeScript sobre interface vs types a… ¿qué pasa si lo hacemos con Object Destructuring + Anonymous Types? ¿Implicaciones de legibilidad? ¿Rendimiento? ¿Por qué? ¿Por qué siempre se han hecho así las cosas en #JavaScript? ¿Tiene sentido que las sigamos haciendo así en todos los casos? En el caso particular de los constructores de nuestras clases: ¿Deberían recibir los parámetros como argumentos separados? ¿Tiene sentido encapsular todos los parámetros en un único objeto como argumento? ¿importa el orden de los argumentos? ¿Qué pasa con los parámetros opcionales? Este vídeo está sacado del curso de Domain-Driven Design en TypeScript a la hora de hablar del diseño de los constructores de nuestros agregados. Curso completo de #DDD en TS: 👉 https://pro.codely.tv/library/ddd-en-typescript-modelado-y-arquitectura-172533/375662/about/?utm_source=youtube&utm_medium=social&utm_campaign=course-launch&utm_content=ts-param-obj 👈 Curso completo para pasar de JS a TS 👉 https://pro.codely.tv/library/de-javascript-a-typescript-128106/347481/about/?utm_source=youtube&utm_medium=social&utm_campaign=related&utm_content=ts-param-obj 👈 {▶️} CodelyTV ├ 🎥 Suscríbete: https://youtube.com/c/CodelyTV?sub_confirmation=1 ├ 🐦 Twitter CodelyTV: https://twitter.com/CodelyTV ├ 💡 Twitter Rubén: https://twitter.com/rsaladocid ├ 🧔🏻 Twitter Javi: https://twitter.com/JavierCane ├ 📸 Instagram: https://instagram.com/CodelyTV ├ ℹ️ LinkedIn: https://linkedin.com/company/codelytv ├ 🟦 Facebook: https://facebook.com/CodelyTV └ 📕 Catálogo cursos: https://bit.ly/cursos-codely
Probamos el últimisimo framework JavaScript, REMIX https://remix.run {▶️} CodelyTV ├ 🎥 Suscríbete: https://youtube.com/c/CodelyTV?sub_confirmation=1 ├ 🐦 Twitter CodelyTV: https://twitter.com/CodelyTV ├ 🌶 Twitter Núria: https://twitter.com/nuria_codes ├ 🍺 Twitter Isma: https://twitter.com/ismanapa ├ 📸 Instagram: https://instagram.com/CodelyTV ├ ℹ️ LinkedIn: https://linkedin.com/company/codelytv └ 📕 Catálogo cursos: https://bit.ly/cursos-codely
En este vídeo te comparto 100 (sí, CIEN!) trucos para ayudarte a programar mejor. 👨‍💻 ¡Apúntate al Black Friday de Codely! 👉 https://bit.ly/codely-bf Los trucos que vemos: 1. Nivel de identación 2. Evita else 3. Encapsula los primitivos 4. Encapsula las colecciones 5. Sigue la ley de Demeter 6. No abrevies 7. Mantén tus entidades pequeñas 8. No clases con más de 2 dependencias en los constructores 9. No hagas getters/setters. Tell don't ask 10. Utiliza Object Calisthenics 11. Utiliza un Linter 12. Utiliza las GitHub actions para CI y CD 13. Usa un analizador estático del código 14. Sigue la regla de 3 repeticiones para evitar abstracciones prematuras 15. Ten un fichero "EditorConfig" 16. Llas I de las interfaces 17. La I de SOLID no significa inyección de dependencias 18. Versiona tus configs con dotly.sh 19. Cuando crees un recurso utiliza PUT 20. Busca la simplicidad en tu SO e IDE 21. Prueba en tu local la `beta`, pero en producción la `.1` 22. Si haces una web con light/dark theme haz que el tema se cambie según las preferencias 23. Utiliza light theme si estás en un ambiente con mucha luz 24. Y que puedas sobreescribirlo y sea configurable 25. Utiliza herramientas como ray.so o carbon.now.sh 26. Gestión de snippets 27. Hay tipografías que tienen un italic: Victor Mono, dank.sh 28. Si tienes dislexia utiliza comic mono 29. Si eres daltónica utiliza ese modo en todo lo que utilices 30. Aprovecha el Black Friday para formarte 31. No refactorices y cambies el comportamiento a la vez 32. No hagas una Pull Request que mezcle ambos 33. No hagas refactors si no tienes tests 34. Utiliza parallel change 35. cmd+shift+t para recuperar la última pestaña cerrada 36. Aprende un lenguaje muy diferente 37. Llega un punto donde el lenguaje es un detalle de implementación 38. Una de las cosas más complicadas de programar es ponerle nombre a las cosas 39. Y otra es saber dónde ponerlas 40. No utilices el argumento *porque lo dice menganita*, da argumentos reales 41. Es imposible hacer un código libre de errores/bugs 42. También es imposible modelar 100% tu dominio 43. El DDD tiene una parte táctica y otra estratégica 44. Los devs nos solemos centrar en la táctica 45. Ambas partes se unen en el lenguaje ubicuo 46. El UML no es el mal. Ta bien. Tampoco mucho. Pero ta bien 47. Bebe café 48. Pulsa control+k en github 49. Pusla control+shift+k 50. Pulsa t en GitHub 51. Pulsa . en GitHub 52. Sigue a ladybenko, moure, midu y manz 53. Ves a conferencias presenciales 54. No intentes empezar un proyecto con 100 microservicios desde 0 55. Depende 56. eXtreme programming 57. Cuando aprendemos está bien empezar a construir la casa por el tejado 58. Prepara algo para enseñar a los demás, es la mejor manera de aprender sobre un tema 59. Lee sitios como hackernews o mira el café con Codely 60. Organiza tu código por módulos y no por conceptos 61. Pon el tipo de retorno a todas tus funciones públicas 62. Modela tus errores con Either en lugar de lanzar excepciones 63. Gestiona los nulls utilizando un Maybe 64. Qué es una Mónada 65. Javascript no se va a comer el mundo 66. Aprende typescript 67. Haz descansos 68. Haz deporte 69. YAGNI, GRASP, Object Calisthenics 70. No te asustes por las siglas 71. CQRS no te obliga a tener un query y command bus 72. Pon límites o aviso de ellos en aws, gcp o lo que uses para no arruinarte 73. Hacer que un panel de grafana/kibana/datadog sea bonito hace que la gente lo use más 74. No hace falta que te aprendas al 100% los lenguajes de prometheus/influx 75. Ten una buena observabilidad de tu sistema 76. Con opentracing puedes saber todo lo que pasa en tu sistema 77. Usa `exa` en lugar de `ls` 78. Usa `bat` en lugar de `cat` 79. Usa `autojump` o `z` para navegar 80. Comando `tldr` 81. Alias para abrir el directorio actual en tu IDE 82. Encripta tu disco duro 83. Consistencia eventual 84. Evita utilizar joins 85. Explain 86. Intenta que main sea siempre estable por si algún día has de hacer un git bisect 87. Diferencia infraestructura de dominio 88. Busca ir un pasito más allá al hacer tutoriales de quick start 89. n8n no code 90. Star a repositorios de GitHub interesantes y follow al equipo Codely para ver sus stars 91. No uses lo nuevo 92. Considera usar un navegador que no sea Chrome 93. No uses valores arbitrarios en z-index 94. Hazte listas en Twitter 95. Usa Conventional Commit 96. Si no te acuerdas de un shortcut en VSCode presiona ctrl+shift+p 97. TIPs en X minutos ponlos a 2x y los verás en la mitad de tiempo 98. Descubre que puedes hacer con las developers tools de tu navegador 99. A programar se aprende programando 100. Like al vídeo y suscríbete {▶️} CodelyTV ├ 🎥 Suscríbete: https://youtube.com/c/CodelyTV?sub_confirmation=1 ├ 🐦 Twitter CodelyTV: https://twitter.com/CodelyTV ├ 💂‍♂️ Twitter Rafa: https://twitter.com/rafaoe ├ 📸 Instagram: https://instagram.com/CodelyTV ├ ℹ️ LinkedIn: https://linkedin.com/company/codelytv └ 📕 Catálogo cursos: https://bit.ly/cursos-codely
Charlamos un ratito al final del día sobre cómo ha ido la conferencia y de nuestros gustos personales sobre lenguajes de programación. Y cerveza. {▶️} CodelyTV ├ 🎥 Suscríbete: https://youtube.com/c/CodelyTV?sub_confirmation=1 ├ 🐦 Twitter CodelyTV: https://twitter.com/CodelyTV ├ 🌶 Twitter Núria: [https://twitter.com/nuria_codes](https://twitter.com/nuria_codes) ├ 💂🏼 Twitter Rafa: [https://twitter.com/rafaoe](https://twitter.com/rafaoe) ├ 🧔🏻 Twitter Javi: [https://twitter.com/JavierCane](https://twitter.com/JavierCane) ├ 👨🏻‍🌾 Twitter Dani: [https://twitter.com/dsantaka](https://twitter.com/dsantaka) ├ 🙋🏻‍♂️ Twitter Nino: [https://twitter.com/ninodafonte](https://twitter.com/ninodafonte) ├ 🍺 Twitter Isma: [https://twitter.com/ismanapa](https://twitter.com/ismanapa) ├ 📸 Instagram: https://instagram.com/CodelyTV ├ ℹ️ LinkedIn: https://linkedin.com/company/codelytv ├ 🟦 Facebook: https://facebook.com/CodelyTV └ 📕 Catálogo cursos: https://bit.ly/cursos-codely
Menudo combo traemos... Next.JS, Chakra UI y José Manuel Lucas 🚀 Next.js, es un framework de JavaScript que nos permite crear fácilmente sitios web de React listos para salir a producción. Instalando una sola dependencia puedes tener configurado todas las herramientas que necesitas: #Babel, #Webpack, server render... incluso el #deploy resulta mucho más sencillo. Por su lado, Chakra UI, está considerada como una de las bibliotecas de componentes más popular ya que es sencilla, modular y muy accesible. Te proporciona los bloques de construcción que necesitas para construir tus aplicaciones React y consigues de manera más ágil y rápida una gran experiencia de usuario. En este #livecoding conoceremos las ventajas del uso de #NextJS como motor de nuestra aplicación #frontend, los modos de renderizado y las diferencias entre ellos así como la implementación de una de las soluciones de diseño más famosas: #ChakraUI. Conoce más a José Manuel: https://jmlweb.es/ Comenta en twitter mencionando a @geeks_academy con el hashtag #MeetupsGeeksHubs. Únete a nuestra Comunidad en Slack: https://join.slack.com/t/geekshubs/shared_invite/zt-xjn9x7ht-yxM3kfCqnsYCYfu_x4mdJA Boocamp Full Stack Developer Presencial en Valencia, Madrid y Barcelona 🚀 https://bootcamp.geekshubsacademy.com/full-stack-developer/ 🎥 Canal de Youtube: https://www.youtube.com/user/geekshubs 🐦 Twitter GeeksHubs: https://twitter.com/geekshubs 🐦 Twitter GeeksHubs Academy: https://twitter.com/geeks_academy 📸 Instagram: https://instagram.com/geekshubs ℹ️️️️️ LinkedIn GeeksHubs: https://www.linkedin.com/company/geeks-hubs ℹ️️️️️ LinkedIn GeeksHubs Academy: https://www.linkedin.com/school/geekshubsacademy/ ? Facebook GeeksHubs: https://facebook.com/geekshubs ? Facebook GeeksHubs Academy: https://www.facebook.com/geekshubsacademy 📕 Plataforma online +30 cursos gratuitos: https://geekshubsacademy.com/ 🎧 Podcast I am Geek: https://open.spotify.com/show/4G4PpNzPOeWh5DrrumDXCd
Mastering JS Objects es una serie de eventos centrada en los objetos, la estructura más común en Javascript. A través de kits y debates intentaremos asentar primero el conocimiento de sus bases, y profundizaremos después en el uso de patrones y metodologías que ayuden a mejorar nuestros desarrollos del día a día. 0:00 Frameworks vs Vanilla 43:34 Tipado débil vs tipado fuerte 1:05:05 Let y const 1:17:35 Casting vs coerción 1:23:04 Async y await 1:30:22 Reto
Nuria ha trabajado como frontend en varias empresas de consultoría y start-ups, poniendo foco en JavaScript, CSS, buenas prácticas y accesibilidad. Siempre le ha gustado compartir conocimientos dando charlas y ahora trabaja en Codely para seguir compartiendo todo lo aprendido estos años en forma de cursos. Las páginas estáticas han vuelto. Con Jamstack (JavaScript, APIs y Markup) podemos generar páginas estáticas con mucho contenido, como blogs, que tienen buena performance, SEO excelente, seguras, estables, y con buena experiencia de desarrollo. Pero nada es perfecto y las páginas Jamstack tienen sus limitaciones también, una de ellas es la limitada capacidad para tratar con contenido dinámico generado por usuarios… hasta ahora! Las GitHub Actions son una forma de automatizar nuestros workflows. Ejecutar tests, linters, hacer build y deploy es probablemente el flow más habitual que nos viene a la cabeza. Pero esto es solo el principio, las GitHub Actions nos abren un nuevo mundo de posibilidades para las páginas Jamstack. En esta charla veremos cómo convertir GitHub en nuestro propio Content Management System que recibirá información que los usuarios envíen desde la aplicación client-side, las validará y publicará, todo sin un servidor back-end ni base de datos! #AdaLoversConf`21 #AdaLoversConf Síguenos en nuestras redes para estar al día de las novedades: - Twitter: https://goo.gl/MU5pUQ - Instagram: https://lk.autentia.com/instagram - LinkedIn: https://goo.gl/2On7Fj/ - Facebook: https://goo.gl/o8HrWX
Analizamos 7 formas de clonar objetos en JavaScript y TypeScript y las diferencias entre los métodos de clonado superficiales (Shallow) y los completos (Deep): 00:00 Introducción 00:39 0. Referencia 02:20 1. Object.assign (Shallow) 04:15 2. Spread operator (Shallow) 04:45 3. Prototype copy 07:21 4. Object.create (Herencia) 09:15 5. Serialization (Deep) 10:19 6. Recursive clone (Deep) 12:00 7. TypeScript 13:30 Shallow vs Deep copy Este el curso Patrones de Diseño Creacionales, utilizamos los métodos de clonado para implementar el patrón Prototype 👇 🏛 Curso de Patrones de diseño: https://bit.ly/ctv-patrones #JavaScript #DeepClone #ShallowCopy {▶️} CodelyTV ├ 🎥 Suscríbete: https://youtube.com/c/CodelyTV?sub_confirmation=1 ├ 🐦 Twitter CodelyTV: https://twitter.com/CodelyTV ├ 🧔🏻 Twitter Javi: https://twitter.com/JavierCane ├ 👨🏻‍🌾 Twitter Dani: https://twitter.com/dsantaka ├ 📸 Instagram: https://instagram.com/CodelyTV ├ ℹ️ LinkedIn: https://linkedin.com/company/codelytv ├ 🟦 Facebook: https://facebook.com/CodelyTV └ 📕 Catálogo cursos: https://bit.ly/cursos-codely