💡 CSS-переменные — что это и зачем они нужны?

CSS-переменные (или custom properties) — это мощный инструмент, который позволяет задавать повторно используемые значения прямо в CSS. Они работают как переменные в JavaScript, но предназначены для стилей. 🎨

📌 Как задать CSS-переменную?

:root {
  --main-color: #3498db;
  --padding-size: 16px;
}

Переменные определяются в специальном синтаксисе --имя-переменной и обычно задаются в :root, чтобы они применялись глобально.

📌 Как использовать?

button {
  background-color: var(--main-color);
  padding: var(--padding-size);
}

С помощью функции var() можно подключать переменные в любых свойствах.

📌 Зачем это нужно?

1. 📋 Удобство: Меняете переменную — и обновляете дизайн сразу во всех местах.
2. 🎯 Темизация: Легко переключать темы (светлая/тёмная, брендовые цвета).
3. 🛠 Гибкость: Позволяют динамически изменять стили через JavaScript:

document.documentElement.style.setProperty('--main-color', '#e74c3c');

📌 Поддержка
CSS-переменные поддерживаются всеми современными браузерами (кроме IE 😅). Так что смело используйте!

🔥 Emits в Vue: Как правильно передавать события 🔥

Если вы работаете с компонентами Vue, вы наверняка сталкивались с ситуацией, когда нужно передать событие из дочернего компонента в родительский. Для этого используются emits.

Что такое emits?
emits — это способ декларации событий, которые компонент может отправлять. Это делает ваш код более предсказуемым, типизированным и удобным для отладки.

Пример использования:
Дочерний компонент:

<script setup>
import { defineEmits } from 'vue';

// Декларируем событие "submit"
const emit = defineEmits(['submit']);

function handleSubmit() {
  emit('submit', { message: 'Данные отправлены!' });
}
</script>

<template>
  <button @click="handleSubmit">Отправить</button>
</template>

Родительский компонент:

<script setup>
function onSubmit(payload) {
  console.log(payload.message); // Данные отправлены!
}
</script>

<template>
  <ChildComponent @submit="onSubmit" />
</template>

Почему это важно?
1️⃣ Ясность и предсказуемость: Выявление всех событий в одном месте (через defineEmits) упрощает понимание кода. Вы всегда знаете, какие события ожидаются.

2️⃣ Типизация событий: Если вы используете TypeScript, можно типизировать события:

<script setup lang="ts">
const emit = defineEmits<{
  (event: 'submit', payload: { message: string }): void;
}>();
</script>

3️⃣ Снижение ошибок: Если вы попробуете отправить событие, не описанное в defineEmits, Vue выведет предупреждение в консоль.

📌 Совет: Используйте defineEmits вместе с defineProps, чтобы максимально упростить связь между компонентами.

Валидация на фронте

🚀 Скоро запуск аналитического крипто-проекта!

Готовлю платформу, которая поможет трейдерам получать актуальную информацию о рынке. В группу буду выкладывать детали разработки — проектирование и разработка сайта, ботов для Telegram, а также клиентской и серверной инфраструктуры. Всё это также можно будет смотреть в реальном времени на стримах в Twitch.

Подписывайтесь, чтобы следить за процессом: 👉 www.twitch.tv/m34r7

🔄 Event Loop в JavaScript — как это работает?

JavaScript — однопоточный язык, но при этом он умеет обрабатывать асинхронные задачи. Как? За счёт Event Loop!

🚀 Как это работает?

1️⃣ Call Stack — выполняет код синхронно. Если функция завершилась, удаляем её из стека.

2️⃣ Web APIs — браузер обрабатывает асинхронные задачи (setTimeout, fetch, DOM события).

3️⃣ Queue — готовые к выполнению колбэки и промисы.

4️⃣ Event Loop — проверяет стек и очереди, двигая выполнение вперёд.

🔥 Что важно знать?

• Microtasks (промисы, MutationObserver) выполняются до рендеринга и перед setTimeout.
• setTimeout(0) не выполняется мгновенно — он ждёт очистки стека.
• async/await — это просто сахар над промисами и всё равно попадает в microtask queue.

🔼 Всплытие событий в JavaScript

Когда ты кликаешь по кнопке внутри div, почему срабатывает не только click на кнопке, но и на div? Это всплытие событий (Event Bubbling)!

🔥 Как это работает?
1️⃣ Событие сначала срабатывает на целевом элементе (куда кликнули).
2️⃣ Затем поднимается вверх по DOM-дереву (родитель, потом его родитель и так до document).

📌 Пример:

document.querySelector("div").addEventListener("click", () => {
  console.log("Клик по div!");
});

document.querySelector("button").addEventListener("click", () => {
  console.log("Клик по button!");
});

👉 Клик по button выведет:

Клик по button!
Клик по div!

Так как click сначала отработает на кнопке, а затем поднимется к div.

🛑 Как остановить всплытие?
Если не хочешь, чтобы событие всплывало:

event.stopPropagation();

⚡️ Полезно знать:
✅ stopPropagation() остановит всплытие, но не предотвратит сам обработчик.
✅ stopImmediatePropagation() ещё и заблокирует другие обработчики на этом же элементе.
✅ Всплытие можно использовать, например, для делегирования событий (повесить click на общий контейнер вместо множества кнопок).

🔥 Разница между == и === в JavaScript – почему [] == ![] возвращает true?
Если ты уже немного знаком с JavaScript, то знаешь, что == (нестрогое равенство) и === (строгое равенство) работают по-разному.

👉 === сравнивает значение и тип данных:

0 === "0"; // false, потому что number !== string

👉 == выполняет приведение типов (type coercion):

0 == "0"; // true, потому что строка "0" приводится к числу 0

Но почему [] == ![] → true? Разбираем пошагово:

1️⃣ ![] – пустой массив [] приводится к true, но оператор ! инвертирует его, превращая в false.

console.log(![]); // false

2️⃣ Теперь сравниваем [] == false.

• JavaScript приводит false к 0 (логическое false → числовой 0).
• [] в числовом контексте приводится к "" (пустая строка).
• Пустая строка "" тоже приводится к 0.

Таким образом, [] == "" и "" == 0, а значит:

[] == false // true

📌 Вывод: == может вести себя неожиданно из-за автоматического приведения типов. Чтобы избежать сюрпризов, используй ===, если не хочешь неожиданных багов!

🚀 Hoisting в JavaScript – почему функции можно вызывать до их объявления?

В JavaScript есть интересная особенность – hoisting (поднятие). Благодаря ему мы можем вызывать функции до их объявления:

hello(); // "Привет!"

function hello() {
  console.log("Привет!");
}

Как это работает? Давай разберёмся!

🔍 Что такое hoisting?
Hoisting – это механизм JavaScript, при котором объявления переменных и функций «поднимаются» в начало своего контекста перед выполнением кода.

🔥 Hoisting функций
Функции, объявленные через function, полностью поднимаются, поэтому их можно вызывать до определения:

sayHi(); // "Привет!"

function sayHi() {
  console.log("Привет!");
}

JavaScript сначала «видит» всё объявление функции, поэтому вызов работает.

⚠️ Hoisting var и let/const
Но с переменными всё не так просто:

console.log(name); // undefined
var name = "Alice";

Переменные, объявленные через var, поднимаются, но без значений (они инициализируются undefined).

А вот let и const ведут себя иначе:

console.log(age); // ReferenceError
let age = 25;

Переменные, объявленные через let и const, поднимаются, но остаются в «мертвой зоне» (TDZ) до момента инициализации, поэтому доступ к ним до объявления вызывает ошибку.

⚠️ Hoisting для function expression
Функции, объявленные через const или let, не поднимаются полностью:

greet(); // ❌ TypeError: greet is not a function

const greet = function() {
  console.log("Привет!");
};

Здесь greet ведёт себя как переменная const, а не как function, поэтому в момент вызова она ещё не инициализирована.

📌 Итог
✅ Function Declaration (обычные функции) поднимаются полностью.
⚠️ Function Expression (const func = function() {}) поднимаются как переменные и недоступны до объявления.
⚠️ var поднимается, но остаётся undefined.
❌ let и const поднимаются, но остаются в TDZ и вызывают ошибку при доступе до объявления.

💡 Вывод: Hoisting – мощная особенность JavaScript, но будь внимателен с let, const и function expression, чтобы избежать неожиданных ошибок!

🚀 Разница между function declaration, function expression и arrow function в JavaScript
В JavaScript есть три способа объявления функций, и каждый из них ведёт себя по-разному. Давай разберёмся!

1️⃣ Function Declaration
📌 Объявление функции в коде без присваивания переменной.

function sayHello() {
  console.log("Привет!");
}

✅ Можно вызывать до объявления (hoisting работает).
✅ Имеет собственный this, привязанный к объекту вызова.
✅ Может быть переопределена в коде.

2️⃣ Function Expression
📌 Функция, присвоенная переменной.

const sayHello = function() {
  console.log("Привет!");
};

⚠️ Нельзя вызывать до объявления – вызовет ошибку
✅ Можно передавать как аргумент в другие функции.
✅ Полезна при передаче в обработчики событий.

3️⃣ Arrow Function (=>)
📌 Короткий синтаксис для функций.

const sayHello = () => {
  console.log("Привет!");
};

🔹 Главное отличие – у arrow function нет своего this, она берёт this из внешнего контекста:

const obj = {
  name: "Alice",
  sayHi: function() {
    console.log(this.name); // "Alice"
  },
  sayHiArrow: () => {
    console.log(this.name); // undefined (берёт `this` из глобального контекста)
  }
};

obj.sayHi();
obj.sayHiArrow();

✅ Короткий синтаксис (особенно для однострочных функций).
✅ Не создаёт свой this (удобно в обработчиках событий и методах классов).
❌ Нельзя использовать с new – не имеет prototype.
❌ Нет arguments, вместо него используют ...rest.

🔥 Как работает this в JavaScript? – примеры с call, apply, bind

В JavaScript this – это ключевое слово, которое зависит от контекста вызова функции. Давай разберёмся, как оно работает, и как его можно контролировать с помощью call, apply и bind.

🔍 this в разных контекстах
📌 В методе объекта – this указывает на сам объект:

const user = {
  name: "Alice",
  sayHi() {
    console.log(this.name);
  }
};

user.sayHi(); // "Alice"

📌 В обычной функции (function) значение this зависит от режима:

Без строгого режима ("use strict"):
В браузере this указывает на window.
В Node.js this будет {} в модуле, а в функции – undefined.

function showThis() {
  console.log(this);
}

showThis(); 
// В браузере без "use strict" → window
// В Node.js → undefined

• В строгом режиме ("use strict") this всегда undefined в обычных функциях:

"use strict";

function showThis() {
  console.log(this);
}

showThis(); 
// undefined

📌 В arrow function this не создаётся, а берётся из внешнего контекста:

const obj = {
  name: "Alice",
  arrowFunc: () => console.log(this)
};

obj.arrowFunc(); 
// this возьмётся из глобального контекста (в браузере – window, в Node.js – {})

🚀 Важно: this в arrow function определяется в момент создания и не меняется!

2️⃣ Как изменить this? Используем call, apply, bind
🔥 call – вызов функции с заданным this
Синтаксис: func.call(context, arg1, arg2, ...)

function sayHello() {
  console.log(`Привет, ${this.name}`);
}

const user = { name: "Alice" };

sayHello.call(user); // "Привет, Alice"

✅ call сразу вызывает функцию.
✅ Можно передавать аргументы через запятую.

🔥 apply – как call, но аргументы передаются массивом
Синтаксис: func.apply(context, [arg1, arg2, ...])

function sum(a, b) {
  console.log(this.value + a + b);
}

const obj = { value: 10 };

sum.apply(obj, [2, 3]); // 10 + 2 + 3 = 15

✅ Удобно, если аргументы уже находятся в массиве.
❌ apply редко используется, так как сейчас есть оператор spread (...):

sum.call(obj, ...[2, 3]); // Тоже самое, что apply

🔥 bind – создаёт новую функцию с привязанным this
Синтаксис: const newFunc = func.bind(context, arg1, arg2, ...)
📌 Пример использования bind в обработчике событий:

const button = {
  text: "Нажми меня",
  handleClick() {
    console.log(this.text);
  }
};

document.querySelector("button").addEventListener("click", button.handleClick.bind(button));

Если вызвать handleClick без bind, this станет undefined, так как обработчик событий меняет контекст вызова.

🚀 Итог
✅ Используй call, если нужно вызвать функцию сразу и передать this.
✅ Используй apply, если аргументы уже находятся в массиве.
✅ Используй bind, если нужно привязать this и вызвать функцию позже.

🔥 Зачем нужны Symbol в JavaScript?
В JavaScript есть 7 примитивных типов данных: string, number, boolean, null, undefined, bigint, и… Symbol.

Но зачем нам Symbol, если есть строки? 🤔 Давай разбираться!

1️⃣ Что такое Symbol?
Symbol – это уникальное и неизменяемое значение, которое можно использовать как ключ для свойств объекта.

const id = Symbol("id");
console.log(id); // Symbol(id)

🔹 Symbol("id") – это новый уникальный символ.
🔹 Даже если создать два одинаковых Symbol, они не равны:

const sym1 = Symbol("test");
const sym2 = Symbol("test");

console.log(sym1 === sym2); // ❌ false

Это ключевая особенность Symbol – каждый новый Symbol() уникален! 🚀

2️⃣ Symbol как ключ в объекте
В отличие от строк, Symbol не виден при обычном переборе for...in и Object.keys(), что делает его полезным для скрытых свойств:

const user = {
  name: "Alice",
  [Symbol("id")]: 123
};

console.log(user); 
// { name: 'Alice', [Symbol(id)]: 123 }

console.log(Object.keys(user)); 
// ['name'] – символ не виден!

💡 Используется, когда нужно хранить "скрытые" свойства, которые не мешают основному API объекта.

3️⃣ Глобальные Symbol
Если нам нужно глобально переиспользовать один и тот же Symbol, используем Symbol.for():

const sym1 = Symbol.for("shared");
const sym2 = Symbol.for("shared");

console.log(sym1 === sym2); // ✅ true

💡 В отличие от обычных Symbol, Symbol.for("key") всегда создаёт или переиспользует существующий символ.

🔎 Чтобы получить имя Symbol, используем .keyFor():

const sym = Symbol.for("shared");
console.log(Symbol.keyFor(sym)); // "shared"

4️⃣ Symbol в системных свойствах
JavaScript использует Symbol для скрытых механизмов языка, например:

🔹 Symbol.iterator – делает объект итерируемым:

const iterableObj = {
  data: [1, 2, 3],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => ({
        value: this.data[index++],
        done: index > this.data.length
      })
    };
  }
};

for (const value of iterableObj) {
  console.log(value); // 1, 2, 3
}

🔹 Symbol.toPrimitive – настраивает преобразование объекта в примитив:

const obj = {
  value: 100,
  [Symbol.toPrimitive](hint) {
    return hint === "string" ? "Объект" : this.value;
  }
};

console.log(obj + 1); // 101
console.log(String(obj)); // "Объект"

📌 Когда использовать Symbol?
✅ Для уникальных ключей в объектах, которые не конфликтуют с другими свойствами.
✅ Для скрытых свойств, которые не должны быть доступны через Object.keys().
✅ Для работы с системными Symbol, такими как Symbol.iterator.

🔄 Как работают генераторы и yield в JavaScript?
В JavaScript есть обычные функции, которые выполняются сразу и до конца. А есть генераторы – это особый вид функций, которые могут приостанавливать выполнение и продолжать его позже. Давай разбираться!

1️⃣ Что такое генератор?
Генератор – это функция, которая может возвращать несколько значений по очереди.

📌 Для создания генератора используется function* (звёздочка * после function).
📌 Вместо return используется yield, который приостанавливает выполнение функции.

function* myGenerator() {
  yield "Первое значение";
  yield "Второе значение";
  yield "Третье значение";
}

const gen = myGenerator(); // Создаём объект генератора

console.log(gen.next()); // { value: 'Первое значение', done: false }
console.log(gen.next()); // { value: 'Второе значение', done: false }
console.log(gen.next()); // { value: 'Третье значение', done: false }
console.log(gen.next()); // { value: undefined, done: true }

🔹 Каждый вызов gen.next() возвращает объект { value, done }, где:

• value – текущее значение из yield,
• done – true, если генератор завершён.

2️⃣ Как yield приостанавливает выполнение?
Генератор не выполняется полностью при вызове – он останавливается на yield и ждёт следующего вызова .next().

function* numbers() {
  console.log("Запуск генератора");
  yield 1;
  console.log("Продолжение генератора");
  yield 2;
}

const gen = numbers();

gen.next(); // Запуск генератора, { value: 1, done: false }
gen.next(); // Продолжение генератора, { value: 2, done: false }
gen.next(); // { value: undefined, done: true }

🔹 console.log() срабатывает не сразу, а только при вызове .next()!

3️⃣ Передача данных в yield
Можно передавать значения внутрь генератора с помощью .next(value).

function* sayHello() {
  const name = yield "Как тебя зовут?";
  yield `Привет, ${name}!`;
}

const gen = sayHello();

console.log(gen.next().value); // "Как тебя зовут?"
console.log(gen.next("Alice").value); // "Привет, Alice!"

🔹 Первый .next() просто начинает выполнение и доходит до первого yield.
🔹 Второй .next("Alice") передаёт "Alice" внутрь генератора вместо yield.

4️⃣ yield* – делегирование другому генератору
Если нужно вызвать другой генератор внутри текущего, можно использовать yield*:

function* firstGen() {
  yield "A";
  yield "B";
}

function* secondGen() {
  yield "1";
  yield* firstGen();
  yield "2";
}

const gen = secondGen();

console.log([...gen]); // ["1", "A", "B", "2"]

🔹 yield* делегирует выполнение другому генератору.

5️⃣ Бесконечные генераторы
Генераторы можно использовать для создания бесконечных последовательностей:

function* infiniteCounter() {
  let i = 1;
  while (true) {
    yield i++;
  }
}

const counter = infiniteCounter();

console.log(counter.next().value); // 1
console.log(counter.next().value); // 2
console.log(counter.next().value); // 3

🔹 В отличие от обычных циклов, бесконечный генератор не блокирует выполнение кода, потому что yield останавливает его до следующего вызова .next().

📌 Итоги
✅ Генераторы (function*) позволяют останавливать и продолжать выполнение функций.
✅ yield возвращает значения и приостанавливает выполнение до следующего .next().
✅ Можно передавать данные в yield через .next(value).
✅ yield* делегирует выполнение другому генератору.
✅ Генераторы подходят для работы с потоками данных, итераторов и бесконечных последовательностей.