fullstack-development · Nikita-Zaitsev-ML · Feb 27, 2025 · Feb 28, 2025 · Feb 28, 2025 · Feb 28, 2025
diff --git a/frontend/junior-1/css.md b/frontend/junior-1/css.md
@@ -83,6 +83,7 @@
       * `transition-duration`
       * `transition-property`
       * `transition-timing-function`
+      * `transition-behavior`
     * Можно ли задать несколько анимаций для элемента?
   * Трансформации
     * Что делает свойство `transform`? Какие значения ему можно задавать?
@@ -95,7 +96,7 @@
   * Как пользоваться `vh`, `vw`, `vmin`, `vmax`?
 * Что делает свойство `object-fit`?
 * Что делает свойство `aspect-ratio`?
-* Как стилизовать чекбокс?
+* Как стилизовать чекбокс(практика)?
 * Как прижать футер к низу страницы (назвать хотя бы два способа)?
 * Как отцентровать элемент по горизонтали (назвать хотя бы три способа)?
 * Как отцентровать элемент по вертикали (назвать хотя бы три способа)?

diff --git a/frontend/junior-1/html.md b/frontend/junior-1/html.md
@@ -36,7 +36,7 @@
   * Как препроцессоры помогают избежать боли с дублированием названий в коде?
   * Какие альтернативы есть БЭМ и в чем сила/слабость каждого? Знать хотя бы 2 альтернативы данному подходу, плюсы/минусы подходов.
   * Что такое миксы в БЭМе и какие особенности работы с ними есть?
-  * Как бы отрефакторили данный код:
+  * Как бы отрефакторили данный код(практика):
     ```html
     <header class="header">
         <img class="logo">

diff --git a/frontend/junior-1/js.md b/frontend/junior-1/js.md
@@ -85,7 +85,7 @@
 * Как получить все аргументы функции (включая те, что не объявлены, но все-таки были переданы)?
 * Что такое рекурсия? Когда удобно её использовать?
 * Что такое замыкания, и в каких случаях они могут быть полезны? Как сохранить состояние с помощью замыкания, и для чего это состояние может быть использовано?
-* Как реализовать функцию `bind`?
+* Как реализовать функцию `bind`(практика)?
 * Решить такую вот проблему: пускай у нас есть массив ссылок, и наша задача — сделать так, чтобы при клике на каждую выводился `alert`ом ее порядковый номер. Первое решение, что приходит в голову, выглядит так:
   ```javascript
   for (var i = 0; i < links.length; i++) {
@@ -94,7 +94,7 @@
      }
   }
   ```
-  На деле же оказывается, что при клике на любую ссылку выводится одно и то же число — значение `links.length`. Почему так происходит и как эту гадость исправить?
+  На деле же оказывается, что при клике на любую ссылку выводится одно и то же число — значение `links.length`. Почему так происходит и как эту гадость исправить(практика)?
 * Что такое callback (функция обратного вызова)? Когда они обычно применяются?
 * Что такое каррирование?
 * Что такое частичное применение?
@@ -120,7 +120,7 @@
 * Как создать объект, который ни от чего не наследуется?
 * Какие 3 (как минимум) способа есть отнаследоваться в JavaScript-е? В чем отличия и нюансы?
 * Как объявить приватное поле класса в JS?
-* Как в переопределенном методе у наследующего класса вызвать переопределяемый метод родительского?
+* Как в переопределенном методе у наследующего класса вызвать переопределяемый метод родительского(практика)?
   Пример псевдокода:
   ```javascript
   class Person

diff --git a/frontend/junior-1/react.md b/frontend/junior-1/react.md
@@ -4,11 +4,12 @@
 * Что такое декларативное UI программирование? Чем оно отличается от императивного подхода?
 * Что такое React Element? Как его можно создать? Из чего он состоит?
   * Что будет, если передать булевые, `null` или `undefined` значения в children?
+  * В чем разница между `ReactElement`, `JSX.Element`, `ReactNode`? Какой тип выбрать для типизации значения на рендер?
 * Что такое React Component?
 * Что такое JSX и зачем он нужен?
   * Почему атрибуты в JSX пишутся, используя camelCase (например, `tabIndex`, а не `tab-index`)? Почему `className`, а не `class`?
   * Почему название компоненты, которая используется в JSX, нужно писать с большой буквы?
-  * Написать аналог с `React.createElement`:
+  * Написать аналог с `React.createElement`(практика):
     ```javascript
     <OuterComponent color="black" disabled>
       <InnerComponent hidden={false} />
@@ -50,7 +51,23 @@
   * Что это такое? Зачем нужны? Как их использовать?
   * Как и для чего использовать хуки `useRef` и `useImperativeHandle`?
   * Что делает и зачем нужен метод `React.forwardRef`?
-  * Вам необходимо передать ref в каждый элемент списка, но вы не знаете заранее сколько элементов в этом списке может быть. Как поступить в таком случае?
+  * Вам необходимо передать ref в каждый элемент списка, но вы не знаете заранее сколько элементов в этом списке может быть. Как поступить в таком случае(практика)?
+
+    <details>
+      <summary>Подробности:</summary>
+
+      ```jsx
+      <ul>
+        {items.map((item) => {
+          // Doesn't work!
+          const ref = useRef(null);
+          return <li ref={ref} />;
+        })}
+      </ul>
+      ```
+
+    </details>
+
   * Почему refs стоит использовать умеренно?
 
 ### Ресурсы

diff --git a/frontend/junior-2/html.md b/frontend/junior-2/html.md
@@ -29,7 +29,7 @@
 * Тег `<textarea>`
   * Как запретить изменение размера?
   * Как задать значение по умолчанию?
-  * Как сделать так, чтобы высота `<textarea>` подстраивалась под содержимое (не появлялась полоса прокрутки)?
+  * Как сделать так, чтобы высота `<textarea>` подстраивалась под содержимое, - чтобы не появлялась полоса прокрутки(практика)?
   * Какие есть html-pure альтернативы?
   * В чем разница задания размеров через `cols` & `rows` и `height` & `width`?
 

diff --git a/frontend/junior-2/js.md b/frontend/junior-2/js.md
@@ -5,14 +5,14 @@
 + Что такое геттеры и сеттеры? Как ими пользоваться в JS нативным способом?
 + Дескрипторы свойств объектов: что такое и что позволяют делать?
 + Приведение объектов к примитивам: когда происходит и как работает?
-  + Как сделать так, чтобы было возможно сложение двух объектов?
+  + Как сделать так, чтобы было возможно сложение двух объектов(практика)?
     ```javascript
     const a = { x: 3 };
     const b = { x: 5 };
     ...
     console.log(a + b); // 8
     ```
-  + Как сделать так, чтобы следующее выражение вернуло `true`?
+  + Как сделать так, чтобы следующее выражение вернуло `true`(практика)?
     ```javascript
     (c==1 && c==2 && c==3)
     ```

diff --git a/frontend/junior-2/react.md b/frontend/junior-2/react.md
@@ -23,7 +23,7 @@
       );
     }
     ```
-  * Как сделать так, что бы все 5 раз вывелось последнее значение, то есть цифра 5?
+  * Как сделать так, что бы все 5 раз вывелось последнее значение, то есть цифра 5(практика)?
   * Что выведется в консоли для следующего кода, если несколько раз быстро нажать на кнопку?
     ```javascript
     function Example() {

diff --git a/frontend/junior-2/ts.md b/frontend/junior-2/ts.md
@@ -61,7 +61,7 @@
   * Как ограничить возможные значения переменной типа?
   * Как ограничить возможные значения переменной типа значениями другой переменной типа?
   * Можно ли для переменной типа указать значение по умолчанию?
-  * Исправьте типизацию функции `filterBy` таким образом, чтобы она:
+  * Исправьте типизацию функции `filterBy` таким образом, чтобы она(практика):
       1. первым аргументом принимала массив любых объектов;
       1. вторым – имя поля, по которому производится фильтрация;
       1. третьим – значение, которое должно содержать поле;
@@ -98,7 +98,7 @@
       filterBy(employees, 'position', 'Tester'); // ошибка, поле 'position' не может содержать значение 'Tester',
       ```
     </details>
-  * Типизируйте класс `List` так, чтобы:
+  * Типизируйте класс `List` так, чтобы(практика):
     1. Конструктор класса принимал массив объектов с обязательным полем `id`;
     1. Метод `addItem` позволял добавить только объект с типом аргумента конструктора;
     1. Метод `getList` возвращал массив объектов с типом аргумента конструктора;
@@ -212,7 +212,7 @@
   * Что такое Discriminated union?
     * Каким может быть тип дискриминанта?
     * Можно ли использовать проверку по дискриминанту в качестве Type Guard?
-    * Что такое exhaustiveness checking? Зачем это нужно? Как этого добиться?
+    * Что такое exhaustiveness checking? Зачем это нужно? Как этого добиться(практика)?
 
 ### Ресурсы
 

diff --git a/frontend/junior-3/api.md b/frontend/junior-3/api.md
@@ -14,5 +14,5 @@
 * [JSON API – работаем по спецификации](https://habr.com/ru/companies/oleg-bunin/articles/433322/)
 * [JSON API Specification](http://jsonapi.org/format/)
 * [JSON RPC Specification](https://www.jsonrpc.org/specification)
-* [GraphQL Specification](https://facebook.github.io/graphql/)
+* [GraphQL Specification](https://spec.graphql.org/)
 * [Introduction to GraphQL](https://graphql.org/learn/)
diff --git a/frontend/junior-3/css.md b/frontend/junior-3/css.md
@@ -19,7 +19,7 @@
 
 * Как работает `calc()`? Какие параметры принимает? Какие операции допустимы? В каких единицах измерения можно задавать значения параметров?
 * Как работают функции `min(), max(), clamp()`?
-* Как реализовать треугольник на чистом CSS?
+* Как реализовать треугольник на чистом CSS(практика)?
 * Как работает `@import`? Почему не стоит использовать `@import` для загрузки стилей в документ?
 
    ```html

diff --git a/frontend/junior-3/data.md b/frontend/junior-3/data.md
@@ -3,7 +3,7 @@
 * Что такое `Symbol`? Какие примеры использования есть?
 * В чем отличия между массивами и массивоподобными объектами? Привести примеры массивоподобных объектов.
 * Деструктуризация
-  * Переименование свойств (например, как положить значение свойства `foo` объекта `{ foo: 'foo', ... }` в переменную `bar`), дефолтные параметры, вложенные дефолты.
+  * Переименование свойств (например, как положить значение свойства `foo` объекта `{ foo: 'foo', ... }` в переменную `bar`), дефолтные параметры, вложенные дефолты(практика).
   * Какие значения примут переменные `a` и `b` в каждом случае?
     ```javascript
       function f({ a, b = 0 } = { a: '' }) {

diff --git a/frontend/junior-3/js.md b/frontend/junior-3/js.md
@@ -34,9 +34,36 @@
   * Можно ли дать группе имя? Когда это может быть полезно?
   * Как использовать значение группы в новой подстроке в методе replace?
 * Как работают опережающие и ретроспективные проверки?
-* Решить задачи:
+* Решить задачи(практика):
   * Написать регулярное выражение по переводу Function Expression в Function Declaration.
+    <details>
+      <summary>Подробности:</summary>
+
+      ```js
+      console.log(toFunctionDeclaration('const sayHi = function (who) { alert(`Hello, ${who}`); }')) // function sayHi(who) { alert(`Hello, ${who}`); }
+
+      function toFunctionDeclaration(functionExpression:string){
+        return
+      }
+      ```
+
+    </details>
+
   * Написать регулярное выражение по переводу Function Declaration в Function Expression.
+
+    <details>
+      <summary>Подробности:</summary>
+
+      ```js
+      console.log(toFunctionExpression('function sayHi(who) { alert(`Hello, ${who}`); }')) // const sayHi = function (who) { alert(`Hello, ${who}`); }
+
+      function toFunctionExpression(functionDeclaration:string){
+        return
+      }
+      ```
+
+    </details>
+
   * Написать регулярное выражение для поиска всех команд Телеграма в сообщении (примеры: `/help`, `/start`, `/active_orders`, `/order123`). Учесть, что команд в подстроке может быть несколько.
 
 ## Итераторы и генераторы

diff --git a/frontend/junior-3/react.md b/frontend/junior-3/react.md
@@ -2,7 +2,7 @@
 
 * Reconciliation
   * Что такое? Какую функцию выполняет?
-  * Каким образом reconciliation алгоритм использует тип элемента (что происходит, если тип изменился, не изменился и т.д.)?
+  * Что для reconciliation алгоритма является типом элемента? Каким образом reconciliation алгоритм использует тип элемента (что происходит, если тип изменился, не изменился и т.д.)?
     * Являются ли следующие два примера эквивалентными? Почему?
 
       <details>
@@ -187,6 +187,7 @@
   * Что такое windowing или virtualizing списков?
 * Synthetic Events
   * Что такое и зачем нужны?
+  * Какие всплывают? Какие есть особенности всплытия у разных типов событий?
   * Пусть на какое-то событие на `<input />` назначено 2 обработчика: один через атрибут `on...`, а другой через `addEventListener`.
     * В чем разница между добавлением обработчиков первым и вторым способом?
     * В каком порядке могут выполняться обработчики? От чего это зависит?

diff --git a/frontend/junior-3/security.md b/frontend/junior-3/security.md
@@ -1,6 +1,11 @@
 # Безопасность
 
 * Атаки
+  * Supply chain attacks
+    * Что такое?
+    * Как работает?
+    * Из-за чего чаще всего происходит?
+    * Какие есть способы предотвратить (необязательно перечислять все)?
   * XSS (Cross-site scripting)
     * Что такое?
     * Как работает?
@@ -25,6 +30,7 @@
 
 ### Ресурсы
 
+* [Supply chain attacks](https://nodejs.org/en/learn/getting-started/security-best-practices#supply-chain-attacks)
 * [Основы XSS](https://hackware.ru/?p=1174)
 * [XSS](https://portswigger.net/web-security/cross-site-scripting)
 * [XSS Game](https://xss-game.appspot.com/level1)