DEV Community: Steph

An Introduction to Bubble Sort

Steph — Tue, 07 May 2024 04:48:12 +0000

What are Sorting Algorithms

Sorting algorithms are used to rearrange elements in a collection (such as an array or a list) into a particular order. For example, taking an input of [2, 3, 1, 4] and sorting it in ascending order: [1, 2, 3, 4]. In programming there are many different sorting algorithms. We’re going to explore the most basic, Bubble Sort, in this blog post, but here’s a quick overview of other common sorting algorithms, along with links where you can learn more about them:

Selection Sort: Finds the smallest (or largest, depending on the sorting order) element in the unsorted portion of the list and swaps it with the first unsorted element.
Insertion Sort: Builds the sorted portion of the list one element at a time by repeatedly taking the next element from the unsorted portion and inserting it into its correct position in the sorted portion.
Merge Sort: Divides the list into smaller sublists, recursively sorts each sublist, and then merges them back together.
QuickSort: Selects a pivot element from the list and partitions the other elements into two sublists according to whether they are less than or greater than the pivot.

What is Bubble Sort

Bubble Sort is a simple sorting algorithm that starts at the beginning of a list and compares each pair of adjacent elements. If the elements are in the wrong order (i.e., the element on the left is greater than the element on the right if you're sorting in ascending order), the elements are swapped. This process is repeated for each pair of adjacent elements in the list.

Eg. Bubble Sort in Ascending Order:

Code Examples

Let’s dive into how you would set up an iterative Bubble Sort in Python:

The outer loop (for i in range(n)) loops through the array from 0 to n-1. N is the length of the array. The inner loop (for j in range(0, n-i-1)) starts another loop that iterates from 0 to n-i-2. This loop performs the comparison and swaps elements with each pass through the array. Since the array’s index starts at zero, we subtract 1 from n, and n-i-1 ensures that the algorithm doesn't compare already sorted elements in subsequent passes.

if arr[j] > arr[j+1]: checks if the current element (arr[j]) is greater than the next element (arr[j+1]). If it is, it means they are in the wrong order and need to be swapped. arr[j], arr[j+1] = arr[j+1], arr[j] swaps the current element (arr[j]) with the next element (arr[j+1]). This sorts the adjacent elements in the array.

For reference, here’s the same code in JavaScript:

Big O Analysis

Time Complexity: O(N^2)

The time complexity of a Bubble sort algorithm is O(N^2), where N represents the number of elements in the array. In the worst-case scenario, the algorithm would need to perform comparisons and swaps with every other element in the array, so it would need to run through N elements. Since we have a nested loop, we take the time complexity of the outer loop (0(N)) and multiply it by the time complexity of the inner loop (O(N)) to arrive at O(N^2).

Space Complexity: O(1)

Bubble Sort is an in-place sorting algorithm because it doesn't require any extra space proportional to the size of the input array. Its space complexity is O(1) since the space used by the algorithm is constant regardless of the size of the input array.

Advantages & Disadvantages

Some of the advantages of Bubble Sort compared to other sorting algorithms is that it is easy to understand and to set up, and it doesn’t require any additional memory space. Since Bubble Sort algorithms have a relatively high time complexity of O(N^2), one of their disadvantages is that they can be slow for large data sets.

Sources:

Flatiron School Curriculum, Data Structures & Algorithms, Days 1-2: Bubble Sort
GeeksForGeeks, Bubble Sort – Data Structure and Algorithm Tutorials
W3Schools, DSA Bubble Sort
YouTube, Telusko, #70 Python Tutorial for Beginners | Bubble Sort in python | List Sort

Understanding ‘g’ and ‘session’ in Flask

Steph — Tue, 16 Apr 2024 04:11:55 +0000

When you’re building a Flask web application, sometimes you run into situations where you have data that you’d like to store globally during a request or across multiple requests. This is where Flask’s built-in objects 'g' and 'session' can come in handy. In this blog post, we’ll explore what both of these objects are, similarities and differences, as well as when to use each one.

What is 'g'?

In Flask, 'g' is used to temporarily store and share data across your app within the same request context. Here are some of the key characteristics of 'g':

1. Does not persist between requests:
A new instance of 'g' is created each time a client sends a request to a Flask application, so the data stored in 'g' is not persisted between different requests.

2. Accessible across functions:
The data stored in 'g' can be accessed from any function within the same request context, allowing you to share data between different parts of your app within the same request handling process.

3. Automatically cleared at the end of each request:
At the end of each request, Flask automatically clears 'g', removing any data stored within it. This helps to make sure the data in 'g' remains isolated and specific to the current request.

Use cases for 'g'

In certain situations 'g' can be used to dry up your code. It is often used in request decorators like @app.before_request, @app.after_request and @app.teardown_request. For example you could use 'g' to set a flag at the beginning of a request and handle it at the end. It can also be used for resource management like managing database connections.

Here’s an example of how to use 'g' for managing a database connection from Flask’s documentation on 'g':

The get_db() function checks if a database connection already exists in 'g'. If it does not, it establishes a new connection and stores it in g.db, that way any function during the request can reuse the same database connection. The teardown_db() function executes when the application context ends (after the response is constructed and sent). It ensures the cleanup of the database connection and removes the connection from 'g'.

What is a ‘session’?

In contrast to 'g', Flask’s 'session' object is used for storing data across requests. Here are some of the key characteristics of a 'session' object:

1. Persists across requests
The session object is designed to store data that needs to persist across multiple requests from the same user. When is session data typically cleared? If you’re using a session for user authentication and authorization, it’s typically cleared when a user logs out. You can also set expiration periods or timeouts for your sessions.

2. Stored on the server
Session data is stored on the server, however Flask uses client or server-side cookies to store the session identifier. Each time a request is sent to the server the client sends the cookie back to the server, the session ID is verified, and then the session data can be retrieved.

3. Secure
Flask secures the session data by signing it with a secret key, which helps prevent tampering. By managing sessions securely you can protect against vulnerabilities like session hacking.

The metaphor I like to think of when trying to understand the concepts of 'g' and 'session' is a locker at the gym. Your gym session represents the request. Each time you go to the gym you put your belongings in a locker ('g'). The locker you use is specific to your current gym session and allows you to store and access the items (data) that you need during your workout. When you’re done with your workout, you empty your locker in the same way that at the end of each request in Flask the 'g' object is cleared. In contrast, if you were to rent a gym locker for a year, the locker would represent a session. You’re able to continue to go back to your locker over multiple gym sessions (requests) to access the items (data) that you need.

Use cases for ‘session’

‘Session’ is used for data that needs to persist across requests from the same user, such as user authentication and authorization, shopping carts, or user preferences.

When a user successfully logs in, the user's ID and username are stored in the session object (session["user_id"] and session["username"]). By storing the user’s data in the session, we can securely persist the user’s identity across different requests within the same session. The logout method clears the session object by removing the user_id and username keys.

Summary

To summarize, understanding Flask's 'g' and 'session' objects is essential for effective data management in web applications. ‘G’ provides temporary storage for data during a single request and is ideal for scenarios like database connection management. While ‘session’ stores data across requests and is useful for managing user data like authentication and authorization or shopping carts.

Sources

How to Handle Long Lists of Conditional Statements in Python

Steph — Tue, 26 Mar 2024 05:19:14 +0000

If/elif/else statements are great for handling conditional statements in Python, but what if you have a very long list of conditions? Writing out all of the if/elif/else statements can get very tedious and repetitive. Python has two other options for handling conditional statements that can be valuable in this situation: dictionary mapping and match/case statements. We’ll dive into both of them in more detail below.

Dictionary Mapping

Let’s say you have the following if/elif/else statements representing a toddler’s activities based on their emotions:

toddler = "happy"

if toddler == "hungry":
    activity = "Snack time, asap!"
elif toddler == "sleepy":
    activity = "Read 800 Little Blue Truck books."
elif toddler == "happy":
    activity = "Play with anything other than safe, age-appropriate toys."
elif toddler == "snuggly":
    activity = "Give mom snugs."
elif toddler == "curious":
    activity = "Try to break into all locked cupboards."
else:
    activity = "Run circles around tired parents."

print(activity)

In the code above, “if/elif toddler ==” and “activity ==” are repeated over and over, so it’s not particularly DRY. Here’s how the same code would look using dictionary mapping:

toddler = "happy"

toddler_activities = {
    "hungry": "Snack time, asap!",
    "sleepy": "Read 800 Little Blue Truck books.",
    "happy": "Play with anything other than safe, age-appropriate toys.",
    "snuggly": "Give mom snugs.",
    "curious": "Try to break into all locked cupboards."
}

activity = toddler_activities.get(toddler, "Run circles around tired parents.")
print(activity)

In this version, the dictionary’s keys represent the toddler's emotions and the values represent the corresponding activities. We then use the get() method to retrieve the activity based on the toddler's current emotion. If the emotion is not found in the dictionary, the default activity is "Run circles around tired parents."

Match/Case Statements

Another approach to handling long lists of conditionals is to use match/case statements. This approach was introduced in Python 3.10 and is very similar to switch/case statements in JavaScript. Here’s how our code would look using match/case statements:

toddler = "happy"

activity = match toddler:
    case "hungry":
        "Snack time, asap!"
    case "sleepy":
        "Read 800 Little Blue Truck books."
    case "happy":
        "Play with anything other than safe, age-appropriate toys."
    case "snuggly":
        "Give mom snugs."
    case "curious":
        "Try to break into all locked cupboards."
    case _:
        "Run circles around tired parents."

print(activity)

The “match” statement is used to match the value of “toddler” against the various cases, each corresponding to a toddler emotion. If no match is found ( “case_:”), the default activity is "Run circles around tired parents."

When to Use Each Approach

Ultimately the choice between if/elif/else statements, dictionary mapping, and match/case statements depends on the specific requirements and preferences of your project:

While if/elif/else statements are great to use when you have a small list of conditionals, they can quickly become repetitive when the list becomes long.
Using dictionary mapping is a DRYer and more concise approach, however, it’s not necessarily as easy to read as if/elif/else statements because you have to read through key/value pairs.
If you’re using Python 3.10 or higher, match/case statements are a great option to use since they are both DRYER than if/elif/else statements and also more intuitive to read than dictionary mapping.

Sources:

Flatiron Python Curriculum, “Control Flow: Conditional Statements” Lesson
Geeks for Geeks, “Python Match-Case Statement”

Creating Controlled & Uncontrolled Forms in React

Steph — Mon, 04 Mar 2024 06:47:27 +0000

When you’re first learning React, one of the key concepts to understand is the difference between controlled and uncontrolled components. Below we’ll dive into the key differences between the two when you’re creating a form, as well as the benefits of controlled forms so you’ll understand when to use one over the other.

What are Controlled Forms?

Controlled forms are forms whose values are controlled by state. These values include input fields, text areas, and select dropdowns. As a quick reminder, state is used when a component needs to keep track of information that might change over time (eg. form inputs, storing data fetched from an API, toggling visibility of components, etc).

In the example of the controlled form below, the “first”, “last” and “city” inputs are controlled by state. The handleChange function is triggered whenever there’s a change in any of the form inputs. It updates the “formData” state by calling the setFormData function and passing in the new data as an argument – spreading the existing state (making a copy of it) and adding the new key/value pairs.

You’ll notice on the elements that each element has a “name” attribute that corresponds to the key in the “formData” state and a “value” attribute that corresponds to the value in state. This setup enables the inputs to be controlled by state.

Eg. Controlled Form:

import { useState } from "react";

const initialState = {
    first: "",
    last: "",
    city: ""
}

const ControlledForm = () => {

    const [formData, setFormData] = useState(initialState)

    const handleChange = (e) => {
        setFormData({
            ...formData,
            [e.target.name]: e.target.value
        })
    }

    const handleSubmit = (e) => {
        e.preventDefault()
    // Handle form submit
    }

    return (
        <div>
        <form onSubmit={handleSubmit} onChange={handleChange}>
            <input type="text" name="first" value={formData.first} />
            <input type="text" name="last" value={formData.last} />
            <input type="text" name="city" value={formData.city} />
            <button type="submit">Submit</button>
        </form>
        </div>
    )
}

export default ControlledForm;

Note: It's typical to add the onChange to each input element. In the code above, I've taken advantage of event delegation and added it to the form element instead. This setup works in the same way as if you had added the onChange to the input, but makes the code DRYer. However, it's important to note that you will see an error message in your console (which you can ignore), since it's not the typical setup.

What are Uncontrolled Forms?

In contrast, uncontrolled forms do not use state to manage their form data. They use the browser’s DOM directly to handle the form inputs and to retrieve the form data.

To update our example above to an uncontrolled form, we would need to handle the form submission using references to the input fields, using the useRef hook instead of useState. In an uncontrolled form, each input needs a “ref” attribute associated with it. When the form is submitted and the “handleSubmit” function is called, the values of the inputs are retrieved using the “refs”.

Eg. Controlled Form:

import { useRef } from "react";

const UncontrolledForm = () => {

    const firstRef = useRef("")
    const lastRef = useRef("")
    const cityRef = useRef("")

    const handleSubmit = (e) => {
        e.preventDefault()
        // Access form data using refs
        const formData = {
        first: firstRef.current.value,
        last: lastRef.current.value,
        city: cityRef.current.value
        }
        // Handle form submit
        // Reset the form fields
        e.target.reset()
    }

    return (
        <form onSubmit={handleSubmit} onChange={handleChange}>
            <input type="text" name="first" ref={firstRef} />
            <input type="text" name="last" ref={lastRef} />
            <input type="text" name="city" ref={cityRef} />
            <button type="submit">Submit</button>
        </form>
    )
}

export default UncontrolledForm;

Benefits of Using Controlled Forms

In React it’s best practice to use controlled forms instead of uncontrolled forms wherever possible. Here are some of the key benefits of using controlled forms:

1. Easier data sharing with react components

Since the form data is managed through state, other components can easily access this data through props if needed. This creates a “single source of truth” for the form data.

2. Predictable data management and flow using state

Handling data through state is easier and more predictable than relying on a browser’s DOM for state management. Using the DOM to manage state can also lead to unexpected behaviors.
With controlled forms, it can be easier to understand how data flows through your application since all changes to the form data are managed through state and are passed down to child components through props.

3. Increased data consistency through the use of immutable data

In React, state should be treated as immutable, meaning it can’t be modified directly. When changes are made to the form data, we create a new state object with the updated form data.
Since state changes are more predictable and traceable than data directly manipulated in the DOM, it’s easier to ensure data consistency in controlled forms.

4. Easier testing, debugging, data validation, and error handling

Testing, debugging, data validation, and error handling are all easier to implement on controlled forms since all of the form data and state changes are managed within React components.
Uncontrolled forms can sometimes need additional testing to ensure the React components and the DOM-managed state are interacting correctly.

As a final note, there are a few specific situations where you will need to use an uncontrolled form. For example, if you’re integrating with non-React code or third-party libraries that use traditional DOM manipulation or if you have a file upload as an input in your form.

Sources:

The Difference Between HTML DOM Properties: innerHTML, innerText, and textContent

Steph — Thu, 08 Feb 2024 05:12:36 +0000

When you’re starting out learning JavaScript it can be challenging to understand the differences between innerHTML vs innerText vs textContent. While all three are DOM properties that allow you to set or return the content of HTML elements, they each have different use cases. Let’s start by breaking down the major differences between the three in the chart below.

Key Differences

Source: W3 Schools definitions

Example

Let’s go through an example that further illustrates the difference between the three properties.

Here's our starting HTML:

<p> Paragraph demonstrating the <span style="color:purple">difference</span> between       innerHTML, innerText, and textContent.</p>

As well as what it looks like rendered in the browser:

Here's the JavaScript where we're applying innerHTML, innerText, and textContent to our paragraph element:

const paragraphText = document.querySelector("p");

//innerHTML//
function innerHTMLTest() {
    console.log("innerHTML:" + paragraphText.innerHTML);
}
innerHTMLTest();


//innerText//
function innerTextTest() {
    console.log("innerText:" + paragraphText.innerText);
}
innerTextTest();


//textContent//
function textContentTest() {
    console.log("innerContent:" + paragraphText.textContent);

textContentTest();

What appears in the console:

When to Use Each Property

innerHTML

innerHTML is great to use when you’re looking to see or replace the HTML content inside of an element. It can be especially helpful if you’re looking to quickly and easily replace a large amount of HTML or empty an HTML element (eg. empty a div tag using div.innerHTML = “”).

To continue our example from above, you could use innerHTML to completely swap the text in our paragraph with an unordered list:

const paragraphText = document.querySelector(‘p’);

paragraphText.innerHTML = “
<ul> 
    <li>List item one</li> 
    <li>List item two></li> 
    <li>List item three></li>
</ul>”;

innerText

innerText is used when you want to see or replace the text inside an element or node, but you don’t care about additional formatting like spacing. This is the property that I end up using the most often when I’m trying to replace any text within an HTML element since I’m often not running into a lot of additional styling or spacing within the text.

textContent

textContent is used when you want to see or replace the text inside an element or node, including any styling.