DEV Community: Carnegie Hall

Chatting with Websockets 101:

Carnegie Hall — Fri, 03 Jan 2025 16:18:25 +0000

Websockets are a very interesting new type of technology, they allow a multitude of different things for developers to be able to do with sites and apps such as: giving clients the ability to talk to one another in real time, showing the live score of a gaming match, and even sending traffic updates. The core feature of what makes Websockets so great is that it is used to broadcast information via a client and a server. the server often times recieves information and relays said information over to the client(s) for them to be able to view. If you've ever watched a live stream from tiktok you've witnessed websockets in action. Websockets uses what is called Full duplex bi directional Communication between the client and server which really just means the client and server speak to each other in real time without having to initiate a new request. I like to relate it to a page that is justs continous with it's chat feature, none of the old datat is deleted, and a new client can come in and join and create new data and see the old data being displayed. Here I'm going to display some code using SocketIO, Flask, Javascript & Python.

To set up the SocketIO server we first want to follow these steps.

after importing flask, flask socketio and flask cors, I'm creating a flask instance with app = Flask(name)

app = Flask(name)

after which I'm adding a secret key for my Flask application this will help secure sessions and sign cookies for future use.

app.config['SECRET_KEY'] = "secret!"

Adding CORS (Cross Origin Resource Sharing) allows my routes to be accessed from any origin.

CORS(app, resources={r"/":{"origins":""}})

Here I'm initializing Flask-SocketIO to go and enable the bi directional communication we discussed before, the inner portion (app, cors_allowed_origins="*") is allowing connections from any origin much like how the previous CORS does.

socketio = SocketIO(app, cors_allowed_origins="*")

Our next step is to define a route in our flask application that will handle our HTTP request sent to our URL path.

@app.route('/http-call')
def http_call():
data = {'data':'text fetched via an HTTP Call to server on render'}
return jsonify(data)

When a client sends a request to our localhost3000/http-call we'll invoke this above function.

@socketio.on('connect')
def connected():
print(request.sid)
print("Client is connected")

Here we created a function that listens for the connect event in our Flask-SocketIO app. Once a new client connects with a websocket to our server our above function is executed and prints a response informing our chat feed that someone new has connected.

@socketio.on('disconnect')
def disconnected():
print("User disconnected")
emit("disconnect", f"user {request.sid} has been disconnected", broadcast=True)

our second function here is our disconnect function that informs our chat that the user has disconnected once their websocket is no longer active.

@socketio.on('data')
def handle_message(data):
print("Data from the front end: ",str(data))
emit("data",{
'data': data, 'id':request.sid
}, broadcast=True)

our last function sends information to our client side. Here we are emitting data back to all our connected clients including the person who sent their message. Here we pass in broadcast=True as the unique argument to ensure the message is sent to all of our connected clients. our request.sid is sent with our event. I do want to note that the request.sid works almost like a social security number as it serves as the unique ID of the client that is sending the message.

Formik & Yup simplified:

Carnegie Hall — Fri, 15 Nov 2024 04:24:01 +0000

When learning how to bridge the gap between Backend and Frontend applications it can feel like a lot, especially when it comes to whether you want to use constraints or validations. Luckily React gives you an option to import Formik and Yup. Doing this helps us not only simplify validation handling, but helps with our scalability and maintainability. Both Formik and Yup are libraries, however both vary in features and functionality. Formik's library assists in the creation and management of forms in React applications. Yup on the other hand is a Javascript schema validation that defines validation schemas for our form fields. Yup gives us access to built in validators for several data types, like strings, arrays, and numbers. When we combine these features with a couple of other tools in react we can create a powerful controlled form like the one I created for my Boba Tea Project. Here's the snippet:

`import React, { useState } from 'react'
import { useFormik } from 'formik'
import * as yup from 'yup'
import { headers } from '../globals'
import { useNavigate } from 'react-router-dom'

const TeaItemForm = ({ addTeaItem }) => {
// const [title, setTitle] = useState("")
const [error, setError] = useState({})

const navigate = useNavigate()

const initialValues = {
    name: ""
}

const validationSchema = yup.object({
    name: yup.string().min(3).max(50).required()
})

const handleSubmit = async values => {
    const options = {
        method: "POST",
        headers,
        body: JSON.stringify(values)
    }
    const resp = await fetch("/api/teaItems", options)
    const data = await resp.json()
    if (resp.status !== 201) {
        setError({ data })
    } else {
        addTeaItem(data)
        navigate("/teaItems")
    }
}

const formik = useFormik({
    initialValues,
    validationSchema,
    onSubmit: handleSubmit,
    validateOnChange: false
})

return (
    <div>
        <h3>Create Tea</h3>
        <p style={{ color: 'orange' }}> {formik.errors.error}</p>
        <form onSubmit={formik.handleSubmit}>
            <div>
                <label htmlFor="name">name:</label>
                <input type="text" name="name" id="name" value={formik.values.name} onChange={formik.handleChange} />
                <p style={{ color: 'purple' }}> {formik.errors.name}</p>
            </div> <br />
            <input type="submit" value="Create TeaItem" />
        </form>
    </div>
)

Decorators 101:

Carnegie Hall — Fri, 25 Oct 2024 13:13:43 +0000

Decorators are a type of special function that allows us to add functionality to an object without modifying it's structure.

When we design a decorator I like to think of it akin to Christmas wrapping. Don't leave just yet, let me explain! First to break it down we have a function stored within another function.
The first function is our decorator function.
The second function is our stored function or rather the inner function is our callback function that we use.

The third function is our caller function.
To use our caller function we need a variable set up to actually get our function within the decorator.

Here we create an arbitrary name that sets everything in place for us to have our function become fully fleshed out.

Here we have our variable store our decorator function. Get_this = decorator(function name)
Within our decorator function we pass our third function into it as a callback function.

This tells our decorator function, that the func potion is now taking in our get called() function and stores it in the 2nd func field.

Now all we have to do is call our stored function.

Imagine you have a box but with that box you want to store a christmas gift for a friend, sweetheart, or a family member.
Our gift is the function we're calling within the second function, that also says that person's name.
Our second function is the box that's keeping our gift safe, where we use our prints() as stuffing paper.
Our decorator function is the nice note / wrapping paper that says the person's name as well.
Our variable serves as the tape on the outside to keep our wrapping paper working and pretty.
When we call our function that's done from the message on the wrapping paper.

Now let's say we ran out of wrapping paper and only had enough to our 5 most important people for the holiday season. Here is where decorators are very special, we can reuse the same type of box, and wrapping paper to put a different gift inside of it for each of our very important people! I hope this was a good way to help you understand Decorator functions.

A decorator is a function that takes another function as an argument and returns a new function, often attaching pre- or post-processing functionality.

_ are referred to as underlines and mean our variable is private

We can use try in our entire call to attempt to push the code.
Then we can use except ValueError as error:
Print(f"Error: {str(error)}")

rpr representation method

@classmethod
Def print_player_names(cls): #class represents class

For player in cls.all:
Print(player.name)

Player.print_player_names()

Classmethods always should call on the class and not the individual item stored in the class. When calling a class capitalize it exactly as it is written in the class.

Props Basics: Part 1

Carnegie Hall — Fri, 04 Oct 2024 01:10:00 +0000

This is a beginner friendly tutorial on how to use props. It is important that you understand what destructuring is and how to use / create components before reading.

Props, short for properties, props allow us to send information from parent components to child components, it's also important to note that they can be any data type.

It is imperative to understand that the syntax for creating a prop for any of your components. In React, you must use the same syntax for writing an attribute for an html tag. The way we specify a prop is by putting it within our element like this:

ParentPlant() {
  return <ChildPlant text="Hey Farmer! Says plant" number={2} isPlant={true} /> 
}

A good rule to remember when creating Props are: strings don't need to have curly braces around their value, we only do this for other data types. As you can see above we can have a multitude of props by assigning them to the parent component. When we have our props within our component it is important to know that we are technically passing them down. Once we pass our props down we need to be able to receive them within our desired component. In this case our ChildPlant component.

Receiving Props:

function ChildPlant(props) {
  return (
    <>
      {props.text} {props.number}
    </>
  )
}

We're doing to things here: 1. We are receiving our prop within the parameter of our ChildPlant component, 2. We are destructuring our prop's values via the name of our prop. It's important to know that our props isn't a parameter but more so functions similar to one.

The only way to pass parent component data down to it's child component is via props. I like to think of it like DNA, a parent component holds aspects of itself already existing within it. Because that child also can have aspects of it's parent's DNA, props works like the activator that makes that child's hair red, black, or blond.

Props are received in the child function and are sent via the parent function, but props can only be sent down and never sent back up. We can think of props as objects as well. This is because they essentially hold data in them akin to key:value pairs. To touch back on why they are similar to parameters is that they they are storing multiple objects within them. I like to think of the area where props are received as placeholders. They take up space for some object that we want to share with our component and swap out when we need them to, via destructuring and dot notation.

Here's a good way to visualize it:

Here we can visualize props holding everything within our square boxes, each one holding it's respective data value from our first example. Now we just use our destructuring method to grab the value of our prop. And that's how to use props in a nutshell!

Understanding POST requests in Javascript

Carnegie Hall — Wed, 11 Sep 2024 00:58:23 +0000

POST Requests:

This guide is meant for beginners who have a small amount of experience utilizing HTML, JavaScript, and interacting with web servers such as db.json and understand how GET Requests work.

When creating a POST Request we start with the same format as a GET Request in which we define a URL:

fetch("")

We then need to let that fetch know that it is performing a POST so we have to pass in a second argument for it, making that argument be an Object:

fetch("",{}

We don't close our first parentheses yet, as we want to keep our data open for that second argument.

The Object has to have a method within it so that the fetch knows which HTTP verb to send, because we are storing the method as the standard key:value it looks like this:

fetch("",{ Method: "POST", (this particular value has to be in a string in all caps, we specify this comma to let JavaScript know we're done with this line) })
Now we need to specify to our request the type of data that it will be sending to our Server. We do this by creating another Object, which is our headers: {}

fetch("",{ Method: "POST", Headers: {} })
Using the key:value standard we can then specify the content-type:

fetch("",{ Method: "POST" Headers: { 'Content-Type': 'application/json' }, })

We now need a body to send this information across the internet, as you know, we shouldn't just send this as plain JavaScript text because we cant be certain it will be properly parsed and read by the server, the best thing to do in this instance is to send the JavaScript info pre-parsed to our server. We do this by using JSON.stringify and just pass in our function:

fetch("",{ Method: "POST" Headers: { 'Content-Type': 'application/json' }, body:JSON.stringify(your function) })

Our Server takes this requests and processes it. It then places it within our local db.json. After that the Server sends a response back that will include our function and a new id for it as well.

Once this happens we take our response(resp) and parse it once again, this time for our JavaScript to be able to manipulate by using the .json()method. Once that data is parsed we then can rename it as anything for it's element. This helps us to not only specify a non-generic name but helps us to think of what we'll do with our information.

fetch("",{ Method: "POST" Headers: { 'Content-Type': 'application/json' }, body:JSON.stringify(your function) }) .then (resp => resp.json()) .then(your parsed data => (whatever you want to have the result of your parsed data as) }

Your final result should look somewhat like this, if you chose to take your newly parsed data and pass it through a function:

function newPlayer(newForm) { fetch("http://localhost:3000/Players", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(newForm), }) .then((resp) => resp.json()) // .then(player => console.log(player)) .then((player) => showPlayer(player)); }

I often remind myself that not all information needs to be refactored. I currently attend a bootcamp and know how difficult it can be to take in loads of information, and the difficulty of time management to keep from getting overwhelmed. I hope this guide helps you to better understand POST requests and was simple and sweet and thanks for the read!