DEV Community: hequamily

pygame

hequamily — Wed, 19 Jul 2023 14:14:40 +0000

@validates

hequamily — Fri, 30 Jun 2023 14:07:29 +0000

Form validation is a critical aspect of web development, ensuring that user-submitted data meets specific requirements or constraints. In Flask, a popular Python web framework, form validation can be made even more effortless and concise with the help of the @validates decorator.

The @validates decorator is a powerful tool provided by the SQLAlchemy library, which is commonly used in Flask applications. It allows you to define custom validation rules for specific attributes or fields within a model or class.

Here's how the @validates decorator can simplify this process:

@validates('age')
def validate_age(self, key, value):
    if not (11 < value < 18):
        raise ValueError(f"Must have an age between 11 and 18 years old.")
    return value`

In the code above, we define a User model with an "age" attribute. By using the @validates decorator on the validate_age method, we specify that this method should be invoked whenever the "age" attribute is set or updated. Inside the method, we perform the custom validation logic, raising a ValueError if the age is outside the desired range. If the validation passes, the method returns the validated value.

The @validates decorator offers several benefits when it comes to form validation in Flask. With @validates, you can encapsulate validation logic within your models or classes, making it easier to maintain and reuse.

By raising specific exceptions within the validation methods, you can provide meaningful error messages to guide users in correcting their inputs.

Since @validates is part of SQLAlchemy, it seamlessly integrates with Flask's database functionality, allowing you to enforce validation rules directly at the model level.

The @validates decorator in Flask provides a convenient way to define custom validation rules for model attributes or fields. It simplifies the form validation process and improves code organization by encapsulating validation logic within the relevant models or classes. By using @validates, you can ensure that user-submitted data meets specific criteria, enhancing the overall robustness and integrity of your Flask application.

Validation is a crucial step in any web application to ensure data accuracy and security. With the @validates decorator in your Flask arsenal, you have a powerful tool to simplify and streamline the form validation process.

isinstance()

hequamily — Fri, 09 Jun 2023 17:02:35 +0000

The isinstance() function is used to determine the type of an object, allowing us to check whether the object belongs to a specific type, such as an integer or string. The isinstance() function returns True if the specified object is of the specified type; otherwise, it returns False.

For example, if you want to check if an object is an integer, you can use the isinstance() function as follows:

def set_rating(self, rating): if isinstance(rating, int) and 1 <= rating <= 5: self._rating = rating else: raise Exception("Invalid rating")

In this example, isinstance() is used to validate whether the rating argument is an integer within the range of 1 to 5.

Similarly, you can use isinstance() to verify if a variable is an instance of a specific class. Here's an example:

def set_customer(self, customer): if isinstance(customer, Customer): self._customer = customer else: raise Exception("Invalid customer")

In this case, the isinstance() function is used to check if the customer argument is an instance of the Customer class.

By utilizing isinstance(), you can conditionally execute certain actions based on the type of an object. It is important to note that isinstance() is distinct from the modulo operator; the modulo operator calculates the remainder, while isinstance() checks if an object is an instance of a particular class.

Passing Data in React

hequamily — Wed, 17 May 2023 13:54:49 +0000

React allows you to split the UI into independent, reusable pieces so the user can work on the pieces individually. Components are similar to JavaScript functions but take in inputs called props and what is returned is what will be displayed on the screen.

seeing data on site

function Welcome(data) {

function greeting(){
console.log("Greetings friend")

}
 return <h1>Hello, {data.name}</h1>;
}

The difference between a component and function in terms of syntax is that a JavaScript function starts with a lower case while the react component starts with a capital letter.

For a user to access the data they must pass the information thru with a prop

sending data to component

  return (
    <div className="App">
      <PokemonPage data={data}/>

      {/* <PokemonCollection data={data}/> */}
    </div>
  );
}

Once it is sent to the other component then the user will have access to the data they are working with. But it should be destructed with a {} when passing it into the component.

function PokemonCard({ pokemon }) {

}

Without the prop being deconstructed you will have to use one extra step to deconstruct the data using dot( props.prop ) notation

In react you are also able to pass functions in as props to give scope to another component. You are able to write a function to handle a click and pass it thru to another component the same way you would pass data sent as a prop

Component and Function

function App() {
  function handleClick(){

  }

  return (
    <div className="App">
      <PokemonPage data={data} handleClick={handleClick} 
      {/* <PokemonCollection data={data}/> */}
    </div>
  );
}

Once the prop or function is passes thru the component it is accessible using dot(.) notation to populate the data on the site. the prop and the function must be wrapped in {} in the JSX inorder for the prop and/or function to be used.

without {destructing}

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

The Magical QuerySelector(#/.)

hequamily — Wed, 26 Apr 2023 12:25:25 +0000

Hello, my name is Harrison Quamily. I am currently a student at Flatiron School for software engineering. I have prior experience in healthcare, carpentry, audio engineering, music production, and real estate. I'm looking to switch my career field to software engineering in order to make a positive impact in the world using the creativity, integrity, and morals I've acquired through my previous work experiences. Since enrolling in Flatiron, I have been learning about new opportunities that skilled engineers have every day. Although I'm not an expert yet, I feel that I have made a breakthrough.

Previously, I would use document.getElementById() to reference elements when I needed to access them. However, after working through some problems, I now find document.querySelector('') and using # or . to differentiate between IDs and other element names much easier.

With document.getElementById(), you can only access elements if they have an ID. In contrast, with document.querySelector(), you can access any element by using # when referring to an ID or . when referring to something else.

let cakeName = document.querySelector('#food-name'); let cakeDescription = document.querySelector('.cake-description');

In the beginning, I used to rush through code challenges and try to complete them as quickly as possible. However, by doing so, I would often overlook minor details that caused major malfunctions in the code. When I got stuck on a problem, I would become frustrated and lose motivation to find a solution. Most of the time, the issue was calling the element by the wrong name or ID. Upon reviewing the renamed elements or the names of elements in the HTML or JSON, I would usually find the error there.

For more time than I would like to admit, I was confused about the functionality of textContent and src when it came to putting data on the DOM. It wasn't until I switched to using document.querySelector('#' or '.') instead of document.getElementById('') that I understood the source of my confusion between textContent and src.

Initially, I used document.getElementById() because it seemed easier. However, I am now starting to see that there are limitations to using document.getElementById() that document.querySelector() overcomes. When elements become more nested, it can be almost impossible to access the element using document.getElementById().

The 15-week boot camp at Flatiron has been challenging, with its fair share of ups and downs. However, it has not diminished my passion and excitement in my journey to learn and improve my proficiency in coding languages and algorithms with Flatiron.