From b475b4d770b045108e7551a09434c29a212fa27a Mon Sep 17 00:00:00 2001
From: Alex Illarionov <the.illarionov@gmail.com>
Date: Mon, 27 May 2024 11:43:56 +0900
Subject: [PATCH] change root README

---
 frontend/README.md | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/README.md b/frontend/README.md
index 2fd665d..3eb7e43 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -6,10 +6,16 @@ It's not perfect, but it allows to grow the codebase with minimal cost.
 
 ## General rules
 
-1. Treat every component and page as a standalone project. Try to make them as independent as possible without any external dependencies. Create abstractions only when you need them, don't overengineer ahead of time. Create subcomponents only when you are absolutely sure it's necessary.
+1. Treat every component and page as a standalone project, [domain](https://vueschool.io/articles/vuejs-tutorials/domain-driven-design-with-nuxt-layers/). Try to make them as independent as possible without any external dependencies.
+
+    Store everything related to component inside it's folder (assets, composables, subcomponents etc.).
+
+    Create abstractions only when you need them, don't overengineer ahead of time. Create subcomponents only when you are absolutely sure it's necessary.
 
     Ask yourself: _"Can this component be used in another project as-is? Does it really need to be split into multiple components? Does it really need that dependency?"_.
 
+    [It's a Locality of Behaviour Principle](https://htmx.org/essays/locality-of-behaviour/).
+
 2. Don't hesitate to violate DRY if you feel that it will greatly improve the readability and simplicity of the code.
 
     For example, 3 of your components use small function, but it requires lots of dependencies. It's better to duplicate it and not make it external.
@@ -31,8 +37,8 @@ It's not perfect, but it allows to grow the codebase with minimal cost.
     Bad:
     ```javascript
     function useSomething({ bigObject }) {
-        // using bigObject.property
-        // using bigObject.anotherProperty
+      // using bigObject.property
+      // using bigObject.anotherProperty
     }
 
     useSomething({ bigObject })
@@ -43,13 +49,13 @@ It's not perfect, but it allows to grow the codebase with minimal cost.
     Good:
     ```javascript
     function useSomething({ property, anotherProperty }) {
-        // using property
-        // using anotherProperty
+      // using property
+      // using anotherProperty
     }
 
     useSomething({
-        property: bigObject.property,
-        anotherProperty: bigObject.anotherProperty
+      property: bigObject.property,
+      anotherProperty: bigObject.anotherProperty
     })
     ```
     ```javascript