Skill Tree Update 4/4/2022
Tags: programming, productivity, product, redux
Published: 2022-04-04 18:04:06

## Content

- [Introduction](#introduction)
- [Building the Static UI](#building-the-static-ui)
- [Building the Backend Core in a Single Weekend](#building-the-backend-core-in-a-single-weekend)
- [Adding Statefulness with Redux Toolkit](#adding-statefulness-with-redux-toolkit)
- [How I Approach My Work Now](#how-i-approach-my-work-now)
- [Conclusion](#conclusion)

![April Fool's update](https://i.ibb.co/DpFpsJw/Screen-Shot-2022-04-01-at-2-45-10-PM-2.png)

## [Introduction](#content)

&emsp; It's been a ride. [I remember three weeks ago when I was starry-eyed about incorporating new technologies like NextJS and FaunaDB](https://dev.to/tieje/project-skill-tree-tech-stack-1274). What ended up happening is I fell back to  technologies that I was familiar with: Django for REST APIs and PostgreSQL. Part of the reason why I wanted to use new technologies was because it was frustrating getting my development environment working with an M1 Mac Air. Fortunately, [I figured it out](https://dev.to/tieje/how-to-install-psycopg2-on-an-m1-mac-mie). Building the static UI was a breeze; it only took a day. Making the static UI stateful, well that took the next two weeks. The following is  an overview of the major updates I have accomplished so far. The most important update being how I approach my work now.

## [Building the Static UI](#content)

![static ui](https://i.ibb.co/Vg4Z3sG/Screen-Shot-2022-04-01-at-3-18-12-PM.png)

&emsp; The UI was built using Tailwind CSS in a `create-react-app` TypeScript template with a box of scraps. Because I already designed how it would [basically look](https://i.ibb.co/RTRSTyp/Screen-Shot-2022-03-29-at-8-43-14-PM.png), the biggest issue I ran into while creating the static UI was determining if I should add a submit button. Unfortunately, this is not an April Fool's joke. This UI decision affects how often I will send updates to the API. Is it better to do many small updates or one big update to the API? Said in a different way: How many trips to the grocery store do you want to make? Exactly, one big update with a single submit button would be the most optimal method of updating the API. However, it would also be more cumbersome and *dangerous* for most people. Yes, **dangerous**, and I'll explain why.

&emsp; Having a single Edit/Submit button would open all forms to change at once. Changing one part of the form and accidentally changing another part of the form can cause a serious error in miscommunication of ideas or loss of work. A single Edit/Submit button *can* streamline work, however, it is not sufficiently safe for our purposes.

## [Building the Backend Core in a Single Weekend](#content)

&emsp; When I'm tasked with creating an API with batteries included as quickly as possible, I fall back on Django. Is it because it's the best backend? Nope. It's because it's the backend that I understand the best and because it's the first web framework I learned. And honestly, if I had to code in a single language for the rest of life, it would probably be Python.

&emsp; As I mentioned before, [the hardest part of setting up the backend](https://dev.to/tieje/how-to-install-psycopg2-on-an-m1-mac-mie) was making sure that when I migrate to a PostgreSQL database, Django's ORM can communicate with it through [psycopg2](https://www.psycopg.org/).

&emsp; The backend core features REST APIs that I will need to use for testing data fetching and data fetching techniques on the frontend with Redux Toolkit.

## [Adding Statefulness with Redux Toolkit](#content)

&emsp; It if weren't for Redux Toolkit, I probably would have used a different state manager. Vanilla Redux without Toolkit is fairly difficult to figure out on a single pass of reading the documentation. Fortunately, I had built a fake Redux replica from a book tutorial prior so I already had good idea on how Redux worked under the hood. I can safely recommend using Redux Toolkit and its data-fetching counterpart, Redux Toolkit Query. State management has been a breeze with Redux Toolkit.

From all the hype of React Query, I thought I could use it to replace Redux, but it [clearly says on its website](https://react-query.tanstack.com/guides/does-this-replace-client-state) that it is *not* a replacement for state management systems like Redux. I spent a good five hours comparing Redux and React Query only to realize that React Query is not the state management killer that I thought it was.

## [How I Approach My Work Now](#content)

&emsp; As I struggled to fall asleep after a stressful sprint of three consecutive 14-hour workdays, Cal Newport's book, *Deep Work*, popped into my head. [Deep Work is focusing solely on knowledge work without distractions](https://blog.doist.com/deep-work/). I've known about it since its inception, but I gave up on it several times in the past due to lack of motivation. I could not possibly sustain my self-destructive work schedule, so I put my phone on *Do Not Disturb*, I abstained from reading news, emails, or watching youtube videos. And I politely told my family not to disturb me from 8am to 12pm. The general limit for deep work is about four hours. The result: I felt very productive and I was able to finish at least one or two project goals per day.

## [Conclusion](#content)

&emsp; From these past three weeks, I needed to solve many technical problems, but also human problems like fixing how I approach work. In the future, I'd like to recognize my own personal human problems sooner so I don't get in the way of my work.