Forem: Michael Sayapin

JavaScript - Array.concat()

Michael Sayapin — Sat, 07 Nov 2020 15:49:30 +0000

Today I will talk about the Array.concat() method in JavaScript.

The concat() method returns a new array, build of this array joined with other arrays and/or values.

let's take a look at its syntax:

const newArray = oldArray.concat(optinalValues);

oldArray - The array we call the concat method on.
concat() - The method receives 0 or more parameters.
optionalValues - An optional value to pass to the method, it can be an array, a primitive data type, a function, or an object.

An alternative syntax:

const newArray = [].concat(oldArray, optionalValues);

Personally, I like the alternative syntax, because it is more readable and easier for me to understand that we create a new array from all the elements of the passed parameters, and not adding new elements to the old array.

Examples:

1) Passing Data Types:

The method copies the data types into the new array.

Passing a number

const oldArray = [1, 2, 3];
const number = 5;

const newArray = oldArray.concat(number);
// result => [1, 2, 3, 5]

Passing a string

const oldArray = [1, 2, 3];
const string = 'Web Cat';

const newArray = oldArray.concat(string);
// result => [1, 2, 3, 'Web Cat']

Passing a boolean

const oldArray = [1, 2, 3];
const flag = true;

const newArray = oldArray.concat(flag);
// result => [1, 2, 3, true]

Passing undefined

const oldArray = [1, 2, 3];
const variable = undefined;

const newArray = oldArray.concat(variable);
// result => [1, 2, 3, undefined]

Passing null

const oldArray = [1, 2, 3];
const emptyObj = null;

const newArray = oldArray.concat(emptyObj);
// result => [1, 2, 3, null]

2) Passing Arrays

The method creates a new array consisting of the elements in the array on which it is called and each of the elements of the passing array.

Passing a different array

const oldArray = [1, 2, 3];
const anotherArray = [4, 5, 6];

const newArray = oldArray.concat(anotherArray);
// result => [1, 2, 3, 4, 5, 6]

Passing itself

const oldArray = [1, 2, 3];

const newArray = oldArray.concat(oldArray);
// result => [1, 2, 3, 1, 2, 3]

3) Passing Structural Types

The method makes a shallow copy of structural data types into the new array. It means that if we change the original parameter, it will change it in the new array as well.

Passing a nested array

const oldArray = [1, 2, 3];
const nestedArray = [4, 5, 6, [7]];

const newArray = oldArray.concat(nestedArray);
// Result => [1, 2, 3, 4, 5, 6, [7]]

nestedArray[3].push(6);
// Result => [1, 2, 3, 4, 5, 6, [7, 6]]

Passing an object

const oldArray = [1, 2, 3];
const obj = {
  name: 'Mike',
  nickname: 'Web Cat'
};

const newArray = oldArray.concat(obj);
// result => [1, 2, 3, { name: 'Mike', nickname: 'Web Cat' }]

obj.age = 25;
// result => [1, 2, 3, { 
     age: 25, 
     name: 'Mike',
     nickname: 'Web Cat'
   }]

4) Passing functions

The method takes the function and pushed it into the array as if it was a regular data type.

Passing a function declaration

const oldArray = [1, 2, 3];
function myFunc() {
    return this[0] + this[1];
}

const newArray = oldArray.concat(myFunc);
// result => [1, 2, 3, function myFunc() {
    return this[0] + this[1];
}]

In case we pass a function declaration to the concat() method, the function will get the context of the array.

Passing an arrow function

const oldArray = [1, 2, 3];
const myFunc = x => x;

const newArray = oldArray.concat(myFunc);
// result => [1, 2, 3, x => x]

In case we pass an arrow function to the concat() method, the function will not get a new context.

5) Omitting parameters

If we call the function without parameters, it will create a shallow copy of the original array.

Passing no parameters

const oldArray = [1, 2, 3];

const newArray = oldArray.concat();
// result => [1, 2, 3]

6) Passing multiple parameters

When we pass multiple parameters to the method, it makes a new array with all its elements in the same order they got passed to the method.

Passing no parameters

const oldArray = [1, 2, 3];
const val1 = 4;
const val2 = '5';
const val3 = {
    value: 'sixth',
}
const val4 = [[7]];

const newArray = oldArray.concat(val1, val2, val3, val4);
// result => [1, 2, 3, 4, "5", {
  value: "sixth"
}, [7]]

This is only one part of a series of posts about the different methods in JavaScript.
Stay tuned for more posts weekly :D

CSS - Position

Michael Sayapin — Wed, 02 Sep 2020 06:12:27 +0000

The position CSS property is one of the most important layout properties to know as a beginner web developer. With it, we can control the position and the "place" of the elements in the natural flow of the document, and even it's behavior. The different position values control the behavior of the element in the page, and the top, right, bottom, and left control the location of the element. In addition to them, the z-index property can help us to create a stack of elements, meaning "behind" and "over" each other.

There are 4 types of positions:
Static elements: These are all the HTML elements by default, we can say that a static element, is an element that is not positioned.
Relative positioned: These are elements that are positioned as relative, meaning they are still part of the natural document flow, and they take up space, but they can be moved to some other place with the use of top, bottom, left, right, and z-index properties.
Absolute positioned: These are the elements that are positioned as absolute or as fixed. These elements are taken out of the natural flow, which means they do not take space in the document and are positioned by the top, right, bottom, right, and the z-index properties.
Sticky positioned: These are the elements that are positioned as sticky. These elements are a combination of relative and fixed positions. At first, it gets treated as a relative element, until it gets to a certain threshold in the parent container, from that point it will behave as a fixed element and will be stuck to the screen until we move past the parent container element.

position: static

This is the default value of every HTML element, it is said that statically positioned elements are not positioned. A static element is not affected by the top, right, bottom, left, and z-index properties.

position: relative

This property allows us to take the element and offset it with the top, bottom, left, and right properties without affecting other elements. The element is not taken out of the natural flow of the document, so it takes the space in it as if it was static.

position: absolute

This property will take the element completely out of the document natural flow, so even the space that the element should have in the flow will be taken by other elements.
The final position of the element will be determined by the top, left, right, and bottom properties.
The position of the element will be relative to the closest positioned ancestor, and if not found any, it will be relative to the HTML root element.

position: sticky

This property will behave like the relative property, it means it has its own place in the natural flow in the document. To make it behave like a sticky element, we have to add also the threshold in which it will behave like it, we do is using the top and bottom properties for parent elements with a scroll in the y-axis and the left and right properties for the parent element that has a scroll in the x-axis. This property will make the element stick to that place in the screen as long as the parent element is visible, or we reached the threshold we declared.

Notes:
The sticky property is not supported by IE at all, and it has many other conditions that may cause it not to work, so please be aware of the limitations when using this property.

position: fixed

This property acts like the absolute, it takes the element out of the natural flow, and its space gets taken by other elements. This property lets us place an element on a fixed place on the screen, the difference between fixed and absolute is that in fixed, the element stays in the same place even if the user scrolls.
The position of the element will be relative to the container which is established by the viewport.

The directional properties

The directional properties can be categories into 3 groups, horizontal properties - left and right, vertical properties - top and bottom, and the depth property - z-index.

top property

The top property lets us specify the vertical position of the positioned element, from the top perspective. It has different effects based on the position value of the element.

static: The top property does not affect the element.
relative: It controls how much to move the element down (away from the top) relative to the elements' original location.
absolute and fixed: It controls the distance between the element's top edge and the top edge of the containing block.
sticky: It sets the point for the element where it should become sticky in it's containing block.

bottom property

The bottom property lets us specify the vertical position of the positioned element, from the bottom perspective. It has different effects based on the position value of the element.

static: The bottom property does not affect the element.
relative: It controls how much to move the element up (away from the bottom) relative to the elements' original location.
absolute and fixed: It controls the distance between the element's bottom edge and the bottom edge of the containing block.
sticky: It sets the point for the element where it should become sticky in it's containing block.

Notes:
In case both top and bottom properties are used, the position property is set to absolute or fixed and the height of the element is not specified, both the top and bottom properties will be used to stretch the element vertically.
In any other case, the top property will be used to place the element and the bottom property will be ignored.

right property

The right property lets us specify the horizontal position of the positioned element, from the right perspective. It has different effects based on the position value of the element.

static: The right property does not affect the element.
relative: It controls how much to move the element left (away from the right) relative to the elements' original location.
absolute and fixed: It controls the distance between the element's right edge and the right edge of the containing block.
sticky: It sets the point for the element where it should become sticky in it's containing block.

left property

The left property lets us specify the vertical position of the positioned element, from the top perspective. It has different effects based on the position value of the element.

static: The left property has no effect on the element.
relative: It controls how much to move the element right (away from the left) relative to the elements' original location.
absolute and fixed: It controls the distance between the element's left edge and the left edge of the containing block.
sticky: It sets the point for the element where it should become sticky in it's containing block.

Notes:

In case both left and right properties are used, and the width of the element is not specified, both the left and right properties will be used to stretch the element horizontally.
In any other case, the left property will be used if the text direction is LtR and if the text direction is RtL the right property will be used.

Values

The values for the top, bottom, left and right properties are all the same and have the same effect.

length: Can be negative, positive, or null. Usually, the length is a number with a length unit, such as px, rem, vh, etc'
percentage: In the case of the top and bottom properties, it represents the percentage of the containing block's height. In the case of the right and left properties, it represents the percentage of the containing block's width.
auto: This is the default value for all elements. It behaves differently between relative and absolute positioned elements.
- In relatively positioned elements, if the property is auto it does not affect the element, and the element is not moved at all.
- In absolute positioned elements, each property controls the position of the element, if one of them is set to auto, then the other will decide on the position, if both elements are set to auto, the element will not be moved in that axis.

z-index property

The z-index property controls the z-axis position of a positioned element and its descendants. The higher the value the more in front the element will be, and will overlap elements with lower z-index values.

This property affects the positioned element in two ways:

The z-axis position in its stacking context, meaning if it will overlap other elements or be overlapped by other elements.
Establishes a new stacking context inside the element for its descendant elements.

Values

The z-index can receive two types of values, 'auto' and an integer.

auto: This is the default value for all the elements. This will give the element the z-index value of the parent element.
an integer: This will create a stacking context inside the element and its stack level will be '0' compared to its descendants. It will also determine the elements stack level in its own stack context.

This concludes my article that explains the position property, and the top, bottom, left, right ,and the z-index properties and their different values.

Hope you like it, and stay tuned for my next article soon!

CSS - Float and Clear

Michael Sayapin — Tue, 25 Aug 2020 22:41:26 +0000

Float Property

The original purpose of the float was to take a block type element out of the natural flow but still related to the other elements and float it to the right or to the left of the parent container so that other inline elements or text can wrap around it.

In time people started using float as a way to build layouts, but as today there are technologies like flexbox, grid, and etc', so the use of floats is almost gone, apart from small tweaks here and there inside other elements.

The float property takes the element out of the natural flow of the page and floats it to the left or right based on the value, but it still considers the flow of other elements. Unlike the position absolute which takes the element completely out of the flow.

There are a couple of values that we can use in the float property, the standard values are none, left and, right. In the Firefox browser (as of the time of writing of this article) there are two more additional values: the inline-end, and the inline-start values.

float: none

This is the default value for every element for the float property. Just as the value itself implies, the element is not under the influence of the float property and behaves as it "naturally" does.

float: left

This will take the element and "float" it to the leftmost side of the parent container until it reaches the padding or border, if there are any other elements that also float right next to our element, they will be "floating" next to each other.

float: right

This will take the element and "float" it to the rightmost side of the parent container, and the same as the float: left, if any other element is also floated to the right it will be aligned next to it.

float: inline-start

This will push the element to the start of the typing direction if the text in the container is written Left-to-Right, so the element will float to the left. If the text is written Right-to-Left the element will float to the right.

float: inline-end

This will push the element to the end of the typing direction if the text in the container is written Left-to-Right, so the element will float to the right. If the text is written Right-to-Left the element will float to the left.

Clear property

As we learned the float property takes the element out of the natural flow of the document, but still gives the inline elements and text wrap around it, but what happens to the other block elements around it?

The block elements around a floated elements take the original place of the floated element and most likely to get "behind" the floated element, in order to deal with this we can use the clear CSS property.

The clear property dictates where float elements can be around our element. The standard values that can be used are none, left, right, and both, in addition to them, in the firefox browser (as of the time of writing of this article) there are two more additional values: the inline-start, and the inline-end values.

clear: none

This is the default value, it allows float elements to be from both sides of our element.

clear: left

This will clear all the floats that are on the left side of our element, or in other words, this will push our element's top edge under the bottom edge of the lowest floated element from the left.

clear: right

This will clear all the floats that are on the right side of our element, or in other words, this will push our element's top edge under the bottom edge of a lowest floated element from the right.

clear: both

This will not allow any float elements to be on both sides of our element, so it will push our element under the last and lowermost float in the same container.

clear: inline-start

This will not allow any float elements to the side of our element based on the text direction in the parent. If the text direction is LtR the clear will get the value "left" if the text direction is RtL the clear will get the value "right".

clear: inline-end

This will not allow any float elements to the side of our element based on the text direction in the parent. If the text direction is LtR the clear will get the value "right" if the text direction is RtL the clear will get the value "left".

This concludes my article that explains the float and clear properties and their different values.

Hope you like it, and stay tuned for my next article soon!

CSS - Basic Selectors

Michael Sayapin — Thu, 13 Aug 2020 11:03:25 +0000

CSS Selectors

Before we start talking about the different types of selectors, we need to understand what they are, and why do we even need them.
CSS is a language that dictates how elements will be rendered in the browser, for us to connect between the rendering declarations (all the CSS properties) and each element in the DOM tree, we use CSS selectors.
Selectors are patterns that the browser matches against elements in the DOM tree and looks for a node element or a set of node elements matching that pattern, selects them (hence the name selectors), and defines their rendering, or in simple words, defines their appearance on the browser screen.

Selector Structure

A Selector is a pattern of elements in the DOM tree. It refers to the simple selector, compound selector, complex selector, or a selector list. When we create a selector we create a condition, then the browser is looking for an element that meets that condition and selects it.
The Subject of a Selector is the element that meets all the conditions of the selector, from the DOM tree. An element matches a selector only if the Selector accurately describes that element. Two elements match a combinator when the condition of the relationship between them is met.
A Simple Selector is a single pattern on an element. It refers to type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-selectors.
A Compound Selector is a set of simple selectors that are not separated by a combinator, and create a "list" of conditions to an element.
A Combinator is a condition, like a selector, but it checks the relationship between two elements and not the element itself. It refers to the descendant combinator ( ), the child combinator ( > ), the next-sibling combinator ( + ) and the subsequent-sibling combinator ( ~ ).
A Complex Selector is a set of compound selectors separated by combinators. This selector creates a set of conditions on a set of elements.
A Selector List is a list of selectors that separated by a comma, they have no connection between each other, other than sharing the same properties.

Selector Types

In this article I will go over the simple selectors CSS has to offer, pseudo-class also considered simple selectors, but because of their importance, I will write about them in their own article and exclude them from this one.
We can divide the selectors to Elemental Selectors and Attribute Selectors.

Elemental Selectors

Elemental selectors are the type selector and the universal selector, they are looking at the element type of an element.

Type Selector

Type selectors, often called tag name or element selectors, are the most basic selector type. The selector looks for at least one instance of that element in the DOM tree.

/* ---------- Selector Syntax ---------- */
 Element {
     property: value;
 }

/* ---------- Selector Examples ---------- */
/* Targets all <h3> HTML elements */
 h3 {
     property: value;
 }

/* Targets all <span> HTML elements */
 span {
     property: value;
 }

Universal Selector

The universal selector, written with an asterisk ( * ) matches an element of any type.
The only elements that it can't select are the featureless elements, i.e. the ::before and ::after pseudo-elements are not affected by the universal selector.

/* ---------- Selector Syntax ---------- */
 * {
     property: value;
 }

/* ---------- Selector Examples ---------- */
/* Targers all elements that are the descendants
of a <div> element */
 div * {
     property: value;
 }

/* Targers all <span> elements that are the descendants
of any element */
 * span {
     property: value;
 }

Attribute Selectors

If an element has an attribute, we can use it to select the element. Using the attribute itself with the attribute presence and value selectors, or by looking at the value with substring matching attribute selectors.

Attribute Presence and Value Selectors

These selectors are matching against the attributes and the values in them.

Matching the element with the specified attribute, no matter the value.

/* ---------- Selector Syntax ---------- */
 Element[attribute] {
     property: value;
 }

/* ---------- Selector Examples ---------- */
/* Targets all <input> elements that have a 
"placeholder" attribute */
 input[placeholder] {
     property: value;
 }

Matching the element with the specified attribute with exactly the specified value.

/* ---------- Selector Syntax ---------- */
 Element[attribute="value"] {
     property: value;
 }

/* ---------- Selector Examples ---------- */
/* Targets all <a> elements with the attribute "target" 
with exactly the value "_top" */ 
 a[target="_top"] {
     property: value;
 }

Matching the element with the specified attribute, that it values is a list of strings separated by whitespace, and the specified value is one of them.

/* ---------- Selector Syntax ---------- */
 Element[attribute~="value"] {
     property: value;
 }

/* ---------- Selector Examples ---------- */
/* Targets <input> elements with the attribute 
"class" that has the value "must" in it */
 input[class~="must"] {
     property: value;
 }

Matches the element with the specified attribute, that it values is exactly the specified value or beginning with the specified value and immediately followed by ( - ).

/* ---------- Selector Syntax ---------- */
 Element[attribute|="value"] {
     property: value;
 }

/* ---------- Selector Examples ---------- */
/* Targets <a> elements with the attribute 
"hreflang" that the value is "en" or starts with "en-" */
 a[hreflang|="en"] {
     property: value;
 }

Substring Matching Attribute Selectors

These selectors are matching a substring of the values in the attributes.

Matching an element with the specified attribute, that it's value begins with the specified value.

/* ---------- Selector Syntax ---------- */
 Element[attribute^="value"] {
     property: value;
 }

/* ---------- Selector Examples ---------- */
/* Targets all <a> elements with the "class" attribute 
with a value starting with "foo" */
 a[class^="foo"] {
     property: value;
 }

Matching an element with the specified attribute, that it's value ends with the specified value.

/* ---------- Selector Syntax ---------- */
 Element[attribute$="value"] {
     property: value;
 }

/* ---------- Selector Examples ---------- */
/* Targets <a> elements with the "href" attribute
with the value ending with ".com" */
 a[href$=".com"] {
     font-family: sans-serif;
 }

Matching an element with the specified attribute, that has at least one instance of the specified value, in the attribute's value.

/* ---------- Selector Syntax ---------- */
 Element[attribute$="value"] {
     property: value;
 }

/* ---------- Selector Examples ---------- */
/* Targets <a> elements with the "href" attribute
 with at least one instance of "%20" string */
 a[href*="%20"] {
     property: value;
 }

Class Selector

The class selector is actually a special attribute selector. Because of its common use, it has a unique syntax.
We create a class attribute selector with the dot notation ( . ), immediately followed by the value of the class attribute in the element.

/* ---------- Selector Syntax ---------- */
 .class_name {
     property: value;
 }

/* This syntax is equivalent to the first one */ 
 Element[class~=class_name] {
     property: value;
 }

/* ---------- Selector Examples ---------- */
/* Targets all the elements with the class "red-text"
 .red-text{
     property: value;
 } 

/* Targets only the elements that have both "left" 
and "small" classes */
 .left.small {
     property: value;
 }

ID Selector

The ID selector, like the class selector, is actually a special attribute selector and it has a unique syntax, we create an ID selector using the number sign ( # ), immediately followed by the id name.
The id selector has a special feature that it can be only once in a single document, no matter the element type, for example, we can't write the same id name to a span and an h3 element on the same document.

/* ---------- Selector Syntax ---------- */
 #id_name {
     property: value;
 }

/* This syntax is equivalent to the first one */ 
 Element[id~=id_name] {
     property: value;
 }

/* ---------- Selector Examples ---------- */
/* Targets the element that has "red-error-text" 
value in it's ID attribute */
 #red-error-text {
     property: value;
 }

Combinators

As part of the Selector structure, we use combinators to build more complex Selectors and have more control over how we select elements from the DOM, by using combinators we can create selectors that match nested elements that may have no specified attribute, like an id or class attributes.

Descendant Combinator ( )

If we want to select a descendant of an element, we can use the Descendant Combinator, this combinator will help us match elements having to create them a specified id or class attribute.
The Descendant Combinator is whitespace " " that separates two compound selectors.

/* ---------- Selector Syntax ---------- */
 Element_selector1 Element_selector2 {
     property: value;
 }

/* ---------- Selector Examples ---------- */
/* Targets <li> elements that are the descendants of 
the .nav-bar element */ 
 .nav-bar li {
     property: value;
 } 

/* Targets <span> elements with the class "important"
which are the descendants of <p> elements which are 
the descendsnts of <div> elements which are the 
descendants of <section> element */
 section div p span.important {
     property: value;
 }

Child Combinator ( > )

If we want to select the direct children without the descendants of an element we can use the Child Combinator. The Child Combinator is the "greater-than sign" ( > ) character that separates two compound selectors.

/* ---------- Selector Syntax ---------- */
 Element_selector1 > Element_selector2 {
     property: value;
 }

/* ---------- Selector Examples ---------- */
/* Targets <div> elements that are the direct children
of the <section> element */
 section > div {
     property: value;
 }

Next-Sibling Combinator ( + )

If we want to select an element that is immediately following some other element, we can use the Next-sibling combinator.
The elements must share the same parent, and the first element in the selector has to be immediately before the second one.
The next-sibling combinator is the "plus sign" ( + ) character that separates two compound selectors.

/* ---------- Selector Syntax ---------- */
 Element_selector1 + Element_selector2 {
     property: value;
 }

/* ---------- Selector Examples ---------- */
/* Targets the <p> element that comes right after
<figure> element inside the <div> element */
 div figure + p {
     property: value;
 }

Subsequent-Sibling Combinator ( ~ )

The subsequent-sibling combinator is the "Tilda" ( ~ ) character that separates two compound selectors.
The selector is represented by two sequences of simple selectors separated by the subsequent-sibling combinator, and they both share the same parent element, and unlike the next-sibling combinator, the second element doesn't have to come immediately after the first element.

/* ---------- Selector Syntax ---------- */
 Element_selector1 + Element_selector2 {
     property: value;
 }

/* ---------- Selector Examples ---------- */
/* Targets the <p> element that comes not necasseraly
immideatelly after <figure> element inside the 
<div> element */
 div figure ~ p {
     property: value;
 }

Column Combinator ( || )

The column combinator is written by two pipes ( || ) selects the elements of a column element by looking at the relationship between it and the column it belongs to.
THIS COMBINATOR IS STILL ONLY AT THE EXPERIMENTAL STAGE AND MAY NOT WORK.

/* ---------- Selector Syntax ---------- */
 column_selector || cell_selector {
     property: value;
 }

/* ---------- Selector Examples ---------- */
/* Targets the <td> elements that belong to
<col> element with the class "blue-cell"  */
 col.blue-cell || td {
     property: value;
 }

This concludes my Basic Selectors article, all the pseudo-selectors will be explained in the next article.
Hope you enjoyed and leave a comment so I can improve and learn more!
Thanks for reading!

Git - The Basics

Michael Sayapin — Mon, 03 Aug 2020 10:00:50 +0000

What is Git?

Git is a Version Control System (VCS). Version control is a system that keeps track of the changes we make to a file or a set of files over time so that we may recall an earlier version in the future.

Version Control System?

VCS systems give us a lot of power over our projects, which sometimes can even save us from critical mistakes. Accidentally deleting files or messing up the code so much nothing works anymore, can frustrate any person, but with git, all you need to do is write some simple commands and it reverts as if nothing happened.
Git can help us go back not only to the last version of our code but as many versions as we can only want, which can allow us even to compare changes over time and in case the same project is worked on by a team we can see who made modifications over time, who introduced an issue and much much more!

How does Git Work?

What git does is taking “snapshots” of the directory, and saves it locally. Those snapshots are saved in the git repository, and each time we make any change to the files, adding or deleting files git takes a new snapshot and saves it. Each snapshot is actually the current version of the project, in this article, we will talk about how it does it and how it affects the files in more details, so let's jump into it!

Files states

The most important thing to understand as a starting programmer in git is the three main states your files can reside in.

Committed – which means that the data is safely stored in your local database.
Modified – which means that you have changed the file but have not committed it to your database yet.
Staged – which means that you have marked a modified file in its current version to go into your next commit.

This leads us to the three main sections of a git project: The git directory or the repository, the working directory, and the staging area.

The git directory is where git stores all the data of your project. The directory is the most important part of git, and it gets copied when you clone a repository to your computer.
The working directory is your workstation, it contains one version of your project. Git pulls this version from the database (local or remote) on to your computer so you can use and modify it.
The staging area is just a file, which is stored in your git directory, that contains information about what will go into your next commit.
To understand better let’s look at the basic and most common git workflow:

You modify or add files in your working tree.
You select which changes you want to be part of your next commit, which adds only them to the staging area.
You do a commit, which takes the files with the changes you selected from the staging area and stores them permanently to your git directory.

Now, all left is to connect between the three file states to the three main git sections.
If a particular version of a file is in the git directory, it is considered committed. If we make any change to that file, we added it to the staging area, and now the file is staged. And if the file was changed but has not been staged, the file is now modified.

Let’s Get Our Hands Dirty

There are two main ways to get out git repository start:

We can take a local directory that is not under version control and convert it into a Git repository.
We can clone an existing Git repository from some other place.

Creating a Repository in an Existing Directory

I will use a simple HTML file, Git bash terminal, and using Visual Studio Code IDE we can see the changes that occur at each step.

We will start by getting our terminal into the directory of our HTML file, you can see that my HTML file is in /d/sandbox/git, your directory can be in a different place than mine of course.

The next step is to type the git init command in our terminal, this creates a new subdirectory named .git that contains a git repository skeleton. At this point, nothing in our project is tracked by git.

VSCode note:

A nice feature that Visual Studio Code gives, is that it paints our files in the directory (Explorer panel at the left side) and adds a ‘U’ next to the file name. The ‘U’ stands for ‘Untracked’, and in addition to all this, on the Activity Bar in the Source Control tab, it adds the number of changes our code has.

We initialized git on our directory, but our repository is still empty, the next step is to add our HTML file to the next stage, the staging area. To do so we type git add index.html, but what will we do if we have more than one HTML file? In this case, we can use git add *.html, this command will add all the HTML files in our directory. Yet again we have a problem, what if we have a full directory project? With all sorts of files? For this situation, we can use git add –A or git add ––all which will update all our directory to the staging area.
There is also the git add . command, which also adds all the files to the staging area, but the difference between it and ––all / –A is that is doesn’t add all the content from sub-directories.

VSCode note:

Now that we added our HTML file to the staging area, VSCode changed the ‘U’ to ‘A’ which stands for ‘Added’.

All left to do now, is to commit our files to the local git repository and create our first version of it. Typing git commit -m “first commit” to the terminal will make git take a screenshot of all the files from the staging area, and store them in the git repository.

VSCode note:

In the terminal we see a couple of lines explaining the commit we just did, I’ll explain the important parts:
master (root-commit) – which branch we committed to.
first commit – our message we passed to the commit -m flag.
1 file changed – we added our HTML file to the repository.
11 insertions (+) – the number of lines we added to the repository.

Cloning an Existing Repository

If we want to get a copy of an existing Git repository, we will use the command git clone in our terminal, and in addition to the project itself, we also receive a copy of the project’s history with all available versions of that project. To make this command work we need to add the URL from where we clone the project, so for example, we write:
git clone https:// github.com / userName / repositoryName .git

This line will clone the repository stored in that URL to your directory and initialize a git repository skeleton along with it.

Another option is to create a new directory using this command in our directory:

git clone https:// github.com / userName / repositoryName .git myNewDiretoryName

This command does the same but the target directory is called myNewDirectoryName.

Status of our files

If you already have a working directory with files you created from scratch or cloned from some repository, each file in your working directory, can be one of two states: tracked or untracked.

Tracked files are files that were in the last commit, they can be modified, unmodified, or staged. In short, tracked files are files that git knows about.

Untracked files are any other file in your working directory which weren’t in your last version of the repository. When you first clone a repository all your files will be tracked and unmodified, because git just checked them and they haven’t been modified.

To know what is the status of the files in the directory we use git status command. For example, if we run this command just after cloning, we will see some messages.

They mean you have a clean working directory, or in other words, all your tracked files are unmodified. In addition, Git doesn’t see any untracked files in your directory, or else you would have seen them.

Now, let’s add a new file, a readme file to our directory, and then type git status again, we can see that now our new file is shown under untracked files and even shown in red, it’s asking us to use git add in the last sentence, so let’s add our new file to the staging area.

Now our new file is changed from untracked files to be under changes to be committed, and the file is now green.

If we add some text in the readme file now, it will be shown as a modified file as we can see next to the file name ‘M’, and in our terminal, we see it in both the changes to commit and in the changes not staged for commit. It happens because the creation of the file has been added to the staging area, but the changes we made didn’t. If we commit now, the changes will not be part of the commit. So to include the latest change to file all we need to do is to type the git add command one more time and then the last changes we made will be also committed.

Let’s talk about committing

In the article, we already used the git commit command, but we didn’t fully understand what it does.

Just a small reminder, that the only files that will get committed to our git repository, are the files you added to the staging area, other unstaged files will be left out and not be included in the next commit command.

Now, type in the most basic command git commit, doing so will open your editor with the file which gives some information about the commit. We see all the details regarding our commit, all we need to do is write a message for the commit to start, as a commit cannot be without a message.

All the lines starting with # are only there to summerise the commit and are optional, deleting or not will not affect the commission. Once we typed in our message we close the file and the commit is completed.

A very common and way more convenient way to commit is to use a flag to shorten the commit step ‘-m‘, all it does is letting us write the commit message right in the commit line instead of opening the editor typing the message and closing it.
git commit -m 'Your message goes here'

Deleting files

So we have our project all well and good, but there is a file we forgot about that we want to delete, how do we get it removed?

There are a couple of answers, the question is in what stage does the file in? Is the file staged? Has the file been committed? or still untracked?

If the file didn’t get committed or staged we can use rm , and in the terminal after typing git status, the untracked file will not show up at all.

If the file was already added to the staging area, we can use git restore ––staged
to un-stage the file, and use rm to delete the file completely.

If the file is already known by git then using git rm is the better option because if we type this command without the git keyword the file will get deleted but the change will be unstaged and we will have to manually stage the deletion to the staging area while using the git keyword it will stage the deletion automatically for the next commit.

A small side note, if we try and type git rm while the file is not known by Git, it will give an error.

Connecting to Github

After we talked about all the basics of git, how it works, and what it does, it is time to share the code we wrote with the world.
In this article, I will use GitHub as an example, but connecting to other online repositories may be possible exactly in the same way if not only a little different.

First let’s type in the command git remote to check if we already have any remote repositories connected, if the command returned with no output then there are no repositories connected.

In order to add a remote repository we use the command git remote add with two other parameters, first one is the name you give to your remote, second parameter is the URL of the remote.
git remote add , in the example above I chose to name my remote as "myGitHub", and wrote the URL to remote repository right after.
We can see that after adding the remote if we type git remote once more, it will return our remote with the name I gave to it.

Pulling and fetching from remote

To get data from the remote projects, we can use git fetch or git pull.

Let’s have a look at git fetch first, in my example I named my remote "myGitHub" when I added it, but if you first cloned to your directory a remote repository, then the default name is ‘origin’.

What it does, is downloading any changes that happened to the remote repository since you last cloned or fetched from it. It is important to note that it doesn’t merge or modify any files on your local directory automatically, so you have to merge it manually using the git merge /master*, which will merge your directory with the downloaded files.

Now for git pull , it does exactly as git fetch, downloading the latest changes from the remote to your local repository, the difference is that git pull tries to merge automatically the changes into the code you are currently working on.

Pushing Back to Your Remote

Finally, after a long journey of git commands, creating, deleting, modifying files, and committing it all to your local git repository, it is time to publish and share your project.

To push your project to your remote repository all you need to type is:
git push .

Forem: Michael Sayapin

JavaScript - Array.concat()

Examples:

CSS - Position

position: static

position: relative

position: absolute

position: sticky

position: fixed

The directional properties

top property

bottom property

right property

left property

z-index property

Values

This concludes my article that explains the position property, and the top, bottom, left, right ,and the z-index properties and their different values.

Hope you like it, and stay tuned for my next article soon!

CSS - Float and Clear

Float Property

float: none

float: left

float: right

float: inline-start

float: inline-end

Clear property

clear: none

clear: left

clear: right

clear: both

clear: inline-start

clear: inline-end

This concludes my article that explains the float and clear properties and their different values.

Hope you like it, and stay tuned for my next article soon!

CSS - Basic Selectors

CSS Selectors

Selector Structure

Selector Types

Elemental Selectors

Type Selector

Universal Selector

Attribute Selectors

Attribute Presence and Value Selectors

Substring Matching Attribute Selectors

Class Selector

ID Selector

Combinators

Descendant Combinator ( )

Child Combinator ( > )

Next-Sibling Combinator ( + )

Subsequent-Sibling Combinator ( ~ )

Column Combinator ( || )

Git - The Basics

What is Git?

Version Control System?

How does Git Work?

Files states

Let’s Get Our Hands Dirty

Creating a Repository in an Existing Directory

VSCode note:

VSCode note:

VSCode note:

Cloning an Existing Repository

Status of our files

Let’s talk about committing

Deleting files

Connecting to Github

Pulling and fetching from remote

Pushing Back to Your Remote

That is all for the Git basics, using VScode and GitHub, hope you enjoyed my article, and stay tuned for more!