diff --git a/.obsidian/plugins/obsidian-excalidraw-plugin/data.json b/.obsidian/plugins/obsidian-excalidraw-plugin/data.json
index 5101d88..a48c23b 100644
--- a/.obsidian/plugins/obsidian-excalidraw-plugin/data.json
+++ b/.obsidian/plugins/obsidian-excalidraw-plugin/data.json
@@ -71,7 +71,7 @@
"library2": {
"type": "excalidrawlib",
"version": 2,
- "source": "https://github.com/zsviczian/obsidian-excalidraw-plugin/releases/tag/1.9.14",
+ "source": "https://github.com/zsviczian/obsidian-excalidraw-plugin/releases/tag/1.9.19",
"libraryItems": []
},
"imageElementNotice": true,
diff --git a/.obsidian/plugins/obsidian-omnivore/data.json b/.obsidian/plugins/obsidian-omnivore/data.json
index 157a486..e30f047 100644
--- a/.obsidian/plugins/obsidian-omnivore/data.json
+++ b/.obsidian/plugins/obsidian-omnivore/data.json
@@ -3,7 +3,7 @@
"dateSavedFormat": "yyyy-MM-dd HH:mm:ss",
"apiKey": "ec3bba50-4770-471b-99b1-9953ca523d8c",
"filter": "HIGHLIGHTS",
- "syncAt": "2023-11-11T10:22:08",
+ "syncAt": "2023-11-12T17:55:46",
"customQuery": "",
"template": "# {{{title}}}\n\n{{# note }}\n## Notes\n\n{{{ note }}}\n{{/ note }}\n{{#highlights.length}}\n## Highlights\n\n{{#highlights}}\n> [!quote] ㅤ\n> {{{text}}} \n> \n> [source]({{{highlightUrl}}}) {{#labels}} #{{name}} {{/labels}}\n> {{#note}}\n>\n>> [!info] ㅤ\n>> {{{note}}}\n\n{{/note}}\n{{/highlights}}\n{{/highlights.length}}\n\n---\n## Original\n\n{{{ content }}}",
"highlightOrder": "LOCATION",
diff --git a/Read Later/How to Avoid Prop Drilling in React.md b/Read Later/How to Avoid Prop Drilling in React.md
new file mode 100644
index 0000000..6cecddd
--- /dev/null
+++ b/Read Later/How to Avoid Prop Drilling in React.md
@@ -0,0 +1,463 @@
+---
+id: aceac380-7e10-11ee-992a-432064e77190
+title: |
+ How to Avoid Prop Drilling in React
+status: ARCHIVED
+tags:
+ - read-later
+ - RSS
+ - react
+date_added: 2023-11-07 19:58:39
+url_omnivore: |
+ https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2
+url_original: |
+ https://www.freecodecamp.org/news/avoid-prop-drilling-in-react/
+---
+
+# How to Avoid Prop Drilling in React
+
+## Highlights
+
+> [!quote] ㅤ
+> Prop drilling occurs when a parent component generates its state and passes it down as `props` to its children components that do not consume the props – instead, they only pass it down to another component that finally consumes it.
+>
+> [source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#05db3def-4e59-4cfe-b8dd-1044ce91a9d5)
+> > [!quote] ㅤ
+> First of all, **grouping static elements and dependent components** together to achieve an appealing UI design is the major cause of prop drilling. You can't avoid prop drilling when your UI groups static elements and dependent components together in a parent. The parent component clearly won't use the `prop`, as everything within it is a static element – except the component that needs a prop.
+>
+> [source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#fa2c28c0-1b7e-4416-8553-c1b5c7a59637)
+> > [!quote] ㅤ
+> Second of all, when a **component accepts `props` that it doesn't use but merely passes it down to its children**, this is a sign that you have prop drilling in your component:
+>
+> [source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#6749a89e-a38c-4f4f-aa3f-c6455e6daf85)
+> > [!quote] ㅤ
+> Third, when a component that represents an independent section of a page is **forced to take props from its parent**, prop drilling is inevitable. It should ideally be self-contained with its state and operations.
+>
+> [source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#751d81de-62b7-444b-a2f0-a0b374f6ce45)
+> > [!quote] ㅤ
+> And finally, **the presence of elongated `props`** is a sure sign of prop drilling. Since an elongated prop is a fundamental element that's consistently present in every case of prop drilling, grasping this concept allows you to instinctively avoid prop drilling.
+>
+> [source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#90f807ca-03a3-4804-bcf1-c5df4e53a997)
+> > [!quote] ㅤ
+> Component composition is a good approach to fix prop drilling. If you ever find yourself in a situation where a component passes down a prop it neither creates nor consumes, you can use component composition to fix it.
+>
+> [source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#0112181f-34b7-4ca3-b941-f1c16303c6c0)
+> > [!quote] ㅤ
+> To avoid prop drilling in this case, any grandchildren components that require access to the same `props`, especially when their parent don't consume the data, should be passed as children ensuring that the data remains within the `App` context.
+>
+> [source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#c17f1d4e-8f5c-45d1-9078-fe8ab740e11e)
+> > [!quote] ㅤ
+> Prop drilling can also be fixed by moving state to where it is consumed. The example of prop drilling in this article has a component named `Content`. But the component is forced to receive a `prop` from its parent instead of having a state and be an independent component – and so we have prop drilling.
+>
+> [source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#9f94fd13-9558-4bd3-a60c-60074b3495d2)
+> > [!quote] ㅤ
+> It's essential to highlight what to avoid when dealing with prop drilling to prevent unnecessary challenges.
+>
+> * **Avoid React Context, if possible, to fix prop drilling.** This approach ties your component to a specific context, restricting its usability outside of that context and hindering composition and reusability.
+> * **Steer clear of redundant components by employing a children-parent replacement approach.** This approach naturally incorporates [component composition](https://www.codementor.io/@dinerismail/the-power-of-component-composition-in-react-21goassg4m) without introducing redundant components or states when resolving prop drilling.
+>
+> [source](https://omnivore.app/me/how-to-avoid-prop-drilling-in-react-18bae0b4ca2#8ff7b79b-5503-4e1a-b7fe-1a07a46c578c)
+>
+---
+## Original
+
+
+
+In order to write scalable, reusable, and maintainable applications with React, you'll need to go beyond the surface of using React components, useEffect, useContext, useState, and the like. It involves learning in detail how React works in more depth.
+
+And if you don't properly understand these key React concepts, you can run into various issues, like [prop drilling](https://www.quora.com/What-is-prop-drilling-in-ReactJS).
+
+In this tutorial, you'll learn what prop drilling is. I'll also teach you how to intuitively avoid it without relying on React context. In the end, you'll understand how to identify prop drilling without thinking and fix it with precision.
+
+If you prefer a visual guide, here's a video version of this tutorial on my [YouTube channel](https://youtu.be/KZnQ5R8Kd4I) (approximately 15 minutes).
+
+[](https://www.youtube.com/embed/ELZZnqHJhlw)
+
+## What is Prop Drilling?
+
+==Prop drilling occurs when a parent component generates its state and passes it down as== `==props==` ==to its children components that do not consume the props – instead, they only pass it down to another component that finally consumes it.==
+
+Below is an example of prop drilling in React:
+
+```xquery
+function App() {
+ const [profile, setProfile] = useState({ame: 'John'});
+ return (
+
+
+ );
+}
+
+function Header({ profile }) {
+ return (
+
+ );
+}
+
+function Content({ profile }) {
+ return (
+
+ Content Component
+ {profile.name}
+
+ );
+}
+
+export default App;
+```
+
+If you check out the example above, you'll notice that `profile` is passed from the `App` component through the `Header` to the `Content` component, which eventually makes use of the `props`. This is commonly referred to as prop drilling as the `Header` component doesn't consume the `prop` but only passes it down to the `Content` component that finally consumes it.
+
+Now that you understand what prop drilling is, the next challenge is to figure out how to avoid it because it's not always an intuitive process.
+
+You'll need to start exploring methods to address it. While you can use component composition and React context to resolve it, the challenge lies in not always recognizing the issue until later.
+
+To truly master the art of handling prop drilling intuitively, you must learn how to identify elongated props and contexts.
+
+## What is an Elongated Prop?
+
+
+
+Photo by [Emily Morter](https://unsplash.com/@emilymorter?utm%5Fsource=ghost&utm%5Fmedium=referral&utm%5Fcampaign=api-credit) / [Unsplash](https://unsplash.com/?utm%5Fsource=ghost&utm%5Fmedium=referral&utm%5Fcampaign=api-credit)
+
+An elongated prop is a `prop` that is not consumed but it is only passed down to another component. When a component receives a `prop` from its parent and doesn't consume the `prop`, it passes the prop down to another component. This prop is called elongated prop because it has been extended.
+
+Whenever you see a `prop` being passed down by components that neither creates nor consumes the `prop`, you have an an elongated prop (as well as prop drilling) in your code. The code snippet below is an example:
+
+```javascript
+function Profile({ user }) {
+ return (
+
+ );
+}
+```
+
+`user`, in this example, is an elongated `prop` as it is neither created nor consumed by the `Profile` component. Instead, it is only passed down to the `Content` component. And that means we have extended `user` through a component that doesn't need it so that it can get to the one that does.
+
+Now, let's revisit the example we used to illustrate prop drilling. Wait, are you thinking what I'm thinking? The `prop` that's being passed down in the prop drilling example is indeed an elongated prop, right? Yes, you've got it.
+
+```xquery
+function App() {
+ const [profile, setProfile] = useState({ame: 'John'});
+ return (
+
+
+
+ );
+}
+
+function Header({ profile }) {
+ return (
+
+ );
+}
+
+function Content({ profile }) {
+ return (
+
+ Content Component
+ {profile.name}
+
+ );
+}
+
+export default App;
+```
+
+In the code above, you can observe that the `prop` passed to `Header` is created in the `App` component. Then, `Header` passes it down to its child component named `Content`. As a result, the `profile` being passed down can be considered elongated because it is passed through a component (`Header`) that neither creates nor consumes it down to the one that does.
+
+The `Header` component passing down the `prop` it doesn't create or need is unnecessarily stretching the context of the `prop`.
+
+Now, the question is, how do elongated props help to intuitively avoid prop drilling in React? They make it easy for you to spot `props` being used where they're are neither created nor consumed.
+
+Rather than focusing on how to solve prop drilling, elongated props enable you to avoid it. This is because it's intuitive to recognize when a component neither creates nor consumes `props`, and that helps you to know the component is irrelevant.
+
+But before you learn how to quickly avoid prop drilling with your understanding of elongated props, it is important that you know the main causes of prop drilling. Then you'll truly know how to avoid it without thinking about it.
+
+## What Causes Prop Drilling?
+
+
+
+Photo by [Etienne Girardet](https://unsplash.com/@etiennegirardet?utm%5Fsource=ghost&utm%5Fmedium=referral&utm%5Fcampaign=api-credit) / [Unsplash](https://unsplash.com/?utm%5Fsource=ghost&utm%5Fmedium=referral&utm%5Fcampaign=api-credit)
+
+Prop drilling doesn't occur out of thin air. It's a consequence of inadequate component organization, and it is not a React problem. It is a thinking or design problem.
+
+You won't encounter an instance of prop drilling without observing one of the following layout mistakes:
+
+==First of all,== **==grouping static elements and dependent components==** ==together to achieve an appealing UI design is the major cause of prop drilling. You can't avoid prop drilling when your UI groups static elements and dependent components together in a parent. The parent component clearly won't use the== `==prop==`==, as everything within it is a static element – except the component that needs a prop.==
+
+Here's an example:
+
+```javascript
+function Header({ profile }) {
+ return (
+
+ );
+}
+```
+
+In this case, static elements ` and ` are grouped with a dependent component `Content` – and that's why we have prop drilling therein.
+
+Provided that the `Content` component is independent or takes no `props`, it won't need `profile` and there won't be prop drilling in the first place. This is why forcing a component that should be independent to take `props` from its parent is a recipe for prop drilling in React.
+
+==Second of all, when a== **==component accepts== `==props==` ==that it doesn't use but merely passes it down to its children==**==, this is a sign that you have prop drilling in your component:==
+
+```php
+function App () {
+ const [profile, setProfile] = useState({name: "Ayobami"})
+ return (
+ <>
+
+
+ );
+};
+
+function Parent({ profile }) {
+ return (
+
+
+
+
+ );
+};
+```
+
+In this case there is prop drilling because the `Parent` component takes `profile` and it doesn't use it though it passes it down to its children.
+
+==Third, when a component that represents an independent section of a page is== **==forced to take props from its parent==**==, prop drilling is inevitable. It should ideally be self-contained with its state and operations.==
+
+The exception would be if it's intentionally tied to its parent for specific reasons. In such cases, prop drilling becomes a necessary trade-off.
+
+If you revisit the example of prop drilling cited in this article, you will realize it has a prop drilling issue because the `Content` component which could have been an independent component by having a state is forced to receive props from its parent.
+
+==And finally,== **==the presence of elongated== `==props==`** ==is a sure sign of prop drilling. Since an elongated prop is a fundamental element that's consistently present in every case of prop drilling, grasping this concept allows you to instinctively avoid prop drilling.==
+
+When you spot an elongated prop, you can be certain that one of the other three mistakes is also in play. In short, an elongated prop is a prop that is not consumed and is also passed down to another component.
+
+So grouping static elements with dependent components, forcing components to take props, elongated props, and receiving a prop without consuming it are the signs to recognize prop drilling in React.
+
+## How to Fix Prop Drilling with Component Composition
+
+==Component composition is a good approach to fix prop drilling. If you ever find yourself in a situation where a component passes down a prop it neither creates nor consumes, you can use component composition to fix it.==
+
+But to use component composition, you need to understand a component context.
+
+### What is a component context?
+
+The context of a component encompasses everything that is visible within it, including state, props, and children. The following code further illustrates this concept:
+
+```javascript
+function App() {
+ const [profile, setProfile] = useState({name: 'Ayobami'});
+ return (
+
+
+
+ );
+}
+
+export default App;
+```
+
+In this scenario, the context of `App` refers to everything we can see within the `App` component – including the `profile` prop, the `Header`, and other `App` content. Therefore, any data created in the `App` component should ideally be utilized within the `App` component itself, either as its own data or as `props` to its children.
+
+Prop drilling always emerges when the children receiving the `props` doesn't consume it but only passes it down to its children.
+
+==To avoid prop drilling in this case, any grandchildren components that require access to the same== `==props==`==, especially when their parent don't consume the data, should be passed as children ensuring that the data remains within the== `==App==` ==context.==
+
+```javascript
+export function App() {
+ const [profile, setProfile] = useState({name: 'Ayobami'});
+ return (
+
+
+
+ );
+}
+```
+
+**`Or`**
+
+```javascript
+export function App() {
+ const [profile, setProfile] = useState({name: 'Ayobami'});
+ return (
+
+ } >
+
+ );
+}
+```
+
+As you can see, we have resolved the prop drilling issue in the previous example, even though we still have a redundant component, ``, right? We've successfully addressed prop drilling through component composition.
+
+This process is quite straightforward because we concentrate on recognizing elongated props and repositioning them within appropriate contexts.
+
+The concept of prop drilling is problem-focused, but prop elongation is solution-driven. When dealing with elongated props, our primary goal is to identify props that are not consumed but only passed down to another components.
+
+## How to Fix Prop Drilling by Moving State to the Consumer
+
+==Prop drilling can also be fixed by moving state to where it is consumed. The example of prop drilling in this article has a component named== `==Content==`==. But the component is forced to receive a== `==prop==` ==from its parent instead of having a state and be an independent component – and so we have prop drilling.==
+
+We can fix the prop drilling in this case by moving the profile state to where it is consumed.
+
+Let's revisit the example:
+
+```xquery
+function App() {
+ const [profile, setProfile] = useState({ame: 'John'});
+ return (
+
+
+
+
+ );
+}
+
+function Header({ profile }) {
+ return (
+
+ );
+}
+
+function Content({ profile }) {
+ return (
+
+ Content Component
+ {profile.name}
+
+ );
+}
+
+export default App;
+```
+
+We can fix prop drilling in this case by moving `profile` to where it is consumed:
+
+```javascript
+function App() {
+ return (
+
+
+
+
+ );
+}
+
+function Header() {
+ return (
+
+ );
+}
+
+function Content({ profile }) {
+ const [profile, setProfile] = useState({ame: 'John'});
+ return (
+
+ Content Component
+ {profile.name}
+
+ );
+}
+```
+
+Now that we have lifted the profile to the `Content` component where it is consumed, the `App` component doesn't have a state, while the `Header` component doesn't receive a prop again as the `Content` component has its state.
+
+But wait! There is a problem. The `Footer` component needs the state we moved away from `App`. There you are! That is the problem with lifting or moving state to where we think it is needed. In this case, if the `Footer` component doesn't need it, we won't have any issue – but `Footer` also needs the prop.
+
+Now that `Footer` needs `profile` as a prop, we need to solve prop drilling with another method.
+
+## How to Fix Prop Drilling with a Children-Replacing-Parent Strategy
+
+Earlier in this article, we talked about how to use component composition and moving state to its consumer to solve prop drilling. But as you saw, they have some issues – duplicated components or states.
+
+But using this children-replacing-parent approach fixes the problem effectively:
+
+****Working but could be better:**
+
+```xquery
+export function App() {
+ const [profile, setProfile] = useState({name: 'Ayobami'});
+ return (
+
+
+
+ );
+}
+
+function Header({ profile }) {
+ return (
+
+ );
+}
+```
+
+The example above shows a solution to the prop drilling example in this article. But as you can see, it has a redundant component, as `Header` does nothing.
+
+**Here's a better version:**
+
+```javascript
+export function App() {
+ const [profile, setProfile] = useState({name: 'Ayobami'});
+ return (
+
+ );
+}
+```
+
+In the above code, we enhance the component composition solution we previously implemented for the prop drilling example by replacing the redundant `Header` component with its content in its parent (`App`).
+
+## What to Avoid
+
+
+
+Photo by [Edwin Hooper](https://unsplash.com/@edwinhooper?utm%5Fsource=ghost&utm%5Fmedium=referral&utm%5Fcampaign=api-credit) / [Unsplash](https://unsplash.com/?utm%5Fsource=ghost&utm%5Fmedium=referral&utm%5Fcampaign=api-credit)
+
+==It's essential to highlight what to avoid when dealing with prop drilling to prevent unnecessary challenges.==
+
+* **==Avoid React Context, if possible, to fix prop drilling.==** ==This approach ties your component to a specific context, restricting its usability outside of that context and hindering composition and reusability.==
+* **==Steer clear of redundant components by employing a children-parent replacement approach.==** ==This approach naturally incorporates== ==[component composition](https://www.codementor.io/@dinerismail/the-power-of-component-composition-in-react-21goassg4m)== ==without introducing redundant components or states when resolving prop drilling.==
+
+By avoiding elongated props, you pave the way for crafting maintainable, high-performing, reusable, and scalable React components. It simplifies the process of lifting states and components by removing the struggle of deciding where to place them.
+
+With your understanding of elongated props, you can confidently position props and components within the right context without undue stress.
+
+In short, you can now discover prop drilling intuitively by paying attention to any component that takes `props` it doesn't consume and only passes it down to another component.
+
+Thanks for reading – cheers!
+
+Hey wait! I am [Ayobami Ogundiran](https://twitter.com/codingnninja) and I am about to start showing how to build your own React, Redux, TypeScript, Zod or Ecommerce websites on my YouTube channel. [Click to subscribe](https://youtube.com/youtoocancode) to stay connected.
+
+---
+
+---
+
+ Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. [Get started](https://www.freecodecamp.org/learn/)
\ No newline at end of file
diff --git a/projects/How to build systems.md b/notes/coping mechanisms/How to build systems.md
similarity index 100%
rename from projects/How to build systems.md
rename to notes/coping mechanisms/How to build systems.md
diff --git a/projects/One Game.md b/projects/One Game.md
deleted file mode 100644
index e69de29..0000000
diff --git a/projects/personal-page-notes/List of Games.md b/projects/personal-page-notes/List of Games.md
index 6e10070..e1c72d2 100644
--- a/projects/personal-page-notes/List of Games.md
+++ b/projects/personal-page-notes/List of Games.md
@@ -5,7 +5,7 @@
- [x] instead of passing a collection of astro, map the collection and create the data how I needed
- This shouldn't add overheat since is done ahead of time??
- [x] Finish pagination
-- [ ] Advance filters
+- [x] Advance filters
- [x] String
- [x] Number (with logic operator)
- [x] Select
@@ -15,7 +15,7 @@
- [x] Add a button in the table doesn't clean the input values, fix this.
- [x] Refactor code organization
- [x] Add comments documentation
-- [ ] Clean & optimize
+- [x] Clean & optimize
- [x] Extract types declaration where they belogns
- -> investigate where??
- Carpeta con definiciones y una archivo para cada cosa (enums, interface, etc)??