DEV Community: Louiza Mak

I watched "So You Think You Know Git" so you don't have to

Louiza Mak — Wed, 09 Oct 2024 02:13:34 +0000

Throughout my coding career so far, I've really only used a few git commands. My most frequent, can be found in the code block below.

git init
git pull
git clone
git add
git commit
git push
git log

And on occasion, I'll pull out a git rebase if I have to do something fancy or to fix a nerve-wracking mistake. So, I've made it my mission to get much more familiar with git and how git branches work when it comes to larger repos this month. It's also my first Hacktober so this is really more for me than it is for you. But if you're here and you're interested in what I have to say, than more power to you. I invite your curiosity and hope you can learn something new or brush up on an old fact lost over the years.

I recently watched Scott Chacon's FOSDEM 2024 talk, "So You Think You Know Git". He's one of the co-founders of GitHub, co-author of "Pro Git", and co-creator of Git Butler. The video was from 8 months ago, but in case it slipped your radar like it did mine, here are some personal highlights. I definitely encourage anyone reading to watch the full video, but if you're short on time, I've got you covered.

Conditional Configs

A fantastic feature of GitHub that allows you to work on personal or company projects with easy and flexibility. includeIf will allow you to assign what .gitconfig file is used for specific directories, letting you manage multiple git identities.

Scott Chacon - FOSDEM 2024

Oldies But Goodies

Scott covers a few notable time-saving git commands that have been around for quite some time.

git maintenance

This command adds a cron job for git to run every hour and perform maintenance tasks on your repository. Since this is running in the background, it speeds up other git commands since they do not have to tack the processes onto other git commands and run as an afterthought. This helps to optimize git repository data.

--force-with-lease

git push --force-with-lease is recommended over git push --force as it is much safer. The command will check if someone has already pushed changes to the branch you're working on and will only allow your push if the branch has not diverged. If the branch has already changed, the push will be rejected which ensures that you will not accidentally overwrite someone else's work. This adds a layer of safety when you're working in collaborative environments.

Big Repo Changes

After Microsoft bought GitHub, many implementations were made to benefit monorepos or large repositories. The goal was to make working in with these large repositories faster and more streamlined.

prefetching

Similar to git maintenance, every hour the system will fetch references from the server for the project you're working on. It will not update references until the command git fetch is ran, but it makes this process faster because the data was already prefetched.)

partial cloning

Allows users to filter out blobs, an object type used to store contents of each file in a repo, and only fetch what you need. This makes the repo act almost like a file system, increasing the speed. One con of this feature is that it does not work with git blame.

commit-graph write

This command caches an index of all the commit objects so that it can do commit graph operations very fast. It is essentially a pre-computed graph that represents a commit history in a more efficient way because the larger a repo, the slower commit graph walks will be. This is because git needs to traverse through each commit to be able to answer any questions such as git log or git blame.

GitButler

The last section of Scott's talk was about his current project, GitButler, a git client that allows you to work on simultaneous branches. It utilizes a drag and drop feature that quickly organizes file changes to separate virtual branches. There also seems to be intuitive branch management features and could make working on multiple PR requests that much easier.

I have not personally used it, but I think it's right up my alley and can ensure that I don't make any extra commits to ongoing PR's for my Hacktober. I'll have to give it a try!

Scott Chacon - FOSDEM 2024

Conclusion

Scott covers a few more topics in his video and goes further in depth with these commands, old and new. He also provides some stellar visual examples throughout the PowerPoint presentation. I found his talk entertaining and his "shotgun" style kept topics to the point. It also made me realize there is so much more to learn about Git than I had anticipated. Scott mentioned how there are about 145 git commands, 82 of which is relevant currently. And that is much more than I use in my Git toolbelt.

I'll have follow-up git-based blogs in the near future as I continue researching and learning more!

A deep dive into my project, CORS, and Authorization

Louiza Mak — Fri, 20 Sep 2024 19:46:15 +0000

Just this week, I finally deployed (for the first time) my most recent project. I call it LifeSense, the humble beginnings of an app that helps you monitor and analyze data from your CGM (Continuous Glucose Monitoring) system. It utilizes OPENAI API to interpret provided data sets and returns a summary of the results and any suggested medical action that should be taken. Of course, this does not substitute a checkup given by a medical professional, but it does offer free and continuous insight as well as trend analysis from people's homes.

Although parts of the project did provide a challenge, such as working with MUI more deeply to achieve a smooth and dynamic line graph, the biggest challenge I faced was setting up a working sessionStorage. It would allow users to stay logged in even when the page is refreshed. This integral part of my post-deployment took longer than any hurdle so far.

CORS

My initial issue was first understanding CORS (Cross-Origin Resource Sharing). I've had console errors in previous projects that were easily fixed, but I never had to communicate between my own backend and frontend before. Because of this project, I feel that I'm a step closer to truly understanding the intricacies of CORS.

I first started with the basics. What is CORS? Why was it made? Why is it the bane of everyone's existence? Where it all began was the 'same-origin policy' introduced in 1996. Understandably, it's a security function to prevent scripts in other domains from accessing sensitive data. However, in cases like mine, where we need to access an API, CORS steps in. Introduced in 2006, CORS is an extension or workaround to the single-origin policy.

CORS is a mechanism that allows resource sharing to other domains while blocking any requests made from rogue JavaScript AJAX requests. I learned that it's triggered whenever you are making HTTP requests to anything other than your exact domain. That includes a different domain, sub-domain, protocol (HTTP/HTTPS), and port. This is the exact scenario I encountered when I decided to host my server on an EC2 container and my client on a S3 bucket. My two solutions were to either allow all origins access or to whitelist a specific domain only.

For security and traffic reasons, it was better for my project to only allow my own client access right now but that may change in the future as I continue to develop LifeSense. But since my console was free from errors and the frontend and backend were talking to each other as they should, I moved on to my next hurdle - authentication.

Authentication

A component I implemented for the first time in this project was a login feature that depended on sessionStorage to persist the user session while browsing the app. The sign-up and login functions were simple to accomplish using Formik and Yup for form validation and error handling. Keeping the user logged through a refresh also worked in the development stage. But when I deployed the app, that aspect broke and had to be completely reworked. Here's my train of thought:

1. What issue am I experiencing?

While browsing the components through the nav bar, my user remains logged in and can access pages that pull data based on the user's ID. Logout and login worked as intended. The issue arose when I was already logged in and then refreshed the browser. The user gets redirected to the home page and tabs that are visible logged in are removed. However, I already had a check_session Resource in my Flask backend server that checked client-side sessions on refresh. It's supposed to grab the user_id from the request so there must be a disconnect somewhere.

2. Is the `user_id` getting passed in the request?

I double-checked and found that the user_id was NOT getting passed in the request. Instead, the server received a NoneType, which is why the check_session failed. This also made sense because now that the front and backend were deployed and no longer hosted on the same machine, I needed to manually store the user_id where it could be accessed.
I decided to use sessionStorage and assigned it within the promise.then() after my frontend POST request.

3. How do I pass my sessionStorage data as part of my request?

This is when I learned more about headers in a request. Previously, I had only used 'Content-Type': 'application/json' which indicates that the format of the request body is in JSON. This time, I focused on the Authentication header which gives the user permission to access a particular resource. As a security measure, users typically aren't permitted to access data from every URL. In most uses of the Authentication header, you would provide an access_token string for the value. However because my project's scope was limited and I only needed to pass a single integer user_id, I kept it simple for this deployment.
I checked that the header data and Authentication was now included in the request. The backend Resource could now grab it with request.headers.get('Authorization') and compare it with the database to ensure the user is registered, logged in, and can continue browsing after browser refresh. Huzzah!

Conclusion

As this was my first time deploying a project, CORS and the communication between the frontend and backend were my biggest hurdles. However, after breaking the problem down I was able to research each moving part of CORS and the request-response cycle to come up with the overall solution to these issues. It was a learning experience and through this, I am now more confident in my understanding of CORS and other aspects of the fetch request. I hope this provided insight and help to any other programmer facing the same issues or having trouble debugging and breaking down problems into smaller digestible parts.

Building a RESTful API with Flask

Louiza Mak — Mon, 22 Jul 2024 21:07:47 +0000

I'm going to try my hand at doing a basic but comprehensive tutorial this time. After working on my first full stack project, I've realized how much I've enjoyed the backend and creation of an API. It was a super neat experience and I feel that I've learned a lot on what I'm developing and why it has to be done a certain way. So here we go!

If you're working on a Flask project or just trying to learn the next step after Python basics, you're in the right place. A crucial skill for any web developer, beginner or otherwise, is being able to build a RESTful API. RESTful APIs are interfaces that two computer systems use to communicate through HTTP requests. These requests can perform CRUD - standard database functions like creating, reading, updating, and deleting records. To put it simply, it is a way to access the web in a simple and flexible way. For this blog, we will use Flask, a lightweight web framework for Python that makes it easier to create APIs quickly and efficiently. In addition, we'll cover the basics of RESTful principles, set up a dev environment, and create API endpoints!

RESTful Principles

REST AKA Representational State Transfer is an architectural style for designing networks applications. Key principles of REST include:

Statelessness: Each request from a client to a server must contain all the information needed to understand and process the request. This way, requests are independent of all previous requests and are stored client side. The API can then be scaled to millions of concurrent users while maintaining simplicity for development, testing, and maintenance.
Uniform Interface: This interface constraint simplifies and decouples the architecture of the API by standardizing how resources are sent. API should use standard HTTP methods such as GET, POST, PUT, and DELETE. In addition, data sent from the server is typically represented in JSON or XML format. This representation of the data should also include enough information to modify or delete this resource.
Client-Server Architecture: Client and server should both be independent and able to change separately. Keep it simple. This is the current standard practice of web dev.
Layered System: API architecture is composed of layers with their own responsibilities. For example, the API can be deployed on layer A, data is stored on layer B, and authentication requests in layer C. Each of these layers do not know anything about the other servers and this allows load-balancing and improved system availability.

Development Environment

A development environment is a tool that creates an isolated environment for developers to make changes without affecting a live environment. It usually contains its own set of processes and programming tools as well.

Make sure Python is installed before we start coding. We will also use some other libraries such as pip, Python package installer, and Flask.

First, install Flask:

$ pip install Flask

Then, create a project directory:

$ mkdir flask_restful_api
$ cd flask_restful_api

Lastly, install Flask-RESTful:

$ pip install Flask-RESTful

API Endpoints

For this example, we will help out a shelter and make a simple API to manage their current dogs. We will also create endpoints to do CRUD operations. First, let's create a simple project structure. Create these files if you haven't already.

flask_restful_api/
├── app.py
├── models.py
└── config.py

Next, define the Dog model. We will give each dog basic traits to keep track of - name, breed, and age. We will also create an array of three dogs for testing purposes.

Second, we need to create the API Resources. Below is an example of the primary HTTP methods which correspond to the CRUD operations of create, read, update, and delete.

Finally, we will initialize the Flask application.

Testing

For testing our application endpoints, you can use an API testing tool like Postman or Insomnia.

Running the App

We are finally ready to run the application. You will be able to access it at http://127.0.0.1:5000/. In your project directory, execute the following command:

python app.py

Conclusion

These are the basics of creating a RESTful API with Flask. Using this as a launching off point, you'll be able to build a more robust API and soon connect it to a database and a frontend like React. For future suggestions on what to look into, check out the following below.

REACT: An open-source frontend JavaScript library. React is great for developing single-page applications and easy to pick-up.

SQLAlchemy: Python SQL toolkit and ORM (Object Relational Mapper). Use it to work with databases with Python objects.

Using React and SQLAlchemy in tandem with Flask-RESTful will allow you to create your first full-stack project with your own API. There are also many other powerful tools similar to the listed above that can be used. Happy exploration and coding!

My first foray into OOP

Louiza Mak — Mon, 20 May 2024 21:35:43 +0000

Okay, maybe it wasn't really my first foray into OOP, but I don't think I'm going to count the couple pages of "Java: A Beginner's Guide" I read about a year ago. Or the one-off C++ class I ended up dropping after a few months because I was a Biology student and I really thought I had no business being in there. A comp sci minor was just not in the cards at that time. For the most part, I've stuck to my side of the road since I began my coding journey and learned as much JavaScript a beginner could before hopping into a bootcamp. It's where I began building my foundation and learning the fundamentals of what it is to think and breathe like a programmer. It's where I was most comfortable and where I was most confident. I breezed through the lessons, waded through a whole section of React, and learned that React was infinitely better. And, not to toot my own horn, I was pretty decent at it - at least according to my bootcamp requirements. I was feeling great. And then, I was hit with Python.

The spaces, the indentations, the lack of curly brackets. I thought I was going to lose my mind. Reading Python was like reading a run-on sentence the length of a paragraph. Although the language syntax bore some resemblance to JavaScript, which I grew to love, I initially struggled to adjust. And after all that adjusting, I was faced with another, larger hurdle. Learning about and using Classes.

Python is an object-oriented programming language, as I'm sure most readers here already know. But if you're a beginner like me, it's not explicitly clear how this language differs to JavaScript at a glance. Is it because JavaScript doesn't have objects? Then what was that data type I learned about encompassed in fancy curly brackets? Or is it because Python focuses on this aforementioned data type as its main data structure? Because Python is "object"-oriented, get it? I had a lot of questions and apprehension coming into this new language but I also wanted to keep an open-mind. So here's what I learned for the beginners in the back.

Objects and Classes

A class is a code template to create objects in Python. It's made up of methods and variables and is used to support inheritance by reducing redundant code. I'll touch on inheritance later on but all you have to know for now is that classes are extremely important in Python because we use them to create objects.

Everything in Python is an object. And I mean, everything. Integers, strings, floating point numbers, arrays and even dictionaries, are all objects that are built-in. Objects in Python are instances of a particular class that contain its own data and functions to manipulate that data, almost like its own mini-program.

To create a class, we use the class keyword:

And to create an object, you call the class:

Beyond objects and classes, a lot of people will also throw key terms to memorize at you when you first pick up an OOP language. Abstraction, Polymorphism, Encapsulation, and Inheritance. These concepts are vital to understanding why most major software development companies prefer OOP languages. And thankfully, the couple pages of "Java: A Beginner's Guide" that I read summarized what each term means in the scope of programming.

Abstraction

Goal: Simplifying Complexity

Abstraction is the process of hiding the complex implementation details of a system and exposing only the necessary parts. It’s like driving a car; you don’t need to understand how the engine works to drive it. You only interact with the steering wheel, pedals, and dashboard.

In programming, abstraction allows you to define complex operations in simple terms. For example, let's take this car analogy further and consider a Car class in a program:

Here, start_engine, drive, and stop_engine are high-level methods that hide the intricate details of how a car starts, drives, and stops. This abstraction makes the Car class easier to use without requiring the user to understand its internal workings as users will only need to call the class along with its method. For example: Car.start_engine() and Car.stop_engine().

Inheritance

Goal: Reusing Code

Inheritance allows a class to inherit properties and methods from another class. This promotes reusing code and establishes a natural hierarchy between classes.

To continue with the car analogy: imagine you have a base class Vehicle and you want to create a Car class and a Bike class. Instead of rewriting common functionality, you can inherit them from Vehicle:

Here, Car and Bike inherit the start method and other properties from Vehicle, making the codebase more maintainable and DRY (Don't Repeat Yourself). In addition, we can utilize the super method to avoid even more redundancy.

The super method returns a temporary object of the parent class and it's typically used to initialize parent class attributes or invoke parent class methods. In the example above, it is used to call the __init__ method from the Vehicle class to make sure the make and model attributes are properly initialized without redundant code. This also allows the Vehicle class's __init__ method to be modified without needing to also update its dependent classes.

Encapsulation

Goal: Protecting Data

Encapsulation is all about bundling the data and methods that operate on the data into a single unit, i.e., a class, and restricting access to some of the object's components. This protects the integrity of the data and prevents unintended interference.

Let's use a new analogy and imagine a Store class. We could create many classes that inherit properties and methods from it but there is one class's data that we want to ensure the integrity of - the CashRegister Class. In the CashRegister class, we want to restrict direct access to the total balance:

Above, __balance is a private attribute that can only be accessed with the class. The following methods deposit, withdraw, and get_balance provide controlled access to update and view the balance. This ensures the register's data integrity and prevents unintended interference.

Polymorphism

Goal: Code Flexibility

Polymorphism allows objects of different classes to be treated as objects of a common super class, something we've touched on throughout this blog. It enables one interface to be used for a general class of actions, making the code more flexible and easier to extend.

For example, consider an app that processes payments from different sources such as credit cards, PayPal, and Bitcoin. We can define a common interface in a superclass and implement specific details in the subclasses:

In this example, process_payment is defined in the superclass Payment and implemented in each subclass. The process_transaction function can process any payment method, demonstrating polymorphism.

Conclusion

Understanding objects and classes is vital to writing efficient, reusable, and simplified code. It is part of the core foundations needed to excel in Python and understanding other OOP languages. The principles of Abstraction, Inheritance, Encapsulation, and Polymorphism are equally essential for creating robust, flexible, and maintainable software. They enable developers to write code that is not only easier to understand but also easier to modify and extend. By mastering these concepts, even if you have to struggle through it like I did, you can leverage the full power of Object-Oriented Programming to build sophisticated and scalable applications. And at the end of the day, isn't that what we all want to achieve? I know this isn't a thick, well-researched, and well-written book like "Java: A Beginner's Guide", but I hope that this can help you in beginning your own Python journey.

The Beginner's Guide to React's useEffect Hook

Louiza Mak — Wed, 10 Apr 2024 17:48:53 +0000

One of the core fundamentals beginner coders learn is that functions are "self-contained" blocks of reusable code that perform a single task. Functions "take in" data, processes it, and "return" a result, and can be run multiple times. But what if they could do more? What if they could have a side effect? Let me introduce React's useEffect hook.

Hooks

If you're new to React, like I was a month and a half ago, you might not be too familiar with hooks, yet. Hooks lets you add stateful logic to a functional component without writing a class. There are several types of hooks built into React including, but not limited to: Effect, Context, and State. useEffect falls under the Effect hook, hooks that allow components to connect and synchronize with external systems such as the browser DOM, network, and other non-React code.

But why would we need to do that? In the realm of React development, managing side effects is an essential aspect of building robust and efficient applications. Here are a few examples for you. What if we have an object that we want to use to control a non-React component based on the object's State? Or what if we need to perform a GET request right after the page is fully rendered? How about setting up a timer that only increments while it is active? Or simply being able to subscribe to events or update the DOM? These scenarios, crucial for creating dynamic user interfaces, are easily achievable with the useEffect hook.

useEffect Basic Usage

Before we begin, don't forget to import the useEffect hook!

Now, let's start with the basics. The useEffect hook accepts two parameters: a callback function and an array of dependencies. The function is the side effect we want to perform, and the dependencies array allows us to specify values that, when changed, will trigger the effect to run again. This mechanism ensures precise control over when the side effect should be executed.

That is why understanding how dependencies work in useEffect is key for writing efficient and bug-free code. When we provide a dependency array, React will re-run the effect whenever any of the dependencies change. If you omit the dependency array, the effect will run on every render, potentially causing performance issues. Imagine the side effect code running in an infinite loop, an unstoppable force littering your console with lines of GET request arrays or "Hello, World!". Scary. That's why, at the minimum, we should always supply the useEffect hook with an empty dependency array. We can also provide arrays that aren't empty, and these will ensure that the effect will only run when the contents of the array change.

If we provide multiple arrays, such as dependency1 and dependency2, the effect will read this as run when dependency1 or dependency2 changes. And these arrays usually change when we setState of a component and it re-renders. By default useEffect will run the side effect function in the following order:

By following these dependency array rules, we can optimize performance and avoid unnecessary computations.

Cleaning Up

Another neat feature of the useEffect hook is that it is designed to allow the 'return' of a function within it as a means to tidy up our code before the component unmounts. This function also runs right before the execution of the next effect. This is because specific side effects might require cleanup to prevent memory leaks or unwanted behavior.

For example, let's say you're performing a fetch request on the server to get user A's information but change your mind before the request is complete. Instead, you decide to fetch the information of user B. Without the cleanup function, both fetch requests would continue to run even though the components have been unmounted or the dependencies have changed. This can lead to unexpected behaviors such as the effect attempting to update components that are no longer mounted or display the wrong information. With the cleanup function, we can abort the first fetch request of user A before moving on to user B and ensure that resources are properly released when they're no longer needed.

The following is another example with corresponding code:

In this example, the useEffect hook sets up an interval that increments count every second. The clean-up function returned by useEffect clears the interval using `clearInterval(intervalID) which stops the interval from running.

Conclusion

In conclusion, the useEffect hook is an incredibly essential tool for managing side effects in React functional components. It's versatile and simple and can handle a wide range of scenarios such as fetching data, subscribing to events, and interacting with the DOM. Although we shouldn't use this effect to handle every aspect of our code like orchestrating the data flow of our apps, it is a great hook that lets us "step out" of our React code and synchronize with external systems like API's, databases, networks, and so on. So go ahead, leverage the power of useEffect for your projects, and embrace this wonderful React hook.

What is 'this'?

Louiza Mak — Fri, 09 Feb 2024 23:26:17 +0000

this was the first JavaScript topic that really had me stumped. I couldn’t understand it no matter how hard I tried, and it was even more difficult trying to figure out how to use it. Don’t even get me started on .call(), .bind(), and .apply(). That’s why I decided to tackle this for my first coding blog post.

Let's be honest, context matters. Why? Because without context, we would never be able to make educated decisions, add insightful comments to a conversation, or simply, understand sarcasm. Context is what gives meaning to everything that we do in our daily lives. Context is everything. Context is king. And context is what you need to understand how to use this.

Execution Context

Image by Atatus

Execution context is the abstract concept of an environment that the JavaScript engine sets aside to handle the transformation and execution of code. In JS, there are two types of execution context: Global Execution Context (GEC) and Function Execution Context (FEC). Embed these acronyms in your brain now, because we will be using them often.

To start, we need to understand that regardless of which context is being created, both undergo a two-phase creation process:

The Creation Phase
The Execution Phase

For GEC, the creation phase begins when an execution context is created but before the code runs. For FEC, the creation phase begins whenever the function is called. Something to keep in mind is that there can be more than one FEC, distinct to each function, but there can only be one GEC. In addition, the Function Execution Context can access the entire code of the Global Execution Context, but not the other way around. This is analogous to how a one-way mirror works, in that, the FEC can “see” externally towards the GEC, but the GEC cannot “see” internally towards the FEC.

Once the creation phase initiates, a variable object is created that stores the variables and function declarations within the execution context. This object is the Execution Context Object that we will refer to later.

After, the scope chain is formed. But what is the scope chain and how does it work? It’s all about positioning. We’ll use the analogy again, the one-way mirror. Code within nested functions can “see” externally towards the global scope, but the global scope cannot “see” into functions. We call this lexical scoping. When JavaScript resolves code, the engine will traverse up the scope chain to determine what additional variables and functions the code can access. Keep in mind that scope can not jump laterally, so to speak, so function A does not have the same scope as function B if they are not nested in any way.

Image by Hubspot

Lastly, the value of this is initialized by the JS engine. The keyword points to an object that the current code is being executed on. What is this object, you may wonder? For GEC and FEC, it is the Execution Context Object that was created at the beginning of the creation phase. This global object is also referred to as the window object and represents an open window in a browser. Another important way this can be utilized is in an object method. When used in a method, this refers to the owner object.

Image by Scalar

Now that the creation phase is finished, the JS engine starts reading the code and executing it one line at a time. This phase involves assigning values to variables, executing functions and code blocks as it is encountered, and managing the call stack, a data structure that keeps track of functions currently being executed.

And voila, we have gone over the context needed to finally discuss how to use this. A round of applause for everyone who’s made it this far.

`this`

Let’s start this out by reiterating that this is a keyword that refers to an object based on how it is invoked. Within the GEC and FEC, this refers to the window.

GEC this value

FEC this value

And within an object method, this refers to the object itself. How is this possible? We need to understand how object methods are created. Let's look at the following example:

Here I've written out a method for food which prints a string containing fruit's value. We can rewrite this 'shorthand'.

This shorthand syntax increases readability and saves time. Below, I've taken the code and applied this.

Notice in all three of these scenarios, food.printFruit() prints the same thing. So, let's circle back to the original question. How is it possible that, within an object method, this refers to the object itself? It is possible because the moment we invoke the method on the adjacent object food, this is implicitly bound to food. I suppose the whole idea is a bit circular but I hope that clears it up!

Now we know that this is a keyword that refers to an object based on where and how it is invoked at the time it is invoked. this is not a variable and we cannot change its value.

There's so much more to this that I did not cover in this blog, such as how to use this when it comes to methods: .call(), .bind(), and .apply(). But that will have to be a post of its own. For now, we have answered the first question. What is this?

DEV Community: Louiza Mak

I watched "So You Think You Know Git" so you don't have to

Conditional Configs

Oldies But Goodies

git maintenance

--force-with-lease

Big Repo Changes

prefetching

partial cloning

commit-graph write

GitButler

Conclusion

A deep dive into my project, CORS, and Authorization

CORS

Authentication

1. What issue am I experiencing?

2. Is the user_id getting passed in the request?

3. How do I pass my sessionStorage data as part of my request?

Conclusion

Building a RESTful API with Flask

RESTful Principles

Development Environment

API Endpoints

Testing

Running the App

Conclusion

My first foray into OOP

Objects and Classes

Abstraction

Inheritance

Encapsulation

Polymorphism

Conclusion

The Beginner's Guide to React's useEffect Hook

Hooks

useEffect Basic Usage

Cleaning Up

Conclusion

What is 'this'?

Execution Context

this

2. Is the `user_id` getting passed in the request?

`this`