DEV Community: Jonathan McIntosh

Our Relationship with Technology

Jonathan McIntosh — Tue, 14 May 2024 03:34:45 +0000

2003: The year I was born in Canada. The most popular phone sold that year was the Nokia 1100. Throughout my entire life, computers, Google Search, iPods, and the Internet have always existed. Although these technologies have evolved tremendously, they've always been a part of my world. Today, I ask: what should our relationship with technology be?

If we travel back in time to the 1980s, computers were strictly for work. You couldn't watch videos, talk to friends, or do much else. They were also expensive—according to Google AI, "The original Macintosh, released in 1984, cost $2,495, roughly equivalent to $7,300 in 2023". Steve Jobs was a visionary, and the graphical user interface (GUI) started something bigger than anyone could have imagined. Then, technology became more personal: laptops, flip phones, iPods, and finally iPhones, each iteration more portable and tailored to our preferences.

Technology has undeniably improved our lives. We carry cameras everywhere; communication is lightning fast, and we can access the entire wealth of human knowledge at our fingertips. Moving forward, technology will only become a larger part of our lives. We face a choice: fully embrace technology and the convenience it brings, or let it play a more minor role in our lives.

Consider this: as of April 2024(according to statista), there are 5.44 billion internet users worldwide, amounting to 67.1% of the global population. More people use the internet than those who do not. As coders we get to build a small part of those internet users experience.

If we take a step back for a second, we can look and figure out what role it plays in our lives. How much work, entertainment, communication happens on theses devices. Technology was created by humans for humans. For those creating technology—coders, designers, anyone in tech—when was the last time you were truly amazed by a piece of software or hardware? Why was that? We create to solve problems for others, whether we interact with them directly or not. Making people’s lives easier is one of humanity's greatest roles.

Continuing on the thought of taking a step back, I attended a talk this week in Boulder where a woman in the AI space highlighted a key aspect of our relationship with technology. She pointed out that despite the remarkable advancements in AI, some people in today's society find comfort in their lives only through interactions with chatbots due to loneliness. This is a real business venue. This reality underscores a significant responsibility for us as developers.

This brings me to the main point of this talk: life should not be all about technology. While technology has the power to enhance our lives in numerous ways, it's crucial to ensure it does not replace genuine human connections and experiences. We must strive to create a balance, allowing technology to serve as a tool that enriches our lives without becoming a substitute for the irreplaceable value of human interaction and natural experiences.

Death is certain; when it comes, we can’t take our work with us. None of the code, hardware, UI/UX designs, or security patches. I doubt anyone will wish they had worked more on their deathbed. Coding and technology should be part of our lives, but not the entirety. Go outside, appreciate nature. Pause from the fast-paced life of keyboards and bugs to take in the natural beauty of your environment—unless you live in Saskatchewan, then I don't know what to tell you.

Share your thoughts in the comments, and have a great day wherever you are.

Flask and APIs

Jonathan McIntosh — Sat, 04 May 2024 21:32:10 +0000

Hello,

Once again I cannot believe I am already this far into the program. I was just writing my first blog yesterday, and Now there's only 4 weeks left of the program. Insane. Anyway, let's learn about Flask today

APIs
First you might be asking, what is an API? Why are they important? an API(Application Programming Interface) is a practical way for developers for populate the frontend of a website with dataset. There are hundreds of thousands to millions of apis available made by other people, all with their own unique dataset. For example, I can access all the characters in a Lord of the Rings api or all the different plants in a Ecosystem api. the usefulness of api's depends on how big the dataset is, how easy it is to navigate, and how well the documentation for the api is. A practical example of how a developer would use an api would be me building a website where you can see the statistics of all your social media pages, so I would grab data from the apis of the respective websites (Facebook, Instagram, Youtube, Reddit, etc.) and then take that data and display that on my website. Apis are not designed for normal people to use, but for developers like myself.

Flask
Apis are a big part in where Flask comes in. What if we have our own database? We can't access that database from the frontend directly, so we can build our own API. Last post I talked about Python, SQL and relationships. Flask in itself is not a whole new language, but builds upon those so we can put it all together. There are two different versions of Flask; Flask-Restful, and Flask-Rest. They both perform the same actions, just with different syntax. I personally prefer Flask-Rest, so from this point I will be showing code examples using that syntax. Let me show you some code:

@app.route(/users, methods={"GET",})
def get_users():
   users = Users.query.all()
   return users.to_dict(), 200

This is a very basic route. When we define @app.route, the /users indicates one route we've defined, and Get means we can only GET data from this route. For example, if we created an API hosted on a website Flatiron.com/users, we would get all the users. users within the code querys the database, and when we run to_dict(), that turns the data into a dictionary, which is a datatype in Python. You might be wondering, what does the 200 do? With HTTP, they have something called status codes for us developers. One of the most common error codes you might recognize is 404 Error not found. There is also other different codes;

200 OK
201 Created
400 Bad Request
401 Unauthorized
403 Forbidden
500 Internal Server

Full Functioning Routes
Often you as a user will not need to know these codes because only us developers need to know it and it helps with bug-fixing. There are many different methods we can add in routes, but there are 4 major ones;

GET
PATCH
POST
DELETE

You can probably assume what these do. GET just retrieves data, PATCH updates data, POST adds new data, and DELETE, deletes data(duh). Let us create a new route that allows us to do all 4 methods to a /cars route;

@app.route('/cars/<int:id>', methods=["GET", "POST", "PATCH", "DELETE"])
def cars(id):
    car = CAR.query.filter(Car.id == id).first()
    if request.method == "GET":
        cars = Cars.query.all()
        return cars.to_dict(), 200
    elif request.method == "POST":
        data = request.get_json()
        new_car = CAR(
            name=data['name'],
            year=data['year'],
            company=data['company']
        )
        db.session.add(new_car)
        db.session.commit()
        return new_car.to_dict(), 201
    elif request.method == "PATCH":
        data = request.get_json()
        for item in data:
            setattr(car, item, data[item])
        db.session.add(car)
        db.session.commit()
        return car.to_dict(), 202
    elif request.method == "DELETE":
        db.session.delete(car)
        db.session.commit()
        return {}, 204

In this route, we have done full CRUD(Create, Read, Update, Delete). Unless if you build an API, you usually only have access to read it. Now that we have build this api, we can build our frontend to access the data:

function cars(id){
fetch('/api/cars/${id}')
 .then(r=> r.json())
 .then(data => {
  someState(data)
  }
}

return (
<div>
<h1 onClick={() => cars()}>Click me!</h1>
</div>

Bringing all my work thus far at flatiron to full circle. I have learned so much the past 11 weeks, and I cannot wait to learn even more for my phase 5 project! See you guys next time.

Python and SQL: Objects in Programming

Jonathan McIntosh — Wed, 17 Apr 2024 17:28:57 +0000

I am now in my 9 week of coding bootcamp, which means by next week I will be done 2/3 of my program. Up until now, I have been learning front-end development, or everything we see on websites and their respective backend. For the past 2 1/2 weeks, I have been learning the complete backend with the coding Languages Python and SQL(Search Query Language). Let's delve into it:

Python Syntax
Although the logic can be similar, Python syntax is different than Javascript. For example, here's how you write a function in Javascript:

function addNumbers(){
    return 9+10
}

here's how to write the same function in Python:

def add_number():
    return 9+10

a function in python is written with def, and we also use what developers call "Snake Case" naming where there is an underscore in_between_each_word. "Camel Case" is a naming convention where you capitalizeEachWord except the first one. Indentation is also very important in python.

Python Classes
This is one of the most important concepts we studied this phase: Classes. Imagine if we are a coder and want to create multiple car companies. They all contain the same info: Name, how many models they have produced, how many they have stopped producing, and the description. We would manually write out a Bunch of objects that would have the info like down below:

Ford = {
    "name": "Ford",
    "models produced": 68,
    "models discontinued": 287,
    "description": "They make F-150s"
}
Ferrari = {
    "name": "Ferrari",
    "models produced": 20,
    "models discontinued": 88,
    "description": "They make beautiful red sport cars"
}

and then we can access them like so:

Ferrari['name']
=> Ferrari
Ford['description']
=> They make F-150s

but that would be so tiring to type out for every. Single. Company. Especially if you are doing over 100 of them; it would take a long time to type out. That is where Classes come in: We can create the same type of object so that the data types are consistent across the board. For example, this is what a company class would look like:

class Company:
    def __init__(self, name, models_produced, models_discontinued, description):
        self.name = name
        self.models_produced = models_produced
        self.models_discontinued = models_discontinued
        self.description = description

and here's how you would create an instance of that class:

ferrari = Company("Ferrari", 12, 42, "love this company")

so when you try to pass in less or more than 3 things into the company class, it will throw an error. I can also cover getter and setter functions to verify if the information typed in were numbers or letters, but I won't get into that.

SQL
What I actually want to get to is relationships. In real life they are complicated, and in Python they are complicated. There are three types: One to One, One to Many, and Many to Many. An example of a One to One relationship would be like a dog that owns a single toy: the toy has one dog and the dog has one toy. Another example of a One to Many relationship would be that same dog having many toys: one dog can have many toys, but each toy can only have one dog. The final concept is a many to many relationship; think of a dog daycare. Many dogs share many toys, so a toy can have many dogs, and a dog can have many toys. Simple, right? The main functionality of SQL is inserting data into tables. Similarly to a spreadsheet, these tables have rows, columns and cells. one instance of a dataset is a row, the the type and name of the data is the column, and the whole dataset is the table itself. We use SQL to create multiple tables and establish relationships with each other, read, create, update and delete data from these tables. Due to the shortness of this article, I will not go into the syntax of SQL but it has been very fun to learn and very simple

With only 2 more phases to go, I can't wait to continue to learn more, even with the headaches of Python. See you guys in the next one!

The Foundations of JSX and React

Jonathan McIntosh — Sat, 23 Mar 2024 19:37:05 +0000

Hello once again, I am now in my 5th Week of bootcamp, and would further like to cover Javascript and react in this post. Last post we did not cover HTML, but to give a quick overview of HTML it's basically what dictates the content on a website, not how it looks. So if I wanted to create a website that displays an image and has the text "Hello There" it would look like this:

<!DOCTYPE html>
<html>
    <head>
        <title>Website</title>
    </head>
    <body>
        <img src="https://bs-uploads.toptal.io/blackfishuploads/components/blog_post_page/ontent/cover_image_file/cover_image/1279225/retina_1708x683_0521-react-redux-and-immutablejs-Waldek_Newsletter-993b50f4ae56e9ee6e024a309c23a6c4.png">
        <p>Hello There</p>
    </body>
</html>

Let me quickly Break down what is happening here: the <html> tag is used to enclose the entire file, the <head> tag includes all the metadata of the website, like the website icon and title, the <body> is everything you see on the website, the <img> tag encloses the image, and the <p> tag encloses any text that is a paragraph. There is obviously more to html than this, but that is a simple overview. If I wanted to append a simple p tag with standard Javascript, I would have to do the following;

const selecDiv = document.querySelector(#divid)
const paragraph = document.createElement("p")
paragraph.textContent = "Hello There"
selecDiv.append(paragraph)

that is what appending would look like in normal Javascript. but what I've been learning this past 2 weeks is an extension of Javascript called JSX, which allows you to write html right into Javascript, which is super helpful. For example, if I wanted to do exactly the same thing as above, all I would need to do is:

function appendParagraph(){
    return (<p>Hello There</p>)
}

See, look how simple that is. Only two lines of code and I can see exactly what type of html I am coding in and exactly how it looks like. In the end making it easier for me to build websites and make them quicker(ish). There is also one concept that we covered that was extremely difficult for me to grasp: and that was something called States. Now you might think of all 50 of them that exist in the US, but that's not what I am talking about. To boil it down, states are basically what allows us to make more interactive and dynamic websites using datasets or changing how the website looks depending how you interact with it. Let me give you a really simple example of a state;

const [light, changeLight] = useState(true)

function lightSwitch(){
return 
{light? (<p onClick={changeLight(!light)}>light on</p>)
: 
(<p onClick={changeLight(!light)}>light off</p>)}

let me break down what is happening in the above code. What we first did was declare a State with light being the state and changeLight to be the modifier function. We set the initial state to true, which means the state will stay at that state until it is modified. Next what we did was create a function with something we call a Ternary. How a ternary basically works from what I've learned is if a state is true, it renders one thing, and if it false, then it renders something else. so you see the light? after the curly brackets? if the state is true, it executes the code before the :, if it is false it executes the code after it. One final part, we created an onClick that changes the state, so we use the changeLight setter function to change the state to the opposite of what it currently is. That's why it has an exclamation mark at the beginning within the brackets. When you view this on the browser, every time you click the text, it switches from light on to light off.

There is also one more concept we did last phase, but I did not cover in my last post; fetch. We use it to grab data from a local database or an API(Application programming interface) to get data so we can append it to our website. Let's see what a fetch looks like;

const emptyObj = {}

function getData(){
fetch("link")
    .then(r => r.json())
    .then(data => emptyObj(data)

As a final concept for this post, let's break down what is happening; With fetch, you can input any API or localhost link to retrieve data, .then tells what to do with that data, so it turns it into a readable .json. r being the response of the fetch. Then it finally takes that data and puts it in the emptyObj we defined, so when you see the code run in real time, it first is undefined(basically empty data), then once the fetch is complete it is filled with the data from the fetch.

There has been so much I have learned from this school, and I can't wait to learn even more. So many headaches, joys from it finally clicking in my brain, and happiness from being able to create things I enjoy, like my Phase 1 project. Week 5 of 15, done. Can't wait for the next 10!

Javascript

Jonathan McIntosh — Sat, 02 Mar 2024 18:03:05 +0000

Hello everyone, I just finished my first two weeks of coding bootcamp and I wanted to share some concepts I learned about Javascript. We'll start at the very basics, which is declaring a variable;

let or const number = 5
number
=> 5

when we declare this variable, we can access this anytime throughout the code later, unless the variable is within a function. the difference between const and let is that the value assigned to const cannot be reassigned, while the value of let can. Variables can also have words in them, or what as known as a string. Next we have functions;

function doAdd(){
    return 2 + 2
}

doAdd()
=> 4

Basically the point of a function is to run code that we can call upon later. There are more technical concepts about where and when we can call functions and about scope, but I will not cover it in this post. We can also pass arguments into functions, making our dataset more dynamic;

function doSubtract(num1, num2){
    return (num1 - num2)
}

doSubtract(2,6)
=> -4

We can pass any number into the parentheses as arguments when we call the function, giving us more power to work dynamically with data rather than static data. We also have Arrays, which are declared like variables. let me show you a visual comparison of strings vs arrays;

//String
const Apple = "Macintosh"

Apple
=> Macintosh

//Array 
const bigUsCities = ["Atlanta","Seattle","NYC","Los Angeles","Denver","Houston","Miami"];

bigUsCities
=> "Atlanta","Seattle","NYC","Los Angeles","Denver","Houston","Miami"

We also have objects, which are used to store more specific data;

const contact = {
    Name: "Jonny Appleseed",
    State: "Colorado",
    City: "Aurora",
    PhoneNumber: "778-330-2389"
},
{
    Name: "Kratos",
    State: "Midgard",
    City: "Unkown",
    PhoneNumber: "1-888-447-5594"
}

all the values within objects are called keys, and you can access that data by using key notation;

contact.name
=> "Jonny Appleseed"

The nice thing about objects and arrays and variables is that they are all datasets that we can access through functions, making our functions even more dynamic;

function contactCallList(){
contact.forEach((contact) => {
  console.log(contact)
})

contactCallList()
=> {Name: "Jonny Appleseed", State: "Colorado", City: "Aurora", PhoneNumber: "778-330-2389"}{Name: "Kratos", State: "Midgard", City: "Unknown", PhoneNumber: "1-888-447-5594"}

There are many other ways to manipulate and get data from arrays and objects, but the main point is that we can use these to build functions and websites that can have whatever data input we have. This next week I will be building a personal project with another person in my cohort. In this post there were many other concepts such as the DOM, Databases, appending to the DOM, but for the simplicity of those reading I will not cover those topics but just cover these to begin to understand what coding is like. I have learned so much in the past two weeks and I will learn even more in the next 13. There has been so many frustrations and joys from learning code, but I wouldn't be doing anything else right now.