С помощью анимации, прописанной в правиле @keyframes и индивидуальному значению дополнительного свойства animation-delay для каждой фигуры можно создать волнообразную анимацию загрузки из точек 🪄

В видео я показал как реализовать плавную волнообразную анимацию загрузки из точек и рассказал про свойство animation-delay, в значении которого мы можем прописать вычисление задержки начала анимации фигуры 👁‍🗨

Основной код из видео:

// ✦ index.js

<div className="loader">
  <div class="dot" style={{ animationDelay: "calc(0.1s * 1)" }}/>
  <div class="dot" style={{ animationDelay: "calc(0.1s * 3)" }}/>
</div>



// ✦ index.css

.loader {
  display: flex;
  justify-content: center;
}

.dot {
  width: 10px;
  height: 10px;
  margin: 80px 5px;
  border-radius: 50%;
  background-color: black;
  transform: scale(0.2);
  animation: animationDot 2s linear infinite;
}

@keyframes animationDot {
  0% { transform: scale(0.2) }
  30% { transform: scale(1) }
  70%, 100% { transform: scale(0.2) }
}

Благодаря методу Object.values можно легко конвертировать значения свойств объекта в элементы массива 🌀

У объекта есть, допустим, 3 свойства и с помощью метода мы как бы вытягиваем значения этих свойств делая их самостоятельными элементами, собирая в отдельный массив 👁‍🗨

Метод удобный и часто полезный ✔️

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

// ✦ Объект с тремя свойствами
const user = { name: 'Ignat', age: 30, role: 'admin' };

// ✦ Массив с тремя элементами (в качестве элементов
// выступают значения свойств объекта user)
const array = Object.values(user);

console.log("array =", array);

Одним постом выше мы рассматривали как получить значения свойств объекта благодаря методу Object.values, с помощью же методу Object.keys мы можем узнать ключи этих свойств 🔑

Применяется метод Object.keys аналогично методу Object.values. Только вместо массива значений свойств объекта мы получаем массив с элементами состоящих из ключей свойств объекта 👁‍🗨

Следовательно, метод Object.keys не менее полезен и удобен, чем метод Object.values и тоже часто может пригодится ✔️

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

// ✦ Объект с тремя свойствами
const user = { name: 'Ignat', age: 30, role: 'admin' };

// ✦ Массив с тремя элементами (в качестве элементов
// выступают ключи свойств объекта user)
const array = Object.keys(user);

console.log("array =", array);

С помощью использования эмодзи в коде можно уникально стилизовать список, воспользовавшись attr функцией для установки индивидуального эмодзи для каждого пункта списка 🔥

Для этого пунктам списка задаем класс (в нашем случае custom-marker), в котором значение свойства content равно селектору attr, принимающего свой атрибут (в нашем случае emoji) прописанный в пункте ℹ️

Псевдоэлемент ::marker напрямую не принимает атрибуты, поэтому в нем мы оставляем значение свойства content пустым, а уже в классе custom-marker указываем свойствo content со значением атрибута emoji 👁‍🗨

Код из гиф:

// ✦ index.js

<div className="main">
  <ol>
    <li className="custom-marker" emoji="🔥 ">Первый пункт</li>
    <li className="custom-marker" emoji="💎 ">Второй пункт</li>
    <li className="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;
}

Благодаря методу pop мы можем удалить последний элемент массива 🔫

Но если мы объявим новую переменную, которая будет равна применению метода pop к массиву с элементами мы можем получить противоположный по сути эффект. То есть последний элемент наоборот будет сохранен, а все остальные элементы будут удалены ↔️

Но, на самом деле, в то же время метод все таки будет применен для массива с элементами. То есть последний элемент все таки будет удален с массива, но одновременно он будет присвоен новой переменной 👁‍🗨

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

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

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


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

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

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

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

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

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

const obj1 = { name: "Brandon", age: 26 };
const obj2 = { role: "distributor" }

Object.assign(obj1, obj2);


console.log(obj1);

В этом видео я показал как сделать поле ввода для регистрации и авторизации как у Google 🔍

Ключевые моменты:
➖ надпись поля ввода (labelline) меняет свое расположение, размер и цвет при нажатии на поле ввода
➖ у неё есть белый фон, благодаря чему при наезде на границу/обводку поля ввода она перекрывает часть линии
➖ сама обводка поля ввода меняет лишь толщину и цвет, а также высоту (height) и ширину (width) лишь на 2 пикселя, благодаря чему создается впечатление что обводка при нажатии на поле ввода "жирнеет" внутрь

Классы для анимации надписи поля ввода (больше кода не помещается в пост):

.labelline {
  position: absolute;
  font-size: 2em;
  padding: 0 25px;
  margin: 0 12px;
  background-color: white;
  transition: 0.2s ease;
}

input:focus,
input:valid {
  border: 3px solid blue;
  height: 78px;
  width: 498px;
}

input:focus + .labelline,
input:valid + .labelline{
  color: blue;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  transform: translate(-15px, -16px) scale(0.83);
  z-index: 1111;
}

В JavaScript есть метод Number, который конвертирует данные разного типа в числа 🔢

По примеру со скрина у нас были 2 переменные с boolean значениями: a ("true"), b ("false") 🚥

В следствии применения метода boolean значения переменных конвертировались в числовые значения: a ("1"), b ("0") 🔢

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

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

var a = true; 
console.log('значение переменной "a" до применения метода:', a)

var TrueToNum = Number(a);
console.log('значение переменной "a" после применения метода:', TrueToNum)


var b = false; 
console.log('значение переменной "b" до применения метода:', b)

var FalseToNum = Number(b);
console.log('значение переменной "b" после применения метода:', FalseToNum)

Регулярные выражения – это инструмент позволяющий находить, заменять и валидировать текстовые данные ⌨️

Они состоят из символов разных типов, используя которые определяется некий шаблон, по которому и можно найти, заменить или провалидировать данные 🗄

В видео мы рассмотрели как благодаря регулярному выражению можно реализовать функцию для проверки правильности ввода электронной почты 👁‍🗨

Код из видео:

function validateEmail(email) {
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return emailRegex.test(email);
}

// Проверка данных:
const email1 = "example@example.com";
const email2 = "invalid-email";

console.log("Правильность ввода email1:", validateEmail(email1));
console.log("Правильность ввода email2:", validateEmail(email2));

Благодаря методу push можно добавить один или несколько элементов в конец массива ⤵️

Применение метода простое: нужно лишь указать массив с новой строки, через точку указать метод push и в скобках указать элемент или элементы, которые мы хотим добавить в массив ℹ️

По сути это единственное предназначение метода и, к сожалению, его нельзя использовать для добавления свойств в объект. Тем не менее метод необходимо знать для работы с массивами 👁‍🗨

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

let persons = ['Heisenberg', 'Pinkman', 'Gustavo'];

persons.push('Saul');

console.log("persons =", persons);



let numbers = [1, 2];

numbers.push(3, 4);

console.log("numbers =", numbers);

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

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

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

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

С помощью свойства transform-style со значением preserve-3d и свойства transform со значениями rotateX и translateZ мы можем создать интересный 3д эффект переворачивания кнопки при hover наведении 📦

Нам потребуется стилизовать кнопку в виде коробки и две её стороны. В видео я детальнее показал как работают эти свойства в нашем случае 👁‍🗨

CSS стили из видео:

.block {
  perspective: 800px;
  display: flex;
  justify-content: center;
}

.box {
  --height: 50px;
  height: var(--height);
  width: 150px;
  transform-style: preserve-3d;
  transition: 1s ease;
}

.box:hover {
  transform: rotateX(90deg);
}

.btn {
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: #141117;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.upside {
  background-color: #b685ff;
  transform: rotateX(-90deg) translateZ(calc(var(--height)/2));
}

.front {
  transform: translateZ(calc(var(--height)/2));
}

reverse – метод, позволяющий поменять порядок элементов в массиве 🔁

Это метод массива и с его помощью нельзя поменять порядок свойств в объекте, но мы можем поменять порядок ключей свойств объекта 🔑

То есть с помощью дополнительного метода Object.keys получаем массив ключей свойств объекта, меняем их порядок методом reverse и объявляем новый объект, добавляя в него те же свойства и ключи, но уже в другом порядке 👁‍🗨

Код из видео:

let array = [1, 2, 3];
array.reverse();
console.log(array);


let object = { name: "Codorum", language: "JS" }
let keys = Object.keys(object);
keys.reverse();

let NewObject = {};
keys.forEach(key => {
    NewObject[key] = object[key];
});

console.log(NewObject)

Зачем нужны классы в 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()