Какая работа среди этих 8 вам нравится больше? С точки зрения дизайна 🎨

Проголосуйте в следующем посте 👇

Cookie – это небольшой фрагмент данных, который хранит веб-сайт на компьютере пользователя 🍪

Cookie используются для сохранения информации о пользователе и его взаимодействии с сайтом 🗄

В видео мы рассмотрели пример создания cookie на странице компонента React ⚛️

В конце видео показал где хранятся cookie страницы в браузере 👁‍🗨

Код из видео:

class CookieExample extends React.Component {
  componentDidMount() {
    // Cookie
    this.createCookie('username', 'codorum', 1);
    // '1' - количество дней, на которое мы сохраняем cookie
  }

  createCookie(name, value, days) {
    const expires = new Date(new Date().getTime() + days * 24 * 60 * 60 * 1000).toUTCString();
    document.cookie = `${name}=${value}; expires=${expires}; path=/`;
  }

  render() {
    return (
      <div>
        <h1>Cтраница</h1>
      </div>
    );
  }
}

export default CookieExample;

Как сделать обводку с переливанием цвета на блоке при hover наведении с помощью CSS 🔮

👉 Основные моменты для создания обводки:
➖ псевдоэлемент ::before для класса блока, который будет служить копией блока и переливаться цветом, находясь за основным блоком
➖ анимация переливания цвета в @keyframes
➖ наличие важных свойств в псевдоэлементе ::before - content, position и z-index.

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

.card {
  display: grid;
  place-items: center;
  position: relative;
  width: 100px;
  height: 150px;
  background-color: #141117;
  border-radius: 8px;
  cursor: pointer;
} 

.card::before {
  position: absolute;
  content: '';
  width: 99px;
  height: 149px;
  background-color: #8493f2;
  border-radius: 8px;
  z-index: -1;
  transition: 0.3s;
  animation: animate 1.5s linear infinite;
}

.card:hover::before {
  width: 102px;
  height: 152px;
  border-radius: 9px;
}

@keyframes animate {
  50% {
    filter: hue-rotate(50deg)
  }
}

Благодаря методу Array from можно не только преобразовывать разнообразные данные в массивы, но и генерировать диапазон чисел, к примеру 🟨

На скрине пример создания массива чисел длиной в 5 элементов (от 1 до 5) 5⃣

Метод может быть полезным при генерировании чисел в промежутке между двумя конкретными числами, допустим. То есть если у нас есть два числа и мы хотим заполнить промежуток между ними 🫶

При помощи гибкого метода Array from мы можем создавать эффективные функции, что делает метод довольно полезным инструментом 👁‍🗨

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

const numArray = Array.from({ length: 5 }, (_, index) => index + 1);

console.log(numArray);
// консоль выдаст результат: [1, 2, 3, 4, 5]

🌟 C НОВЫМ 2026 ГОДОМ! 🎄

🎉 Пусть 2026 порадует вас новыми успехами и открытиями во всех продолжениях и начинаниях! 🏆

⚡ Фокуса в повседневных задачах, высокой стрессоустойчивости и стремительного прогресса в изучении нового! 🦾

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

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

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

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

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

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

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

JSON – это легкий и понятный формат обмена данными, используемый для представления структурированных данных 🗂

👉 метод stringify используется для преобразования JavaScript-объекта в JSON-строку. Он принимает объект, опционально функцию преобразования (replacer) и параметр пробела (space) для форматирования строки

👉 метод parse используется для разбора (парсинга) JSON-строки и создания соответствующего JavaScript-объекта. Он принимает строку JSON и опционально функцию разбора (reviver)

useMemo – это React хук, выполняющий мемоизацию (сохранение) результатов обработки значений функциями ⚛

Хук useMemo помнит результаты уже однажды выполненных вычислений и возвращает их при следующих вызовах 🧠

Это делает хук эффективным для оптимизации использования ресурсов при рендеринге компонентов 👁‍🗨

Код из видео:

import { useMemo, useState } from 'react';

const Component = () => {
  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState(0);

  const square = useMemo(() => {
    return count ** 2;
  }, [count]);

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleCalculate = () => {
    setCount(parseInt(inputValue));
  };

  return (
    <div>
      <p>Введите число:</p>
      <input type="number" value={inputValue} onChange={handleInputChange}/>
      <button onClick={handleCalculate}>Узнать квадрат числа</button>
      <p>Квадрат числа {count} = {square}</p>
    </div>
  );
};

export default Component

Эффект вращающегося 3Д текста в HTML & CSS 🟦

// index.html
<div class="box">
    <div>
        <span style="transform:
        rotateX(calc(1 * 120deg))">
        </span>

        <span style="transform:
        rotateX(calc(2 * 120deg))">
        </span>

        <span style="transform:
        rotateX(calc(3 * 120deg))">
        </span>
    </div>
</div>

/* index.css */
.box div {
  transform-style: preserve-3d;
  animation: rotation 10s linear infinite;
}

@keyframes rotation {
  0%   { transform: rotateX(0deg)   }
  100% { transform: rotateX(360deg) }
}

.box div span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box div span::before {
  font-weight: 900; 
  content: 'CODORUM JS';
  height: 35px;
}

Тремя постами ранее мы рассматривали как получить значения свойств объекта благодаря методу 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);

С помощью методов Push и Pop можно добавить или удалить элемент в конце массива на JavaScript 🟨

👉 метод Push добавляет элемент или элементы в конец массива
👉 метод Pop удаляет последний элемент массива

Применение методов стандартное: указывается название массива и метод через точку. В скобках к методу Push можно указать 1 или несколько элементов через запятую, а скобки к методу Pop оставляем пустые (в любом случае он удалит последний элемент массива, независимо от того что мы там укажем) 👁‍🗨

👉 Что такое потеря контекста, когда она происходит и как ее предотвратить?

Потеря контекста – это когда this больше не указывает на ожидаемый объект из-за способа вызова функции 💨

⚠ Часто случается при:
➖ передачи методов объекта как callback
➖ использовании setTimeout, setInterval
➖ использовании обработчиков событий
➖ деструктуризации методов

💡 Решается с помощью bind, arrow function или call/apply

Babel – это JavaScript компилятор, который используется для преобразования современного JavaScript-кода в код, поддерживаемый более старыми браузерами или средами выполнения. Babel помогает разработчикам писать современный код без заботы о совместимости с разными средами выполнения 🅱️

👉 Babel имеет несколько важных ролей:
➖ поддержка современных стандартов JavaScript
➖ совместимость с JSX
➖ транспиляция экспериментальных функций
➖ поддержка полей классов и других новшеств

Как это работает? ⚙
Babel использует плагины для преобразования разных частей современного синтаксиса JavaScript. Каждый плагин отвечает за определенную функциональность, например преобразование стрелочных функций, классов, шаблонных строк и т.д. Babel также может использовать пресеты (наборы плагинов) для комплексной поддержки разных версий JavaScript 👁‍🗨

Как добавить свойство в объект на JavaScript? 🔶

👉 Для этого можно воспользоваться:
➖ методом Object.assign, который объединит объект с новым свойством
➖ или Spread оператором: то есть переобъявить объект указав его в скобках с оператором перед ним и новым свойством через запятую

На скрине оба способа: в объекте было одно свойство Name, мы добавили второе свойство Language методом Object.assign, затем добавили третье свойство Link благодаря переопределению объекта 👁‍🗨

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

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

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

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

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

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

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

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

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

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

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