DEV Community: John Mutisya

ECMAScript 6 FEATURES:

John Mutisya — Mon, 21 Jun 2021 17:13:51 +0000

Template Literals

Template literals gives us an easy way of printing strings in JavaScript.

They also give us an easy way of having variables.
For example,

Let fName = ‘John’;
Let lName = ‘Kioko’;
Const fullName = ` ${fName} ${lName} `;
Console.log(fullName);

From the above example, we are using template literals to concatenate our fName and lName variables and then assigning them to the fullName Variable.

Previously we would have achieved the same result as shown below;

Const fullName = fName + ‘ ‘ + lname;

Template literals gives us a clean way of having a multi-line strings as shown below;

Const fullName = ` ${fName} 
${lName} `;

Object Destructuring:

Object destructuring allows us to access the keys of an object without having to reference it all the time;

Example of an object,

Const player = {
    name : “Victor Wanyama”,
    club : “MLS”,
    address : {
        city : “Florida”
}
};
Destructuring our object,
Const {name, club, address : {city} = player;

Object Literals

ES6 has put emphasis in writing less code while being readable and maintainable.

Object literals allow us to write less code while being descriptive.

An example of a normal object;

function addressMaker(city, state) {
    const newAdress = {city: city, state: state};
        console.log(newAdress);
}
addressMaker('Austin', 'Texas');

This is how our object looks after re-writing it using object literals;
function addressMaker(city, state) {
    const newAdress = {city, state};
       console.log(newAdress);
}
addressMaker('Austin', 'Texas');

For…of loop

The for…of loop is a new feature of JavaScript that was introduced in the later version of ES6.

It allows us to iterate over an entire iterable (strings, Array, sets etc).

The syntax of the for…of loop:

For(element of the iterable){
Body 
};

Example of a for…of Loop;

let incomes = [62000, 67000, 75000];
for (const income of incomes) {
    console.log(income);
}

Spread Operator

The spread operator( … ) is used to expand or spread an iterable or an array. For Example,

let contacts = ["Mary", "Joel", "Danny"];
let personalFriends = [ ...contacts ];
contacts.push("John");
console.log(personalFriends);

In the above example we have our array of contacts and then we are creating another array of personalFriends which copies the elements of contacts.

We then push another element to our first array contacts and on printing it we see that our new element has been included into the contacts array.

Printing our first array;

console.log(contacts);

Result;

["Mary", "Joel", "Danny" “John”];

But if we print our other array that we created by copying the elements of our first array contacts using … spread operator, we see that John is not included.

Printing personalFriends array:

console.log(personalfriends);

Result:

["Mary", "Joel", "Danny"];

Arrow Functions

This new ES6 feature gives us a cleaner way of creating functions as compared to regular functions. For example;

This function

Let a = function ( b , c){
Return b + c;
}

Can be written in arrow function as;

Let a = (b, c) => b + c;

Default Params

Default params allows us to give a value to our function paramete.r for example,

const leadSinger = (artist = "someone");

such that when we are calling the function without providing it with a value, it will default to the value provided to the parameter instead of giving us undefined. An Example,

const leadSinger = (artist = "someone") => {
console.log (`${artist} is the lead singer of Cold Play`);
}
leadSinger ();
output;
"someone is the lead singer of Cold Play"

Includes()

The includes() method checks to see if an element is included and returns a Boolean value of true or false.

In the below example we are using includes() to check if a recipe is in the array then prints the relevant console message;

const listIngredients =  [ "flour", "sugar", "eggs", "butter" ];
if ( listIngredients.includes("chocolate")) {
console.log("We are going to make a chocolate cake" )
} else {
    console.log ("We can't make a chocolate cake because we are missing the ingredient chocolate”);
}

Let & Const

Let & const are block scoped declarations.

Let variables can be updated but not re-declared. Const variables can neither be updated nor re-declared.

Import & Export:

This allows us to follow the solid principles and do dependency injection and more object orientated programming.

It essentially allows our code to be more modular in nature which lends it to be more easily organised.

Classes

A class is a blueprint of an object. You can create an many objects from a class.

Creating classes in JavaScript is similar to creating constructor functions.

A constructor function is defined as shown below:

// constructor function 
function dog () {
    this.breed = 'germany',
    this.color = ‘white’
}

// create an object
const dog1 = new dog();

When creating clases, you replace the function keyword with the class keyword. For example,

//A dog class 
class dog () {
    constructor(breed, color){
            this.breed = breed;
          this.color = color;
    }
}

// create an object
const dog1 = new dog(‘germany’, ‘white’);

The class keyword is used to create a class. The properties are assigned in a constructor function.

JavaScript Map

Maps in javascript are similar to objects, they allow us to store elements in a key/value pair.

Elements in a map are inserted in an insertion order. A map can contain objects, functions and other data types as keys.

To create a map we use the new map() constructor. For example,

// create a Map
const map1 = new Map(); // an empty map
console.log(map1); // Map {}

Javascript Sets

Sets are similar to arrays in that they allow us to multiple items like numbers,strings, objects, etc. Sets cannot contain duplicate values.

To create a javascript set, you need to use the new set() constructor. For example,

Const set1 = new set();

Conclusion

This article covers ES6 features. If there is any that you feel has been left out and you would like it to be covered, leave a comment.

Lets Take A Dive Into Git

John Mutisya — Mon, 31 May 2021 16:08:09 +0000

What is Git?

Git is an open source distributed version control system. To break it down;

Git is a control System: It’s a content tracker. It is used to store content especially code due to the features it provides.
It is a version control system: Code that is stored in Git keeps on changing as developers keep on making changes to the existing code and even adding new code. Git serves as a version control system by handling these changes and maintaining a history of those changes as they happen.

It serves as a distributed version control system in that, it has a remote repository stored in a server and a local repository stored in the computer of each developer. Each developer’s computer has the full copy of the code and thus distributed.

Installing Git:

Git is an open source application and it can be downloaded online for free. This link https://git-scm.com/., Will take you to their website from where you can download Git for your specific platform.
You’ll also find documentation on how to install it.
You can verify if Git has been installed successfully by running this command in the command prompt.
Git –version

Below are the steps of working with Git to make changes to a code base, opening a pull request(PR), and merging code into the primary branch.

Creating a Local Repository

A repository is a directory that stores all of the files and folders needed for a project and the changes made to them.

When creating a new project on your local machine using, you’ll first have to create a new repository often referred to as ‘repo’.

These commands are used to change a directory and create a new one;
Cd ~/desktop
Mkdir gitdemo

To initialize a repository in the root folder we will use,
Git –init in the command terminal.

Adding a new file to the repository.

We can add a new file to the project using any text editor or by running the touch command. For example touch newfile.txt, this creates and saves a blank file named “newfile.txt”.

Once we have added or modified files in a folder containing a git repo, git will notice that the file exists inside the repo, but won’t track the file unless you tell it to explicitly.

Git only saves or manages changes to files that it tracks. For it saves the new changes we need to send it a command that tell it that we want to track our new file.

touch newfile.txt

We can use the git status command to see which files git knows exist.

BERNARD@BERNARD-PC MINGW64 ~/desktop/gitdemo (master)
$ git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        techsolproject.txt

nothing added to commit but untracked files present (use "git add" to track)

BERNARD@BERNARD-PC MINGW64 ~/desktop/gitdemo (master)
$

Staging and Committing the code

Committing is the process of adding code to the local repository. Before committing the code, it has to be in the staging area. The staging area is there to keep track of all the files which are to be committed.

Files that have not been added to the staging cannot be committed.

Staging

To add the file to the staging area we will use the following command:

git add newfile.txt

Incase you want to add muiltiple files you can run the command as shown below,

git add file1 file2 file3

To add the files inside your projects folder into the staging area we use:

Git add .

Use the above command with caution as it adds all the files and folders in your project to the staging area.
Committing

To commit the file we will use:

Git commit –m “Message describing the commit”.

The message in the double quotation marks is the commit message. Make sure to use a relevant commit message that describes what code changes were done in that particular commit.
Create a new branch

Now that you've made a new commit, let's create a branch.
Say you want to make a new feature but are worried about making changes to the main project while developing the feature. This is where git branches come in.

Branches allow you to move back and forth between 'states' of a project. Official git docs describe branches this way: ‘A branch in Git is simply a lightweight movable pointer to one of these commits.’ For instance, if you want to add a new page to your website you can create a new branch just for that page without affecting the main part of the project. Once you're done with the page, you can merge your changes from your branch into the primary branch. When you create a new branch, Git keeps track of which commit your branch 'branched' off of, so it knows the history behind all the files.

Let's say you are on the primary branch and want to create a new branch to develop your web page. Here's what you'll do: Run git checkout -b <my branch name>. This command will automatically create a new branch and then 'check you out' on it, meaning git will move you to that branch, off of the primary branch.
After running the above command, you can use the git branch command to confirm that your branch was created:

git branch master *my-new-branch

Create a new repository on GitHub

If you only want to keep track of your code locally, you don't need to use GitHub. But if you want to work with a team, you can use GitHub to collaboratively modify the project's code.
To create a new repo on GitHub, log in and go to the GitHub home page. You can find the “New repository” option under the “+” sign next to your profile picture, in the top right corner of the navbar:

After clicking the button, GitHub will ask you to name your repo and provide a brief description.

When you're done filling out the information, press the 'Create repository' button to make your new repo.

GitHub will ask if you want to create a new repo from scratch or if you want to add a repo you have created locally. In this case, since we've already created a new repo locally, we want to push that onto GitHub so follow the '....or push an existing repository from the command line' section:

git remote add origin https://github.com/cubeton/mynewrepository.git
git push -u origin master
Counting objects: 3, done.
Writing objects: 100% (3/3), 263 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/githubusername/mynewrepository.git
 * [new branch]      master -> master

Branch master set up to track remote branch master from origin.
(You'll want to change the URL in the first command line to what GitHub lists in this section since your GitHub username and repo name are different.)

Push a branch to GitHub
Now we'll push the commit in your branch to your new GitHub repo.

This allows other people to see the changes you've made. If they're approved by the repository's owner, the changes can then be merged into the primary branch.

To push changes onto a new branch on GitHub, you'll want to run git push origin yourbranchname. GitHub will automatically create the branch for you on the remote repository:

git push origin my-new-branch
Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 313 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/githubusername/mynewrepository.git
 * [new branch]      my-new-branch -> my-new-branch

You might be wondering what that "origin" word means in the command above. What happens is that when you clone a remote repository to your local machine, git creates an alias for you.

In nearly all cases this alias is called "origin." It's essentially shorthand for the remote repository's URL. So, to push your changes to the remote repository, you could've used either the command: git push git@github.com:git/git.git yourbranchname or git push origin yourbranchname
(If this is your first time using GitHub locally, it might prompt you to log in with your GitHub username and password.)

If you refresh the GitHub page, you'll see note saying a branch with your name has just been pushed into the repository. You can also click the 'branches' link to see your branch listed there.

Create a pull request (PR)

A pull request (or PR) is a way to alert a repo's owners that you want to make some changes to their code. It allows them to review the code and make sure it looks good before putting your changes on the primary branch.

You might see a big green button at the bottom that says 'Merge pull request'. Clicking this means you'll merge your changes into the primary branch..

Sometimes you'll be a co-owner or the sole owner of a repo, in which case you may not need to create a PR to merge your changes. However, it's still a good idea to make one so you can keep a more complete history of your updates and to make sure you always create a new branch when making changes.

Merge a PR

Go ahead and click the green 'Merge pull request' button. This will merge your changes into the primary branch.

Get changes on GitHub back to your computer

Right now, the repo on GitHub looks a little different than what you have on your local machine. For example, the commit you made in your branch and merged into the primary branch doesn't exist in the primary branch on your local machine.

In order to get the most recent changes that you or others have merged on GitHub, use the git pull origin master command (when working on the primary branch). In most cases, this can be shortened to “git pull”.

git pull origin master
remote: Counting objects: 1, done.
remote: Total 1 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (1/1), done.
From https://github.com/githubusername/mynewrepository
 * branch            master     -> FETCH_HEAD
   b345d9a..5381b7c  master     -> origin/master
Merge made by the 'recursive' strategy.
newfile.txt | 1 +
 1 file changed, 1 insertion(+)

This shows you all the files that have changed and how they've changed.

A Brief Introduction to CSS for Beginners.

John Mutisya — Sun, 16 May 2021 14:47:48 +0000

What is CSS?

CSS is an acronym for "Cascading Style Sheet" - it is a simple design language intended for styling web pages. CSS handles the look and feel part of web pages.

Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices, and screen sizes as well as a variety of other effects.

Here is an example that shows the effects of CSS on an Html document.

Below you see how an Html document looks before CSS has been applied,

And here you see how it looks after applying CSS.

CSS Syntax:

CSS uses style rules that are interpreted by the browser and then applied to the corresponding elements in the document.

A CSS Style rule is made up of three parts:

Selector - this is an HTML tag on which a style will be applied.
Property - it is a type of attribute in the HTML tag.
Value - this refers to what is assigned to a property.

You can put CSS Style Rule Syntax as follows:
selector { property: value }

How We Apply CSS in Html Documents.

We can apply CSS in three different ways into an HTML document;

Inline style:

In this method, CSS styles are included in the Html tag using the style attribute.

It can be done like shown in the below example;
Some Text 

Using inline CSS on an Html document is not considered best – practice as Html documents should be presentation free and thus inline styles should be avoided where possible.

Internal style:

Internal styles are embedded in the head section of the Html document, and styles are applied to the whole page.
Inside the head element, the styles tag surrounds all of the styles for the page.

Below is an example of internal styles;

<!DOCTYPE html>
<html>
<head>
     <title>Internal Css</title>
     <style>
     P {
       Color: red;
       Font-size: 20px;
       }
    </style>
</head>
<body
</body>
</html>

In the above example, the color will be applied to the paragraph's and font size of 20 pixels.

External style:

In external styles, a separate CSS file is created that contains all the styles that will be used in the whole, multi-site page.

External stylesheets are linked together with the Html document in the head section of the Html document.
An external CSS file is created like shown below;

p {
    color: red;
}

a {
    color: blue;
}

If the file is saved in the same directory as the Html page, it can then be linked to the Html as shown below;

<!DOCTYPE html>
<html>
<head>
    <title>CSS Example</title>
    <link rel="stylesheet" href="filename.css">
...

CONCLUSION.

CSS is one of the main building blocks of the web today. This article is an overview of CSS, what CSS is, what CSS does, and its basic syntax.

HyperText mark-Up Language (HTML).

John Mutisya — Sat, 08 May 2021 20:26:49 +0000

Introduction

What is Html? Hypertext Mark-up Language (Html) is the language for creating web pages and web applications. Hypertext means that the document can contain links that will take the user to a different part of the document or other pages once clicked. Mark-Up language refers to how computers talk to each other to control how text is presented and processed.
Html was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989.
Html uses tags and attributes to describe different types of content on your web applications
Tags mark the start of an Html element and they usually have backward and forward angle brackets.
Attributes on the other hand contain additional pieces of information. They take the form of an opening tag and the additional piece of information is placed inside.

WHY LEARN HTML

Html originally was created with the intent of defining the structure of documents e.g, headings, paragraphs, lists, etc., to facilitate sharing of scientific information between researchers.
Html is a crucial resource for web developers today, as it is widely used to format web pages with the help of the different available tags in the language.
Advantages of Learning Html:
• Create web sites
• Become a web designer
• Understand web

Applicattions Of HTML.

From the definition of Html above, we can with confidence refer to it as the language of the web. Below are some of the things that can be achieved by using Html:

Web Pages Development –Most of the web pages seen today on the web have been created with Html.
Internet Navigation – Html provides tags that are used to navigate from one page to another and are heavily used in internet navigation.
Responsive User interface - HTML pages nowadays work well on all platforms, mobile, tabs, desktop, or laptops owing to responsive design.

Tools Used To Write Html;

Html can not be written using word processors like Microsoft word, Rather we use Html editors. Below are some of the Html editors we use today;

Sublime Text 3
Notepad++
Komodo Edit

Writing Our First Html Page

`
We use the following tags to construct a basic Html page structure;

<!DOCTYPE html> — This tag specifies the language you will write on the page. In this case, the language is Html 5.
Html tag — This tag signals that from here on we are going to write in Html code.
head tag — This is where all the metadata for the page goes, stuff mostly meant for search engines and other computer programs.
body tag — This is where the content of the page goes. `

< !DOCTYPE html >
< html >
   < head >
      <title> This is document title</title>
   </head>  
   <body>
   </body>  
</html>

Inside the head tag, there is the title tag that contains the name of the page as It will appear at the top of the browser's window.

Adding Content.

We add more content to our Html document in the body section of the document. We combine the use of other tags and attributes inside the body to create content that is visible to humans on the internet.

Adding Headings to Our Html Page.

We use different levels of heading tags to add headings into our Html document as shown below.

This is a heading 1

This is a heading 2

This is a heading 3

This is a heading 4

This is a heading 5

This is a heading 6

Adding More Text Into Our Html

We add text to our Html page by using the  tag. We place all our text in between the opening  and closing  tag. This tag is used to create a new paragraph.
For Example,

<!DOCTYPE html>
<html>
   <head>
      <title>This is our first html document</title>
   </head>  
   <body>
      <h1>This is a heading</h1>
      <p>Hello World!</p>
   </body>  
</html>

Adding Links To Our Html Pages:

We add links to our pages by using the anchor <a> tag.
The anchor tag uses an attribute that contains an address to the page we are linking to.

The first part of the attribute contains the page that will open once the link is clicked.
The second part shows the text that will be displayed to the viewer of the page.

<!DOCTYPE html>
<html>
   <head>
      <title>This is our first html document</title>
   </head>  
   <body>
      <h1>This is a heading</h1>
      <p>Hello World!</p>
      <p><a href="https://shop.techsolsoftwares.com/blog/">Learn More On Our Blog</a></p>
  </body>   
</html>

Adding Images to Our Html Page.

We add images to our Html page using the Image tag which also has an attribute element that points to the location of the image.

Creating a List of items on our Html Page;

Three different types of lists can be created on an Html page;

1 Ordered Lists – We use <ol> to define an ordered list. Inside the <ol> we create the list using <li> tag.

For example;

<ol> 
        -<li>An item </li>
        - <li>Another item </li>
        -<li>Another goes here </li> 
</ol>

2 Unordered List - We use an unordered list tag to define an unordered list.

<ul> 
       - <li>An item </li>
       - <li>Another item </li>
       - <li>Another goes here </li> 
</ul>

3 Definition List- We can include a definition list in our html page using <dl>. Inside the <dl> we will include the definition term <dt> and the definition <dd>.
For example;

<dl>
<dt>Item</dt>
<dd>The definition goes here</dd>
</dl>

Conclusion:

In this article, we have defined Html, Discussed why it is important to learn and its applications. We have also covered some basic syntax to get us started before diving deep into it.