DEV Community: elifrie

Edge Case: What to do when you need to push data to front-end with formatting unaffected. The Pre tag

elifrie — Tue, 18 Jul 2023 21:01:53 +0000

When I was working on a personal project I ran into an edge case that required me to output my information on the front-end the same way it was coming in on the backend.

There were no good resources to display information as such, but after some digging I discovered the (pre) tag.

In React, the (pre) tag is used to render preformatted text, preserving any whitespace and line breaks within it. To use it, simply create a component or element in your JSX code and wrap the desired preformatted text with the (pre) tags. For example:

function PreformattedText() {
  return (
    <pre>
      This is an example of preformatted text.
      It will preserve all whitespace and line breaks.
      Useful for displaying code snippets or structured data.
    </pre>
  );
}

When the component is rendered, the text inside the (pre) tags will be displayed exactly as it is written in the code, maintaining indentation and formatting. This is particularly helpful when presenting code blocks or any content that requires precise visual representation.

Happy coding!

Validators in Flask

elifrie — Fri, 30 Jun 2023 15:31:23 +0000

As you begin to create and manage databases it's important to keep in mind that the type of data you are allowing users to input can have large effects on your databases. Validators are used to do just that; maintain the integrity of the data flowing into your databases.

You must imagine every possible edge case for how a user will interact with your webpage and then utilize validators to protect against those cases.

Using validators is generally very intuitive and basic.

Within your models and class definitions on the back-end you can define validators as so:

class User(db.Model, SerializerMixin):
   __tablename__ = 'users'

   ##here all your relationships will lie##


   ###below you are defining what variable you will be validating.##
   @validates('username'):
   ##creating a validation##
   def validate_username(self, key, value):
      if not value:
           raise ValueError('Please enter a username')
   ##forcing a user to enter a value for their username to proceed, otherwise they will see a value error##
      return value
   ##returning the value if a username is provided by the user##

Above is an example of how you would do a simple validation for one variable. You'll notice I passed through 'value' rather than 'username' and checked against value. The reason for that is so you can check multiple variables if they require the same validation. The example below is how you would force a user to input a value for both username and email.

class User(db.Model, SerializerMixin):
   __tablename__ = 'users'

   ##here all your relationships will lie##

   @validates('username', 'email'):
   def validate_username(self, key, value):
      if not value:
           raise ValueError('Please enter a username')
      return value

At the end of the day validating isn't too daunting and it's something that is important to implement upfront to save you time on the back-end haha ;).

Raising Exception Explained

elifrie — Thu, 08 Jun 2023 18:01:00 +0000

Hey everyone! I'm back with another beginner's explanation, but this time in a new language.

For the past few weeks I've been sinking my teeth into python and learning the basic motions. Working through errors is something that every software engineer of every level has to deal with. In order to continue to run your program regardless of certain errors coming up it is important to 'Raise Exceptions'.

Raising an exception allows you to set a default response if your program runs into some type of error. This way your entire program won't crash due to a small syntax error and based on your error message you may be able to tell where your program ran into an error.

Now let's see an example.

Let's say you are writing a plethora of if statements to handle many conditions and situations. Your program is crashing but you're not sure where you're running into issues. Is it when you're checking if variable x is a string? Is it when you're making sure that the price is between set parameters? By raising an exception for each condition you can specify what message to return in the event of failure. Then handling errors without breaking code is much more simple.

if isinstance(x, str):
   print("X is a string!")
else:
   raise Exception("Please enter a valid string!")

##Input: 2
  Output: Please enter a valid string!

if 1 <= price <= 100
   print("The price is right!")
else:
   raise Exception("Please enter a number between 1 and 100")

##Input: 2
  Output: The price is right!

Without raising an exception the program would break on the user, but now it will return an error to guide them in the correct direction and provide information to guard against future errors.

Basic Understanding of useState in React

elifrie — Tue, 16 May 2023 15:20:50 +0000

Hello and welcome to the second leg of my journey through introductory coding! As you begin to grasp the basic concepts of React there are a few nuances that you must understand. One of these is the react hook useState.

What is useState and when do I need it?

useState leverages array destructuring to declare a state variable. A state variable is used when you have values that need to change based on an interaction (ex. forms with value changes, search bars, click events that change, etc.)

First thing is first; you must call useState at the top of each component where you plan to utilize it. You can do this by:

import {useState} from 'react';

Then you must declare the state variable as well as its initial state. The initial state will vary based on what kind of value the variable will hold. If the result is boolean then you should set the initial state to a boolean, if it is meant to return an object then you should structure the object as a default, etc.

Let's say we want to use a state variable for an input that is an age. Thus, we would want the initial state to be a number. The basic syntax and the syntax for our purposes is as follows:

Basic:
const [something, setSomething] = useState(initialState)
Ours:

function myComponent() {

   const [age, setAge] = useState(25);
   const [name, setName] = useState('Eli')}

The return value will be an array that has two items; the current state of this item (set to the initial state that I defined) and the set value that lets me change the value based an interaction.

To update our value we need to call the function and update the state:

function handleClick () {

   setAge(54)}

React will now store my next state, render my component again with age as 54, then update my UI.

I hope this was helpful in gaining a very basic understanding of useState in react. Happy coding!

Explaining event.target

elifrie — Tue, 25 Apr 2023 15:39:04 +0000

My name is Eli Friedlander. As I begin my software engineering journey there are many topics that I could dig deeper into. Throughout the past weeks I have often been confused about the syntax, usage, functionality, etc. of different nuances in javascript, HTML, and CSS. I’ve found solace in blog posts such as this. I hope this can help clear any confusion you may have surrounding the use of “event.target”.

In short - event.target is a property of an event object that targets the specific element that triggers the event. This becomes useful when you are looking to return the value of the element that triggered the referenced event.

When to use:

As mentioned above - the target property is used to retrieve any attribute or property of the event it is attached to. Let’s say we have an event listener for an input box like below:

First, we are targeting the input box with ID ‘input’ and naming it ‘inputBox’ so that we may attach an event listener to it.

Second, we attach an event listener that is triggered when the input box is interacted with.

So what’s next? Now that we have our event listener we can use the target property to:

Retrieve the element of the fired event
Access different properties of the fired event
Modify properties and attributes of the element

Syntax:

The Syntax for using the target property on events is not too different from other syntaxes that leverage dot notation; ‘target’ is added after the event with dot notation like below:

These are a few examples of how you would use event.target to access different attributes of the event, such as the ‘value’ or a specific CSS element. In the first console.log we are simply returning the event object. The second console returns the actual value of the event which can prove useful when you’re looking to attach a command to a value return. The last example portrays how you can use event.target to modify CSS attributes.

In summary, event.target is a way to access the value or specific attributes of an event when an event listener is attached.

I hope this helped clear up some doubts you may have around how / when to use event.target!