DEV Community: Thomas Cook

My Journey To Become a Software developer.

Thomas Cook — Wed, 24 Aug 2022 14:42:52 +0000

I was born in California, and grew up in Texas and South Carolina. I attended College at Anderson University as a music major. I realized early on that this was not the correct direction for me. I love music but knew with this degree I would end up being a music teacher or something like that. Spent a few years trying to figure out what I was meant to do. I got married in 2017 and eventually had two boys.

It was only after my divorce that I had to make some difficult decisions. My brother was a senior software developer at the time and we both grew up with our father having a hand in the tech world. He is in charge of the training simulators on the naval air base in South Carolina. So this path felt easier to get started in. It was my brother that suggested a coding bootcamp. At the time it sounded hard due to the amount of information and the short timeframe given to complete everything, but starting over on a four year degree would have been too long to complete. I weighed my options and a 15 week coding bootcamp ended up being my best option, in terms of cost and time. So I started doing some research on which camp would be the best fit for me. I kept coming across Flatiron. It had a really good rating and lots of positive reviews. Also had a lot of graduates that ended up getting jobs in said field at a lot of great companies. Now my hardest decision was am I going to stay at home with my kids and go to school or move to Denver with my brother where I had some help if needed and all the time in a day to study and work. I decided the best way for me to do my best job would be to make some sacrifices. The time away from my boys has been so hard but I knew I was doing this for them.

While at Flatiron I quickly made friends with people in my cohort. The 15 week program was broken down into five three week sections that covered a lot of material. It was very intense to say the least. I learned a lot very quickly. The hardest part for me was trying to learn all this new information in a short amount of time, as I had no knowledge of computers or software development prior to starting this program. I definitely had imposter syndrome for a while, which I hear is a very common thing.
While at Flatiron we learned JavaScript, React, Ruby on Rails, CSS, HTML, and how to use things like Postman for API’s and VS code. I really enjoyed learning how to communicate with a computer. Also found out that I liked using CSS to make my projects stand out visually. I am currently in the last week of the program making my final project solo. It is bitter sweet as I am excited to get back home to my kids, but I will miss this cohort. Everyone has been so helpful along the way and got blessed with a great instructor.
I am glad I took the plunge and decided to attend this particular program and move to Denver to complete it. Had a lot of long hard days but in the end it was all worth it. I am very proud of the applications I had a hand in making. Even though some of them weren't the most practical, it was a lot of fun making them and learning the material.
My next steps are to start sending out my resume and keeping my Linkedin profile up to date. I hope to land a position as quickly as possible, and to keep learning as much as I can, as I have only begun to scratch the surface of the amount of information out there on software development. I will never forget my time here at Flatiron or the people I met along the way. They say it's all about your connections and who you know, and I think I now know a lot of great people that will do great things.
In conclusion, if anyone reading this is torn between whether to do a program like this or something else. I will strongly recommend Flatiron or a program like this. Everything is on computers or work with computers, so it's a job field with high demand and great compensation. It sure beats waiting tables or hard manual labor. It’s a great feeling to know that I was capable of doing this, and I will always be grateful for the people that helped me on this journey. I promise to make them all proud.

An Introduction to The Importance of Algorithms and Data Structures in Web Development

Thomas Cook — Sun, 31 Jul 2022 19:39:00 +0000

The Importance of Algorithms and Data Structures

When interviewing for a job in the tech field, a common practice for employers is to have the applicant solve a problem using algorithms instead of using already built out methods. An algorithm is a list of instructions used to solve problems or perform tasks.

An example would be something like reversing a string without using the reverse method. Say you have a string that says “Hi!” , or “Hello World!”. The reverse method would do this very easily for us, but how would you complete this without using a prewritten method? As with most things in life, there is more than one way to solve this. One way would be to iterate over the string and place the following letter in front of the previous letter. The code would look something like this.

def reverse_string(str)
    reversed_string = “”

str.chars.each do |char|
    reversed_string = char + reversed_str
end

reversed_str
end

puts “Expecting: “!iH”
puts reverse_string(“Hi!)

puts “Expecting: “!dlroW olleH”
puts reverse_string(“Hello World!”)

Algorithms are what is happening under the hood of these functions. Someone wrote these functions to make writing code easier to read, understand, and be less repetitive. It is easier to write a function that encapsulates an algorithm, like the reverse string, and call the function when needed instead of rewriting the algorithm code every time. Some algorithms can be very lengthy and difficult to understand so placing it in a well-named function call can abstract some of the complexities that are not necessarily needed to understand the code.

Basically any method can be written using an algorithm. Some common types of algorithms are:

Brute Force algorithm
Greedy algorithm
Recursive algorithm
Backtracking algorithm
Divide & Conquer algorithm
Dynamic programming algorithm
Randomized algorithm

Brute Force Algorithm

This is the simplest of all the algorithms that can be devised to solve a problem. Every problem can be solved using the brute force approach, but generally not with the appreciable space and time complexity. Space and time complexity is the time taken by the algorithm to complete each set of instructions.

//Searching for an element in a sorted array of elements

Int main() {
    //sorted array
    Int arr[] = { 1, 2, 3, 4, 6 };
    //searching for 5
    Int search = 5;
    bool flag = false;
    // for loop to iterate over array until i = 5
    // time complexity 0(n)
    for (int i=0; 1<5; i++)
        {
            If (arr[i] == search)
            Flag = true;
        }
    if (flag == true)
        Count << “found”;
    else
        Count << “not found”;
    return 0;
}

Greedy algorithm

For this algorithm, a decision is made that sounds good at the time without considering the future. This algorithm doesn’t always work, but when it does, it works like a charm.

Greedily choosing the best option
Optimal substructure property: if an optimal solution can be found by retrieving the optimal solution to its subproblems.

This algorithm is easy to device and most of the time is the simplest one. Making locally best decisions doesn’t always work as it sounds. It is usually replaced by a reliable solution called Dynamic Programming, which will be covered later.

An example could be a scheduling problem. Consider a situation where you have starting and end times of events. How could we optimize the number of events that can be organized where no two events overlap. A brute force solution would be to sort the events by starting times.

The events with starting and ending times.



The events sorted by start time

With this approach, the only non overlapping events are A, F. Can we get a better outcome? What about the Greedy method? With this algorithm we would sort based on end times.

The events sorted by end time

With this approach we now have B, E, C that don’t overlap. Hence in such cases, the Greedy algorithm gives the best solution to this particular problem.

Recursive algorithm

Probably one of the simplest algorithms to devise, because it does not require thinking about every subproblem. A developer just needs to focus on the existing cases and the solution of the simplest subproblem, all other complexity will be handled by the algorithm automatically. Recursion simply means that a method calls itself to solve its subproblems.

//Factorial of a number
Int Fact (x) {
    //Base case is 0 the return is 1
    If(x == 0) 
        return 1;
    //returns the factorial of x-1 multiplied by x
Return x*Fact(x-1);
}

Remember to give the base case or else the loop will be infinite and give a memory error.

Backtracking algorithm

An improvement on the brute force approach. This algorithm starts with one possible option and tries to solve the problem. If unsuccessful it will backtrack and try a different approach. This is a form of recursion.

Divide and conquer algorithm

One of the most used in programming. This approach will divide the problems into subproblems, solve for each and then combine them to form the solution to the given problem. It is not possible to solve all problems using this algorithm.

This problem is split into two parts of n/a and n/b size. They are computed separately and recursively to get back the result and combine them to get the solution.

Dynamic algorithm

This is the most efficient way to solve a problem. It simply means remembering the past and applying it to future corresponding results.

This approach has two properties:

Optimal Substructure
Overlapping subproblems

There are also two versions:

Bottom-up approach: start with the last possible subproblem and use the results of those to solve the above subproblems.
Top-down approach: start with solving the first problem to arrive at the required subproblem, and solve it using the previously solved subproblems.

Randomized algorithm

This approach uses random numbers to decide what to do next anywhere in its logic. An example would be randomized quick sort. We use a random number to pick the next pivot, or shuffle the array randomly. Normally this randomness is used to reduce the time or space complexity in the algorithm. In terms of quick sort, if we fail to choose the correct element the complexity could end up being O(n^2); this is the worst case scenario. If chosen correctly the randomized algorithm can have an ideal complexity of O(nlogn).

Conclusion

This has only been an introduction to the topic of algorithms, there is a lot more that was not covered here. Knowing how to write and use algorithms will be very beneficial when the time comes for a technical interview. Lastly, understanding the basic logic of algorithms and how to pseudocode that logic is a great place to start! If nerves get the better of you during the interview, then at the very least you can write out the logic of what the algorithm is supposed to do and often times this is enough to prove that you have the basic understanding of algorithms and how they function.

Introduction to React hooks

Thomas Cook — Tue, 19 Jul 2022 17:46:03 +0000

React Hooks

One of the many tools React has available to you is the use of hooks. Previously you had to write a class to utilize state and other React features. These hooks allow us to hook into parts of the React library. There are ten different types of hooks available, I will cover the first 5 here.

useState
useEffect
useContext
useRef
useReducer
useMemo
useCallback
useImperativeHandle
useLayoutEffect
useDebugValue

The two most common are useState and useEffect.

useState
The most important and most used hook is useState. Its main purpose is to handle reactive data; basically anything that changes in the app uses state. Switching something from on to off or typing in an input field are examples of how useState is commonly implemented. Once any of the data changes, react can re-render the UI. useState requires three things:

useState needs to be imported into the component.

import { useState } from “react”;

useState needs to be initialized. We do this by calling usesState in our function component.

const [food, setFood] = useState(“”);  // initializing with an empty string

It needs a current state and a setter function to update that state. These last two requirements can be written in one line.

import { useState } from “react”;

function FavoriteFood() {
    const [food, setFood] = useState(“”); 
}

The first value, food, is our current state. The second, setFood, is the function that updates our state. And useState is initialized to an empty string.

Always use the setter function to update your state.

setFood( “Cheeseburger”);

useEffect
This hook allows you to perform side effects in your components. Such as timers and fetching data. useEffect accepts two arguments. The first argument is a function that will run when useEffect is triggered and the second is a dependency array that will hold which items will trigger the function, it is not required and by default will run on every render cycle. Like all hooks, useEffect needs to be imported as well.

import { useEffect } from “react’;

useEffect runs on every render. And every re-render triggers another effect. Sometimes this is the desired outcome. If not there are a few ways to control when side effects run.

No dependency passed
An empty array
Props or state values

useEffect(() => {
    //No dependency passed
    //Runs on every render
});

useEffect(() => {
    //An empty array
    //runs only on the first render
}, []);

useEffect(() => {
    //Props or state values
    //Runs on the first render
    //And any time and dependency value changes
}, [prop, state]);

Some effects require cleanup to reduce memory leaks. Timeouts, subscriptions, event listeners, and other effects that are no longer needed should be disposed of. We do this by including a return function at the end of the useEffect Hook.

return () => clearTimeout(timer)
}, []);

useContext
This hook allows access to work with React’s Context API. This allows us to share data within its component tree without the need to be passed down to a component through props. It is a way to manage the state globally. useContext can be used in conjunction with useState to share state between deeply nested components. This is far easier than useState alone because the state should be held by the highest parent component that requires access to that state.
To use this hook you will need to import from react and initialize it.

import { useState, createContext, useContext } from “react”;

const UserContext = createContext()

Function Componet1() {
    Const [user, setUser] = useState(“Thomas Cook”);
    Return (
        <UserContext.Provider value={user}>
            <h1>{‘Hello ${user}!’}</h1>
            <Component2 user={user} />
        </UserContext.Provider>
    );
}
Function Component2() {
    Return (
        <>
            <h1>Component 2</h1>
            <Component3 />
        </>
    ):
}
Function Component3() {
    Const user = useContext(UserContext);

    Return (
        <>
            <h1>Component 3</h1>
            <h2>{‘Hello ${user} again!’}</h2>
        </>
    );
}

The createContext function is used with the context provider to wrap the tree of components that need the state context. Then you can access the state context in all components

useRef
This hook allows you to persist values between renders. It can create mutable objects and is very similar to useState in that it tracks the changing values. The main difference is that useRef doesn’t trigger a re-render upon value changes. It only returns one item, an object called current. useRef is initialized and set with a value of useref(0).

Const count = {current: 0}
//can be accessed using .current
Count.current

useReducer
useReducer is very similar to the useState hook. This hook also allows for custom state logic. useReducer may be useful in situations where you need to keep track of multiple pieces of state that rely on complex logic. It uses a Redux Pattern to manage state. Instead of updating state directly, we dispatch actions that go to a reducer function, and then figure out how to compute the next state.

That's so fetching:

Thomas Cook — Mon, 11 Jul 2022 15:35:38 +0000

*That’s so fetching: an introduction to fetch requests, and what you can do with the information fetched. *

A fetch request is used to request information from a server and load or manipulate that information on a webpage. The types of request you can do are

GET
POST
PATCH
PUT
DELETE
HEAD
OPTIONS
CONNECT
TRACE

For this blog we will be focusing on the most common: GET, POST, PATCH, PUT, DELETE. These are also known as CRUD operations: create, read, update, and delete.

GET
The GET request, or read, is your default request. All other request methods must be specified when performing the fetch. An example of a GET request would be something like loading your favorite webpage, or searching for sports data. In JavaScript the syntax is

fetch(“http://localhost:9000”)
.then(response => response.json())
.then(data => console.log(data)

Fetch requests are asynchronous; the response received from the request is a promise to get the information requested and send it back to the client. To make information easier to send across the web, it is sent as a string. Once that information is sent back to the client we call .json(), another promise, which turns that string into a Javascript object that we can use.

POST/PUT
The POST request, or create, is generally used to submit information to the server. An example would be anything with a submit button, or adding your account information to a database when you join a new website. A POST/PUT is not a regular GET request, it requires a bit more information to be passed into it. It needs a method parameter to tell what type of request we need. A headers parameter to represent what type of information we are using, and a body parameter that holds the information we are trying to add. Lastly we need to turn body information into a string to send the information across the web. To do this we use a tool called JSON.stringify(), which converts json objects into strings.

fetch(“http://localhost:9000”, {
Method: ‘POST’
Headers: {
    ‘Content-Type’: ‘application/json’,
},
Body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => console.log(data)

You could also use a PUT in place of a POST, both do the same action. The main difference is that PUT requests are idempotent, meaning that an identical request can be made once or several times in a row with the same effect while leaving the server in the same state, in other words PUT won’t load duplicates.

PATCH
The PATCH request, or update, is used to update or modify a particular piece of information in the API. An example would be editing or updating your personal information. This method is written similarly to a POST request.

fetch(“http://localhost:9000” + id, {
Method: ‘PATCH’
Headers: {
    ‘Content-Type’: ‘application/json’,
},
Body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => console.log(data)

DELETE
The DELETE request requires the URL path to be specific, sometimes with an id passed to specify which item to delete. An example would be canceling your online subscription, or terminating your account. For a DELETE request all that needs to be done is the type of method. The headers and body are not needed.

fetch(“http://localhost:9000” + id, {
Method: ‘DELETE’
})
.then(response => response.json())
.then(data => console.log(“Deleted”))

There are many more options available for working with fetch requests. The options mentioned in this blog are the most commonly used which will be used for the majority of the basic website work in gathering and submitting information. Using fetch requests isn’t the only way of performing these basic tasks but it is an easy and logical way of asynchronously working with data that is built into JavaScript.

Function Introduction

Thomas Cook — Tue, 21 Jun 2022 20:56:46 +0000

*Function function, what’s your function? *

Simply put, a function is a piece of code that can be reused as many times as you like instead of duplicating the code each time that you need to execute that specific functionality. Functions are the building blocks of code in JavaScript. They perform various tasks, like keeping track of time for an alarm clock, or they can calculate a multitude of values, such as a calculator.

In JavaScript, another name for key words is reserved words. Reserved words cannot be used as a variable’s name, labels, or function names. Function is one of these reserved words. For further information and to see a full list of reserved words I recommend checking out, https://www.w3schools.com/js/js_reserved.asp.

Functions allow programmers and developers to break down a complex or repetitive section of code into smaller pieces, each of which performs a particular task. When the function is created and made available, all that needs to be done is to call the function by name and pass information as parameters to it if needed; these parameters are given each time the function is called. Aside from reusability, breaking your functions down into smaller chunks of code will also make your code more readable, more testable and easier to debug. Functions are able to call themselves, define themselves and even redefine themselves! One particular circumstance where this is especially useful is when you want to alter the program flow due to changing circumstances.

Function Declaration
Function declaration is a way of defining sets of instructions in a program that execute when called. The different ways that a function can be declared inJavaScript are:
● Arrow Function
● Anonymous Function
● Function Expression
● Hoisting
● Constructor Functions
● Immediately Invoked Function Expression

Arrow Functions
Arrow Functions help to make our code more readable because it can be written on one line and, when the function only has one line it can have a default return! If your code is longer, then it is recommended to use the function expression syntax. In fact, if you only have one parameter in an arrow function, you can skip the parentheses.
greet = (data) => “Hello ” + data;
becomes
greet = data => “Hello ” + data;

The syntax in JavaScript for a regular function:
function greet() {
return “Hello World!”
};

Syntax for an arrow Function:
greet = () => return “Hello World!”;

Anonymous Functions
Anonymous Functions do not have a name in the function definition. Anonymous functions are declared using only the function keyword and parentheses. Basically built and used for instant function execution within a function as a parameter.

Function () { console.log(”Hello World!)
};

Anonymous functions can be assigned to variables and can even be passed as an argument of a function.

Const greet = function () {
console.log(“Hello World!”)
};
greet();

sayHello(function() {
console.log(“Hello World!”)
});

Function Expression
Function Expressions are functions that have a name, which is stored like a variable and can be called to invoke the function. This variable name is followed by () and inside of the parentheses you can have parameters if needed. The function name can be omitted, in which case the function is anonymous.

Const greet = function () {
console.log(“Welcome to Flatiron!”)
};
greet();

Hoisting
In JavaScript, variables and functions can be used before they are defined and this is possible thanks to Hoisting. Hoisting is what allows variable declarations to be “moved” to the top of the current scope (top of current script or current function). This lets a variable or a function be used before it has been declared. As the page information is loaded from top to bottom left to right. Hoisting also applies to classes that are defined using a class declaration.

greet(“Tom!”);

Function greet(name) {
console.log(“Hello “ + name)
};

Constructor Functions
Constructor Functions are a special type of function that creates and initializes an object instance of a class which allows us to use the word ‘this’ as a substitute for the new object when created. When an object is called using the ‘new’ keyword, the constructor sets the values for any existing properties. It is also common to name these functions with an upper-case first letter.

function Friends(first, last, age) {
this.firstName = first;
this.lastName = last;
this.age = age;
}

Const newRoommate = new Friends(“Tim”, “Jones”, 35);

Immediately Invoked Function Expression
An IIFE, also known as a Self-Executing Anonymous Function, runs as soon as it is defined and
contains two major parts.

The first is the anonymous function with lexical scope enclosed within parentheses (). This prevents accessing variables within the IIFE phrase as well as polluting the global scope.
The second part creates the immediately invoked function expression () through which the JavaScript engine will directly interpret the function.

This function style is mainly used to limit the number of global variables. Especially if it is
containing code that will not be reused. In such cases using a function declaration of function
expression would be better.

(function greet() {
return “Hello World!”})();

There is much more information available about functions, this is just an introduction to the term, and its syntax and the various ways to define them.