Зачем нужны классы в JavaScript? Классы – это способ определения объектов, их свойств и методов. Благодаря классам можно создавать объекты определенного стандарта ✴️

На примере кода со скрина есть класс programmer с конструктором, в котором есть свойство name и метод write 🧑‍💻

Ниже был создан новый объект Codorum, которому был присвоен класс programmer. Теперь мы можем вызвать метод write класса programmer от имени объекта Codorum 👁‍🗨

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

class programmer {
    constructor(name) {  // конструктор класса 
      this.name = name;  // свойства класса
  }

    write() {            // метод класса 
      console.log(`${this.name} пишет код`);
  }
}
    
const Codorum = new programmer('Codorum');

Codorum.write(); // запуск метода объектом

Как реализовать анимацию загрузки контента на странице в виде движения линии по блоку с помощью 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); ;
  }
}

Что такое наследование классов в JavaScript? 👯‍♀️

Наследование классов – это когда новый класс наследует свойства и методы с другого класса 🤝

Например, класс Programmer наследует класс Writer на примере со скрина 🎆

Это означает что теперь в классе Programmer есть такой же конструктор и методы как в классе Writer 👏

Соответственно теперь мы можем присвоить новый класс Programmer объекту и использовать метод, аналогичный методу класса Writer 👁‍🗨

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

class Writer {
    constructor(name) {
      this.name = name;
    }

    think() {
      console.log(`${this.name} думает`);
    }
}

// класс Programmer наследует свойства и методы класса Writer
class Programmer extends Writer {}

const Codorum = new Programmer('Codorum');

Codorum.think();

Мутабельность (от лат. mutabilis – изменяемый) и иммутабельность (от лат. immutabilis – неизменяемый) – два ключевых понятия в программировании, которые описывают возможность изменения данных после их создания ✏️

Мутабельные данные можно изменять после создания. Это означает, что вы можете менять значения, добавлять или удалять элементы, модифицировать структуру данных. Пример мутабельных типов данных: массивы и объекты 🔓

Иммутабельные данные, напротив, не могут быть изменены после создания. Любое изменение таких данных приводит к созданию новой копии с изменениями, оставляя оригинал нетронутым. Пример иммутабельных типов данных: числа, строки, булевые значения 🔒

С помощью метода 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 дня. Буду благодарен, если поддержите видео лайком и напишите свое мнение в комментарии под видео 💬