DEV Community: Sarah Jones

Cookies 🍪

Sarah Jones — Mon, 19 Jun 2023 18:56:37 +0000

Since 2020, Google has been talking about a plan for Chrome to block third-party cookies that can track user activity across many different websites. While Google’s plans for cookie disabling and deprecation have been pushed back a few times, marketers have been forced to think about what their marketing strategy would look like in a cookieless world.

While the deprecation of third-party cookies would impact marketers, it would not primarily impact website developers. This is because website developers that use cookies to store login credentials, use first-party cookies to do so.

First-Party vs. Third-Party Cookies

First-Party Cookies:
First-party cookies are created and used on a single domain. Their most common uses include remembering a user’s language settings, items added to cart, and personal user data like email addresses and passwords. If first-party cookies were blocked, a user would have to sign-in every time they visited a website. They also wouldn’t be able to purchase multiple items while shopping online, because the cart would reset after every item that was added. First-party cookies are typically trusted by users (more so than third-party cookies), because they seek to improve the user experience of a website.

Third-Party Cookies:
Third-party cookies are created on one domain and shared across all third-party domains that use the same tracking code. They are typically used for online-advertising purposes and placed on a website through a script or a tag. When a user receives ads or emails highlighting a product or products that they viewed online but never bought, this means that they have interacted with third-party cookies. Compared to first-party cookies, users sometimes don’t enjoy these interactions with third-party cookies. They may not find that they improve their online shopping experience, and sometimes feel like it’s an invasion of privacy.

First-Party Cookies and Login Credentials Using Flask
As was mentioned previously, first-party cookies can be used for website login authentication. When utilizing Flask as a part of a website’s backend, developers can encrypt and sign a special cookie known as a session using the session module (instead of sending cookies in plain text). The session module is imported from flask, and behaves like a dictionary: session['user_id'] = user.id

By default, Flask manages all session data in a single cookie. It serializes all the key / value pairs that are set with session, converting them from a Python object into a big string. Whenever a key is set with the session module, Python updates the value of its session cookie to this string.

When cookies are set this way, Flask signs them to prevent users from tampering with them. Flask servers have a key, configured in their app (app.secret_key='Example_Key'). When given the same message and same secret key, Flask will produce the same output.

Conclusion
Ultimately, the deprecation of third-party cookies will impact marketers more than it will website developers. However, it is important for developers to understand third-party cookies' uses, because they may be responsible for adding or removing those scripts / tags from a website.

Resources
"Authenticating Users." Canvas - Flatiron School, Accessed 19 June 2023.
"Cookies and Sessions." Canvas - Flatiron School, Accessed 19 June 2023.
Lane, Patrick. "First-Party Cookies vs. Third-Party Cookies (Biggest Differences)." Terakeet, 4 Feb. 2022,
terakeet.com/blog/first-party-cookies-vs-third-party-cookies/. Accessed 19 June 2023.
Lawler, Richard. "Google's turning off third-party cookies for 1 percent of Chrome users early next
year." The Verge, 18 May 2023, www.theverge.com/2023/5/18/23728263/google-chrome-
ad-tracking-third-party-cookies-privacy-sandbox. Accessed 19 June 2023.
"What's the Difference Between First and Third-Party Cookies?" CookiePro, 5 Aug. 2022,
www.cookiepro.com/knowledge/whats-the-difference-between-first-and-third-party-cookies/.
Accessed 19 June 2023.

Database Constraints vs. Model Validations

Sarah Jones — Wed, 31 May 2023 18:47:41 +0000

When constructing a full-stack application, it’s incredibly important to validate data before it gets entered into your database. Invalid data in a database has the potential to cause a slew of problems when that data needs to be used and/or accessed.

In order to prevent invalid data from being entered into a database, Flask-SQLAlchemy offers constraints and validations as ways in which to validate data in applications / deal with invalid data.

Constraints
SQLAlchemy constraints allow for inputs to be controlled at a database level. To do so, they exist within models.

Constraints that can be added directly to the column as it’s defined:

Unique (unique=True): This constraint can be added when database values need to be unique: name = db.Column(db.String, primary_key=True, unique=True)
Nullable (nullable=False): This constraint can be added when an input value is mandatory: name = db.Column(db.String, primary_key=True, nullable=False)

In the example below, pet instances must include a name, and that name must be unique (i.e. does not already exist in the database’s “name” column).

class Pet(db.Model):
    __tablename__ = pets
    name = db.Column(db.String, primary_key=True, nullable=False, unique=True)
    age = db.Column(db.Integer)
    animal_type = db.Column(db.String)  
    owner_email = db.Column(db.String)

Constraints that can be created for columns and/or tables:

CheckConstraints: Can use any valid SQL and numeric comparisons to validate input.

In the example below, pet instances include an age, and that age must be greater than 2.

class Pet(db.Model):
    __tablename__ = pets
    name = db.Column(db.String, primary_key=True)
    age = db.Column(db.Integer, db.CheckConstraint('age > 2'))
    animal_type = db.Column(db.String) 
    owner_email = db.Column(db.String)

Validations
SQLAlchemy also offers validations: special method calls that go at the top of class definitions and prevent new instances of that class from being saved to the database if their data isn’t what is expected. While both constraints and validations seek to prevent invalid data from entering a database, constraints control input at a database level whereas validations control input at a Python ORM level.

In the example below, pet instances include an owner email, and that email address must contain a “@”, indicating that it is a valid email address.

class Pet(db.Model):
    __tablename__ = pets
    name = db.Column(db.String, primary_key=True)
    age = db.Column(db.Integer)
    animal_type = db.Column(db.String)
    owner_email = db.Column(db.String) 

@validates('owner_email')
   def validate_owner_email(self, key, owner_email):
       if '@' not in owner_email:
            raise ValueError("Failed email validation")
       return owner_email

Comparing Database Constraints and Model Validations
Constraints and validations have the same goal: To make sure data entering the database is valid. While they have a shared goal, it is important to understand how their functionality differs. Database constraints will always be checked when adding or updating data in the database. On the other hand, SQLAlchemy validations will only be checked when adding or updating data through the SQLAlchemy ORM. If data is added or changed some other way (i.e. SQL code via the command line), these modifications will not pass through model validations.

Conclusion
While constraints and validations seek to achieve the same goal, constraints come with an added level of security. To ensure invalid data doesn’t slip through the cracks, some folks write database constraints so that they mirror the model validations they’ve written. TLDR: If there is any chance that data can be added or updated via a method other than through the SQLAlchemy ORM, using database constraints is your best bet.

Resources
"SQLAlchemy Constraints." Canvas - Flatiron School, Accessed 31 May 2023.
"Flask-SQLAlchemy Validations." Canvas - Flatiron School, Accessed 31 May 2023.
coderSloth. (2020, December 22). Database Constraints, But Why? https://codersloth.medium.com/database-constraints-but-why-c283761ec7c6
Long, N. (2017, February). Guaranteed Consistency: The Case for Database Constraints. Big Nerd Ranch. https://bignerdranch.com/blog/guaranteed-consistency-the-case-for-database-constraints/
Defining Constraints and Indexes. (n.d.). SQLAlchemy. Retrieved May 31, 2023, from https://docs.sqlalchemy.org/en/20/core/constraints.html

Creating Lists in Python: List Comprehension vs. For Loop

Sarah Jones — Thu, 11 May 2023 17:45:21 +0000

Considered to be the most common data structure in Python, lists are used to store multiple items within a single variable.

color_list = ["yellow", "green", "red"]

Because there are other ways to store data in Python, it’s important to understand what makes a list a list:

A list…

Can store all types of data
Is indexed: Each item in a list has a set location. The first item has index [0], the second item has index [1], etc.
Is mutable: Elements within a list can be modified, individual elements can be replaced, and the order of elements can be changed even after the list has been created
Contains items that can be repeated: Because lists are indexed, they can have items with the same value.

One way to create a list in Python, is by using a for loop.

Create A List Using A For Loop:

Create an empty list: name_tag_list = []
Loop over the parameters: for name in names:
Append each element to the end of the list: name_tag_list.append(f"Hello, my name is {name}.")
Return the list, which is no longer empty: return name_tag_list

def nametag_creator(names):
   name_tag_list = []
   for name in names:
       name_tag_list.append(f"Hello, my name is {name}.")
   return name_tag_list

While using a for loop to create a list works (and is usually the first list creation method you will learn), Python allows us to instantiate a list object and perform a for loop to populate its values in a single line. This can be done using list comprehension.

Create A List Using List Comprehension:

Create new list and assign its values in one line

List Comprehension Syntax:
new_list = [optional_operation(item) for item in old_list if optional_condition == True]

optional_operation(item): f"Hello, my name is {name}."
item: name
old_list: names

def name_tag_creator(names):
   return [f"Hello, my name is {name}." for name in names]

When comparing the two name_tag_creator functions side by side, you will see that there are a lot of similarities. In this example, utilizing list comprehension (rather than a for loop) allowed us to create a new list, iterate, and fill the new list, all at once.

At this point you might be thinking, “Wow, using list comprehension allowed us to really cut down on the number of code lines written. Why would we ever not want to use list comprehension?”

Well, it’s always essential that we consider readability. James Timmins says it best in his article “When to Use a List Comprehension in Python”:

“While the single-line nested list comprehension might seem more Pythonic, what’s most important is to write code that your team can easily understand and modify. When you choose your approach, you’ll have to make a judgment call based on whether you think the comprehension helps or hurts readability.”

Another instance where it makes sense to not utilize list comprehension, is when working with big datasets. List comprehension loads the entire output list into memory, meaning big datasets have the potential to use a lot of memory. To ensure that we don’t bog down servers, we could utilize generator expressions rather than list comprehensions.

Conclusion: In Python, for loops and list comprehensions are both great ways to create a list. When you first start working in Python, I recommend you begin with a for loop. Once you have mastered how a for loop can be used to create a list, you can then transpose that into a list comprehension. Happy coding!

Resources:
"Intro to Data Structures." Canvas - Flatiron School, Accessed 10 May 2023.
"List Comprehensions and Generator Expressions." Canvas - Flatiron School, Accessed 10 May 2023.
"Python Lists." W3Schools, www.w3schools.com/python/python_lists.asp. Accessed 11 May 2023.
Great Learning Team, and Karuna Kumari. "Understanding Mutable and Immutable in Python." Great Learning, www.mygreatlearning.com/blog/understanding-mutable-and-immutable-in-python/#:~:text=3.,the%20list%20has%20been%20created. Accessed 10 May 2023.
Timmins, James. "When to Use a List Comprehension in Python." Real Python, 6 Nov. 2019, realpython.com/list-comprehension-python/. Accessed 11 May 2023.

Controlled vs. Uncontrolled Components : Working With Forms

Sarah Jones — Thu, 27 Apr 2023 18:30:24 +0000

Just like in HTML, React uses forms as a way for users to interact with a web page. In React, components (like a form component) can be controlled or uncontrolled.

When a React form's elements (input, textarea, select) derive their value from state, the form is controlled. When a React form's elements derive their value from the DOM, the form is uncontrolled. While the latter is typically how form data is handled when using HTML, the former is typically how form data is handled when using React.

Below is an example of a controlled form. You will see that the value of each input field is set to a state variable:

Input 1: value={title}
Input 2: value={author}
Input 3: value={article}

Each input field then also utilizes an onChange event handler:

onChange={(e) => setTitle(e.target.value)}
onChange={(e) => setAuthor(e.target.value)}
onChange={(e) => setArticle(e.target.value)}

These functions update the state value to reflect what is entered into each input field.

import React, {useState} from "react";


function NewPostForm() {


 const [title, setTitle] = useState("")
 const [author, setAuthor] = useState("")
 const [article, setArticle] = useState("")


 return (
   <div className="form">
     <form>
       <input
         type="text"
         placeholder="Title"
         value={title}
         onChange={(e) => setTitle(e.target.value)}
       ></input>
       <input
         type="text"
         placeholder="Author"
         value={author}
         onChange={(e) => setAuthor(e.target.value)}
       ></input>
       <textarea
         rows="10"
         cols="60"
         placeholder="Write your post"
         value={article}
         onChange={(e) => setArticle(e.target.value)}
       ></textarea>
       <input
         className="submit-button"
         style={{ paddingBottom: "25px" }}
         type="submit"
       ></input>
     </form>
   </div>
 );
}


export default NewPostForm;

When To Use Controlled Components:
At this point you might be thinking, “Sarah, I understand the difference between controlled and uncontrolled components, but so what?” Well, there are a couple of key advantages to using a controlled form in React:

Sharing Form Values: Because controlled form values are stored in state, values can be shared easily amongst components. One can either pass down values (parent component to child component) using props or pass up values (child component to parent component) using a callback function. This means that state does not need to be housed in the same component as the form.
Element Validation: Because controlled form values are stored in state, one can set up validation functionality that a form element value must pass prior to updating the state value. This ensures that state only gets updated when values entered into form elements meet the criteria set.

In most instances, formal React documentation recommends using controlled components to implement forms.

When To Use Uncontrolled Components:
While controlled components help to ensure maximum flexibility, it may sometimes feel tedious to set them up. Especially when forms get long (and include many elements), you may question if writing an event handler and state for each element is essential. According to formal React documentation, there are a couple of situations where it may be favorable to utilize uncontrolled components:

When you are converting a pre-existing codebase to React
When you are integrating a React application with a non-React library

Conclusion:
In most cases, one should set up a React form to be controlled. While controlled forms require that state and an event handler be set up for each form element, the controlled aspect allows for form values to be used across other components with ease.

Resources:
"Uncontrolled Components." Legacy React, legacy.reactjs.org/docs/uncontrolled-components.html.
Accessed 26 Apr. 2023.
"Forms." Legacy React, https://legacy.reactjs.org/docs/forms.html. Accessed 26 Apr. 2023.
"Sharing State Between Components." React,
react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components. Accessed 26 Apr. 2023.
"Controlled Components." Canvas - Flatiron School, Accessed 26 Apr. 2023.

Loop Types & Working With Arrays

Sarah Jones — Wed, 05 Apr 2023 19:08:51 +0000

When working in JavaScript, it is inevitable that you will encounter arrays (a type of data structure). Arrays are made up of multiple elements, and often we want to perform the same action on every element in an array. While we could write out this repeated action for every element in an array, this would be incredibly tedious for arrays with lots of elements. It would also go against the software development principe of DRY (“Don't Repeat Yourself”) code.

Good thing there is a better, more scalable way! That’s where loops come into play. With a loop, the repeated action only needs to be written once and it will execute on every item in the collection.

There are a few different loop options (depending on the situation). Below are the three main loop types:

for loop
forEach loop
for ... of loop

for loop
The for loop is the most basic of the three loop types, and takes 3 expressions:

Initialization: Typically used to initialize a counter variable.
Condition: An expression evaluated before each pass through the loop. Whether the expression evaluates true or false determines what happens next: the statements in the loop body execute, or the loop exits.
Iteration: An expression executed at the end of each iteration. This often involves incrementing or decrementing a counter.

The for loop should be used when the number of times the loop should run is known.

const menuItems = ["hamburger", "pizza", "salad", "sandwich"]

for (let i = 0; i < menuItems.length; i++) {
  console.log(`I ordered a ${menuItems[i]}`)
}

//RETURN
// I ordered a hamburger
// I ordered a pizza
// I ordered a salad
// I ordered a sandwich

In the example above, we set the variable “i” equal to zero. We declare the variable “i” using “let” (as opposed to “const”) because we need to increase the value of “i.” The value of “i” is increased by 1 each time the loop runs. When the value of “i” is less than the length of the menuItems array (4), the code in the code body runs.

forEach loop
In contrast with the for loop, the forEach and for ... of loops were designed to iterate (rather than loop) over elements within an array. While looping executes a set of statements until a condition is met, iteration executes code once for each item in a collection (often elements in an array).

const menuItems = ["hamburger", "pizza", "salad", "sandwich"]

menuItems.forEach(item => console.log(`I ordered a ${item}`));

//RETURN
// I ordered a hamburger
// I ordered a pizza
// I ordered a salad
// I ordered a sandwich

You will see in the example above that there is no initialization of a counter, no condition, no incrementing the counter, and no bracket notation to access elements inside the menuItems array. So while for loops can be used to iterate over each element in an array, using a forEach (or for … of) loop results in cleaner, readable code.

for ... of loop
The forEach and for ... of loops are similar to one another, as they both work to iterate over elements in an array.

One important distinction relates to control flow; the order in which a computer executes statements in a script. The for ... of loop supports normal control flow statements (like break and continue), while the forEach loop does not.

Break: "jumps out" of a loop
Continue: "jumps over" one iteration in the loop

const menuItems = ["hamburger", "pizza", "salad", "sandwich"]

for (const item of menuItems) {
  console.log(`I ordered a ${item}`);
}

//Return:
// I ordered a hamburger
// I ordered a pizza
// I ordered a salad
// I ordered a sandwich

Conclusion:
When you first start working with JavaScript, it may initially seem like there are so many different options when it comes to looping and iterating. However, with a little practice, you too will grasp when one method should be used vs. another.

References:
"Loops and iteration." MDN Web Docs, developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration. Accessed 4 Apr. 2023.
Salvadó, Christian C. Comment on "Loop through an array in JavaScript." Stack Overflow, 10 June 2010, stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript. Accessed 4 Apr. 2023.
"JavaScript Break and Continue." W3Schools, www.w3schools.com/js/js_break.asp. Accessed 4 Apr. 2023.
"Looping Lab." Canvas - Flatiron School, Accessed 4 Apr. 2023.
"Object Iteration." Canvas - Flatiron School, Accessed 4 Apr. 2023.