DEV Community: Ericawanja

How to Build a Docker Image from Github and push to Docker Hub using a Jenkins Job

Ericawanja — Sun, 26 May 2024 22:26:13 +0000

Instead of manually building a docker image every time you make changes in your source code, you can build a Jenkins job that pulls the source code, builds the image, and publishes it to to docker hub.

How do you achieve that? Let's find out

1. Setting up the DockerHub credentials on Jenkins

Jenkins will need the docker hub credentials to build and push the image to the docker hub. Instead of using dockerHub username and password, we will Create an Access Token in the dockerHub.

Log in to DockerHub
Click on the profile Icon and click on the Account settings

3.Click on the Security tab on the left menu, click on the "New Access Token and Enter a brief Description. After clicking the "Generate" button, click on the "Copy and Close" button.

How to save the credentials on Jenkins

On Jenkins navigate to add a global credential

Enter the details needed to create the credential and save

2. Setting up the project on Github

If you don't have a project you can clone this https://github.com/Ericawanja/Jenkins-DockerHub-Automation

Delete the Jenkinsfile and Dockerfile to follow along

3. Setting up the Dockerfile

The docker file contains instructions on how to package the different computer pieces needed for a software application into a single package called an image.

We will create a simplified Dockerfile which copies all files into a work directory. Since we're not accessing this application from a browser, we will not be exposing any port.

FROM node:20-alpine 

WORKDIR /app

COPY . .

4. Creating and updating the Jenkins file

Create a Jenkins file on the root folder and follow along to update it

Step 1: Logging in to Docker

In the first step of the Jenkinsfile, we will log in to docker using with credentials() method which allows us to bind credentials into a pipeline script. Binding credentials using withCredentials method prevents exposing them in the script or on the Jenkins console.

stages{
        stage('Login') {
            steps {
                withCredentials([usernamePassword(credentialsId: 'dockerJenkinsID', usernameVariable: 'USERNAME', passwordVariable: 'PASSWORD')]) {

                   sh "docker login -u $USERNAME -p $PASSWORD"                  

                }
            }
        }

"usernamePassword" denotes the type of credentials.
credentialsId is the ID of the credential stored in Jenkins
usernameVariable and passwordVariable populate the username and password stored in Jenkins

Step 2: Building the docker image

Building a docker image is gathering all the artifacts needed for your software to run and packaging them so that the software can run anywhere.

To do so, the system uses a dockerfile which contains step-by-step instructions on how to build the image. Since we already have our dockerfile ready, we will be adding the command to trigger the image build.

 stage('Build'){
            steps {
                sh 'docker build -t ericawanja/todoapp:latest .'
            }
        }

Step 3: Pushing the image to the docker hub

Dockerhub is a cloud-based repository built for finding, using, and sharing docker container images. We will our push the image to the docker hub to make it available for other developers to pull and use it.

 stage('Push'){
            steps {
                //Deploy our app to DockerHub
               sh 'docker push ericawanja/todoapp:latest'
            }
        }
    }

Step 4: Log out from Docker

Logging out from service after logging in is a good security practice that prevents attacks such as session hijacking or unauthorized access.

We will log out from Jenkins in the "post" section which defines actions that are executed after the main stages in the Jenkins pipeline script have been completed.

The commands contained in the "always" block are executed every time the pipeline script runs regardless of the pipeline outcome.

 post {
        always {
            sh 'docker logout'
        }
    }

4. Creating and Running the Jenkins Jobs

In this step, we will create a Jenkins job that pulls the source code from GitHub and uses the Jenkins file to build and push the image to dockerhub.

Log in to Jenkins, click "+ New item" and select a pipeline Job type. Don't forget to enter the name before clicking the OK button.

Because we're using a Jenkinsfile, the pipeline script will be from SCM. I'm using a public GitHub repository, therefore I don't have to configure the credentials. Remember to change the branch to "main" or the branch name you want to build.

Finish setting the job and run it.

Conclusion

Automation aims at saving time and effort. By building a Jenkins pipeline that pulls the source code changes, builds an image, and pushes it to docker, will save you time and effort spent doing that manually.

Introduction to DevOps

Ericawanja — Tue, 20 Feb 2024 01:26:43 +0000

Considering most if not all companies are aiming to develop and deploy new software quickly, DevOps is an indispensable concept.

Research indicates that 77% of companies have already adopted the DevOps culture and worth mentioning, is, this figure is expected to increase significantly.

With these intriguing statistics, you will not go wrong in adding DevOps to your tools list.

1. What's DevOps

DevOps, a combination of development (Dev) and IT operations (ops) is a set of practices, tools, and cultural practices that are geared to streamline the software delivery process at a high velocity.

Activities such as automation, collaboration, and iterative development are highly emphasized in DevOps. These activities begin with planning, code development all through testing, deployment, and monitoring.

2. Key Principles of DevOps

DevOps has a set of principles that are geared to enhance automation, collaboration, and continuous improvement across the development and operations teams.

Some of these principles include:

Automation

DevOps aims at automating repetitive tasks such as code integration and deployment, testing, and monitoring to facilitate faster processes and frequent releases.

Continous Integration(CI)

Practicing continuous integration in DevOps allows developers to frequently merge their changes into a single repository. Before the merging, unit tests are ran detecting errors early on making it less expensive to fix them

Continous Deployment(CD)

Continuous deployment involves automatically building and deploying all code changes to the production environment after running a series of automated tests.

Automation is heavily relied on in continuous deployment which helps achieve frequent updates in the production environment.

Infrastructure as Code (IaC)

Infrastructure as Code provides an organized way for managing and provisioning the infrastructure through code instead of a manual way.

Configuration files for Infrastructure components such as operating systems, databases, and storage are created and versioned making it easy to edit and distribute.

Collaboration

DevOps culture emphasizes on teamwork across the development and operations teams instead of having them 'siloed'.
As a result, the team can leverage each other's strengths which breaks barriers and improving innovation.

3. DevOps Lifecycle

DevOps lifecycle incorporates various activities involved in the development, testing, deployment, and maintenance of software.

Typically an infinite loop is used to represent DevOps lifecycle because of the continuous and iterative nature of DevOps practices.

Even though specific DevOps stages may vary depending on the organization's culture, the following stages are common in a typical DevOps lifecycle:

1. Plan

In this initial stage, the project requirements, goals, and timelines are developed to optimize the business impact.

Various resources are allocated while the communications channels are established. Jira is a common tool used in DevOps planning

2. Code

In this stage, developers write and review code to implement the business solution created in the planning stage.

Typically, the agile approach is used during this stage while tools like Git and Bitbucket come in handy in keeping track of the changes made in the code

3. Build

Next, the source code from the coding stage is converted into a form that can be executed by a computer.

To create the executable artifact, the source code is integrated, compiled, and packaged along with the necessary dependencies.

Some of the tools used in the Build stage of the DevOps lifecycle are Apache Maven, Gradle, and Ant.

4. Test

Software testing involves checking the right product was built (Verification) and the product was built in the right way(Validation).

Various tests such as unit, component integration, system integration, and user acceptance testing are done using tools such as Junit, Cypress, Selenium, Jmeter, and pytest.

5. Release

In the release stage, a build that consists of all dependencies is prepared to be deployed using tools such as Gradle are used in this stage

6. Deploy

In this stage, the application is made available to the users. A continuous deployment strategy is commonly utilized to allow frequent automated deployments in the production environment.

Some of the tools used in the DevOps deployment stage are GitHub Actions, Jenkins, Gitlab CI/CD, CicrleCI, and TravisCI.

7. Operate

The operations team manages the deployed applications to ensure they are constantly available, secure, and reliable by looking at various things like system logs, metrics, and user interactions.

Configuration management such as Ansible, Chef, and Puppet are used to configure and manage applications and servers

8. Monitor

Continuous monitoring helps the team identify bottlenecks in the production environment to help maintain a healthy and good infrastructure.

Various tools are used to detect anomalies, gather data, analyze logs and metrics, and troubleshoot the systems to keep them optimized.

Tools like Grafana, Prometheus, and Splunk are used during this stage of the DevOps lifecycle

4. Benefits and Challenges of DevOps

Atlassian DevOps Trends Survey shows that 99% of the participant's organizations had significantly benefited after adopting DevOps culture.

Some of the DevOps benefits are:

Speed: The software building and testing processes are automated which makes it to frequently deliver DevOps releases.
Frequent deployments As a result of the frequent releases DevOps teams quickly push their change to the production environment which is a competitive advantage when fixing bugs are implementing new features.
Improved code Quality DevOps embraces shift left testing. Hence bugs are detected early which not only improves code quality but also makes it cheaper to fix
Improved collaborations By having the development and operations as a single entity, communications across the team are significantly improved which results in better innovations

Conclusion

In conclusion, DevOps is a practice and set of tools that empower the development and operations team to deliver reliable and quality customer solutions quickly.

By embracing automation, continuous integration and deployment, collaboration, and Infrastructure as Code, many organizations have benefited after adopting DevOps.

Debugging in JavaScript

Ericawanja — Fri, 23 Sep 2022 20:04:48 +0000

Since bugs are quite obvious in software development, Debugging is a skill that every software developer should learn to succeed in their career.

Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.

Benjamin Kernighan

Debugging is a part of software testing process which involves finding and fixing errors in a software before releasing it to the public. It entails not only inserting corrective code but also removing defective code.

Besides, that it helps software developers understand why and how things are happening in the code. As a result, debugging helps software developers learn faster and better.

Types of errors to debug

1. Syntax errors

A syntax error occurs when a programming rule is broken. For instance, misspelling keywords, using a variable that has not been declared, or failing to close an opening bracket.

Note that, syntax errors depend on the syntax rules of the programming language.
The execution of the program stops when a syntax error is encountered and an error is thrown. Hence, it is relatively easy to find syntax errors.

2. Logic errors

Logic error occurs when a program produces an unexpected output. Such errors are usually caused by algorithm issues such as

Incorrect program design. Use flowcharts to visualize the code flow
Creating an infinite loop without a break statement
Incorrect use of Booleans or logical operators
Having the same variable names for different objects

The key difference between logic and syntax errors is that a program with logic error will run but produce an unexpected result. On the other hand, a program with logic error will not run.

3. Run-time errors

Unlike other errors which occur when you are interacting with the code on your device, Run time errors occur when the user is interacting with the software.

For instance, if a user clicks a button to display the sixth element in an array of 5 elements which returns an undefined message.

How to debug in JavaScript

The common ways to debug JavaScript code are;

Using the console

The console object provides an access to the browser debugging console by using ctrl + shift + I for windows and command + option + k for mac.

Besides console.log() method which you must have interacted with as a JavaScript dev, there several other console methods.

JavaScript Console methods

console.log()

Console.log() prints an output on the console. You can use it to check the input or outputs of a program.
For instance;

  const sum = function( x, y){
    return x + 'y'
  } 
  sum(2,'3')

We expect the above function to return 5, however it returns 23. It is quite easy to spot the error here since the arguments are static but could be hard if the arguments were dynamically received from another function.

You can console.log each of the parameters in the function to check their types

  const sum = function( x, y){
    console.log(typeof x, y) // prints number string
    return x + 'y'
  } 
  sum(2,'3')

2.console.table()

console.table() displays an array or object as a table. It helps visualize various object keys and their values. For instance;

const user = [
  { name: "Erica", role: "Admin", department: "IT", },
  { name: "Wanja", role: "Hr", department: "IT", },
];
console.table(user);
//output 

┌─────────┬─────────┬─────────┬────────────┐
│ (index) │  name   │  role   │ department │
├─────────┼─────────┼─────────┼────────────┤
│    0    │ 'Erica' │ 'Admin' │    'IT'    │
│    1    │ 'Wanja' │  'Hr'   │    'IT'    │
└─────────┴─────────┴─────────┴────────────┘

3.Console.group()

Have you ever had several console messages that it was difficult to differentiate them? Using console.group() helps group the console messages into indented blocks. Even better you can add a label to help identify them.

To exit a console group, use console.groupEnd() as shown below.

function userData(users_details){
  console.group('userData')
  console.log('first user', users_details[0].name )
  console.groupEnd()
}
userData(user) 
/*output
userData
  first user Erica
*/

Console.trace() When interacting with a large codebase, it might be strenuous to understand where various functions have been declared. Console.trace() helps to trace the call path of the function.

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

outputs;

console.assert()

Console.assert prints a message to the console if the expression evaluates to false

syntax: console.assert(expression, message)

 console.assert(x + y == 11, "Expression returned false");

 // prints the message if the sum is not equal to `11

Debugger

The debugger keyword stops code execution and calls for available debugging functionalities.

Run the below code on the browser and inspect to see the debugger in action. You can check on this demo to understand JavaScript debugger and breakpoints.


let a = 3;
let b = 5;

debugger;
console.log(a*b)

3. Final Words

Follow me on twitter

More resources on debugging

Essential JavaScript debugging tools

Objects in JavaScript For beginners

Ericawanja — Wed, 03 Aug 2022 11:28:00 +0000

Objects are dictionary like items which are defined as a key-value pair.

It is a reference data type. That is, object variables are assigned reference pointer that points the location storage in memory. Loosely speaking, if you modify the assigned variable(pointer) then the original value in the memory will be modified too.

Unlike arrays, objects are unordered hence you cannot use indexes to access items. Don't worry we will discuss later how to access items.

Example of an object;

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

How to create an object in JavaScript

Object literal

This is the easiest way to create objects in JavaScript where you define and initialize the object inside curly brackets with a key:value pair.

The key, which is also referred to as a property name must be a string while the value property can be of any data type.

For instance;

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

The variable person has two properties, i.e firstName and lastName

New Object keyword

We can use the new Object()constructor to initialize an object.
Notice in this case, you will have to add the properties later.

const person = new Object(); //initializing an object
person.firstName = "John"; // adding property firstName with a value of John
person.lastName = "Doe";

Object constructor

Object constructor function acts as a blueprint for creating multiple objects. The key values are passed as function parameters.

function Student(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}
//lets create student1 and student2 objects
const student1= new Student("John", "Doe", 50, "blue");
const student2 = new Student("Sally", "Rally", 48, "green");

## When should you use objects

Objects are useful in storing with a key-value pair
Useful in grouping values with similar characteristics together to make your code more readable. ## Drawbacks of JavaScript objects
Object properties are unordered, hence does not support accessing items with indexes. You must know the property name.
Does not support operations such as adding or removing an item at a particular position.

## How to access items in an object

Object properties can be accessed using a dot or bracket notation.

For instance:

    let person = {
       firstName: 'John',
       lastName: 'Doe'
};

person.firstName // outputs 'John'
person ['lastName'] //outputs 'Doe'

//Notice that the property is passed as a string in the bracket notation.

If you access an unassigned property in an object it outputs undefined and not null

person.age //undefined

The dot operation can only be used if the property is a valid JavaScript identifier.

A dot operation will throw an error if the property name has a space, hyphen or if the property is dynamically determined. In such circumstances use the bracket notation.

let address = {
    'building no': 3960,
    street: 'North 1st street',
    state: 'CA',
    country: 'USA'
};
address['building no'] //3960

How to add and change properties in an object

Adding properties in objects is so simple. Access the property and assign a value to it. Let's add age and building no to our person object.

Similarly, you can change a value property by assigning it to a new value.

let person = {
   firstName: 'John',
   lastName: 'Doe'
};

person.age = 16
person['building no'] = 3960
//change the firstName to Jane
person.firstName = 'Jane'

console.log(person.age)//16

console.log(person['building no'])//3960

How to delete properties in an object

The delete operator is used to delete both the property and its value in objects.

delete person.age 
delete person['building no']

/* Before deletion: person.age = 16, 
                   person['building no'] = 3960
after deletion, person.age = undefined
                  person['building no']= undefined
*/

## How to iterate an object
The fastest way to transverse an object is using for..in loop.

For instance;

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

for(let x in person){
    console.log(x  ) // outputs all the properties
}

How to check if a property exists in an object

Use the in operator to check if a certain property exists in the object. It returns a boolean.

'age' in person // true
'country' in person //false

similarly, the hasOwnProperty() method can be used to check if the property exist.

person.hasOwnProperty('age') //true

`in` vs `hasOwnProperty()`

in returns true if the object exists in the object even if it has been inherited from another object.

let obj={
    age:16
}
const obj2= Object.create(obj) // 

console.log('age'in obj2) //outputs true

However hasOwnProperty() method returns true only if the property is a direct property of the object.

let obj={
    age:16
}
const obj2= Object.create(obj) // 
obj2['name'] = 'John' //adding the name property

obj2.hasOwnProperty('age') //false
obj2.hasOwnProperty('name') //true

Note;obj2.hasOwnProperty('age') returns false because age is not a direct property of the obj2.

object methods

An object method, is an object property that is a function.

let person = {
   firstName: 'John',
   lastName: 'Doe',
   fullName: function(){
    return this.firstName + " " + this.lastName 
   }
};

console.log(person.fullName()) // John Doe

this keyword is used to refer to the object

Note: You can also pass parameters in the method

Conclusion

Objects are a very important data-type in JavaScript since it forms a building block of many other data structures such as linked list and modern JavaScript classes.

Maps in JavaScript

Ericawanja — Wed, 03 Aug 2022 11:12:00 +0000

Map data structure was introduced in ES6. It has a similar key-value pair syntax as the objects.

How to create a map

You can create a map by passing an array of the key-value pairs into the new Map constructor

const fruits = new Map([
    ["apples", 500],
    ["bananas", 300],
    ["oranges", 200]
  ]);

  console.log(fruits) 
  //  Map(3) { 'apples' => 500, 'bananas' => 300, 'oranges' => 200 }

Alternatively, you can use set() method to add elements into the map.

const fruits = new Map();
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

console.log(fruits) 
  //  Map(3) { 'apples' => 500, 'bananas' => 300, 'oranges' => 200 }

What are the differences between a map and object

Same as objects, maps store key, value pair elements. However, the two are significantly different

Feature	Map	Objects
Keys	A map key can be any value. This includes objects, functions or primitives	Strictly, objects key must be a string or symbol data type
Lengh	Map has a size property which returns the length of the map	The length of an object can only be determined by iterating and counting all the elements manually
Iteration	Directly iterable	You cannot iterate an object directly. However you can do so by implementing other methods
Default keys	Map only contains keys that are explicitly declared. Hence, does not contain default keys	Since objects has a prototype, it contains default keys which can collide with other keys

Map operations

add element

set() method is used to add elements to a map. The set method receives the key-value pair of the new element as a parameter.

fruits.set("apples", 500);

get element get() method receives the a key parameter of the element

fruits.get("apples") // outputs 50

Remove element delete() method deletes element from the map.

fruits.delete("apples")

Clear Map clear() method removes all the elements from a map

fruits.clear()

Trasverse a map forEach() can be used to access the items in a list sequentially

const fruits = new Map([
    ["apples", 500],
    ["bananas", 300],
    ["oranges", 200]
  ]);

  fruits.forEach((key, value)=>{
    console.log(key, value)
  })
  /*
  output
  apples 500
  bananas 300
  oranges 200
  */

keys() returns an iterable list of the keys. Similarly, values() returns an iterable list of the values

const fruits = new Map([
    ["apples", 500],
    ["bananas", 300],
    ["oranges", 200]
  ]);

 console.log(fruits.keys())
 /*outputs
 { 'apples', 'bananas', 'oranges' }
 */
console.log(fruits.values())
/*outputs
{ 500, 300, 200 }
*/

entries() transverses the map and returns an array of key-value pair [key, values]

const fruits = new Map([
    ["apples", 500],
    ["bananas", 300],
    ["oranges", 200]
  ]);

 console.log(fruits.entries())

 /*
 {
  [ 'apples', 500 ],
  [ 'bananas', 300 ],
  [ 'oranges', 200 ]
}
 */

Find size of a map size property returns the length of the map

fruits.size //outputs 3

Summary

Even though objects and maps look quite similar, they are quite different. Map have size property and the keys can be anything including functions and objects.
Objects do not have size property while the keys must be strictly strings.

Linked List Data structure

Ericawanja — Sun, 24 Jul 2022 18:16:00 +0000

Linked list is a linear data structure with items(nodes) with links pointing to other items in the list.
The are three types of linked lists:

Singly linked list - the nodes have one pointer to the next item in the list. The last node points to null.
Doubly linked lists - every node has two pointers, one pointing to the previous element in the list and the other pointer pointing to the next element.
Circular linked list - The last node points to the first element in the list.

In this article we will be looking at singly linked list.

An item in singly linked list has two main parts. The first part
holds the data value while the other parts contains a link to the next item. However, the last item has nothing to point to thus its next value is null.

Why and when to use the Linked lists

Linked lists are recommended if you have a list of objects with links to the next item in the list. Its main advantage is;

Easy insertion

Inserting an element in array is quite expensive because you will have to shift all other items. Similarly, deleting an element in array, will leave holes or else you will have to shift the positions of the elements after the removed element.

However when using the Linked List you can easily transverse a list and insert or remove a node at the required position.

Drawbacks of linked lists

Does not support random access of elements. Thus, you will have to transverse through the list sequentially from the first element. This can be quite time consuming especially on the worst case. ## How to create a linked list

As you might have noted from the above diagram, every item in the linked list has the data part and link to the next value.
Below is a code template for a node (data item) in linked list. You can check the complete code snippets used here

 class Node {
  constructor(val, next = null) {
    this.data = val;
    this.next = next;
  }
}

Next, let us initialize a linked list.
Note, that the head will have a null value and a size of zero because we have not added any items yet.

 class Node {
  constructor(val, next = null) {
    this.data = val;
    this.next = next;
  }
}

class LinkedList {
  constructor() {
    this.head = null;
    this.size = 0;
  }
  //methods
}

1. Insert Node at the first position (head)

To insert a node at the first position we will use the Node constructor.

We will create a new node with a data property of the value to be inserted and next property of the previous head.

  insertFirst(data) {
    this.head = new Node(data, this.head);
    this.size++
  }

2. Insert Node at the Last position (Tail)

To insert an element at the tail, we will have to transverse through the list untill we get to the last value which points to null.

We will assign the new node to the next value of the last node.

Don't forget to check if the head is empty. If so, the new node will be the head.

  insertLast(data) {
    let node = new Node(data);
    let current;

    //if empty make the node the head
    if (!this.head) {
      this.head = node;
    } else {
      current = this.head;
      while (current.next) { // the loop terminates when  the pointer gets to a node whose next property is null
        current = current.next;
      }
      current.next = node;
    }
    this.size++
  }

3. Insert Node at index

The first thing to do when working with an index, is to check if the index is valid. That is, not less than zero or greater than the size of the list.

If the index is equal to zero, the node is to be made the head.

Else, we will transverse the list checking if the position is less than the index using two pointers.
The previous pointer points to the element just before the position to insert the node while the current points to the node on the position we want to add the node.

When the loop terminates, the next property of the previous item will point to the node to be added previous.next = node and the next item of the new node will point to the current item, node.next = current

   insertatIndex(data, index) {
    if (index < 0 || index > this.size) { // Checking if the index is valid. That is, less than zero or greater than the size 

      return;
    }
    //inserting at the first position. You can reuse the insertFirst()
    if(index == 0){
      this.head = new Node(data, this.head) //making the new node the head and the next value, the previous head
        console.log( this.head)
        return;
    }
    const node = new Node(data); // creating the node using the Node class
    let current, previous; // 

    //set current to first
    current= this.head;
    let pos = 0;
    //looping through untill you get to the index 
    while(pos < index){
        previous = current;
        pos++;
        current = current.next;

    }
    node.next = current;
    previous.next = node;
    this.size++
  }

4. Get Node at index

To get an element at a particular index in linked list, loop through the list checking if the current position is equal to the index.

If the position value is equal to the index, output its data value.

Else, increment the position and move the pointer to the next item.

 getAt(index){
    let current = this.head;
    let pos=0;
    while(current){ // the loop terminates if the currenmt value (this.head) is null
        if(pos == index){
            console.log(current.data)
        }
        pos++;
        current= current.next; // moving the pointer to the next value

    }
    return null;
  }

5. Remove node at index

First, check if the index is valid. That is, it is not less than zero or greater than the size if you know the size.

If the head is eqaul to zero, then you should remove the first value by moving the head pointer to the head.next

Next, transverse through the list to find the node with the link to the node to be deleted (previous) and the element after the node to be deleted (current next).
Note: the node to be removed is at the position equal to the index.

To remove the node, the next property of the previous should point to the next element after the item to be deleted. That is previous.next = current.next

 removeAtIndex(index){
    if (index < 0 || index > this.size){ //checking if the index is valid
      return
    }
    let count=0;
    let previous, current;
    current = this.head;
    if (index === 0) { // Deleting from beginning 
      this.head = current.next;
    }else{
    while(count < index){
      previous = current;
      current = current.next; 
      count++     
    }
    previous.next = current.next;
    this.size--;
    return;
  }
}

6. Clear List

An empty linked list has the head value as null. Hence to clear the list you need to point the head value to null.

 clearList(){
    this.head = null;
    this.size = 0;
  }

7. Transverse a linked list

We transverse through a linked list using the head pointer. Remember that the head pointer refers to the first node.

On the while loop, we will check that head is not equal to null. That is, the list is not empty or we have not exhausted looping through the list and print head.data ( remember that a node is an object) and then move the pointer to the next value.

printList() {
    while (this.head) {
      console.log(this.head.data);
      this.head = this.head.next;
    }
  }

Big O Analysis

Operation	O	Explanation
Insertion	O(1)	You just need to change the pointers of the previous node and the next node
Deletion	O(1)	You need to change the pointer of the previous node only
Search	O(n)	We have iterate sequentially over every element until we get to the target
Traversing	O(n)	We have to sequentially iterate over ever element

Conclusion

The best way to understand data structures is through practice. After understanding the basics, try writing the code snippets or look for leetcode problems and solve.

Google chrome extension manifest v3 for beginners

Ericawanja — Sun, 12 Jun 2022 21:14:39 +0000

Manifest file uses JSON format to describe the important information about the extension. It contains fields that are required, recommended while other are optional depending on the extension you are building.

name refers to the name of the extension and should be up to 45 characters.
version digits separated by dots showing the extension version. For example; 1.0.0
manifest_version version of the manifest. The latest is 3
host_permissions It is a group of URLs which the extension needs extra privileges. you must specify the host permissions in manifest v3 and higher.

{
     "name": "My YT Bookmarks",
    "version": "0.1.0",
    "description": "Saving timestamps in YT videos",
    "permissions": ["storage", "tabs"],
    "host_permissions": ["https://*.youtube.com/*"],
    "manifest_version": 3
}

The recommended fields are;

description- brief details on the functionality of the extension
action action key allows us to use the chrome.action API to control the toolbar for your extension in chromes UI. It also allows us to specify the objects of default icons, the default title and the default popup html.


 "description": "Saving timestamps in YT videos",
"action": {
      "default_icon": {
        "16": "assets/ext-icon.png",
        "24": "assets/ext-icon.png",
        "32": "assets/ext-icon.png"
      },
      "default_title": "My YT Bookmarks",
      "default_popup": "popup.html"
    },

The optional fields are;

author it is a string of the authors name

{
...
 "author": "Erica",
...
}

background background scripts interact with the events through the Chrome API. These scripts are registered as an object using the service_worker key.

{
...
 "background": {
      "service_worker": "background.js"
    },
...
}

permissions – extensions may require various permissions such s to use chrome storage to function properly. The permissions required are passed as an array of strings.

{
...
 "permissions": ["storage", "tabs"],
...
}

web_accessible_resources it is an array of objects that declare the various resource such as images or any other asset needed by the extension

{
...
 "web_accessible_resources": [
      {
        "resources": [
          "assets/bookmark.png",
          "assets/play.png",
          "assets/delete.png",
          "assets/save.png"
        ],
        "matches": ["https://*.youtube.com/*"]
      }
    ],
...
}

content_scripts are scripts that can manipulate the page’s DOM and run in context of a particular page.

{
...
 "content_scripts": [
      {
        "matches": ["https://*.youtube.com/*"],
        "js": ["contentScript.js"]
      }
    ],
...
}

If the script is using a JavaScript library, then it should also be injected.

{
...
 "content_scripts": [
      {
        "matches": ["https://*.youtube.com/*"],
        "js": [jquery, "contentScript.js"]
      }
    ],
...
}

Final remarks

There is much more to do with chrome extensions, but this is a great starting point. We will be looking on all other files in details soon

Git and GitHub for beginners

Ericawanja — Sun, 28 Nov 2021 19:37:25 +0000

Topics covered

Introduction to version control systems
Git and GitHub
Branching and merging
How to contribute to open source
How to sync your Repo

Git and GitHub are must-learn tools for every software developer. These tools not only make it easy to track changes in your personal projects, but they also make it seamless to contribute and coordinate team projects. This guide is to help every beginner to harness their skills and have an easy time learning and using these tools. Let’s get into it.

What is a version control system?

Version control systems are tools that are used by software developers to track and manage changes in a project. These tools keep track of the change made, who made and the time it was made. Thus, making it easy to turn back to the previous versions of a document and identify errors if they occur.

Types of version control systems

There are three main types of VCS, namely;
• Local version control system
• Centralized version control system
• Distributed version control system

A local version control system is a type of VCs that uses the local database in your computer to store the changes made. It stores them as a patch where every patch contains the changes made to the file since the previous versions and not the entire file. Consequently, to see how the file appeared at any instance, you have to add all the relevant patches to come up with the document.

A centralized version control system uses a central server to store the repository. Thus every developer must be connected to the central server to access the repository and make the changes. Even though it is quite easy to maintain a single repository in the server, in case the central server crashes, you may risk losing the data which is a major drawback. An example of centralized VCS is Apache Subversion which is abbreviated SVN.

Distributed VCS

Unlike the centralized VCS, every contributor has their own local copy of the main repository. Thus they can change, update and commit to their local repository without interfering with the main repository. The contributors copy the main repository by cloning it. Also, they have to stage, commit and push the changes to make them available for other contributors to see.

After knowing what a version control system let is us dive into GIT

What is git?

Git is an open-source distributed version control software that was created in 2005 by Linus Torvalds for the Linux kernel. It allows a team of developers to work on a project where each of them has a copy of their main repository which is located in the central server.

Features of Git

Free and open-source- you don’t have to pay anything to use Git. Also, its source code is available openly, hence you can modify it to your preference.
Distributed development- Git supports cloning where the contributors can store a local copy of the main repository
Supports non-linear development – git supports independent lines of code known as branches, which can be staged, committed, and updated independently of the main codebase. Hence, branching gives a developer a safe space to implement and test something new without interfering with the codebase. The branches can later be merged into the codebase.
Scalable- Git is quite scalable making it easy to handle an increase in the number of collaborators.
Secure – this tool uses the secure hash function (SHA1) for naming and identifying objects in a repository. Hence every change is well monitored making it impossible to make changes without being noticed. ##What is GitHub? GitHub is a hosting company that was founded in 2008 that provides a platform for developers to host and share their projects. it provides access control and management features for every hosted project. Basically, it offers source code management among other features of git.

There are many alternatives to GitHub such as GitLab and bitbucket. Consequently, you do not necessarily need GitHub to use git, but you require git to use GitHub.

Getting started with GIT

You need to install git on your operating system. This guide here will help you.
Also, create a GitHub account, and let’s move on.

How git GitHub woks and its commands

Let's discuss the diagram briefly;
After the user makes changes on the working file, git takes notice of the recently modified files. the user can check the modified files using git status command.

The modified files are added to a staging area which acts as the temporary location for the files.

All the staged files are ready to be committed/moved to a local repository. Up to this point the changes are only visible on the developer’s local machine and cannot be accessed by other contributors online.
To make the file available online, you need to host on an online hosting service such as GitHub. So, you need to push the local repository to sync it with the remote repository.

Take an instance, that the other contributors have pushed changes to the remote repository. You must sync your local repository with the remote repository to be up-to-date with the changes done. To do that you use Git Pull command which will sync your local repository.
Let’s now look at the git commands

1. Git status

The git status command lists all the files that have been modified recently and has not been added to the local repository. In the below case the Two Sum.md file has not yet been added to the local repository

PS C:\Users\ERICA WANJA\Desktop\coding problems> git status
On branch main
Your branch is up to date with 'origin/main'.

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        leetcode/Two Sum.md

nothing added to commit but untracked files present (use "git add" to track)
PS C:\Users\ERICA WANJA\Desktop\coding problems>

2. Git add

git add command is used to move the files to the staging area for committing. To stage your files use the commands below;
git add filename- to add a specific file

git add -all which is shortened to git add -A stages all the files, that is the new, modified and deleted files. On the other hand the git add . command stages only the new and modified files excluding the deleted files.

3. Git commit

git commit moves the repository from the staging area to the local repository. In other words, it stores the snapshots of the changes made to the local repository instead of blindly copying the entire repository one more time.
Every time you are making a commit you must give a brief message explaining the changes made.
For example;

git commit –m “solved the two sum problem”
```


###4. Git pull 
The pull command helps to keep your local repo up-to-date with the remote repository. It up streams any change made by another contributor in the remote repository to your local repository.
To pull the changes, you need to set the origin or parent remote repository
Command:


```
git remote add origin LinkToTheRemoteRepo
```


After setting the origin remote repository, you can now pull the changes using the below command;


```
git pull origin master
```


**Note:** it is a good practice that you pull the changes before the push command when working on a team’s project.
###5. Git push
`git push` command transfers the commits changes from the local repository to the remote repository(GitHub). Thus, the changes you have made will be published on the central repository and made available online. 
Commands
`git push  origin main ` pushes the commits to the main or the master branch
`git push origin branchName` pushes the commits to the named branch.(you will learn about branches shortly)

##Branching and merging on GitHub
**Branching** simply means creating a different line of development (branch) where you can test and experiment new things before implementing them into the main codebase. Thus practicing branching will save you from messing up with production codebase.

After testing the new changes on the branch, you can later on integrate them with the main line of development. This act of integrating the branches to the main line of development is known as **merging.**
##Git branch commands
`git branch branchname` command is used to create a new branch
`git checkout  branchname` command is used to move to the specified branch. After checking out to the branch you can now commit and push the changes.
`git checkout-b branchname` command is the short form of the above two commands. It creates a new branch and moves (checks out) to it at the same time.

##Creating remote branches
A locally created branch is only available on your device and not available to the other team members. You can push this local branch to make it available remotely using the below command.


```java
git push –u origin <name>
```


##Deleting branches
`git branch –d branchname` command is used to delete branches after merging the changes.
In some cases git may refuse to delete the branch if it has changes which have not been merged with the main branch which is a safety mechanism to prevent accidental loss of data. 

However, if you are sure you want top delete the branch with uncommitted changes, you can use the command below;


```
git branch –D branchname
```


Also, you use the following command to delete a remote repository;


```
git push origin --delete branchname
```



I greatly appreciate that you stopped by. I hope the article has been of help. You can also check this [article](https://dev.to/ericawanja/how-to-contribute-on-github-2p18/edit) on how to contribute on GitHub and how to sync your repository.

How to contribute on GitHub

Ericawanja — Sun, 28 Nov 2021 19:33:04 +0000

At the heart of GitHub is to make team collaboration seamlessly. You can only contribute to a public repository or a private repository where you have been added as a collaborator.

Step 1: Fork the repository

On GitHub move to the repository, you want to contribute to and fork it by clicking the fork button located on the upper right corner.

Step 2: Clone the fork

Cloning a git repository copies the content of the remote repository to your local device. While on the repository you have forked, click the green clone or download button and copy the displayed URL.
On your device terminal, run the below command to clone the repository.

git clone URL_OF_Forked_Repository

Step 3: Create a branch

To start working on the codebase, you must first navigate to the project folder and create a branch.

cd projectfolder

git checkout –b branchname

Step 4: Make the changes, stage, commit and push them

After making the changes on your local repository, you need to make them available in the remote repository. Run the below commands
git status to check uncommitted changes
git add * to add all the changes to the staging area
git commit –m ‘the commit message’ command to commit the changes
git push origin branchName to push the changes to GitHub

Step 5: Pull the requests

on your GitHub account move to the repository that you have just committed the changes and refresh the page. You will see a green Compare and Pull request button. Click on it and the maintainer will merge the commits.

How to sync a repository

While pulling the request you may run to some troubles such as having your repository several commits behind the main repository. That happens when a team member pull request gets merged after you had forked the repository.
Consequently, you need to upstream the changes to sync it with your repo.

Step 1: Add a new remote upstream repository

you should add a remote upstream repository as the parent of your local repo. That will give it a reference project where it will inherit any changes made.
First, run git remote -v to check if your repo has a parent
If no parent is listed, run the below command to add one.

git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git

Step 2: Sync the repo

To sync the repo, first, move to the main branch.

git checkout main

Now, fetch the changes from the original repository to your repo, by running the below command;

git fetch upstream

Lastly, merge the changes with the main branch.

git merge upstream/main

That’s it, your forked repo is up to date, you can go on push the changes and pull the request.

Quick Overview of CSS

Ericawanja — Wed, 24 Nov 2021 07:26:45 +0000

Css is an acronym for cascading style is a styling language for HTML documents. It is used to define the appearance of the html elements.

In other words, we would call it the make up for the HTML

How do you attach CSS TO HTML?

External css
To attach a css file externally, you need to create a separate file, save it with .css extension and attach it on the head section of your html document. Note that the href attribute is used to define the path to your css file. Thus you must ensure that the pathname is correct.

<html>
<head>
    <link rel="stylesheet" href="myStylesheet.css">
</head>
<body>
<!--the body-->
</body>
<html>

Internal css
When using internal css, the styles are defined inside the <style> tags on the head section.

<head>
    <style>
        body{
            background-color: blue;
        }
    </style>

Inline css

The styles are defined inside the opening tag of the element as follows.

<h1 style="color:red;">This is the first heading</h>

Selectors

Selectors are used to select the code block you want to apply the styles.
syntax;

    Selector{
Style: value;
   }

They can be divided into five;

1. simple selectors
They include;
-Element name e.g. p, h1, span, div

<p>Content</p>

    p {
color: red;
   }

-Id e.g. #title, #first-par. Note: that the id name should start with a # symbol.
e.g;

<p id='first-par'>Content</p>

    #first-par {
color: red;
   }

-Class selector e.g. .title Note that the class name is preceded by a dot.
eg;

<p class='par'>Content</p>

    .par{
color: red;
   }

2. Combinator selector
They indicate relationship between elements. They include
-Descendant selector e.g. div p{…..} selects all the paragraph elements in div
-Child selector (>) e.g. div >p{……} selects all the p elements that are children of a <div>
-adjacent sibling ( + ) selects an element that is directly after another specific element e.g. div + p{…..} selects all the paragraph after the div element

3. Pseudo-class selector

They are used to add styles to selectors only after meeting a certain condition
Syntax

    Selector: pseudo-class {
Property: value;
   }

Example:

a:hover {
  color: #FF00FF;
}

4. Pseudo-element selector
selects only a specific part of an element
Syntax

Selector: pseudo-class {
Property: value;
   }

Example:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Flex box and GRID

Flexbox is a one dimensional layout design where you specify if the items should be horizontally or vertically aligned.
References: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Grid is a two dimension layout design i.e rows and columns.
https://css-tricks.com/snippets/css/complete-guide-grid/

Transitions

Transitions in CSS provide a way to control the speed of a changing property in css.
For instance, if you increase the width of an object it occurs instantly. However, with transitions you can decrease this speed such that you observe every change as it happens.
Ref:
-https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
-https://www.w3schools.com/css/css3_transitions.asp

Animations

CSS animations makes it possible to animate different styles without using JavaScript or a library

Ref:
-https://www.w3schools.com/css/css3_animations.asp
-https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

Responsive web design

Responsiveness is the art of ensuring that a web page looks good in all devices. That is, the web design should adjust accordingly depending on the screen size, orientation and the platform.
The common ways to achieving responsiveness is use of flexible grids, media queries, and setting the viewport.

MEDIA QUERIES

Media queries specify styles to be applied when certain conditions are meant.
Example;

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Breakpoints

CSS breakpoints are points where the website content responds according to the device width
In the previous example, when the screen is resized to a maximum width of 600px, it will adopt to the given styles. i.e 600px is the breakpoint.

Quick overview of html

Ericawanja — Tue, 23 Nov 2021 15:24:31 +0000

HTML which is an abbreviation of hypertext markup language, is the standard markup language used in building websites. At the basic level it defines the structure of the website.

Syntax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--ALL OTHER CONTENT GOES HERE-->
</body>
</html>

An html document is made up of three sections;
Declaration section which defines the type of the document
The head section enclosed in the <head> tags which contains the meta information and the title of document
The body section enclosed between <body> and </body> which is the part visible on the browser.

HTML Tags

Html tags are keywords used to define how content will be displayed and formatted on a web browser.
Example; <p>A paragraph..</p>

Some tags have a closing tag while others do not have. Tags with only opening tags are also referred as empty tags. For instance <hr> which defines an horizontal line
There are several types of tags such as;

Heading tags used to define headings, ranging from <h1> to <h6>. <h1> defines the most important heading while <h6> define the least important heading.
Example;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h6>Heading 4</h6>
</body>
</html>

Output

Heading 1

Heading 2

Heading 4

Paragraph tags define a paragraph. <p>A paragraph..</p>

Structure tags that help in defining the structure of the html document. They include; head, html, and body tags.
Formatting tags which are used in defining how the elements should be displayed. For instance the italics tag <i>italics tag</i> format the content to italics
Self-closing tags are tags which do not contain the closing tags.

HTML Elements and Attributes

Html element is made up of the html tags and the content inside the tag
Example of a HTML elements:

<h1>My First Heading</h1>

Attributes are used in html documents to provide extra information about elements. The attributes or the extra information is defined inside the opening tag using name value pairs: name= “value”. Note that the value is inside the quotes.
For instance the href attribute is used to specify the URL of a page;

<a href="https://twitter.com/lux_academy">Visit our twitter page</a>

Links

Html links allow users to jump to another webpage when they click on it. Links in html are defined using the anchor tag <a>. The tag has the href attribute which defines the web page to be visited

<a href="https://twitter.com/lux_academy">Follow us on twitter</a>

Lists

Html lists are used to group related items. There are three types of html lists;
-Ordered lists
-Unordered lists
-Description lists

HTML ordered lists

Ordered list is created using the <ol> tags while the items are listed inside the <li>tags. The ordered items are marked with numbers by default.

Example:

<ol>  
 <li>HTML</li>  
 <li>Css</li>  
 <li>JavaScript</li>    
</ol>

ordered list tag, <ol>, has a type attribute, which is used to specify the ordering format. below are the different type attributes and there respective ordering formats.
-type '1' -numbers
-type 'I' -upper case roman numbers
-type 'i' -lower case roman numbers
-type 'A' -upper case letters
-type 'a' -lower case letters

 <ol type="I">  
 <li>HTML</li>  
 <li>Css</li>  
 <li>JavaScript</li>  
</ol>

HTML unordered lists

Unordered list is created using the <ul> tags while the items are listed inside the <li>tags. Its items are marked with bullets by default.

<ul>  
 <li>HTML</li>  
 <li>Css</li>  
 <li>Javascript</li>  
</ul>

It also has a type attribute used to define the type of bulleting;
-type "disc" - items are marked with bullets
-type "circle" -items are marked with circles
-type "square" -items are marked with circles
-type "none" -the items are not marked

Example in a code

<ul type="circle">  
 <li>HTML</li>  
 <li>Css</li>  
 <li>Javascript</li>  
</ul>

output

HTML
Css
Javascript

Description list

Html description list is a listing style where the items are listed alongside their descriptions. The <dl> tag is used to create a description list, the items are listed inside the <dt> tags while their descriptions are stated in the <dd> tags.
For instance;

Html: -It is a markup language
Css: -Its is a styling language

code

<dl>  
  <dt>Html</dt>  
  <dd>-It is a markup language</dd>  
  <dt>Css</dt>  
  <dd>-Its is a styling language</dd>     
</dl>

Images

Images are added on webpages to improve their appearance. The <img> tag is used to embed the image. This tag has two attributes:

src attribute which defines the location or the path to the image
alt attribute used to specify the text to be displayed if the image cannot be accessed. Syntax;

<img src="path" alt="alternatetext">

Tables

HTML tables are used to display tabular data. Data is contained in the table cells inside the rows and columns. A table is created in html using the <table> tag. Each row is defined by <tr> tag, table headings are defined by <th> while the data cells are defined by <td> tag.
Example of a simple html table;

    <table>
        <tr>
          <th>Company</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>John Doe</td>
          <td>Germany</td>
        </tr>
        </tr>
      </table>

Forms

Forms are used in html to collect the user inputs which is sent to the server for processing. The <form> tag is used to define an html form.
Some of the form elements are;
<input> , <label, <select>, <textarea>, <button>
A simple html form:

<form >
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Final words

Check on my Quick CSS overview article

A simple introduction to react router

Ericawanja — Wed, 10 Nov 2021 10:53:13 +0000

React router is a library built on top of react, which is used to navigate multiple routes in single-paged applications. Thus, it allows the user to move to different components without having to refresh the app, reducing the loading time, which improves the user experience.

What’s the need for the react router?

Traditionally, when a user clicked a link to a new web page, the new data from the server would rewrite the entire web page and force the site to refresh, which renders a whole different page. These types of apps are known as multi-page apps. Besides causing the pages to refresh, which takes some time, the users will see the pages redraw on the browser, which is not a good user experience and also it makes it hard to manage the app state.

What’s the solution?

The solution is changing from multi-page apps to single-page apps. In this rendering technique, you will never have to navigate to a whole new web page completely. Instead, the different components (known as views) will be loaded on the same page dynamically without navigating to an entirely new web page. This concept of single-page apps is used in popular web apps such as Facebook, Twitter, Instagram, etc.

To achieve all that, you will require the react-router library

React router components

The react-router library has three major components, namely;
• Routers
• Route matchers
• Navigation links

Routers

React router has two main routing components, namely, HashRouter and BrowseRrouter. These components define the routing region where you can use the navigation links and route matchers.

• Browserouter is used in dynamic webpages that use databases and whose information changes frequently. This routing technique makes the use of HTML history API to store and access the locations visited by the user

• Hashrouter, on the other hand, is used to route static web pages. The current location is stored on the hash portion of the URL. Thus the URL looks like this; http://example.com#/about. However, the # is never sent to
the server. Hence it has no special meaning.

Navigation links

React router provides <Link> tags that are used to create and change links. It is used in the place anchor tag (<a>) in HTML. Navigation links receive the to attribute whose value specifies the URL.
Syntax;

<Link to="/about">About</Link>

<NavLink>, which is also a navigation link in react-router, is a special type of <Link> component that is used to add styles when the current location matches with the route. This tag automatically inherits the active class when visited. The styles of the active class must be defined in the stylesheet.

<NavLink to="/about">About</NavLink>

Router matchers

Router matchers help determine the components to be displayed when a certain URL is visited. The two main route matching components are <Route> and <Switch>
• <Route> helps determine the connection between the URL specified on the tag and the component displayed on the user interface. It has a path attribute that specifies the pathname to the component
• <Switch> finds through its children a path that matches the requested URL and ignores others when it sees one.

 <div className="content">
          <Switch>
            <Route path="/about"> <About /></Route>
            <Route path="/contact"><Contact /></Route>
            <Route exact path="/"><Home /></Route>
          </Switch>
  </div>

Final remarks

That was a simple introduction to the basics of react router. However, one good habit of a software developer is practicing and getting their hands dirty. Thus, it will be wise of you also to check this simple hands-on guide with react router.

DEV Community: Ericawanja

How to Build a Docker Image from Github and push to Docker Hub using a Jenkins Job

1. Setting up the DockerHub credentials on Jenkins

How to save the credentials on Jenkins

2. Setting up the project on Github

3. Setting up the Dockerfile

4. Creating and updating the Jenkins file

4. Creating and Running the Jenkins Jobs

Conclusion

Introduction to DevOps

1. What's DevOps

2. Key Principles of DevOps

3. DevOps Lifecycle

1. Plan

2. Code

3. Build

4. Test

5. Release

6. Deploy

7. Operate

8. Monitor

4. Benefits and Challenges of DevOps

Conclusion

Debugging in JavaScript

Types of errors to debug

1. Syntax errors

2. Logic errors

3. Run-time errors

How to debug in JavaScript

Using the console

JavaScript Console methods

Debugger

3. Final Words

Objects in JavaScript For beginners

How to create an object in JavaScript

How to add and change properties in an object

How to delete properties in an object

How to check if a property exists in an object

in vs hasOwnProperty()

object methods

Conclusion

Maps in JavaScript

How to create a map

What are the differences between a map and object

Map operations

Summary

Linked List Data structure

Why and when to use the Linked lists

Drawbacks of linked lists

1. Insert Node at the first position (head)

2. Insert Node at the Last position (Tail)

3. Insert Node at index

4. Get Node at index

5. Remove node at index

6. Clear List

7. Transverse a linked list

Big O Analysis

Conclusion

Google chrome extension manifest v3 for beginners

Final remarks

Git and GitHub for beginners

What is a version control system?

Types of version control systems

Distributed VCS

What is git?

Getting started with GIT

How git GitHub woks and its commands

1. Git status

2. Git add

3. Git commit

How to contribute on GitHub

Step 1: Fork the repository

Step 2: Clone the fork

Step 3: Create a branch

Step 4: Make the changes, stage, commit and push them

Step 5: Pull the requests

How to sync a repository

Step 1: Add a new remote upstream repository

Step 2: Sync the repo

Quick Overview of CSS

`in` vs `hasOwnProperty()`