👍 JavaScript Questions — систематизированная база вопросов и разборов по ключевым концепциям!

Репозиторий представляет собой сборник вопросов с объяснениями: области видимости, замыкания, прототипное наследование, типы данных и особенности работы движка. Материал особенно полезен для подготовки к собеседованиям, повторения базовых принципов и укрепления фундаментальных знаний для разработки.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

Скрываем курсор ввода без JS!

Иногда нужно сделать поле ввода, которое визуально не выглядит как обычный input. Например: кастомные OTP-поля, PIN-коды, маски или декоративные формы.

CSS позволяет управлять цветом курсора ввода через caret-color:

input {
  caret-color: red;
}

Обычно его используют, чтобы изменить цвет курсора под дизайн. Но есть и такой приём.

Если задать прозрачный цвет, курсор просто исчезнет:

input {
  caret-color: transparent;
}

Поле остаётся полностью рабочим: текст вводится, фокус есть, клавиатура открывается, но мигающий caret не отвлекает пользователя.

Это удобно для кастомных UI: PIN-поля, игровые интерфейсы, терминалы, текстовые эффекты.

.otp-input {
  letter-spacing: .5em;
  caret-color: transparent;
}

🔥 В итоге можно делать аккуратные кастомные input-интерфейсы. Нюанс: скрытая каретка может немного ухудшать UX — пользователь не видит позицию ввода.

📣 Code Ready | #совет

📂 Напоминалка по работе с массивами в JavaScript!

Например, map() позволяет преобразовать каждый элемент массива, filter() — отфильтровать данные по условию, а slice() — получить часть массива без изменения исходного.

На картинке — основные методы массивов, которые помогают работать с данными быстрее и писать чистый код.

Сохрани, чтобы не забыть!

📣 Code Ready | #ресурсы

Наблюдение за изменением размера любого элемента!

Есть нативный инструмент ResizeObserver, который реагирует именно на изменение размеров конкретного элемента:

const ro = new ResizeObserver(entries => {
  const rect = entries[0].contentRect;
  console.log('width:', rect.width, 'height:', rect.height);
});

Достаточно наблюдать за элементом:

ro.observe(document.querySelector('#box'));

Теперь любое изменение его ширины или высоты - мгновенно вызывает callback.

Можно остановить наблюдение:

ro.disconnect();

🔥 ResizeObserver даёт контроль над размерами элементов и позволяет строить предсказуемые, адаптивные интерфейсы.

📣 Code Ready | #совет

👩‍💻 Удобное редактирование Markdown-файлов!

Markdown All in One расширяет возможности работы с Markdown в VS Code: автодополнение, быстрые команды форматирования, создание оглавления, предпросмотр, горячие клавиши и удобная навигация по документу. Всё, что нужно для комфортной работы с документацией и заметками.

📣 Code Ready | #vscode

📂 Напоминалка по CSS Position!

Свойство position управляет тем, как элементы располагаются на странице и относительно чего происходит их смещение.

Например, relative позволяет сдвигать элемент относительно его обычного положения, absolute позиционирует элемент относительно ближайшего позиционированного родителя.

Сохрани, чтобы не забыть!

📣 Code Ready | #ресурсы

Оптимизируем вертикальные отступы между элементами!

Часто в верстке нужно просто равномерное расстояние между элементами: абзацами, карточками, пунктами списка, блоками формы. Обычно делают так — добавляют margin-bottom каждому элементу.

.item {
  margin-bottom: 1rem;
}

Проблема в том, что у последнего элемента остаётся лишний отступ, и начинается возня с :last-child.

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

.stack > * + * {
  margin-top: 1rem;
}

Селектор * + * означает: любой элемент, который идёт сразу после другого элемента.

То есть первый элемент отступа не получает, а все остальные получают автоматически:

.form > * + * {
  margin-top: 1.2rem;
}

🔥 Это делает верстку чище, элементы можно добавлять, удалять, менять местами, и расстояния всегда остаются корректными.

📣 Code Ready | #совет

matchMedia — проверка и отслеживание media queries!

matchMedia() — Web API, позволяющий проверять и отслеживать media queries напрямую из JavaScript. Это помогает синхронизировать поведение JS-кода с CSS-адаптивностью.

Функция возвращает объект MediaQueryList, содержащий результат проверки media query.

Базовое использование:

const media = window.matchMedia('(max-width: 768px)');

console.log(media.matches);

matches — boolean, показывающий соответствует ли текущий viewport заданному media query.

Пример 1 — проверка условия:

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.body.classList.add('dark-theme');
}

Так можно адаптировать поведение интерфейса под системные настройки пользователя.

Пример 2 — отслеживание изменения media query:

const media = window.matchMedia('(max-width: 768px)');

media.addEventListener('change', e => {
  console.log('mobile:', e.matches);
});

Событие change срабатывает при изменении состояния media query.

Это позволяет реагировать на изменение состояния media query без использования window.resize.

Пример 3 — адаптация логики интерфейса:

const media = window.matchMedia('(max-width: 600px)');

function updateLayout(mql) {
  if (mql.matches) {
    enableMobileLayout();
  } else {
    enableDesktopLayout();
  }
}

updateLayout(media);
media.addEventListener('change', updateLayout);

Обработчик сначала вызывается вручную для установки начального состояния, затем автоматически при изменении media query.

Пример 4 — учет пользовательских настроек доступности:

const motion = window.matchMedia('(prefers-reduced-motion: reduce)');

if (motion.matches) {
  disableAnimations();
}

Media queries позволяют учитывать пользовательские настройки доступности.

Пример 5 — отслеживание ориентации экрана:

const orientation = window.matchMedia('(orientation: portrait)');

orientation.addEventListener('change', e => {
  console.log('portrait:', e.matches);
});

matchMedia используется для: адаптивной логики интерфейса, синхронизации JavaScript и CSS media queries, учета пользовательских настроек доступности и оптимизации поведения UI на разных устройствах.

🔥 matchMedia — удобный способ проверять и отслеживать media queries напрямую из JavaScript.

📣 Code Ready | #практика

💅 Modern JS Cheatsheet — шпаргалка по JS для реальных проектов!

Это репозиторий с компактным, но очень полезным материалом. Внутри собраны ключевые концепции и паттерны, которые постоянно встречаются в коде. Всё сопровождается небольшими примерами и пояснениями, поэтому ресурс удобно использовать как быстрый справочник, когда нужно освежить синтаксис.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

👩‍💻 Шпаргалка по cursor в CSS.

Например, cursor: pointer; делает курсор в виде руки — это сигнализирует, что элемент кликабельный. А cursor: none; полностью скрывает курсор.

На картинке — 16 популярных значений свойства cursor.

Сохрани, чтобы не искать в документации каждый раз!

📣 Code Ready | #ресурсы

👩‍💻 Когда работаешь с YAML-конфигурациями!

YAML — расширение для VS Code, которое добавляет подсветку синтаксиса, автодополнение и проверку структуры YAML-файлов. Помогает быстрее писать конфиги для Docker, Kubernetes, GitHub Actions и других инструментов, сразу показывая ошибки и подсказки.

📣 Code Ready | #vscode

Как сделать аккуратный fade по краям контента без псевдоэлементов!

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

Часто для этого добавляют псевдоэлементы с градиентом:

.scroll::after {
  position: absolute;
  right: 0;
  width: 40px;
  background: linear-gradient(...);
}

Но это создаёт лишние слои, проблемы с pointer-events и иногда ломает клики.

Есть другой способ — использовать CSS-маску:

.scroll {
  mask-image: linear-gradient(to right,
    transparent,
    black 40px,
    black calc(100% - 40px),
    transparent
  );
}

mask-image управляет прозрачностью элемента, а не рисует поверх него слой.

Чёрный цвет = полностью видимый контент
Прозрачный = плавное исчезновение.

Это хорошо работает для горизонтальных списков:

.scroll {
  display: flex;
  overflow-x: auto;
  mask-image: linear-gradient(to right,
    transparent,
    black 40px,
    black calc(100% - 40px),
    transparent
  );
}

🔥 В итоге получаем нативный fade-эффект без псевдоэлементов, без лишних слоёв и без JS.

📣 Code Ready | #совет

😍 My-JS — большая база знаний по JavaScript!

Это сайт с подборкой руководств, шпаргалок и полезных материалов для JavaScript-разработчиков. Здесь собраны статьи по TypeScript, React, Node.js, Next.js и другим технологиям. На сайте можно найти объяснения сложных тем, алгоритмы и структуры данных, а также практические гайды по инструментам вроде Docker и GraphQL. Все материалы удобно структурированы.

📌 Оставляю ссылочку: my-js.org

📣 Code Ready | #сайт

navigator.sendBeacon для отправки данных при закрытии страницы!

Если нужно отправить аналитику или финальные данные сессии, обычные HTTP-запросы могут не успеть выполниться — пользователь закрыл вкладку или перешёл на другую страницу. Для таких случаев есть navigator.sendBeacon.

Метод ставит данные в очередь на отправку и не блокирует закрытие страницы.

Базовый пример:

navigator.sendBeacon('/analytics', JSON.stringify({
  event: 'page_close'
}));

Метод принимает URL и данные. Запрос отправляется методом POST.

Если нужно явно указать Content-Type: application/json, лучше передать Blob:

navigator.sendBeacon(
  '/analytics',
  new Blob(
    [JSON.stringify({ event: 'page_close' })],
    { type: 'application/json' }
  )
);

Пример 1 — отправка при скрытии страницы:

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/analytics', JSON.stringify({
      event: 'session_end',
      time: Date.now()
    }));
  }
});

visibilitychange часто используют для отправки последних метрик перед уходом пользователя. Обычно это работает стабильнее, чем beforeunload.

Пример 2 — отправка FormData:

const data = new FormData();

data.append('event', 'scroll_depth');
data.append('value', 80);

navigator.sendBeacon('/analytics', data);

Можно отправлять строки, FormData, Blob, URLSearchParams и некоторые бинарные типы данных.

Пример 3 — проверка:

const accepted = navigator.sendBeacon('/analytics', JSON.stringify({
  event: 'leave'
}));

console.log('Beacon accepted:', accepted);

Метод возвращает true, если браузер принял данные в очередь на отправку. Это не гарантия доставки, но означает, что отправка была запланирована браузером.

🔥 Если нужен ответ сервера, кастомные заголовки или полный контроль над запросом, можно использовать fetch с опцией keepalive.

📣 Code Ready | #практика