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

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

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

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

.image {
  box-shadow: 0px 25px 25px #4824ff90;
}

.text {
  box-shadow: 0px 15px 15px #4824ff90;
}

.image {
  filter: drop-shadow(0px 25px 25px #4824ff90);
}

.text {
  filter: drop-shadow(0px 15px 15px #4824ff90);
}

constructor – это метод жизненного цикла в компонентах React, в котором определяются исходные данные и подготавливается компонент к работе ⚛️

Метод constructor вызывается при создании экземпляра классового компонента и используется для инициализации состояния компонента и привязки методов 🏗

👉 Основные моменты:
➖ используя this.state определяется исходное состояние компонента
➖ чтобы передавать методы компоненту, необходимо привязать их к контексту this
➖ вызов super(props) в начале конструктора обеспечивает доступ к this.state (если классовый компонент наследуется от React.Component)

👉 Зачем использовать метод constructor:
➖ для инициализации состояния компонента
➖ для привязки методов, которые будут использовать this
➖ для выполнения логики, необходимой при создании компонента

Благодаря методу freeze можно заморозить объект в JavaScript. То есть запретить добавление, удаление и изменение свойств в объекте, а также изменение конфигурационных атрибутов свойств, таких как writable, enumerable, configurable 🥶

Если заморозить объект методом freeze, любые дальнейшие изменения объекта не будут выполнены 🧊

👉 Метод можно использовать в целях:
➖ защиты конфигурационного объекта от изменений
➖ поддержания состояний неизменными в Redux или другой системе управления состоянием
➖ создания "неизменного" API
и многих других

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

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

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

Как-то делал пост про отличие метода parseInt от Math.round. В этом посте хотел бы детальнее разобрать метод parseInt ⏺

Метод предназначен для работы с целыми числами, что означает что любые действия будут произведены лишь с целой частью чисел 🥚

Обратите внимание на умножение числа 3 на десятичное число со скрина. Десятичная часть числа 3.7 была полностью проигнорирована, то есть по факту число 3 было умножено на целую часть числа 3.7 ✔️

Следовательно, метод пригодится, если необходимо произвести вычисления с целыми числами и проигнорировать все десятичные части чисел 👁‍🗨

Решил регулярно некоторые посты посвящать рассмотрению возможных вопросов из собеседований по JavaScript. Думаю вы поддержите меня в этом решении 🟨

👉 Хотел бы разобрать вопрос: Чем отличается поведение isNaN() и Number.isNaN()?

➖ isNaN() сначала пытается преобразовать значение в число, поэтому может возвращать true для значений, не являющихся числами
➖ Number.isNaN() проверяет только те значения, которые уже являются NaN, не превращая их, что делает ее более точной

Это важно для написания более безопасного кода, чтобы избежать ложных положительных результатов, когда значение на самом деле не является NaN 👁‍🗨

Скоупинг – комплексное понятие, охватывающее несколько аспектов, направленных на правильное управление переменными и функциями кода. Для избежания конфликтов и обеспечения прозрачного и безопасного взаимодействия элементов программы 🧿

Основные аспекты скоупинга это: Объявление переменных, Объем видимости, Жизненный цикл, Поднятие, Замыкание 🔹

Рассмотрим аспект – объявление переменных ⏺

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

Начал наполнять плейлист по разработке сайта-визитки на ReactJS на моём ютуб канале. Это серия частей, где я поэтапно показываю как разрабатываю одностраничный сайт-визитку используя NodeJS и библиотеку React ⚛️

Также в рамках этих частей мы рассматриваем интересные моменты html верстки 🟧, стилизации и создании некоторых анимаций CSS 🟦

Кому интересно - милости прошу. Первая часть уже опубликована — анонс макета и подготовка среды 👈 жми, чтобы посмотреть.

Планирую публиковать новые части каждых 2 дня. Буду благодарен, если поддержите видео лайком и напишите свое мнение в комментарии под видео 💬

Делюсь интересной анимацией hover наведения на кнопку 🟦

Во-первых, понадобится прописать стиль для кнопки до hover наведения (класс .btn) 🔳

Затем в псевдоэлементе ::after для кнопки прописать наполнение, отображающееся после того как мы наведем курсор на кнопку и закончится анимация ⬜️

Анимация заключается в смене значения в свойстве scale 🔄

Ещё понадобятся конструкции :hover::after и :focus-visible::after, в которых мы указали конечное значение для свойства scale, применяющееся по окончанию анимации 👁‍🗨

Код из гифки:

.btn {
  cursor: pointer;
  border: 1px solid #b685ff;
  background-color: #141117;
  color: white;
  padding: .6em 1em;
  border-radius: 9px;
  position: relative;
  isolation: isolate;
}

.btn::after {
  content: '';
  position: absolute;
  z-index: -1;
  background: #b685ff;
  inset: 0;
  scale: .0 1;
  border-radius: 7.5px;
  transition: scale 600ms;
}

.btn:hover::after,
.btn:focus-visible::after {
  scale: 1 1;
}

Вторая часть по разработке сайта-визитки на ReactJS уже на ютуб канале — создание и обзор Реакт проекта 👈 жми, чтобы посмотреть 🔴

В ней мы рассмотрели как создать React проект, запустить его и из чего он состоит ⚛️

В следующей части уже приступим к написанию кода. Буду благодарен, если поддержите видео лайком 👍

Опубликовал третью часть по разработке сайта-визитки на ReactJS на ютуб канал — создание и обзор Реакт проекта 👈 жми, чтобы посмотреть 🔴

В ней мы приступили к написанию кода, а именно написали и стилизовали header блок, в котором есть меню с разделами, кнопка для открытия модального окна, кнопки соц. сетей и ползунок смены темы 🟧

В четвертой части рассмотрим как создать модальное окно, которое будет всплывать по нажатию на кнопку. Буду благодарен, если поддержите видео лайком 👍

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

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

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

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

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

// Создание функции выражением
const greeting = function(name) {
  return `Привет, ${name}!`;
};

// Пример вызова функции
console.log('Функция greeting:', greeting('Codorum'));


// Создание функции c помощью конструктора Function
const math = new Function('a', 'b', 'return a + b;');

// Вызов функции
console.log('Функция math:', math(3, 5));

Загрузил четвертую часть по разработке сайта-визитки на ReactJS на ютуб канал — написание модального окна 👈 жми, чтобы посмотреть 🔴

В этой части рассмотрели как создать модальное окно, которое всплывает поверх страницы по нажатию на кнопку. Использовали сразу 3 хука: useState, useEffect и useCallback. Создали плавную анимацию открытия и закрытия окна, соответствующие функции и использовали props ⚛️

Буду благодарен, если поддержите видео лайком 👍

Пятая часть по разработке сайта-визитки на ReactJS уже на ютуб канале — написание приветственного блока 👈 жми, чтобы посмотреть 🔴

В которой мы написали второй блок, состоящий из двух частей: блок текста, контейнер с анимированной иллюстрацией. В блоке текста выделили некоторые слова цветом, создали анимацию движения градиента. А также разобрали как создать анимированную иллюстрацию состоящую из нескольких слоев в качестве png изображений, которые накладываются друг на друга 🟦

Буду благодарен, если поддержите видео лайком 👍

Преимущества React в написании сайта ⚛️

Использование Реакт для создания сайта может иметь несколько преимуществ по сравнению с обычным использованием HTML, CSS и JavaScript 👁‍🗨

👉 Такие как:
➖ Компонентный подход, благодаря которому снижается количество дублированного кода и упрощается поддержка
➖ Возможность не перезагружать страницу при переходах и обновлениях информации
➖ Легкая интеграция с динамическими элементами
➖ Простая масштабируемость проекта (добавление новых компонентов без необходимости перестраивать всю архитектуру)
➖ Благодаря использованию виртуального DOM, Реакт минимизирует количество операций с реальным DOM, что делает его более производительным
➖ Большое сообщество и экосистема

Опубликовал шестую часть по разработке сайта-визитки на ReactJS на ютуб канале — написание блока услуг 👈 жми, чтобы посмотреть 🔴

Разобрали 2 нюанса: как компенсировать margin отступы для конкретного блока, заданные в глобальном классе body, как создать плашки для тегов/текста, ширина которых регулируется шириной текста 🟦

Буду благодарен, если поддержите видео лайком 👍

Загрузил седьмую часть по разработке сайта-визитки на ReactJS на ютуб канал — написание блока портфолио 👈 жми, чтобы посмотреть 🔴

👁‍🗨 Основное, что мы рассмотрели в этой части:
➖ как создать беспрерывно движущуюся карусель из изображений
➖ как создать фильтр с категориями, который регулирует отображение разных компонентов в блоке
➖ открытие изображений на весь экран (подобно модальному окну)
➖ как создать кнопку расширяющую блок (добавляет ряды работ из портфолио)

Буду благодарен, если поддержите видео лайком 👍

Классы в 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 {}

Восьмая часть по разработке сайта-визитки на ReactJS уже на ютуб канале — написание блока отзывов 👈 жми, чтобы посмотреть 🔴

В ней мы создали слайдер-карусель отзывов с функциями перелистывания без использования дополнительных библиотек и т. п. Разобрали создание иллюзии бесконечности слайдера, написали компонент шаблон для карточки отзыва принимающий пропсы с данными для отзыва с главного компонента Main. Использовали хуки useEffect и useRef ⚛️

Буду благодарен, если поддержите видео лайком 👍

Опубликовал девятую часть по разработке сайта-визитки на ReactJS на ютуб канале — написание блока гарантий и подвала 👈 жми, чтобы посмотреть 🔴

В этой части кратко разобрали как создать список используя html теги "ol" и "li" и добавить к пунктам списка собственные иконки изображения в качестве маркеров вместо стандартной нумерации. Также стилизовали сам список и написали футер блок 🟦

Буду благодарен, если поддержите видео лайком 👍

В CSS есть удобная функция clamp, которая ограничивает значение между минимальным и максимальным значениями. Её можно использовать вместо привычных свойств min-width, width и max-width например 🙌

В случае с классом container со скрина функция устанавливает значение ширины и высоты для элемента в диапазоне от 200px до 600px по ширине и от 100px до 300px по высоте, где 400px по ширине и 200px по высоте являются желаемыми значениями, но они могут адаптироваться в пределах этих минимальных и максимальных значений ⭕️

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

.container {
  width: clamp(200px, 400px, 600px);
  height: clamp(100px, 200px, 300px);
}