<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: 🍉Sandy Becaria IT🍉</title>
    <description>The latest articles on DEV Community by 🍉Sandy Becaria IT🍉 (@sandybecariait).</description>
    <link>https://dev.to/sandybecariait</link>
    <image>
      <url>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%2F1086815%2Fce6c55ec-119f-44c2-9d63-cf4827d5796a.jpg</url>
      <title>DEV Community: 🍉Sandy Becaria IT🍉</title>
      <link>https://dev.to/sandybecariait</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sandybecariait"/>
    <language>en</language>
    <item>
      <title>El problema de romper patrones</title>
      <dc:creator>🍉Sandy Becaria IT🍉</dc:creator>
      <pubDate>Fri, 27 Sep 2024 16:08:53 +0000</pubDate>
      <link>https://dev.to/sandybecariait/el-problema-de-romper-patrones-48dd</link>
      <guid>https://dev.to/sandybecariait/el-problema-de-romper-patrones-48dd</guid>
      <description>&lt;p&gt;Hace unos días encontré una publicación que decia lo siguiente &lt;strong&gt;“Date cuenta de que eres la primera mujer de tu linaje en ser financieramente independiente, que vive sola, que viaja, lee, trabaja y DECIDE sobre sí misma. ¡Estás haciendo historia!”&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Al mismo tiempo que conoci a una mujer de 70 años proveniente de Estados Unidos, que actualmente viaja y aprende como enseñar ingles a las personas, al contarme su vida no pude evitar tener un pensamiento que eventualmente me hizo sentir culpa🙇‍♀️, el pensamiento fue &lt;em&gt;“Me hubiese gustado tener una madre como usted”.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Entonces mientras la culpa me llenaba de ideas, no pude evitar preguntarme🤔 ¿Acaso el problema es latinoamerica y las familias tradicionales?&lt;/p&gt;

&lt;p&gt;Pude darme cuenta de que mientras más avanzaba y me dedicaba a vivir mi vida, más desconectada me sentía de mi familia, al grado de que muchas veces tuve el sentimiento de que mi personalidad los incomodaba, quien sabe, quizá los incomodaba la forma en la que comencé a establecer límites, quizá era el hecho de no querer tener pareja por el miedo intenso que le tenia al compromiso o quizá que soy la única de mi familia que se dedicó a tatuarse, no tener un trabajo 100% estable y tratar de encontrar la felicidad por medio de viajes, ejercicio y la mayor parte del tiempo, exponerse a riesgos innecesarios.&lt;/p&gt;

&lt;p&gt;Siempre he pensado que mis padres me criaron con las herramientas que tenían a su alcance e intentando hacerlo mejor que mis abuelos, por ejemplo, mi padre dejo de tomar alcohol y ser agresivo porque sabía que estaba repitiendo el patrón que mi abuelo tuvo con ellos, mi mamá siempre hizo lo que pudo para ayudarnos con las tareas, hasta la fecha nos hace comidas muy ricas y aunque no lo dice, está orgullosa de todos y cada uno de sus hijos; pero quien más fue una guía para mí, fue un tio que nos apoyó mucho en el ámbito académico, ya sea comprando material o pagando colegiaturas y siempre que necesito un consejo, él está ahí para apoyarme.&lt;/p&gt;

&lt;p&gt;Cuando regreso a mi adolescencia y veo a una 🍉Sandy asustada, que no tenía ni la menor idea de que estaria haciendo a los 26 años de lo único que si estoy segura, es de que estaria ligeramente decepcionada de ver que no estamos perdidamente enamoradas de nuestro primer amor y con un Hijo, porque si, Sandy pequeña queria una familia tradicional panista.&lt;/p&gt;

&lt;p&gt;Pero al mismo tiempo esa 🍉Sandy, estaria feliz de ver que cumplimos el objetivo de nuestra abuelita &lt;em&gt;“ser la mujer independiente que nunca en la vida, dependerá de ningún hombre y que en el momento que ve que una relación no funciona, puede salir de ahí”.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Luego de pensar todo esto, descubri algo muy importante, mi madre no tuvo los mismos privilegios que yo, no tuvo el privilegio de que alguien la obligara a estudiar, no tuvo a unos padres que la quisieran meter a clases de piano, que le hicieran aprender idiomas y que le inculcaran ese deseo de ser una mujer empoderada, al contrario, ella creció con la idea de ser esa ama de casa, que hace todo lo que él marido dice, porque pues es su marido, aun cuando eso implica alejarse por completo de su familia.&lt;/p&gt;

&lt;p&gt;Ella jamás tuvo el privilegio de irse de una relación, porque siempre escucho &lt;em&gt;“Tu sin mí no eres nada” o “Tu sola no podrás hacerlo, necesitas a alguien a tu lado”&lt;/em&gt;. Entonces ella y mi hermana crecieron con esa idea de que las mujeres debemos ser rescatadas, debemos aguantar a un hombre que aplica violencia física y/o psicológica, porque pues sin un hombre a lado nuestro no somos nada, como si estar completa dependiera afuerzas de ir buscando por el mundo esa parte que te complementa, cuando sin darnos cuenta, nada nos complementa, nada nos hará más felices que estar en paz con nosotras mismas y ya, en esa paz, elegir una pareja por decisión y no por soledad.&lt;/p&gt;

&lt;p&gt;Y lo más triste, crecieron con la idea de que a cierta edad, ya eres demasiado mayor como para aprender algo que quieres.&lt;/p&gt;

&lt;p&gt;Pero, metiéndome más en el tema, me dije a mi misma que el darse cuenta de esas cosas, al menos, en latinoamerica, es un privilegio. La salud mental es un privilegio, darse cuenta de esas cosas y quererlas cambiar entra en este privilegio, del cual gracias a todo el esfuerzo de esta mujer, de mi padre, de mis abuelos, de mi tio e incluso de mis hermanos que al trabajar me dieron dinero algunas veces, pues ahora poseo.&lt;/p&gt;

&lt;p&gt;A pesar de haber deseado tener una madre diferente por unos 10 minutos, me doy cuenta de que es la mujer más admirable que conozco, de que quizá, solo quizá nació en la época equivocada.&lt;/p&gt;

&lt;p&gt;Pero al final solo soy un simple mortal escribiendo todo esto detrás de una pantalla mientras busca un nuevo hobby.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Lo complicado de romper patrones</title>
      <dc:creator>🍉Sandy Becaria IT🍉</dc:creator>
      <pubDate>Tue, 12 Mar 2024 06:15:53 +0000</pubDate>
      <link>https://dev.to/sandybecariait/lo-complicado-de-romper-patrones-51hk</link>
      <guid>https://dev.to/sandybecariait/lo-complicado-de-romper-patrones-51hk</guid>
      <description>&lt;p&gt;¿Han visto &lt;strong&gt;Ratatouille&lt;/strong&gt;?, esa peli en donde dicen &lt;em&gt;“No abandonamos el nido, lo hacemos más grande”&lt;/em&gt;; bueno…&lt;/p&gt;

&lt;p&gt;A lo largo de mi vida, siempre fue según mi padre &lt;em&gt;“La más rebelde de sus hijos”&lt;/em&gt;, toda mi infancia pensé que no podía esperar a cumplir 18, para poder salirme de mi casa y comenzar de cero en un lugar nuevo; y aunque me vean toda Potra empoderada, me costo 6 años poderme despegar por completo.&lt;/p&gt;

&lt;p&gt;Me mude a los 20 años a una hora de mis padres, pero claro, cada finde estaba presente para dormir y pasar tiempo con ellos, luego me mude a 15 minutos y estaba todo el día en su casa, para luego ir a dormir a la mía; escuche comentarios de &lt;em&gt;“¿Para qué pagas renta?, mejor eso usalo para comprarte algo”&lt;/em&gt;; regrese como por un año a vivir con ellos, pero nunca me compre el depa soñado.&lt;/p&gt;

&lt;p&gt;Y así estuve, yendo y viniendo a casa de mis padres porque me costaba mucho dejar de tener esa dependencia emocional hacia ellos; hasta que un día me fui a 3 horas, lo cual tampoco me funciono, porque realmente lo hice por las razones equivocadas; estaba huyendo de mis problemas.&lt;/p&gt;

&lt;p&gt;Pero no solo era el tema del núcleo familiar, estaba la cuestión que más me causo problemas, &lt;strong&gt;entrar en relaciones destructivas&lt;/strong&gt;, solo porque era más fácil que de esa forma pudiera estar más lejos de mi familia.&lt;/p&gt;

&lt;p&gt;Al tocar fondo, decidí por fin estar sola y dejar de llenar todos los vacíos existenciales, esperando que alguien me rescatara, y fue así como… Entramos a la zona gris, el día en que tuve que afrontar mis problemas entendiéndome a mi misma, pero lo peor no era eso, lo peor fue conocerme y saber el porque hacia todo lo que hacía.&lt;/p&gt;

&lt;p&gt;Hasta la fecha sigo sin conocerme al 100, pero se que lo hago mejor que hace unos años en que me aterraba escuchar mis pensamientos, porque escucharlos implicaba saber que era lo que estaba haciendo mal; a mis 25 entendí que los traumas que fui cargando no eran culpa mía, pero si era mi responsabilidad elegir como reaccionar mientras cargaba con ellos; lo cual no siempre lo hice de la forma correcta.&lt;/p&gt;

&lt;p&gt;Hasta hace unos meses, opte por hacer lo más complicado…&lt;/p&gt;

&lt;p&gt;Mudarme a otro estado, pero lo que para muchos es algo muy sencillo, porque piensan que es parte de crecer; para alguien como yo que no podía despegarse tan fácilmente del núcleo familiar, resulto ser todo un reto. Principalmente la parte en donde le explicas a tu familia que no te vas porque te quieres casar o porque vas detrás de una persona &lt;em&gt;(lo cual hubiese hecho hace algunos años, ya que si he viajado a otros lugares porque me sentía enamorada)&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Por primera vez en mi vida, llegue a tener esa paz conmigo misma que busque durante años, la cual pensé que me daría la aceptación completa de mi padre o de mi principal figura paterna; pero no fue así. Hasta hoy no he obtenido esa aceptación, pero aprendí a vivir con lo que tengo y lo que tengo en este momento de mi corta vida, son 26 años, unos cuantos pesos en mi cuenta bancaria, una gatita llamada Leia, que se que es el amor más incondicional que la vida o cualquier fuerza misteriosa, me mando para amortiguar toda esta soledad y todas esas ganas de comenzar una aventura llena de tristeza, felicidad y que espero traiga consigo, un poco de conocimiento. &lt;/p&gt;

&lt;p&gt;Y termino este pequeño articulo citando uno de mis libros favoritos, porque fue la frase que me dijo mi hermano antes de partir:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;“Si allí encuentras la felicidad, vuelve, me la enseñaras. Si solo hallas desilusión, vuelve y juntos continuaremos sacrificando a los dioses”&lt;/em&gt;&lt;br&gt;
&lt;strong&gt;--Siddhartha – Hermann Hesse--&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
    </item>
    <item>
      <title>¿Metas y sueños? (A los veintitantos)</title>
      <dc:creator>🍉Sandy Becaria IT🍉</dc:creator>
      <pubDate>Fri, 02 Feb 2024 20:08:37 +0000</pubDate>
      <link>https://dev.to/sandybecariait/metas-y-suenos-a-los-veintitantos-1n48</link>
      <guid>https://dev.to/sandybecariait/metas-y-suenos-a-los-veintitantos-1n48</guid>
      <description>&lt;p&gt;Tengo 26 años y un día comencé a sentirme estancada, de repente todo el mundo se estaba casando 💏, teniendo hijos 🤰, comprando casas 🏡, carros 🚗, viajando por el mundo 🗺️.&lt;br&gt;
Y ¿yo?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🤔 ¿Qué diablos estaba haciendo? 🤔&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;De ahí salió una incógnita aún más grande, &lt;em&gt;¿Yo realmente quería eso que todos tenían o era más una presión social?&lt;/em&gt;, &lt;em&gt;¿quería o era necesario ese sentimiento de pertenecer a algo?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Entonces uno de esos días en que estaba checando los posibles 10 escenarios en los que en su mayoría terminaba sola, con al menos 10 gatos; me di cuenta de algo super importante, existen dos tipos de éxito en este mundo:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;El éxito convencional.&lt;/li&gt;
&lt;li&gt;El éxito personal.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Para que entiendan de donde salió todo el choro mareador que estoy a punto de escribirles, les voy a contar una parte de mi vida, mi meta era ser Tech Lead antes de los 30 años, así que estuve de empresa en empresa buscando algo que realmente no encontré en ninguna.&lt;/p&gt;

&lt;p&gt;También estuvo la parte de que soy mujer en un mundo que es liderado por hombres, así que, en un unicornio naranja, mi berrinche fue cuando descubrí que los hombres ganaban el doble que yo, haciendo exactamente lo mismo, luego estuvo la batalla campal que tuve (en un startup que no quiero mencionar), porque no me querían dar aguinaldo.&lt;/p&gt;

&lt;p&gt;Buscando por muchos lados, llegue a ese lugar que vende las motos con las que en su mayoría nos asaltan en el estado de México y ¡sorpresa! , me despidieron y no conformes me hicieron tener un ataque de ansiedad en ese proceso, finalmente estuve en una empresa llamada klu (Menciono el nombre, porque no es conocida, pero realmente me gustaría que sepan que no quieren trabajar ahí), en donde después de que un hombre me dijera que lo que se desarrolló en la aplicación móvil, realmente no era merito mío, pero que el junior que me dio era mejor que yo, pues me despidió cuando mi jefe directo se fue de vacaciones.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Nota mental: Aunque me encantaría decir que todas estas experiencias me las invento, tengo que decir que realmente me pasan y no esta chido vivir esas cosas.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;En ese proceso de ir y venir, al estar sin trabajo, debajo de la ducha viendo mi teléfono (que se descompuso porque no era a prueba de agua), me llego un mensaje de alguien en twitter, que casualmente estaba buscando a alguien para trabajar por 3 meses en un proyecto, que seguramente no funcionaría y mi pregunta fue ¿Cómo alguien que se dedica al ambiente financiero, hará un cambio tan de repente hacia el ambiente de los call centers?&lt;/p&gt;

&lt;p&gt;Y con todo el miedo del mundo dije “Jalo”, de un día para el otro pasamos de ser 3 personas contra el mundo, a ser un equipo de 6; entonces a mis 25, me volví &lt;em&gt;&lt;strong&gt;Tech Lead&lt;/strong&gt; (o Líder de proyecto En la parte de Front-End)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Entones descubrí algo, ser &lt;strong&gt;Tech Lead&lt;/strong&gt; es lo mismo que el sueño que tuvimos todos de ser adultos, es una mentira.&lt;/p&gt;

&lt;p&gt;Así que después de descubrir que no era lo que realmente quería, si no que estaba en una constante competencia por ser como mi hermano &lt;em&gt;(Porque si, mi meta siempre fue ser como el)&lt;/em&gt; comencé a tomarme las cosas con un poco más de tranquilidad, después de 6 años de estudiar, trabajar y ser &lt;em&gt;“Un modelo a seguir”&lt;/em&gt;, o &lt;em&gt;“La hija que no necesita ayuda de nadie porque puede sola”&lt;/em&gt;, descubrí que lo que necesitaba en este momento de mi vida; era tener una definición sobre el éxito personal y el convencional; de repente deje de buscar la validación de las figuras paternas que tengo y los ataques de ansiedad comenzaron a disminuir, porque no estaba buscando convencer a alguien de que yo era buena en algo.&lt;/p&gt;

&lt;p&gt;Ahora a mis 26 años, aprendí que todo el mundo va a un ritmo y no importa realmente lo que la sociedad o la familia esperé de ti, es mucho más importante que es lo que tú quieres y lo que realmente entra en tus metas personales.&lt;/p&gt;

&lt;p&gt;Deje de pensar que todo es una competencia y no tengo porque ser la mejor en todo, pero culpo a &lt;strong&gt;Pokemon&lt;/strong&gt; por enseñarme que debo ser siempre el mejor, mejor que nadie más…&lt;/p&gt;

</description>
    </item>
    <item>
      <title>¿Trabajo y vida personal?</title>
      <dc:creator>🍉Sandy Becaria IT🍉</dc:creator>
      <pubDate>Thu, 11 Jan 2024 06:00:53 +0000</pubDate>
      <link>https://dev.to/sandybecariait/trabajo-y-vida-personal-3m7f</link>
      <guid>https://dev.to/sandybecariait/trabajo-y-vida-personal-3m7f</guid>
      <description>&lt;p&gt;¿Han notado que los que son adictos al trabajo tienden a ser más depresivos?, muchos de ellos tienen depresión diagnosticada, pensamientos intrusivos, entre muchas cosas más (Me incluyo en este círculo).&lt;/p&gt;

&lt;p&gt;Hasta hace unos meses no lo entendía, me pasaba los días buscando más trabajo, actividades extra que necesitaran mantener mi atención gran parte del tiempo, hasta que un día…&lt;/p&gt;

&lt;p&gt;Llegue a un punto de quiebre, si compañeros entramos a la zona gris &lt;em&gt;el burnout&lt;/em&gt;🙀.&lt;/p&gt;

&lt;p&gt;Estuve bastante tiempo aplicando ese dicho de &lt;strong&gt;“Busca con que distraerte, sal con amigos”&lt;/strong&gt; y cuando trabajé en un unicornio con bigote naranja, aplicaba mucho la de &lt;strong&gt;“Has más de lo que te piden para poder crecer”&lt;/strong&gt;, porque todos ahí me decían constantemente esa frase y realmente fue cuando me toco ver a personas ganando el doble que yo, haciendo exactamente lo mismo.&lt;/p&gt;

&lt;p&gt;Desde que tengo 20 años he estado refugiándome en esto llamado ser un &lt;em&gt;“workaholic”&lt;/em&gt; y luego de que me sangrara la nariz, comenzara a vomitar todo lo que comía por estrés y ser despedida luego de ponerme la camiseta y trabajar hasta altas horas de la noche, llegue a la conclusión de que realmente todo era cuestión de suerte y en algunas empresas de caerle bien a la persona correcta, ya que seamos realistas en Latinoamérica sucede mucho eso de que puedes crecer solo llevándote bien con la persona indicada.&lt;/p&gt;

&lt;p&gt;En esos días llegue a un artículo &lt;em&gt;(Que realmente me paso mi hermano)&lt;/em&gt;, el cual se llama &lt;strong&gt;&lt;a href="https://srpinto.medium.com/el-trabajo-me-rob%C3%B3-mis-20s-6837d7dd3399"&gt;“El trabajo me robó mis 20's de Jorge Pinto”&lt;/a&gt;&lt;/strong&gt; y cito la frase que más me gusto &lt;em&gt;“La promesa puritana de que sólo trabajando duro se logran las metas es un insulto para todas esas personas que han pasado su vida rompiéndose la madre sin frutos”&lt;/em&gt; . Ya que en ese articulo explica que realmente todo es suerte y estar en el lugar correcto, en el momento correcto, ósea, si tiene que ver el esfuerzo que le pones, pero no lo es todo.&lt;/p&gt;

&lt;p&gt;Luego de ese artículo y de mucha terapia entendí la importancia de tener responsabilidad emocional para no tomarme las cosas de forma personal y comencé a tener una vida fuera del trabajo, lo cual inicialmente fue muy extraño, porque comencé a sentirme relajada, con mucho tiempo libre y de repente mis amigos comenzaron a decirme que me veían más feliz, &lt;em&gt;¿Te imaginas tener tiempo libre después de 6 años de estar en constante búsqueda de evitar escuchar tu mente?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Sobre todo, entendí algo sobre el trabajo, que me hubiese gustado entender desde antes de comenzar a trabajar &lt;em&gt;(Lo cual me hubiese evitado muchos días de estrés&lt;/em&gt;) y no, no es esa frase de &lt;strong&gt;“Nadie es indispensable”&lt;/strong&gt; &lt;em&gt;(no le deseo mal a nadie, pero ojalá que quien la invento, se tropiece con sus taquitos en la mano)&lt;/em&gt;, ya que considero que es una forma de tratarnos como simples objetos y no amigos, nosotros somos personas.&lt;/p&gt;

&lt;p&gt;Más bien, ahora que soy líder de proyecto, trato de que mis compañeros tengan una estabilidad entre &lt;em&gt;trabajo y vida personal&lt;/em&gt;,  también aprendí que es super valido decir que no cuando ponen tiempos que realmente no podemos cumplir y sobre todo algo que me hubiese gustado que me dijeran antes, es que lo bueno de ser parte del área de tecnología, es que no existe cosa que no pueda esperar al día siguiente (A menos de que sea un bug productivo que les haga perder dinero, ese si lo resuelvo rapido xD).&lt;/p&gt;

</description>
      <category>job</category>
      <category>life</category>
    </item>
    <item>
      <title>JavaScript ¿Qué es? 🤔 y ¿Con que se come? 🤤</title>
      <dc:creator>🍉Sandy Becaria IT🍉</dc:creator>
      <pubDate>Fri, 08 Dec 2023 05:35:18 +0000</pubDate>
      <link>https://dev.to/sandybecariait/javascript-que-es-y-con-que-se-come-33go</link>
      <guid>https://dev.to/sandybecariait/javascript-que-es-y-con-que-se-come-33go</guid>
      <description>&lt;p&gt;Si estas estudiando alguna ingeniería, estas en algún &lt;strong&gt;bootcamp&lt;/strong&gt;, seguramente habrás escuchado algo acerca de &lt;strong&gt;JavaScript&lt;/strong&gt; &lt;em&gt;(JS)&lt;/em&gt; 👀, quizás no.&lt;br&gt;
Pero si es que no sabes nada acerca de este lenguaje o simplemente quieres reforzar algunos conceptos básicos entonces…, llegaste al lugar correcto. 🤗&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7fvl8t1pvchb9xmu7qkc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7fvl8t1pvchb9xmu7qkc.png" alt="Image description" width="680" height="680"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Vamos por partes 🔪 ¿Qué es JavaScript?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;El estándar para JavaScript es &lt;em&gt;ECMAScript (ECMA-262)&lt;/em&gt; y la especificación de la API para la Internacionalización de &lt;em&gt;ECMAScript (ECMA-402)&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Básicamente es un lenguaje de programación ligero, interpretado ó compilado Justo a tiempo &lt;em&gt;(just-in-time)&lt;/em&gt; con funciones de primera clase, principalmente lo utilizamos nosotros los mortales para hacer páginas webs interactivas, es conocido como un lenguaje de &lt;strong&gt;scripting&lt;/strong&gt; &lt;em&gt;(Secuencia de comandos)&lt;/em&gt; para páginas web y también es utilizado en muchos entornos fuera del navegador.&lt;/p&gt;

&lt;p&gt;Recuerda que JavaScript es un lenguaje de programación basado en prototipos, multiparadigma, de un solo hilo🧵, dinámico y admite estilos de programación orientado a objetos, imperativos y funcionales.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Momento para un anunció importante:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Y recuerden amigos, JavaScript no es “Java Interpretado” Java es un lenguaje de programación Orientado a Objetos, mientras que Java Script es un lenguaje de scripts Orientado a Objetos”.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;em&gt;Y quien lo vuelva a confundir que venga y nos damos en… no cierto…&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Ahora sigamos…&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;¿Cómo funciona JavaScript?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;JavaScript se clasifica principalmente como un lenguaje de scripting o interpretado, es decir, directamente traducido a código de lenguaje maquina subyacente mediante el motor de JavaScript.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Nota mental:&lt;/strong&gt; Todos los lenguajes de scripts son lenguajes de programación, pero no todos los lenguajes de programación son lenguajes de scripts.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Motor de JavaScript:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Es el responsable de interpretar las instrucciones de código JavaScript y emplear procesos conocidos como &lt;strong&gt;JIT Compiler&lt;/strong&gt; es el &lt;strong&gt;V8 Engine&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;El motor &lt;strong&gt;V8&lt;/strong&gt; de Google convierte las instrucciones de JavaScript en una lista de tokens, que posteriormente va a producir un Abstract Syntax Tree, representando simplificadamente el código fuente escrito en Javascript (en este caso), en un árbol de estructura. Posteriormente a esto, pasará por el intérprete, que es el que generará Bytecode y luego interpretará este Bytecode para poder ejecutarlo.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🙀 ¿JavaScript del lado del Cliente?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;JavaScript del cliente se refiere a la forma en que JavaScript funciona en el navegador. En este caso, el motor de JavaScript está dentro del código del navegador. Todos los principales navegadores web incluyen sus propios motores de JavaScript incorporados.&lt;br&gt;
Los desarrolladores de aplicaciones web escriben código JavaScript con diferentes funciones asociadas a varios eventos, como hacer clic con el ratón o situar el ratón sobre un elemento. Estas funciones realizan cambios en HTML y CSS.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🙀 ¿JavaScript del lado del Servidor?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;JavaScript del lado del servidor hace referencia al uso del lenguaje de codificación en la lógica del servidor de backend. En este caso, el motor de JavaScript se encuentra directamente en el servidor.&lt;br&gt;
La ventaja principal del scripting del lado del servidor es que admite un alto nivel de personalización de la respuesta del sitio web según sus requisitos, sus derechos de acceso y las solicitudes de información provenientes del sitio web.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;¿Bibliotecas 📚 de JavaScript?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Y no, no hablamos de libros ¿o sí?, más bien son colecciones de fragmentos de código escritos previamente, el código de las bibliotecas se conecta al resto del código del proyecto según sea necesario.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Veamos las más comunes:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Para visualizar datos:&lt;/em&gt; Bibliotecas como &lt;strong&gt;Chart.js, ApexCharts y Algolia Places&lt;/strong&gt; cuentan con funciones integradas que puede utilizar para crear aplicaciones web que muestren datos en gráficos y mapas.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Para manipular el DOM:&lt;/em&gt; &lt;strong&gt;jQuery y Umbrella JS&lt;/strong&gt; nos facilita el desarrollo web, ya que brindan código para funciones estándar de sitios web.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Beneficios de JavaScript&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Manipulación sencilla del DOM:&lt;/em&gt; JavaScript agiliza el acceso y la manipulación de elementos del DOM, es decir, te ayuda a cambiar el contenido, estilo y atributos de los elementos en respuesta a eventos.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Simplicidad:&lt;/em&gt; Posee una estructura sencilla que lo vuelve más fácil de aprender e implementar.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Popularidad:&lt;/em&gt; JavaScript esta por todas partes de la web, y Node.js, se ha incrementado su uso en backend.  Así que mientras más comunidad tenga algo, es más sencillo aprenderlo, encontrar la respuesta a algún errorcillo que estes tratando de solucionar.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;¿Y las desventajas?&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Obviamente no las tiene, &lt;strong&gt;JavaScript&lt;/strong&gt; es perfecto, bromita…&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;em&gt;Veamos algunas…&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Soporte del navegador:&lt;/em&gt; Algunas veces, diferentes navegadores pueden interpretar el código de JavaScript de manera distinta, así que no olvides comprobar tu código en todos los navegadores que conozcas, o al menos en los más comunes.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Bajo rendimiento en aplicaciones complejas:&lt;/em&gt; Esta herramienta es un lenguaje interpretado, lo que puede afectar el rendimiento en comparación con lenguajes compilados.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Lenguaje de tipado débil:&lt;/em&gt; Es decir, no permite al programador definir el tipo de las variables. Una variable puede almacenar cualquier tipo de datos durante el tiempo de ejecución, y las operaciones asumen el tipo de variable.&lt;/p&gt;

&lt;p&gt;Y pues ya, es todo lo que tengo que decir acerca de JavaScript, aunque podría hacer un articulo con miles de cosas más…. &lt;/p&gt;

&lt;p&gt;Un 🍫 de regalo por si llegaste a este punto.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>👾 React Native y el uso de “React Navigation”</title>
      <dc:creator>🍉Sandy Becaria IT🍉</dc:creator>
      <pubDate>Mon, 05 Jun 2023 22:14:26 +0000</pubDate>
      <link>https://dev.to/sandybecariait/reac-native-y-el-uso-de-react-navigation-1597</link>
      <guid>https://dev.to/sandybecariait/reac-native-y-el-uso-de-react-navigation-1597</guid>
      <description>&lt;p&gt;React Native es un marco de aplicaciones móviles de código abierto, se usa para desarrollar aplicaciones Android, iOS, web y UWP y proporciona controles de interfaz de usuario nativa y acceso completo a la plataforma nativa, para comenzar a trabajar con este framework, se necesitan aspectos básicos de Javascript.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;👀Pero esta vez vamos a lo que nos interesa, aprender el como hacer una aplicación utilizando React Native:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;😶‍🌫️ Paso no. 1:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Para esto utilizaremos create-react-app, así que como diría Jack el destripador &lt;em&gt;“Vamos por partes 🔪”&lt;/em&gt;:&lt;/p&gt;

&lt;p&gt;Primero Instalaremos globalmente &lt;code&gt;créate-react-app&lt;/code&gt;, esto lo haremos de la siguiente forma:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install -g create-react-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Luego podemos ir a la poderosísima documentación y bastara con hacer un &lt;em&gt;create-react-app my-app&lt;/em&gt;, crearemos un proyecto llamado &lt;strong&gt;pokedex-app&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2eq6r6udjecm7t3pqczi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2eq6r6udjecm7t3pqczi.png" alt="create react native app" width="800" height="240"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Lee la documentación oficial no seas flojo 🤔 =&amp;gt;&lt;/strong&gt; &lt;a href="https://create-react-app.dev/docs/getting-started/"&gt;https://create-react-app.dev/docs/getting-started/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4zgb89p0jp6u3a50k5mz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4zgb89p0jp6u3a50k5mz.png" alt="Image description" width="214" height="214"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Una vez que creamos nuestro proyecto, no queda más que hacer lo siguiente, para correr nuestra aplicación:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo3uajoqdb4vjf3wbpsdc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo3uajoqdb4vjf3wbpsdc.png" alt="Image description" width="800" height="284"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Generalmente por default nos crea la aplicación con Javascript, pero podemos decidir si utilizarlo o utilizar Typescript, en mi caso utilizare Typescript.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Ahora vamos con lo bueno, el uso de React Navigation:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Necesitaremos dos cosas importantes, instalaremos el paquete&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm install @react-navigation/native&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Y una dependencia de expo&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npx expo install react-native-screens react-native-safe-area-context&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Esto instalará versiones de estas bibliotecas que sean compatibles.&lt;/p&gt;

&lt;p&gt;Y en nuestro caso como ya somos todos unos 🦾😎devs expertos, utilizaremos &lt;strong&gt;Bottom Tabs Navigator&lt;/strong&gt;, así que haremos un install de:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm install @react-navigation/bottom-tabs&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Véase la documentación oficial como el buen dev que eres 🤠 =&amp;gt; &lt;a href="https://reactnavigation.org/docs/getting-started"&gt;https://reactnavigation.org/docs/getting-started&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Para poder realizar el ejemplo, realice la siguiente estructura:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fou80wbr0ghx9bg88efdn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fou80wbr0ghx9bg88efdn.png" alt="Image description" width="483" height="738"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Donde si te das cuenta, tenemos una carpeta llamada &lt;em&gt;Navigation&lt;/em&gt;, la cual tendrá un papel importante ahora mismo ya que dentro, crearemos un archivo llamado &lt;em&gt;AppStackNavigation.tsx.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;También tendremos la carpeta de screens, en donde crearemos nuestras vistas principales, que, en nuestro caso serán solo dos por el momento &lt;em&gt;Home.tsx y ListApp.tsx&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;El código de &lt;em&gt;Home.tsx&lt;/em&gt; será el siguiente:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxsccgh7qatxclf1z2zff.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxsccgh7qatxclf1z2zff.png" alt="Image description" width="800" height="437"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;El código de ListApp.tsx será el siguiente:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo6q08dcad27vhte589by.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo6q08dcad27vhte589by.png" alt="Image description" width="800" height="437"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Que como podemos observar son vistas sencillas, que solo muestra un texto.&lt;/p&gt;

&lt;p&gt;Ahora veamos lo que nos importa, el como hacer que en nuestra app se vean las TabNavigator&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjsklgnh9u6sg8jj086qh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjsklgnh9u6sg8jj086qh.png" alt="Image description" width="800" height="897"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Lo último que tenemos que realizar y lo más importante, es que en nuestro archivo de &lt;em&gt;App.tsx&lt;/em&gt;, tendremos que importar &lt;em&gt;AppStackNavigation.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Se vera de la siguiente forma:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl3ptqss15sdnclwltg90.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl3ptqss15sdnclwltg90.png" alt="Image description" width="800" height="363"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ahora podremos tener Rect navigation implementado en nuestra app hecha con React Native.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>reactnative</category>
      <category>mobile</category>
    </item>
    <item>
      <title>🧪Hola Mundo en ReactJS</title>
      <dc:creator>🍉Sandy Becaria IT🍉</dc:creator>
      <pubDate>Thu, 01 Jun 2023 23:25:26 +0000</pubDate>
      <link>https://dev.to/sandybecariait/hola-mundo-en-reactjs-5eb4</link>
      <guid>https://dev.to/sandybecariait/hola-mundo-en-reactjs-5eb4</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5q4dkc79xfxx8gmtyv8j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5q4dkc79xfxx8gmtyv8j.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;👩‍💻¿Por qué React?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Es declarativo:&lt;/strong&gt; Ayuda a crear interfaces de usuario interactivas de forma sencilla, ya que react se encarga de actualizar y renderizar los componentes cuando los datos cambian.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Basado en componentes:&lt;/strong&gt; Podrás crear componentes encapsulados que manejen su propio estado, ya que la lógica de los componentes esta escrita en JS y no en plantillas, puedes pasar datos de forma sencilla a través de tu aplicación y mantener el estado fuera del DOM.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;📝Características de React&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Algunas características principales de React son:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;JSX:&lt;/strong&gt; Extensión de la sintaxis de JS que amplía las características de ES6(ECMAScript 2015). Esto nos permite combinar la lógica y el marcado de JS en un componente.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;DOM virtual:&lt;/strong&gt; Es una copia del objeto DOM que primero actualiza y vuelve a renderizar nuestras paginas cuando se realizan cambios; para después comparar el estado actual con el DOM original para mantenerlo sincronizado con los cambios, como resultado tenemos una renderización de las páginas más rápida.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Componentes:&lt;/strong&gt; Las aplicaciones de react se conforman por diferentes componentes reutilizables que tienen su propia lógica e interfaz de usuario.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;👀¿Qué es el estado en react?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;También conocido como &lt;strong&gt;state&lt;/strong&gt;, es el segundo tipo de dato que maneja la librería de JS, se conforma por los datos internos que un componente puede manejar, a medida que los datos son modificados, ya sea por una interacción de usuario o por una recepción de datos del API, el estado será modificado.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;😎 ¿Qué es un hook?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Los hooks son funciones que te permiten “enganchar” el estado de react y el ciclo de vida desde componentes de función, no funcionan dentro de las clases – te permiten usar react sin clases. Veamos algunos Hooks integrados en React.&lt;/p&gt;

&lt;p&gt;Recordemos que tenemos varios tipos de hooks, 👀veamos cuales son:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;State Hooks:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;
     useState: es un Hook que permite añadir el estado de React a 
     un componente de función.
  &lt;/li&gt;
  &lt;li&gt;
    useReducer: nos permite manipular el state de nuestros 
    componentes funcionales, esto se logra a través de:
    &lt;ul&gt;
      &lt;li&gt;Una función reducer&lt;/li&gt;
      &lt;li&gt;
         Y una función de retorno llamada dispatch con la cual 
         podemos combinar o emparejar el state.
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Context Hooks&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;useContext:&lt;/strong&gt; proporcionan un camino para compartir por fuera del árbol de componentes el estado.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Ref Hooks&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;useRef:&lt;/strong&gt; crea y manipula referencias a elementos del DOM en una aplicación de React.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;useImperativeHandle:&lt;/strong&gt; Nos permite definir qué propiedades y métodos queremos que sean accesibles desde el componente padre.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Effect Hooks&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;useEffect:&lt;/strong&gt; al usar este hook, le estamos indicando a React que el componente tiene que hacer algo después de renderizarse.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Performance Hooks&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;useMemo:&lt;/strong&gt; te permite guardar en caché el resultado de un cálculo entre renderizados.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;useCallback:&lt;/strong&gt; te permite almacenar la definición de una función entre renderizados subsecuentes.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Veamos el como comenzar a crear un App en React utilizando &lt;em&gt;create-react-app&lt;/em&gt;:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Tenemos que instalar de manera global create-react-app lo cual conseguiremos 
&lt;center&gt;
&lt;em&gt;&lt;u&gt;npm install -g create-react-app&lt;/u&gt;&lt;/em&gt;
&lt;/center&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhzg4zyvr3m0e9nonmfig.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhzg4zyvr3m0e9nonmfig.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Una vez instalado, Podemos crear nuestra aplicación poniendo el siguiente comandito&lt;/p&gt;

&lt;center&gt;
_&lt;u&gt;create-react-app project-name&lt;/u&gt;_
&lt;/center&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fupw16qzfhr6o4cal84fy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fupw16qzfhr6o4cal84fy.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Algo que siempre deberíamos de tener en cuenta 🧐, que se nos crea un archivo importante llamado &lt;em&gt;package.json&lt;/em&gt;, en el cual podremos encontrar dependencias y scripts que utilizamos en nuestro proyecto, el cual se vera de la siguiente forma.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxsjg6wciymbja55svm6b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxsjg6wciymbja55svm6b.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🤔Nota mental 🤔:&lt;/strong&gt; Recuerda que, en ese archivo podrás ver los scripts con los cuales podrás correr tu proyecto, por default, utilizamos npm start.&lt;/p&gt;

&lt;p&gt;Ahora si tendremos nuestro &lt;strong&gt;Hola Mundo en React&lt;/strong&gt;, podemos realizar un sinfín de cosas, pero eso es tema para otro artículo. 😅&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffsbl0fdfhjwcuujfed08.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffsbl0fdfhjwcuujfed08.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>💅CSS ¿Cómo hacer 🌠 magia?</title>
      <dc:creator>🍉Sandy Becaria IT🍉</dc:creator>
      <pubDate>Fri, 26 May 2023 01:09:38 +0000</pubDate>
      <link>https://dev.to/sandybecariait/css-como-hacer-magia-ipj</link>
      <guid>https://dev.to/sandybecariait/css-como-hacer-magia-ipj</guid>
      <description>&lt;p&gt;Quizás en tu camino⚔️ Jedi aprendiendo sobre el mundo 🌍 de las páginas web, has tratado de encontrar la solución a como centrar una etiqueta div, si ese es tu caso, este artículo es para ti 🌈 …&lt;/p&gt;

&lt;p&gt;Primero tenemos que tener en cuenta que CSS &lt;em&gt;(Cascading Style Sheets — Hojas de Estilo cascada para nosotros los mortales)&lt;/em&gt;, es el lenguaje de estilos utilizado para describir la presentación de documentos HTML o XML &lt;em&gt;(Incluye también lenguajes basados en XML como SVG o XHTML)&lt;/em&gt;, o dicho en términos más simples lo usamos para darle estilos de manera selectiva a elementos o documentos HTML.&lt;/p&gt;

&lt;p&gt;&lt;u&gt;&lt;strong&gt;Veamos la anatomía de una regla CSS&lt;/strong&gt;&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0udnuieiy8asxbgmc35e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0udnuieiy8asxbgmc35e.png" alt="Image description" width="782" height="550"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;👀 Recuerda que tenemos varios tipos de selectores:&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Selector de elementos CSS:&lt;/strong&gt; Selecciona elementos de HTML en función del nombre del elemento.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9vo4pu4q0pncsruhwxx6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9vo4pu4q0pncsruhwxx6.png" alt="Image description" width="463" height="155"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Selector de ID de CSS:&lt;/strong&gt; Usa el atributo de id de un elemento HTML para seleccionar un elemento especifico (Especifícalo con un carácter hash #).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjjmkhyfh4o3gnfl8xpv8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjjmkhyfh4o3gnfl8xpv8.png" alt="Image description" width="463" height="206"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Selector de clases CSS:&lt;/strong&gt; Selecciona elementos HTML con un atributo de clase especifico (Especifícalo con un carácter de punto (.)).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqh8q0l6mtlg2v7xc8etv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqh8q0l6mtlg2v7xc8etv.png" alt="Image description" width="530" height="191"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Selector universal de CSS:&lt;/strong&gt; Selecciona todos los elementos HTML de la página (Especifícalo con un asterisco *).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffokd9i9susmaczitpxl2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffokd9i9susmaczitpxl2.png" alt="Image description" width="564" height="177"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Selector de agrupación:&lt;/strong&gt; Selecciona los elementos HTML con las mismas definiciones de estilo, imagina que tienes h1 y p con exactamente los mismos estilos, en este cao, será mejor agrupar los selectores para minimizar el código.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw5m3bti249csgr8xs2pr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw5m3bti249csgr8xs2pr.png" alt="Image description" width="489" height="206"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;u&gt;&lt;strong&gt;Esta sección puedo llamarla, ejemplos con dibujitos feos:&lt;/strong&gt;&lt;br&gt;
&lt;/u&gt;&lt;br&gt;
Para esto tendremos dos archivos principales &lt;em&gt;index.html y styles.css:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;index:&lt;/strong&gt; Tendrá nuestro template de HTML.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Styles:&lt;/strong&gt; Tendrá toda la magia de css.&lt;/p&gt;

&lt;p&gt;Nuestro HTML quedaría de esta forma, en donde cómo podemos observar, con la etiqueta link le decimos que obtendrá los estilos de styles.css:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fovxwc1z3theu05vsqqkv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fovxwc1z3theu05vsqqkv.png" alt="Image description" width="720" height="676"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Y todo el trabajo sucio, quedaría en el archivo que mandamos a llamar, el cual quedaría maso menos así:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7306dlppeo0n02vdygwb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7306dlppeo0n02vdygwb.png" alt="Image description" width="616" height="956"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;EL resultado, sería el siguiente:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk7jkqdtljrrn7uf4r050.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk7jkqdtljrrn7uf4r050.png" alt="Image description" width="720" height="343"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Como podemos observar, el implementar estilos en una pagina web, es algo muy sencillo.&lt;/p&gt;

&lt;p&gt;Pero recordemos para que era este artículo, si observamos, nuestros rectángulos no están centrados, entonces, agregamos la propiedad de margin: auto; en nuestro contenedor principaly PUM, magia 🤯…&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fip63iivoce4hj3ejx8g4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fip63iivoce4hj3ejx8g4.png" alt="Image description" width="720" height="212"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Y esto no es más que una embarrada de todo lo que podemos hacer, podemos realizar incluso animaciones, pero esa es historia para otro capítulo.🤓&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Patrones de diseño y con que se comen 🤯</title>
      <dc:creator>🍉Sandy Becaria IT🍉</dc:creator>
      <pubDate>Mon, 22 May 2023 02:09:55 +0000</pubDate>
      <link>https://dev.to/sandybecariait/patrones-de-diseno-y-con-que-se-comen-2431</link>
      <guid>https://dev.to/sandybecariait/patrones-de-diseno-y-con-que-se-comen-2431</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3g1arhqsxw3jko0id6vk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3g1arhqsxw3jko0id6vk.png" alt="Image description" width="698" height="696"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Si comienzas en esto de la programación o incluso ya llevas tiempo te encontraras en algún momento de tu vida con el término "Patrones de diseño", entonces de ahí sale la pregunta&lt;/p&gt;

&lt;p&gt;🤯 &lt;strong&gt;¿Con que se comen los patrones de diseño?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A grandes rasgos, son soluciones habituales para resolver problemas comunes en el desarrollo de software, cada patrón es algo así como un plano que se utiliza para resolver un problema de diseño particular en tu código.&lt;/p&gt;

&lt;p&gt;Pero no cualquier cosa puede ser un patrón de diseño, debemos de tener ciertas características para poder llamarlo así, por ejemplo:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Debe haber comprobado su efectividad resolviendo problemas similares en ocasiones anteriores.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Otra es que debe ser reutilizable, lo que significa que es aplicable a diferentes problemas de diseño en distintas circunstancias.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🦸‍♀️Para esto tenemos en cuenta algunos tipos o categorias de patrones:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Patrones creacionales&lt;/strong&gt;&lt;br&gt;
Proporcionan mecanismos de creación de objetos para aumentar la flexibilidad y reutilización del código que ya tenemos&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Abstract Factory:&lt;/strong&gt; Nos permite producir 👪familias de objetos relacionados, sin especificar clases concretas.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi1u3v2tqnjwsr6bsp4n5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi1u3v2tqnjwsr6bsp4n5.png" alt="Image description" width="800" height="602"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Builder Patterns:&lt;/strong&gt; Nos permite construir objetos complejos paso a paso.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr437qhca2rf50weg3yr7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr437qhca2rf50weg3yr7.png" alt="Image description" width="800" height="601"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Singleton:&lt;/strong&gt; Nos permite asegurarnos de que una clase tenga una única instancia, a la vez que proporcionan un punto de acceso global para dicha instancia.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb72titfpdpadkiqos5mh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb72titfpdpadkiqos5mh.png" alt="Image description" width="800" height="507"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Patrones estructurales&lt;/strong&gt;&lt;br&gt;
Dan soluciones y estandaares para las composiciones de clases y estructuras de objetos:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Adapter:&lt;/strong&gt; Lo utilizamos cuando tenemos interfaces de software incompatibles, las cuales a pesar de la incompatibilidad tienen una funcionalidad similar.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftnv9a6t0qkjwpfewdvh1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftnv9a6t0qkjwpfewdvh1.png" alt="Image description" width="800" height="647"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Bridge:&lt;/strong&gt; Permite dividir una clase grande, o un grupo de clases estrechamente relacionadas, en dos jerarquías separadas (abstracción e implementación), pueden desarrollarse independientemente la una de la otra.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvrpys9vbwt5b9151hpsv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvrpys9vbwt5b9151hpsv.png" alt="Image description" width="800" height="612"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Composite:&lt;/strong&gt; Permite componer objetos en estructuras de árbol y trabajar con esas estructuras como si fueran objetos individuales.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbrke5gppnrof343oh9x4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbrke5gppnrof343oh9x4.png" alt="Image description" width="800" height="406"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Decorator:&lt;/strong&gt; Te permite añadir funcionalidades a objetos colocando estos objetos dentro de objetos encapsulados especiales que contienen esta funcionalidad.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbly3d9t6gwrm1zuwsye5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbly3d9t6gwrm1zuwsye5.png" alt="Image description" width="800" height="581"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Patrones de comportamiento&lt;/strong&gt;&lt;br&gt;
Se ocupa entre la comunicación entre los objetos de nuestras clases, están relacionados con la comunicación entre objetos:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Command:&lt;/strong&gt; Convierte una solicitud en un objeto independiente que contiene toda la información sobre la solicitud. Esta transformación permite parametrizar los métodos con diferentes solicitudes, retrasar o poner en cola la ejecución de una solicitud y soportar operaciones que no se pueden realizar.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdsuuhbyrck21zhnx5zcc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdsuuhbyrck21zhnx5zcc.png" alt="Image description" width="800" height="633"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Memento:&lt;/strong&gt; (También llamado Recuerdo, Instantánea, Snapshot) Te permite guardar y restaurar el estado previo de un objeto sin revelar los detalles de su implementación.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fshojutorwl508ikx0wbp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fshojutorwl508ikx0wbp.png" alt="Image description" width="800" height="530"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Observer:&lt;/strong&gt; Te permite definir un mecanismo de suscripción para notificar a varios objetos sobre cualquier evento que le suceda al objeto que se está observando.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgq0rlu9nzew3sr597j3y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgq0rlu9nzew3sr597j3y.png" alt="Image description" width="800" height="645"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Visitor:&lt;/strong&gt; Te permite separar algoritmos de los objetos sobre los que operan.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff567b3wp6580lutuyy47.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff567b3wp6580lutuyy47.png" alt="Image description" width="800" height="577"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Entonces luego de leer todo el choro mareador 🥱 que estoy tratando de explicarte, puede que te preguntes:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;😒 ¿Yo que gano al aprenderlos?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;La respuesta es muy sencilla, podrías programar durante años sin conocer este tema, a muchos les pasa (me incluyo en ese circulo), pero…&lt;/p&gt;

&lt;p&gt;Podrías implementarlos sin siquiera estar consiente de eso, entonces &lt;strong&gt;¿Por qué dedicaría mi tiempo a aprenderlos?&lt;/strong&gt;, pues porque si y porque:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Son herramientas con soluciones comprobadas a problemas habituales, aunque no te encuentres con estos problemas, los patrones de diseño nos ayudan a resolver problemas utilizando principios del diseño orientado a objetos.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Definen un lenguaje común que podemos utilizar con nuestro equipo de trabajo para tener una mejor comunicación.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;🤔 ¿Qué patrón de diseño tengo que utilizar?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;En mi opinión profesional, es tiempo de entrar en pánico, correr en círculos y...&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7ka7x8cu03fzg1drarte.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7ka7x8cu03fzg1drarte.png" alt="Image description" width="597" height="336"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;aaah te creas, puede que algunos te digan que unos son mejores que otros, pero realmente la experiencia nos ayudara para conocer si es adecuado utilizar uno u otro patrón de diseño a la hora de solucionar un problema particular.&lt;br&gt;
&lt;em&gt;(Aunque a mí me gusta más la idea de correr en círculos 😱)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Att:&lt;/strong&gt; 🍉&lt;a href="https://twitter.com/SandyBecariaIt"&gt;La becaria &lt;/a&gt;&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
