Обработка изображений с Canvas 🖼️
Canvas API предоставляет возможности для работы с графикой — от простой отрисовки до сложной обработки изображений.

📌 Примеры использования:

Создание игр 👾
Редакторы изображений 🖌️
Визуализация данных 📊

Пример рисования на Canvas:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100); // Рисуем квадрат

WebSockets и работа с реальным временем 📡
WebSocket — это технология, которая позволяет устанавливать постоянное двустороннее соединение между клиентом и сервером. Это идеально подходит для приложений, работающих в реальном времени.

📌 Примеры использования:

Чаты 💬
Онлайн игры 🎮
Трекеры биржевых котировок 📈
Уведомления 🔔

Как это работает:
В отличие от HTTP-запросов, которые инициируются клиентом и имеют одноразовый ответ, WebSocket позволяет серверу отправлять данные клиенту в любой момент после установления соединения.

Простой пример WebSocket-сервера и клиента

📡 Сервер (Node.js):

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
  console.log('Новое подключение!');

  socket.on('message', (message) => {
    console.log(`Получено сообщение: ${message}`);
    socket.send(`Эхо: ${message}`);
  });

  socket.on('close', () => {
    console.log('Подключение закрыто');
  });
});
🖥️ Клиент (в браузере):

javascript
Копировать
Редактировать
const socket = new WebSocket('ws://localhost:8080');

socket.addEventListener('open', () => {
  console.log('Соединение открыто!');
  socket.send('Привет, сервер!');
});

socket.addEventListener('message', (event) => {
  console.log('Сообщение от сервера:', event.data);
});

Обработка ошибок в JavaScript с помощью try/catch ⚠️🔍

🔥 Почему важно обрабатывать ошибки?
Ошибки в коде могут прервать выполнение программы, но их правильная обработка помогает сохранить стабильность работы приложения и предоставить пользователю понятные сообщения.

Что такое try/catch?
try — это блок, в котором пытаются выполнить код. Если возникает ошибка, программа переходит к блоку catch, где ошибка может быть обработана.

👩‍💻 Пример:

try {
  let result = riskyFunction();
} catch (error) {
  console.error('Произошла ошибка:', error.message);
}

Применение:
Обработка ошибок используется везде, где может возникнуть непредсказуемая ситуация: запросы к серверу, работа с файловой системой, взаимодействие с внешними API.

амыкания (Closures) в JavaScript 🔒📦

🧠 Что такое замыкание?
Замыкание — это функция, которая "запоминает" свое лексическое окружение, даже если эта функция была вызвана за пределами своей области видимости.

Как это работает?
Замыкания позволяют создавать функции с приватными данными, которые не могут быть изменены извне, обеспечивая инкапсуляцию.

👩‍💻 Пример замыкания:

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  }
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

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

Web Components — создание собственных HTML-элементов 🧩
Web Components — это набор современных технологий, которые позволяют создавать собственные кастомные HTML-элементы с изолированными стилями и логикой.

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

Повторное использование компонентов 🔄
Инкапсуляция стилей и поведения 🔒
Независимость от фреймворков 🚀
Основные технологии Web Components:
Custom Elements — создание новых HTML-тегов.
Shadow DOM — изоляция стилей и разметки компонента.
HTML Templates — использование шаблонов для структуры.

Простой пример Web Component

class HelloWorld extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });

    // Создаем содержимое компонента
    const wrapper = document.createElement('div');
    wrapper.textContent = '👋 Привет, мир!';
    wrapper.style.color = 'blue';

    shadow.appendChild(wrapper);
  }
}

customElements.define('hello-world', HelloWorld);

📄 Теперь вы можете использовать ваш компонент прямо в HTML:

<hello-world></hello-world>

Shadow DOM и изоляция стилей
Если добавить стили внутри компонента:

wrapper.style.border = '2px solid red';

Эти стили не будут затронуты внешними CSS-файлами. Это дает полную изоляцию компонента от остальной страницы.

Web Workers — многопоточное программирование в JavaScript ⚙️
Web Workers позволяют выполнять тяжелые и ресурсоемкие задачи в фоновом потоке, не блокируя основной поток (главный поток UI).

📌 Зачем это нужно?
Улучшение производительности 🏃‍♂️
Отсутствие "подвисаний" интерфейса во время выполнения сложных операций 🎛️
Обработка больших объемов данных 🔄

Как это работает?
JavaScript по умолчанию однопоточный, что значит, что сложные вычисления могут блокировать интерфейс. Web Workers создают отдельные потоки, которые могут выполнять задачи параллельно с основным потоком.

Простой пример использования Web Worker

📄 worker.js:

// Тяжелые вычисления
self.onmessage = (event) => {
  let result = 0;
  for (let i = 0; i < event.data; i++) {
    result += i;
  }
  postMessage(result); // Отправляем результат обратно
};

🖥️ main.js:

const worker = new Worker('worker.js');

worker.postMessage(1_000_000_000); // Отправляем задачу в воркер

worker.onmessage = (event) => {
  console.log('Результат вычислений:', event.data);
};

console.log('Этот код выполняется без задержки 🚀');

Преимущества Web Workers
Обработка больших объемов данных
Распараллеливание сложных вычислений
Улучшение отзывчивости интерфейса

Intersection Observer — отслеживание видимости элементов на странице 👁️
Intersection Observer — это API, которое позволяет отслеживать, когда элемент пересекает границы видимой области (viewport) или другого контейнера. Это мощная альтернатива событиям скролла и ручной проверки позиции элементов.

📌 Когда это нужно?
Ленивая загрузка изображений 🖼️
Анимации при появлении элементов на экране ✨
Бесконечные ленты новостей 📜
Отслеживание рекламы и видимости контента 📊
Простой пример Intersection Observer

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент появился на экране!');
      entry.target.style.backgroundColor = 'lightgreen';
    }
  });
});

const targetElement = document.querySelector('.box');
observer.observe(targetElement);

📄 HTML для теста:

<div class="box" style="height: 200px; width: 200px; background-color: lightcoral; margin-top: 100vh;">
  Прокрути меня в видимость!
</div>

Как это работает?
IntersectionObserver следит за элементом, и когда он появляется в видимой области, срабатывает коллбэк.
Это намного эффективнее, чем использование события scroll, так как браузер оптимизирует работу этого API.

Drag and Drop API — перетаскивание элементов 🖱️
Drag and Drop API позволяет реализовать функциональность перетаскивания элементов на странице.

📌 Когда это нужно?
Организация списков задач (Kanban-доски) ✅
Перетаскивание файлов для загрузки 📤
Визуальные редакторы 🎨

Простой пример перетаскивания:

<div id="draggable" draggable="true" style="width: 100px; height: 100px; background-color: lightblue;">
  Перетащи меня!
</div>

const draggable = document.getElementById('draggable');

draggable.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text', event.target.id);
  draggable.style.opacity = '0.5';
});

draggable.addEventListener('dragend', () => {
  draggable.style.opacity = '1';
});

MutationObserver — отслеживание изменений DOM 🔍
MutationObserver позволяет следить за изменениями в структуре HTML-документа (добавление, удаление или изменение атрибутов элементов).

📌 Когда это нужно?
Реализация динамических интерфейсов 🔄
Валидация форм при изменениях 📝
Аналитика действий пользователей 📊
Простой пример использования MutationObserver:

const targetNode = document.getElementById('content');

const observer = new MutationObserver((mutationsList) => {
  mutationsList.forEach(mutation => {
    if (mutation.type === 'childList') {
      console.log('Добавлен или удален элемент!');
    }
  });
});

observer.observe(targetNode, { childList: true, subtree: true });

setTimeout(() => {
  const newElement = document.createElement('p');
  newElement.textContent = 'Новый элемент!';
  targetNode.appendChild(newElement);
}, 2000);

📄 HTML:

<div id="content">Содержимое страницы</div>

History API — управление навигацией без перезагрузки страницы 🔄
History API позволяет манипулировать историей браузера без перезагрузки страницы. Это основа для SPA (Single Page Applications).

📌 Когда это нужно?
Реализация маршрутизации в SPA 🚀
Навигация без полной перезагрузки страницы 📱
Работа с модальными окнами и вкладками 📑

Простой пример History API:

// Добавляем новый URL в историю
history.pushState({ page: 1 }, 'Title', '/new-page');

window.onpopstate = (event) => {
  console.log('Вернулись назад!', event.state);
};

console.log('Текущий URL:', window.location.pathname);

Intl API — Локализация и форматирование данных 🌍
Intl API (Internationalization) предоставляет мощные возможности для работы с форматированием чисел, дат и валют с учетом локалей пользователя.

📌 Когда это нужно?
Многоязычные веб-приложения 🌐
Корректное отображение валют и дат для разных стран 💶📆
Форматирование списков и относительных временных значений 📋

Примеры использования Intl API:
👉 Форматирование даты и времени

const date = new Date();
const formattedDate = new Intl.DateTimeFormat('fr-FR', { dateStyle: 'full' }).format(date);
console.log(formattedDate); // Exemple: mardi 8 février 2025

👉 Форматирование валют

const amount = 1234567.89;
const formattedCurrency = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(amount);
console.log(formattedCurrency); // 1.234.567,89 €

👉 Относительное форматирование времени

const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
console.log(rtf.format(-1, 'day')); // "yesterday"

Fetch + AbortController — управление сетевыми запросами 🚦
AbortController позволяет отменять сетевые запросы, выполненные с помощью fetch(). Это особенно важно для оптимизации работы с API и предотвращения "лишних" запросов.

📌 Когда это нужно?

Отмена устаревших запросов 🔄
Ограничение ресурсоемких операций 🛑
Улучшение UX в приложениях с фильтрами и автозаполнением 🔍
Простой пример Fetch + AbortController:

const controller = new AbortController();
const signal = controller.signal;

fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Запрос отменен');
    } else {
      console.error('Ошибка:', err);
    }
  });

// Отмена запроса через 2 секунды
setTimeout(() => controller.abort(), 2000);

👉 Если запрос не завершится за 2 секунды, вы увидите сообщение "Запрос отменен".

Service Workers — кэширование и оффлайн-доступ 🌐
Service Workers — это скрипты, которые работают в фоновом режиме и позволяют кэшировать ресурсы сайта, обеспечивая его работу даже без подключения к интернету.

📌 Когда это нужно?
Оффлайн-режим приложения 📴
Улучшение производительности через кэширование ⚡
Реализация push-уведомлений 🔔

📄 sw.js (файл Service Worker)

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll(['/index.html', '/styles.css', '/script.js']);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

📄 Регистрация Service Worker в основном файле

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(() => console.log('Service Worker зарегистрирован'))
    .catch(err => console.error('Ошибка регистрации:', err));
}

Proxy и Reflect — управление объектами и ловушки 🪞
Proxy — это объект, который позволяет перехватывать и изменять базовые операции JavaScript (доступ к свойствам, вызовы методов и т.д.). Reflect предоставляет методы для работы с этими операциями.

📌 Когда это нужно?
Валидация данных 🔍
Ловушки для динамических операций 🚨
Реактивные данные (как в Vue.js) 🔄
Логирование доступа к объектам

Пример:

const target = {
  message: 'Hello world'
};

const handler = {
  get: (obj, prop) => {
    console.log(`Доступ к свойству "${prop}"`);
    return prop in obj ? obj[prop] : 'Свойство не найдено';
  },
  set: (obj, prop, value) => {
    console.log(`Изменение свойства "${prop}" на значение "${value}"`);
    obj[prop] = value;
    return true;
  }
};

const proxy = new Proxy(target, handler);

// Чтение свойства
console.log(proxy.message); // "Hello world"
// Попытка чтения несуществующего свойства
console.log(proxy.nonExistent); // "Свойство не найдено"
// Изменение значения
proxy.message = 'Привет, мир!';

RequestAnimationFrame — плавные анимации без лагов 🎞️
requestAnimationFrame() — это API для создания плавных анимаций, которые синхронизируются с частотой обновления экрана (обычно 60 кадров в секунду). Это более эффективная альтернатива setInterval() и setTimeout() для анимаций.

📌 Когда это нужно?

Создание плавных анимаций 🎭
Оптимизация производительности 🎯
Динамическое обновление интерфейса без лишней нагрузки 🖥️
Простой пример анимации:

const box = document.querySelector('.box');

let position = 0;
function animate() {
  position += 2;
  box.style.transform = `translateX(${position}px)`;

  if (position < 300) {
    requestAnimationFrame(animate);
  }
}
animate();

📄 HTML:

<div class="box" style="width: 50px; height: 50px; background: red; position: absolute;"></div>

WebGL — рендеринг 3D-графики прямо в браузере 🎮
WebGL (Web Graphics Library) — это API, позволяющее рендерить 2D и 3D-графику с аппаратным ускорением прямо в браузере. С его помощью можно создавать сложные визуальные эффекты, 3D-игры и анимации.

📌 Когда это нужно?

Создание 3D-игр 🎮
Генерация сложной графики 🔥

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Создаем куб
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

WebRTC — передача аудио, видео и файлов без сервера 🎥
WebRTC (Web Real-Time Communication) — это API, позволяющее браузерам и мобильным устройствам обмениваться аудио, видео и файлами напрямую, без необходимости в сервере.

📌 Когда это нужно?
Видеозвонки и аудиочаты 📞
Онлайн-конференции 🖥️
Обмен файлами напрямую 🔄
Игры с P2P-соединением 🎮
Простой пример видеозвонка через WebRTC:

📄 Запрос камеры и микрофона:

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then((stream) => {
    document.querySelector('video').srcObject = stream;
  })
  .catch((error) => console.error('Ошибка доступа:', error));

📄 HTML:

<video autoplay></video>

OffscreenCanvas — рендеринг без влияния на основную страницу 🎨
OffscreenCanvas позволяет рендерить графику в фоновом потоке, не загружая основной поток JavaScript, что улучшает производительность.

📌 Когда это нужно?

Визуализация больших данных 📊
Работа с графикой в фоновом режиме 🖌️
Обработка изображений и видео 🎞️
Простой пример OffscreenCanvas:
📄 Выполнение рендеринга в Web Worker:

javascript
Копировать
Редактировать
const worker = new Worker('worker.js');
const canvas = document.querySelector('canvas');
const offscreen = canvas.transferControlToOffscreen();
worker.postMessage({ canvas: offscreen }, [offscreen]);

📄 worker.js (Web Worker):

self.onmessage = (event) => {
  const ctx = event.data.canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 100, 100);
};

📄 HTML:

<canvas width="500" height="500"></canvas>

Web Components — создание переиспользуемых UI-компонентов ⚛️
Web Components — это нативный способ создавать кастомные HTML-элементы с инкапсулированной логикой и стилями, без необходимости в сторонних фреймворках.

📌 Когда это нужно?
Разработка независимых UI-компонентов 🏗️
Создание библиотек компонентов 🎨
Улучшение масштабируемости проектов 🚀

Простой пример Web Component:
📄 Создание кастомного элемента:

class MyButton extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `<button>Нажми меня</button>`;
  }
}

customElements.define('my-button', MyButton);

📄 Использование в HTML:

<my-button></my-button>

IndexedDB — работа с локальной базой данных 🗄️
IndexedDB — это встроенная база данных в браузере, которая позволяет хранить большие объемы данных и выполнять быстрые запросы без нагрузки на сеть.

📌 Когда это нужно?
Хранение данных оффлайн 📂
Кэширование сложных запросов 📊
Разработка PWA (прогрессивных веб-приложений) 📱

Простой пример работы с IndexedDB:
📄 Создание базы данных и добавление данных:

const request = indexedDB.open('MyDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore('users', { keyPath: 'id' });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction('users', 'readwrite');
  const store = transaction.objectStore('users');
  store.add({ id: 1, name: 'Alice' });
};