DEV Community: AaronNewTech

How useContext Can Easily Create Site-Wide Conditionally Rendered Context.

AaronNewTech — Sun, 24 Sep 2023 20:57:31 +0000

Authenticating user logins can be complex especially when needing to alter content your site using conditional rendering. If only there was a way to use a setState site-wide in order to change a logged in user's content. Fortunately such a thing does exist in react called useContext that can create a component that you can wrap your entire App.js file to give access to a setState in every component. If this doesn't make much sense just understand that once set up properly you won't to need pass props down each child element known as prop drilling to use it in a component.

For now look at how we can setup a useAuthContext component using useContext.

// AuthContext.js
import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export const useAuth = () => useContext(AuthContext);

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (userData) => {
    // Implement your authentication logic here, e.g., calling an API
    setUser(userData);
  };

  const logout = () => {
    // Implement your logout logic here
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

This part is a little confusing because we are defining a component within a component but what is happening is we are setting up a useContext that is wrapped in the useAuth custom hook so that we have access to all of the elements in our AuthContext.js file. We then define AuthProvider which manages the state for authentication of logging in and out for the children of this component. In the return statement we see AuthContext.Provider component with the props for user, login and logout that will passed to its children.

Basically this code will make the user, login and logout props available to any components that are children of AuthContext component. We will now put everything in our app inside the AuthContext component. See the code below:

// App.js
import React from 'react';
import { AuthProvider } from './AuthContext';
import Home from './Home'; // Import your Home component or any other component you want to conditionally render

function App() {
  return (
    <AuthProvider>
      <div className="App">
        {/* Other components */}
        <Home />
      </div>
    </AuthProvider>
  );
}

export default App;

Notice that AuthProvider wraps our Home component and any other ones we type here. Now we can use the props from our AuthContext file to conditionally render content for a user as well as give keep the user logged in when navigating the site. See code for Home.js:

// Home.js or any component you want to conditionally render
import React from 'react';
import { useAuth } from './AuthContext';

function Home() {
  const { user, login, logout } = useAuth();

  return (
    <div>
      <h1>Welcome to Our Website</h1>
      {user ? (
        <div>
          <h2>Welcome, {user.name}!</h2>
          <button onClick={logout}>Logout</button>
        </div>
      ) : (
        <div>
          <h2>You are not logged in.</h2>
          <button onClick={() => login({ name: 'John' })}>Login</button>
        </div>
      )}
    </div>
  );
}

export default Home;

Here we can see that the user variable is able to conditionally render context via our imported and destructed lines here:

import React from 'react';
import { useAuth } from './AuthContext';

function Home() {
  const { user, login, logout } = useAuth();

And that's it, this is all we need to use conditionally render webpages for a logged in user on a few pages on our website or even every page. The setup is a little complex but once set up we can change the look and functionality just by implementing useContext and wrapping our children components in our useContext component.

How to Setup ForeignKeys, Relationships, Serialize Rules and SerializerMixin When Using Flask

AaronNewTech — Wed, 30 Aug 2023 13:38:40 +0000

Flask is a great resource to use when you are working with databases. It can help your backend integrate seamlessly with frontend web applications with straightforward and familiar syntax. However, one aspect that can be confusing to new users of flask is setting up your table models to work effectively.

To set up your models you will need to get to learn how to write the code for all of your tables to interact. This is where foreignkeys, relationships and serialize rules are utilized, though they can be a little bit of a mystery a first glance. In this article we explore how to use all of these and what exactly they do.

ForeignKeys - These are the first step in creating tables that interact with each other. By assigning a foreignkey with an id that corresponds to your other table it will connect them so that you can get the data for both tables in a simple straightforward way. In example below you can see that we have to classes with tables. The user_id in the Post class will help us point to the user table when we need data that is shared in a relationship.

class User(db.Model, SerializerMixin):
    __tablename__ = 'users'
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String)

class Post(db.Model, SerializerMixin):
    __tablename__ = 'posts'
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String)
    created_at = db.Column(db.DateTime, server_default=db.func.now())
    user_id = db.Column(db.Integer, db.ForeignKey('users.id'))

As you can see we have a foreignkey that will be created in our posts table which will reference the data in our users table. Be sure to make sure your reference the name of the table when setting this up so your program works properly. It is especially important to take your time when setting up your models because syntax can be confusing and errors not easy to catch.

Relationships - Once our foreignkey is set we need to create a relationship between them. We do this in the class opposite the foreignkey, in this case the User class. In our example we want to use the the class name first, add cascade parameters that will delete the related data like the user_id when we delete a table entry. Backref is the class we are in but is lowercase so make sure your understand the syntax.

class User(db.Model, SerializerMixin):
    __tablename__ = 'users'
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String)

    posts = db.relationship('Post', cascade='all, delete', backref='user')

class Post(db.Model, SerializerMixin):
    __tablename__ = 'posts'
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String)
    created_at = db.Column(db.DateTime, server_default=db.func.now())
    user_id = db.Column(db.Integer, db.ForeignKey('users.id'))

- Serialize Rules - We are done creating a relationship but we might want to limit the output of data that we display that we show to just a few items. We can use serialize rules to do this. Be aware that this is where the most errors are made because of the syntax necessary to make it work, so pay attention and take your time.

class User(db.Model, SerializerMixin):
    __tablename__ = 'users'
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String)

    posts = db.relationship('Post', cascade='all, delete', backref='user')

class Post(db.Model, SerializerMixin):
    __tablename__ = 'posts'
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String)
    created_at = db.Column(db.DateTime, server_default=db.func.now())
    user_id = db.Column(db.Integer, db.ForeignKey('users.id'))

    serialize_rules = ('-posts.user_id', '-posts.created_at',)

In the example here we are limiting the amount of info in the response to our database, subtracting the user_id and created_at data in our post class. If you happen to get recursion errors when you set this up it is most likely that you forgot a comma in your serialize rules. Serialize rules require a tuple which each item must end in a comma and if it doesn't will throw errors or just not subtract your data field from the output.

SerializerMixin - You may have noticed this in the code and wonder what it does. SerializerMixin allows you to exclude output but in a much more modular way. Serialize rules will keep the excluded output from leaving your model classes but SerializerMixin allows you to exclude data fields when you make your data requests.

If we have an app.py file which handles CRUD (create, read, update, delete) functions we might want to exclude fields here instead of having to write custom dictionaries which will be necessary if we use serialize rules. So how does it work? SerializerMixin just allow us to do the same thing as serialize rules but in our actual request. First, make sure it is installed by using this command in your terminal.

pip install SQLAlchemy-serializer

Once installed and imported into your models file you can use it to allow you to edit your output when you request them. Be aware that you will throw attribute errors if you forget the comma because once again we need to provide a tuple in our rules. Because we are using SerializerMixin we can make rules for each output not limiting our options. In the example app.py file below we don't want to show our user_id and created_at fields in our get function but lets say we want to see our created_at in our post function we will set it up just excluding user_id. As your can see this allow much more flexibility in what our responses will display.

class Posts(Resource):
    def get(self):
        posts = [post.to_dict(rules=('-posts.user_id', '-posts.created_at',)) for post in Post.query.all()]
        return make_response(posts, 200)

    def post(self):
        post = Posts()
        data = request.get_json()

        try:

            for attr in data:
                setattr(post, attr, data[attr])

            db.session.add(post)
            db.session.commit()
            return make_response(post.to_dict(rules=('-posts.user_id',), 201)
        except ValueError:
            return make_response({ "errors": ["validation errors"] }, 400)

Notice that we excluded the same data when we setup our serialize rules so we don't need to use serialize rules if we don't want to. One note though, if you have relationships that are more complex you will still have to use some serialize rules or your will run into recursion errors.

Just like that we have learned to tackle the complexity of ForeignKeys, Relationships, Serialize Rules and SerializerMixin. Refer to this guide if you need a refresher or have syntax questions. It's not that difficult once you know what everything is doing and how the components interact.

Understanding Many for Many Relationships in Python and Tips for Coding Them

AaronNewTech — Wed, 09 Aug 2023 15:29:16 +0000

When you start beginning to use object oriented programming in Python the concept of many to many can seem very straightforward and dare I easy to understand. Or at least that's what I thought when I first was exposed to the concept. Actually I stand by that statement that it is an easy concept but will explain why this easy to understand concept is frustrating for programmers to understand. In this article we will get into this necessary topic when beginning object oriented programming. Why the concept isn't hard to understand but why it could be and when it becomes complicated.

What are Many to Many Relationships and Why Do We Use Them?

Object oriented programing is probably the first instance when you would be exposed to the phrase many to many but you should actually be familiar with the concept already. Human relationships are examples of many to many relationships. When there are many instances of a person having more than relationship title such as a person having two friends that are not friends or don't know each other. This is an example of a one to many relationship in the diagram below. Fred has many friends in this case named Jonny and Adam.

Many to many is similar except that we are focusing on the network of relationships that is formed by the interactions of many relationships. For example Fred that has two friends but the friends are friends with each other. This means that Fred has many friends but Jonny and Adam have many friends also.

How to Understand Many to Many Relationships?

The examples above are easy to understand yet it can still be confusing if you focus is on the object title instead of the relationship. Think of the examples above with friends. It is important to understand this concept by emphasizing the possessiveness of the word "having" and the connections being the focus not object titles. Visually you can think of the arrows being the focus of our attention because the arrows denote the relationship the objects themselves. In the examples the arrows have the label friend which is the relationship. However don't forget it is the objects that have the relationships.

Why Many to Many Relationships Get Complicated and What to Do About It

Conceptually many to many relationships are not the most complicated topic but understand that we are abstracting twice when working with many to many relationships. Once when thinking about relationships and the second when you are coding them. Because we are trying to hold two competing abstract concepts at the same time it can drain mental resources or even stump your brain. The good news is that once understanding the concept of many to many relationships becomes automatic it will free up your mind to code using these relationships.

If you are still having trouble understanding the concept, don't worry here are some additional tips to help you get the hang of it faster and easier.

Draw a picture like those in my examples. By drawing a picture we can remove one abstraction from our work and will only have to deal with one abstract concept, programming.
Think about how the relationships interact in real life. For instance you could have barns, animals and farmers. An cow animal could have just many barns that it frequents, the same cow could have many farmers and the farmers could have many barns. This in writing is somewhat abstract but if you think about the actual items or grab some toys to act out the relationships it will start to make sense.
Be patient. Abstract thinking is skill that can take time but if you give yourself time to adjust it will start to make sense. The programming aspect of many to many relationships especially can take lots of practice and time to master so start coding.

If you are still struggle its important to review and practice. You will get this concept eventually but with the examples above and your own many to many relationships will be easy a pi. Wait is pi easy? Good luck!

Debugging In Python Using IPDB

AaronNewTech — Sun, 06 Aug 2023 20:19:42 +0000

Python is a popular programming language that according to statista is the 3rd most used and 49.28% of developers use. But unlike some other languages debugging in Python can sometimes be challenging. Recently, working on a challenge I began working with IPDB which is a debugging tool that you can use to correct your code.

What is IPDB?

So what is IPDB? IPDB is an alternative to the default pdb debugger and uses the python shell environment to make debugging easier. Running your code with this program can be used in several ways entering the shell or even using a separate debug.py file, my preferred method for larger programs.

How does it Work?

By inserting the IPDB code line you can pause your code at that line and optionally enter commands to check how your code in working in real time. This provides invaluable feedback to the beginning programmer making the learning curve faster by saving much needed debugging time. Debugging in this way lets you know exactly what your code is executing step-by-step without the guesswork normally associated with python debugging.

Problems IPDB can Solve

Unintended Behavior.

Infinite loops, incorrect conditionals or faulty functions can all cause behavior that doesn't work as intended which can cost hours of development time that can be easily corrected.

Check Variable Values

One aspect of coding that can frustrate even experienced developer is variables that don't have the values you expect them to. IPDB when running simply allows you to type the variable in the terminal to view its contents.

Check Loops and Recursions

Loops and recursion often give erratic behavior and are the cause of many code gremlins. By incrementally going thru code you can see where the errors are and correct them.

Exception Tracking

When exceptions are raised it can be difficult to see where and IPDB can inform you when the exception is raised. This makes tracking what is throwing them much easier lowering developer stress levels.

IPDB in Action

There are several ways to set up IPDB but the most straightforward way is to start with an in program import and break point.

Here is a simple example of this in the following code:

# import IPDB debugger
import ipdb

def add_numbers(a, b):
    # debug code line
    ipdb.set_trace()  # Start debugging from this point
    result = a + b
    return result

x = 5
y = 10
print(add_numbers(x, y))

By running our program in the terminal with the ipdb.set_trace() code we will enter the IPDB program in the terminal. In this example we see that before the addition of 2 numbers we are stopping the program which will give us the insight we need to see what is going on in our code.

In the next example we can see how IPDB can be used in a loop.

import ipdb

def calculate_square(n):
    return n * n

def main():
    numbers = [1, 2, 3, 4, 5]
    squared_numbers = []

    for num in numbers:
        # debug code line
        ipdb.set_trace()  # Start debugging at each iteration
        squared_numbers.append(calculate_square(num))

    print("Original numbers:", numbers)
    print("Squared numbers:", squared_numbers)

As you can see we put ipdb.set_trace() in our code line giving us the chance to increment through our code to see the updated values in our variables.

In both examples you can see IPDB in action and using it can be a easy as entering these commands:

n or next: Execute the current line and stop at the next line in the same function.
s or step: Step into functions called from the current line.
c or continue: Continue execution until the next breakpoint or program termination.
q or quit: Exit the debugger and terminate the program.

In these examples IPDB is a simple but powerful but offers insight into our code so that we don't spend hours guessing on how we can fix it. Instead we can just use IPDB to understand what our code is doing. IPDB is user friendly, easy to use and learn, so no more excuses start using it today and get rid of few more code gremlins.

How UseState Can Keep Data Organized in a Multi-component Application

AaronNewTech — Wed, 19 Jul 2023 13:30:37 +0000

When you first start learning to program in React, UseState is one of the first aspects that you will be exposed to that is different than vanilla Javascript. UseState can be confusing but once understood is a powerful way to manage data and visual elements across multiple files. Learning how to effectively employ useState will keep your app working nice and cleanly making your development process less prone to mistakes and headaches.

When you build a react app eventually you will want to use several files to manage the various functions of your application but this creates a problem. When working with multiple files, eventually you will need to reassign variables holding your data. This can start to add complexity and more code which requires more time and effort to finishing your project.

Not only that your will need to rerender the screen to the updated information which means reusing or rewriting functions. Using States can simplify this process and can lessen the amount of code that you need to write for your program.

For example, a game application with money, items or hit points might need to be rerendered when changed. Simply changing the state will keep your program lean and mean. The examples below show how useState can save time and effort when rendering your application.

This example uses a counter that could be for game elements that are updated every time the button is clicked.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

The count state can be changed when other events happen by just changing the state like so:

setCount(10)

If we look at Javascript to accomplish the same thing it gets much more intense and is more work.

<div id="counter"></div>

<script>
  function useState(initialValue) {
    let value = initialValue;
    const setValue = (newValue) => {
      value = newValue;
      render();
    };
    return [value, setValue];
  }

  function createElement(tagName, props, ...children) {
    const element = document.createElement(tagName);
    for (let prop in props) {
      if (prop.startsWith('on') && typeof props[prop] === 'function') {
        const eventName = prop.substring(2).toLowerCase();
        element.addEventListener(eventName, props[prop]);
      } else {
        element[prop] = props[prop];
      }
    }
    children.forEach((child) => {
      if (typeof child === 'string') {
        element.appendChild(document.createTextNode(child));
      } else {
        element.appendChild(child);
      }
    });
    return element;
  }

  function Counter() {
    const [count, setCount] = useState(0);

    const increment = () => {
      setCount(count + 1);
    };

    const render = () => {
      const counterElement = document.getElementById('counter');
      const element = createElement('div', null,
        createElement('p', null, `Count: ${count}`),
        createElement('button', { onclick: increment }, 'Increment')
      );
      counterElement.innerHTML = '';
      counterElement.appendChild(element);
    };

    render();
  }

  Counter();
</script>

In the above example we are creating elements and you might not want to do that in your application, but that is the beauty of React. Because each React component is rerendered when a state is changed we can make our application interactive in a way that is just too time consuming with vanilla Javascript.

This example also is just to create elements and assign values, if our button is clicked we still have to write code for that. UseState we just need to reassign our variable like so...

setCount(10)

... and React will rerender our on screen changes. The difference is striking and is just one change. Imagine a program with 20 variables like this that all needed to be changed on user events. React does so much of the heavy lifting its no wonder many apps like Facebook, Netflix and Dropbox.

Using states is one of the best aspects when coding in React because rerendering just means changing states. In Javascript it means removing and creating elements on user interaction which makes it far more time consuming and far more prone to errors the more complicated our code gets.

React can be challenging to understand when first learning but once you do the rewards far outweigh the challenge of learning it.

Pseudocode Your Way To Shorter Development Time.

AaronNewTech — Sun, 11 Jun 2023 23:06:28 +0000

If you are like me, new to coding, or even someone that is a seasoned professional, you might need help saving time when coding. This can be for many reasons, missing files, lack of experience in the language you are working with, or the main culprit for me: not defining clear instructions for what my program is trying to accomplish.

If you are thinking, "Well, duh, that is a common problem for anyone trying to take information from the human world and trying to translate that into a programming language."

I understand and agree that it is an obvious thing to do when you want to solve any problem, but the challenge I want to pose here is, "Are you actually defining problems clearly?" Because I find myself wasting time working on code only to realize my errors when I stop to write clear intentions for the program.

Many beginners should pay more attention to the power of having clear procedural principles when overcoming the steep learning curve of coding. By having clear first principles, we positively affect the coding learning curve.

For example, we will often organize our day with a to-do list in a way that reads as follows:

Do the laundry
Walk the dog
Clean the bathroom
Finish TPS reports

If you notice that it looks pretty simple, you understand my point. If you contrast this with coding a program, you might paradoxically simplify things when defining the task so much that it is hardly worth writing down.

It might look like this:

Write a function to find the number of vowel letters on a webpage

Now at first, it seems simple enough; you will use some way to iterate through the site's text so that you can count them. However, should you search the HTML only, or do we need to include the letters from Javascript and CSS? Or are we just looking for the displayed text the user will read when viewing on a browser?

Well, the display text for this program might be what we want, but if we didn't decide this is what we mean in our pseudocode or, worse, didn't write pseudocode, then our mind is already thinking about a bulk data parsing function instead of a precise function that collects only information about the displayed website text. If we are not clear on what we are trying to do from when we first write our pseudocode, then we are already likely in the weeds and wasting time.

Writing the task in a way that leaves so much open to interpretation can cause wasted effort and time. Imagine this simple project could take hours, and yet it is simple compared to the many moving parts you are of complex or large projects.

The profound simplicity of stating the problem you are undertaking in the most straightforward or accurate words possible can remedy the confusion that beginning coders may experience.

We can write a basic pseudocode like the one above but then detail the exact components to include in our program to fix this clarity problem for good. Doing this can save time, effort, frustration, and mental resources that can be used on other projects.

An example of a precise pseudocode could look like the following:

Write a function to find the number of vowel letters on a webpage
Exclude CSS and Javascript pages
Only parse the visible HTML elements like headers, paragraphs, head, footer, etc
Use a loop with conditional statements for regular expressions to parse the text a, e, i, o, u
Increase the counter variable by one when the letter is equal to a, e, i, o, u

This pseudocode example gives a clear set of instructions to write our program. We could be more detailed in writing the program components. However, it is a start for any beginning coders looking to shorten the time it takes to solve problems they are working on.

This way, we can follow the steps to completion, like how a baker follows a recipe to bake a cake or pie. At least for me, clear pseudocode instructions have proven invaluable, illuminating the path forward to a quicker and easier code-writing process.