DEV Community: luna-enamorada

Designing REST APIs 📝

luna-enamorada — Mon, 26 Jun 2023 10:48:22 +0000

What are REST APIs?

Let's break it down.
What is an API?
An API (Application Programming Interface) is a set of rules and protocals that allow different computer programs to communicate and interact with each other. An API acts as a messenger between the applications so they can do many things such as:

Accessing Remote Services
Data Integration
Functionality Extension
Customization
Platform Interconnectivity
Mobile App Development

Cool, but what is REST?
REST (Representational State Transfer) provides a consistant approach to designing and building an API. In REST, data can be identified by unique URLs. ( URIs, Uniform Resource Identifiers ) While REST isn't tied to HTTP, most REST APIs use HTTP as the application protocalls. So interactions occur though HTTP methods.

Best Practices for RESTFUL APIs ☝️🤓

There is a huge emphasis on a uniform interface in regards to REST.

Path Names

Some things to keep in mind when creating path names are:

Use nouns, try avoiding verbs. It should just represent the resoure instead of describing behavior. For example, /resources instead of /getresource
Pluralize, when a resource represents a collection. For example,/books instead of /book. If you want to represent a singluar book it would be /books/<int:id>
Represent Hierachy for Related Resources, the URI should reflect this. For example, users/{userID}/posts represents posts relating to a specific user.
Avoid Ambiguity but Keep it Short, ambigous path names could cause confusion, same goes for longer URI names.
Versioning, for when you need to show changes to the API by adding a version to the URI path. For example, /v1/books and /v2/books represents different versions.

Use JSON Format

Using JSON (JavaScript Object Notation) format for RESTful APIs offers compatiability with RESTful principles.

Easy to Understand Responses

Responses are crucial, some pointers for creating REST responses are:

Appropriate Status Codes, HTTP status codes can quickly tell us what just occured with the request we executed. It also quickly let's us know errors in our requests.
Clear Response Bodies, will contain relevant data to the request. It should be in a consistant format throughout.
Error Handling, you should be providing an informative error message in the response body with the appropriate HTTP status code.
Security, ensure that sensitive information is not displayed in the response body, implement data encryption to protect that data.

Rate Limiting

Controlling the rate of requests to a web API ensures fair usage and protects the server from overload.

Clear Rate Limiting Policies, clearly define the limits like the maximus number of requests allowed per minute per hour.
Tie Authentication, by requiring users to authenticate, you can monitor the number of requests and grant access to different endpoints.

Good Documentation

Comprehensive documentation is important for successful useage of an API. The docs should be also publicly accessible. Some things to consider adding to your API docs are:

Overview, introduction, explaining the API's purpose, how to use the API, and the problem it solves.
Getting Started Instructions, tells users how to obtain API key, provides any necessary sey up, and authentication methods.
Resources and Endpoints, lists all API resources and endpoints with a brief description. Includes their URLS, request methods, and expected response body.
Error Handling, possibile error reponses the API might return, then provide specific error handling instructions.
Rate Limiting and Catching Strategies
Tutorials, adding real world examples and then tutorials on how your API can solve specific issues helps users get a better idea on what your API is used for.
Keep it Up to Date!

Sources! 🌐:

Four Principles for Designing Effective APIs
What is an API?
Express Rate Limit
REST API Security Essentials
API security: 12 essential best practices

Basic OOP in Python 🐍📝

luna-enamorada — Fri, 19 May 2023 09:56:35 +0000

Object-Oriented Programming (OOP) is oriented around objects that typically represent real world concepts. Data is being prioritized rather than functionality.
OOP provides a better way to structure and organize code, making it easier to read and maintain. You're essentially dividing up your program into small parts.

What helped me solidify this concept is thinking in the literal sense. Since OOP is based on the real world, nothing is more real than you! (you are the realest) You are a person that has certain attributes that make you unique and behaviors. So let's start with that!

person.py

First I started real easy by just naming the class. My first method is to initialize this new object with its attributes. The first parameter will always be self. Self is a parameter that represents an instance of the class. It makes it so that we can access the attributes following up. Name and age are going to be our attributes for our person.
In the body of our __init__() method are 2 statements.
self.name = name self.age = age
This is what is creating our attributes and assigns them with the value that is in the parameters.
Next is a greeting() method. It will just print out a greeting. Using some string interpolation it will also print out self.name in the greeting.

For the last 2 pieces of code, notice how I am now outside of my class. I'm creating an instance of the Person class. I just add in my name and age. Then I call a method from the Person class.

So when I run my program I get back this in the terminal:

Hello! My name is Melissa

Alright sweet, now we can think about all the different things we can do with this person. This person has limitless potential. But for now, let's just create a Student class for it to inherit Person from.
Let's think about what attributes a student would need. A name, age, and major.

student.py

The setup looks pretty similar to our Person. One major difference is the usage of the super() method. On the top, I imported our Person class since they're 2 different .py files. Person already has the attributes of name and age. So to avoid typing all of that code again, I can just inherit those attributes using the super() method.

This time I added 2 student instances. And when I run python3 student.py I get this in my terminal.

Hello! My name is Melissa, I am 19, and I'm majoring in Software Engineering
Hello! My name is Kiana, I am 18, and I'm majoring in Law

Conclusion

This very basic idea can be further expanded upon. By thinking in objects, you can create classes that serve as blueprints. Our blueprint is the Person class. And then create other objects with similar attributes while still keeping the code DRY. Learning to incorporate OOP will make your coding more structured and easier to come back to.

Great resources! :
https://www.geeksforgeeks.org/self-in-python-class/
https://realpython.com/python3-object-oriented-programming/
https://www.programiz.com/python-programming/methods/built-in/super

Props in React ✨

luna-enamorada — Fri, 28 Apr 2023 14:14:18 +0000

Props (properties) are for communication among components. Think of it like an argument to functions. So this allows us to pass data between components using said props.

One thing to remember about passing props is that it is a unidirectional flow, the order should be: Parent ➡️ Child

Let's try to pass some data down with props!

So we'll say that our "App.js" is our parent function. (Typically this is on top of your component hierarchy)

Here we'll also import our child component. So let's call it Header.
Our goal here is to make Header more dynamic.

Let's make a quick component hierarchy just so we can remember where we're at because things can get messy quick.

├── App
│ ├── Header

Nothing too crazy here yet, but remember to stop and think about what component parents which. This will be very important in making your workflow a lot less painful.

Don't forget to import React

App.js

import React from 'react'
import Header from './Header'

function App() {
    return (
    <div>
        <Header />
    </div>
    );
}

export default App;

So this is how App is currently looking. I want to give it some props to pass down.

The syntax for creating props for a component is the same syntax as for writing attributes for an HTML tag.

import React from 'react'
import Header from './Header'

function App() {
    return (
    <div>
        <Header greeting="Hello" name="Mely"/>
    </div>
    );
}

export default App;

Now we have some props to pass down! Header now has access to the information we have stored in the attributes.

Note: Coolest thing about props is that they can be any data type, in this example it is a string data type.

Let's use this data in our Header component.

Header.js

import React from 'react'

function Header(props) {
    return (
    <div>
        <h2>{props.greeting}!, my name is {props.name}.</h2>
    </div>
    );
}

export default Header;

Header takes in the props as an argument to the React function. You can gain access to the data by using dot notation.

Syntax of passing down the data is {props.insertNameOfPropHereLol}

If dot notation is just too much for your keyboard, we could also pass down props using destructuring. Destructuring makes it possible to unpack the value into its own distinct variables.

Header.js

import React from 'react'

function Header({greeting, name}) {
    return (
    <div>
        <h2>{greeting}!, my name is {name}.</h2>
    </div>
    );
}

export default Header;

The new syntax for the Header's argument is to wrap the specific props we want to pass down in a curly bracket{}. This makes our code so much easier to read and know what's going on.

We did it!! We passed down information using props :)

In depth on destructuring
React Props Explained with Examples
Components and Props

Learning to work with the DOM

luna-enamorada — Thu, 06 Apr 2023 12:34:21 +0000

Before starting Flatiron's software engineering program, I completed my pre-work relying entirely on the tests to determine if I did what the tests asked me to do. It ended up being a series of events of me running the tests and seeing the red text and going from there. Never actually understanding what my current code was doing so wrong.

While there was DOM manipulation in the prework, I had never really felt too comfortable using it at that point. Since I wasn't too confident in my skills I tended to stray from using it, only ever listening to the tests.

Once starting the program and the tests are no longer in labs did it finally click that manipulating the DOM is a very useful tool.

How do you access the DOM?

You can access the DOM right now!😲

Windows: ctrl + shift + i
Mac: Option + Command +I

We can see how this tab is showing us the structure and contents of this website. Opening up the DOM from your own document becomes more plentiful with the information. Presenting you with your code as well as the structure (HTML).
You'll notice how the tab allows changes to be made onto the web page. This real time modification is what makes the DOM a handy tool.

What you can use this magical tab for:

Interacting with the DOM saves time from having to go back to your VS Code, change one line, then go back to the page, reload the page, see if anything changed.

Initially, I didn't think much about what the DOM could do for me. I saw the page, saw what it did and didn't do, then went and changed the code to see if it'll do what I want it to do. I would stare at the screen for hours on end trying to figure out what I wasn't doing right. After a couple of lectures, I realized that I'm suffering needlessly when I could've been using console.log() to see if my code even worked as intended.

Constantly checking and making sure that the code I had written so far works the way I intended it to function. It has saved me so much time and mental energy. Before I felt like it was just me in a pitch-black room, arms stretched out, feeling for anything just to take one step and not fall on my face.

Now if I need to pick out specific elements on the page I could easily hover over them to find their id highlighted in the HTML. Or even see silly spelling mistakes I missed, the console will tell me down to the exact line where it detected an error.

Lesson I learned

Learning something new will always be an uncomfortable process. If you feel unsure about something, like I did with DOM, that is a good sign that you need to practice with it further. Esspecially if you're just starting out. Yes it's good you found something that feels comfortable but if there's a better way of doing it, it's worth the discomfort to continue to flourish in your new journey.