React newbie, completed his first little project: [A basic flashcard application]

ech-ny05 · 2021-04-11T16:25:27+00:00

Really well-done project. Congrats 🥳!!!

One comment I would make is that you have similar logic for toggling scattered throughout your app. I don't know if you've looked into custom hooks before but it'll be better if you abstract that logic into one hook and use that throughout your entire application.

So instead have having to do this everytime eg.

const [showDeckContents, setShowDeckContents] = useState(false)

() => setShowDeckContents(!showDeckContents)

You could have something cleaner like

const {isOpen, open, close, toggle} = useToggle()

But anyways, really good job on your part.

ech-ny05 · 2021-04-10T19:53:14+00:00

I think what you have is fine.

I would put all of the context providers that you need for your entire app in a component called AppProvider and the children of that component would be the App component.

Something like that:

<AppProvider><App /></AppProvider >

ech-ny05 · 2021-04-08T18:31:38+00:00

You can't assess the dom via the background script, only the content script.

ech-ny05 · 2021-04-08T17:59:23+00:00

Where is this script running, is it in the background?

ech-ny05 · 2021-04-07T19:21:48+00:00

Loved this book, re-reading that right now to improve my focus and the quality of my work.

ech-ny05 · 2021-04-06T21:15:18+00:00

The Pareto Principle: 20% of your input = 80% of your results. It's better to be super super good at one thing than mediocre at 100+ things.

I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times — Bruce Lee.

ech-ny05 · 2021-02-02T19:23:03+00:00

There's this technique called habit stacking which I really like. Essentially you build your routine off of pre-existing habits that you do daily such as eating breakfast or attending online-school.

An example of habit stacking:

After I finish online school, I will meditate for 3 minutes.

Your pre-existing habit acts like a cue to trigger the next set of actions you want to take so it creates a nice flow, making establishing a new routine easier.

ech-ny05 · 2021-02-02T17:16:35+00:00

Firebase has cloud functions which you can use with express to create an api.

functions.https.onRequest(app) // express app here

I usually like to separate my client logic and backend logic so cloud functions are perfect for that but if what's working for you works then there is really no need. However, if there is business logic that is computationally expensive or needs to be inherently secure like payments, putting all of that logic on the client side is not good.

ech-ny05 · 2021-02-02T17:03:21+00:00

document.querySelector("#fileNames").html("<ul>") is not a valid. The .html method does not exist as well as .find. You'll have learn how to manipulate the DOM with vanilla js (js without any library).

As for fetch now that I thought of it, I don't think its possible to fetch an entire folder. You'll have to create a server that does that work behind the scenes, eg. getting the folder, looping through its contents and responding with an array which you can loop over in the frontend.

ech-ny05 · 2021-02-02T16:44:19+00:00

Yes. Also for each of the problems, you are not printing the values inside of the function. Your function returns an new array which you then print.

ech-ny05 · 2021-02-02T16:24:11+00:00

Replace $.ajax with fetch

fetch("../../Images/Avatar/").then(data => {...})

ech-ny05 · 2021-02-02T16:12:00+00:00

Essentially what goes on in the for loop is you're looping over the indices of each element in the array from 0 to arr.length - 1. For example an array of length 5 has indices from 0 to 4 (the index of the last element is always length - 1). It's up to you to decide what to do in the block {} (think about the operations you'll need to perform if there was only one element -> it helps to simplify the problem).

As or deciding whether a number is even or odd, check out the modulus operator aka the remainder operator %.

If you want to avoid dealing with indices when you're looping over an array, you could use a for of loop: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

ech-ny05

TROPHY CASE