DEV Community: jdavis8898

Adding Sounds in React

jdavis8898 — Mon, 04 Mar 2024 09:07:49 +0000

I decided to make a small game for a project. One of the items I decided early on that I wanted to make sure I included were sound effects. Thankfully with the use of a react hook, I was able to do just that! So we are going to take a look at how that is possible.

Quick Rundown

You will need to run npm install use-sound in order to get this done
You will need to import whatever sound file you want to use into your React project

All I quickly did was make a folder called "sounds" and I added my audio file there
Add the imports
- import useSound from "use-sound"
- import TestSound from "./sounds/TestSound.wav"
Establish the hook
- const [playSound] = useSound(TestSound)
The last step is to figure out when you want the sound to play. Just to show a quick example, you can add it to an onClick event for a button. That way whenever the button is clicked, the sound will play.
- <Button type="button" onClick={playSound}>Sound</Button>

Those are the very basic steps you will need to do to add a sound effect to your React app.

A Few More Things

There are quite a few more things you can do with this hook though. With some small modifications, you can have the sound play whenever you hover over something. Let's take a look.

You will have to add stop to the second part of the hook as seen below
- const [playSound, { stop }] = useSound(TestSound)
After that, you will have to change the onClick event to 2 different events
- <Button type="button" onMouseEnter={() => playSound()} onMouseLeave={() => stop()}>Sound</Button>
- As can be seen above, we now have the onMouseEnter event that is playing the sound like before but we also have the onMouseLeave event that is now stopping the sound when the cursor leaves the element's area

With both of these small adjustments, the same sound effect will play when the mouse is hovered over the button and will stop once no longer hovering over the button. You can also change the playback rate if you really wanted to by passing the playbackRate option as can be seen in the example below.

const [playSound, { stop }] = useSound(TestSound, { playbackRate: 4 })

If you want to add multiple hook options, like playback rate and volume, it will let you with no issues!

const [playSound, { stop }] = useSound(TestSound, { playbackRate: 4, volume: .5 })

With the volume option now there, it can take any number between 0 and 1, with 1 being the loudest and 0 being no sound.

Sprites

To start, a sprite is one audio file that has multiple samples in it. With this hook, you can utilize this type of audio file so that way you really only need one imported. You will have to do a little bit more work for this to work, like combining all of your audio files into one. The next thing you will need to do is mark the start times (at the milliseconds mark) and length (in milliseconds) of all of your sound effects. Once that is done, all you need is to add the sprite option just like we did with the volume and playback rate options.

After that, you just need to specify which id you want to play when the button is clicked, or tied to whichever event you want.

Conclusion

There are a few other items you can adjust with this hook as well, so I highly encourage taking a look at the github repo for it that is listed below. This was just a fun way to start looking at how to add something extra to your website or web-based game.

Sources

useSound github

RESTful, What does this Mean?

jdavis8898 — Mon, 12 Feb 2024 09:48:17 +0000

While learning about Flask and how to build APIs, I have recently heard/read this phrase a lot. Initially I was more focused on actually learning Flask and how I can use that to build an application. But now that I am past the beginning part of learning Flask, what does RESTful actually mean? Let's take a look at what this means and why it matters

What is RESTful?

This isn't some library, function, variable, or anything like that. REST is a set of design principles, or guidelines, for creating APIs that were made by Roy Fielding. REST stands for REpresentational State Transfer. So when the API is being called to, the server will transfer a representation of the state of the requested resource to the client.

What are these Design Principles?

Uniform Interface
Uniform interface has a few components to it, but for simplicity's sake we will try to keep it short. When a request is made to an API from either an app on an android device or a Safari web browser, the request should look the same. Also, the resource being sent back to the client should have all of the information the client will need, but also should not be too big.
Client-Server Separation
Client-Server separation is a little more straightforward. The only way the client should interact with the server is with the URI of the requested resource. The only way the server should interact back with the client is by passing the requested data back. Changing code on either the front-end or the back-end should not affect the other side at all. Unless of course you get rid of the request to the server.
Stateless
Stateless refers to the how the server is not able to store any information that is related to a client request. So every time a client makes a request, it needs to do so with all of the necessary information to process.
Cacheable
Cacheable is referring to the possibility of the client saving the requested information so that another request does not have to be needlessly made. The information should have some form of version attached to it so the client can check to see if the information needs to be updated.
Layered System
Layered System refers to how there may not be direct communication between the server sending the information and the client requesting it but the server and client should not know if they are communicating directly, if there is a layer in between them, or if there are multiple layers between them.
Code on Demand
Code on demand is deemed to be optional, but it means the ability for a server to send executable code to the client.

Why does it Matter if your API is RESTful?

The whole purpose of these design principles is to help build a good API, but that doesn't really answer how these design principles help make a good API.

Flexibility

Both guidelines, layered system and client-server separation help make a flexible API. If the code on the server side does not affect the code on the client side, then you can freely make changes to the code on the server side without causing any issues. The same can be said if the code on the client side, does not affect the code on the server side. Also, if the API is already setup to account for an unknown amount of layers to get to the client requesting the information, then there should be no issues if changes need to be made there as well.

Independence

APIs considered RESTful won't care what language the client is requesting the information in. The design will be unaffected by the variability here.

Scalability

When an API is considered RESTful, they are much more efficient at scaling. One way this can be seen is statelessness. Since the server does not have to keep any previous client request information, it helps remove some server load. If the server does a good job of labeling what is cacheable and has versions attached, then it is possible the client won't have to make as many requests and that will also help lighten the server load.

Brief Conclusion

So yes, an API considered to be RESTful has a lot of benefits. There are even more benefits than the ones I listed above. When you start to learn something new, it is easy to gloss over certain things that don't seem important at first or maybe there is just initially some information overload so some things get left behind. That is why it is can be helpful to look back and see what information was initially presented when learning a new topic.

Sources

IBM
REST CookBook

Tkinter - What is it and Why do you Care?

jdavis8898 — Mon, 22 Jan 2024 09:08:22 +0000

I have spent the last 2 weeks learning Python for backend development purposes. One of the obstacles I have faced is making changes to some code and not being able to actually see something visually changing. This is also after spending the 2 months prior to learning Python on learning JavaScript and React.js and getting used to seeing the changes made to the code be reflected on the actual page. I was able to adapt, but it was tough making the adjustment. All of this is to say, this is why I decided to take a look at a library that helps make a GUI for Python.

What is a GUI?

The average person probably does not realize that they interact with a bunch of different GUIs throughout their entire day. GUI stands for graphical user interface. So when you are really interacting with anything digital, you are interacting with a GUI. These are how users interact with technology and get them to do what they want. If you are here though, you probably already know this. This is what a developer needs to make as friendly as possible for their users to interact with the software they made.

Finally, What is Tkinter?

Tkinter is a library for Python. What is this library useful for? Well the answer is making GUIs! Two great things about Tkinter is that it is beginner friendly and compatible with Windows, macOS, and Linux.

How Does it Work?

You start by importing the modules. After that, you create the main window for the GUI. Choose which elements (widgets) you want incorporated in the GUI. Finally you will run the mainloop method to start up the GUI. To get a basic GUI up and running with this library, all you would need is about 5-6 lines of code. Obviously the more advanced you make it and more modifications you want to make, it will add to it. If you were to code this on your own, then it would take significantly more work and time.

Let's Take a Look at Some Examples

Here you can see we didn't do much besides create a simple GUI that really isn't very interactive. This is only with four lines of code though. At the top, you can see the import. Second line is creating the GUI window. Third line is creating the title for the window. The last line is what will make the GUI run.

You can see this one is very similar to the last one. All we did was add "Hello" in big font. We did this by adding the label widget as the new fourth line of code and modified some attributes like the font.

Here we were able to add a menu widget. Almost everything after the fourth line of code is new and is what is making this new aspect of our GUI. The fifth line is making our menu widget by making menu = the Menu class. The sixth line is make another Menu instance. The seventh line is adding an item (New) to the second Menu instance. Then finally, the eighth line is running a function that adds the label "file" and our second instance to our first Menu instance to create that drop down.

Why Should You Care?

The whole point of this was to show you that Tkinter may seem advance but in all honesty it isn't that bad at all after you look into some documentation on its widgets and functions. We were able to make a GUI with a file menu option in 10 lines of code. That is pretty amazing! Once you are ready to make your own project, you will most likely need to make a GUI so that users can properly interact with your software. Even if you later find a library you like more to help you make a GUI or you decide to write your own code to make your own, you can temporarily set this one up so you can actually see some changes you make to your code. So even if it isn't Tkinter, go out and find one you like and learn it!

Sources:

docs.python.org
introduction-to-tkinter-a-beginner-s-guide

Basic Data Flow in React!

jdavis8898 — Tue, 02 Jan 2024 06:33:11 +0000

We are going to take a look at how data is passed along when using react. The key elements we will need to know when looking at this are: a component, a parent component/child component, props, callback functions, and then useState.

The first thing to look at is a component and how there are child and parent components. A component is where you write your code of what you want your website/app to do and also display. When a component passes an argument (prop) down to another component, that first component passing down is the parent and the component receiving the prop is the child. That is how a parent component can communicate with a child component. So if you have a component called "Today" and all that component is responsible for is getting the current year and displaying it. Within the Today component, we can assign that data to the variable currentYear. When we are done displaying that current year in the Today component, we can then take that variable and pass it down as a prop to another component called Future.

Today Component (parent)

import react from "react"
import Future from "./Future"

function Today ()
{
  let currentDate = new Date()
  let currentYear = currentDate.getFullYear()

  return (
    <div>
      <div>
        The current year is {currentYear}!
      </div>
      <Future currentYear={currentYear} />
    </div>
  )
}

export default Today

We are only going to use this component called Future to display how many years until the year 2030. Because this component received the current year as a prop from the component named Today, it does not need to redo the steps to get that information. With this being done, we have our established parent component (Today) and our established child component (Future).

Future Component (child)

import react from "react"

function Future ({ currentYear })
{
  let yearsLeft = 2030 - currentYear

  return (
    <div>
      There are {yearsLeft} years left until 2030!
    </div>
  )
}

export default Future

This passing of data via props from the Today component to the Future component is an example of how the parent component can communicate to the child component. The child component can in fact communicate back to the parent component, but not in the same way even though props are still used as that is the connection between the components. Let's take a look at the components again, but the code will be a little different.

Today Component (parent)(updated)

import react, {useState} from "react"
import Future from "./Future"

function Today ()
{
  let currentDate = new Date()
  let currentYear = currentDate.getFullYear()
  const [styling, setStyling] = useState(true)

  function changeStyling()
  {
    setStyling(!styling)
  }

  return (
    <div className={(styling ? "fun" : "professional")}>
      <div>
        The current year is {currentYear}!
      </div>
      <Future currentYear={currentYear} handleClick= 
      {changeStyling} styling={styling} />
    </div>
  )
}

export default Today

Future Component (child)(updated)

import react from "react"

function Future ({ currentYear, handleClick, styling })
{
  let yearsLeft = 2030 - currentYear

  return (
    <div className ={(styling ? "fun" : "professional")}>
      <div>
        There are {yearsLeft} years left until 2030!
      </div>
      <button onClick={handleClick}>
        Click to change styling!
      </button>
    </div>
  )
}

export default Future

CSS to show styling tied to class name

.fun {
color: #DE854B;
font-family: Balgin;

.professional {
color: #000000;
font-family: Arial;

As you can see, we did change a little bit in both components. Let's start with the parent component. We added the hook useState in there and established the state and the function that will update that state. We also added a class to the main div in the return statement that is dependent on our state. We then passed the function changeStyling, which only changes the value of our styling state via setStyling, and the state styling down to the child component as props. Just like how we previously did with the currentYear variable.

Now in our child component, all we really did was add that same class to the main div in the return and then add a button. When you look at the button tag, you will notice that one of the props we passed down is here and that is the handleClick prop. This is the callback function that is tied to our changeStyling function in the parent component. So our child component is passing this information that the button was clicked back to our parent component via callback function to change the styling value and therefore our page's styling since it would be tied to our class names for our div tags. This is an example of how the child component can still communicate to the parent component. This is just one basic example of how the components can use this communication.

What's The Difference Between .forEach(), .map(), and .filter()?

jdavis8898 — Mon, 04 Dec 2023 07:45:04 +0000

In JavaScript, there are many built in methods that help us interact with the data we are working with. Here, we are going to take a look at three different methods that interact with arrays: .forEach(), .map(), and .filter(). First of all, we need to make sure we understand what an array in JavaScript is. An array is basically a list of data that is usually stored inside of a single variable. Below you can see an example of an array.

let states = ["Illinois", "New York", "California", "Minnesota", "Washington", "Maine"]

console.log(states)
["Illinois", "New York", "California", "Minnesota", "Washington", "Maine"]

How do These Methods Actually Interact with an Array?

All 3 of these methods are used to iterate over an array. By this I mean that all of these methods all go through the entire array and interact with each individual item/element in some way. The way in which they interact depends on the function that is called along with the method that is used. This is the main thing they all have in common.

How does .forEach() Work?

Let's start by looking at how this method looks in a line of code below.

states.forEach(state => {console.log(state.toUpperCase())})
ILLINOIS
NEW YORK
CALIFORNIA
MINNESOTA
WASHINGTON
MAINE

console.log(states)
["Illinois", "New York", "California", "Minnesota", "Washington", "Maine"]

So above you can see that we start with the array we want to iterate over (states), followed by the method we are using (.forEach()), then we have the temporary variable name we are using that each element of the list will briefly be called (state), and we end it with the function that we are applying to each item in the list (console.log(state.toUpperCase())). In this example we are simply just making each element of the list all uppercase and console logging it so we can see what that looks like. As you can see, every element of the list was made uppercase, but only for that brief moment. The interesting thing about .forEach() is that it does not return anything nor does it destructively modify our original list. So if we wanted to make any permanent changes, we would have had to make an empty array and then use something like .push() to add those new elements to the new list. So we can make it work, but we can also use something like .map() to do this more efficiently.

What About .map()?

.map() works very similarly to .forEach(). With .map() it will still leave the original array the same, but it will actually create a new array with the modified data specified by the function that is put in.

let statesUpper = states.map(state => {return state.toUpperCase()})
["ILLINOIS", "NEW YORK", "CALIFORNIA", "MINNESOTA", "WASHINGTON", "MAINE"]

console.log(states)
["Illinois", "New York", "California", "Minnesota", "Washington", "Maine"]

console.log(statesUpper)
["ILLINOIS", "NEW YORK", "CALIFORNIA", "MINNESOTA", "WASHINGTON", "MAINE"]

As you can see above, with .map() we were actually able to create a new variable with all of the states being uppercase and the original list still remains the same. This is because with .map() it is actually returning something so we are able to just say we have a new variable that we would like to equal the entire process (statesUpper).

Finally, How does .filter() Work?

.filter() works more so like .map() than .forEach(). When using .filter(), you will also get a new array back without destroying the original one. The change here is that, as the name implies, depending on what function you put into the argument, this method will filter through the array and make a new one with the elements/items that satisfy the function.

let statesM = states.filter(state => {return state.includes("M")})
["Minnesota", "Maine"]

console.log(states)
["Illinois", "New York", "California", "Minnesota", "Washington", "Maine"]

console.log(statesM)
["Minnesota", "Maine"]

In the example above, we used the .filter() method to iterate through our states array and looked for items that included an uppercase M. That is why we only received back an array that included Minnesota and Maine. We then used console.log to show that our original states array was not changed at all and also we now have a new variable (statesM) that is an array that contains those 2 states.

Brief Summary

Hopefully after looking at these brief examples that showed how these methods are similar, but also unique will help you in determining when to use one over the other. Sometimes when I don't fully understand the differences between things like this, the next time I would go to use one, I would purposefully use all the different ways that confuse me and compare to see what the differences are in that moment. Seeing things in a more practical setting can help!

Sources

Used https://www.w3schools.com/ for reference on these different methods

DEV Community: jdavis8898

Adding Sounds in React

Quick Rundown

All I quickly did was make a folder called "sounds" and I added my audio file there

A Few More Things

Sprites

Conclusion

Sources

RESTful, What does this Mean?

What is RESTful?

What are these Design Principles?

Why does it Matter if your API is RESTful?

Flexibility

Independence

Scalability

Brief Conclusion

Sources

Tkinter - What is it and Why do you Care?

What is a GUI?

Finally, What is Tkinter?

How Does it Work?

Let's Take a Look at Some Examples

Why Should You Care?

Sources:

Basic Data Flow in React!

Today Component (parent)

Future Component (child)

Today Component (parent)(updated)

Future Component (child)(updated)

CSS to show styling tied to class name

What's The Difference Between .forEach(), .map(), and .filter()?

How do These Methods Actually Interact with an Array?

How does .forEach() Work?

What About .map()?

Finally, How does .filter() Work?

Brief Summary

Sources