👁‍🗨 CODORUM — пишу на JavaScript

Делюсь интересной анимацией 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 на моём ютуб канале. Это серия частей, где я поэтапно показываю как разрабатываю одностраничный сайт-визитку используя NodeJS и библиотеку React ⚛️ Также в рамках этих частей мы рассматриваем интересные моменты html верстки 🟧, стилизации и создании некоторых анимаций CSS 🟦 Кому интересно - милости прошу. Первая часть уже опубликована — анонс макета и подготовка среды 👈 жми, чтобы посмотреть. Планирую публиковать новые части каждых 2 дня. Буду благодарен, если поддержите видео лайком и напишите свое мнение в комментарии под видео 💬

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

Решил регулярно некоторые посты посвящать рассмотрению возможных вопросов из собеседований по JavaScript. Думаю вы поддержите меня в этом решении 🟨 👉 Хотел бы разобрать вопрос: Чем отличается поведение isNaN() и Number.isNaN()? ➖ isNaN() сначала пытается преобразовать значение в число, поэтому может возвращать true для значений, не являющихся числами ➖ Number.isNaN() проверяет только те значения, которые уже являются NaN, не превращая их, что делает ее более точной Это важно для написания более безопасного кода, чтобы избежать ложных положительных результатов, когда значение на самом деле не является NaN 👁‍🗨

Как-то делал пост про отличие метода parseInt от Math.round. В этом посте хотел бы детальнее разобрать метод parseInt ⏺ Метод предназначен для работы с целыми числами, что означает что любые действия будут произведены лишь с целой частью чисел 🥚 Обратите внимание на умножение числа 3 на десятичное число со скрина. Десятичная часть числа 3.7 была полностью проигнорирована, то есть по факту число 3 было умножено на целую часть числа 3.7 ✔️ Следовательно, метод пригодится, если необходимо произвести вычисления с целыми числами и проигнорировать все десятичные части чисел 👁‍🗨

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

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

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

constructor – это метод жизненного цикла в компонентах React, в котором определяются исходные данные и подготавливается компонент к работе ⚛️ Метод constructor вызывается при создании экземпляра классового компонента и используется для инициализации состояния компонента и привязки методов 🏗 👉 Основные моменты: ➖ используя this.state определяется исходное состояние компонента ➖ чтобы передавать методы компоненту, необходимо привязать их к контексту this ➖ вызов super(props) в начале конструктора обеспечивает доступ к this.state (если классовый компонент наследуется от React.Component) 👉 Зачем использовать метод constructor: ➖ для инициализации состояния компонента ➖ для привязки методов, которые будут использовать this ➖ для выполнения логики, необходимой при создании компонента

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

let ArrayNum = [1, 2, 3];
let ArrayStr = ['JS', 'Code'];
let ArrayObj = [{type: 'лимон', amount: 7},
                {type: 'манго', amount: 4},
                {type: 'груша', amount: 9}]

let ArrInd = ['at', 'on', 'in'];
//  индекс     0     1     2

//  Spread оператор - "..."
let Arr1 = [1, 2];
let Arr2 = [...Arr1, 3, 4];
console.log(Arr2)

Как можно добавить тень от элемента по контуру в 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);
}

С помощью метода padStart можно заполнить промежуток в начале строки заданной частью текста ✏️ 1-й параметр в скобках для метода padStart это число устанавливающее длину строки, а 2-й параметр это часть текста, которым будет заполнен промежуток длины строки. Этот промежуток можно определить отняв от длины строки (которую мы указали в качестве 1-го параметра) первоначальную длину строки 🧮 Есть, допустим, строка str длиной в 3 символа "rum" и если в параметрах метода padStart задать: ➖ (7, "Codo") - новым значением строки будет "Codorum". ➖ (6, "Codo") - новым значением строки будет "Codrum". Часть строки "rum" была не тронута, а "Codo" не полностью поместилось в промежуток длины строки. ➖ (11, "Codo") - новым значением строки будет "CodoCodorum". Часть текста "Codo" 2 раза поместилась в промежуток длины строки длиной в 8 симв. (11-3).

Cross-Origin Resource Sharing (CORS) — это механизм безопасности, позволяющий веб-странице из одного домена запрашивать ресурсы, размещенные на другом домене. CORS позволяет веб-приложениям безопасно взаимодействовать с ресурсами в других доменах, если сервер настроен соответствующим образом 🛡 В стандартной настройке браузер блокирует такие запросы с помощью политики одного источника (same-origin policy), чтобы предотвратить атаки типа XSS (cross-site scripting). CORS позволяет обойти эти ограничения, если сервер, к которому следует запрос, позволяет это 🔐 Основные понятия и механизмы CORS включают: HTTP-заголовки и Preflight-запрос 👁‍🗨

Одно из важных отличий var от let в JavaScript – это область видимости Scope 🧿 Переменные, объявленные с помощью var видны не только на уровне блочного скоупа, а и на уровне локального или же функционального скоупа, вне зависимости от места где они были объявлены. А переменные, объявленные с помощью let видны только внутри блока кода, где были объявлены 🔦 На скрине есть функция с блоком if. Соответственно мы имеем 2 скоуп уровня: локальный скоуп функции и блочный скоуп блока if. Внутри блока if объявлены 2 переменные: одна через var, другая через let ℹ️ Запустив функцию переменная var будет выведена в консоль, значит она видна на уровне всего локального скоупа, а переменная let не будет определена ❗️ Но на практике уже мало кто использует var для объявления переменных в JavaScript 👁‍🗨

Как, при необходимости, проигнорировать отступы заданные в глобальном классе body чтобы полноценно стилизовать новый контейнер? 🟦 Мы можем поступить следующим образом: задать аналогичные margin отступы в классе нового контейнера, но со знаком минус, благодаря чему мы компенсируем отступы. Затем стилизовать контейнер и заново добавить отступы, но уже через свойство padding ⏹ В видео я показал как стилизовал новый блок html страницы проигнорировав margin отступы заданные в глобальном классе страницы body 👁‍🗨 Код из видео:

body {
  margin-left: 75px;
  margin-right: 75px;
}

.service-block {
  margin-left: -75px;
  margin-right: -75px;
  background: #4824ff;
  padding: 0 75px;
}

Ранее делал пост про метод pop, благодаря которому можно удалить последний элемент массива 🔫 Есть аналогичный методу pop – метод shift но удаляющий первый элемент массива ℹ️ Точно так же как и в случае с методом pop если мы объявим новую переменную, которая будет равна применению метода shift к массиву с элементами мы можем присвоить удаленный элемент этой новой переменной 💾 В то же время метод будет применен для массива с элементами. То есть первый элемент будет удален с массива, но одновременно он будет присвоен новой переменной 👁‍🗨 Код со скрина:

// ✦ Удаление первого элемента массива
let array = ['green', 'blue', 'red'];

array.shift();
console.log("Массив array после применения метода shift:", array)


// ✦ Присвоение первого элемента массива в переменную
let numbers = [1, 2, 3];

let deleted_num = numbers.shift();
console.log("numbers =", numbers)
console.log("deleted_num =", deleted_num)

render – это единственный обязательный метод жизненного цикла в классовых компонентах React ⚛️ Каждый раз, когда состояние или пропсы компонента изменяются, метод render вызывается снова для обновления интерфейса 🔄 👉 Что можно использовать и возвращать в render: ➖ использовать условные операторы для отображения разного контента в зависимости от состояния или пропсов ➖ возвращать JSX, описывающий структуру UI ➖ возвращать массивы или React.Fragment, чтобы отобразить несколько элементов

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

let person = {
   name: 'Jesse',
   age: 24,
   address: {
      city: 'Albuquerque',
      state: 'New Mexico'
   },
 
   speak: function() {
      console.log(`${this.name} said: What's up, b*tch?`);
   }
};

console.log(person.name)
person.speak()

Делюсь интересной анимацией смены и выделения текста, которая добавит немного динамичности на ваш сайт 🖌 Для её реализации нужно добавить два заголовка в div контейнер, в одном из которых прописать варианты текста в span элементы, которые будут меняться и выделяться 🔄 В @keyframes нужно будет создать две анимации: для смены текста, для выделения текста ❇️ Детальнее про реализацию анимации рассказал в видео 👁‍🗨 CSS стили из видео:

h2 span {
  position: relative;
  animation: displayText 9s infinite;
}

@keyframes displayText {
  0% { display: inline-block }
  33.33%, 100% { display: none }
}

h2 span:before {
  content: attr(data-text);
  position: absolute;
  color: #878bf8;
  border-right: 1px solid #878bf8;
  animation: printing 3s linear infinite;
  overflow: hidden;
  background-color: #878bf840;
}

@keyframes printing {
  0%, 10%, 100% { width: 0 }
  70%, 90% { width: 100% }
}

С помощью метода slice можно вырезать часть элементов из массива или часть текста со строки 🔪 Для применения метода необходимо объявить новую переменную, через знак равно указать массив или строку, метод и в скобках промежуток элементов или символов, которые нужно вырезать 🔠 Метод вырежет промежуток учитывая элемент, индекс которого был указан первым в скобках, но не учитывая элемент, индекс которого был указан вторым в скобках ℹ️ Переменная будет равна тем элементам или символам, которые мы в последствии вырезали 👁‍🗨

Мутабельность (от лат. mutabilis – изменяемый) и иммутабельность (от лат. immutabilis – неизменяемый) – два ключевых понятия в программировании, которые описывают возможность изменения данных после их создания ✏️ Мутабельные данные можно изменять после создания. Это означает, что вы можете менять значения, добавлять или удалять элементы, модифицировать структуру данных. Пример мутабельных типов данных: массивы и объекты 🔓 Иммутабельные данные, напротив, не могут быть изменены после создания. Любое изменение таких данных приводит к созданию новой копии с изменениями, оставляя оригинал нетронутым. Пример иммутабельных типов данных: числа, строки, булевые значения 🔒