DEV Community: Code Panda

Javascript Array Method - Sort()

Code Panda — Fri, 20 Dec 2019 12:23:21 +0000

In this blog, we’re going to explore the sort() javascript array method.

What does it do?

It changes the order of elements in your array and returns a new array with the sorted elements without changing your original array.

As always, let’s see an example…

const numbers = [5, 2, 7, 8, 4]

const newArr = numbers.sort()

console.log(newArr) // Output: [ 2, 4, 5, 7, 8 ]

In this example and the next few examples, we’re gonna explore the default behavior of the sort() method.

Here we see that it sorted our array in ascending order because we’re dealing with numbers.

What if we have a string array?

Example:

const animals = ["panda", "dog", "cat", "rabbit", "bear", "penguin", "wolf"]

const newArr = animals.sort()

console.log(newArr)

// Output: [ 'bear', 'cat', 'dog', 'panda', 'penguin', 'rabbit', 'wolf' ]

Here we’ll see that by default, it sorted our string array in alphabetical order.

But, what if we have some strings with uppercase letters?

const animals = ["panda", "dog", "cat", "Rabbit", "bear", "Penguin", "wolf"]

const newArr = animals.sort()

console.log(newArr)

// Output: [ 'Penguin', 'Rabbit', 'bear', 'cat', 'dog', 'panda', 'wolf' ]

Here we’ll see that it sorted the strings with the uppercase letter first, followed by the lowercase strings.

So far so good, now let’s mix together numbers with strings…

const animals = [
  "panda",
  "dog",
  2,
  "cat",
  "Rabbit",
  5,
  "bear",
  "Penguin",
  "wolf",
]

const newArr = animals.sort()

console.log(newArr)

Output: [ 2, 5, 'Penguin', 'Rabbit', 'bear', 'cat', 'dog', 'panda', 'wolf' ]

Now we’ll see that it sorted our array in the following order:

Numbers ( in ascending order )
Strings with an uppercase letter
Lowercase strings

But, what if we have a more complex array? Let’s say an array containing some objects…

const developers = [
  { name: "John", age: 31, title: "Front-end developer", level: "Senior" },
  { name: "Lisa", age: 24, title: "Front-end developer", level: "Mid-senior" },
  { name: "Alex", age: 20, title: "Back-end developer", level: "Junior" },
  {
    name: "Sofia",
    age: 26,
    title: "Full-stack developer",
    level: "Mid-senior",
  },
]

const newArr = developers.sort()

console.log(newArr)

// Output:

// [{
//  name: 'John',
//     age: 31,
//     title: 'Front-end developer',
//     level: 'Senior' },

//   { name: 'Lisa',
//     age: 24,
//     title: 'Front-end developer',
//     level: 'Mid-senior' },

//   { name: 'Alex',
//     age: 20,
//     title: 'Back-end developer',
//     level: 'Junior' },

//   { name: 'Sofia',
//     age: 26,
//     title: 'Full-stack developer',
//     level: 'Mid-senior'
// }]

In this example, we have an array of developer objects.

Notice that by default, it didn’t change the order.

That is because there is a limitation to what it can sort by default.

In this case, we’ll need to specify our own logic and let it know how to sort this array.

We can do this by providing the sort() method a callback function which takes 2 parameters, usually called a and b.

Now, there are a few ways you can write your logic inside that callback function, one is writing a few if statements and focusing primarily on returning either true or false, or, you can write a shorthand version by writing a single line equation and focusing on either returning a positive number, a negative number or a zero. Which also can be looked at as true or false.

In this blog, we’ll focus on the shorthand syntax.

Let’s take a look once more at our developer’s array example and see how we can provide our own logic and sort it by the age of each developer.

const developers = [
  { name: "John", age: 31, title: "Front-end developer", level: "Senior" },
  { name: "Lisa", age: 24, title: "Front-end developer", level: "Mid-senior" },
  { name: "Alex", age: 20, title: "Back-end developer", level: "Junior" },
  {
    name: "Sofia",
    age: 26,
    title: "Full-stack developer",
    level: "Mid-senior",
  },
]

const newArr = developers.sort((a, b) => {
  return a.age - b.age
})

console.log(newArr)

// Output:

// [ { name: 'Alex',
//     age: 20,
//     title: 'Back-end developer',
//     level: 'Junior' },
//
//   { name: 'Lisa',
//     age: 24,
//     title: 'Front-end developer',
//     level: 'Mid-senior' },
//
//   { name: 'Sofia',
//     age: 26,
//     title: 'Full-stack developer',
//     level: 'Mid-senior' },
//
//   { name: 'John',
//     age: 31,
//     title: 'Front-end developer',
//     level: 'Senior' } ]

With this implementation, we managed to sort this array by age in ascending order.

Now let’s break down that callback function.

Parameters: a , b

a = first element in the array, which in this case is John.
b = second element in the array, which in this case is Lisa.

Function body:

As I mentioned earlier, we’ll need to focus on returning a positive number, a negative number or 0.

In the case of:

Positive: b will go before a
Negative: a will go before b
Zero: means they’re both equal so it’ll be treated as the same.

So Let’s take a look at the return value...

const newArr = developers.sort((a, b) => {
  // age of John ( 31 ) - age of Lisa ( 24 ) = 31 - 24 = 7
  return a.age - b.age
})

As specified in the comment, our return value will result in returning a positive value which is 7. That means that b will go before a, and if we take a look again at our array...

const developers = [
  { name: "John", age: 31, title: "Front-end developer", level: "Senior" },
  { name: "Lisa", age: 24, title: "Front-end developer", level: "Mid-senior" },
  { name: "Alex", age: 20, title: "Back-end developer", level: "Junior" },
  {
    name: "Sofia",
    age: 26,
    title: "Full-stack developer",
    level: "Mid-senior",
  },
]

Now, imagine b ( Lisa ) before a ( John ).

Since we’re sorting by age, so 24 before 31.

That will give us an idea of how the sorted array will look like. Since now, after imagining the new order of the first 2 elements, we have a lower number above a bigger number, so we can assume that it’ll sort the lower numbers above the bigger numbers which means in ascending order.

That’s exactly what we have if we look at our output again…

// Output:

// [ { name: 'Alex',
//     age: 20,
//     title: 'Back-end developer',
//     level: 'Junior' },
//
//   { name: 'Lisa',
//     age: 24,
//     title: 'Front-end developer',
//     level: 'Mid-senior' },
//
//   { name: 'Sofia',
//     age: 26,
//     title: 'Full-stack developer',
//     level: 'Mid-senior' },
//
//   { name: 'John',
//     age: 31,
//     title: 'Front-end developer',
//     level: 'Senior' } ]

Now, if we want them in the opposite order ( descending order ) we can just switch to ( b - a ) in instead of ( a - b ) and that will result in a negative return value so, from the rules above, this will result in having a before b.

const newArr = developers.sort((a, b) => {
  // age of Lisa ( 24 ) - age of John ( 31 ) = 24 - 31 = -7
  return b.age - a.age
})

// Rules:

// Positive: b will go before a
// Negative: a will go before b
// Zero: That means they’re both equal to it’ll be treated as the same.

Hopefully, you understood my explanation.

If you didn’t, consider watching my video on this topic.

But...

If you learned something new...

Consider sharing this blog with someone whom you think might benefit from it.

As always, have a great day! 😇

Intro to react-router

Code Panda — Wed, 04 Dec 2019 09:23:02 +0000

What we'll cover:

What is react-router?
Installation & setup
Route component
Inline rendering
Multiple paths
Link & NavLink components
Dynamic routes
Switch component
Redirect component / Protected Routes

Feel free to click and go right to the part you want.

Let's jump right into it! 😄

What is react-router?

React-router is a routing solution designed specifically for React.js. The whole idea is to help you keep your user interface in sync with the URL.

In other words, react-router makes rendering different components when you hit different URLs relatively easy and also gives you control over the navigation of your app.

Installation & setup

Unlike other frameworks/libraries such as Angular which has a routing solution included out of the box, react-router is separate from the react.js library and you'll need to install it whenever needed.

Installation command:

npm install react-router-dom

Setup

As for the setup, it's quite easy. You'd wanna wrap your App component with the BrowserRouter component provided by react-router-dom.

If you're using the create-react-app starter configuration, then head to your index.js in the src folder.

Import:

import { BrowserRouter } from "react-router-dom"

Then, wrap your <App /> with the BrowserRouter like so:

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,

  document.getElementById("root")
)

This will enable routing across your app and will allow you to use the rest of the components provided by react-router-dom.

Now let's explore the first component on our list... 🧐

Route component

This component allows you to render a specific component only when you hit a specific URL. Also, it passes down an object as props containing useful information relevant to the component it's rendering.

We'll be taking a look at this object shortly.

To use the Route component, you'll need to import it:

import { Route } from "react-router-dom"

Route component takes 4 main props:

path - On which route should the component render?
component - Which component should be rendered on that path?
exact - Should the component be rendered exactly on that path? or also on similar paths?
render - Used instead of component prop to render inline components - we'll see an example in a moment

Example

// App.js

import React from "react"
import Nav from "./components/Nav"
import Home from "./components/Home"
import About from "./components/About"

import { Route } from "react-router-dom"

function App() {
  return (
    <div className="App">
      <Nav />
      <Route path="/" exact component={Home} />
      <Route path="/about" exact component={About} />
    </div>
  )
}

export default App

Explanation

<Nav /> : Will always appear on every route since it's not rendered by a <Route /> component.

<Route path="/" exact component={Home} /> : Will only show the Home component on the "/" path which is localhost:3000 in this case.

<Route path="/about" exact component={About} /> : Will only show the About component on the "/about" path which is localhost:3000/about in this case.

If we don't use exact, Home will always appear, even on localhost:3000/about. The reason is "/about" also has a "/" included in it. So we add exact to prevent this behavior.

We mentioned that there are 4 main props and we only covered 3 so far. That brings us to the render prop...

Inline rendering

You might be asking, what if I want to pass down custom props to my components?

Since you can't specify any props to your components using the way we just explored using component prop. React-router has another prop called render.

Let's check out an example...

Example

// App.js

import Home from "./components/Home"
import About from "./components/About"

import { Route } from "react-router-dom"

function App() {
  return (
    <div className="App">
      <Nav />

      <Route
        path="/"
        exact
        render={() => {
          return (
            <div>
              <h1>Home</h1>
              <p>welcome to my homepage</p>
            </div>
          )
        }}
      />

      <Route
        path="/about"
        exact
        render={<About text="This is my text that I want to pass down" />}
      />
    </div>
  )
}

Explanation

Using render instead of component will allow you to either write components inline like in the Home Route and also write a component tag with any props this component is expecting.

Note: Using render will result in React unmounting and mounting the inline component again on every render, instead of just updating the existing component.

Multiple paths

If you wish to render the same component on the several routes, you can by specifying your path as a regular expression string:

<Route path="/(home|users|contact)/" component={Home} />

Link & NavLink components

You don't want your users to go type every route into the URL to go to a page. This is where the Link and NavLink components come in.

You can wrap some text or other components with a Link or a NavLink and specify where it should take the users when they click on it.

Import:

import { Link } from "react-router-dom"

Example

     <Link to=”/contact>Contact</Link>

Explanation

Now when the users click on "Contact" they'll be taken to the specified route in the to="..." prop. This could be used in your Navbar component for example.

If you're using your localhost:3000, then, this link will take you to localhost:3000/contact.

What if you'd like to add a specific style only on the current link that you're currently on?

Use NavLink instead:

Import:

import { NavLink } from "react-router-dom"

Example

<NavLink to="/dashboard" activeClassName="selectedLink">
  Dashboard
</NavLink>

Explanation

By adding " activeClassName="selectedLink" ", now you can add some styles to the class selectedLink and they will be applied only to that link when the user is on the route /dashboard.

Dynamic routes

When a component is routed by the react-router library, each route is provided with an object of information about that route and it's passed down to the component as props.

If you go into the file of a component routed by the <Route /> and add props to the component then console.log(props), you'll get the entire object logged.

Example

export default function Contact(props) {
  console.log(props)

  return (
    <div>
      <h1>Contact component</h1>
    </div>
  )
}

Output

// @ localhost:3000/contact
// Browser console output

Object

    history:
        action: "POP"
        block: ƒ block(prompt)
        createHref: ƒ createHref(location)
        go: ƒ go(n)
        goBack: ƒ goBack()
        goForward: ƒ goForward()
        length: 4
        listen: ƒ listen(listener)
        location: {pathname: "/contact", search: "", hash: "", state: undefined}
        push: ƒ push(path, state)
        replace: ƒ replace(path, state)
        __proto__: Object

    location:
        hash: ""
        pathname: "/contact"
        search: ""
        state: undefined
        __proto__: Object

    match:
        isExact: true
        params: {}
        path: "/contact"
        url: "/contact"

    __proto__: Object
    staticContext: undefined
    __proto__: Object

You'll see all this information specific to the /contact route, which could be accessed in the component to make it more dynamic.

Unfortunately, we won't be exploring all of those in this blog but, you can experiment with them as much as you like. The idea is to let you know they exist and that you can use them. 😊

We'll be exploring the params object located in match.

// @ localhost:3000/contact
// Browser console output

    match:
        isExact: true
        params: {} 👈
        path: "/contact"
        url: "/contact"

Let's set up a route with a param then access it from within the component.

Example

// App.js

function App() {
  return (
    <div className="App">
      <Nav />
      <Route path="/" exact component={Home} />
      <Route path="/contact" exact component={Contact} />
      <Route path="/user/:user" exact component={User} /> // New route
    </div>
  )
}

Explanation

You might be wondering what is that :user, this is called a parameter or param for short.

To put it in simple words, just think of it as a placeholder which it's value could be set only in the URL.

For example: if we visit localhost:3000/user/someone. The param will be set to the string "someone" and the same applies if you add anything in the place of :user.

You simply choose the value by visiting localhost:3000/user/ANYTHING_HERE

Now let's use that value in the user component:

Example

// User.js

export default function User(props) {
  return (
    <div>
      <h1>Hello {props.match.params.user}</h1>
    </div>
  )
}

Explanation

{props.match.params.user} : This is accessing the value of the created ( user param ) since we named it :user.

Now if you visit localhost:3000/user/your_name you'll see Hello your_name, the same applies for any other string.

Please note:

This object is passed down automatically ONLY if you render your component using the component={...} NOT render={...}.

If you wish to pass down the same props using the render={...} prop, you can do it like so:

// App.js

function App() {
  return (
    <div className="App">
      <Nav />
      <Route path="/" exact component={Home} />
      // This way 👇
      <Route path="/contact" exact render={props => <Contact {...props} />} />
    </div>
  )
}

This way you're creating a component which is taking props, then, using object destructuring to pass the props to the components by adding {...props}.

Switch component

The switch component could be used if you want nest routes and have the first matched route to be selected.

Let's see an example...

Import:

import { Switch } from "react-router-dom"

Example

// App.js

function App() {
  return (
    <Switch>
      <Route path="/about" component={About} />
      <Route path="/about/2" component={About} />
      <Route path="/" component={Home} />
    </Switch>
  )
}

Explanation

This will simply go through each route from top to bottom and check if it matches the current route in the URL, then, choose the first match it finds and renders it.

Yes, you can do it by adding exact instead of relying on order.

There might be a special use case in your app where you might need this, so now you know that this option exists.

Your app, your choice.😉

Redirect component / Protected Routes

This component is useful if you have some routes that can't be accessed unless a specific condition is met.

Simply rendering the Redirect component will automatically send you to a specific route.

One of the common use cases of the Redirect component is when you have a login system and we don't want the user to access some routes unless they're logged in.

Import:

import { Redirect } from "react-router-dom"

Example

// App.js

import React, { useState } from "react"
import Nav from "./components/Nav"
import Home from "./components/Home"
import About from "./components/About"
import Dashboard from "./components/Dashboard"

import { Route, Redirect, Link } from "react-router-dom"

function App() {

  // Simple boolean state
  const [loggedin, setLoggedin] = useState(false) // initialized as false

  const handleLogin = () => {
    setLoggedin(true) // Toggle loggedin state to true
  }

  return (
    <div className="App">
      <Nav />
      <Route path="/" exact component={Home} />
      <Route path="/about" exact component={About} />

      {// Simple protected route 👇}
      <Route
        path="/dashboard"
        exact
        render={() => (loggedin ? <Dashboard /> : <Redirect to="/" />)}
      />

      { // Changes the login state to true 👇}
      <button onClick={handleLogin}>Login</button>

      { // Takes you to /dashboard route 👇}
      <Link to="/dashboard">Dashboard</Link>
    </div>
  )
}

export default App

Explanation

Here we have a boolean state representing if the user is logged in or not, we also have a button which changes the state of loggedin to true and we have a link to take us to the /dashboard route.

We're using a ternary operator in the protected route saying:

if loggedin is true, then, render <Dashboard />, otherwise, render a <Redirect to="/" /> component, which immediately redirects the user to the "/" route so that they can't access this route since they're not logged in.

Congratulations! 🎉

With this covered, you now know how to enable and use routing in your react app, as well as learned about the basic components that the react-router library provides.

Learned something new?

Share this post with someone who can benefit from too.😄

Have a great day! 😇

Learn Sass

Code Panda — Sun, 24 Nov 2019 10:08:58 +0000

What we'll cover:

What is sass?
Why use sass over plain CSS?
How to use Sass?
Features.

Let's get started! 😄

What is sass?

Sass, short for Syntactically Awesome Style Sheets is a CSS preprocessor which adds upon normal CSS and allows you to have features like variables, nested properties, and mixins. We will explore all these and more in a moment.

But wait, what is a preprocessor to begin with?

A preprocessor is a scripting language that simply allows you to write your code in one language then, compile/translate your code to another language.

In this case, you write Sass code then compile it to normal CSS then use that complied CSS in your website NOT the Sass code.

You're probably asking, why even bother with this process? That brings us to the next question...

Why use sass over plain css?

The reason is simple, more features. Sass gives you the ability to use all the features of CSS + some more great stuff which will at times make your life easier, help you write DRY code and make your app more scalable and easier to maintain.

How to use Sass?

Since sass is a preprocessor, you'll need a sass compiler installed which will take your sass file, compile it to CSS and write that CSS into a CSS file. Some of the ways you can achieve this are by installing an extension in your text editor such as vscode's Live Sass Compiler or by installing the Sass npm package.

Syntax

There are 2 ways of writing sass code and each has its own file extension. one .sass and the other is .scss.

let's explore those...

The .sass or "The Indented Syntax" is written like so:

nav
    width: 100%
    padding: 10px
    border: 1px solid

No semicolons nor brackets and uses indentation instead.

The other is .scss and it's written like so:

nav {
  width: 100%;
  padding: 10px;
  border: 1px solid;
}

With this syntax, you'll feel right at home since it's so similar to the way you write CSS.

The .css way is more commonly used and it'll be the one we'll be exploring.

All the following also applies for .sass but just with the differences mentioned above. 😊

Features

Let's now go through the most used features of sass.

Variables:

Variables are simply key-value pares that you can declare once, then apply them anywhere throughout your styles.

They help you stay consistent, write dry code, scale and maintain your styles easier.

You declare a variable in sass by writing a \$ followed by name: value

Example:

// Declaration
$primary-color: #afef9f;
$secondary-color: #aaa;
$accent-color: #efee7f;

// Usage
nav {
  background-color: $primary-color;
  box-shadow: 10px 10px 23px -9px $secondary-color;
}

.btn {
  background-color: $accent-color;
}

Now if you decide you wanna go with different colors, instead of changing the colors one by one, you just change the variable's value and the change will be applied anywhere you applied the variable.

Nesting:

With nesting, you can nest many CSS selectors inside each other, let's see an example...

Example:

nav {
  width: 100%; // Will be applied to all nav elements

  .logo {
    height: 30px; // Will be applied to any .logo class in a nav element
  }

  ul {
    margin: 10px; // Will be applied to any ul element in a nav element

    li {
      font-size: 14px; // Will be applied to li in a ul in a nav
    }
  }
}

Output:

nav {
  width: 100%;
}

nav .logo {
  height: 30px;
}

nav ul {
  margin: 10px;
}

nav ul li {
  font-size: 14px;
}

You can also use pseudo-selectors like :hover with the symbol & like so:

nav {
  width: 100%;

  .logo {
    height: 30px;

    &:hover {
      // Whatever you put in here will be applied when you hover on the logo
    }
  }
}

Also, you can use & followed by any name and sass will join them like so:

.logo {
  height: 30px;

  &_small {
    height: 20px; // Will be added to .logo_small
  }
}

Output:

.logo {
  height: 30px;
}

.logo_small {
  height: 20px;
}

This feature allows you to write less code and make your styles more organized and easier to group.

Imports:

Imports allow you to separate your scss code into other .scss files and then import them in any other .scss file and they'll be applied to that file.

Let's say you have one .scss file which has some variables and some header styles like so:

index.scss

$primary-color: #e32453;
$secondary-color: #fff91f;
$white-color: #eee;
$black-color: #002222;

header {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

You can put them each in a separate file then import them in a single file, the naming convention of reusable scss files or "Partials" is adding a "_" before the name.

Let's separate this file into two:

_variables.scss

$primary-color: #e32453;
$secondary-color: #fff91f;
$white-color: #eee;
$black-color: #002222;

_header.scss

header {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Now we can import these two files into the index.scss by writing @import followed by the path of the file we want to import:

index.scss

@import "./header";
@import "./variables";

Notice that we didn't include the "_" nor the ".scss" extension because sass already knows that these files are partials.

This will apply whatever is in _header.scss and _variables.scss in index.scss.

Mixins:

Mixins allow you to have code snippets that can take arguments, each mixin has a name and contains some styles which could be reused within other selectors.

The way you can decalre a mixin is by writing: @mixin name { ... } OR @mixin name( arguments.. ) { ... }, then, @include name() to use it.

let's explore an example.

Example: Without arguments

@mixin centerAlign {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header {
  @include centerAlign(); // Will add all the properties in centerAlign

  font-size: 30px;
  text-decoration: underline;
  font-weight: 500;
}

Example: With arguments

@mixin centerAlign($direction) {
  display: flex;
  flex-direction: $direction;
  justify-content: center;
  align-items: center;
}

.header {
  @include centerAlign(row); // Will set flex-direction to row

  font-size: 30px;
  text-decoration: underline;
  font-weight: 500;
}

.header_second {
  @include centerAlign(column); // Will set flex-direction to column

  font-size: 30px;
  text-decoration: underline;
  font-weight: 500;
}

You can also use @content in case you want to add on to the code...

Example: With @content

@mixin custom($screen) {
  @media (max-width: $screen+"px") {
    @content; // the content you add will be placed here
  }
}

.header {
  font-size: 30px;
  text-decoration: underline;
  font-weight: 500;

  @include custom(700) {
    font-size: 20px; // will decrease your font-size when you hit 700px screen width and down
  }
}

Output:

.header {
  font-size: 30px;
  text-decoration: underline;
  font-weight: 500;
}

@media (max-width: 700px) {
  .header {
    font-size: 20px;
  }
}

Extend/Inheritance

You can inherit properties from another place by writing @extend, followed by what you want to inherit like so:

Example:

.item {
  margin: 20px 10px;
  padding: 10px 8px;
  font-size: 12px;
}

ul {
  li {
    @extend .item; // Will inherit all the properties in .item

    font-weight: 300;
    line-height: 10px;
  }
}

Operators

The last commonly used feature we're going to explore is mathematical operators. When using sass, you can use basic math operators such as: + , - , * , / and %.

Let's see those in action...

Example:

.item {
  margin: 20px % 3; // The remainder of how many times 3 can go into 20
  font-size: 6px * 3;
  width: 100% - 20%;
}

Output:

.item {
  margin: 2px;
  font-size: 18px;
  width: 80%;
}

Now you're familiar with what is sass, how it's used and all the most used featured of sass. To learn more, visit the official sass documentation.

Learned something new?

Share this post with a person whom you think can benefit from too and consider following us to get informed every time we publish a new post. 😊

Have a great day! 😄

Intro to Git

Code Panda — Sat, 23 Nov 2019 18:30:59 +0000

What we'll cover:

What is git?
Why should you use git?
Basic Git workflow and commands

What is git?

Git is a free open-source version control system that allows you to keep track of your code by creating multiple versions of your code-base and storing it all in a central place either on your computer, on the cloud or both. This place is called a repository or "repo" where you to store all your modifications and revert to them at any time.

Why should you use git?

There are many benefits in using a version control system such as collaboration, storing versions of your app and backing up your code.

Let's talk about some of the benefits that git offers.

1. Ability to collaborate with others.

Git makes it easy to work in teams and allows all the team members to access and contribute to the same project and also keeps track of who did what and when. As soon as everyone is finished with his/her task, they can merge their changes in one place and manage conflicts in their code if there are any.

2. Backup and recovery.

As mentioned before, git allows you to have versions of your code stored for future reference, which means in case of an accident, you can immediately revert to your code-base stored locally or on the cloud and retrieve all lost code.

For example, if your app fails for any reason and you can't find the bug to fix it, you can go back to any of the working versions with a simple command and start over again. We will explore all the basic commands up next.

Before we continue, here are the recommended command-line interfaces based on your operating system. Of course, you can follow along with any command-line interface. 😊

MAC: Use the keyboard shortcut command + space and type "terminal" and navigate to the folder you wish to use git.

Windows: Download & install Git bash on your system then run it and navigate to the folder you wish to use git.

Basic Git workflow and commands

To use git, you first need to install it on your computer by visiting git's download page and downloading & installing it.

After the installation process is complete, open your command-line interface and type:

git --version

If you see a version, that means that you successfully installed git on your system.

Now, let's go through the main stages of initializing, staging, committing and maintaining.

1. Initialization.

You'll need to configure your name and e-mail for git to keep track of who did what.

You can configure your name globally on your machine by typing:

git config --global user.name "Your__Name__Here"

Now check if it's set by typing:

git config --global user.name

Now let's configure your email by:

git config --global user.email "Your__E-mail__Here"

You can check it by:

git config --global user.email

Note: You can also configure your info in each repo separately by typing the same commands but removing the --global flag. What --global does is that it set your info all over your machine, not in a specific repo.

Now, let's start with the very first step in using version control, which is initializing git your project by opening your command-line interface and navigate to the base directory of your project where all the files & folders of your project are located and enter:

git init

This will create a new local git repository in your project directory.

Now that you initialized git in your project, you'll want to have a remote repository on the cloud to interact with and save your project files.

There are many repository hosting services such as Github, GitLab and Bitbucket. In this blog, we're going to be using Github to host our remote repository, other than your local repository, there is a remote repository that you interact with which has all your code stored in the cloud.

Go ahead and visit Githubs page and create an account. it's free for public repositories.

Now that you have an account, it's a good practice to set up Github with an SSH key which will add an extra layer of protection.

Now let's start with the setup process.

First, we'll need to generate a pair of SSH keys, a public key, which is the key we can provide to services and a secret key which will be used for validating your connection.

Now, open your command-line and enter:

ssh-keygen -t rsa -b 4096 -C "YOUR__EMAIL__HERE"

Then, it's gonna say something like ( Enter file in which to save the key (/Users/YOUR__USERNAME/.ssh/id_rsa)" ), you don't wanna change that, just click the Enter when it'll ask you for a passphrase twice where you type a password for your key, please do so.

Note: when you type your passphrase it'll be invisible so just type it and click enter.

Then you see something like:

Your identification has been saved in /Users/YOUR__USERNAME/.ssh/id_rsa.
Your public key has been saved in /Users/YOUR__USERNAME/.ssh/id_rsa.pub.
The key fingerprint is:
--SOME__STUFF--

That means that you successfully generated an SSH key. Now, the next step is adding this generated SSH key to an SSH agent.

Now enter:

eval "$(ssh-agent -s)"

Your output will be like:

Agent pid SOME__NUMBER

This will make sure that your SSH-agent is running.

Next enter:

ssh-add -K ~/.ssh/id_rsa

Then you'll be asked for your passphrase, please enter it.

Next, let's copy the public SSH key to the clipboard by entering:

pbcopy < ~/.ssh/id_rsa.pub

Let's take that copied SSH key and head to your account on Github.

Head to the top-right profile icon and select "Settings".
Select "SSH and GPG keys" on the left menu.
Click "Add SSH key" button.

Add a title to your key to identify it for example "Work laptop" then paste the copied key into the "Key"
field

Note: the website's layout might change depending on the time you read this.

After you have created your repo, you'll get an instruction page similar to this:

This page is just Github trying to help out by giving you some instructions and commands to get hookup your local repo to the remote one.

By default, HTTPS will be selected, since we configured your SSH key, it's better to use SSH so go ahead and select SSH

Now, we'll need the URL of the remote repo on Github to interact with it.

You can find your URL here:

Now, let's connect your local repo to the remote one by typing:

git remote add origin YOUR__URL

This command adds your remote repo and gives it the name origin. The name is completely up to you but it's a good practice to name it origin.

Now that we initialized and configured git, let's dive into the next step.

2. Staging

In this step, you'll take what is called a 'snapshot' for your app and then add it to a place called the "staging area". The whole idea is to take a snapshot of your current app then save it for later if you need to go back to it.

To achieve this, you'll need to add the files that you need to be snapshot to the staging area so that they could be tracked by git.

First, Let's check the files that are not tracked by git by typing the command:

git status

This will list all untracked files and mark them in red.

Now to add them you can type:

git add FILE__NAMES

OR if you'd like to add all files then:

git add .

Let's check the tracked files one more time:

git status

You'll see that all the files you added are now green which means that they are tracked and are ready to be saved, which brings us to the next step.

3. Committing

After taking a snapshot of your files, you'll want to move the snapshot from staging to your actual local repository. This step will allow you to do this. After this, you have the option to continue working locally or send you current snapshots to the remote repo.

Let's now save the snapshots to your local repo by:

git commit -m "YOUR__DESCRIPTION"

This allows you to save your snapshot to your local repo and you'll have to pass a message along with each snapshot by providing the flag -m followed by a description of what it contains.

The next step is to push/send your snapshots out to the remote repo by typing:

git push -u origin master

The -u is short for --set-upstream and it sets the default remote branch. Now, you can just write git push next time not git push -u origin master. 😊

Now you can go back to the GitHub remote repo where there were instructions and refresh the page.

TADAAA! now all the files that you added are now live on your remote repo and you can revert to them anytime.

Keep in mind that now your code is public, so anyone can download or clone it but now one can change your code without your permission.

If you'd like to clone other peoples repo you'll have to do the following:

Visit the repo you wish to clone.
Click "Clone or download".

Download -> will just download the whole project as a ZIP file

Clone -> you'll need to use the command-line interface and go to the folder when you wish to save this project and type:

git clone "PROJECTS__URL__HERE"

This will download a folder containing all the files.

Now let's jump into the next stage.

4. Maintaining

In this step, you'll just repeat some of the steps above whenever you add a new code to your code-base.

Let's go through them:

git add . to add and update all the modified files.
git commit -m "YOUR_DESCRIPTION" . to save the new snapshots to your local repo
git push to send your new snapshots to the remote repo.

This was is the basic use of version control and commands.

Let's now talk about branches.

Branches

you can think of branches as copies of one code-base usually the master branch.

Let's say you have 1 branch called ( master ) and you're working only it and you have a bug-free app that is running perfectly fine. You can create another branch which the exact code which is in ( master ) that you're coming from but copied and put in another place, let's call it ( develop ) and now the branches are separate and whatever you do to ( develop ) won't affect the ( master ).

That way you can keep on developing your app on ( develop ) branch and keep the working copy which is ( master ) untouched and then when you're satisfied with your ( develop ) branch and everything is working fine you can "Merge" the 2 together and now have the ( master ) the same as ( develop ) branch and so on.

Let's explore some of the basic commands for branching.

git branch -a

Lists all your branches. Your current branch will have an asterisk "*"

git branch BRANCH__NAME

Creates a new branch with that name.

git branch -d BRANCH__NAME

Deletes branch with that name.

git checkout -b BRANCH__NAME

Create a new branch and switches to it

git checkout BRANCH__NAME

Switches to another branch

git merge BRANCH__NAME

Merges a branch into your current

git merge FROM_BRANCH__NAME TO_BRANCH__NAME

Merges a specified branch into another specified branch

That's all when it comes to the basic usage of git.😊

I hope you learned something new, if you did, please share this post with a person that you think can benefit from.😄

Have a great day!