С помощью метода slice можно вырезать часть элементов из массива или часть текста со строки 🔪

Для применения метода необходимо объявить новую переменную, через знак равно указать массив или строку, метод и в скобках промежуток элементов или символов, которые нужно вырезать 🔠

Метод вырежет промежуток учитывая элемент, индекс которого был указан первым в скобках, но не учитывая элемент, индекс которого был указан вторым в скобках ℹ️

Переменная будет равна тем элементам или символам, которые мы в последствии вырезали 👁‍🗨

Делюсь интересной анимацией смены и выделения текста, которая добавит немного динамичности на ваш сайт 🖌

Для её реализации нужно добавить два заголовка в 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% }
}

Рассмотрим тип объекта 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()

render – это единственный обязательный метод жизненного цикла в классовых компонентах React ⚛️

Каждый раз, когда состояние или пропсы компонента изменяются, метод render вызывается снова для обновления интерфейса 🔄

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

Ранее делал пост про метод 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)

Как, при необходимости, проигнорировать отступы заданные в глобальном классе 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;
}

Одно из важных отличий var от let в JavaScript – это область видимости Scope 🧿

Переменные, объявленные с помощью var видны не только на уровне блочного скоупа, а и на уровне локального или же функционального скоупа, вне зависимости от места где они были объявлены. А переменные, объявленные с помощью let видны только внутри блока кода, где были объявлены 🔦

На скрине есть функция с блоком if. Соответственно мы имеем 2 скоуп уровня: локальный скоуп функции и блочный скоуп блока if. Внутри блока if объявлены 2 переменные: одна через var, другая через let ℹ️

Запустив функцию переменная var будет выведена в консоль, значит она видна на уровне всего локального скоупа, а переменная let не будет определена ❗️

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

Cross-Origin Resource Sharing (CORS) — это механизм безопасности, позволяющий веб-странице из одного домена запрашивать ресурсы, размещенные на другом домене. CORS позволяет веб-приложениям безопасно взаимодействовать с ресурсами в других доменах, если сервер настроен соответствующим образом 🛡

В стандартной настройке браузер блокирует такие запросы с помощью политики одного источника (same-origin policy), чтобы предотвратить атаки типа XSS (cross-site scripting). CORS позволяет обойти эти ограничения, если сервер, к которому следует запрос, позволяет это 🔐

Основные понятия и механизмы CORS включают: HTTP-заголовки и Preflight-запрос 👁‍🗨

С помощью метода 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).

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