Code Ready | Frontend

Наблюдение за изменением размера любого элемента! Есть нативный инструмент 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 даёт контроль над размерами элементов и позволяет строить предсказуемые, адаптивные интерфейсы. 📣 JS Ready | #совет

Забудь про ChatGPT. Это как просить калькулятор нарисовать картину. Пока массы гоняют одни и те же скучные запросы в зацензуренные боты, реальная революция ИИ в канале «Техноразум»: — Нейросети, которые не боятся запретных тем ( 🔞) — Скрытые функции, которые другие ИИ прячут за платную подписку или цензурой — Настоящие инструкции и промты для взлома творческих шаблонов Переходи к настоящим возможностям, забудь про детский сад нейросетей: https://t.me/+ykoDhAfKfWRiODVi

📂 Напоминалка по работе с массивами в JavaScript! Например, map() позволяет преобразовать каждый элемент массива, filter() — отфильтровать данные по условию, а slice() — получить часть массива без изменения исходного. На картинке — основные методы массивов, которые помогают работать с данными быстрее и писать чистый код. Сохрани, чтобы не забыть! 📣 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 | #совет

🤬Chat GPT отключат в РФ Офицальная причина была озвучена такая "Они нагружают систему, но купить платную версию не могут из-за своего местоположения". Другие крупные ИИ-сервисы начинают подхватывать эту политику. Чтоб не стать жертвой изоляции рунета, просто сохрани канал Доктор GPT - мы уже готовим обходку к новой системе безопасности. Не жди бана, подпишись: @gpt

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

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

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

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 | #практика

👨👨👨👨👨👨👨👨👨👨 Каналы с IT мероприятиями Подписывайся, чтобы не пропустить 🤘 1. IT мероприятия для стажеров и студентов 2. IT мероприятия по РФ 3. IT мероприятия и хакатоны 4. Бесплатные IT мероприятия 5. IT мероприятия онлайн 6. IT мероприятия Москва 7. IT мероприятия Санкт-Петербург

👩‍💻 Удобный просмотр таблиц в формате CSV! Rainbow CSV раскрашивает столбцы в разные цвета, благодаря чему данные становятся наглядными и легко читаемыми прямо в редакторе. Помогает быстро ориентироваться в таблицах, находить нужные значения и проверять корректность структуры без использования сторонних программ. Особенно полезно при работе с логами и большими наборами данных. 📣 Code Ready | #vscode

👩‍💻 Полноэкранная прокрутка с фиксацией секций! Полноэкранная фиксация секций нужна, когда важно управлять ритмом восприятия контента. Это упрощает навигацию, усиливает фокус и делает структуру интерфейса предсказуемой. Как работает:

• контейнер получает scroll-snap-type, который включает режим фиксации прокрутки; • каждая секция занимает высоту экрана через 100vh; • scroll-snap-align указывает точку прилипания; • режим mandatory гарантирует чёткую остановку на каждом экране.

Это чистый нативный способ собрать лендинг, презентационный экран или onboarding без JS. 📣 Code Ready | #фишка

👨👨👨👨👨👨👨👨👨👨 Каналы с Junior IT вакансиями и стажировками Подписывайся и забирай свой оффер 🤘 1. Стажировки и вакансии по России и миру 2. IT вакансии по СНГ 3. IT стажировки по СНГ 4. ИИ-ассистент для автооткликов 5. IT стажировки и волонтерства 6. IT стажировки в топовых компаниях мира 7. Удалённые IT вакансии и стажировки 8. Python вакансии и стажировки 9. БИГТЕХ вакансии и стажировки 10. Design вакансии и стажировки 11. QA вакансии и стажировки 12. Junior вакансии и стажировки 13. Frontend вакансии и вопросы собесов 14. Вакансии и стажировки для аналитиков 15. Вакансии в русских стартапах за границей 16. Вакансии и стажировки для DevOps 17. Вакансии, которых нет на ХХ.РУ

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

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

📣 Code Ready | #статья

Убираем задержку клика и лишние тап-эффекты! На мобильных браузерах элементы могут реагировать с задержкой, потому что система ожидает двойной тап для зума или обрабатывает жесты прокрутки. Свойство touch-action позволяет явно указать браузеру, какие жесты разрешены, и тем самым улучшить отзывчивость интерфейса. Если элемент — обычная кнопка или ссылка, можно оставить только базовое взаимодействие:

.button {
  touch-action: manipulation;
}

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

.card {
  touch-action: manipulation;
}

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

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

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

8 марта уже на горизонте. Цветы — это база. А что добавим к релизу? Если хочется сделать красивый апгрейд праздника, присмотритесь к дизайнерским игрушкам от Super Toys! Это не только милый сувенир, но и стильные арт-объекты от современных художников и культовых брендов, которые украсят её рабочий стол или полку и будут напоминать о вашем вкусе и внимании гораздо дольше, чем праздничные сторис. Мы собрали специальную праздничную подборку — чтобы вы закрыли задачу по подарку быстро и красиво! Прокачайте 8 марта до версии Pro! Реклама. ООО "НОВЫЕ МЕДИА". ИНН 7813407148. erid: 2W5zFGjfcYZ

👩‍💻 Нужно быстро понять, когда и как менялся код? Git History — показывает историю изменений прямо в VS Code: коммиты по файлу, авторов правок, различия между версиями и изменения строк. Можно быстро посмотреть старый код, найти причину бага или понять логику изменений. 📣 Code Ready | #vscode

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

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

Отлично подходит для числовых полей, дат и диапазонов, делая валидацию более наглядной. 📣 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 | #практика

В России можно посещать IT-мероприятия хоть каждый день: как оффлайн, так и онлайн Но где их находить? Как узнавать о них раньше, чем когда все начнут выкладывать фотографии оттуда? Переходите на канал IT-Мероприятия России. В нём каждый день анонсируются мероприятия со всех городов России 📆 в канале размещаются как онлайн, так и оффлайн мероприятия; 👩‍💻 можно найти ивенты по любому стеку: программирование, frontend-backend разработка, кибербезопасность, дата-аналитика, osint, devops и другие; 🎙 разнообразные форматы мероприятий: митапы с коллегами по цеху, конференции и вебинары с известными опытными специалистами, форумы и олимпиады от важных представителей индустрии и многое другое А чтобы не искать по разным форумам и чатам новости о предстоящих ивентах: 🚀 IT-мероприятия России — подписывайся и будь в курсе всех предстоящих мероприятий!

☕️ Teamtreehouse — базовый курс по основам языка JS! Структурированная программа обучения, охватывающая ключевые концепции языка: синтаксис, условные конструкции, функции и основы отладки. Материал подаётся через видеоуроки и задания, что позволяет закреплять теорию на практике и формировать базу для дальнейшего изучения веб-разработки. 📌 Оставляю ссылочку: teamtreehouse.com 📣 Code Ready | #сайт

Как легко добавить фон, эффект или оверлей позади элемента? Часто нужно подложить декоративный слой под элемент, но при этом не менять разметку и не добавлять лишние div. Псевдоэлемент с отрицательным z-index решает задачу. Создаём локальный стек наложения, чтобы слой оставался только внутри компонента:

.card {
  position: relative;
  z-index: 0;
}

Теперь можно безопасно увести псевдоэлемент назад:

.card::before {
  position: absolute;
  inset: 0;
  z-index: -1;
}

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

.card::before {
  background: radial-gradient(circle, #4da3ff, transparent);
}

🔥 В итоге получаем некий фоновый слой компонента без лишней разметки и без проблем со слоями. 📣 Code Ready | #совет