DEV Community: tieje

How to Get the URL for Pictures

tieje — Thu, 14 Apr 2022 17:50:28 +0000

In your favorite search engine, type whatever you want a picture of and press Enter (Windows) or return (Mac).

Left-click on the search engine's Image tab.

Left-click on any picture to bring it up.

Right-click the picture for options and left-click Copy Image Address

Press ctrl + v (Windows) or Command + v (Mac) to paste the image address wherever you need it.

Skill Tree Update 4/11/2022

tieje — Tue, 12 Apr 2022 02:48:45 +0000

Introduction
Two Steps Forward One Step Back
Work and Life Balance with Weekend Wednesdays
Conclusion

Introduction

"Your greatest enemy is yourself from 10 hours ago."
-- Factorio players

One of the goals of this week was to add statefulness to the skill tree app. Fortunately, pan and zoom works perfectly fine out of the box. Event listeners for keyboard shortcuts were actually pretty easy to add. One portion that I struggled with was experimenting with PUT, PATCH, and POST methods using RTK Query on the frontend. Despite understanding how it all works, there's that nagging feeling in the back my head that's like, there's no way this is going to work. But it did work. I have CRUD functionality now!

Two Steps Forward One Step Back

The big mistake I made was using multiple sources of state. There should only be one source of truth in state management. Ultimately, this mistake led to not being able to add a new hexagon on the fly without reloading the window. I could not invalidate the query because I loaded my state from a slice and not from a useQuery hook. I needed to implement a useQuery hook from RTK Query so that I can invalidate the query and it can grab data from the API. I was using RTK Query incorrectly.

Work and Life Balance with Weekend Wednesdays

Weekend Wednesday is making Wednesday a day-off and making Saturday a work-day. Knowledge workers may want to adopt this schedule because our performance diminishes significantly as days go on without a day of rest. This week marks my first weekend Wednesday trial and I already feel significantly more productive and happier than on the old Monday through Friday schedule.

Conclusion

Last week, I learned a lot about working with queries in general. CRUD functionality for hexagons is now complete. This week I'll be moving on to CRUD functionality for paths. Now that I understand queries, I feel like frontend development should be smooth sailing from here on out.

How to Delete a Table from a Database in Django

tieje — Mon, 04 Apr 2022 19:29:33 +0000

Solution Link

Solution

How to delete a single table in Django 4.0:

Remove <YourDeleteTable> model from models.py file
Remove <YourDeleteTable> class from admin.py file and ALL other instances of wherever this class is used.
python manage.py makemigrations <<your app>>
python manage.py migrate

Background

I wrote this guide because I lost all my data from following a different guide on Stack Overflow. T_T

Solutions to Additional Database Problems in Django

Skill Tree Update 4/4/2022

tieje — Mon, 04 Apr 2022 18:04:06 +0000

Content

Introduction
Building the Static UI
Building the Backend Core in a Single Weekend
Adding Statefulness with Redux Toolkit
How I Approach My Work Now
Conclusion

Introduction

It's been a ride. I remember three weeks ago when I was starry-eyed about incorporating new technologies like NextJS and FaunaDB. 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. 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

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, 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.

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

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.

As I mentioned before, the hardest part of setting up the backend was making sure that when I migrate to a PostgreSQL database, Django's ORM can communicate with it through psycopg2.

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

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 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

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. 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

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.

How to Create Nested JSON in Django REST APIs

tieje — Fri, 01 Apr 2022 18:39:13 +0000

Content

Introduction
My Code as an Example
Resulting JSON
Helpful Links

Introduction

Nesting JSON with the Django REST Framework is not intuitive, but it is approachable once learned. Utilize the serializers.SerializerMethodField() from the rest_framework. By default, this method will call a method that begins with get_{your_variable_name}. From here, Django's QuerySet API can help you reduce multiple lines of a SQL into a single line of Python.

My Code as an Example

from django.db.models import QuerySet
from rest_framework import serializers
from skilltree.models import SkillTrees, SkillTreeHexagons, SkillTreePaths, SkillTreeHexagonNotes
from drf_queryfields import QueryFieldsMixin

class SkillTreesSerializer(QueryFieldsMixin, serializers.ModelSerializer):
    class Meta:
        model = SkillTrees
        fields = ('__all__')
    paths = serializers.SerializerMethodField()
    hexagons = serializers.SerializerMethodField()
    hex_string_list = serializers.SerializerMethodField()

    def get_hexagons(self, obj: SkillTrees) -> QuerySet:
        '''
        Get all hex ids that have the skill_tree_id
        The object is the SkillTrees instance
        For example, print(obj.skill_tree_id) will print each skill tree instance's skill_tree_id
        '''
        hexagons: QuerySet = SkillTreeHexagons.objects.filter(
            skill_tree_id=obj.skill_tree_id).values()
        return hexagons

    def get_paths(self, obj: SkillTrees) -> QuerySet:
        '''Get all hex ids that have the skill_tree_id'''
        paths: QuerySet = SkillTreePaths.objects.filter(
            skill_tree_id=obj.skill_tree_id).values()
        return paths

    def get_hex_string_list(self, obj: SkillTrees) -> QuerySet:
        '''Collect all hex string ids'''
        hex_string_ids_obj: QuerySet = SkillTreeHexagons.objects.filter(
            skill_tree_id=obj.skill_tree_id).values_list('hex_string')
        return hex_string_ids_obj

Resulting JSON

{
  "skill_tree_id": 3,
  "paths": [
    {
      "path_id": 1,
      "skill_tree_id": 3,
      "starting_hex_q": 0,
      "starting_hex_r": 0,
      "starting_hex_s": 0,
      "ending_hex_q": 2,
      "ending_hex_r": 0,
      "ending_hex_s": -2,
      "starting_hex_string": "0,0,0",
      "ending_hex_string": "2,0,-2"
    },
    {
      "path_id": 2,
      "skill_tree_id": 3,
      "starting_hex_q": 0,
      "starting_hex_r": 0,
      "starting_hex_s": 0,
      "ending_hex_q": 0,
      "ending_hex_r": 2,
      "ending_hex_s": -2,
      "starting_hex_string": "0,0,0",
      "ending_hex_string": "0,2,-2"
    }
  ],
  "hexagons": [
    {
      "hex_id": 1,
      "note_id": null,
      "hex_q": 1,
      "hex_r": 1,
      "hex_s": 1,
      "skill_tree_id": 3,
      "allow_verbal_feedback": false,
      "allow_quantitative_feedback": true,
      "image_address": "https://www.knowol.com/wp-content/uploads/2017/02/abraham-lincoln-1863.jpg",
      "title": "ok",
      "hex_string": "1,1,1"
    },
    {
      "hex_id": 2,
      "note_id": 1,
      "hex_q": 2,
      "hex_r": 2,
      "hex_s": 2,
      "skill_tree_id": 3,
      "allow_verbal_feedback": true,
      "allow_quantitative_feedback": false,
      "image_address": "https://thecolloquial.com/wp-content/uploads/2020/07/Thomas_Paine_rev1-e1593883311631-319x180.jpg",
      "title": "asdf",
      "hex_string": "2,2,2"
    }
  ],
  "hex_string_list": [["1,1,1"], ["2,2,2"]],
  "name": "test tree",
  "theme": "yagami"
}

Helpful Links Section

Stack Overflow link that helped me

Django REST Framework documentation on serializers

How to Install psycopg2 on an M1 Mac

tieje — Fri, 25 Mar 2022 01:21:04 +0000

TL;DR: The Solution

Introduction
The Solution
Avoid These Potential Solutions
Workarounds
Conclusion

Introduction

I remember a year ago, when I could not solve this problem for a different project so I ended up using a Docker container to emulate a simple linux environment to use psycopg2. I'm a bit older and wiser now, so when faced with the same problem for my current project, I dug around all day today figuring out how to install psycopg2 in an M1 Mac environment. I tried many solutions that may have worked for others somehow, but ultimately did not work me. It turns out that the solution was the most vanilla installation I've done since I started using my M1 Mac Air.

The Solution

Uninstall pyenv, pipx, and all other versions of python except your system's python.
Download the latest version of python from the python website. At the time of writing, I was downloading python 3.10.4 so look around to see if there is an even more updated version.
Run the installer. Once it's finished, if you check your Applications, you should have your new version of python there. To test your new installation, run python3 --version in a fresh terminal.
Run pip3 install psycopg2-binary

Optional Steps

Optionally, you can also install PostgreSQL on your M1 mac as well.

Download the postgreSQL installation from the official website. At the time of writing, the most recent version, PostgreSQL 14, looks like it has the most support for the M1 Mac architecture.
Run the installation wizard. The default location for my installation was /Library/PostgreSQL/14, so I just used that.
Add PostgreSQL bin to PATH in your .zshrc file. It should look like the following:

export PATH="/your/path/to/PostgreSQL/14/bin:\$PATH"

Alternatively, you can can use this command if your installation was made in the same folder as mine:

echo 'export PATH="/Library/PostgreSQL/14/bin:$PATH"' >> ~/.zshrc

Open a new terminal and run pg_config in the command line. Your configuration should come up.
To get started on your Django application, PostgreSQL offers a brief tutorial, which is actually useful later on when you're replacing the initial SQLite database in settings.

Avoid These Potential Solutions

Avoid using a version manager like pyenv or asdf. If you install psycopg2 with this configuration, you will likely run into architectural issues with arm64.

Avoid using Homebrew or anything that was installed with Homebrew. openssl, libpq, and other TLS/SSL packages will not be sufficient substitutes for the lack of SSL support for Python. Even adding a symlink to the specific libraries needed will not be sufficient enough to solve the problem.

Workarounds

As I mentioned in the introduction, you can use Docker to containerize your application and ultimately install psycopg2. But it's not the simplest or the fastest solution. If you must do it this way, here a few helpful links to the Github project that I was working on at the time to help you get started:

Conclusion

I hope this helps. It appears that Apple's M1 chip has received a ton of support from the developer community over the past year, which makes me less inclined to sell my Mac Air for a Framework laptop.

I can only speculate that Apple wants to eliminate the need for 3rd-party package managers and version managers like Homebrew, and pyenv and asdf, respectively. The newest update, Monterey 12.3, is hostile to 3rd party programs especially if Xcode is not installed. It's not impossible to install and use 3rd-party applications but there will be security pop-up that needs a little more than a password to get around..

How to Listen to Events in ReactJS

tieje — Thu, 24 Mar 2022 01:48:32 +0000

TL;DR

Introduction
How It Works
Conclusion

Introduction

In my last article, I created a static hexagonal grid with pan and zoom functionality. That's cool, but what's not cool is needing to press the one of the follow buttons to switch between pointer mode and drag mode:

Instead of pressing these toolbar buttons, I'd like to use a keyboard shortcut to switch between the pointer mode and the drag mode. Copying Figma's button shortcuts, specifically, I would like to bind the v button and the h button keyboard keys to the pointer mode and drag mode, respectively. This functionality was achieved thanks to the use-event-listener hook. Fortunately, the React hook is simple enough to use as brief case study into how event listeners work.

How It Works

The useEventListener hook is only one file with a brief amount of code:

/* eslint-disable max-params */
import { useRef, useEffect } from 'react';

const useEventListener = (
  eventName,
  handler,
  element = global,
  options = {}
) => {
  const savedHandler = useRef();
  const { capture, passive, once } = options;

  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(() => {
    const isSupported = element && element.addEventListener;
    if (!isSupported) {
      return;
    }

    const eventListener = (event) => savedHandler.current(event);
    const opts = { capture, passive, once };
    element.addEventListener(eventName, eventListener, opts);
    return () => {
      element.removeEventListener(eventName, eventListener, opts);
    };
  }, [eventName, element, capture, passive, once]);
};

export default useEventListener;

donavan's original code

Let's break it down.

const useEventListener = (
  eventName,
  handler,
  element = global,
  options = {}
) => {
  const savedHandler = useRef();
  const { capture, passive, once } = options;

The useEventListener requires the event name and the handler function. In my case, the event I'm looking for is keypress and the function I made is handlePanZoomModeSwitch

useEventListener('keypress', handlePanZoomModeSwitch)

Because I'm simply checking if the keyboard v or h key is pressed, it's perfectly fine to use the default element global.

There are three available options, despite four possible options. None of them fit my needs, however.

  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

savedhandler is assigned to the useRef() which is used to access DOM nodes and persist mutable values across re-renders. In our, case we don't want to forget whatever state is already attached to the current DOM in our window. Since the second useEffect() parameter is specified as [handler], whenever the handler function changes, the component will re-render itself. If the second useEffect() parameter was not specified, as in simply being [], then the component will only render the component once.

The last useEffect hook looks lengthy, but it's not that complex. The isSupported if-statement just checks if the element exists and if we can add an event listener to that element.

  useEffect(() => {
    const isSupported = element && element.addEventListener;
    if (!isSupported) {
      return;
    }

    const eventListener = (event) => savedHandler.current(event);
    const opts = { capture, passive, once };
    element.addEventListener(eventName, eventListener, opts);
    return () => {
      element.removeEventListener(eventName, eventListener, opts);
    };
  }, [eventName, element, capture, passive, once]);

Next, the eventListener arrow function serves as the handler function for the addEventListener. The eventListener function simply passes whatever event occurs to the handler function that we specified.

Finally, the removeEventListener() is passed to prevent memory leaks, side-effects, and event collisions.

Conclusion

The useEventListener() hook makes it easy to bind keys for your web app needs. Have fun out there!

I wasted two days jerry-rigging a package when the solution was one search away

tieje — Tue, 22 Mar 2022 19:59:43 +0000

"I attempted to jerry-rig this package for two days before giving up..."

Mission Statement

Introduction
How to Look for Solutions
Lessons Learned
Conclusion

Introduction

Developers use open source software all the time. They allow us to build products quickly and easily. Figuring out which software to use is a task that in itself requires in-depth knowledge about how these technologies work. The following is my experience in building a pan and zoom network graph and what I learned from the process.

How to Look for Solutions

Open source solutions range from:

This is exactly what I needed, the documentation and examples are helpful, and it works.

While the documentation is poor, it should be hackable enough for me to build something with it.

An example of the former while building the network graph, was react-hexgrid. The documentation was unfinished, but what sold me were the examples and the simplicity of the code.

However, if your thought is the latter, then you should probably keep looking for a better solution. One could certainly hack their way to a solution, but unless you've been through almost everything, there is likely a better solution just around the corner.

For example, at one point I needed to solve two problems:

Scroll by grabbing in the browser with the mouse.
Zooming with a mouse wheel.

At first, I was going to use react-indiana-drag-scroll to solve the first problem. And it worked. But I had a feeling that there might be a solution that solved both of these problems at the same time. Searching on libhunt, openbase, and duckduckgo, I found out that this problem is actually very old and the term that better fit my problem was "pan and zoom". Searching with this term, I stumbled upon react-pan-and-zoom-hoc, which helped solve my problem, but it was difficult to fidget with because rather than having a simple component, the component spit out the correct x, y axes translation that would need to be worked into the component's CSS. No bueno. I attempted to jerry-rig this package for two days before giving up and switching to react-svg-pan-zoom, which worked pretty much instantly and was exactly what I needed.

Lessons Learned

Don't settle. Taking a few days to find the right tool can save you weeks of fidgeting with a subpar solution.
Using a variety of search terms and even different search engines and search applications are a must when looking for existing solutions. Most of the time, the problem has already been solved. This seems like a no-brainer, but I fall for this trap all the time.

Conclusion

That second point is important for another reason: a version of the application I'm working on has already been created by someone else.

However, the application looks rushed and unfinished. The UI is not what I had in mind.

Now that a static version of my network graph is basically finished, I'll start with building the instructor's interface since this deals with creating and storing data, which I haven't really figured out yet.

Am I really building a network graph with a hexagonal grid? Yes, and it's because of a CGPGrey youtube video.

Project Skill Tree: "Studying" Forem's Open Source Code for Markdown Features

tieje — Fri, 11 Mar 2022 10:30:50 +0000

Context

Mission Statement
Link to Why I'm Writing This Article

Content

Introduction
Looking for the Forem Markdown Editing Feature
- Problems with Option 1
- Problems with Option 2
- Problems with Option 3
Answer
Conclusion

Introduction

The aim of this article is deduce how to extract the Markdown features used for article-writing from dev.to. The website this article is hosted on, dev.to, was built with open-source code produced by Forem. I know that the Markdown feature is not specific to dev.to because another website built with Forem, This MMA Life, which is about MMA and is thus unrelated to coding, uses the same Markdown document editing feature as dev.to.

That being said, let's try to find the Markdown editing feature in Forem's source code.

Looking for the Forem Markdown Editing Feature

It's not particularly difficult to find the code used for writing Markdown.

The only problem is that almost every file looks like this:

This is real, professional code, the likes of which would take me a month to fully understand. There are few approaches I can take with decreasing levels of difficulty:

I can read over the code, understand how it works, and attempt to replicate the most basic parts myself from scratch.
I can read over the code, understand how it works, copy and paste what I need, and fix any bugs along the way.
I can clone the entire repository, delete parts that I don't need, and fix any bugs along the way.

Problems with Option 1

I will definitely learn the most here, but it's a month or more of learning on my own just to get started. It may be another month or more of coding the whole thing out based on what I've learned.

Problems with Option 2

This is the middle ground, where I try to understand the code by copying only parts that I need. How much code is actually copy-pasted after all? I might learn some things but it's likely that none of it will stick around in my head, which will ultimately make debugging this large application harder in the long run. Despite expediting the process, I will end up with a lot of stress while still taking a month to figure out the code, copy-paste it, and debug it.

Problems with Option 3

This would take a week to do and is definitely the most expedited option. But like option 2, I'll end up with a ton of tech debt and will pay for it later in the form of a month of stress-inducing debugging.

What choice would you make?

The Answer is...

Secret Option 4 None of the Above

The markdown document feature goes on the list of features that are nice to have in the future, but are not strictly necessary for basic functionality. I will be building an MVP after all. A simple text form will suffice for now. In the meantime, I can look for libraries such as react-markdown that can potentially fulfill this feature later.

Conclusion

When building an MVP, it's important to not get bogged down by complex code. It's better to ship the MVP and either get hired by a company or present the basic idea to angel investors who care about education as much as I do. To most people, this seems like an a no-brainer. But like when all you have is a hammer, everything looks like a nail; likewise, when all you have is a keyboard, everything looks like an idea to be abstracted away with code. Many junior engineers make the mistake of biting off more than they chew and making large commitments to a codebase only to find out that no one wants to use their new JavaScript framework.

Project Skill Tree: Designing the Technical Frontend Part 1

tieje — Thu, 10 Mar 2022 16:17:39 +0000

Mission Statement

Introduction
Two Separate Frontend App Layers
Overlay UI Component Layer Features and Implementation
Skill Tree Background Layer Features and Implementation
Conclusion

Introduction

Although I defined the tech stack in a previous article, I will need to go in depth about how features will be built. The more specific the better. As much as I would like to get straight to writing code, writing code for an application this large without thinking about implementation is a rookie mistake. I learned this from my last incomplete project (project Semblance) where I merely defined my tech stack instead of thinking of how features will be technically implemented and with what packages. There are tons of time-saving JavaScript libraries, packages, and alternatives out there: here's a neat web app for finding alternatives.

Two Separate Frontend App Layers

The main application will consist of two layers: the overlay and the background. The overlay is the UI component used to interact with nodes in the background. When the user clicks on the skill tree background, the app will hide the overlay and allow the user to scroll around and zoom in and out of the skill tree background. This allows users to see the bigger picture like looking at a map from an RPG.

Template

Feature
- Implementation

Overlay UI Component Layer Features and Implementation

Markdown document, edit, and preview
- Forem open source code
- perhaps an alternative library
Search bar
- Algola
Menu drop down
- Tailwind CSS
Statistics bar graph
- d3
Overlay Node Data loading
- NextJS lazyLoading

Skill Tree Background Layer Features and Implementation

The easy way to build the skill tree background layer would be to separate nodes and lines from the background image.

Background Image Layer

This seems to be the easy part.

Default Images
- Static Assets
Image Upload

Node and Line Building

This is the hard part.

default Node Icons
- Static Assets
skill tree line and node building
- d3
- Make nodes and lines three types of sizes and lengths, respectively, (short, medium, long)

Conclusion

In my last major project, I simply started coding and tried to make things work. The worst part of doing it this way for a large project is that you build out large parts of infrastructure only to rebuild it. This time, I'm probably going to try to use a sandbox like Code Pen to practice, test, and build out prototypes for d3, Forem (markdown document CRUD), and Algola (search engine?). I'm not sure about Algola since it might need a backend. I might not need Algola after all.

What I will do in the future is create a tutorial post for each feature that I'm figuring out.

Project Skill Tree: Desktop and Mobile App View

tieje — Wed, 09 Mar 2022 21:31:49 +0000

Link to Figma work
Disclaimer
Introduction
Design Decisions
Conclusion

Disclaimer

The color schema will be editable by the user. That being said, the initial Figma design is intended for design clarity.

Introduction

Today, I designed the application pages of the teacher view and the mobile view.

Design Decisions

The student view served as an excellent template for the teacher view. Because the student and teacher views shared the same areas, a simplified mobile view will suffice.

I will need to keep in mind that the majority of people are most likely going to use their phones to access the website. I will need to focus on making an excellent mobile experience.

TODOs

I wonder how hard it would be to turn this into a PWA (progressive web app)

Conclusion

The application views are basically complete. It's time to get started with building the MVP.

Project Skill Tree: Student View of App Page Part 1

tieje — Tue, 08 Mar 2022 17:28:23 +0000

Introduction
Features
TODOs
Conclusion

Introduction

Today, I designed the student view of the main application in Figma. The background placeholder is the skill tree from Super Smash Bros. Ultimate.

Features

NavBar
- Logo
  - Goes to home page
- Search Bar
  - Search for topic node
- Settings Button
  - Opens Student profile settings and viewing settings
SideBar
- Sidebar size must be adjustable.
- Topic Title
- Markdown document
  - Teacher's notes, links, and images written in markdown
- Edit Feedback button
  - Open the Feedback form
Response Pop-Up
- Rating Multiple choice
  - Required
  - Rate from "not well at all" to "very well" how well you feel like you understand a topic
- Written Feedback Form
  - Optional
  - Can explicitly tell the instructor how you're feeling about this topic
- Done Button
  - Pressing Done button causes the feedback form to hide

TODOs

Come up with a color schema.
- I should come up with several color schemas for the UI and leave that choice up to the user.
Think of how you're going to procedurally create the skill tree.
Think of how you're going to implement user view-navigation on the skill tree.
Think of the final visual design of the skill trees. I'm thinking of copying Skyrim.
Think of node icon defaults
Think of background image defaults. This will be the background beneath the skill tree.

Conclusion

It's a good start. I drew a lot of inspiration from the Figma UI itself, which I thought was funny. Using markdown for the instructor notes was inspired by my time writing posts at dev.to. Markdown has the benefit of being useful whether teachers take advantage of its features or not.
I will be building the teacher view next. It should be as close to the student view as possible.

DEV Community: tieje

How to Get the URL for Pictures

Skill Tree Update 4/11/2022

Contents

Introduction

Two Steps Forward One Step Back

Work and Life Balance with Weekend Wednesdays

Conclusion

How to Delete a Table from a Database in Django

Solution Link

Solution

Background

Solutions to Additional Database Problems in Django

Skill Tree Update 4/4/2022

Content

Introduction

Building the Static UI

Building the Backend Core in a Single Weekend

Adding Statefulness with Redux Toolkit

How I Approach My Work Now

Conclusion

How to Create Nested JSON in Django REST APIs

Content

Introduction

My Code as an Example

Resulting JSON

Helpful Links Section

Stack Overflow link that helped me

Django REST Framework documentation on serializers

How to Install psycopg2 on an M1 Mac

TL;DR: The Solution

Contents

Introduction

The Solution

Optional Steps

Avoid These Potential Solutions

Workarounds

Conclusion

How to Listen to Events in ReactJS

TL;DR

Contents

Introduction

How It Works

Conclusion

I wasted two days jerry-rigging a package when the solution was one search away

Mission Statement

Contents

Introduction

How to Look for Solutions

Lessons Learned

Conclusion

Project Skill Tree: "Studying" Forem's Open Source Code for Markdown Features

Context

Content

Introduction

Looking for the Forem Markdown Editing Feature

Problems with Option 1

Problems with Option 2

Problems with Option 3

What choice would you make?

The Answer is...

Secret Option 4 None of the Above

Conclusion

Project Skill Tree: Designing the Technical Frontend Part 1

Mission Statement

Contents

Introduction

Two Separate Frontend App Layers

Template

Overlay UI Component Layer Features and Implementation

Skill Tree Background Layer Features and Implementation

Background Image Layer

Node and Line Building

Conclusion

Project Skill Tree: Desktop and Mobile App View

Contents

Disclaimer

Introduction

Design Decisions

TODOs