DEV Community: Sackett Keesen

React Router Hooks Guide

Sackett Keesen — Thu, 30 Nov 2023 04:47:32 +0000

React Router is a library that was created to help create navigation links in a website. Similar to how the react library gives us hooks to more easily create the user interface of a web application the React Router library gives use hooks and tools to add navigations routes in a simpler fashion to our applications' going to cover some of the commonly used hooks in React Router and explain what they are used for.

useNavigate()

One of the most useful hooks included in the react router library is the useNavigate() hook. The useNavigate() hook does what the name implies and allows you to add a navigation route to a component within your application. For example if you had a webpage that showed a list of properties and once a property was clicked it would navigate the user to a new page that only showed that properties details you could use the useNavigate() hook to tell your website where to take the user once they click on the property. This is also an extremely useful tool when creating a navbar. You can create a route for each link in the navbar to bring the user to your desired route.

useParams()

Another very useful hook in the library is useParams(). This tool is used to use dynamic information from the URL of the route. This is a great tool when you are trying to get create a route that is directed towards a specific user ID. You will need the dynamic ability of useParams() to take the user ID out of the URL route and then you can use it in your code via useParams() to fetch and generate specific details based on the object ID. A good example of this is if you were creating a website that sold different products. When the user clicks on a product you want them to be directed to a page that gives additional details on that product including price, weight, shipping etc... those details are custom to each product being sold so you need the unique identifier(ID) from the URL Route to run through your fetch and to populate the new page the user is on.

useLocation()

useLocation() is a tool that gives us back an object of the information within the URL. This is similar to useParams() but gives us additional information. This tool can be useful for tracking views of a specific URL. Say you want to know how many views each product on your website is getting. Well based off of the unique link for each product and the useLocation() hook you can track the amount of views through creating a function that adds a counter every time the specific location is visited.

There are many more useful react router hooks that can be used but the key is practice. Make sure you stay refreshed on the official react router documentation linked here https://reactrouter.com/en/main.

Libraries vs Packages Python

Sackett Keesen — Thu, 16 Nov 2023 14:52:31 +0000

Coding in python is known for its readability for other programmers. One important way of creating readable code in python is through using libraries and packages. They have some similarities and important differences so I am going to go through each of them in more detail.

Python Packages

A python package typically consists of several modules and is a parent folder containing multiple other folders inside of it. Similar to how we use file explorer on our computers to save information within a folder. In visual code it is also easy to see folders within folders. One purpose of these packages is to create a more hierarchal structure hence the readability of python but it also allows for the ability to share modules with other packages in your code. You now have the ability to write functions and put them into a more universal scope by sharing those functions to other packages within your code. Take a look at the image below.

One purpose of these packages is to create a more hierarchal structure hence the readability of python but it also allows for the ability to share modules with other packages in your code.

If you wanted to share a function within your Training package with your submission package you could do the following at the top of one of your Submission package files that will be needing the function. From the hierarchy shown here it would be either submit.py or run_context.py. You would then type the following.

from my_model.training import dataset

Python Libraries

Libraries can have a similar feel to packages but also have some key differences. A library is a collection of modules that are frequently used that a developer can take advantage of to make their coding easier. It allows for less redundancy of code and usually the ability to use "shortcuts" to get the same result by taking advantage of a pre made library. Libraries allow us to "stand on the shoulders of giants" as my professor would say by using their pre written code that is being run under the hood in these libraries. You will know you are using a library if it does npt have its own file but it does show up in your Pipfile. An example of this is using flask_restful to create APIs. You can code out each API without using flask_restful but if you import the library there is pre built functionality that makes creating APIs faster and more modular as well as reducing the risk for any errors while typing the code. Importing a library is fairly simple. Within the file you are wanting to use the functionality within you will type the following code at the top of the page.

From "library" import "function"
or in the flask_restful scenario
From Flask_restful import Resource

Now you can use the Resource functionality within your code.

You can google libraries for Python or really any language you are coding in to find great time saving tools to use within your code to increase functionality and readability.

My review on JavaScript, React, CSS, Python and SQL

Sackett Keesen — Wed, 08 Nov 2023 17:50:31 +0000

So far in my coding career I have learned 5 different languages. I am going to break down each language in this post and give my pros and cons that I experienced in each one as well as share which is my favorite.

JavaScript

JavaScript is one of the most common programming languages and nearly anyone who knows how to code has learned this language. It gives great fundamentals to how other coding languages work is generally pretty universal and considered a core technology in this field. JavaScript has the ability to run functions as well as create an interactive webpage but is mostly used for adding and editing HTML elements to make your webpage more interactive and have better UI. From my experience you can produce almost anything you need to in JavaScript as its applications are vast but it can be cumbersome with some of the syntax and length of code needed for some more simple tasks. I would put JavaScript in the middle of the road for me as far as programming languages go due to the fact that REACT is very similar but feels a bit more user friendly to me.

React

React is very similar to JavaScript but to me it feels a bit more modern. React can be used to build web, mobile, and desktop applications, making it extremely useful in a world where people are using mobile applications more than desktop. It using many of the core coding principles that you find in JavaScript but also has its own nuances. You can create functions and event listeners similar to JavaScript but you will also need to use state frequently as it is a core principle in React. I found that the ability to include your HTML code in your react code made for a quicker and more straight forward way to edit the UI and functionality of your app. Due to the high functionality and user friendly aspects I put React at the top of the programming languages I have learned so far.

CSS

CSS also known as cascading style sheets is a language that you will use in combination with a JavaScript or React or any other language you are using to build the structure of an app/website. CSS is used to describe how all of the HTML images are to be displayed on the website from fonts, to images, to transitions. Picture any of the graphic design aspects on a website and those are likely CSS. React and JavaScript generally place all of the items but CSS is what customizes them to look incredible and what we expect from a modern website. There are thousands of unique things you can do with CSS and if you love being creative and graphic design this might become one of your favorite languages. You will not be writing functions with CSS. Graphic design is not as rewarding to me as building the functionality and structure of an app so this language rates towards the bottom for me but I would like to spend more time understanding the nuances because I have seen some incredible applications with CSS that make all the difference.

Python

Python was a language created to increase readability of code from the developer perspective as well as make it more user friendly to code. It relies heavily on perfect syntax so if indentation and your code format is not your favorite this may be a challenging language for you. With that said the syntax will become a habit pretty quicky if you stick with it. It is also an object oriented language which is a staple for building and interacting with databases. One of the challenges for python is that you cannot see your code projected onto a website like JavaScript and React so debugging can be a challenge but it does have a great debugging tool that can be used. I put Python towards the top as far as languages go due to its ease of use.

SQL

SQL or Structured Query Language is a domain-specific language used in programming and designing a backend database. This is the first language I have learned to create databases so it is a bit unique on this list. The syntax is very different from the other 4 languages when it comes to coding but with that said it is fairly straight forward. The main things you will be doing while writing SQL is adding, editing, deleting and searching your database to send user friendly information to be used by other languages like Python, React and JavaScript. The challenge with SQL is databases again are not shown on a webpage so you will be working behind the scenes a lot in your terminal so it is imperative you are comfortable in a terminal.

Overall every programming language has its pros and cons and each person has a different experience with which languages they mesh with best. I would advise to learn new languages whenever you get the chance as learning new languages has not only allowed me to grow my skillset but helps me understand the languages I have already learned better as well.

HTTP Request Methods

Sackett Keesen — Mon, 16 Oct 2023 14:51:02 +0000

In this blog we will discuss the most frequently used HTTP Request methods. These methods include Post, Patch, Delete and get. We will cover each of these methods and the differences between them as well as when to use each one.

First we need to understand what each method does.

GET - is used to get/fetch data from a server
PATCH - is used to update an element or resource on a webpage.

POST - is used to create and element or a resource
DELETE - is self explanatory. It deletes a resource

POST and PATCH can get confusing but the main trick I use to remember which needs to be used is PATCH is for updates to an existing element where as POST is used to create an entire new one.

Lets look at our GET syntax first.

fetch(websiteURL)
.then(response => response.json())
.then(newData => console.log(newData))

this fetch will return the data in a format that we can begin iterating through it to build dynamic functionality in our website.

Next we will look at our PATCH syntax. There are a few differences from the GET.

fetch(websiteURL/`${id})`,{
method: 'PATCH',
headers;{content-type: 'application/json'},
body: JSON.stringify({exampleObject})
.then(response => response.json())
.then(newData => console.log(newData))

The big differences to note on a PATCH request.

in the fetch you also need to add in the ID of the resource you are updating. This allows the fetch to know exactly where to go to do the update. This is also a helpful reminder that PATCH is used to update resources not create entirely new ones. You will also see we need to create a header stating what action we want(PATCH) followed by headers and a body. The header will be the same as long as you are working in JSON. And you will always have to use the stringify syntax in the body.

Next lets take a look at POST. POST is very similar to PATCH with a few differences. Lets take a look at the code first.

fetch(websiteURL,{
method: 'POST',
headers;{content-type: 'application/json'},
body: JSON.stringify({exampleObject})
.then(response => response.json())
.then(newData => console.log(newData))

The main difference you can see here is that there is no ID added to the end of the website URL. This is becaouse our POST is actually going to create an entirely new element which does not have an ID yet. It will gain that id once the POST occurs and the database receives it.

Lastly we will look at our Delete Method. Delete is a bit more simple with the code.

fetch(websiteURL/`${ID}'{
method: 'DELETE'
})
.then(response => response.json())
.then(newData => console.log(newData))

Here are the main takeaways

You need to have an Id in the URL so that the method knows exactly which resource to delete.
No Body or headers are needed for this method

Overall these HTTP methods will help you manage the information on your database and have an interactive application. The main things to remember are PATCH and DELETE need IDs and POST and FETCH do not. For more information on the syntax of these methods feel free to check out this link[https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods]

JavaScript Event Listeners for Beginners

Sackett Keesen — Mon, 16 Oct 2023 03:05:55 +0000

JavaScript event listeners what are they, how do you use them and what are some of the most common ones you will want to have a firm understanding of to help build out your JavaScript applications.

First things first event listeners in JavaScript are used to create an interactive webpage. This can be from the click of the mouse to when a timer goes off to change what is on the webpage. Event listeners allow for increased customization and flexibility on the webpage as well as a much better UI and is one of the staples of any application. The syntax to create an event listener is fairly simple. It takes in two arguments and can be initiated as shown here using dot notation after identifying your element(more on element identification below).

element.addEventListner("click", exampleFunction)

You will see the first argument is "click" which is telling the event listener that upon a click you want the function that is in the second argument to occur. So every time that element is clicked the function will run. A great resource for further exploring event listeners is [https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener].

So the next critical step to adding an event listener is actually adding it to the correct element. There are a few different ways you can do this. I recommend using the inspect button on the DOM to identify where you would like to add an event listener. You can go to any website and right click and then scroll down to the inspect option. A fun place to practice this is on Wikipedia. Once you click inspect you will now have access to the developer tools where you can start identifying elements. Make sure you are in the elements tab. Once you are in you can hover over different elements and it will highlight them on the webpage to help you ensure you have identified the correct element to place your event listener. Once you have your element identified you will typically use one of two different methods depending on if your element has an ID or a class name. If your element has an ID you can use the getElementById() syntax. Within the parenthesis you will insert the id as shown on the DOM and you will have selected the proper element. If your element does not have an ID you can use a different method getElementByClassName() with this method you will insert the class name in the parenthesis. My favorite way to check if I have selected the correct element is to console log in the function for the event listener as simple string of "clicked" to make sure when my event listener is called it shows console logs clicked and ensures I am grabbing the correct element.

Lastly what are some of the most common event listeners you will be using? "click" seems to be one of my most used event listeners and it triggers my function whenever the mouse click occurs on that element. Here are a few more that you may find useful. "submit" is another extremely useful event listener that will fire off your function when a form is submitted. From this submit event listener you can even have the newly input information from the form be sent to other function on your webpage. Another one of my favorites is "mouseover". This will allow your function to be triggered whenever the mouse hovers over a certain element on your page. This allows for some really fun and creative ways to have an interactive webpage. I recently built an application that played music on every mouseover of the bands picture. There are dozens of event listeners and if you want to explore them further this link is also a great reference to find the event listeners you may want to use.[https://developer.mozilla.org/en-US/docs/Web/Events]

Overall event listeners are essential to any web application and can change the feel of your website quickly. Dont forget to identify the correct elements and use two arguments when creating event listeners.