DEV Community: Jai Stellmacher

Effective Strategies for Error Handling and Debugging in React Web Development and Backend Python Development

Jai Stellmacher — Sat, 01 Jul 2023 20:50:50 +0000

Photo above from Pixabay by the creator mohamed_hassan

Intro

As a developer, encountering errors and bugs in your code is inevitable. However, the way you handle these errors and go about debugging can make a significant difference in the efficiency and quality of your work. In this article, I will go over basic strategies for handling errors and debugging in two popular domains: React web development and backend Python development. By following these best practices, you can streamline your development process and create more robust applications. (I chose these two places because I have been creating projects in this realm for a while. I have struggled a bit myself, so why not write about it?)

Error Handling in React Web Development:

React is a widely used JavaScript library for constructing user interfaces. When it comes to handling errors in React web development, the following techniques can be super helpful!

Utilize Error Boundaries: React provides Error Boundaries, a built-in feature that traps JavaScript errors within a component's tree and prevents the entire application from crashing. By defining Error Boundary components at strategic points in your application, you can gracefully manage and display error messages to users while maintaining application stability.

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state to display fallback UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Log the error to an error reporting service
    console.error(error);
    // You can also log the errorInfo, which contains component stack trace
    console.error(errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Render fallback UI when an error occurs
      return <div>Oops! Something went wrong.</div>;
    }

    // Render the component tree when no error occurred
    return this.props.children;
  }
}

export default ErrorBoundary;

Above is how to implement it with notes. Below is how to make sure it is affecting your code:

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <ErrorBoundary>
        <MyComponent />
      </ErrorBoundary>
    </div>
  );
}

export default App;

2. Implement Proper Logging:
Logging plays a vital role in identifying and diagnosing errors. Employ logging libraries like console.log, console.error, or more advanced tools like logrocket to log relevant information about the error, including stack traces, component hierarchies, and state snapshots. These logs can assist in reproducing and comprehending the context in which the error occurred.

import React, { useState } from 'react';

function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!name || !email) {
      setError('Please fill in all fields');
      return;
    }

    // Perform form submission logic here...

    // If an error occurs during submission, log the error
    try {
      // Code for form submission...
    } catch (error) {
      console.error('Form submission error:', error);
      setError('An error occurred during form submission');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      {error && <div className="error">{error}</div>}
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

In the above example, I am logging errors in a form.

3. Using Chrome DevTools to Catch Bugs - Step by Step:

Open your website or web application in Google Chrome.
Right-click on the page and select "Inspect" from the context menu.
This will open the Chrome DevTools panel. Navigate to the "Console" tab.
Look for any red error messages or warning messages in the console. These indicate bugs or issues in your code.
Click on the error message to see the details and the line of code where the error occurred.
Use the "Elements" tab to inspect and modify the HTML structure and CSS styles of your page. This can help identify layout issues and incorrect styling. Utilize the "Sources" tab to debug JavaScript code.
Set breakpoints by clicking on the line numbers, which will pause the execution of your code at that point.
Use the controls (step into, step over, step out) to navigate through your code line by line and observe variable values, function calls, and control flow.
Examine network requests, performance metrics, and resource usage in the "Network" and "Performance" tabs to identify potential bottlenecks or issues with API calls.
Leverage other features in Chrome DevTools, such as the "Application" tab for inspecting local storage, cookies, and service workers, to further analyze and debug your application.

Python Degugging! Backend Development:

Python is a versatile programming language commonly employed for backend development. When it comes to debugging Python applications, the following strategies can prove beneficial:

1.\ Utilize Exception Handling:
Python's exception handling mechanism allows you to catch and handle errors gracefully. Use try-except blocks to encapsulate code segments that might generate exceptions. By catching specific exceptions and providing meaningful error messages, you can guide users and swiftly identify potential issues.

# Example of exception handling in Python
try:
    # Code that may raise an exception
    result = divide(dividend, divisor)
except ZeroDivisionError:
    # Handle a specific exception
    print("Cannot divide by zero.")
except Exception as e:
    # Handle other exceptions
    print(f"An error occurred: {str(e)}")

2. Python's IPDB - a wonderful and easy debugging tool (I used it a lot in my most recent fullstack application. I had a slightly complex backend schema and needed a lot of debugging):

import ipdb

def divide(a, b):
    result = a / b
    return result

def main():
    ipdb.set_trace()  # Set a breakpoint

    dividend = 10
    divisor = 0

    try:
        result = divide(dividend, divisor)
        print("Result:", result)
    except ZeroDivisionError:
        print("Cannot divide by zero.")
    except Exception as e:
        print(f"An error occurred: {str(e)}")

if __name__ == '__main__':
    main()

In the code snippet above, you need to import the dependency. import ipdb then also figure out where to put the debugger. Use the ipdb.set_trace().

Luckily, Python is pretty linear. Trying to figure out where it can go is pretty easy, just try putting it in many places at first until you notice the patterns. (I look for where logic might start and put it there at first.) In the snippet above, I threw it in the center and explain more below.

In this example above, we have a function divide() that performs division between two numbers. The ipdb.set_trace() statement sets a breakpoint, allowing you to pause the execution of the program at that point and enter the debugger mode.

When you run the script and reach the breakpoint, the ipdb debugger will be activated. You can then interactively debug your code by executing various commands such as inspecting variables, stepping through code execution, and evaluating expressions. Some commonly used commands in ipdb include:

n (next): Execute the next line of code.
s (step): Step into a function call.
c (continue): Resume execution until the next breakpoint or program completion.
l (list): Show the code around the current line.
p (print): Print the value of a variable or expression.
q (quit): Exit the debugger and stop the program.

3. Another way to debug Python is by using print statements that may be similar to React's console.logs.

def divide(a, b):
    print(f"Dividing {a} by {b}")
    result = a / b
    print(f"Result: {result}")
    return result

def main():
    dividend = 10
    divisor = 0

    try:
        result = divide(dividend, divisor)
        print("Result:", result)
    except ZeroDivisionError:
        print("Cannot divide by zero.")
    except Exception as e:
        print(f"An error occurred: {str(e)}")

if __name__ == '__main__':
    main()

Within the divide() function, I use print statements to display the values being divided (a and b) before the division occurs and also print the result afterward.

In the main() function, I catch potential exceptions and use print statements to display error messages when a ZeroDivisionError occurs or when any other exception is raised.

By strategically placing print statements at various points in your code, you can track the flow, variable values, and observe the execution process to identify potential issues and debug your Python applications effectively.

4. Lastly, there are many other specific and more complex ways to track your bugs in Python such as a tool like logging. It can help track the flow of data and user interaction.

import logging

logging.basicConfig(filename='login.log', level=logging.INFO)

def login(username, password):
    # Authenticating logic
    if username == 'admin' and password == 'password':
        logging.info(f"Successful login for user: {username}")
        return True
    else:
        logging.warning(f"Failed login attempt for user: {username}")
        return False

def main():
    username = input("Enter username: ")
    password = input("Enter password: ")

    if login(username, password):
        print("Login successful")
    else:
        print("Login failed")

if __name__ == '__main__':
    main()

Above is an altered (and incredibly simplified) version of my Login code (if I were to do it in the backend). The login() function performs the authentication logic. If the provided username and password match the expected values, a successful login message is logged. Otherwise, a warning message is logged.

In the main() function, I prompt the user for their credentials and pass them to the login() function. If the login is successful, I print a corresponding message. Otherwise, I print a failure message.

By using logging, you can monitor successful logins and failed login attempts, allowing you to investigate any suspicious activities or issues.

Conclusion:

Effectively handling errors and debugging code is crucial for maintaining the quality and reliability of your React web applications and Python backend systems. By following the strategies outlined in this article, including utilizing error boundaries, proper logging, and integrating debugging tools, you can streamline the development process, identify and resolve issues efficiently, and deliver robust and stable software solutions to your users. Remember, error handling and debugging are continuous processes that require constant attention and improvement to ensure the smooth functioning of your applications.

I too am in a continuous learning process and will continue to find better ways to get through my code and work backwards or logic through! Please feel free to leave feedback!

Quick Summary: Building a Robust Backend with Flask, SQLAlchemy, and Sessions

Jai Stellmacher — Thu, 15 Jun 2023 04:54:38 +0000

Why You Should Be Here:

In today's digital age, building a robust and efficient backend is crucial for the success of web applications. Flask, SQLAlchemy, and sessions are powerful tools that enable developers to create dynamic and secure backends. In this blog, I will explore the process of building a backend using Flask, SQLAlchemy, and sessions, and how these technologies can work together to create a seamless user experience.

Understanding Flask

Flask is a lightweight and versatile web framework written in Python. It provides a solid foundation for building web applications by offering a simple yet powerful set of tools. Flask allows developers to create routes, handle HTTP requests, and render dynamic templates. Its modular nature enables easy integration with various extensions, making it highly customizable for different project requirements.

Leveraging SQLAlchemy

SQLAlchemy is an Object-Relational Mapping (ORM) library that simplifies database operations in Python. It provides a high-level, Pythonic interface to interact with databases, abstracting away the complexities of SQL queries. SQLAlchemy enables developers to define database models as Python classes, allowing seamless integration of database operations within the Flask application. This powerful combination enhances productivity and code readability.

Managing Sessions

Sessions play a crucial role in web application development, as they enable the storage of user-specific data across multiple requests. Flask provides a secure and straightforward session management mechanism through the Flask-Session extension. By leveraging session objects, developers can store and retrieve user-specific data, such as login credentials or user preferences, ensuring a personalized experience.

Setting Up the Backend

To start building the backend, we first need to set up a Flask application and define the required routes. Flask's routing mechanism allows us to map URLs to specific functions, enabling the handling of different HTTP methods (GET, POST, etc.) and rendering appropriate templates or JSON responses.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

Creating Database Models

With SQLAlchemy, we can define the database models as Python classes, representing the tables and relationships in our application's database schema. These models provide an abstraction layer for database operations, allowing easy querying, insertion, and updating of data.

from sqlalchemy import Column, Integer, String
from sqlalchemy.ext.declarative import declarative_base

Base = declarative_base()

class User(Base):
    __tablename__ = 'users'

    id = Column(Integer, primary_key=True)
    name = Column(String(50))
    email = Column(String(100))

Integrating SQLAlchemy with Flask

To integrate SQLAlchemy with Flask, we need to configure the database connection settings and initialize a SQLAlchemy object within our Flask application. This connection enables seamless interaction with the database using SQLAlchemy's query API, reducing the effort required for manual SQL queries.

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///database.db'
db = SQLAlchemy(app)

Implementing Sessions

Flask-Session simplifies session management by providing a Flask extension that seamlessly integrates with the Flask application. By configuring the session settings, such as the secret key and storage type, we can enable session functionality. With session objects, we can store and retrieve user-specific data across requests, enhancing the user experience.

from flask import Flask, session

app = Flask(__name__)
app.secret_key = 'your_secret_key'

@app.route('/')
def home():
    session['username'] = 'John'
    return 'Session is set'

Ensuring Security

Building a secure backend is paramount to protect sensitive user information. We should implement measures like secure session storage, strong password hashing, and input validation to mitigate common security vulnerabilities. Flask extensions like Flask-Login and Flask-WTF provide additional functionality to enhance security and protect against attacks.

from flask_bcrypt import Bcrypt

bcrypt = Bcrypt()

password = 'my_password'
hashed_password = bcrypt.generate_password_hash(password)
if bcrypt.check_password_hash(hashed_password, password):
    print('Password is correct')
else:
    print('Password is incorrect')

The Link between app.py and models.py

In a typical Flask application, app.py serves as the entry point of the application where the Flask instance is created, routes are defined, and other application-level configurations are set. On the other hand, models.py is a separate module that contains the SQLAlchemy model definitions, representing the database schema and providing an abstraction layer for database operations. app.py and models.py are usually imported and utilized together in app.py to integrate the database models with the Flask application.

example of bridge between app.py and models.py (will build one)

Alembic and SQLite3 in SQLAlchemy

Alembic is a database migration tool provided by SQLAlchemy. It allows developers to manage database schema changes over time, such as creating new tables, modifying existing tables, or adding new columns. Alembic generates migration scripts based on the changes made to the SQLAlchemy models, making it easier to keep the database schema in sync with the application's codebase.

SQLite3 is a lightweight and serverless relational database engine often used during development or for smaller-scale applications. SQLAlchemy supports SQLite3 as one of its supported database backends, allowing developers to work with SQLite3 databases using the same SQLAlchemy API and ORM features available for other database engines.

code about these 3

Strengths of Using Flask Libraries (Pallet Project)

The Flask libraries, collectively known as the Pallet Project, provide numerous advantages for web application development:

Flexibility: Flask offers a minimalistic and unopinionated approach, allowing developers to structure their applications according to their specific needs and preferences.
Modularity: Flask is designed to be highly modular, allowing easy integration of various extensions and libraries to add specific functionalities like database interaction, authentication, and form validation.
Extensibility: The Flask ecosystem offers a wide range of extensions and plugins that extend Flask's capabilities, allowing developers to add features seamlessly without reinventing the wheel.
Simplicity: Flask has a straightforward and intuitive API, making it easy for developers to get started and build web applications quickly. The simplicity of Flask also contributes to easier debugging and maintenance.
Scalability: Flask's lightweight nature makes it suitable for both small-scale applications and larger projects. With proper design patterns and architecture, Flask can scale effectively to handle increased traffic and complexity.
Active Community: Flask has a vibrant and active community of developers who contribute to its continuous improvement. The community provides extensive documentation, tutorials, and support, making it easier for developers to learn, troubleshoot, and share their knowledge.

Final Thoughts:

By leveraging these strengths, developers can create efficient, maintainable, and scalable web applications using Flask and its associated libraries.

I know this was brief and not very in-depth, but you can use these resources to build a very standard backend.

Below is a Glossary of terms that I thought were good to know.

Glossary

Term	Definition
Flask	A lightweight and versatile web framework written in Python that provides a solid foundation for building web applications.
SQLAlchemy	An Object-Relational Mapping (ORM) library that simplifies database operations in Python, providing a high-level interface.
Sessions	A mechanism that enables the storage of user-specific data across multiple requests in a web application.
Flask-Session	A Flask extension that provides a secure and straightforward session management mechanism.
Routes	URLs mapped to specific functions in Flask that handle HTTP requests and render templates or JSON responses.
Database Models	Python classes in SQLAlchemy that represent the tables and relationships in a database schema.
Flask-Login	A Flask extension that provides user session management, authentication, and authorization functionality.
Flask-WTF	A Flask extension that provides integration with WTForms, allowing easy creation and validation of web forms.
Alembic	A database migration tool provided by SQLAlchemy that manages database schema changes over time.
SQLite3	A lightweight and serverless relational database engine often used during development or for smaller-scale applications.
Pallet Project	The collection of Flask libraries and extensions that provide advantages for web application development.
Flask-Security	A Flask extension that adds security features like authentication, role management, and password hashing to Flask applications.
Jinja2	A powerful and popular templating engine used in Flask for rendering dynamic HTML templates.
Flask-Migrate	A Flask extension that integrates SQLAlchemy and Alembic to provide database migration capabilities.
WTForms	A flexible forms validation and rendering library for Python web development, commonly used with Flask.
Flask-Cache-Control	A Flask extension that provides control over HTTP caching by setting appropriate Cache-Control headers.
Flask-Mail	A Flask extension for sending email messages from Flask applications.
Flask-RESTful	A Flask extension that simplifies the creation of RESTful APIs by providing tools and decorators for resource routing.

Python Basics: A General Guide for Beginners

Jai Stellmacher — Mon, 22 May 2023 06:00:15 +0000

Photo by shimibee on Pixabay Resized in Canva to Fit!

Python IDE:

print("Hello, World!")

Terminal:

>> Hello, World!

README.md

Welcome Python Newcomers, beginners, or Re-learners (learned a legacy Python?). This article will outline basics of Python such as vocabulary, basic examples, and a learning path that you can follow to build your skills! [Vocabulary is at the Bottom]

Why Learn Python?

Python is one of the leading coding languages to learn at the moment of writing. It is useful for many different reasons due to the freedom of what you can do with the language. A few examples are:

Write scripts that automate daily processes
Create wonderful backend databases due to its server-side logic <2 popular frameworks are: Flask & Django>
Build frontend which is unpopular because Javascript is a wonderful and an easier way of building frontend. ---(Python Frameworks for this: Pywebview, Eel)
Situate Data Analysis's and Visualizations (My personal favorite use!)(My favorite libraries: Pandas, Numpy, Matplotlib, Seaborn, Scikit-Learn, 3D data analysis: Open3D)
Craft Machine Learning and Artificial Intelligence (ML-Libraries I used in college: LightGBM, Statsmodels) & (AutoML-Libraries I also used: PyCaret) & (DeepLearning-Librarie that I used: PyTorch)
Engineer Desktop Application Development (These create GUI(graphical user interfaces) that allow for building tools and productivity apps (Frameworks: Tkinter))
Pioneer Game Development using libraries like Pygame for 2D games.
Initiate web scraping (I used Beautiful soup, but the other popular one is Scrapy)
IoT (Internet of Things) This helps communicate with devices like your Roomba (robot vacuum)
Network Programming (Library: Socket) This helps you incorporate or work with network protocols
DevOps & System Admin (Due to its efficiency to automate)

Python is such a vast language. The list above is just scraping the surface of python. When you start with Python in one of these fields definitely check out the popular frameworks above!

What to download first?

In Python, it is good to know that you can code just "out-of-the-box", but libraries are powerful because it helps with efficiency. I will show an example further down.

Steps:

First download VSCode. (An IDE (Integrated Development Environment - It is a place to code that has tools to use) that is currently the most popular to use to code. VsCode Link
Download Python onto your computer. Follow the steps in the popup window after it downloads.
Next Open up VSCode and on the left side bar, click 'extension' or click on an icon that looks like a square of squares with the top left square rotated slightly.
Once there, type in 'Python' and download the top of the list. (There is better documentation on the official vscode site linked here)
On your keyboard press the buttons, "ctrl + n" (mac: cmd + n) This will create a new file. In the little word snippet at the top it will say "Select a language, or fill with template, or open a different editor to get started. Start typing to dismiss or don't show this again." In this snippet, click the "select a language". A dropdown menu will open and type in 'python'. Press enter if it is selected.
Now, your file will be a python file. Here, we can code in python.

Wow time for your first project just to prove you can do it!

You should have your python file open in your vscode if you followed the steps above!

Here, we will type in the following on line 1.

print("Hello, World!")

It should look like the image below:

Next hit "ctrl + s" (mac: cmd + s) It will look like the below picture. In the space where it says, "name", change that to 'hello.py'. Go ahead and click 'enter' on your keyboard.

Wow! You created and saved your first python file! (They should end in a '.py'. There are other variations but we will talk about those in a different blog)

So what do we do now?

Well, nothing happens right? How do we actually make it do something? Do we just yell at it, "Do the roar" "Do the roar"?

The answer is, no, we do not just tell it to do the roar. What we do is run the script (what you just made) in the terminal!

On your keyboard, hit the buttons "ctrl + j" (mac: cmd + j). A terminal will magically pop up in the lower half of your VSCode!

In the terminal type what is shown below:

python hello.py

On the next line after you click 'Enter' on your keyboard should be the same as shown in the following:

Hello, World!

Congratulations! You just wrote and ran your first Python program! Easy, Right?

Now What?

Well, we need to learn the fundamentals!
There are many basics to Python that should be known to understand the language as a whole. Once these fundamentals are learned, you can start specializing in one of the fields that were mentioned above in the section labeled "Why Learn Python?".

Outline of Fundamentals

Syntax & Indentation: Python uses indentation for the compiler to know what the code is trying to do. It is necessary to pay attention to it. Learning code is learning a new language, so it will take time to learn the syntax as well! Do not be too hard on yourself! We all have struggled and confused the coding languages. (Even if you have not learned a different language, all coding language's syntax is hard to keep straight unless you specialize in only one!) Below is an example of indentation and using the correct syntax!(The >> means it is the outcome if it were to be run through the terminal. Which you can do if you type "python filename.py" in the terminal):

for i in range(1, 5):
    print(i)
>> 1, 2, 3, 4

Note: To comment code out in Python use the # symbol! You can comment out a lot of code by highlighting a piece of code and pressing on your keyboard, "crtl + /"(mac: cmd + /)

2. Variables and data types: Variables store data of different types, such as numbers, strings, and booleans. Example:

name = "Max" #quotation's content in python are called strings!
age = 25 # defining a number variable! (SEE NOTE BELOW)
is_student = True #boolen truth or false

Note: Numbers in Python: In python there are 3 types of numbers - plain integers are just positive or negative whole numbers, floats represent real numbers: decimal points, complex numbers: IDK they are complex (lol) don't ask me! Here is a good article for it Geeksforgeeks Website)

3. Operators and expressions: Operators perform actions on values and variables, and expressions combine variables, operators and values. Example:

x = 4
y = 5
result = x + y
print(result)  # Output: 9

Above is an example of code. The operator here is the "+" plus sign. Below is an expression example. The expression is the "full sentence of the math being put together - here it is the z = 2 * (x + y) - 1 portion"

x = 6
y = 5
z = 2 * (x + y) - 1
print(z)  # Output: 21

4. Control flow statements (loops & conditionals): A loop will repeat code until a condition is not true. A conditional is (if, elif, else). They dictate the flow of execution of the code based on conditions that you-the creator can place. Example of loop:

foods = ["Sushi", "Pizza", "Crepe"]

for food in foods:
    print(food)

Terminal Will Print

Sushi
Pizza
Crepe

What is happening in the code above? We are defining foods with a data structure called a list. This is denoted by the square brackets []. Note: If you are coming from a different language, make sure you do not mix up your curly brackets and your square brackets!

After we define the list of foods (it contains sushi, pizza, and crepe), we loop through the list. In python, this means that it reads the first item in our list, "sushi" then prints it out, then it goes through again, reads the next and prints it, lastly it reads the "crepe" and prints it. It is good to understand what the sentence means. "for food in foods:" This means that each "food" item is being assigned and counted in the list of "foods"

A separate example of this could be, "for i in range(1, 5):"
What is happening here is that "i" defines the place holder and the range(1, 5) means that the loop will go through each number 1 by 1, starting at the number 1 and going to the number 4. (It is weird, I know. Why does it say 5, and the loop will only print 4?? If I remember from college correctly, its because it starts at 0) If you want to see this in action look at the gif below:

Below is the terminal outcome:

Example of conditional:

age = 16

if age >= 18:
    print("You are an adult.")
else:
    print("You are not yet an adult.")

In the above example, this is a conditional. The age defined in the program is 16. The "if" statement will print "You are an adult." if the age is above or equal to 18. If your age is less than 18 then the "else" portion of your code will occur.

Below is how it executes in the terminal:

5. Functions and modular programming: Functions are reusable blocks of code. They can perform tasks. Modular programming helps with organization and reusability. Example:

def greet(name):
    print("Hello, " + name + "!")

greet("John Doe")

If we wanted, we could greet someone other than John Doe if we do the following:

greet("Max Smith")

The outcome of the first code block will be "Hello John Doe" and now with the change, the second code-block if ran will be "Hello Max Smith".

The beauty of this type of coding is that it is less redundant and its easier and more "dynamic". (Which is part of python's current best practices)

Phew! That was a LOT!

I suggest that you get up and go take a break! Let that information sink in, and try doing some other basic examples! I would start with assigning variables to numbers and doing math in order to get familiar with how Python can work. I suggest this site to try just seeing Python do stuff. Site: https://codingexplained.com/coding/python/basic-math-operators-in-python

If you have taken a break and are ready to learn on, Lets Go!

What do we learn now? Well, there are other aspects of Python such as Data structures and Algorithms. If you want a job at the big MAANG(Meta, Apple, Amazon, Netflix, and Alphabet[Google]) companies, then knowing these will help a lot!

So what are they?

Data structures: Special boxes that hold different kinds of data. Each data structure has its own unique way of storing and accessing data. Types: lists, tuples, dictionaries, and sets. Note: data structures start at 0! So if you are looking for something in "first place" it usually is the zeroth place! Below you will see examples such as [0]. This will look at the place you think is "1st place"! Also, notice the difference in syntax! ie. curly brackets or square brackets and the content within them!

List Example:
When to use? : Use when you need to store and access an ordered collection of items.

# Creating a list
foods = ["sushi", "pizza", "crepe"]

# Accessing elements in a list
print(foods[0])  # Output: "sushi"

# Modifying elements in a list
foods[1] = "pizza"
print(foods)  # Output: ["sushi", "pizza", "crepe"]

# Adding elements to the end of a list
foods.append("steak")
print(foods)  # Output: ["sushi", "pizza", "crepe", "steak"]

# Removing elements from a list
foods.remove("sushi")
print(foods)  # Output: ["sushi", "pizza", "crepe"]

Tuples Example:
When to use? : Use when you want to store a collection of related values that will not change.

# Creating a tuple
point = (1, 4)

# Accessing elements in a tuple
print(point[0])  # Output: 1

# Tuples cannot be altered, so modifying is not possible
# point[0] = 4  # This will result in an error

Dictionaries Example:
When to use? : Use when you need to store data as key-value pairs. This helps with efficient lookup and retrieval. (Fun Fact: This is a good thing to remember for learning SQL!)

# Creating a dictionary to represent a college student
student = {
    "name": "Max",
    "age": 22,
    "major": "Marketing",
    "year": 3
}

# Accessing values in the dictionary using keys
print("Name:", student["name"])  # Output: "Name: Max"
print("Age:", student["age"])  # Output: "Age: 22"
print("Major:", student["major"])  # Output: "Major: Marketing"
print("Year:", student["year"])  # Output: "Year: 3"

# Modifying values in the dictionary
student["age"] = 22
student["year"] = 4
print("Updated Age:", student["age"])  # Output: "Updated Age: 21"
print("Updated Year:", student["year"])  # Output: "Updated Year: 4"

# Adding new key-value pairs to the dictionary
student["university"] = "XYZ University"
print("University:", student["university"])  # Output: "University: XYZ University"

# Removing a key-value pair from the dictionary
del student["major"]
print(student)  # Output: {'name': 'Max', 'age': 23, 'year': 4, 'university': 'XYZ University'}

Sets Example:
When to use? : Use sets when you want to store a collection of unique elements. This will have no particular order.

# Creating a set of food items
foods = {"sushi", "pizza", "crepe"}

# Adding elements to the set
foods.add("burger")
print(foods)  # Output: {"sushi", "pizza", "crepe", "burger"}

# Removing elements from the set
foods.remove("pizza")
print(foods)  # Output: {"sushi", "crepe", "burger"}

# Sets automatically remove duplicate elements
foods.add("sushi")
print(foods)  # Output: {"sushi", "crepe", "burger"}

Simple right? Good job on learning the basics in data structures! Software Engineers should understand data structures because they dictate the speed of grabbing data! In the grand scheme of things, this is good to know if you are trying to build efficiency and speed in your apps. (Which is what you should strive to do!)

Algorithms!

What are they? : They are step-by-step instructions that help you solve a puzzle or issue! Being someone in the field of coding should be able to logically go step by step in their processes! (Computers essentially progress from beginning to end) The most common example is instructions for building a peanut butter and jelly sandwich!

There are special algorithms in code though! They help by breaking up your problems into smaller and more manageable steps!

Knowing all of these algorithms is a bit intermediate so do not worry about committing all of these to memory! They are great to know though for any coding interviews you do!

The types of Algorithms:

Sorting Algorithms: -- Merge Sort: Efficient for sorting large lists or arrays. -- Quick Sort: Efficient for sorting large lists or arrays, widely used in practice. -- Bubble Sort: Simple but inefficient for large lists. -- Selection Sort: Efficient for small lists or partially sorted data. -- Insertion Sort: Efficient for small or partially sorted lists.

2. Searching Algorithms:
-- Binary Search: Efficient for sorted lists, dividing the search space in half at each step.
-- Depth-First Search (DFS): Used for traversing or searching in tree or graph structures.
-- Breadth-First Search (BFS): Used for traversing or searching in tree or graph structures, exploring neighbors first.

Linear Search: Simple but not efficient for large lists.

3. Graph Algorithms:
-- Prim's Algorithm: Finding the minimum spanning tree in a weighted graph.
-- Kruskal's Algorithm: Finding the minimum spanning tree in a weighted graph.
-- Dijkstra's Algorithm: Finding the shortest path in a graph with non-negative weights.

4. Recursion:
-- Tower of Hanoi: Solving the Tower of Hanoi puzzle using recursion.
-- Factorial: Calculating the factorial of a number using recursion.

5. Hashing:
-- Hashing Algorithms: Understanding different hashing techniques like MD5, SHA-1, and SHA-256. This is for passwords!

6. String Algorithms:
-- String Matching Algorithms: Understanding algorithms like Brute Force, Knuth-Morris-Pratt (KMP), and Rabin-Karp for pattern matching.

7. Tree Traversal:
-- In-order, Pre-order, and Post-order Traversal: Visiting nodes in a tree in different orders.

8. Dynamic Programming:
-- Fibonacci Sequence: Solving the Fibonacci sequence efficiently using memoization or bottom-up approaches.
-- Knapsack Problem: Solving the knapsack problem using dynamic programming.

So Much To Learn!!!

I will not include these, but you should study up on the following as well!

Error Handling: This is a way to debug or find where your coding logic does not make sense. It helps break apart your code and makes it "easier" (not many things are easy in coding) to find the issues.
Input/Output and File Handling: A way to let users or testers input information into your code (interact with it) and the outputs of that. This is most commonly seen in command-line-interface apps as well as backend database manipulation. The File handling is just ways to "read" and "write" files!

Moving Forward - What should I do?

Continue to practice, practice, and practice! The best way to learn any language is to move to a country that speaks it majorly and be immersed. (People trying to learn Spanish, may live in Spain and become more in touch with it! In our case, just start coding. I know it may be scary, but there are so many examples and resources out on the internet to help! (Youtube is amazing for coders!)

Below are some resources I use for learning more:

Youtube
Stackoverflow
Google
Dev blogs and articles
(https://www.w3schools.com/python/)
(https://www.freecodecamp.org/news/search?query=python)
I suggest you try this to start! (https://www.learnpython.org/)

Glossary & Terms

Word	Definition
Python	A high-level, interpreted programming language.
Script	A set of instructions or commands written in Python.
Backend	The server-side of a web application or software system.
Frontend	The client-side of a web application or software system.
Framework	A reusable set of libraries or tools for developing software.
Database	A structured collection of data stored and accessed electronically.
Flask	A popular Python web framework for building web applications.
Django	A high-level Python web framework for rapid development and clean design.
Pywebview	A Python library for creating web-based desktop applications.
Eel	A Python library for creating desktop applications with HTML, CSS, and JavaScript.
Data Analysis	The process of inspecting, cleaning, transforming, and modeling data to discover useful information.
Visualization	The representation of data or information in graphical or visual format.
Pandas	A Python library for data manipulation and analysis.
Numpy	A powerful library for scientific computing with Python.
Matplotlib	A plotting library for creating static, animated, and interactive visualizations.
Seaborn	A data visualization library based on Matplotlib.
Scikit-Learn	A machine learning library for Python.
Open3D	A library for 3D data processing and visualization.
Machine Learning	A subset of artificial intelligence that enables systems to learn from data and make predictions or decisions.
Artificial Intelligence	The simulation of human intelligence in machines that are programmed to think and learn.
LightGBM	A gradient boosting framework for machine learning tasks.
Statsmodels	A library for statistical modeling and analysis.
PyCaret	An open-source library for automated machine learning.
PyTorch	A deep learning library for Python.
Tkinter	A standard Python interface to the Tk GUI toolkit.
Pygame	A set of Python modules for game development.
Web scraping	The extraction of data from websites.
Beautiful Soup	A Python library for web scraping and parsing HTML and XML.
Scrapy	A Python framework for web scraping.
IoT	Internet of Things - The interconnection of everyday objects via the internet.
Socket	A low-level network programming interface in Python.
DevOps	A set of practices combining software development (Dev) and IT operations (Ops).
System Admin	A person responsible for the upkeep, configuration, and reliable operation of computer systems.

Where to now?

Check out this great Roadmap for becoming a Python Developer!(https://roadmap.sh/python)
I suggest that you start building basic apps. Then once you are comfortable with everything mentioned in this article, move onto finding what specialty of Python you want to learn!

If you have any questions or need help on your journey, post a comment!

Good luck and have fun!
-Jai

Decisions, Decisions which Route(r) Should I Take?

Jai Stellmacher — Mon, 01 May 2023 09:28:22 +0000

There are so many frameworks for most languages especially Javascript and React. Which one do you use? In this case specifically, I will be talking about React Routers and Next.js Routers!

What Are They?

Routes In React: Routers in their most simple sense help to manage your site's URL's (URL = Uniform Resource Locator - web address). When a user clicks on a link, they are directed to the correct page of your web app.

React Routers: A Good Place To Start React Router Website React Router helps to make specific components of your app connect to each other via links. These routes can have parameters placed on them and be nested. The potential for single page sites when implementing routes can have complex functionality. React Router can do both client side and server side routing. In client side routing, the routing happens in the browser whereas server side, the server is responsible for rendering the components.

Next.js Router: Documentation Next.js can also handle both forms of routing. It has all of the same functionality of React Router, so what is the difference and why would you use one over the other?

Key Differences

Next.js Router	React Router
Framework for building server-rendered React Apps	Standalone library
Has a routing system built in	Has set of components and APIs that help with navigations
Use them to define how the App should handle different URLs	Client-side routing is prioritized and there is more setup involved

Both types of routers can be used for your application. Choosing one or the other depends on your specific need and your understanding of web development. If you need an entire package of "out-of-the-box" features, then go with Next.js. If you want to have very specific ways of routing, then use React Router.

A few idea generators that may help you figure out if you want client side or server side routing are displayed in the following list:

Server side is better for content-heavy websites where the content does not change frequently. It provides better SEO and faster initial page loading times.

Client side is better for interactive applications where content is dynamically loaded and user interactions are frequent. This approach allows for faster page rendering and a smoother user experience.

This Documentation is amazing

This framework is cool

One example of a project that uses client side routing is a single-page application (SPA) built with React. Here, we do not need to constantly go back and forth to render data.

It is interesting though, currently many apps can implement both types of routing so truly choose one or the other is up to you!

I hope this helped define each tool and that you may feel inclined try both!

"That Is So Fetch": Weather API Webapp

Jai Stellmacher — Fri, 07 Apr 2023 08:11:35 +0000

![Map of the world from Pixabay]Photo by Pixabay [The fetch quote is a reference to the 90s movie "Mean Girls" said by the Gretchen Wieners character]

Getting Started

Hello, internet. This article will detail my process through building a "simple" API fetch web app for the first time. I struggled through not only the CSS not centering due to parent issues, but also JavaScript fetch issues. As I go through my process, I will try to provide ways I could have done this in a more efficient way. I had a project partner but will be talking in the first person the entire article. (Assume "I" and "We" is interchangeable. Both of us take credit equally and could explain it) (TLDR: Here is a weather app built using vanilla js, html, css (https://jstellmacher.github.io/Weatherboys/))
FORWARNING
I am new to javascript as of a month ago so please do not use this as a reference for your code. It may not work for you due to my lack of experience. I will strive to learn and grow though! (I changed some of the variable names just so it cannot be copied and pasted)

To begin, we created the repository as seen below.

From there, we named it "Weatherboys". We added an automatic ReadMe just incase we wanted to add specific instructions on the app or things that we learned during the process.

After setting up the repository, we cloned the actual repository so we would both have it on our Githubs. (This was an issue) Below are two diagrams created in Draw.io that displays the current progression (top) and the second is best practices.

The second diagram is the correct way to do it because it makes less merge conflicts as well as cuts down the need to continuously git push to two different repositories.

Choose an API

Finding an API was easy. Pick an idea of what you want to do, and you will most likely find an API for it. We found a compilation of APIs on a GitHub repository linked HERE Shout out to Todd, Thanks! All of these are public APIs. If you cannot find what you are looking for here, just Google it.

For my first project, I wanted to have an intermediate challenge. (That is definitely what I got) Weather Apps may not seem difficult, but this one has been a struggle. Our criteria for the class was have 3 or more js event listeners, fetch from an API, and incorporate current best practices.

The very abbreviated steps are outlined below:

Boiler plate (normie jargon: boiler plate = template) HTML, CSS Here is a link to FreeCodeCamp (https://www.freecodecamp.org/news/whats-boilerplate-and-why-do-we-use-it-let-s-check-out-the-coding-style-guide-ac2b6c814ee7/) (Which is an amazing resource btw)
Make nav, body, footer and start building out buttons, forms, and div boxes to interact with using your js later
Git add . , git commit -m "updates css", git push (Just do it often. You do not want to lose your code)
Wireframe / Outline how your app will function (Ours is ^ right before this list)
Build out the js: Fetch - Is your data console logging?

   const fetchWeather = (lat, long) => {
     fetch(
       `https://api.open-meteo.com/v1/forecast? 
latitude=${lat}&longitude=${long}&daily=temperature_2m_max,temperature_2m_min,sunrise,sunset,precipitation_sum,windspeed_10m_max&temperature_unit=fahrenheit&windspeed_unit=mph&precipitation_unit=inch&forecast_days=1&timezone=America%2FDenver`
     )
       .then((r) => r.json())
       .then(displayData);
     // .then(console.log("hello"));
   };

6. Take a break from your struggles with js and make your app look pretty using CSS (Below is code that will help you have overall conformity in your app. Shove this in your style.css)

*{
margin:0;
padding:0;
font-family;
}
/* This is how you comment out a line also below is a good way to build a normal div box that centers the text */
div{
margin: auto;
width: 2vw;
border: 2px solid black;
padding: 10px;
}
/* The div above will center things vertically and horizontally but sometimes it will get messed up due to a parent div so watch out for that! The width has a vw. This means view width, it is a measurement that I like because it uses your screen's size to determine its size. The number before it is 2 which means 2% of the view width! */

7. Back to js: Now that you can fetch data, and your app looks prettier, lets make event listeners!

const variable = document.addEventListener("click", () => {
  const submitClick = document.querySelector("submitBtn");
});
//You need to communicate with the DOM in order to create events in the variable above, we are telling it to listen for clicks to the submitBtn. Next we are going to make it do something after you click it
const variable2 = document.addEventListener("submit", (e) => {
e.preventDefault();
  const submitForm = document.querySelector("submit");
});
//This variable2 will submit a form. It is passing "e" as a parameter. After that we are preventing the default of the browser from occurring. This will prevent the page from reloading and losing the End User's data in the form.

8. Now, we need an event listener that tracks your mouse hovering over a div. The goal is to show extra fun weather detail.

const variable3 = document.addEventListener("onmouseenter", () => {
  const hover = document.querySelector("moreData");
hover.nextThing.otherThing = hover.
});
const variable4 = document.addEventListener("onmouseleave", () => {
  const disappear = document.querySelector("moreData");
});

9. Now that I have 3 events and my data loads, I need to tackle the zip code and convert it to latitude and longitude. The API I am using requires latitude and longitude to find the weather data so I want to be able to allow the End User to simply put in a zip code and get the weather data from that location they put in. If I wanted it to be simple, I would make the user search their own latitude and longitude to input. Some ways to make this work is by using Google geolocation API and fetch from it anytime someone puts it in my form. Then I would have it linked to my getlocation function which in turn triggers the correct data to show up.

10. Lastly, make sure that your app loads and looks pretty.

Below is a picture of the process of the app.

Updates

I have now completed the app according to the rules of my assignment. In order for end users to find the weather they want, I needed to figure out how to convert zip code to latitude and longitude. What I ended up doing was using Google's location API. It is pretty useful. Here is the link Google API Documentation

The code to do this was not too complicated but it felt like many steps. What I started with was an eventlistener for a "submit". When someone put their zipcode or city in the input area, I wanted something to happen. Next, I used search.addEventListener("submit", (e) => { e.preventDefault(); console.log(e.target[0].value);

fetch(
    "https://maps.googleapis.com/maps/api/geocode/json?address=" +
      e.target[0].value +
      "&key=" +
      "INSERT YOUR API KEY HERE"
  )

In the code above, I am using a fetch within my event listener. It grabs any value inputted from the user. In my case in accordance with my code, it is the "e.target[0].value" that allowed me to "pinpoint" the information I needed to fetch from the API.

I followed that with an If Else statement because if someone misspelled an address or the database did not have the information, I wanted them to get an error. This can be seen by the code below.

.then((response) => response.json())
    .then((data) => {
      // debugger;
      if (data.results.length === 0){
        alert("Please Use Different Location")
      } else {
        const latitude = data.results[0].geometry.location.lat;
        const longitude = data.results[0].geometry.location.lng;
        // console.log({ latitude, longitude });
        error.textContent = `Latitude:  
        ${latitude}

        Longitude:  
        ${longitude}`;
}
e.target[0].value = "";
    })
});

At the beginning, my API was not working. The reason for that was because I did not read Google's documentation well enough and also did not look at their DOM elements closely. For example, in the code above, I created a variable of latitude and what it equals is "data.results[0].geometry.location.lat" This was messed up because I was not specifying where in their array the code was. ie.) "results[0]" It was in the zeroth place in the array.

I ran into other issues such as making the app responsive because I did not format the CSS correctly. The best way to do that is make most of your sizing units the same. I will use 'vh' and 'vw'. These stand for view height and view width, respectively. Not only using those, but also using the following code, it will help the app be more responsive. Just make sure that you further customize it.

[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

[Thank you https://www.w3schools.com/ for allowing me to use this for educational purposes]

In our current society, mobile design first and pc design second is a current trend. Many users will open sites on their mobile before even thinking about opening it on a larger computer. In my project, I do not use all of the columns like the example above. I also do not use percentages. I think I as I continue to learn software development, I will update all of the weather app. I may re-create it using React. [TBD]

Final Thoughts

For a first project, I am proud of myself. I am very thankful for my instructor for guiding me through a few of the rough parts. This app looks incredibly choppy right now and functions that way but I will add to it a lot. I am learning now that the documentation needs a lot of work (this article included) but the whole point of this is to have a good starting base to compare to as I grow!

I will go more in-depth on the event listeners and converting the zip code to longitude and latitude as I update the app. Thank you for reading! Hope to see you again. - J

The Beginning Of A Journey

Jai Stellmacher — Sun, 02 Apr 2023 23:47:53 +0000

Good day internet. I have decided to join a full-stack software engineering bootcamp to three-way handshake with my BSBA in Marketing and Management Information Systems. (I realize that the three-way handshake does not actually happen with 3 parties but only a server and client — thought it was funny)

This journey I will be embarking on will be documented here among other places such as my GitHub and Portfolio. I think it is crucial to share your learning voyage because when you get stuck, someone else might as well. Being able to post about it and find solutions or help someone find solutions is something a good collaborative society would do. (Or in this case, a software engineering team.) As I have grown older, I have learned that succeeding with others is the greatest way of relishing in joy. When you are watching a sport with friends and your team scores, you high-five your friends not yourself, right?

I plan to post my thought-process, struggles, hacks, and outcomes here. I hope to help someone else out and maybe we can all defeat the imposter syndrome that any-year old's experience in this field.

Well, come along now, I do not want to get too far ahead of you. Thanks for joining me!