<?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: Jose Antonio Felix </title>
    <description>The latest articles on DEV Community by Jose Antonio Felix  (@jafb321).</description>
    <link>https://dev.to/jafb321</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%2F730606%2Fdaa63256-d553-4f15-a12d-ddfb40d2c17e.jpeg</url>
      <title>DEV Community: Jose Antonio Felix </title>
      <link>https://dev.to/jafb321</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jafb321"/>
    <language>en</language>
    <item>
      <title>Use async await on c# 🚀 (easy way)</title>
      <dc:creator>Jose Antonio Felix </dc:creator>
      <pubDate>Sat, 08 Jan 2022 03:38:47 +0000</pubDate>
      <link>https://dev.to/jafb321/use-async-await-on-c-easy-way-18pk</link>
      <guid>https://dev.to/jafb321/use-async-await-on-c-easy-way-18pk</guid>
      <description>&lt;p&gt;Do you want to use async/await on c# ? (yes, as in javascript) Okey, I'll show you how to do that in an easy way 😎&lt;/p&gt;

&lt;h4&gt;
  
  
  First of all
&lt;/h4&gt;

&lt;p&gt;You should have your project on c# (.net core/framework) created.&lt;/p&gt;

&lt;h2&gt;
  
  
  Let's start
&lt;/h2&gt;

&lt;p&gt;There are a few concepts that you need to know, so this tutorial is divided into several small sections:&lt;/p&gt;

&lt;p&gt;
  &lt;strong&gt;Task class&lt;/strong&gt; 🧙 your best friend
  &lt;br&gt;
The task class on c# represents an async operation, this operation can be a simple method wich will be called without interrupt the current process thread, it'll run on another Thread, but you don't have to do any complex syntax, just call a method. 

&lt;p&gt;&lt;strong&gt;This is the basic usage:&lt;/strong&gt;&lt;br&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%2Ft0l0znrndqu4ox7qfst6.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%2Ft0l0znrndqu4ox7qfst6.png" alt="Basic usage of Task class" width="525" height="157"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We can see, 3 elements:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The Task class constructor and variable task1&lt;/li&gt;
&lt;li&gt;A lambda expression (is like an arrow function): that represent the operation wich we want to run (&lt;a href="https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/operators/lambda-expressions"&gt;lambda expression in c#&lt;/a&gt;).&lt;/li&gt;
&lt;li&gt;Start method call: run the operation asynchronously&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Output:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Hello! this will run async
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;/p&gt;


  &lt;strong&gt;A more detailed example&lt;/strong&gt; 👀
  &lt;br&gt;
The task class is a powerful tool of c#, but maybe you got confused on &lt;strong&gt;how and when it is running&lt;/strong&gt;. 

&lt;p&gt;Well this is a more detailed example, we have 2 tasks to do:&lt;br&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%2F41csm59aye7xx5bjthwg.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%2F41csm59aye7xx5bjthwg.png" alt="Task examples" width="486" height="309"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can see, the 2 tasks are &lt;em&gt;example operations&lt;/em&gt; wich use &lt;code&gt;Thread.Sleep(miliseconds)&lt;/code&gt; function to stop temporaly the task thread (to simulate a &lt;em&gt;real&lt;/em&gt; operation).&lt;/p&gt;

&lt;p&gt;So, let's &lt;code&gt;Start&lt;/code&gt; these tasks and check it's behaviour:&lt;br&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%2F6avbjp8a48ne33baa73l.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%2F6avbjp8a48ne33baa73l.png" alt="Detailed task example code" width="597" height="498"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Output&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Starting all tasks
Starting task 1
Starting task 2
------------------------------------
All tasks have finished, or not?
Task 1 done
Task 2 done
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;As we can see, the 2 tasks have been called asynchronously, and it's output is on the bottom.&lt;/p&gt;

&lt;p&gt;But what happend with the &lt;code&gt;All tasks have finished, or not?&lt;/code&gt; line, it should appear after tasks have been done, how can we do that? It's very easy, and we'll see it on the next section&lt;br&gt;
&lt;/p&gt;




&lt;p&gt;
  &lt;strong&gt;Async/Await&lt;/strong&gt; 🪄
  &lt;br&gt;
Async/Await in c# is simple. You just have to put the &lt;code&gt;async&lt;/code&gt; word in a method, example:&lt;br&gt;
&lt;code&gt;public void DoSomething()&lt;/code&gt; to &lt;code&gt;public async void DoSomething()&lt;/code&gt;.

&lt;p&gt;Now, this method is able to "await" a &lt;code&gt;Task&lt;/code&gt; until it finishes its work, using the &lt;code&gt;await&lt;/code&gt; word before the task name 🤯&lt;/p&gt;



&lt;p&gt;So, we can modify the example of the previous section to make it an async method:&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%2Fovvtt1pvhrs3ud9f2s6e.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%2Fovvtt1pvhrs3ud9f2s6e.png" alt="Async Await example" width="623" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As we can see, the code is inside of an async method called &lt;code&gt;Main&lt;/code&gt;. Also, we add &lt;code&gt;await task&lt;/code&gt;, this will allow us to control the code flow.&lt;/p&gt;

&lt;p&gt;Now, the task 1 will start with &lt;code&gt;task1.Start()&lt;/code&gt; normally, but the &lt;code&gt;await task1&lt;/code&gt; statement won't allow the code execution to continue until the task 1 has finished. The same behaviour for the task 2.&lt;/p&gt;

&lt;p&gt;The output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Starting all tasks

Hello! this will run async
Starting task 1
Task 1 done
Starting task 2
Task 2 done
------------------------------------
All tasks have finished, or not?
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We have fixed the problems we saw in the previous section.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The line &lt;code&gt;All tasks have finished, or not?&lt;/code&gt; is at the end&lt;/li&gt;
&lt;li&gt;Also, both tasks run as a synchronous operation, but with the advantages of Async/Await features 💪&lt;/li&gt;
&lt;/ul&gt;



&lt;br&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%2Fv6rmoin9hvlf1djjpib7.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%2Fv6rmoin9hvlf1djjpib7.png" alt="Async meme" width="300" height="226"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;The Async/Await and &lt;strong&gt;Task&lt;/strong&gt; class are powerful tools to make concurrent, efficient and legible code without much effort 🚀.&lt;/p&gt;

&lt;p&gt;There are more useful uses of these features, you can leave me a comment if you want more tutorials about C# or something else 👀&lt;/p&gt;

</description>
      <category>csharp</category>
      <category>tutorial</category>
      <category>programming</category>
      <category>dotnet</category>
    </item>
    <item>
      <title>More Git tutorials? Whats next...</title>
      <dc:creator>Jose Antonio Felix </dc:creator>
      <pubDate>Thu, 23 Dec 2021 07:01:13 +0000</pubDate>
      <link>https://dev.to/jafb321/more-git-tutorials-whats-next-5b9j</link>
      <guid>https://dev.to/jafb321/more-git-tutorials-whats-next-5b9j</guid>
      <description>&lt;p&gt;I'll start writting some posts again, what topics should I talk about? 🤔&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Git/Github&lt;/li&gt;
&lt;li&gt;Net core &lt;/li&gt;
&lt;li&gt;Javascript &lt;/li&gt;
&lt;li&gt;curiosities?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Tell me bellow what topics do you want to read 👇&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Learn Github &amp;&amp; Git in an afternoon (Beginners) 🐱‍💻☁️</title>
      <dc:creator>Jose Antonio Felix </dc:creator>
      <pubDate>Tue, 09 Nov 2021 00:40:01 +0000</pubDate>
      <link>https://dev.to/jafb321/learn-github-git-in-an-afternoon-beginners-20de</link>
      <guid>https://dev.to/jafb321/learn-github-git-in-an-afternoon-beginners-20de</guid>
      <description>&lt;p&gt;If you want to have your code available in a cloud git repository (for free) and be able to collaborate with other developers, this tutorial is for you 😎💻. Firstly, we have to know some concepts:&lt;/p&gt;

&lt;p&gt;
  Git
  &lt;br&gt;
If you don't know Git (in basic terms), you need to see the post attached bellow before start this tutorial 👇🏻



  &lt;a href="/jafb321"&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%2Fuser%2Fprofile_image%2F730606%2Fdaa63256-d553-4f15-a12d-ddfb40d2c17e.jpeg" alt="jafb321"&gt;
    
  &lt;/a&gt;
  &lt;a href="/jafb321/learn-git-in-an-afternoon-beginners-200m"&gt;
    
      &lt;h2&gt;Learn Git in an afternoon (Beginners) 😎🐱‍💻&lt;/h2&gt;
      &lt;h3&gt;Jose Antonio Felix  ・ Oct 27 '21&lt;/h3&gt;
      
        &lt;span&gt;#github&lt;/span&gt;
        &lt;span&gt;#git&lt;/span&gt;
        &lt;span&gt;#beginners&lt;/span&gt;
        &lt;span&gt;#code&lt;/span&gt;
      
    
  &lt;/a&gt;

&lt;br&gt;


  Github
  &lt;h3&gt;
  
  
  Github
&lt;/h3&gt;

&lt;p&gt;Is a platform where you can put your code in a cloud &lt;strong&gt;git repository&lt;/strong&gt; completely free and where other developers could see your code and contribute or use it.&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%2Fzvoo4wdp66oqddqh7qio.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%2Fzvoo4wdp66oqddqh7qio.png" alt="Github logo"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Github is &lt;strong&gt;very useful&lt;/strong&gt; and &lt;strong&gt;is used by a lot of developers in the world&lt;/strong&gt;. This tool could allow you to improve as developer and be atractive to software companies.&lt;/p&gt;



&lt;/p&gt;

&lt;h4&gt;
  
  
  First of all
&lt;/h4&gt;

&lt;p&gt;We'll learn the Github (and some Git) basics in this tutorial, if you already know Git fundamentals (repository, commits, log, etc) you're fine, but if you don't, please check the post attached on the previous &lt;strong&gt;"Git"&lt;/strong&gt; tab. Good luck!🤠&lt;/p&gt;

&lt;h2&gt;
  
  
  How to use Github
&lt;/h2&gt;

&lt;p&gt;First, we have few things that we should have/know:&lt;br&gt;
  Pre-requisites
  &lt;ul&gt;
&lt;li&gt;A Github account. &lt;a href="https://github.com/signup" rel="noopener noreferrer"&gt;Create one here&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Git installed on your PC. 
&lt;a href="https://dev.to/jafb321/learn-git-in-an-afternoon-beginners-200m"&gt;Learn Git&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="//github.com/JAFB321"&gt;Follow me on Github&lt;/a&gt; 🐱‍🏍🎯&lt;/li&gt;
&lt;/ul&gt;




&lt;/p&gt;
&lt;p&gt;Now we can start the tutorial properly, next we'll see some sections where we will:&lt;/p&gt;

&lt;p&gt;
  Create a Github repository ☁️🐱‍👓
  &lt;br&gt;
When you're in the Github main page (logged), you'll see this button:

&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%2Fd0txa73l7w4xwdzjodzq.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%2Fd0txa73l7w4xwdzjodzq.png" alt="Github create repository button"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Click on it and you'll see this page:&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%2Fifeoyl56ze0gsldrhvz0.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%2Fifeoyl56ze0gsldrhvz0.png" alt="Github repository create page"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This page is very intuitive, but I'll explain the elements on it:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Repository name&lt;/strong&gt;: Is the name wich the people will see in your repositories list, find a cool and explicative one.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Description&lt;/strong&gt;: Here you'll explain the project in a few words. Maybe you could write the objective or the tech used on it.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Public/Private&lt;/strong&gt;: If you want to show your repo to other developers, set &lt;strong&gt;public&lt;/strong&gt; (recommended). If you want to keep the project only for you, set &lt;strong&gt;private&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The following 3 options can be skipped for now, we just have to click on &lt;strong&gt;create repository&lt;/strong&gt; button:&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%2Fvn3dc3g5julqeal0qxwj.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%2Fvn3dc3g5julqeal0qxwj.png" alt="Github create repository extra options"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, We have done our repository successfully, we'll see something like this:&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%2F19ycwota9r6qaf8fht5b.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%2F19ycwota9r6qaf8fht5b.png" alt="Blank github repository"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Don't worry if you don't understand what that is, we'll see about it in the next steps. For now, you just need to know that you have your first Github repository! 🐱‍👓&lt;br&gt;&lt;/p&gt;

&lt;/p&gt;

&lt;p&gt;
  Configure and push your local repository 🧪
  &lt;br&gt;
We already have our Github repository, but also we need a local Git repository on our pc. If you don't know how to create one, you need to see &lt;a href="https://dev.to/jafb321/learn-git-in-an-afternoon-beginners-200m"&gt;this post&lt;/a&gt;.

&lt;p&gt;Okay, the following is an example local repository with 3 files and few commits:&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%2F9z6y1e5jk1jvfx4cr841.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%2F9z6y1e5jk1jvfx4cr841.png" alt="Basic repository project"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We have to upload or &lt;strong&gt;push&lt;/strong&gt; our local repository to the Github repository, is like sync both. For this we have to do the following:&lt;/p&gt;

&lt;p&gt;Do you remember the github page of our new repository? there we found this commands:&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%2Fkc5lt7xf1e99873wlrn1.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%2Fkc5lt7xf1e99873wlrn1.png" alt="Github repository push commands"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;git remote add origin URL_EXAMPLE&lt;/code&gt; &lt;br&gt;
This git command allow you to add a new &lt;em&gt;remote repository&lt;/em&gt; (URL) to your local repository, that means that you could upload your commits (push), update your local repository (pull) and more. &lt;/p&gt;

&lt;p&gt;In this case, we're adding a new remote &lt;code&gt;URL_EXAMPLE&lt;/code&gt;  with the alias &lt;code&gt;origin&lt;/code&gt;. &lt;/p&gt;

&lt;p&gt;&lt;code&gt;git branch -M main&lt;/code&gt;&lt;br&gt;
This command change the &lt;em&gt;branch&lt;/em&gt; name of our repository to "main". The reason of the change is because by default git names the branch "master" and Github need a branch named "main" (to avoid racial discrimination of &lt;em&gt;master and slave&lt;/em&gt;).&lt;br&gt;
&lt;em&gt;The &lt;strong&gt;branch&lt;/strong&gt; concept needs a more complete explanation to be understood, but for now isn't necesary, just see it like the main name of this repository&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;git push -u origin main&lt;/code&gt;&lt;br&gt;
This is the interesting thing. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The &lt;code&gt;git push&lt;/code&gt; command allow us to &lt;strong&gt;push&lt;/strong&gt; (upload) our commits to the github repo.&lt;/li&gt;
&lt;li&gt;The &lt;code&gt;origin main&lt;/code&gt; indicates that we want to &lt;strong&gt;push&lt;/strong&gt; the changes to the remote named "origin" (setted on the first command) and the branch named "main" (setted on the previous command)&lt;/li&gt;
&lt;li&gt;The &lt;code&gt;-u&lt;/code&gt; is an option to set the &lt;code&gt;origin main&lt;/code&gt; options to default on the future git push/pulls calls.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now we know what this commands are for, so we can type them on the terminal an check the results:&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxb6cmb5qg1i8b1mzqtqt.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%2Fxb6cmb5qg1i8b1mzqtqt.png" alt="First push to github repo"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;(When you enter the last command a window will open and it will ask you to login to Github, just enter your account and password and continue. This will happen only 1 time)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;If you refresh the repository page, you'll see your files and you could check interesting info like the commits made, the languages used on the repo and it's description.&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%2Fr4leoac5olysi7liifka.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%2Fr4leoac5olysi7liifka.png" alt="Github repository"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Finally, we'll have our repository on Github! And the best part is comming! In the next sections you'll learn what things you can do with Git and Github.&lt;/p&gt;



&lt;/p&gt;

&lt;p&gt;
  Push new commits 🚀
  &lt;br&gt;
In the last section we have pushed our local repository to the Github. Now, both repositories have the same commits. But maybe we want to make more local changes and then commit and push it to the Github repo again. Okay, Let's do it.

&lt;p&gt;First, we'll make some changes:&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuu8mkzy06s6wpzeres91.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%2Fuu8mkzy06s6wpzeres91.png" alt="File change"&gt;&lt;/a&gt;&lt;br&gt;
Then, add the changes and commit it:&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Futvqbahian4a0epavnac.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%2Futvqbahian4a0epavnac.png" alt="Add and commit the changes"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, we can get the repository log (history) to see the new commit:&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3hoy58nyx0z3fzypi3kz.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%2F3hoy58nyx0z3fzypi3kz.png" alt="Repository log with new commit"&gt;&lt;/a&gt;&lt;br&gt;
As we can see, the new commit was made successfully. But this commit is only in the local repository, and it need to be pushed to the Github repo. &lt;/p&gt;

&lt;p&gt;For this, we can type one of the following commands:&lt;br&gt;
&lt;code&gt;git push&lt;/code&gt;&lt;br&gt;
or&lt;br&gt;
&lt;code&gt;git push origin main&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Both work fine, the difference is that the second one declare explicitly in wich "remote" and "branch" the commits will be pushed. And the first one just take the &lt;em&gt;default&lt;/em&gt; settings.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;(If you rememeber, this "remote" and "branch" default settings was been setted in the previous section on the &lt;code&gt;git push -u origin main&lt;/code&gt; command, thanks to the &lt;code&gt;-u&lt;/code&gt; option&lt;/em&gt;) 🤯&lt;/p&gt;

&lt;p&gt;When we enter one of this commands, we'll get:&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyc90g3qf19dvd4iomgt9.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%2Fyc90g3qf19dvd4iomgt9.png" alt="New commit pushed successfully message"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, if we go to the Github repository page again and refresh it, we'll see our new commit(s) 😎.&lt;br&gt;&lt;/p&gt;

&lt;/p&gt;

&lt;p&gt;
  Clone a repository 🐑
  &lt;br&gt;
In the last sections, we have created new repositories and push our local commits to github, but, if we want to download a Github repository to our local computer, what do we have to do? Well, this process is called "cloning".

&lt;p&gt;To clone a repository we have to know some things:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;We need the real URL of the repository wich we want to clone. For get it, we have to go to the github repository page and copy this:&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdajvs1dib11hhmtjw53m.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%2Fdajvs1dib11hhmtjw53m.png" alt="Link to clone a github repository"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;We can clone whatever public repository that we want, this means that we can go to the page of any repository of any user and copy it's link and clone it on our pc, this is awesome 🤩 because we are able to download every open source code , for example we can go to the oficial &lt;a href="https://github.com/microsoft/vscode" rel="noopener noreferrer"&gt;Microsoft Visual Studio code repository&lt;/a&gt;, clone it, change it's code and modify it as we want 🧨&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For this example, we'll clone this &lt;a href="https://github.com/JAFB321/devto-learn-github" rel="noopener noreferrer"&gt;Example repository&lt;/a&gt;. So, go and copy it's URL.&lt;/p&gt;

&lt;p&gt;Now, we have to open a terminal and go to the folder where we want to clone the repo:&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frmmos03lecod1ny8b4gl.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%2Frmmos03lecod1ny8b4gl.png" alt="Terminal in a folder"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;In my case, I want to clone it in &lt;code&gt;D:\personal-projects&amp;gt;&lt;/code&gt; folder.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Now we just have to type this command:&lt;br&gt;
&lt;code&gt;git clone &lt;a href="https://github.com/JAFB321/devto-learn-github.git" rel="noopener noreferrer"&gt;https://github.com/JAFB321/devto-learn-github.git&lt;/a&gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;We'll get something like this:&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Findwy5xvtdlm7wfisczi.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%2Findwy5xvtdlm7wfisczi.png" alt="Git repository clone result"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This should have created a new folder called like the repository cloned. In this case, the folder is &lt;code&gt;D:\personal-projects\devto-learn-github&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Then this folder will have all repository files:&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwufbe58st4mey9h0n6oj.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%2Fwufbe58st4mey9h0n6oj.png" alt="Repository folder files"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we can open a terminal on this folder and type &lt;code&gt;git log --oneline&lt;/code&gt; or &lt;code&gt;git status&lt;/code&gt; to check the new local repository:&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq0nn0rnxp7ah2im1o15k.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%2Fq0nn0rnxp7ah2im1o15k.png" alt="Cloned local repository"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we can make changes and commit them as we want. But, can we &lt;strong&gt;push&lt;/strong&gt; this new commits to the original Github repo? 🤔 In this case, you won't be able to do that, Why?🤨 because the repository isn't yours, you don't have permission to push changes to repositories that you aren't the owner (or where you don't have explicit access).&lt;/p&gt;

&lt;p&gt;For get permission and do that, we have 2 options:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Request write access to a Github repository to the owner.&lt;/li&gt;
&lt;li&gt;Make a copy of the Github project on your own Github repositories or &lt;strong&gt;Fork a project&lt;/strong&gt;. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Both options are material for another tutorial, we won't see them in this one.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Obviously, if you clone a repository wich you're the owner (like the repo that you created on the first sections) you are able to push your changes to the Github repo without problem.&lt;/em&gt;&lt;/p&gt;



&lt;/p&gt;

&lt;p&gt;
  Update local repo with last changes 🔁
  &lt;br&gt;
Imagine you have a Github repo, and you clone it on you laptop 💻 and your desktop pc 🖥️. You go to the laptop and do some changes and make a couple of committs, then you &lt;strong&gt;push&lt;/strong&gt; that commits to the Github repo. Now, you have 1 local repository outdated (in your desktop pc).

&lt;p&gt;To update the desktop pc repository, you must &lt;strong&gt;pull&lt;/strong&gt; the new changes from the Github repo. &lt;/p&gt;
&lt;h3&gt;
  
  
  How to solve the problem
&lt;/h3&gt;

&lt;p&gt;To do that, we'll clone one of our Github repo 2 times in our pc.&lt;br&gt;
We'll create 2 folders to clone the repo 1 time on each folder:&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcjxqox6ymzhm7k1y4yr9.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%2Fcjxqox6ymzhm7k1y4yr9.png" alt="Github cloned repos Folders"&gt;&lt;/a&gt;&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%2Fsfo96g4j1hn3ni1gv8sr.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%2Fsfo96g4j1hn3ni1gv8sr.png" alt="Cloning a repo on 2 folders"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We have 2 copies of the same Github repository on our pc. I cloned &lt;a href="https://github.com/JAFB321/devto-learn-github" rel="noopener noreferrer"&gt;my own repository&lt;/a&gt; but you must clone one of your own Github repos (for example the repo you created in first sections).&lt;/p&gt;

&lt;p&gt;Now, we'll make some new commits on the &lt;code&gt;example-repo1&lt;/code&gt;:&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffl7zdxa9wvjl2n2pwwkr.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%2Ffl7zdxa9wvjl2n2pwwkr.png" alt="Commits on example repo 1"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And push them:&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%2Fg4rkifhrgmmtsm0c8w29.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%2Fg4rkifhrgmmtsm0c8w29.png" alt="Push new commits of example repo 1"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Note that you don't need to type &lt;code&gt;-u origin main&lt;/code&gt; because is a cloned repository, and these options were set in the cloning process automaticaly&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Once this is done, we have the Github repository and &lt;code&gt;example-repo1&lt;/code&gt; updated, but &lt;code&gt;example-repo2&lt;/code&gt; is outdated because it doesn't have the 2 last commits.&lt;/p&gt;

&lt;p&gt;To update &lt;code&gt;example-repo2&lt;/code&gt; we need to &lt;strong&gt;pull&lt;/strong&gt; this new commits from Github repo. For that we have to type one of the following commands on the terminal in &lt;code&gt;example-repo2&lt;/code&gt; repo:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;git pull&lt;/code&gt; &lt;br&gt;
or&lt;br&gt;
&lt;code&gt;git pull origin main&lt;/code&gt; &lt;/p&gt;

&lt;p&gt;Both work fine, the difference is the same of the &lt;code&gt;git push&lt;/code&gt; command where &lt;code&gt;origin main&lt;/code&gt; are the "remote" and "branch" explicity defined.&lt;/p&gt;

&lt;p&gt;When we enter one of these comands, we'll get:&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%2F5z4c7md5ck79pei5g51w.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%2F5z4c7md5ck79pei5g51w.png" alt="Git pull new changes from github repo"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The elements inside blue rectangle are the changes summary of the commits downloaded. If we run &lt;code&gt;git log --oneline&lt;/code&gt; we'll see these new commits:&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%2Fxl0b9w9nxkzoqjqgnpxj.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%2Fxl0b9w9nxkzoqjqgnpxj.png" alt="Updated example repo 2 log"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we have the 2 repositories updated and ready to work 😎. But take care about pull and push your commits on 2+ copies of the same cloned repository, because if you make different local commits on each repo separately and try to push them at same time you could get a &lt;em&gt;merge error&lt;/em&gt; 🌪️, but don't worry there is an easy solution for those kinds of problems wich we'll see on future Git tutorials 🐱‍🏍.&lt;br&gt;&lt;/p&gt;

&lt;/p&gt;




&lt;p&gt;&lt;a href="https://ko-fi.com/L3L53EXUA" rel="noopener noreferrer"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.ko-fi.com%2Fcdn%2Fkofi1.png%3Fv%3D3" alt="Buy Me a Coffee at ko-fi.com"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are a lot of useful and interesting things that you can do with Git + Github, in this tutorial you have learned the most &lt;em&gt;important&lt;/em&gt; topics 🥇.&lt;/p&gt;

&lt;p&gt;You have learned a lot but there are still more things to learn wich can help you to be a very efficient developer, contribute to the open source community and grow in the IT world 🤖.&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%2Fr74qfs5joj5e0kmz7jk0.gif" 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%2Fr74qfs5joj5e0kmz7jk0.gif" alt="git meme"&gt;&lt;/a&gt;&lt;br&gt;
(If you want to understand the meme, don't forget follow me to learn about git branches, merge, fork and more 🎈)&lt;/p&gt;

</description>
      <category>github</category>
      <category>git</category>
      <category>beginners</category>
      <category>code</category>
    </item>
    <item>
      <title>Learn Git in an afternoon (Beginners) 😎🐱‍💻</title>
      <dc:creator>Jose Antonio Felix </dc:creator>
      <pubDate>Wed, 27 Oct 2021 02:33:26 +0000</pubDate>
      <link>https://dev.to/jafb321/learn-git-in-an-afternoon-beginners-200m</link>
      <guid>https://dev.to/jafb321/learn-git-in-an-afternoon-beginners-200m</guid>
      <description>&lt;p&gt;Do you want to be able to have the control of your code and have a trustworthy and easy to make history of it?📚 If yes, this quick tutorial &lt;strong&gt;is for you!&lt;/strong&gt;. First of all, we have to know some concepts:&lt;/p&gt;

&lt;p&gt;
  Git
  &lt;h2&gt;
  
  
  Git
&lt;/h2&gt;

&lt;p&gt;Acording to &lt;a href="https://git-scm.com/" rel="noopener noreferrer"&gt;Git scm&lt;/a&gt;. Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.&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%2Fwy9vx19znngvgxhj0kpu.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%2Fwy9vx19znngvgxhj0kpu.png" alt="Git logo"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Git is easy to learn&lt;/strong&gt; and has a tiny footprint with lightning fast performance.&lt;/p&gt;




  Github
  &lt;h2&gt;
  
  
  Github
&lt;/h2&gt;

&lt;p&gt;Is a platform where you can put your code in a cloud &lt;strong&gt;git repository&lt;/strong&gt; completely free and where other developers could see your code and contribute or use it.&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%2Fzvoo4wdp66oqddqh7qio.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%2Fzvoo4wdp66oqddqh7qio.png" alt="Github logo"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Github is &lt;strong&gt;very useful&lt;/strong&gt; and &lt;strong&gt;is used by a lot of developers in the world&lt;/strong&gt;. This tool could allow you to improve as developer and be atractive to software companies.&lt;/p&gt;

&lt;p&gt;We won't learn about Github in this tutorial, but if you want to learn it, check this:&lt;/p&gt;



  &lt;a href="/jafb321"&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%2Fuser%2Fprofile_image%2F730606%2Fdaa63256-d553-4f15-a12d-ddfb40d2c17e.jpeg" alt="jafb321"&gt;
    
  &lt;/a&gt;
  &lt;a href="/jafb321/learn-github-git-in-an-afternoon-beginners-20de"&gt;
    
      &lt;h2&gt;Learn Github &amp;amp;&amp;amp; Git in an afternoon (Beginners) 🐱‍💻☁️&lt;/h2&gt;
      &lt;h3&gt;Jose Antonio Felix  ・ Nov 9 '21&lt;/h3&gt;
      
        &lt;span&gt;#github&lt;/span&gt;
        &lt;span&gt;#git&lt;/span&gt;
        &lt;span&gt;#beginners&lt;/span&gt;
        &lt;span&gt;#code&lt;/span&gt;
      
    
  &lt;/a&gt;





&lt;/p&gt;

&lt;h2&gt;
  
  
  How to install Git
&lt;/h2&gt;

&lt;p&gt;First of all, we need to &lt;a href="https://git-scm.com/" rel="noopener noreferrer"&gt;download Git&lt;/a&gt; and install it in our pc 💻. The install process is easy, you only need to open the installer and leave default options (if you want), then click &lt;em&gt;next, next, install&lt;/em&gt; up to finish the installation&lt;/p&gt;

&lt;h2&gt;
  
  
  How to use Git
&lt;/h2&gt;

&lt;p&gt;Git doesn't has a graphic user interface, so we have to use the terminal (cmd, powershell, bash, etc). Don't worry, the use of git is very intuitive and colorfuly ✨.&lt;/p&gt;

&lt;p&gt;Here are the basics about Git, I'll try to explain each one in the easier way possible&lt;/p&gt;

&lt;p&gt;
  Create a repository 🛠
  &lt;br&gt;
First thing that you need to do, is create a repository, for this you have to &lt;strong&gt;open your terminal and find/create the folder where your project is&lt;/strong&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%2Fag3uqw4q3urucici0axt.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%2Fag3uqw4q3urucici0axt.png" alt="Code folder example"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, we have to type in the terminal this:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;git init&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;You'll get something like this:&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%2Fy5xfh0d7ireyg54423t9.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%2Fy5xfh0d7ireyg54423t9.png" alt="Git init example"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And the job is done! we have our git repository initialized 💪🏻, Go to the later steps.&lt;/p&gt;



&lt;/p&gt;


  Add your files to the repository 🛒
  &lt;p&gt;In Git, you have to specify what files will be added on your repository. To know what files can be added you can type:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;git status&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;And get something like this:&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh0u6cms5xitdj0m8iwwl.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%2Fh0u6cms5xitdj0m8iwwl.png" alt="Git status example"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The command shows the status of all project files, In this case the red ones are untracked files, that means these files will be ignored by git, unless we add them to the repository, for this, we can type:&lt;br&gt;
&lt;code&gt;git add app.js&lt;/code&gt;&lt;br&gt;
and &lt;br&gt;
&lt;code&gt;git add index.html&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;useful tip&lt;/em&gt;&lt;/strong&gt; 🤓&lt;br&gt;
&lt;em&gt;There is a way to add all untracked/modified files to the repo. in one line, you just have to type a dot instead of the file name:&lt;/em&gt;&lt;br&gt;
&lt;code&gt;git add .&lt;/code&gt; &lt;/p&gt;

&lt;p&gt;Now, we have our files added to the project, so if we run a &lt;strong&gt;&lt;em&gt;git status&lt;/em&gt;&lt;/strong&gt; again we'll have:&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%2Fwx1z3jt98d6h9j6b5vaw.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%2Fwx1z3jt98d6h9j6b5vaw.png" alt="git status with added files"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But, what does mean this? Well, as we can see, the green color filenames with "new file:" tag indicates that these files have been added succesfully to the repo. &lt;br&gt;
So, we can start to use these files and make our history of changes and other interesting things. &lt;br&gt;
For that, continue with the next step 👇🏻. &lt;/p&gt;






&lt;p&gt;
  Commit our changes 🧪
  &lt;br&gt;
In the last step, we added the files to the repository. When we add some file, the file is handled by git, but it isn't part of the history of changes, for this we need to "commit" our changes.

&lt;p&gt;For commit the pending changes (in this case, the added files), we can type a command like the following:&lt;br&gt;
&lt;code&gt;git commit -m "Initial files"&lt;/code&gt; &lt;/p&gt;

&lt;p&gt;In this command, the structure is the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;git commit&lt;/code&gt; : Indicates that you'll commit the pending changes (all green files getted on "git status" will be committed).&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;-m "Initial files"&lt;/code&gt; : These are optional, but is strongly recommended put it because the text between quotes is the message, and servers to set the reason/sense/description of the commit. Good commit descriptions allows you (and others) understand better your code 🤔.
This commit message should have the &lt;em&gt;what? and why?&lt;/em&gt; of your code changes.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We type "Inital files" because we are adding the &lt;code&gt;app.js&lt;/code&gt; and &lt;code&gt;index.html&lt;/code&gt; for first time, and its are the first files in our project.&lt;/p&gt;

&lt;p&gt;After entering that last command we'll get:&lt;br&gt;
(When you enter this command first time, git will ask you for an username and email, this is for author register only)&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%2F8j2ifvo0xhcmiuuyvt8y.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%2F8j2ifvo0xhcmiuuyvt8y.png" alt="Commit initial files"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, if we type again &lt;code&gt;git status&lt;/code&gt;, we'll get:&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%2Fwtjkryhg6g1lwtrylujd.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%2Fwtjkryhg6g1lwtrylujd.png" alt="Clean git status"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That means we have done the &lt;strong&gt;commit&lt;/strong&gt; successfully and the repository doesn't have pending changes.&lt;/p&gt;

&lt;p&gt;Now, since we have made our first commit, it means that we can see it in the repository history, for this we just have to type:&lt;br&gt;
&lt;code&gt;git log&lt;/code&gt;&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%2Flzyih1xowipw37vobnil.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%2Flzyih1xowipw37vobnil.png" alt="repository log/history"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There, you could see all commits made in this repository (we'll see &lt;code&gt;git log&lt;/code&gt; command more detailed in the other step).&lt;/p&gt;

&lt;p&gt;Now, we'll modify the file &lt;code&gt;app.js&lt;/code&gt;&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%2Fwm9f6vakx870klamg1qe.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%2Fwm9f6vakx870klamg1qe.png" alt="file modify example"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If we modify some file, git will detect the changes automatically (the file must have been added with &lt;code&gt;git add&lt;/code&gt; before).&lt;/p&gt;

&lt;p&gt;Now, we can type &lt;code&gt;git status&lt;/code&gt; again to see the changes:&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%2Fkqm96y6k755ezkn95rjd.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%2Fkqm96y6k755ezkn95rjd.png" alt="See changed files"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The important thing here, is the red label &lt;code&gt;modified: app.js&lt;/code&gt;. The difference between this result and the first git status is the "modified:" instead of "new:" tag.&lt;/p&gt;

&lt;p&gt;This is beacause we have already added and commited the &lt;code&gt;app.js&lt;/code&gt; file for first time, but now we have made modifications, then we need to add and commit again this changed file 👇🏼 &lt;/p&gt;

&lt;p&gt;Now we can commit this new change typing:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
git add app.js
git commit -m "change welcome text" 

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

&lt;/div&gt;



&lt;p&gt;or&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
git commit app.js -m "change welcome text"

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

&lt;/div&gt;



&lt;p&gt;Both work fine, but if you want to add more files in one commit you should use &lt;code&gt;git add&lt;/code&gt; way.&lt;/p&gt;

&lt;p&gt;Now, we can type &lt;code&gt;git log&lt;/code&gt; again to see the new history:&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%2Fqorp9z6n1hax3s6k9elp.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%2Fqorp9z6n1hax3s6k9elp.png" alt="commits log"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the next step, we'll see more details about git log command, it will be a short section.&lt;/p&gt;



&lt;/p&gt;


  Repository history 📚
  &lt;br&gt;
Here, we'll see some tips for &lt;code&gt;git log&lt;/code&gt; command, and I'll try to explain a couple of important things about it.
&lt;h3&gt;
  
  
  git log structure:
&lt;/h3&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%2Fzl44s6ju2mfsvfj6fhph.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%2Fzl44s6ju2mfsvfj6fhph.png" alt="Git log components"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Red mark&lt;/strong&gt;: Commit ID&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is auto-generated for git and identify a specific commit&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Yellow mark&lt;/strong&gt;: Commit message&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Is the text wich we putted in &lt;code&gt;git commit -m "message"&lt;/code&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Blue mark&lt;/strong&gt;: &lt;em&gt;HEAD -&amp;gt; branch&lt;/em&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This can sound confusing, but indicates in wich "branch" of the repo we are, don't worry, you don't need to know this for now,  will be nice in the future, but not for the basics 🤠&lt;/p&gt;

&lt;p&gt;Useful Tip 💡:&lt;br&gt;
You can type &lt;code&gt;git log --oneline&lt;/code&gt; and you'll get a better and more readable output of your commit history:&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%2Fsn3cmyxiw06r72ceqpwl.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%2Fsn3cmyxiw06r72ceqpwl.png" alt="git log in one line"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we have a more simple log, (note that ID is reduced to it's 7 last characters).&lt;/p&gt;









&lt;p&gt;&lt;a href="https://ko-fi.com/L3L53EXUA" rel="noopener noreferrer"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.ko-fi.com%2Fcdn%2Fkofi1.png%3Fv%3D3" alt="Buy Me a Coffee at ko-fi.com"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are a lot of other interesting things that you can do with git, but this tutorial is more focused on the basics, so feel free to practice and learning more about it!&lt;/p&gt;

&lt;p&gt;I'll write more useful posts about Git, Github and stuff. So follow me if you want to learn 📌&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%2Fiqi2jvqjmule6q5pnguz.gif" 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%2Fiqi2jvqjmule6q5pnguz.gif" alt="Git meme"&gt;&lt;/a&gt;&lt;br&gt;
(If you want to understand the meme, don't forget follow me to learn about git branches, gitignore, merge, remote, github, etc 🎈)&lt;/p&gt;

</description>
      <category>github</category>
      <category>git</category>
      <category>beginners</category>
      <category>code</category>
    </item>
    <item>
      <title>How to expose LocalHost to internet ? Easy way 📶</title>
      <dc:creator>Jose Antonio Felix </dc:creator>
      <pubDate>Sat, 23 Oct 2021 07:31:52 +0000</pubDate>
      <link>https://dev.to/jafb321/how-to-expose-localhost-to-internet-easy-way-iok</link>
      <guid>https://dev.to/jafb321/how-to-expose-localhost-to-internet-easy-way-iok</guid>
      <description>&lt;p&gt;Have you ever wanted to show to your friends your awesome web page, API, etc. But you found that this project is running on localhost? 🤔 &lt;/p&gt;

&lt;p&gt;Well, there is a way to &lt;strong&gt;expose this localhost to the internet&lt;/strong&gt; and get an https URL &lt;strong&gt;easy and for free&lt;/strong&gt; 😎&lt;/p&gt;

&lt;p&gt;For this we can use this app:&lt;/p&gt;

&lt;h3&gt;
  
  
  Ngrok
&lt;/h3&gt;

&lt;p&gt;Ngrok give you the ability to expose a specific port of your localhost and share an http/https URL to your friends.&lt;/p&gt;

&lt;h4&gt;
  
  
  How to use
&lt;/h4&gt;

&lt;p&gt;1.- &lt;a href="https://ngrok.com/download"&gt;Download Ngrok here&lt;/a&gt; and open it&lt;/p&gt;

&lt;p&gt;2.- When you open first time the ngrok.exe it will be installed automaticaly, for use it you have to open a command prompt and type: &lt;br&gt;
&lt;strong&gt;ngrok http &lt;em&gt;PORT&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;in example, if we want to expose a web page and its server is running on port 8080, we will type:&lt;br&gt;
&lt;strong&gt;ngrok http 8080&lt;/strong&gt;&lt;br&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%2Fo8y83vix8ryjdrqfjs9c.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%2Fo8y83vix8ryjdrqfjs9c.png" alt="command prompt ngrok command" width="415" height="59"&gt;&lt;/a&gt;&lt;br&gt;
So when we run this command, we will get this:&lt;br&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%2Fzyjafavvy49cf9q152yk.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%2Fzyjafavvy49cf9q152yk.png" alt="Ngrok running process" width="800" height="204"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That means we can copy this new URL and paste it on our browser and we could access to our page/api/etc from every pc, as if we were on localhost 😎.&lt;/p&gt;

&lt;p&gt;We'll have 2 hours to expose our localhost, but don't worry, when this time get's over, we can re-run ngrok command and it will work again!!&lt;/p&gt;

&lt;p&gt;If you liked this tutorial like it and follow me if you want! Thank you for reading&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
