Как можно добавить тень от элемента по контуру в CSS? 🔵🕳

Если использовать стандартное свойство для тени box-shadow будет добавлена тень от блока/контейнера/зоны элемента, но благодаря свойству filter со значением drop-shadow можно добиться тени именно по контуру объекта, будь-то неквадратное изображение или текст 🧩

Применяется свойство filter со значением drop-shadow почти так же как и свойство box-shadow, а разница очевидна (пример применения обоих свойств на скрине) 👁‍🗨

Как клиент взаимодействует с сервером с помощью JavaScript 🟨

Запрос от клиента 📨
Когда пользователь нажимает кнопку или выполняет какое-либо действие на веб-странице, браузер (клиент) отправляет запрос на сервер. Это может быть HTTP-запрос, например GET или POST.

Обработка на сервере ⚙️
Сервер получает запрос и выполняет необходимые действия: может обратиться в базу данных, обработать данные или выполнить другие операции. После этого сервер формирует ответ.

Ответ от сервера 📥
Сервер отправляет ответ к клиенту. Это может быть HTML-страница, JSON-данные или другой тип данных.

Обработка ответа в клиенте 🔄
Клиент получает ответ и с помощью JavaScript может обновить пользовательский интерфейс. К примеру, отобразить новые данные без перезагрузки страницы.

В видео мы рассмотрели пример запроса с помощью Fetch API 👁‍🗨

Благодаря методу endsWith можно проверить заканчивается ли строка на заданную букву в JavaScript ✏

Применение стандартное: указываем строку и метод endsWith через точку, затем букву в скобках, наличие которой необходимо проверить в конце строки 🔦

Метод возвращает boolean значения true / false в зависимости от результата 🚥

Стоит учитывать регистр, в которой находится буква, которую мы проверяем. Если буква будет правильной, но регистр будет неверный - мы получим значение false 👁‍🗨

Scope – это область видимости для переменных и функций 🔳

Есть три типа Scope: глобальный Scope, локальный (функциональный) и блочный ℹ️ 

Переменные объявленные на уровень выше будут видны также в скоупе на уровень ниже. То есть, например, переменная "a" с кода на гиф изображении будет доступна в локальном скоупе (области видимости функции Local), но переменная "b", которая объявлена внутри скоупа функции не будет видна в глобальном скоуп 👁‍🗨

Границы скоуп уровней определяются фигурными скобками. И, обычно, в редакторах кода можно увидеть характерную вертикальную линию, которая подсказывает границы внутренних Scope ☑️

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

Function – это тип объекта, который используется для определения и вызова функций 💡

Определить функцию можно с помощью выражения и с помощью конструктора 👁‍🗨

👉 Некоторые тонкости типа объектов Function:
➖ функции могут принимать аргументы и их параметры через список аргументов
➖ функции можно вызвать с помощью оператора вызова
➖ объект Function позволяет использовать замыкание для сохранения доступа к переменным с более высокого уровня

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%; }
}

componentDidMount – это метод жизненного цикла в компонентах React, срабатывающий сразу после добавления какого-либо компонента (в который был добавлен метод) на страницу (или в DOM) ⚛️

То есть код внутри метода не срабатывает при полном запуске и работе React проекта, а только после встраивания компонента на страницу, в следствие выполнения какого-то действия пользователем, например 🏌️‍♂️

В примере на скрине: когда выбирается категория "Одежда", компонент Clothes добавляется на страницу, и вызывается componentDidMount 👁‍🗨

👉 На практике метод используется для:
➖ загрузки данных с сервера
➖ настройки подписок или таймеров
➖ выполнения действий, требующих доступа к DOM

В JavaScript существует множество различных конструкций 🟨

Конструкции в JavaScript – это общее понятие, охватывающее различные типы синтаксических элементов для управления логикой программы 🚟

👉 Рассмотрим основные условные конструкции, которые помогают выполнять разный код в зависимости от условий:

➖ if...else – абсолютно всеми знакомая конструкция, которая проверяет условие и выполняет код в зависимости от результата. (Тернарный оператор "? :" – более короткая альтернатива конструкции if...else)

➖ switch – удобная конструкция для проверки нескольких значений

С помощью метода Object.assign можно продублировать свойства одного объекта в другой без необходимости объявления дополнительного объекта (для последующего сложения двух объектов или применения Spread оператора для развертывания) 👯‍♀️

Метод применяется просто: первым значением в скобках выступает объект, в который мы хотим добавить свойства из второго объекта. Вторым значением выступает объект, свойства из которого мы хотим добавить *️⃣

В результате первый объект (в который мы копировали свойства с другого объекта) помимо своих свойств теперь будет иметь и свойства второго объекта. Второй же объект останется исходным 👁‍🗨

Что такое конструктор в JS? 🏗

Конструктор – это специальная функция, которая используется для создания и инициализации разных объектов. Основная идея конструкторов заключается в возможности создавать много объектов с одинаковыми свойствами и методами по определенному шаблону 🃏

На скрине пример создания объекта Homer с помощью конструктора Person 🍩

👉 Теперь у объекта есть:
➖ два свойства/параметра: age и hometown
➖ метод speak

Но на практике удобнее пользоваться классами, использование которых в разы проще 👁‍🗨

Код со скрина:

// ✦ объявление конструктора
function Person(age, hometown) {
  this.age = age;
  this.hometown = hometown;
  this.speak = function() {
    console.log(`Hi, I'm ${this.age} years old, my hometown is ${this.hometown}`)
  };
}

// ✦ создание объекта с помощью конструктора
let Homer = new Person(40, 'Springfield')

Homer.speak();

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

👉 Основные функции промисов:
➖ конструктор 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); ;
  }
}