DEV Community: Felix

Flask-Migrate

Felix — Tue, 21 Nov 2023 22:10:00 +0000

Flask-Migrate is an important extension in the Flask ecosystem. The extension was created to handle SQLAlchemy database migrations for Flask applications using Alembic. Using Flask-Migrate makes adding tables/ columns, modifying existing columns, and deleting outdated columns a simple and easy process.

Installation

You can install Flask-Migrate with pip by typing this command into the terminal:

pip install Flask-Migrate

Migration Workflow

When developers make alterations to the database schema, Flask-Migrate automates the generation of migration scripts. These scripts act as a representation of the differences between the current state of the database and the desired changes.

In order for all of the following commands to work, the application script must be set in the FLASK_APP environment variable. The migration workflow typically starts with running the flask db init command. This command will add a migrations folder to your application. The contents of this folder must be created in order to version control along with your other source files.

After running this command, you can then create an initial migration by running flask db migrate -m "Initial migration" (the message is optional but can be helpful for signifying what changes you made to the table). This command generates the migration script. Since Alembic is not always able to detect every change you make to your models (it currently is unable to detect table name changes, column name changes, or anonymously named constraints), it is important to review and edit the migration script as needed.

Finally, you can run the flask db upgrade command, which applies the generated migration script to the database, ensuring that the changes are executed effectively. Each time the database models are altered, repeat the migrate and upgrade commands. The migrate command will create new scripts based on the alterations, and the upgrade command will execute them.

Downgrading

One advantage of using Flask-Migrate is its ability to handle rollback operations. In situations where a migration script needs to be reverted to a previous migration state, the flask db downgrade command can efficiently rolls back the changes. Running this command restores the previous state of the database. You can also specify a revision number at the end of the command to downgrade to a version that is more than one downgrade away from the current database state.

Facilitating Collaboration

Another benefit of using Flask-Migrate is its ability to facilitate collaboration among team members working on the same project. With the unique version numbers for each new migration, along with the ability to write a migration message in order to explicitly explain which changes were made, developers can easily track and manage changes made by different team members. This helps maintain consistency and ensures that everyone can work with the same database schema.

Altogether, Flask-Migrate significantly simplifies the management of database schema migrations in Flask applications. Below is a link to the documentation page for the extension.

flask-migrate.readthedocs.io

The Walrus Operator

Felix — Thu, 09 Nov 2023 20:08:27 +0000

Python is a programming language that stands out for its simplicity and readability. It allows developers to express complex ideas in clear and succinct ways. The introduction of the “walrus operator” ( := ) in Python 3.8 has added to the efficient and readable nature of Python’s syntax.

What is the Walrus Operator

The walrus operator is an assignment expression. This means that it allows you to assign a value to a variable within an expression. The operator got its name due to its resemblance to the eyes and tusks of a walrus on its side.

Typically, when you want to assign a value to a variable you do something like this:

x = 5
print(x)
# 5

In this example, we use the traditional method of assigning a value to a variable by using the ' = ' sign. Then, we use the print statement to display the value of that variable. With the walrus operator, however, we can complete both of these steps at once.

print(x := 5)
# 5

Here, the assignment expression allows you to assign the value of 5 to the variable, and immediately print the value. The walrus operator can also be useful in more complex expressions, like while loops. First, we'll look at an example that doesn't include the operator.

names= []
while True:
    name = input("Type in a name: ")
    if name == "quit":
        break
    names.append(name)

Here, we create an empty list and store it in the variable called 'names'. Then, we ask the user to type in a name and store the user's input into a variable called 'name'. If the user types the word 'quit', then the while loop will be terminated. For any input other than the word 'quit', the input gets stored in the 'names' list. Using the walrus operator, this block of code can be shortened.

names = []
while (name := input("Type in a name: ")) != "quit":
    names.append(name)

In this example, we assign the value of the user input to the variable ‘name’ and simultaneously check to see if 'name' is equal to the word ‘quit’. If it isn’t, then the statement evaluates to True and the name is added to the list. If it is equal to ‘quit’ then the statement evaluates to false and the while loop is terminated.

While the walrus operator makes the block of code above more succinct, it also takes a bit more effort to read it properly and figure out what that line of code is doing. For this reason, there may be occasions where the walrus operator may not be the best method to use in order to make your code more readable.

Altogether, using the walrus operator is a good method for making your code more efficient. While it might not be suitable for all scenarios, the operator is a good way reduce code length and enhance readability.

Python vs JavaScript

Felix — Tue, 07 Nov 2023 18:12:04 +0000

Python and JavaScript are both widely used programming languages, each with its unique features and capabilities. Python is a general-purpose programming language that is widely used in scientific and specialized applications. In addition to this, it is also used for web development. Python is used for back-end development, which is the part of web development that deals with creating the elements that a user doesn’t see. JavaScript, on the other hand, can be used to develop both the front-end and the back-end of an application. The front-end is the part of an application that the user both sees and interacts with. While Python and JavaScript are both incredibly powerful programming languages, they have notable differences in their syntax which shape the way their code is structured and written.

Code Blocks

In Python, indentation is used to define code blocks. Indentation is created by using spaces or tabs. When multiple lines of code are written at the same level of indentation, they are considered to be part of the same code block.

while x < 10:
    print(x)
    x = x + 1

In JavaScript, curly braces are used to define code blocks.

while (x < 10) {
    console.log(x)
    x = x + 1
}

Variable Definitions

To assign a variable in Python, we write a variable name followed by an equal (=) sign and the value that will be assigned to the variable.

Example:

my_variable = "Hi there"

Declaring variables in JavaScript is similar to Python. The main difference, however, is that in JavaScript, the keywords const, let, or var are used to declare the variable (though const and let are usually preferred to var nowadays). When using const to declare a variable, the variable cannot be redeclared or reassigned. The let keyword also does not allow a variable to be redeclared, but it does allow the variable to be reassigned. This is useful when you know the value of a variable will change.

Example:

const name = "Steven"
let counter = 0

Variable Naming Conventions

When creating variable names in Python, it is common practice to use snake case. Snake case is a style in which spaces between words are replaced by an underscore (_).

Example:

my_variable

In JavaScript, it is common practice to use the camel case naming convention. Camel case is the practice of writing phrases without spaces or punctuation and with capitalized words.

Example:

myVariable

While it is not required to use these naming conventions in order for your code to execute properly, these conventions are considered to be good practice and are widely used for their respective languages.

Primitive Data Types

A primitive data type is considered to be either a data type that is built into a programming language, or one that could be identified as a basic structure for building more sophisticated data types. In Python, there are four primitive data types. These data types are:

Integer
Float
Boolean
String

Conversely, JavaScript has seven different primitive data types:

Number
Boolean
String
BigInt
Symbol
Undefined
Null

The `undefined` Value

Python doesn't allow you to declare a variable without assigning it an initial value. JavaScript, on the other hand, does allow this. When a variable is declared without assigning an initial value, the variable is automatically assigned a special value called undefined.

None vs Null

In Python, when a variable doesn't have an assigned value at a particular point in the program, it is given a special value called None. None is not the same as 0, False, or an empty string. It is its own datatype (NoneType).

Example:

x= None

JavaScript's version of None is null. null represents the intentional absence of any object value.

Example:

let x = null

Logical Operators

Python has three logical operators:

JavaScript also has three logical operators that mean the same thing but are represented differently.

&& (and)
|| (or)
! (not)

Value Type Comparison

Python use the == operator to compare if two values and their data types are equal.

1 == 1   #True
1 == "1" #False

Python also has a 'not equal' operator (!=) that returns True if the values are not equal and False if they are equal.

1 != 1    #False
1 != "1"  #True

JavaScript has four equality operators. These are the strict equality operator (===), the strict inequality operator (!==), the loose equality operator (==), and the loose inequality operator (!=). The strict equality operator returns true if two values are equal without performing type conversions, and the strict inequality operator returns true if two values are not equal without performing type conversions.

10 === 10           //true
true === 1          //false
null === undefined  //false

10 !== 10           //false
10 !== "10"         //true 
[] !== ""           //true

While the loose equality operator also returns true if two values are equal, it will additionally return true if it can perform a type conversion (e.g., changing the string '10' into the number 10) that makes the two values equal. The loose inequality operator does the opposite and returns true if two values are not equal, performing type conversions as necessary.

10 == 10            //true
true == 1           //true
null == undefined   //true
"0" == false        //true

10 != 10            //false
10 != "10"          //false
[] != ""            //false

Outputs

To print a value to the console in Python, we use the print() function. The value that we want to print is passed into that function

Example:

print("Hello World")

JavaScript uses the console.log() function to print to the console.

Example:

console.log("Hello World")

While Python and JavaScript function in similar ways, there are many small syntactical differences that determine if code is executed properly. While this blog doesn't discuss every difference between the two languages, the topics covered here are some of the most basic discrepancies that are important to understand when switching between languages. Understanding these syntax differences is crucial for developers transitioning between the two languages and allows for informed, effective coding in both Python and JavaScript.

React Hooks

Felix — Mon, 16 Oct 2023 17:50:54 +0000

React is a free, open-source front-end JavaScript library that was created by Facebook. It was designed to build interactive user interfaces and web applications quickly and efficiently. Due to its quick and effective nature, React allows developers to build applications with significantly less code than would be required with vanilla JavaScript.

When using React, developers generate their applications by creating components. Components are isolated and reusable pieces of code that come in two types: class components and functional components. Before React version 16.8, developers were only able to handle state and other React features using class components. When version 16.8 was created, however, Hooks were introduced.

React Hooks are JavaScript functions that allow you to isolate the reusable parts from a component. In other words, they allow you to “hook into” React state, context, and lifestyle features from function components. Before Hooks were created, developers had to use class components to utilize these features. Now, Hooks allows you to use React without classes. React version 18 has 15 Hooks that developers can utilize. Some of the most commonly used Hooks are useState, useEffect, useContext, and useReducer.

useState

useState is a hook that allows you to add state to a component. State usually refers to data or properties that need to be tracked or updated in an application. useState accepts an initial state as an argument and returns an array with two values: the current state and a function designed to update the state. Whenever the setter function is called, the useState hook returns an updated state value. The setter function updates state by initiating a re-render of the component, which sets state to the updated value that was passed to the function. useState can store any type of value, from primitive data types like strings and numbers to complex data types like objects and functions.

useEffect

The useEffect hook allows you to carry out side effects in your components. A side effect is anything that causes change outside of the scope of the function being executed. Some examples of side effects are making network requests, accessing data from a database, and writing to the file system. useEffect tells React that the component in which it is initialized in needs to do something after render. The hook takes two arguments: a function and an optional dependency array. Without a dependency array, useEffect runs on every render. This means that after the initial render and after each successive re-render of a component, the function passed in as the first argument to useEffect will be called. If an empty array is passed in as the second argument, the useEffect function will only run after the first render. This is useful for when you want to run a side effect on page load and not have it run again. You can also pass props or state values to the dependency array. When this happens, useEffect will run after the initial render and also when the passed props or state values are updated. It will not, however, run when state is changed for a state value that is not passed into the dependency array.

useEffect also returns a cleanup function. While the cleanup function is not required, it can be helpful for side effects that require cleanup to reduce memory leaks. Examples of these types of side effects are timeouts, subscriptions, and event listeners. Generally, the cleanup function will be called by React after the component re-renders as a result of setting state and before the useEffect callback function is called.

useContext

useContext allows you to read and subscribe to context from your component. In order to read and subscribe to context, it has to be created first using createContext. createContext allows you to create a context that components can provide or read. The useContext hook takes in the context that was created with createContext as a parameter, and it returns that context value for the calling component. The context value that will be returned from useContext is determined as the value given by the nearest context provider above the calling component in the tree. If there is no provider that matches this specification, then the returned value will be the default value that was passed to createContext. Since React automatically re-renders components that read context if it changes, the return value is always up to date.

useReducer

useReducer is a hook that is very similar to the useState hook, and it was made to help you manage complex state logic. Like useState, useReducer is used to store and update state. It accepts two arguments: a reducer function as the first argument, and the initial state as the second argument. The hook returns an array that contains the current state value and a dispatch function that lets you update the state to a different value and trigger a re-render.

While similar to useState, there are some things that make useReducer different. useState is better to use when managing simple state transformation, while useReducer is better for managing more complex state logic. Also, useReducer allows you to avoid passing down callback functions through different levels of your component. Instead, it lets you pass the dispatch function, which improves performance for components that trigger deep updates. useReducer is more ideal for larger applications with greater complexity when managing state changes across components.

The introduction of Hooks created a functional way to access features like state, context, and lifecycle methods. They make it easier for developers to manage component logic and state. They also allow developers to create reusable and modular code in a clear and straightforward manner. While only four Hooks were mentioned above, there are many different Hooks that can be utilized to make life easier for a developer.

PUT vs PATCH vs POST

Felix — Fri, 13 Oct 2023 02:54:45 +0000

The HyperText Transfer Protocol (HTTP) is the communications protocol that allows the client to interact with the server. An HTTP request is a request made from a client to a host located on the server in order to receive a resource needed to build the content. Three of the most commonly used HTTP requests are PUT, PATCH, and POST requests. PUT and PATCH requests are both common methods for updating or modifying resources on the server, while POST requests are used to either create a new resource or add a new entity to an existing resource. While they all serve similar purposes, they have distinct differences that are important for web developers to understand.

PUT HTTP Request

The PUT request is a method of modifying resources in which the client sends data that updates the entire resource and replaces it with a new representation. If the resource does not already exist, then the method creates a new resource. In the body of a PUT request, all of the fields of the resource are sent, even if they are not modified.

Characteristics of a PUT request

Replaces the Entire Resource: As already mentioned, when a client sends a PUT request, it sends a complete representation of a resource to the server. If parameters of the resource are missing in the body of the request, several things can happen depending on how the API is implemented. Some examples of possible outcomes are incomplete/ partial updates, validation errors/ error responses, the using of default values, or undefined behavior
Not suitable for partial updates: Due to some of the errors listed above, PUT is not the best method for making partial updates. If you want to change only a single attribute of a resource without affecting the others, PUT is not the method that should be used
URI: A put request creates or replaces a resource at the client defined URI. The client needs to know the exact URI of the resource, and the server must not attempt to apply the request to a different resource
Idempotent: Put is an idempotent method. A request method is considered "idempotent" if the intended effect on the server of multiple identical requests with that method is the same as the effect for a single such request. This is helpful in scenarios where you want to ensure that a request can be safely retried without creating unintended side effects.

PATCH HTTP Request

Unlike the PUT request, the PATCH request is a method that was designed to make partial updates to a resource. When the client sends a PATCH request to the server, it sends along a set of instructions that outline how the resource should be updated. PATCH requests do not require the client to send a representation of the entire resource like a PUT request does. This means that in the body of the PATCH request, only the fields that need to be updated are addressed.

Characteristics of a PATCH Request

Partial Updates: A PATCH request is the method you should use in a scenario where you want to modify certain attributes of a resource while leaving the rest intact. This can be useful when updating a large resource, in which sending the entire representation using PUT could be inefficient.
URI: A PATCH request updates parts of the resource at the client defined URI. The client needs to know the exact URI of the resource, and the server must not attempt to apply the request to a different resource
Flexibility: PATCH allows you to update a resource using any format you want, including XML, JSON, or plain text
Idempotent: A PATCH request is not necessarily idempotent, but it can be. This is different from a PUT request, which is always idempotent

POST HTTP Request

The POST request is a method that is used to submit an entity to a resource by either creating a new resource or adding a new entity to an existing resource. The method sends the content that is passed to the body of the request message to the server, often with the intent of storing that content in the server. This request method is often sent via an HTML form and results in a change on the server.

Characteristics of a POST Request

URI: The POST request creates child resources at a server defined URI. When using POST for resource creation the server can decide the URI (and usually the ID) of the newly created resources
Not idempotent: A POST request is not idempotent, which means that making a POST request more than one time may have additional side effects. For example, sending the same POST request multiple times could result in different outcomes or create multiple instances of the submitted data

Differences

PUT vs POST

While both can be used to create a new resource, POST is utilized to create a resource where the server generates the URI. PUT updates or creates a resource at a specific URI that is decided by the client
PUT is idempotent, while POST is not, making it safer to send the PUT request multiple times

PATCH vs POST

POST creates a new resource while PATCH only modifies an existing one
POST doesn’t require a specific URI while PATCH usually updates a resource at a known URI
PATCH can be idempotent while PUT is not

PUT vs PATCH

PUT replaces the entire resource while PATCH makes partial modifications. PATCH does not require the client to send a representation of the entire resource, but PUT does
PUT is always idempotent. PATCH has the ability to be idempotent, but is not always idempotent

In conclusion, understanding the differences between PUT, PATCH, and POST HTTP requests is important for efficiently handling resources during web development. While these methods share some similarities, each serves distinct purposes in the creation and updating of a resource. Choosing the appropriate method is necessary for providing efficiency in a web application.

DEV Community: Felix

Flask-Migrate

Installation

Migration Workflow

Downgrading

Facilitating Collaboration

The Walrus Operator

What is the Walrus Operator

Python vs JavaScript

Code Blocks

Variable Definitions

Variable Naming Conventions

Primitive Data Types

The undefined Value

None vs Null

Logical Operators

Value Type Comparison

Outputs

React Hooks

PUT vs PATCH vs POST

The `undefined` Value