👁‍🗨 CODORUM

componentDidMount – это метод жизненного цикла в компонентах React, срабатывающий сразу после добавления какого-либо компонента (в который был добавлен метод) на страницу (или в DOM) ⚛️ То есть код внутри метода не срабатывает при полном запуске и работе React проекта, а только после встраивания компонента на страницу, в следствие выполнения какого-то действия пользователем, например 🏌️‍♂️ В примере на скрине: когда выбирается категория "Одежда", компонент Clothes добавляется на страницу, и вызывается componentDidMount 👁‍🗨 👉 На практике метод используется для: ➖ загрузки данных с сервера ➖ настройки подписок или таймеров ➖ выполнения действий, требующих доступа к DOM

at-правилa (At-rules) – это CSS правила, определяющие специальные инструкции для обработки стилей, производят изменения в различных аспектах CSS или вводят определенные функциональности 🛃 В видео мы рассмотрели как реализовать анимацию переливания градиента фона текста в CSS, задав правило поведения свойства background-position в @keyframes и задав определенное значение в свойстве animation класса текста 👁‍🗨 Код из видео:

.gradientText {
  background: linear-gradient(to right, #b685ff, #85ebff, #85ffde, #85aeff, #b685ff);
  background-clip: text;
  color: transparent;
  background-size: 200%;
  animation: gradientAnimation 3s linear infinite;
}

@keyframes gradientAnimation {
  0% { background-position: 200% 50%; }
  100% { background-position: 0% 50%; }
}

Рассмотрим тип объекта Function в JavaScript ⚜️ Function – это тип объекта, который используется для определения и вызова функций 💡 Определить функцию можно с помощью выражения и с помощью конструктора 👁‍🗨 👉 Некоторые тонкости типа объектов Function: ➖ функции могут принимать аргументы и их параметры через список аргументов ➖ функции можно вызвать с помощью оператора вызова ➖ объект Function позволяет использовать замыкание для сохранения доступа к переменным с более высокого уровня

Scope – это область видимости для переменных и функций 🔳 Есть три типа Scope: глобальный Scope, локальный (функциональный) и блочный ℹ️  Переменные объявленные на уровень выше будут видны также в скоупе на уровень ниже. То есть, например, переменная "a" с кода на гиф изображении будет доступна в локальном скоупе (области видимости функции Local), но переменная "b", которая объявлена внутри скоупа функции не будет видна в глобальном скоуп 👁‍🗨 Границы скоуп уровней определяются фигурными скобками. И, обычно, в редакторах кода можно увидеть характерную вертикальную линию, которая подсказывает границы внутренних Scope ☑️

Благодаря методу endsWith можно проверить заканчивается ли строка на заданную букву в JavaScript ✏ Применение стандартное: указываем строку и метод endsWith через точку, затем букву в скобках, наличие которой необходимо проверить в конце строки 🔦 Метод возвращает boolean значения true / false в зависимости от результата 🚥 Стоит учитывать регистр, в которой находится буква, которую мы проверяем. Если буква будет правильной, но регистр будет неверный - мы получим значение false 👁‍🗨

Как клиент взаимодействует с сервером с помощью JavaScript 🟨 Запрос от клиента 📨 Когда пользователь нажимает кнопку или выполняет какое-либо действие на веб-странице, браузер (клиент) отправляет запрос на сервер. Это может быть HTTP-запрос, например GET или POST. Обработка на сервере ⚙️ Сервер получает запрос и выполняет необходимые действия: может обратиться в базу данных, обработать данные или выполнить другие операции. После этого сервер формирует ответ. Ответ от сервера 📥 Сервер отправляет ответ к клиенту. Это может быть HTML-страница, JSON-данные или другой тип данных. Обработка ответа в клиенте 🔄 Клиент получает ответ и с помощью JavaScript может обновить пользовательский интерфейс. К примеру, отобразить новые данные без перезагрузки страницы. В видео мы рассмотрели пример запроса с помощью Fetch API 👁‍🗨

Как можно добавить тень от элемента по контуру в CSS? 🔵🕳 Если использовать стандартное свойство для тени box-shadow будет добавлена тень от блока/контейнера/зоны элемента, но благодаря свойству filter со значением drop-shadow можно добиться тени именно по контуру объекта, будь-то неквадратное изображение или текст 🧩 Применяется свойство filter со значением drop-shadow почти так же как и свойство box-shadow, а разница очевидна (пример применения обоих свойств на скрине) 👁‍🗨

Классы в JavaScript могут быть определены в стандартном виде и в расширенном виде. Класс с расширением – это класс, который при объявлении наследует какой-то другой класс с помощью ключевого слова extends 👯‍♀️ Можно наследовать как какой-то встроенный тип класса, так и конкретный объявленный класс  🤝 👉 На скрине продемонстрировано: ➖ наследование стандартного класса Array классом MyArray, вследствие чего класс MyArray может иметь перечесть элементов ➖ наследование кастомного класса Animal классом Dog. Теперь класс Dog также имеет конструктор со свойством объекта "this.name", как класс Animal Код со скрина:

// Наследование типа класса (типы встроенных классов: Array, Date, String...)

class MyArray extends Array {
  constructor(...elements) {
      super(...elements);
  }

  getFirst() {
      return this[0];
  }
}



// Наследование конкретного класса созданного нами

class Animal {
  constructor(name) {
      this.name = name;
  }
}

class Dog extends Animal {}

forEach – метод, позволяющий пошагово перебирать все элементы массива. Метод в параметре получает функцию, которая выполнится для каждого элемента массива 👟 С помощью этого метода можно, к примеру, отображать индексы элементов массива, выполнять математические операции, то есть применять функции к каждому элементу поочередно 👁‍🗨

Несколько цифр про Cookie 🍪 Cookie – это небольшой фрагмент данных, сохраняющийся на компьютере пользователя посещаемыми пользователем веб-сайтами 🌐 🔸 Максимальный размер одного файла cookie составляет 4096 байтов. Грубо говоря, в один такой файл уместится информация в виде текста размером до 4096 символов латиницы. То есть до 4096 однобайтовых символов 🔸 Максимальное количество cookie-файлов на один домен обычно 50 🔸 А среднее максимальное количество cookie, которые могут храниться браузером около 3000

Скоупинг – комплексное понятие, охватывающее несколько аспектов, направленных на правильное управление переменными и функциями кода. Для избежания конфликтов и обеспечения прозрачного и безопасного взаимодействия элементов программы 🧿 Основные аспекты скоупинга это: Объявление переменных, Объем видимости, Жизненный цикл, Поднятие, Замыкание 🔹 Рассмотрим аспект – объявление переменных ⏺ Важно на разных уровнях скоупа использовать разные ключевые слова для объявления переменных (в случае кода на скрине лучше через let). Чтобы переменная из блока if не стала глобальной и не стала причиной возможного конфликта с другими переменными на других Scope уровнях 👁‍🗨

Меню из блоков с помощью html-элемента <input> и хука useState в React ⚛️ 👉 Блок состоит из связки двух html-элементов: ➖ <input> c уникальным значением value для каждого блока ➖ <label> с наполнением блока Хук useState сохраняет состояние выбранного блока 🔘 Код:

const Component = () => {
    const [selected, setSelect] = useState('');

    const ChangeSelect = (event) => {
      setSelect(event.target.value);
    };

    return (
      <div class="main">
        <input type="radio" id="b1" value="b1"
        checked={selected === 'b1'} onChange={ChangeSelect}/>
        <label htmlFor="b1" class='block'>1 блок</label>

        <input type="radio" id="b2" value="b2"
        checked={selected === 'b2'} onChange={ChangeSelect}/>
        <label htmlFor="b2" class="block">2 блок</label>

        <input type="radio" id="b3" value="b3"
        checked={selected === 'b3'} onChange={ChangeSelect}/>
        <label htmlFor="b3" class="block">3 блок</label>
      </div>
    );
};

export default Component;

Благодаря методу freeze можно заморозить объект в JavaScript 🧊 То есть запретить добавление, удаление и изменение свойств в объекте, а также изменение конфигурационных атрибутов свойств, таких как writable, enumerable, configurable 🚫 👉 Метод можно использовать в целях: ➖ защиты конфигурационного объекта от изменений ➖ поддержания состояний неизменными в Redux или другой системе управления состоянием ➖ создания "неизменного" API и многих других 👁‍🗨

Рассмотрим тип объекта Object в JavaScript ⚜️ Объекты с типом Object используется для хранения свойств, методов и других вложенных объектов 🗄 На примере кода со скрина есть объект типа Object под названием person 👤 👉 У объекта person есть: ➖ свойства name и age ➖ вложенный объект address ➖ метод speak, который выводит текст в консоль 👉 Что можно делать с объектом person: ➖ обращаться к свойствам (используя название объекта и название свойства "person.name") ➖ вызывать методы (используя название объекта и название метода "person.speak()")