Code Ready | Frontend

☕️ Полезную статью нашел на Хабре: «Что происходит внутри 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 | #совет

👩‍💻 В сеть вывалилась гигантская куча курсов и книг от топовых IT‑школ Держи сотни гигабайт свежих уроков, и каждую неделю мы подкидываем ещё! • 1612 ГБ — DevOps • 1402 ГБ — Python • 1300 ГБ — C, C++ • 1815 ГБ — Frontend • 1515 ГБ — Backend • 898 ГБ — ИБ, Хакинг • 996 ГБ — Kotlin, Swift • 212 ГБ — JavaScript • 315 ГБ — Flutter • 820 ГБ — Go, PHP • 419 ГБ — Java, Rust • 648 ГБ — GameDev • 517 ГБ — Windows, Linux • 998 ГБ — Дизайн (UX/UI) • 617 ГБ — Нейросети (ML/RL) • 546 ГБ — БД (SQL & NoSQL) • 687 ГБ — Аналитика данных • 115 ГБ — QA-тестирование Подписывайся и не плати за то, что можно получить бесплатно