DEV Community: Code_Regina

End of Month Update

Code_Regina — Mon, 31 Jan 2022 23:46:47 +0000

I spent this month focused on working on some additional courses from codecademy https://www.codecademy.com/. I thought it would be something fun to try outside of video tutorials.

Going into February I plan to pick back up on my video course and continue with codecadmy courses.
February looks to be very productive and fun!
I have a lot of ideas for future projects can't wait to get started on them.

[.NET R & R] Project Overview and API Basics

Code_Regina — Tue, 07 Dec 2021 21:32:38 +0000

     -Project Over view 
     -Creating the dotnet solution
     -Adding VS code extensions
     -Creating a new c# class for the product
     -Adding the Db context class 
     -Creating an entity framework migration
     -Creating a class to seed the data 
     -Creating an API controller return a list of products
     -Using async methods when querying a database 
     -sabving our code

Project Overview

This project will be creating full-stack an e-commerce website using .NET with React and Redux [.NET R & R] from scratch.
Source: https://www.udemy.com/user/neil-cummings-2/

Creating the dotnet solution

To begin the project it is important to start at the terminal / command line. Using the first few commands to set up the project.
Create a template for a starter API at the terminal / command line. The command

dotnet new sln

will create a solution file for the project. The solution file is a container for the code. Next command will be

dotnet new webapi -o API

to create and name the API.

Then it is time to open the project in IDE for this project I chose visual studio code a short cut to opening a project from the terminal into VS code is to type

code .

To start the project
CD into the API then run
CD API
dotnet run

dotnet watch run

This will make it where the program will be automatically updated so that there is not a need to stop the program and restart the program.

the output

Adding VS code extensions

Here are some of the most helpful VS code extensions for creating this project.

Creating a new c# class for the product

Start buy creating a Entities Folder
Then create a new c# class file called products

then create the properties.

public class Product
    {

        public int Id { get; set; }

        public string Name { get; set; }

        public string Description { get; set; }

        public long Price { get; set; }

        public string PictureUrl { get; set; }

        public string Type { get; set; }

        public string Brand { get; set; }

        public int QuantityInStock { get; set; }    



    }

}

Adding the Db context class

Start by looking for the NuGet gallery and search for
Microsoft.EntityFrameworkcore make sure to select the correct package.

Then create a new folder for Data and a new c# class StoreContext.cs

within that file

public class StoreContext : DbContext 
{
    public StoreContext(DbContextOptions)
        {

        }
    public DbSet<Product> Products { get; set; }
}

Creating an entity framework migration

Creating a migration based on the code written so far.
The tool that will help us do this is

Dotnet-ef

https://www.nuget.org/packages/dotnet-ef/

The command to install in the project

dotnet tool install --global dotnet-ef --version 6.0.0

to see all the tools

dotnet tool list -g

to use the tool in the project

dotnet ef migrations add InitialCreate -o Data/Migrations

a new folder will be created to hold the migrations in.

to show the database information
open the command panel and look for sqlite
open database

A new list of options appear to view the database

Creating a class to seed the data

Putting data into the project.

Inside the data folder create a new class

The name of the new class will be DbInitializer
This class will be used to create a list of products then add them to the database.

The point of this is if anything were to go wrong with the database it will be easy to drop the database and create a new one and add the same data back into it.

Next Up in the project

React Basics!!

November 2021 Update

Code_Regina — Mon, 08 Nov 2021 04:54:38 +0000

Hello everyone! Happy November!!
I am glad to have made it this far with my web development // software development learning journey.

There is so much to always learn and I always try to understand complex topics as much as possible but sometimes things are just confusing. However I have learned that the more practice the easier things become and the confusion clears up.

When facing information overload it does tend to become intimidating to want to start or continue that is why taking breaks is important to give yourself a fresh perspective on problems.

Burnout happens and it is okay as long as there is a new starting point to continue then everything feels new again.

So TLDR just keep trying//practicing//learning and one day it all makes sense.

Starting a new course!

Code_Regina — Thu, 04 Nov 2021 18:29:23 +0000

Today I am starting a new course with Neil Cummings
https://www.udemy.com/user/neil-cummings-2/
I plan to work thru most of his courses because they seem really interesting and the material is more advanced.
So I am going to start working on his course:

Learn to build an e-commerce store with .Net, React & Redux

I think it will be a fun course because I will get to build a functional e-commerce website.

I also am looking forward to learning more about the frames of .Net, React and & Redux.

Into frameworks and beyond

Code_Regina — Sun, 31 Oct 2021 19:10:28 +0000

Happy Halloween!!

I am glad to have finished up the data structures and algorithms course this month even though I had a large break in between.

Anyways moving forward into next month and even more so into next year I am going to focus more into frameworks such as React and Angular as well as just getting a taste of everything in between.

I am going to be focusing more on projects to put on GitHub.
I am really excited to have finally have the basics behind me on HTML, CSS and JavaScript. It has been a long ride and I know its just getting started.

This is why I love working with software because there is always something new to learn and something to work on. It is never ending and ever evolving!

Graphs

Code_Regina — Sun, 31 Oct 2021 19:03:17 +0000

                   -Intro to Graphs

                   -Types of Graphs

Intro to Graphs

Graphs are used in
-social networks
-recommendation engines such as
"People also watched" , "You might also like", "People you might know", "Frequently bought with".
-Location / Mapping
-Routing Algorithms
-Visual Hierarchy
-File System Optimization
-Almost everywhere!

Types of Graphs

Vertex - a node
Edge - connection between node
Weighted / Unweighted - values assigned to distances between vertices
Directed / Undirected - directions assigned to distances between vertices

Hash Tables

Code_Regina — Sun, 31 Oct 2021 18:52:13 +0000

                   -Intro to Hash Tables
                   -Handling Collisions
                   -Hash Table Keys and Values

Intro to Hash Tables

Hash tables are used to store key-value pairs.
They are similar to arrays but there is no required order.
Hash tables have a great speed so they are widely used.
Hash tables have different names in other languages but the functionality is the same.

Python hash tables are called dictionaries.
JavaScript hash tables are called objects and maps.


function hash(key, arrayLen) {
  let total = 0;
  for (let char of key) {
    // map "a" to 1, "b" to 2, "c" to 3, etc.
    let value = char.charCodeAt(0) - 96
    total = (total + value) % arrayLen;
  }
  return total;
}

Handling Collisions

There are two ways to handle hash table collisions.

Separate Chaining
Linear Probing

Separate Chaining

is when the hash table has each index in the array has stored values with more data similar to an array or a linked list.

Linear Probing

When a collision is found, a search is performed throughout the array to find the next empty slot.

Hash Table Keys and Values

Keys - Loops through the hash table array and returns an array of keys in the table

Values - Loops through the hash table array and returns an array of values in the table


 keys(){
    let keysArr = [];
    for(let i = 0; i < this.keyMap.length; i++){
      if(this.keyMap[i]){
        for(let j = 0; j < this.keyMap[i].length; j++){
          if(!keysArr.includes(this.keyMap[i][j][0])){
            keysArr.push(this.keyMap[i][j][0])
          }
        }
      }
    }
    return keysArr;
  }
  values(){
    let valuesArr = [];
    for(let i = 0; i < this.keyMap.length; i++){
      if(this.keyMap[i]){
        for(let j = 0; j < this.keyMap[i].length; j++){
          if(!valuesArr.includes(this.keyMap[i][j][1])){
            valuesArr.push(this.keyMap[i][j][1])
          }
        }

Tree Traversal

Code_Regina — Sun, 31 Oct 2021 17:47:00 +0000

                   -Intro to Tree Traversal
                   -Breadth First Search
                   -Depth First PreOrder
                   -Depth First PostOrder
                   -Depth First InOrder

Intro to Tree Traversal

There are two ways for tree traversal.
Breadth first search and depth first search

Breadth First Search

Steps to take for breadth first search

Create a queue (can be an array) and a variable to store the values of nodes visited.
Place the root node in the queue.
Loop as long as there is anything in the queue. -Dequeue a node from the queue and push the value of the node into the variable that stores the node. -If there is a left property on the node then dequeue add it to the queue. -If there is a right property on the node then dequeue - add it to the queue. -return the variable that stores the value.


class BinarySearchTree {
    constructor(){
        this.root = null;
    }
    insert(value){
        var newNode = new Node(value);
        if(this.root === null){
            this.root = newNode;
            return this;
        }
        var current = this.root;
        while(true){
            if(value === current.value) return undefined;
            if(value < current.value){
                if(current.left === null){
                    current.left = newNode;
                    return this;
                }
                current = current.left;
            } else {
                if(current.right === null){
                    current.right = newNode;
                    return this;
                } 
                current = current.right;
            }
        }
    }
    find(value){
        if(this.root === null) return false;
        var current = this.root,
            found = false;
        while(current && !found){
            if(value < current.value){
                current = current.left;
            } else if(value > current.value){
                current = current.right;
            } else {
                found = true;
            }
        }
        if(!found) return undefined;
        return current;
    }
    contains(value){
        if(this.root === null) return false;
        var current = this.root,
            found = false;
        while(current && !found){
            if(value < current.value){
                current = current.left;
            } else if(value > current.value){
                current = current.right;
            } else {
                return true;
            }
        }
        return false;
    }
    BFS(){
        var node = this.root,
            data = [],
            queue = [];
        queue.push(node);

        while(queue.length){
           node = queue.shift();
           data.push(node.value);
           if(node.left) queue.push(node.left);
           if(node.right) queue.push(node.right);
        }
        return data;
    }
}

Depth First PreOrder

Steps to take for Depth first preorder search

Create a variable to store the values of nodes visited.
Store the root of the BST in a variable called current.
Write a helper function which accepts a node. -Push the value of the node to the variable that stores the values. -If the node has a left property, call the helper function with the left property on the node. -If the node has a right property, call the helper function with the right property on the node. Invoke the helper function with the current variable.


 DFSPreOrder(){
        var data = [];
        function traverse(node){
            data.push(node.value);
            if(node.left) traverse(node.left);
            if(node.right) traverse(node.right);
        }
        traverse(this.root);
        return data;
    }

Depth First PostOrder

Steps to take for Depth first postorder search

Create a variable to store the values of nodes visited.
Store the root of the BST in a variable called current.
Write a helper function which accepts a node. -Push the value of the node to the variable that stores the values. -If the node has a left property, call the helper function with the left property on the node. -If the node has a right property, call the helper function with the right property on the node. Invoke the helper function with the current variable.


    DFSPostOrder(){
        var data = [];
        function traverse(node){
            if(node.left) traverse(node.left);
            if(node.right) traverse(node.right);
            data.push(node.value);
        }
        traverse(this.root);
        return data;
    }

Depth First InOrder

Steps to take for Depth first inorder search

Create a variable to store the values of nodes visited.
Store the root of the BST in a variable called current.
Write a helper function which accepts a node. -Push the value of the node to the variable that stores the values. -If the node has a left property, call the helper function with the left property on the node. -If the node has a right property, call the helper function with the right property on the node. Invoke the helper function with the current variable.

    DFSInOrder(){
        var data = [];
        function traverse(node){
            if(node.left) traverse(node.left);
            data.push(node.value);
            if(node.right) traverse(node.right);
        }
        traverse(this.root);
        return data;
    }
}

Binary Search Trees

Code_Regina — Mon, 04 Oct 2021 23:17:37 +0000

                   -Intro to Trees

                   -Intro to Binary Trees

Intro to Trees

Trees are a data structure that consists of nodes in a parent/child relationship. Tree data structures brach off from on node to the other in a top-down direction.

Each node can point to another node.

Trees are nonlinear data structures because they branch off of other nodes and do not move in a straight forward fashion. The branching makes trees flexible. Meanwhile, lists are linear data structures because they move from one after the other in a straight line direction.

When a data structure is not a tree

This picture is a graph not a tree.
Not a tree because there are nodes that are references other nodes that are not below them.

A node can only point to a child.

A child can not point to a parent.

The root of a tree is the top node.
The child is a node directly connected to another node when moving away from the root.
The siblings is a groups of nodes with the same parent.
The leaf is a node with no children.
The edge is a connection between one node and another.

Intro to Binary Trees

A binary tree is when a node can only have a max of two children. A node may have a single child or no children and still be a binary tree.

Binary Search Tree

Special case of a binary search tree that is sorted in a specific way. BST are used to store data that can be compared.
Every node to the left of a parent node is always less than the parent.
Every node to the right of the parent node is always greater than the parent.

Stacks and Queues

Code_Regina — Fri, 01 Oct 2021 23:57:46 +0000

                   -Intro to Stack
                   -BIG O of Stacks
                   -Intro to Queues

Intro to Stacks

A stack is a last in first out data structure (LIFO) which means that the last element added to the stack will be the first element removed from the stack.

Stacks are used to manage function invocations.
As well as undo/redo actions.

BIG O of Stacks

Intro to Queues

A queue is a first in first out data structure (FIFO)
queues are used in background tasks, uploading resources, printing / task processing


class Queue {
  constructor() {
     this.first = null; 
     this.last = null; 
     this.size = 0; 
   }
 }

class Node {
  constructor(value) {
    this.value = value; 
    this.next = null; 
  }
 }

Doubly Linked Lists

Code_Regina — Fri, 01 Oct 2021 23:24:58 +0000

                   -Intro to Doubly Linked List 
                   -Doubly Linked List: Push
                   -Doubly Linked List: Pop
                   -Doubly Linked List: Shift
                   -Doubly Linked List: Unshift
                   -Doubly Linked List: Get Intro
                   -Doubly Linked List: Set Intro
                   -Doubly Linked List: Insert Intro
                   -Doubly Linked List: Remove Intro
                   -Doubly Linked List: Reverse Intro
                   -Doubly Linked List: BIG O Complexity

Intro to Doubly Linked List

Doubly Linked List is a data structure that is similar to a singly linked list but doubly linked list adds an additional pointer to the previous node as well as the next node. Therefore each node will point in either direction.

There is no indexing.
There is an head and tail.

Doubly Linked List: Push


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


class DoublyLinkedList {
    constructor(){
        this.head = null;
        this.tail = null;
        this.length = 0;
    }
    push(val){
        var newNode = new Node(val);
        if(this.length === 0){
            this.head = newNode;
            this.tail = newNode;
        } else {
            this.tail.next = newNode;
            newNode.prev = this.tail;
            this.tail = newNode;
        }
        this.length++;
        return this;
    }
}

Doubly Linked List: Pop


    pop(){
        if(!this.head) return undefined;
        var poppedNode = this.tail;
        if(this.length === 1){
            this.head = null;
            this.tail = null;
        } else {
            this.tail = poppedNode.prev;
            this.tail.next = null;
            poppedNode.prev = null;
        }
        this.length--;
        return poppedNode;
    }
}

Doubly Linked List: Shift


    shift(){
        if(this.length === 0) return undefined;
        var oldHead = this.head;
        if(this.length === 1){
            this.head = null;
            this.tail = null;
        }else{
            this.head = oldHead.next;
            this.head.prev = null;
            oldHead.next = null;
        }
        this.length--;
        return oldHead;
    }
}

Doubly Linked List: Unshift


    unshift(val){
        var newNode = new Node(val);
        if(this.length === 0) {
            this.head = newNode;
            this.tail = newNode;
        } else {
            this.head.prev = newNode;
            newNode.next = this.head;
            this.head = newNode;
        }
        this.length++;
        return this;
    }
}

Doubly Linked List: Get Intro



   get(index){
        if(index < 0 || index >= this.length) return null;
        var count, current;
        if(index <= this.length/2){
            count = 0;
            current = this.head;
            while(count !== index){
                current = current.next;
                count++;
            }
        } else {
            count = this.length - 1;
            current = this.tail;
            while(count !== index){
                current = current.prev;
                count--;
            }
        }
        return current;
    }
}

Doubly Linked List: Set Intro



    set(index, val){
        var foundNode = this.get(index);
        if(foundNode != null){
            foundNode.val = val;
            return true;
        }
        return false;
    }
}

Doubly Linked List: Insert Intro


    insert(index, val){
        if(index < 0 || index > this.length) return false;
        if(index === 0) return !!this.unshift(val);
        if(index === this.length) return !!this.push(val);

        var newNode = new Node(val);
        var beforeNode = this.get(index-1);
        var afterNode = beforeNode.next;

        beforeNode.next = newNode, newNode.prev = beforeNode;
        newNode.next = afterNode, afterNode.prev = newNode;
        this.length++;
        return true;
    }
}

Doubly Linked List: BIG O Complexity

Diving Deeper into Technologies

Code_Regina — Thu, 30 Sep 2021 17:44:00 +0000

I am going to get back into updating more regularly on here again. A lot of distractions have occurred that have taken time away from my focus. However it doesn't matter because now I will be getting back on track and excited to dive deeper in learning other technologies outside of web development HTML/CSS/JavaScript to keep things interesting.

I will be finishing up my data structure and algorithms course from where I left off of singly linked list.

Starting now from doubly linked list and moving forward.

Also, I took some time away from my web development to earn my security+ certification.

Here is to an active and fun rest of 2021 and busy 2022!