DEV Community: TJ Stifter

Refactoring your code: Looking for Patterns

TJ Stifter — Wed, 30 Aug 2023 22:54:46 +0000

Introduction

Writing good clean code is a difficult skill to pick up and no one should feel expected to be great at it starting off. It's is something you acquire through practice of writing a lot of code. Refactoring is the process of restructuring code, while not changing its original functionality. The goal of refactoring is to improve internal code by making many small changes without altering the code's external behavior. It is important to practice refactoring and be diligent in looking for places to improve your code because it both helps you as you write and build your app as well as helps other developers who end up looking at your code. Let's talk a bit about how to go about refactoring your code.

Refactoring code to a new developer can seem incredibly overwhelming at first. It can be a struggle just to find a correct way to get your code to functionally work, and looking for ways to improve its efficiency or readability is just asking for a new developer to break their code. However, it is important to review your code on a regular basis looking for opportunities to refactor. First, cleaning up your code helps both you and others who may have to go over your code at a later date. Second, refactoring your code provides you an opportunity to reduce further complications by compartmentalizing code that can include making reusable pieces. Let's go over a strategy and some examples to help with practicing refactoring.

Looking For Patterns

Identifying patterns in your code is a great place to implement refactoring and can allow you to think about your code in a more compartmental way. We often repeat use of codes snippets throughout our code, and no one is expected to find every single repeat and devise a way to write some compartmentalized code to replace it. However, when blocks of code become larger and are all centered around a specific task that is then repeated somewhere else, the pattern becomes clear and finding a way to refactor that code makes everything much easier in the long run. Below is a simple example using React, without much content, but the concept provides a good example for looking to refactor your code. When writing out Components in React, we write our JSX to provide the structure for the component that is rendered. Depending on the complexity of your component, that return line of JSX can get rather large and complex very quickly. Here is just a simple example where a certain block of tags in JSX is repeated in our components return line.

return(

  <div>
    <div>
      <p></p>
      <p></p>
      <span></span>
    </div>
    <h2></h2>
    <div>
    <p></p>
      <p></p>
      <span></span>
    </div>
  </div>

)

We can refactor this to improve both the readability of what our main components returns, and to create a new component that contains a piece of repetitive code, which we can implement in our main component. With our code factored out this way, we could also use this refactored piece in an entirely different component that may wish to utilize the same structure and content.

return(
  <div>
    <MyCard />
    <h2></h2>
    <MyCard />
  </div>
)

function MyCard () {
  return (
    <div>
    <p></p>
      <p></p>
      <span></span>
    </div>
  )
}

For another exmaple, let's look at another commonly used piece of code wiritten in javascript, a patch request. Depending on the complexity of your app, you may be sending multiple patch requests to your backend from different components, for different pieces of data, and to different places on your backend. You may think because the information, or the route, or the object being changed is different you would need to write out the patch request each time in each place you needed it. By using refactoring and noticing the patterns in the patch requests, we can instead write a single general patch function that can then be called upon multiple times and provided the relevant information as arguments.

//patch request to our database
const update = {'username' : newUsername}
fetch (`/users/${user.id}`, {
    method: "PATCH",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(update),
}).then(r => {
    if (r.ok) {
        r.json().then(user => {
            setUser({...user, 'username' : user.username})
        })
    }
    else {
        r.json().then(data => console.log(data))
    }
})

We can start by identifying the unique pieces of information to each patch. Once we know these item,update,and url, we can assign variables in their place and then to implement the patch, call the function patchItem(item, update, url) passing in those arguments.

const patchItem = (item, update, url) => {
    fetch(url, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(update),
    }).then(r => {
        if (r.ok) {
            r.json().then(data => {
                const keys = Object.keys(data)
                keys.forEach(key => item[key] = data[key])
            })
        }
        else {
            r.json().then(data => console.log(data))
        }
    })
    return item
}

An important thing to note here, is that sometimes when refactoring your code, you may have to solve for different cases. In the example above for a patch request, because I cannot be sure how many attributes were modified; therefore, I need to properly handle the response object by looking through each of the keys and updating each one, rather than only updating the username in the first example. While not meant to be a perfect example, the above shows how to go about thinking of ways to refactor your code to a higher level of abstraction so that it can be used in multiple places.

Conclusion

Refactoring code is an important skill to have, but it is not one that comes easy and takes a lot of practice and experience from both writing your own code as well as reading others code. It can be useful try to identify patterns and blocks of code functionality that are either the same or very similar as places to implement refactoring. Some times it can be easier to look for the unique pieces of code in a code block to understand the key elements that need to be generalized so the code can be used in additional places. Finally, while refactoring can be intimidating to new coders who may feel overwhelmed or anxious about breaking code they got to function correctly, refactoring provides you a great chance to gain a better understanding of what the code does and why.

Flask: An Intro to using Session in server-client communication

TJ Stifter — Tue, 08 Aug 2023 16:08:55 +0000

What is Session?

A session is a means for storing information related to a user, across different requests, as they interact with a web app. In Flask, we import session from Flask, which is a data object, and this session object works similar to a dictionary, except that it can also keep track of modifications.

There are two types of sessions commonly used in web development, client-side and sever-side. Client-side are stored client-side in browser cookies, and server-side sessions are stored server-side; however, a session identifier is typically then created and stored in browser cookies.

Some benefits to using sessions are speed and ability to scale; however, sessions are limited in their size (cookies typically no more than 4kb),and session data is cryptographically-signed upon being stored as cookies, but they are not encrypted. As a result, sessions should not be used to store sensitive information like passwords or personal information.

Session is a great way to keep a user logged into your site through refreshes or over time. Sessions can also be used to keep track of lists or items if you are say shopping and grabbing multiple items from different page loads.

Implementation in your Flask App

Implementing session in your flask application is not very difficult; however, there are a number of ways to add additional functionality and control how your server application utilizes session. For configuration, the first step is to import session from Flask.

from flask import session

Then, you simply need to call on the session object within any functions that needs to access the session data. Typically, this can be done in the same manner that we would access information in a dictionary. One of the most common uses of session for flask applications is to check whether current session data exists.

@app.route('/')
def index():
   if 'username' in session:
      username = session['username']

This can be done to help direct what pages a browser has access to based on whether a current session exists. Another common application of session involves logging in a user or creating a new user.

@app.route('/login', methods = ['GET', 'POST'])
def login():
   if request.method == 'POST':
      session['username'] = request.form['username']

This session is called upon during the POST method and updates or sets a key in the session object to the data received from the POST request. Another important aspect is being able to delete session data, which typically occurs upon a user logging out. This can be done a few different ways, but the important points to remember is that the to remove the values for the session keys that need to be deleted.

sesssion['username'] = None #example A
session.pop('username', None) #example B

Lastly, let's touch on updating the session data. Most of the time, the session object is capable of automatically tracking and accounting for changes to the session. However, modifications to mutable data structures such as lists are not accounted for automatically, and instead must be accounted for by setting the modified attribute of session session.modified = True to True. A common occurence of this would be when storing a bunch of items in a cart say for online shopping.

cart_item = {'pencil': '10', 'eraser': '5', 'marker': '20'}
if 'cart_item' in session:
    session['cart_item']['marker'] = '35'
    session.modified = True

Session and the secret key

An important part of session is that there is some data being provided and stored on the client-side that represents information which we do not want the client to be able to modify. Therefore, a secret key is used to cryptographically-sign the cookies used for storing the session data. We do this to ensure if the client tries to manipulate data within the session ID, we want it to be rejected by the server. In other words, anyone has the permission to view the contents in the cookie but they can’t modify it unless they have the secret key . Therefore, as best practice one wants to create a random somewhat complicated key, and there are a number of options for generating a secure random key. One common way is to use your operating system, which has ways has ways to generate pretty random stuff based on a random cryptographic generator.

$ python -c 'import os; print(os.urandom(16))'
b'\r6CZO\x03\xdd<\x8c\x1f\xf4\xf44\x15\xe5\xd6'

The code implemented merely sets the .secret_key property of app using a method .urandom that will generate a random byte string the size of the argument. This randomly generated key can then be stored in your app, should be set during setup or even as part of the configuration as shown below.

app.secret_key = b'\r6CZO\x03\xdd<\x8c\x1f\xf4\xf44\x15\xe5\xd6' #Ex.A
app.config['SECRET_KEY']= b'\r6CZO\x03\xdd<\x8c\x1f\xf4\xf44\x15\xe5\xd6' #Ex. B

Conclusion

The session object is essentially a dictionary for storing relevant information about a current user from the client-side in order to maintain knowledge about that user over the length of the connection and that includes multiple requests between the client and server. They are important because they allow the application to maintain state across multiple requests, without needing authentication information from the user with each request. This helps to build better applications that are interactive and responsive to user input.

Sql Alchemy : using session.query()

TJ Stifter — Tue, 25 Jul 2023 16:06:12 +0000

Introduction

SqlAlchemy provides developers with a tool that gives the full power and flexibility of SQL. One particularly useful tool is session.query, but first let's quickly refresh on some terminology we use when referencing data in or database. A table refers to the structure in the database(db) pertaining to a particular class and is the means for storing instances of a class and their attributes. A record refers to one row of the table and is also representative of one instance of the class the table is for. Finally, the table's column's represent attributes for the class the table is for, wherein each record has its own column entry pertaining to attributes for that class instance.

In addition, to interact with the database, we create a session object to form a connection between our code and our database. We use sessionmaker to define our Session class Session = sessionmaker(bind=engine), and then create an instance of that Session() by session = Session(). This allows us to then reference session throughout our application to manipulate data in our database.

Using session.query

session.query serves as our template for writing sql statements to communicate with our database. Let's first breakdown a common sqlalchemy query statement that looks like this query=session.query(Band). Here we are storing our query in the query variable, session.query acts as our mechanism for querying our database, and, (Band) defines the class that we want to access. Together they essentially allow sqlalchemy to construct sql statements for us to send to our db. As can be seen in Ex. 1, when we print the query, we get the actual sql statement that we would use to retrieve the data we want. Printing the actual query you construct with session.query can be a quick way to gain some understanding of what is goin on under the hood.

Ex. 1
Next, to access the actual data from our query we use the .all() method on our query. A sidenote, the .all() method returns a list of Band instances since our query(Band) grabs the whole record (e.g. row of each band). We can also write our queries, to grab certain attributes (e.g. columns) from our database. As shown in Ex. 2, we can query(Band.name, Band.website) to only grab the columns for name and website of our Band records.

Ex. 2
This example also shows that when grabbing multiple different pieces in our query, we get a list of tuples where each tuple references a individual record, and each element of the tuple is info we wanted to grab from that record.

Finally, there are some additional methods such as .first(), .one(), and .scalar(). Each of these is applicable in certain cases where we only want a single record or element. There are also many other methods that can be called on a query that will not be touched on here, but more info can be found at www.tutorialspoint.com/sqlalchemy/sqlalchemy_orm_using_query or www.tutorialspoint.com/sqlalchemy/sqlalchemy_orm_returning_list_and_scalars

using filter() to grab certain records

Now that we can use query to grab data from our tables, it would be helpful to have some way to further select portions of our data as needed. This can be done by applying a .filter() method to our query. Then in our .filter() we supply our criteria for how to limit the query. Ex. 3a and 3b provides a common example when we want to find a particular record within our table.
Ex. 3a Ex. 3b
In Ex. 3a, query is being made as part of an instance method within the Musician class, so we use self.id to select our Musician. Ex. 3b simply shows how that would like if the Musician we wanted had an id = 5.

Ex. 4 show another use of filter to grab a subset of records. The query includes both the Band instance, and the is_looking attribute to show that only bands where is_looking == True were grabbed.

Ex. 4 In ex 5, we show how the filter can take multiple criteria to further narrow our query. The query grabs auditions whose is_accepted attribute == False and that have a musician who's id is less than or equal to 10.

Ex. 5

using func.count() and group_by()

Sql also provides a number of sql functions that can be used as part of our query to further enhance how we can interact with data in our database. There are a number of different functions e.g. (max, min, mode, sum, count, etc...), and here we will focus on count in combination with the group_by() method as a way to analyze the data in our db.

In ex. 6, we are returning a list of tuples, that include both the skill level and number of musicians at that skill level in our db.
Ex. 6 Let's go through the code and see what's going on here. First, the query() establishes the two pieces of info we are goin to have in our list. The first is straightforward, the skill_level attribute (column); however, the second is much more complex. func.count refers to the sql function, and it will simply count what it is given, here the id's of musicians. The .label('skill_count') is a descriptive method that allows as to assign a label/variable for the count so that we can then access this data (e.g. maybe sort by the count). Before we talk about the last part of the code, let's see what happens when we query using session.query(Musician.skill_level, func.count(Musician.id).label('skill_count')).

In Ex. 7, we see the result, it only gives us one skill level 2, and one count 101 (this is the total # of musicians in our db).
Ex. 7 This query provides some good context because what happens is it grabs the first musician record's skill_level, which is 2, and then pairs with our count, which counts every individual's musician id. The problem is we don't want to count all the id's at once, and pair it with the first skill_level we pull from the db. This is why .group_by() is included in our query. This method groups all the records we grab based on Musician.skill_level, so that in this example we have five groups (1, 2, 3, 4 ,5). It then works in tandem with our func.count to then count the Musician.id for each musician that resides in our different groups. This provides the ability to analyze the data in our db using the tools of sqlAlchemy.

Using Join in query

Another useful method is .join() because it allows us access data from more than one table, especially when there exists a relationship between these tables. Ex. 8 shows what happens when we try to query two different tables, we get a SAWarning about a cartesian product between our two tables. While not provided in the example, the resulting list essentially returns a cross product between our tables, which means it creates an entry for each pair of (Band, Audition). In other words, if we have 40 Bands, and 55 Auditions, our resulting list will have 2200 entries, Yikes!!.
Ex. 8 This is why the warning also tells us to apply join conditions. The combination of tables needs to be given instructions on how to associate the records from each table with one another. If there is a foreign key between the tables, than join will be able recognize this relationship. As can be see in Ex. 9, we can return a list of (Band,Audition) pairs where the band.id == Audition.band_id. Because we query both Band and Audition, we get back 55 entries, each representing a different Audition and the Band for that Audition.
Ex. 9 Ex. 10, provides a different list where we grab the only the Bands that have and audition associated with them. In both these cases, the .join() method acts similarly to using .filter(Band.id == Audition.band_id), as can be seen by comparing Ex. 11 to Ex. 10, but allows us to do so without having to right out the explicit association because our models were designed having a relationship.
Ex. 10 Ex. 11 However, if there are more than one or no foreign keys, using an explicit from as shown below is a better choice. From tutorialspoint.com/sqlalchemy/sqlalchemy_orm_working_with_joins

Conclusion

sqlAlchemy provides developers with a set of tools to inquire, manipulate, and even analyze the data in our database. session.query provides a quicker means for execution of sql statements, that allows to develop more complex sql statements in a readable manner. It can be especially beneficial when chaining multiple query methods together along with sql functions in order to provide results of analysis about the data in the database.

Different Conditional Rendering techniques and approaches.

TJ Stifter — Wed, 05 Jul 2023 18:13:17 +0000

Introduction

In React, we create components to render the behavior we want. Further, like Javascript we can implement conditions to provide logic and control how and when we want to render our components. These conditionals work the same way as in Javascript, and the power behind React, using state, updating, and re-rendering the UI allows us to improve our applications feel and interactivity.

Inline JSX or not

The first thing to be aware of is that the code you write for conditional rendering can written either within the function itself, or can be written inline as part of the JSX return statement. Using the traditional if...else syntax requires writing the code in the component function itself and not the JSX. This can be performed both by setting different JSX return for the conditional, or by defining a variable conditionally with the desired html element and then providing that variable to the JSX return. There are also a number of different inline operations which use conditionals within the JSX return line.

conditional statement with && operator

Conditional Rendering is setup primarily using if statements; however, there are a number of ways to implement this functionality depending on how you want to control the rendering. One simple implementation is using if with the logical && operation.

This conditional setup uses javascript logic where true && expression evaluates to the expression and false && expression evaluates to false. Therefore, we can easily render an element only when a certain condition is met (e.g. evaluates to true.

if...else with Ternary

Another common approach to conditional rendering utilizes if...else logic and commonly includes using the Ternary operator condition ? true : false. The benefit of using the ternary operator is that can be done inline and provided as part of the return in our component. This makes for quick implementation and readable code.

The ternary operator approach is most useful in instances where you want to render one thing or another based on some conditional evaluation. Additionally, the more traditional if...else statement could be used; however, this logic cannot be used inline in the return of a component, and therefore requires one to conditionally set html elements to variables within the if and else clauses to achieve the same result.

using Null to hide component

There is another approach to conditional rendering that involves telling the component itself to rendering nothing or hide itself based on a certain condition. This can be done by through the use of props by writing a conditional statement in the component function to evaluate if a value of the prop meets a condition and then tell the component not to render.

Although not used often, this approach can be useful for when you want to hide a component or stop its rendering after its parent has rendered it.

Conclusion

Conditional Rendering is a powerful tool in React for creating engaging applications, and is therefore used in nearly all applications. Being capable of using a plethora of different conditional logic statements to perform conditional rendering helps us code in better and more readable ways that our tailored to each specific instance.

Building an algorithm to generate random # Array (practice with recursion)

TJ Stifter — Tue, 27 Jun 2023 18:06:38 +0000

Intro

I recently decided to test a proof of concept that included designing a board of n X n squares (example 10X10), where each row as well as each column is assigned a number from 0 to n, and also restricted to only using each number once for each row and column. My goal was to design a function creating an array of n elements, and built so that each element was assigned a unique number randomly. This required me to solve the specific problem of how to randomly assign a unique number for an array of n length from (0 to n). The solution requires a few things to be true:

every number from 0 to n must be generated.
no two numbers can be the same.
the numbers should be randomly assigned within the array.

RNG with comparison function for unique Assignment

My first solution was to assign each element in the array sequentially with a random number. This required the function to make sure that every number was randomly generated and only appeared once in the output array. The code includes randomly generating a number from 0 to n and pushing it to the output array for n elements. The solution included a comparison function to be called each time a new random number was going to be assigned to the output array. This comparison function would then check the new random number against all current numbers in the output array and regenerate the random number if the comparison was true. This process does use a bit of recursion; however, this was more for flavor since a simple for loop could have worked just as well.

A second solution would be to do something similar to the above but to instead have each unique number accounted for and then to randomly place them within the array. I believe the code would follow similar logic where you are assigning numbers in turn from 0 to n to different index positions randomly and comparing to never assign the same index twice.

Recursive Approach using unique Pools:

A third solution I explored used recursion as the primary tool. In this function, I defined two pools of numbers (0 to n), with one for index and one for value, picked one value randomly from each pool, which would assign a random number to a random index for the output array. Then, in order to fill out the remaining indexes with the remaining numbers, I used recursion to call my function within itself, but modifying the arguments passed in order to reduce the pools number of values by one for each recursive call. The function is includes initializing three arrays based on the desired lengths including an index array having n elements from 0 to n, an element array having n elements from 0 to n, and an output array having n elements that are empty. The first two arrays serve as the pools, from which we randomly draw a number that tells us which value to put in which index of the output array. After, which the elements selected randomly from the pools are then removed as options, and the function is then called recursively passing in the current output array, and the reduced pool arrays. This sequence of operations is performed until the output array has been fully filled and permits the unique assignment of each number 0 to n to a unique index of 0 to n.

The results of these two approaches showed how vary different solutions can be used to solve the same problem. Furthermore, I decided to log the execution time of each approach, and I found the differences to be quite interesting. I may possibly look into why the results turned out as such in another post.