Промис — это инструмент, позволяющий обрабатывать асинхронные операции, такие как запросы в базу данных и определять условия для решения или отклонения промиса в зависимости от результата операций 🚥

👉 Основные функции промисов:
➖ конструктор Promise для создания нового промиса
➖ метод resolve решающий промис, передавая ему значение результата
➖ метод reject отклоняющий промис, передавая ему значение ошибки
➖ метод then добавляющий обработчик для решения промиса
➖ метод catch добавляющий обработчик для отклонения промиса

✅ Если в следствии выполнения операции внутри промиса мы получаем значение true, которое свидетельствует о выполнении какого-то нашего условия - то срабатывает метод resolve, который передает результат в метод then. С этим результатом мы можем продолжить какие-то дальнейшие операции

❌ Если же получаем false - срабатывает метод reject, передающий значение error в метод catch. Но и с этим значением мы также можем проводить какие-то дальнейшие манипуляции

Идея уникальной стилизации списка. attr функция передаёт атрибуты из html-кода и таким образом можно установить свой эмодзи для каждого пункта списка 🔥

Каждому пункту списка задаём класс (в нашем случае custom-marker), в котором значение свойства content должно быть равно селектору attr, принимающего атрибут (в нашем случае emoji) ℹ

Псевдоэлемент ::marker напрямую не принимает атрибуты, поэтому свойство content внутри оставляем пустым, а уже в отдельном классе custom-marker указываем что свойство content должно отображать наше значение в виде эмодзи через атрибут emoji 👁‍🗨

Код из гиф:

// ✦ index.js

<div class="main">
  <ol>
    <li class="custom-marker" emoji="🔥 ">Первый пункт</li>
    <li class="custom-marker" emoji="💎 ">Второй пункт</li>
    <li class="custom-marker" emoji="⚡ ">Третий пункт</li>
  </ol>
</div>


// ✦ index.css

.main {
  font-size: 12px;
  font-weight: 600;
}

.main ::marker {
  content: "";
}

.main .custom-marker::before {
  content: attr(emoji);
  font-size: 16px;
}

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨

👉 Какие есть способы копирования простого объекта типа obj = {a: 1, b: 2}

Есть несколько популярных способов создать копию объекта:

🔸 Spread-оператор (чаще всего)

const copy = { ...obj };

🔸 Object.assign()

const copy = Object.assign({}, obj);

🔸 structuredClone() (подходит и для глубокого копирования)

const copy = structuredClone(obj);

⚠️ Spread и Object.assign() создают поверхностную (shallow) копию. Если в объекте есть вложенные объекты или массивы, они останутся общими. Если требуется независимая копия вложенных данных, стоит использовать structuredClone()

Ранее был пост про методы Push и Pop, которыми можно добавить элемент в конец массива и удалить последний элемент массива 🟨

Есть аналогичные этим методам методы Shift и Unshift, но:

👉 метод Shift удаляет первый элемент массива
👉 метод Unshift добавляет элемент или элементы в начало массива

Применение методов стандартное: указывается название массива и метод через точку. В скобках к методу Unshift можно указать 1 или несколько элементов через запятую, а скобки к методу Shift оставляем пустые (в любом случае он удалит первый элемент массива, независимо от того что мы там укажем) 👁‍🗨

Рассмотрим тип объекта Date в JavaScript ⚜️

Date – это тип объекта, который позволяет создавать, представлять и взаимодействовать с датами и временем (год, месяц, день, час, минута и другие) ⏰

Существуют методы для получения и изменения даты и времени (детальнее на скрине) ⏲️

Стоит учесть, что отсчёт месяцев начинается с нуля, где январь - 00, февраль - 01 и так далее. Поэтому при выводе месяца можно добавить "+1", чтобы месяц отображался со своим привычным номером 👁‍🗨

console.log(`Сегодня ${day}.${month + 1}, ${year} год`);

Как реализовать анимацию загрузки контента на странице в виде движения линии по блоку с помощью CSS? 🟦

Для этого нужно определить блок в котором будет происходить анимация и прописать для него псевдоэлемент :before, в котором стилизовать линию 📏

Последнее что понадобится создать анимацию в @keyframes ▶️

Код из видео:

// index.js

<div class="block">
  <div class="ava"/>
  <div style={{ display: "block" }}>
    <div class="name"/>
    <div class="description"/>
  </div>
</div>


/* index.css */

.block {
  display: flex;
  justify-content: center;
  align-items: center;
}

.block:before {
  content: '';
  position: absolute;
  height: 300px;
  width: 40px;
  background: #ffffffdd;
  filter: blur(4px);
  transform: rotate(-20deg) translateX(-200px);
  animation: line 1s linear infinite;
}

@keyframes line {
  25% {
    transform: rotate(-20deg) translateX(300px); ;
  }
  100% {
    transform: rotate(-20deg) translateX(300px); ;
  }
}

Если необходимо распаковать элементы массива таким образом, чтобы каждый элемент массива был присвоен новой самостоятельной переменной – можно воспользоваться Rest оператором 📤

➖ Такой подход называется деструктивным присваиванием: объявляем сразу несколько новых переменных (перечислив их в квадратных скобках). Элементы, которые не нужно присваивать отдельным переменным можно объединить в массив указав его название в конце конструкции и Rest оператор перед ним 👁‍🗨

Если необходимо распаковать элементы массива в новый массив – можно воспользоваться Spread оператором. Для этого при объявлении нового массива нужно указать название нового массива в квадратных скобках и Spread оператор перед названием 📥

В React существует множество типов компонентов ⚛

Рассмотрим тип компонента - Компонент класса 👤

Компонент класса – один из основных способов создания компонентов, подход которого основан на классах ES6 и использует расширение от базового класса React Component 👥

Можно передавать данные от одного компонента класса к другому компоненту класса 🤝

На примере кода выше есть класс MyComponent который наследует React Component. В конструкторе определяется исходное состояние компонента, а метод render отвечает за отображение элементов в виртуальном DOM 👁‍🗨

Цикл – это управляющая конструкция, обеспечивающая многократное выполнение блока кода до выполнения заданного условия. Циклы сокращают количество дублирования кода и помогают эффективно работать с данными 🔂

Один из самых распространенных видов циклов – цикл "for" ℹ

В следствие выполнения цикла for на скрине было проведено 3 итераций, на каждой из которых значение переменной "i" увеличивалось на единицу (i++), начиная со значения "i = 0", пока значение переменной не достигло максимального допустимого значения для соблюдения условия цикла и цикл прекратил работу (запуск новых итераций) ✋

На каждой итерации в консоль выводилось новое актуальное значение переменной 👁‍🗨

С помощью метода findLast можно найти последний элемент массива удовлетворяющий определенное условие в JavaScript 🟨

Для этого достаточно задать массив, прописать метод findLast, в скобках которого указать условие для элемента 🔦

Отталкиваясь от этого условия будут поочередно перебираться все элементы с конца массива, пока не будет найден первый с конца массива элемент удовлетворяющий заданное условие 🔬

Когда такой элемент будет найден – он будет выведен в консоль, в случае кода на скрине, и поиск будет остановлен 👁‍🗨

Async await – это функция JavaScript, позволяющая писать асинхронный код с чистой и понятной синтаксической структурой. Слово async определяет асинхронную функцию, а слово await указывает на ожидание выполнения асинхронной операции 🔀

Если простыми словами, то основная функция отмечена ключевым словом async, которая возвращает какой-то объект Promise. А ключевое слово await используется внутри этой функции (функции async) для ожидания результатов выполнения Promise 🎎

В видео мы рассмотрели пример с функцией async await по вычислению количества процентов числа "b" от числа "a". Часть функции percentFromNum (await) вычислила процент от числа "a", а основная часть функции calculate (async) умножила результат полученный с функции percentFromNum на число "b" 👁‍🗨

Указав путь к изображению в значении url свойства cursor можно поменять отображение курсора 🟦

Можно использовать разные форматы импортируемого изображения, но если вы импортируете невекторное изображение, к примеру формат png, то лучше чтобы оно не превышало размер 100х100 пикселей 👆

.body {
  cursor: url(/public/icons/cursor.png), auto;
}