<?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: Greedyboy</title>
    <description>The latest articles on DEV Community by Greedyboy (@greedyboy).</description>
    <link>https://dev.to/greedyboy</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%2F613968%2F2bbd0cba-eff6-4475-a51f-064a7ae8aa47.png</url>
      <title>DEV Community: Greedyboy</title>
      <link>https://dev.to/greedyboy</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/greedyboy"/>
    <language>en</language>
    <item>
      <title>¿Cómo implementar grafos en C++?</title>
      <dc:creator>Greedyboy</dc:creator>
      <pubDate>Fri, 12 May 2023 15:16:22 +0000</pubDate>
      <link>https://dev.to/greedyboy/como-implementar-grafos-en-c-3ia2</link>
      <guid>https://dev.to/greedyboy/como-implementar-grafos-en-c-3ia2</guid>
      <description>&lt;p&gt;Hola, tiempo sin pasar por acá, en este post te enseñaré como representar un grafo en el lenguaje de programación de C++.&lt;/p&gt;

&lt;p&gt;Para empezar, necesitamos saber que es un grafo.&lt;/p&gt;

&lt;h2&gt;
  
  
  ¿Qué es un grafo?
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Un grafo, es una estructura matemática que permite modelar problemas de la vida cotidiana, mediante, como hemos visto, una representación gráfica formada por nodos o vértices.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Fuente : &lt;a href="https://www.inesem.es/revistadigital/informatica-y-tics/teoria-grafos/#:%7E:text=Un%20grafo,%20es%20una%20estructura,o%20relaciones%20entre%20los%20actores" rel="noopener noreferrer"&gt;https://www.inesem.es/revistadigital/informatica-y-tics/teoria-grafos/#:~:text=Un%20grafo,%20es%20una%20estructura,o%20relaciones%20entre%20los%20actores&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Teniendo un ejemplo base podemos tener un grafo G con 3 nodos y 2 aristas:&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%2Fvgve5e4175cugg0730dg.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%2Fvgve5e4175cugg0730dg.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;En este tenemos los nodos 1, 2 y 3. Y las aristas que conectan el nodo 1 con el nodo 2, y la arista que conecta el nodo 2 con el nodo 3.&lt;/p&gt;

&lt;p&gt;Bueno, ahora que tenemos una noción básica de qué es un grafo, veremos como implementar uno en el lenguaje de programación de C++. Para ello, tenemos que conocer dos de sus representaciones.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Todos los ejemplos para este artículo serán basados en un grafo bidireccional&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Matriz de Adyacencia
&lt;/h2&gt;

&lt;p&gt;Una matriz de adyacencia es una estructura matemática utilizada para representar un grafo. Es una cuadrícula sencilla cuyos índices siempre son 0, o 1. Esto dependerá si es que el nodo en la posición [a] de la matriz, tiene una conexión con [b].&lt;/p&gt;

&lt;p&gt;Siguiendo el ejemplo del grafo anterior:&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%2F30mbkfm4x7vzfq23p5t4.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%2F30mbkfm4x7vzfq23p5t4.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Podemos establecer una matriz de adyacencia, donde cada fila de la fila representa la conexión del grafo en la columna [b].&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%2F5dyxjpqe0vvwlnzxnz4k.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%2F5dyxjpqe0vvwlnzxnz4k.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;En este caso, rellenaremos la matriz. Para ende debemos seguir la siguiente lógica, debemos revisar si es que hay una conexión entre el nodo de la fila actual y el nodo de la columna actual.&lt;br&gt;
Por ejemplo, podemos partir con la primera posición de la matriz. El nodo 1.&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%2Fxzy9vopv212zw5wtyw9e.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%2Fxzy9vopv212zw5wtyw9e.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;En este caso, partiendo en la primera posición, revisamos en el grafo si es que el nodo 1 tiene una conexión con el nodo 1. En este caso no es así, ya que el nodo 1 no se conecta con sí mismo. Por ende ponemos un 0.&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%2F7w2s32geksl58p8op8ar.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%2F7w2s32geksl58p8op8ar.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ahora que entendemos la lógica podemos seguir rellenando la fila.&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%2F07sg20rk9wuujgookctl.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%2F07sg20rk9wuujgookctl.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;En este caso, en la fila del nodo 1 y la columna del nodo 2, hay un número 1. Porque el grafo tiene una conexión efectivamente con el nodo 2.&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%2Ftuzeypkatw5abvieougi.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%2Ftuzeypkatw5abvieougi.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Y en este caso en la fila del nodo 1 y la columna del nodo 3 hay un número 0, porque el nodo 1 no tiene conexión con el nodo 3.&lt;/p&gt;

&lt;p&gt;Siguiendo esta lógica podemos rellenar la matriz.&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%2Fbiytwf51b7ubhb1oyh2d.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%2Fbiytwf51b7ubhb1oyh2d.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Una vez llenada la matriz, podemos hacer comprobaciones, por ejemplo si nos preguntan si es que el nodo 1 tiene una conexión con el 3, simplemente hay que acceder a la posición matriz[1][3], y si esa posición es un 1, es porque hay una conexión.&lt;/p&gt;

&lt;p&gt;Ahora que ya vimos como funciona y la parte teórica, pasaremos a la explicación con código.&lt;/p&gt;

&lt;h2&gt;
  
  
  Implementación con Código
&lt;/h2&gt;

&lt;p&gt;La implementación base de una matriz de adyacencia es la siguiente:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight cpp"&gt;&lt;code&gt;

&lt;span class="cp"&gt;#include&lt;/span&gt;&lt;span class="cpf"&gt;&amp;lt;bits/stdc++.h&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;
&lt;/span&gt;&lt;span class="k"&gt;using&lt;/span&gt; &lt;span class="k"&gt;namespace&lt;/span&gt; &lt;span class="n"&gt;std&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="n"&gt;vector&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;vector&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;matriz&lt;/span&gt; &lt;span class="c1"&gt;//Definimos la matriz&lt;/span&gt;

&lt;span class="c1"&gt;//Creamos una función que inicialize la matriz con n nodos.&lt;/span&gt;
&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;crearMatriz&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
   &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
      &lt;span class="n"&gt;vector&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;vector&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;row&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="n"&gt;matriz&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;push_back&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;row&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;//Creamos una función que agregue una conexión entre nodos.&lt;/span&gt;
&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;anadirConexion&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
   &lt;span class="n"&gt;matriz&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;][&lt;/span&gt;&lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="n"&gt;matriz&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;][&lt;/span&gt;&lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="nf"&gt;main&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
   &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Cantidad de nodos del grafo&lt;/span&gt;
   &lt;span class="n"&gt;cin&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="n"&gt;crearMatriz&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Se llama a la función crear matriz con n&lt;/span&gt;
   &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;q&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Cantidad de aristas&lt;/span&gt;
   &lt;span class="k"&gt;while&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;q&lt;/span&gt;&lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt; &lt;span class="c1"&gt;// Se ingresas las q aristas entre un nodo a y b&lt;/span&gt;
      &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="n"&gt;cin&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="n"&gt;anadirConexion&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Si quisieramos ver como queda la matriz podríamos añadir esta pequeña función al programa&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight cpp"&gt;&lt;code&gt;

&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;imprimirMatriz&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;vector&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;vector&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;matriz&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
   &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="n"&gt;matriz&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;size&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
      &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;j&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="n"&gt;j&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="n"&gt;matriz&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;size&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="n"&gt;j&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
         &lt;span class="n"&gt;cout&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span class="n"&gt;matriz&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;][&lt;/span&gt;&lt;span class="n"&gt;j&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span class="s"&gt;" "&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Ahora que ya hemos visto como funciona la matriz de adyacencia, pasaremos a la otra implementación para un grafo.&lt;/p&gt;

&lt;h2&gt;
  
  
  Lista de Adyacencia
&lt;/h2&gt;

&lt;p&gt;Una lista de adjacencia es un tipo de estructura de datos que se usaría para representar un grafo. Consiste en una lista de vértices adyacentes para cada vértice en cuestión.&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%2F4abj7hb4ys2d4u5cc2gs.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%2F4abj7hb4ys2d4u5cc2gs.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Para este ejemplo seguiremos usando el grafo G de los ejemplos anteriores.&lt;/p&gt;

&lt;p&gt;En palabras sencillas, una lista de adyacencia, es una lista interna para cada nodo &lt;strong&gt;n&lt;/strong&gt; del grafo, y en dicha lista estarán los nodos con los que &lt;strong&gt;n&lt;/strong&gt; tiene una conexión.&lt;/p&gt;

&lt;p&gt;Por ejemplo:&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%2Fbcog1hi57fk3b6zcps39.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%2Fbcog1hi57fk3b6zcps39.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;En esta imagen vemos que el nodo 1, 2 y 3, tienen una lista respectiva. Tomemos como ejemplo el nodo 2, este nodo, posee una lista con los valores [1 y 3] esto quiere decir que el nodo 2 posee una conexión con el nodo 1 y el nodo 3, ésta afirmación es cierta si es que lo revisamos en el grafo.&lt;/p&gt;

&lt;p&gt;Ahora pasaremos a su implementación en C++.&lt;/p&gt;

&lt;h2&gt;
  
  
  Implementacion Lista de Adyancencia C++
&lt;/h2&gt;

&lt;p&gt;Para implementar una lista de adyacencia, utilizaremos el siguiente código:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight cpp"&gt;&lt;code&gt;

&lt;span class="cp"&gt;#include&lt;/span&gt;&lt;span class="cpf"&gt;&amp;lt;bits/stdc++.h&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;
&lt;/span&gt;&lt;span class="k"&gt;using&lt;/span&gt; &lt;span class="k"&gt;namespace&lt;/span&gt; &lt;span class="n"&gt;std&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="n"&gt;vector&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;vector&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;adjList&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Definición de la lista&lt;/span&gt;

&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;crearLista&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt; &lt;span class="c1"&gt;// Se crea una lista de adyacencia con n nodos&lt;/span&gt;
    &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
        &lt;span class="n"&gt;vector&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;nodo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{};&lt;/span&gt;
        &lt;span class="n"&gt;adjList&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;push_back&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;nodo&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;agregarVecino&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt; &lt;span class="c1"&gt;// Función usada para agregar un vecino&lt;/span&gt;
    &lt;span class="n"&gt;adjList&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="n"&gt;push_back&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;adjList&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="n"&gt;push_back&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="nf"&gt;main&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
    &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
    &lt;span class="n"&gt;cin&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Se ingresa la cantidad de nodos del grafo&lt;/span&gt;
    &lt;span class="n"&gt;crearLista&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// Se crea la lista de adyacencia&lt;/span&gt;
    &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;q&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;cin&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;q&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Cantidad de conexiones &lt;/span&gt;
    &lt;span class="k"&gt;while&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;q&lt;/span&gt;&lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
        &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="n"&gt;cin&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;a&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="n"&gt;agregarVecino&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Se agrega una conexión entre a y b;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;



&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Y si queremos mostrar la lista y las conexiones de cada nodo, debemos utilizar la siguiente función:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight cpp"&gt;&lt;code&gt;

&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;imprimirLista&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
    &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="n"&gt;adjList&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;size&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
        &lt;span class="n"&gt;cout&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span class="s"&gt;"Nodo "&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span class="s"&gt;": "&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;j&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="n"&gt;adjList&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="n"&gt;size&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="n"&gt;j&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
            &lt;span class="n"&gt;cout&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span class="n"&gt;adjList&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;][&lt;/span&gt;&lt;span class="n"&gt;j&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span class="s"&gt;" "&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="n"&gt;cout&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Eso es!, Con eso ya podemos implementar un grafo en C++.&lt;/p&gt;

&lt;p&gt;Espero que este post le sea de utilidad a una persona al menos, muchas gracias por leer si es que llegaste hasta acá.&lt;/p&gt;

&lt;p&gt;Prontamente más artículos!&lt;/p&gt;

</description>
      <category>cpp</category>
      <category>programming</category>
      <category>tutorial</category>
      <category>español</category>
    </item>
    <item>
      <title>Conociendo Sass</title>
      <dc:creator>Greedyboy</dc:creator>
      <pubDate>Thu, 27 May 2021 21:00:36 +0000</pubDate>
      <link>https://dev.to/greedyboy/conociendo-sass-444k</link>
      <guid>https://dev.to/greedyboy/conociendo-sass-444k</guid>
      <description>&lt;h1&gt;
  
  
  &lt;center&gt;Aprendiendo Sass&lt;/center&gt;
&lt;/h1&gt;





&lt;center&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--tRv3Ie3j--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn.worldvectorlogo.com/logos/sass-1.svg" width="800" height="600"&gt;&lt;/center&gt;



&lt;h2&gt;
  
  
  &lt;center&gt; Conociendo Sass &lt;/center&gt;
&lt;/h2&gt;

&lt;p&gt;Sass es un preprocesador de CSS inicialmente diseñado por Hampton Catlin y desarrollado por Natalie Weizenbaum.​​&lt;br&gt;
El cual nos permite usar caracteristicas presentes en lenguajes de programación, como Variables, Funciones, etc.&lt;/p&gt;



&lt;h2&gt;
  
  
  &lt;center&gt;Instalación &lt;/center&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;br&gt;&lt;br&gt;
Hace un tiempo la instalación de Sass era bastante complicada...&lt;/p&gt;

&lt;p&gt;...¡Pero ya no! Sass se ha vuelto muy sencillo de instalar.&lt;/p&gt;



&lt;blockquote&gt;
&lt;p&gt;Nota: En esta guía obviamente utilizaremos un editor de código para llevar a la practica todo lo aprendido, en mi lugar utilizare &lt;a href="https://code.visualstudio.com/"&gt;Visual Studio Code&lt;/a&gt; , pero eres libre de usar el que prefieras, ya sea &lt;a href="https://www.sublimetext.com/"&gt;Sublime Text&lt;/a&gt; , &lt;a href="https://atom.io/"&gt;Atom&lt;/a&gt; , etc.&lt;/p&gt;
&lt;/blockquote&gt;



&lt;h3&gt;
  
  
  &lt;center&gt;Paso 1&lt;/center&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;br&gt;&lt;br&gt;
El primer paso será ir a nuestro editor de código, como ya mencioné anteriormente, usaré visual studio code, este paso es muy intuitivo, simplemente abrimos el editor y listo.&lt;/p&gt;



&lt;center&gt;

 ![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jd2ysckb0f1red8wu9v8.png)

 &lt;/center&gt;

&lt;br&gt;

###&lt;center&gt;Paso 2&lt;/center&gt;
&lt;br&gt;
El segundo paso constará en abrir crear una carpeta y abrirla en visual studio code.

&lt;br&gt;
&lt;br&gt;
&lt;center&gt;

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8n8fzb2kfd0gaj7dqky0.png)
 
 &lt;/center&gt;

&lt;br&gt;
Y una vez hecho eso simplemente arrastraremos la carpeta a nuestro editor de código.

&lt;br&gt;

Tendremos lo siguiente:

&lt;br&gt;
&lt;br&gt;
&lt;center&gt;

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p9gay4rzepyasdgavbj.png)
 
&lt;/center&gt;



&lt;p&gt;Daremos un click al icono de crear un archivo&lt;/p&gt;



&lt;center&gt;

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qn1ogvdtdlmqybfgoz5q.png)
 
&lt;/center&gt;

&lt;p&gt;y lo llamaremos &lt;code&gt;main.sass&lt;/code&gt;&lt;/p&gt;



&lt;center&gt;

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/srrx7iuz6lpynu9ddhtu.png)
 
 &lt;/center&gt;

 &lt;br&gt;
 Ahora simplemente daremos click al archivo y ya podremos editarlo.

 &lt;br&gt;

&lt;br&gt;

###&lt;center&gt;Paso 3&lt;/center&gt;

Luego de esto haremos la combinación de teclas ``Ctrl + Ñ``
Con esto se abrira una terminal integrada en nuestro editor

&amp;gt; Nota IMPORTANTISIMA: Tenemos que tener si o si instalado NodeJS para poder instalar sass, si no sabes donde instalarlo te lo dejo aqui https://nodejs.org/es/download/

&lt;br&gt;

Ahora simplemente (TENIENDO NODEJS INTALADO) pegamos el siguiente comando en la consola



```npm install -g sass```



&lt;br&gt;

Enhorabuena!! Ya tenemos Sass instalado

Muchas gracias por llegar hasta aqui!
Estos articulos me toman bastante tiempo para escribirlos y redactarlos, muchas gracias por leer!
Recuerda Seguirme!

https://linktr.ee/franciscode

&lt;br&gt;



&lt;center&gt;

&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--zdvoxTBW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://franciscode.netlify.app/img/logo.png" width="626" height="626"&gt;

&lt;/center&gt;

</description>
      <category>sass</category>
      <category>devweb</category>
      <category>frontend</category>
      <category>styles</category>
    </item>
    <item>
      <title>Top 10 best extensions for VScode - #1</title>
      <dc:creator>Greedyboy</dc:creator>
      <pubDate>Fri, 23 Apr 2021 21:01:06 +0000</pubDate>
      <link>https://dev.to/greedyboy/top-10-best-extensions-for-vscode-1-414l</link>
      <guid>https://dev.to/greedyboy/top-10-best-extensions-for-vscode-1-414l</guid>
      <description>&lt;p&gt;Hello everybody! This is my first post in English, today we will see the 10 best extensions for Visual Studio Code.&lt;/p&gt;

&lt;p&gt;VSCode extensions serve to speed up certain tasks that can take away valuable seconds in our work, that's why the community of this code editor has created several tools for its useful operation.&lt;/p&gt;

&lt;p&gt;Today I bring you, my top 10 extensions for Visual Studio Code.&lt;/p&gt;

&lt;p&gt;When we start Visual Studio Code we will have what we should be used to, that's right, the typical welcome screen in every code editor.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--cXl5TGsz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qztcpi4trwmifpl72vmb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--cXl5TGsz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qztcpi4trwmifpl72vmb.png" alt="image" width="800" height="409"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Then we will have to go to the extensions box:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--EtKoam8O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyv5pe1uyj6acrx1yp0r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--EtKoam8O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyv5pe1uyj6acrx1yp0r.png" alt="image" width="68" height="332"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And now we only need to look for the following extensions&lt;/p&gt;

&lt;h2&gt;
  
  
  Prettier
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--tV_UiSo7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vgxjx4ifaw2seoe6pc8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--tV_UiSo7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vgxjx4ifaw2seoe6pc8.png" alt="image" width="588" height="117"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We simply search for its name in the text box, and select the first one.&lt;/p&gt;

&lt;p&gt;We will click on install&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xcZFdg4X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucl0j37j8qel20jk1xp2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xcZFdg4X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucl0j37j8qel20jk1xp2.png" alt="image" width="56" height="40"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What does this extension do?&lt;/p&gt;

&lt;h3&gt;
  
  
  Usage
&lt;/h3&gt;

&lt;p&gt;This extension is used to format the document, in other words to tidy it up and clean it up.&lt;/p&gt;

&lt;p&gt;To use it we will simply have to be in the file in which we want to clean it, for example this very, very messy HTML file 😂.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--LUdvlsy4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/confeiojvuopfjvppmej.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--LUdvlsy4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/confeiojvuopfjvppmej.png" alt="image" width="800" height="458"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To use the extension press the following key combination:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Ctrl + Shift + P&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;And type Format Document and press Enter&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gM9gWk4n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8o6mwtiv65kjrl4iuakz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gM9gWk4n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8o6mwtiv65kjrl4iuakz.png" alt="image" width="726" height="313"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Or simply &lt;/p&gt;

&lt;p&gt;&lt;code&gt;Shift + Alt + F&lt;/code&gt; &lt;/p&gt;

&lt;p&gt;And with this we will have our code in order!&lt;/p&gt;

&lt;h2&gt;
  
  
  Live Server
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--NSSXxXbY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx3t1dvvjp21hdxkga5f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--NSSXxXbY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx3t1dvvjp21hdxkga5f.png" alt="image" width="800" height="161"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As in the previous extension, simply click on install.&lt;/p&gt;

&lt;h3&gt;
  
  
  Usage
&lt;/h3&gt;

&lt;p&gt;To use it, simply type&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Ctrl + Shift + P&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;And type Live server&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--aPyWaLQR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3q7fabxbsrsrikno5qae.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--aPyWaLQR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3q7fabxbsrsrikno5qae.png" alt="image" width="720" height="135"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Select the one that says &lt;strong&gt;"Open with live Server"&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Or to make it shorter, we will make the following combination&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Alt + L + O&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;This will open our default browser and give us a view of our HTML file, this extension allows us to simply save the files with VSCode with&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Ctrl + S&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;And the changes will already be in the browser.&lt;/p&gt;

&lt;h2&gt;
  
  
  Material Icon Theme
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3ijOucil--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3znfo5hp8ubfs318ljo8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3ijOucil--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3znfo5hp8ubfs318ljo8.png" alt="image" width="800" height="168"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This extension will give us a wide variety of icons for a wide variety of files:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--thqprEnp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmh2w1kykx1zc0or4muh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--thqprEnp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmh2w1kykx1zc0or4muh.png" alt="image" width="800" height="2501"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As in the previous ones, we will look for it by its name and click on install.&lt;/p&gt;

&lt;p&gt;Once installed, the following window will appear&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0BqZzHA2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xer0t1x2jec12j90ye2i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0BqZzHA2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xer0t1x2jec12j90ye2i.png" alt="image" width="800" height="190"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We should select the one that says Material Icon Theme&lt;/p&gt;

&lt;p&gt;And that's it! we have new icons for our visual studio code!&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Ok ok, we already have 3 extensions, there is still a lot left, but let's not be discouraged!!! We will have our very nice Code Editor at the end of this post.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Indent Rainbow
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--s_iYZ5SI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rblh59epae8ioxi8pdy2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--s_iYZ5SI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rblh59epae8ioxi8pdy2.png" alt="image" width="800" height="179"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This extension will help us a lot to order our code, the installation is the same as we have followed before, (The search for it, and simply give the button to install)&lt;/p&gt;

&lt;p&gt;The installation is very fast and to check that it is ready we will go to our test file.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--n_eRFPH---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xry3gk868724s7e2e3r2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--n_eRFPH---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xry3gk868724s7e2e3r2.png" alt="image" width="800" height="408"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As we can see this extension will help us to guide us, to see where a tag or key starts and where it ends.  &lt;/p&gt;

&lt;p&gt;And now the following extension will give an excellent essence to our editor&lt;/p&gt;

&lt;h2&gt;
  
  
  One Monokai Theme
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KGPt-Nck--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hui3hh2qzpwpr1in6wg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KGPt-Nck--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hui3hh2qzpwpr1in6wg.png" alt="image" width="800" height="159"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is the One Monokai theme, to install it we must follow the procedure previously discussed and when we install it, the following will appear&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--lbNOr_BK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84jvkng7dtqjxg1wy3ml.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--lbNOr_BK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84jvkng7dtqjxg1wy3ml.png" alt="image" width="717" height="111"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And simply select the option One Monokai&lt;/p&gt;

&lt;p&gt;When we go back to our test HTML file it will look like this.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qdlb5vHS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fg2gqkeopt0qamg74sp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qdlb5vHS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fg2gqkeopt0qamg74sp.png" alt="image" width="800" height="335"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Well well, then I decided to leave this post until here so as not to extend it too much, and also not to fill the reader with so much information haha.&lt;br&gt;
I hope this post will be very supported as it is my first post in English, thank you very much for reading, remember to leave the Heart, Unicorn and save&lt;/p&gt;

&lt;p&gt;Keep Programming!&lt;/p&gt;

</description>
      <category>vscode</category>
      <category>plugin</category>
      <category>discuss</category>
      <category>editor</category>
    </item>
    <item>
      <title>Funciones JavaScript</title>
      <dc:creator>Greedyboy</dc:creator>
      <pubDate>Thu, 22 Apr 2021 20:34:25 +0000</pubDate>
      <link>https://dev.to/greedyboy/funciones-javascript-3l5k</link>
      <guid>https://dev.to/greedyboy/funciones-javascript-3l5k</guid>
      <description>&lt;p&gt;Antes de comenzar:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Una de las cosas que nos encontramos al aprender JavaScript son las &lt;strong&gt;Funciones&lt;/strong&gt;, en esta guía que esta basada en la guía de w3 schools. Aprenderas lo principal sobre las funciones.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Funciones JavaScript
&lt;/h2&gt;

&lt;p&gt;Una función de JavaScript es un bloque de código diseñado para realizar una tarea en particular.&lt;/p&gt;

&lt;p&gt;Una función de JavaScript se ejecuta cuando "algo" la invoca (la llama).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function myFunction(p1, p2) {
  return p1 * p2;   // La función retorna el producto entre p1 y p2
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Sintaxis de funciones de JavaScript
&lt;/h3&gt;

&lt;p&gt;Una función de JavaScript se define con la functionpalabra clave, seguida de un nombre , seguido de paréntesis () .&lt;/p&gt;

&lt;p&gt;Los nombres de funciones pueden contener letras, dígitos, subrayados y signos de dólar (las mismas reglas que las variables).&lt;/p&gt;

&lt;p&gt;Los paréntesis pueden incluir nombres de parámetros separados por comas:&lt;/p&gt;

&lt;p&gt;** ( parámetro1, parámetro2, ... ) **&lt;/p&gt;

&lt;p&gt;El código a ejecutar, por la función, se coloca entre llaves: {}&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function name(parameter1, parameter2, parameter3) {
  // Código a ser ejecutado
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Los &lt;strong&gt;parámetros&lt;/strong&gt; de la función se enumeran entre paréntesis () en la definición de la función.&lt;/p&gt;

&lt;p&gt;Los argumentos de la función son los valores que recibe la función cuando se invoca.&lt;/p&gt;

&lt;p&gt;Dentro de la función, los argumentos (los parámetros) se comportan como variables locales.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Una función es muy similar a un procedimiento o una subrutina, en otros lenguajes de programación.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Invocación de una Función
&lt;/h3&gt;

&lt;p&gt;El código dentro de la función se ejecutará cuando "algo" invoca (llama) a la función:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Cuando ocurre un evento (cuando un usuario hace clic en un botón)&lt;/li&gt;
&lt;li&gt;Cuando se invoca (llama) desde el código JavaScript&lt;/li&gt;
&lt;li&gt;Automáticamente (autoinvocado)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Retorno de Función
&lt;/h3&gt;

&lt;p&gt;Cuando JavaScript llega a una &lt;code&gt;return&lt;/code&gt; declaración, la función dejará de ejecutarse.&lt;/p&gt;

&lt;p&gt;Si la función fue invocada desde una declaración, JavaScript "regresará" para ejecutar el código después de la declaración de invocación.&lt;/p&gt;

&lt;p&gt;Las funciones a menudo calculan un &lt;strong&gt;valor de retorno&lt;/strong&gt; . El valor de retorno se "devuelve" al "llamador":&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var x = myFunction(4, 3);   

function myFunction(a, b) {
  return a * b;            
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;El resultado en x será&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;12
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  ¿Por qué funciones?
&lt;/h3&gt;

&lt;p&gt;Puede reutilizar el código: defina el código una vez y utilícelo muchas veces.&lt;/p&gt;

&lt;p&gt;Puede usar el mismo código muchas veces con diferentes argumentos para producir resultados diferentes&lt;/p&gt;

&lt;p&gt;Se subirá mas contenido con respecto a JavaScript, puedes aprender mas siguiendo la guía que proporciona la w3schools.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>function</category>
      <category>guide</category>
    </item>
    <item>
      <title>¿Es recomendable aprender Vim?</title>
      <dc:creator>Greedyboy</dc:creator>
      <pubDate>Tue, 20 Apr 2021 00:28:45 +0000</pubDate>
      <link>https://dev.to/greedyboy/es-recomendable-aprender-vim-41kg</link>
      <guid>https://dev.to/greedyboy/es-recomendable-aprender-vim-41kg</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;Cabe aclarar que este no es un tutorial de Vim, sino un post sobre mi experiencia hasta ahora usando Vim.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Muchas personas se asustan al escuchar el nombre de Vim, puede que ya sepas que es, pero igual te dejaré esta definición por si no sabes que es:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Vim, como su antecesor Vi, se utiliza desde un Terminal en modo texto. Se controla por completo mediante el teclado. Esto es en parte a causa de que Vi fue desarrollado a mediados de la década de 1970, cuando los terminales se comunicaban con un ordenador principal (host) mediante una conexión serie, que no era muy rápida (20 Kbps). Las limitaciones de los terminales de la época dieron lugar al concepto de diferentes modos, idea que ha resultado muy provechosa desde entonces. Vim es casi 100 % compatible con Vi,1​2​ aunque tiene muchas mejoras e incluso cuenta con versiones dotadas de interfaz gráfica y menús que pueden operarse mediante el ratón (gvim o kvim), así como una versión simplificada, evim que se comporta como un editor sin diferentes modos.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;En resumen Vim es sucesor de Vi, se usa desde una Terminal, se controla por completo mediante el teclado, etc.&lt;/p&gt;

&lt;p&gt;A diferencias de otros editores Vim tiene modos, así es, esto sonará complicado, pero si lo practicas mucho no será muy complicado.&lt;/p&gt;

&lt;p&gt;Vim es bastante utilizado por desarrolladores ya que, aumenta tu productividad en cierta medida por la razón de que no es necesario tocar el mouse en ningún momento, ya que puedes usar atajos de teclado creados por ti mismo.&lt;/p&gt;

&lt;p&gt;Para mí fue algo dificil aprender a utilizarlo ya que estaba acostumbrado a utilizar Editores de Código como Visual Studio Code o Sublime Text, pero con los plugins adecuados y la motivación necesaria se puede lograr lo que sea&lt;/p&gt;

&lt;p&gt;Si estas interesado en aprender Vim te recomiendo jugar a este juego llamado &lt;a href="https://vim-adventures.com/"&gt;Vim Adventures&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZLtS3Uht--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ju17z1k6i1q2h4hcsjt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZLtS3Uht--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ju17z1k6i1q2h4hcsjt.png" alt="image" width="800" height="382"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hasta aqui el post de hoy, si ya estas aprendiendo y/o usando Vim quiero que dejes tu opinión acerca de este tema siempre con respeto.&lt;/p&gt;

&lt;p&gt;Chao Devs!&lt;/p&gt;

&lt;p&gt;Eso es todo, espero puedan darle un buen apoyo a este post!!&lt;/p&gt;

</description>
      <category>vim</category>
      <category>aprender</category>
      <category>neovim</category>
      <category>terminal</category>
    </item>
    <item>
      <title>Mi configuración de Neovim.</title>
      <dc:creator>Greedyboy</dc:creator>
      <pubDate>Sun, 18 Apr 2021 15:15:09 +0000</pubDate>
      <link>https://dev.to/greedyboy/mi-configuracion-de-neovim-48o0</link>
      <guid>https://dev.to/greedyboy/mi-configuracion-de-neovim-48o0</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%2Fuser-images.githubusercontent.com%2F77551844%2F115131396-dcfeec80-9fc5-11eb-8bb7-ae7b4a57296a.jpg" 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%2Fuser-images.githubusercontent.com%2F77551844%2F115131396-dcfeec80-9fc5-11eb-8bb7-ae7b4a57296a.jpg" alt="My Config"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;El Github del repositorio esta &lt;a href="https://github.com/FrancisCode13/NeoVim-Config" rel="noopener noreferrer"&gt;aquí&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  NeoVim-Config
&lt;/h1&gt;

&lt;blockquote&gt;
&lt;p&gt;Antes de empezar me gustaría aclarar que casi toda la configuración esta hecha por un dev llamado Teo, todos los créditos son para él, y te dejo su Github &lt;a href="https://github.com/TeoDev1611" rel="noopener noreferrer"&gt;aquí&lt;/a&gt;. Mas que nada lo tengo en este github como copia de respaldo por si le pasa algo a mi Vim.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Inicio
&lt;/h2&gt;

&lt;p&gt;Esta configuración es para Neovim (Fork de Vim) tiene Plugins bastante útiles, un tema muy bonito para mi gusto (siempre puedes cambiarselo) atajos bastante útiles, una terminal integrada, entre otros.&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%2Fuser-images.githubusercontent.com%2F77551844%2F115130586-d751d880-9fbe-11eb-9f7b-e0b66d68c1a6.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%2Fuser-images.githubusercontent.com%2F77551844%2F115130586-d751d880-9fbe-11eb-9f7b-e0b66d68c1a6.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Atajos Básicos
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Cabe aclarar que &lt;code&gt;&amp;lt;leader&amp;gt;&lt;/code&gt; es la tecla espacio en Windows 10.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;1.- &lt;code&gt;&amp;lt;leader&amp;gt;w&lt;/code&gt;   Guardar el archivo&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F77551844%2F115130631-30217100-9fbf-11eb-8279-7acb83a96739.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%2Fuser-images.githubusercontent.com%2F77551844%2F115130631-30217100-9fbf-11eb-8279-7acb83a96739.png" alt="image"&gt;&lt;/a&gt;&lt;br&gt;
3.- &lt;code&gt;&amp;lt;leader&amp;gt;q&lt;/code&gt;   Salir del archivo&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F77551844%2F115130637-3c0d3300-9fbf-11eb-95e2-a857172bcb7c.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%2Fuser-images.githubusercontent.com%2F77551844%2F115130637-3c0d3300-9fbf-11eb-95e2-a857172bcb7c.png" alt="image"&gt;&lt;/a&gt;&lt;br&gt;
5.- &lt;code&gt;&amp;lt;leader&amp;gt;wq&lt;/code&gt;  Guardar y salir del archivo&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F77551844%2F115130655-6e1e9500-9fbf-11eb-9bf1-99156af6eee5.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%2Fuser-images.githubusercontent.com%2F77551844%2F115130655-6e1e9500-9fbf-11eb-9bf1-99156af6eee5.png" alt="image"&gt;&lt;/a&gt;&lt;br&gt;
7.- &lt;code&gt;&amp;lt;leader&amp;gt;so&lt;/code&gt;  Actualizar&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F77551844%2F115130667-7c6cb100-9fbf-11eb-94fd-9ad6ecedfa2c.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%2Fuser-images.githubusercontent.com%2F77551844%2F115130667-7c6cb100-9fbf-11eb-94fd-9ad6ecedfa2c.png" alt="image"&gt;&lt;/a&gt;&lt;br&gt;
9.- &lt;code&gt;&amp;lt;leader&amp;gt;pi&lt;/code&gt;  Instalar los plugins&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F77551844%2F115130674-87274600-9fbf-11eb-8efb-44133ee2a824.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%2Fuser-images.githubusercontent.com%2F77551844%2F115130674-87274600-9fbf-11eb-8efb-44133ee2a824.png" alt="image"&gt;&lt;/a&gt;&lt;br&gt;
11.- &lt;code&gt;&amp;lt;leader&amp;gt;n&lt;/code&gt;   CocExplorer Lateral&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F77551844%2F115130680-93ab9e80-9fbf-11eb-9600-3160e78c756f.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%2Fuser-images.githubusercontent.com%2F77551844%2F115130680-93ab9e80-9fbf-11eb-9600-3160e78c756f.png" alt="image"&gt;&lt;/a&gt;&lt;br&gt;
13.- &lt;code&gt;&amp;lt;leader&amp;gt;p&lt;/code&gt;  CocExplorer Flotante&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F77551844%2F115130691-9d350680-9fbf-11eb-98a2-c5d32962862f.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%2Fuser-images.githubusercontent.com%2F77551844%2F115130691-9d350680-9fbf-11eb-98a2-c5d32962862f.png" alt="image"&gt;&lt;/a&gt;&lt;br&gt;
14.- &lt;code&gt;&amp;lt;leader&amp;gt;t&lt;/code&gt;  Floaterm&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F77551844%2F115130709-bd64c580-9fbf-11eb-8ce6-844496acb45d.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%2Fuser-images.githubusercontent.com%2F77551844%2F115130709-bd64c580-9fbf-11eb-8ce6-844496acb45d.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Entre otros comandos.&lt;/p&gt;
&lt;h2&gt;
  
  
  Movimiento en Vim
&lt;/h2&gt;

&lt;p&gt;Para moverte en Vim debes utilizar las teclas &lt;em&gt;L,K,J y H&lt;/em&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;J = Abajo
K = Arriba
H = Izquierda
L = Derecha
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Uso de esta configuración
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Clona este repositorio&lt;/li&gt;
&lt;li&gt;Pegalo en tu carpeta donde esta tu nvim&lt;/li&gt;
&lt;li&gt;Ejecuta :PlugInstall&lt;/li&gt;
&lt;li&gt;Actualiza con :so$ o simplemente sal de nvim o y vuelve a entrar&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Créditos a Teo por la mayoría de la configuración 😄&lt;/p&gt;

</description>
    </item>
    <item>
      <title>¿Cuál es el Mejor Navegador?</title>
      <dc:creator>Greedyboy</dc:creator>
      <pubDate>Fri, 16 Apr 2021 13:55:40 +0000</pubDate>
      <link>https://dev.to/greedyboy/cual-es-el-mejor-navegador-n94</link>
      <guid>https://dev.to/greedyboy/cual-es-el-mejor-navegador-n94</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;Antes de Comenzar, cabe aclarar que el titulo es muy pero que muy subjetivo, ya que a tí podría gustarte otro navegador a diferencia de mí, si es así, te invito a comentar el que mas te guste y porque, en los comentarios, una vez aclarado comenzemos.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Entonces, ¿Cuál es el mejor navegador?, primero debemos hacernos una idea de que significa "&lt;strong&gt;Navegador&lt;/strong&gt;".&lt;/p&gt;

&lt;h2&gt;
  
  
  Definición de Navegador
&lt;/h2&gt;

&lt;p&gt;Programa que permite navegar por internet u otra red informática de comunicaciones.&lt;/p&gt;

&lt;p&gt;Basado en el escrito anterior, podemos afirmar que un Navegador es una aplicación la cual nos ayuda a Navegar (valga la redundancia) a través del internet.&lt;/p&gt;

&lt;p&gt;Ya sabemos entonces que es un navegador, pero, ¿Cuales son los navegadores mas populares?&lt;/p&gt;

&lt;h2&gt;
  
  
  Navegadores Populares
&lt;/h2&gt;

&lt;p&gt;Estos son algunos de los navegadores mas populares&lt;/p&gt;

&lt;h2&gt;
  
  
  Google Chrome
&lt;/h2&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%2F9mh74ggd5yl8q4grfk9p.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%2F9mh74ggd5yl8q4grfk9p.png" alt="google-chrome"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Google Chrome es un navegador de código cerrado, lo que significa que no podemos editar su código fuente, aunque de igual manera es derivado de proyectos de código libre. Este navegador es desarrollado por Google (De ahí su nombre). &lt;/p&gt;

&lt;p&gt;Está desarrollado Gratuitamente y su nombre proviene además del término en inglés usado para el marco de la interfaz gráfica para el usuario.&lt;/p&gt;

&lt;p&gt;Para instalarlo, simplemente deberemos ir a su sitio oficial, descargarlo e instalarlo:&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%2Fa47tl5efs7y355hykrkp.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%2Fa47tl5efs7y355hykrkp.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Nota: Es muy posible que su logo lo hayas visto, ya que es el navegador mas usado, y por ende el mas popular.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Mozilla Firefox
&lt;/h2&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%2Fksvnwea9w9q6zfxy7hre.jpg" 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%2Fksvnwea9w9q6zfxy7hre.jpg" alt="firefox"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Es un navegador web de código libre, desarrollado para distintas plataformas. Usa el motor Gecko para renderizar páginas web, el cual implementa actuales y futuros estándares web.​​ &lt;/p&gt;

&lt;p&gt;Firefox está desarrollado para las plataformas Linux, Android, iOS, macOS y Microsoft Windows. Entre sus características incluyen la tradicional navegación por pestañas,16​ corrector ortográfico (que puede ser incluido vía Mozilla Addons - Complementos de Mozilla), búsqueda progresiva, marcadores dinámicos, un administrador de descargas, lector RSS, navegación privada, navegación con georreferenciación, aceleración mediante GPU, e integración del motor de búsqueda que desee el usuario. Además, se puede instalar tanto sin conexión como también en línea desde la página web, este último es utilizado para descargar los componentes de segundo plano, ideal para equipos con conexiones mínimas.&lt;/p&gt;

&lt;p&gt;Podemos instalarlo desde su sitio oficial:&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%2Fj65kkrm61fbxlxzkmbcv.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%2Fj65kkrm61fbxlxzkmbcv.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Opera
&lt;/h2&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%2F6lffcu18ytza9u1c3qcl.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%2F6lffcu18ytza9u1c3qcl.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Opera es un navegador web creado por la empresa noruega Opera Software. Usa el motor de renderizado Blink.​ Tiene versiones para computadoras de escritorio, teléfonos móviles y tabletas. Los sistemas operativos compatibles con Opera de escritorio son Microsoft Windows, macOS y GNU/Linux entre otros.​&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Como mencion honorífica quiero comentar acerca del navegador Opera GX, el cual esta optimizado para la experiencia de jugadores de videojuegos, lo usé bastante tiempo, y se puso muy lento, además tenía unos problemas con el desarrollo web responsive especificamente en ese navegador, les dejo su imagen igualmente.&lt;/p&gt;
&lt;/blockquote&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%2Fajadcr59t3jgzf5s8l19.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%2Fajadcr59t3jgzf5s8l19.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Safari
&lt;/h2&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%2F7mpr5vpaumjc3ehkg7tm.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%2F7mpr5vpaumjc3ehkg7tm.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Safari es un navegador web de código cerrado desarrollado por Apple Inc. Está disponible para macOS, iPadOS e iOS, y de 2007 a 2012, estaba disponible para Windows&lt;/p&gt;

&lt;p&gt;Como bien dice su descripción, este navegador es compatible solo con Mac, lo que le da un punto en contra.&lt;/p&gt;

&lt;h2&gt;
  
  
  Brave
&lt;/h2&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%2Fhl0qe87tbgglklk9n9ob.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%2Fhl0qe87tbgglklk9n9ob.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Brave es un navegador web de código abierto basado en Chromium, creado por la compañía Brave Software en el año 2016, fundada por el cofundador del Proyecto Mozilla y creador de JavaScript, Brendan Eich.​A partir de 2019, Brave ha sido lanzado para Windows, macOS, Linux, Android e iOS.&lt;/p&gt;

&lt;p&gt;Este navegador es con el que me he sentido mas comodo, no necesitas una extensión para bloquear anuncios, a diferencias de otro navegadores, ¡Brave trae su propio bloqueador de anuncios integrado!, Además como incentivo para que mas personas usen este navegador brave regala criptomonedas por usarlo.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusión
&lt;/h2&gt;

&lt;p&gt;Hay una alta gama de navegadores, por lo cual hay muchas elecciones para elegir tu navegador, en mi caso he probado todos los navegadores de esta guía exceptuando Safari, en mi opinion el que mas me ha gustado para trabajar y pasar el tiempo es Brave, ahora, te invito a comentar cual es tu favorito!!&lt;/p&gt;

&lt;p&gt;Estén pendientes que vendrán muchos mas publicaciones!&lt;/p&gt;

</description>
      <category>browser</category>
      <category>web</category>
      <category>brave</category>
      <category>chrome</category>
    </item>
    <item>
      <title>Roadmap para ser desarrollador Frontend Junior.</title>
      <dc:creator>Greedyboy</dc:creator>
      <pubDate>Thu, 15 Apr 2021 14:07:44 +0000</pubDate>
      <link>https://dev.to/greedyboy/roadmap-para-ser-desarrollador-frontend-junior-25lh</link>
      <guid>https://dev.to/greedyboy/roadmap-para-ser-desarrollador-frontend-junior-25lh</guid>
      <description>&lt;p&gt;Al ver el título de este Post pensaras, ¿Qué es un Roadmap?, puede que ya lo sepas, puede que lo hayas oído, pero, exactamente, &lt;strong&gt;¿Que es un RoadMap?&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Definición de Roadmap
&lt;/h2&gt;

&lt;p&gt;Un Roadmap es un plan estratégico que define una meta o un resultado deseado e incluye los principales pasos o hitos necesarios para alcanzarlo. También sirve como herramienta de comunicación, se trata de un documento de alto nivel que ayuda a articular el pensamiento estratégico detrás tanto de la meta.&lt;/p&gt;

&lt;h2&gt;
  
  
  ¿Como construir un roadmap?
&lt;/h2&gt;

&lt;p&gt;Si quieres construir uno, primero debes saber que quieres aprender en el mundo de la tecnología, hay muchos estereotipos a seguir por todo el internet, pero, en esta guía te mostrare uno para ser desarrollador Frontend Junior, pasaré a presentartela y consiguiente a esto, explicar cada punto de este roadmap.&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%2Fxz2zdrpw7adipj6jqrio.jpeg" 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%2Fxz2zdrpw7adipj6jqrio.jpeg" alt="roadmap-frontend"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Crédito de Imagen a medium.com&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Quizás al ver ese RoadMap tan gigante te den unas ganas increibles de cerrar este post y gritar Jajaja, pues te lo explicaré paso a paso para que lo entiendas y lo sigas de manera correcta.&lt;/p&gt;

&lt;p&gt;Lo primero es como ya todos sabemos, aprender lo básico, esto son las 3 partes fundamentales del desarrollo Frontend, sin estas tencologías las páginas web no podrían existir, así es!, Estamos hablando de &lt;strong&gt;HTML&lt;/strong&gt;, &lt;strong&gt;CSS&lt;/strong&gt;, y &lt;strong&gt;JavaScript&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Aprende lo básico
&lt;/h2&gt;

&lt;p&gt;Deberemos aprender lo básico de cada una de estas tecnologías y practicar mucho con sencillas webs, te dejo cursos de cada una de ellas en w3schools&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.w3schools.com/html/default.asp" rel="noopener noreferrer"&gt;HTML&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.w3schools.com/css/default.asp" rel="noopener noreferrer"&gt;CSS&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.w3schools.com/js/default.asp" rel="noopener noreferrer"&gt;JavaScript&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Luego de haber practicado mucho todas estas tecnología podemos continuar con nuestro RoadMap&lt;/p&gt;

&lt;p&gt;Lo siguiente será:&lt;/p&gt;

&lt;h2&gt;
  
  
  Profundiza en los Temas
&lt;/h2&gt;

&lt;p&gt;Aquí podemos seguir tanto la ruta de profundizar en CSS, como en JavaScript:&lt;/p&gt;

&lt;h3&gt;
  
  
  CSS
&lt;/h3&gt;

&lt;p&gt;Aquí podemos elegir tres cosas&lt;/p&gt;

&lt;p&gt;1.- Frameworks&lt;/p&gt;

&lt;p&gt;2.- Preprocesadores&lt;/p&gt;

&lt;p&gt;3.- Desarrollo Web Responsive&lt;/p&gt;

&lt;p&gt;Algunos de los frameworks mas conocidos son: Foundation, Boostrapt, Materialize CSS, Semantic UI, entre otros.&lt;/p&gt;

&lt;p&gt;Algunos de los Preprocesadores mas conocidos son: Sass, Less, Stylus, PostCSS.&lt;/p&gt;

&lt;p&gt;En cuanto al desarrollo web responsive te dejo una guia &lt;a href="https://desarrolloweb.com/manuales/responsive-web-design.html" rel="noopener noreferrer"&gt;aquí&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  JavaScript
&lt;/h3&gt;

&lt;p&gt;Al profundizar en JavaScript podemos encontrarnos con Typescript o Flow, También con Empaquetadores de Archivos, frameworks entre otros.&lt;/p&gt;

&lt;p&gt;Empaquetadores de Archivos:&lt;/p&gt;

&lt;p&gt;webpack&lt;br&gt;
rollup&lt;br&gt;
porcel&lt;br&gt;
RequireJS / AMD&lt;br&gt;
Browserify&lt;/p&gt;

&lt;p&gt;Pruebas:&lt;/p&gt;

&lt;p&gt;Jest&lt;br&gt;
Mocha&lt;br&gt;
Jasmine&lt;br&gt;
Enzyme&lt;/p&gt;

&lt;p&gt;Frameworks:&lt;/p&gt;

&lt;p&gt;Angular&lt;br&gt;
React&lt;br&gt;
VueJS&lt;br&gt;
Preact&lt;br&gt;
EmberJS&lt;/p&gt;

&lt;p&gt;Desde angular podemos irnos a Flux, Redux o Mobx&lt;br&gt;
Desde React podemos irnos a RxJS o Typescript&lt;/p&gt;

&lt;p&gt;Gestor de Paquetes:&lt;/p&gt;

&lt;p&gt;Yarn&lt;br&gt;
npm&lt;/p&gt;

&lt;p&gt;Igual podemos automatizar tareas con:&lt;/p&gt;

&lt;p&gt;npm scripts&lt;br&gt;
gulp&lt;br&gt;
Grunt&lt;/p&gt;

&lt;p&gt;Si quieres profundizar mas aún en JavaScript puedes aprender ES6&lt;/p&gt;

&lt;p&gt;Esto de aquí ya es bastante profundo en cada tecnología, puedes aprenderlo!&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%2Fu3higfqcdu895dgxofqb.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%2Fu3higfqcdu895dgxofqb.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Pues hasta aquí estaría amigos, esta guía tampoco te enseñara como aprenderlo, pero te enseña que aprender y en que orden, te recomiendo seguir este RoadMap al pie de la letra y no rendirte!!&lt;/p&gt;

&lt;p&gt;Parecerá mucho, pero con ayuda y buena guía triunfaras!!&lt;/p&gt;

&lt;p&gt;Gracias por leer!! &lt;/p&gt;

</description>
      <category>roadmap</category>
      <category>frontend</category>
      <category>javascript</category>
      <category>css</category>
    </item>
    <item>
      <title>¿Cómo limpiar los archivos Temporales en Windows 10?</title>
      <dc:creator>Greedyboy</dc:creator>
      <pubDate>Wed, 14 Apr 2021 15:00:53 +0000</pubDate>
      <link>https://dev.to/greedyboy/como-limpiar-los-archivos-temporales-en-windows-10-2197</link>
      <guid>https://dev.to/greedyboy/como-limpiar-los-archivos-temporales-en-windows-10-2197</guid>
      <description>&lt;h1&gt;
  
  
  TempCleaner
&lt;/h1&gt;

&lt;p&gt;En esta guía te mostraré como limpiar tu PC y borrar tus archivos temporales de distintas maneras.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Antes de Comenzar, aclaro, que esta guía esta hecha para el sistema operativo &lt;strong&gt;Windows 10&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Requerimientos
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Tener un sistema operativo Windows 10&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Método 1
&lt;/h2&gt;

&lt;p&gt;Lo que deberemos hacer en este método es tener encendido nuestro Dispositivo (Nótese que es algo obvio) y utilizar la combinación de teclas &lt;strong&gt;Windows + R&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Esto nos abrira una pestaña así:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZWHI2JtO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114279465-d17a5700-9a02-11eb-905f-6e6ff38561eb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZWHI2JtO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114279465-d17a5700-9a02-11eb-905f-6e6ff38561eb.png" alt="image" width="402" height="206"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Consiguiente a esto escribiremos en el cuadro de diálogo lo siguiente:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;%TEMP%&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Nos quedara algo como lo siguiente&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hYeTGI3D--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114281129-a5fb6a80-9a0a-11eb-8159-237236aec254.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hYeTGI3D--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114281129-a5fb6a80-9a0a-11eb-8159-237236aec254.png" alt="image" width="398" height="202"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Despues de esto deberemos darle en "Aceptar" o simplemente presionar la tecla Enter.&lt;/p&gt;

&lt;p&gt;Nos Abrira una carpeta con bastantes archivos&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SYrwaF7V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114281161-cb887400-9a0a-11eb-8661-ce62b027b30f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SYrwaF7V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114281161-cb887400-9a0a-11eb-8661-ce62b027b30f.png" alt="image" width="399" height="447"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Nota: Si tienes pocos archivos o ninguno, es porque esta limpia la carpeta.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Despues de estar adentro, seleccionaremos todos los archivos de la carpeta&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pRUeQJzV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114281210-16a28700-9a0b-11eb-8301-be797dc0e882.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--pRUeQJzV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114281210-16a28700-9a0b-11eb-8301-be797dc0e882.png" alt="image" width="706" height="535"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Le daremos click derecho&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--aFwCxp7J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114281229-3043ce80-9a0b-11eb-9f41-851188d3bcf3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--aFwCxp7J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114281229-3043ce80-9a0b-11eb-9f41-851188d3bcf3.png" alt="image" width="800" height="504"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Y por último le daremos al boton de Eliminar&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---0_FKttY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114281309-a0525480-9a0b-11eb-90b3-47d0bb2e0d23.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---0_FKttY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114281309-a0525480-9a0b-11eb-90b3-47d0bb2e0d23.png" alt="image" width="800" height="531"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Nota: Puede que hayan algunos archivos que no se hayan borrado, esto es normal ya que algunos podrían ser parte de procesos del sistema.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Método 2
&lt;/h2&gt;

&lt;p&gt;Para este metodo utilizaremos un archivo creado por mí que limpia los archivos temporales automaticamente al ejecutarse.&lt;/p&gt;

&lt;p&gt;Obviamente debes tenerlo descargado, a continuación dos maneras de descargarlo.&lt;/p&gt;

&lt;p&gt;1.- Descargandolo por Mediafire&lt;/p&gt;

&lt;p&gt;Este paso es bastante sencillo, simplemente da click &lt;a href="https://www.mediafire.com/file/s0iglajgu4s6wis/Temporary+Cleanser.bat/file"&gt;aquí&lt;/a&gt;&lt;br&gt;
El archivo simplemente pesa 756 bytes, lo cual es la nada misma.&lt;/p&gt;

&lt;p&gt;2.- Clonando el repositorio&lt;/p&gt;

&lt;p&gt;Para este paso deberas tener instalado Git.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Nota: Si no sabes como instalarlo, aqui te dejo un &lt;a href="https://medium.com/laboratoria-how-to/c%C3%B3mo-instalar-git-368c78187b51#:~:text=Para%20empezar%2C%20entra%20a%20la,bot%C3%B3n%20de%20Downloads%20for%20Windows.&amp;amp;text=Una%20vez%20descargada%2C%20dale%20click,cual%20debemos%20responder%20que%20s%C3%AD."&gt;tutorial&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Primero nos dirigiremos al escritorio con:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;cd desktop&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Y luego clonaremos el repositorio con:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;git clone https://github.com/FrancisCode13/TempCleaner&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Ahora tendremos el repositorio en nuestro escritorio&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--A4w6OZRg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114281625-5b2f2200-9a0d-11eb-84a9-b37960cb265b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--A4w6OZRg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114281625-5b2f2200-9a0d-11eb-84a9-b37960cb265b.png" alt="image" width="171" height="108"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Consiguiente a esto, entraremos en la carpeta, y podremos observar 2 archivos (La aplicación y este archivo que estas leeyendo y la carpeta de git) , Ignoraremos por completo el Readme y la carpeta de Git y Abriremos el archivo .bat&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--tPb8fFvE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114281646-8b76c080-9a0d-11eb-9a61-e2e4770b855b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--tPb8fFvE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114281646-8b76c080-9a0d-11eb-9a61-e2e4770b855b.png" alt="image" width="188" height="108"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Nos abrira el Simbolo del Sistema con lo siguiente:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WNJEeVKn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114731000-5de08e80-9d0f-11eb-8b89-fb6225f673c3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WNJEeVKn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114731000-5de08e80-9d0f-11eb-8b89-fb6225f673c3.png" alt="image" width="435" height="258"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Cabe aclarar que tanto en el Temp como en el Prefetch hay archivos temporales, una vez aclaro esto continuemos&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Ahora simplemente escribiremos&lt;/p&gt;

&lt;p&gt;&lt;code&gt;1&lt;/code&gt; y le daremos a la tecla Enter&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--eRs2vrxu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114731363-b0ba4600-9d0f-11eb-8524-974bc4036a65.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--eRs2vrxu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114731363-b0ba4600-9d0f-11eb-8524-974bc4036a65.png" alt="image" width="125" height="25"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Nos aparecera algo como lo siguiente:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--eXbkLIZg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114731429-be6fcb80-9d0f-11eb-8e22-caf0dca2c1dd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--eXbkLIZg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114731429-be6fcb80-9d0f-11eb-8e22-caf0dca2c1dd.png" alt="image" width="706" height="80"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Aunque no se demuestre el archivo Batch a logrado exitosamente la tarea, para asegurarnos comprobemos la carpeta Temp&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FzRSmLUc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114731713-f6770e80-9d0f-11eb-878c-9af08b150c72.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FzRSmLUc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/77551844/114731713-f6770e80-9d0f-11eb-878c-9af08b150c72.png" alt="image" width="371" height="122"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Podemos notar que hay algunos archivos, esto no es ningún error, ya que algunos archivos no se borran ya que son propios del sistema.&lt;/p&gt;

&lt;p&gt;Gracias por ver esta Guía :)&lt;/p&gt;

</description>
      <category>systems</category>
    </item>
    <item>
      <title>Mi experiencia trabajando en equipo.</title>
      <dc:creator>Greedyboy</dc:creator>
      <pubDate>Tue, 13 Apr 2021 22:31:02 +0000</pubDate>
      <link>https://dev.to/greedyboy/mi-experiencia-trabajando-en-equipo-1f1d</link>
      <guid>https://dev.to/greedyboy/mi-experiencia-trabajando-en-equipo-1f1d</guid>
      <description>&lt;p&gt;Trabajar como desarrollador es un proceso hermoso, tedioso y complicado, una mezcla entre lo dulce y lo amargo, pero trabajar con otros desarrolladores es una realidad completamente distinta.&lt;/p&gt;

&lt;p&gt;Para mi hace unos meses no podía ni imaginar los desafío que me esperaba, hoy ya trabajo en diversos proyectos/comunidades sin fines de lucro para practicar y mejorar mis conocimientos.&lt;/p&gt;

&lt;p&gt;Trabajar en equipo no es difícil, ya que tenemos compañeros de equipo que estarán dispuestos a ayudarnos y apoyarnos en cualquier problema, conoceremos nuevas herramientas que son necesarias para trabajar en cualquier equipo.&lt;/p&gt;

&lt;p&gt;Las herramientas fundamentales son Git y Github, estas te acompañaran durante el trabajo en equipo, y en tu vida cotidiana como desarrollador.&lt;/p&gt;

&lt;p&gt;Te invito a cuando fracasar, no ponerte triste, sino feliz, ya que recuerda que de los errores se aprende.&lt;/p&gt;

&lt;p&gt;Hasta la vista y recuerda, ¡Sigue Aprendiendo!&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Redactado por FrancisCode&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>html</category>
      <category>css</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
