☕️ Teamtreehouse — базовый курс по основам языка JS!

Структурированная программа обучения, охватывающая ключевые концепции языка: синтаксис, условные конструкции, функции и основы отладки. Материал подаётся через видеоуроки и задания, что позволяет закреплять теорию на практике и формировать базу для дальнейшего изучения веб-разработки.

📌 Оставляю ссылочку: teamtreehouse.com

📣 Code Ready | #сайт

ResizeObserver — отслеживание изменения размеров элементов!

ResizeObserver — нативный Web API для отслеживания изменения размеров DOM-элементов. Позволяет реагировать на пересчёт layout без window.resize, опроса размеров и сторонних библиотек.

Особенно полезен для адаптивных компонентов, canvas, виртуализации и сложных UI, где размер элемента меняется независимо от окна.

Создаём наблюдатель:

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    console.log(entry.contentRect.width, entry.contentRect.height);
  });
});

Колбэк вызывается после пересчёта layout в отдельной фазе доставки уведомлений (обычно до этапа отрисовки). Уведомления могут батчиться браузером.

Если внутри колбэка менять размеры наблюдаемого элемента, можно получить предупреждение: ResizeObserver loop limit exceeded или ResizeObserver loop completed with undelivered notifications. Это защита от бесконечных циклов перерасчёта.

Пример 1 — отслеживание размера элемента:

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

observer.observe(box);

entry.contentRect содержит размеры content box — области содержимого без padding, border и margin.

Для более точных измерений лучше использовать contentBoxSize или borderBoxSize.

Пример 2 — адаптация UI под ширину контейнера:

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

const responsiveObserver = new ResizeObserver(entries => {
  const { width } = entries[0].contentRect;

  if (width < 500) {
    container.classList.add('compact');
  } else {
    container.classList.remove('compact');
  }
});

responsiveObserver.observe(container);

Подходит для container-based адаптивности, когда поведение зависит от размера контейнера, а не viewport. (Для чисто стилевых задач также можно использовать CSS Container Queries.)

Пример 3 — работа с несколькими элементами:

document.querySelectorAll('.widget')
  .forEach(el => observer.observe(el));

Один ResizeObserver может отслеживать любое количество элементов — браузер оптимизирует доставку уведомлений.

Пример 4 — точные размеры через borderBoxSize:

const preciseObserver = new ResizeObserver(entries => {
  for (const entry of entries) {
    const size = Array.isArray(entry.borderBoxSize)
      ? entry.borderBoxSize[0]
      : entry.borderBoxSize;

    console.log(size.inlineSize, size.blockSize);
  }
});

borderBoxSize учитывает padding и border (аналог box-модели border-box). В современных браузерах поддержка хорошая, но исторически API различался, поэтому часто делают фоллбек на contentRect.

Пример 5 — прекращение наблюдения:

observer.unobserve(box);   // перестать следить за конкретным элементом
observer.disconnect();     // отключить наблюдатель полностью

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

🔥 ResizeObserver — базовый инструмент для построения адаптивных компонентов, реагирующих на реальные размеры контейнера, а не только на размер окна.

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

👩‍💻 Указываем, по каким линиям обрезать вертикальные отступы текста.

Свойство text-box-edge задаёт, по каким визуальным линиям текста нужно обрезать вертикальные края блока, когда используется text-box-trim. Это помогает более точно контролировать высоту текстового контейнера.

Границы текста можно задать разными способами.

Верхняя граница (top-edge):
• cap — по верхушкам заглавных букв;
• ex — по высоте строчных букв;
• text — по фактическому верху видимых символов.
Нижняя граница (bottom-edge):
• alphabetic — по базовой линии текста;
• text — по самой нижней части символов (включая «хвосты»).

Отлично подходит для числовых полей, дат и диапазонов, делая валидацию более наглядной.

📣 Code Ready | #свойство

👩‍💻 Нужно быстро понять, когда и как менялся код?

Git History — показывает историю изменений прямо в VS Code: коммиты по файлу, авторов правок, различия между версиями и изменения строк. Можно быстро посмотреть старый код, найти причину бага или понять логику изменений.

📣 Code Ready | #vscode

Убираем задержку клика и лишние тап-эффекты!

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

Свойство touch-action позволяет явно указать браузеру, какие жесты разрешены, и тем самым улучшить отзывчивость интерфейса.

Если элемент — обычная кнопка или ссылка, можно оставить только базовое взаимодействие:

.button {
  touch-action: manipulation;
}

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

Это полезно для кнопок, карточек, меню и любых интерактивных элементов, где важна отзывчивость:

.card {
  touch-action: manipulation;
}

Для элементов с горизонтальным свайпом можно разрешить только нужное направление:

.slider {
  touch-action: pan-x;
}

🔥 В итоге интерфейс ощущается быстрее, уменьшаются случайные зумы и лишние жесты, без JS. Используйте точечно на интерактивных элементах.

📣 Code Ready | #совет

☕️ Полезную статью нашел на Хабре: «Что происходит внутри Angular и React при решении одних и тех же задач»!

В этой статье:
• Наглядно разобрано, как оба инструмента на самом деле создают и обновляют DOM — Virtual DOM vs Incremental DOM;
• Показано, что происходит под капотом при рендерах, эффектах, асинхронности и архитектуре приложений;
• Объясняется, почему одинаковые задачи в React и Angular приводят к разным затратам ресурсов, сборке и поведению интерфейса.

🔊 Продолжайте читать на Habr!

📣 Code Ready | #статья

👩‍💻 Удобный просмотр таблиц в формате CSV!

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

📣 Code Ready | #vscode

performance.now — монотонное измерение прошедшего времени!

performance.now() — Web API для точного измерения времени выполнения и длительности операций. В отличие от Date.now(), возвращает монотонно возрастающее время с дробной точностью.

Значение (DOMHighResTimeStamp) — миллисекунды от time origin (performance.timeOrigin), обычно начала навигации документа. Точность может ограничиваться браузером из соображений безопасности.

Простейшее измерение:

const start = performance.now();

doHeavyWork();

const end = performance.now();
console.log(`Время: ${end - start} ms`);

performance.now() удобен для профилирования синхронных операций и поиска узких мест в коде.

Пример 1 — измерение функции:

function measure(fn) {
  const t0 = performance.now();
  fn();
  const t1 = performance.now();
  return t1 - t0;
}

console.log("A:", measure(runA));
console.log("B:", measure(runB));

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

Пример 2 — измерение асинхронного кода:

async function measureAsync(fn) {
  const t0 = performance.now();
  await fn();
  return performance.now() - t0;
}

measureAsync(fetchData)
  .then(t => console.log("Время операции:", t));

Здесь измеряется общее прошедшее время операции, включая ожидание промиса.

Пример 3 — проверка бюджета кадра:

const t0 = performance.now();

renderLargeList();

const t1 = performance.now();

if (t1 - t0 > 16.7) {
  console.warn("JS-часть кадра превысила бюджет (~16.7ms при 60Hz)");
}

При 120Hz бюджет кадра уже около 8.3 ms, и в него входит не только выполнение JS, но и layout, paint и compositing.

Пример 4 — разница с Date.now:

console.log(Date.now());        // системное время
console.log(performance.now()); // монотонное время

Date.now() может изменяться при корректировке системных часов, тогда как performance.now() монотонно увеличивается в рамках текущего контекста выполнения.

🔥 performance.now() — базовый инструмент для ручного профилирования производительности и быстрых замеров в UI-коде.

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

👍 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 | #совет