👩‍💻 Поля формы, которые сами подстраиваются под текст!

CSS теперь умеет автоматически менять размер input, textarea и select в зависимости от содержимого, раньше для этого писали скрипты.

Просто добавьте:

input, textarea, select {
  field-sizing: content;
}

Теперь ширина input и select, а высота textarea растут вместе с содержимым. У select размер подстраивается под выбранный пункт.

Чтобы поля не ломали адаптив и не вылезали за контейнер, ограничиваем максимальный размер и задаём минимальный:

input, textarea, select {
  field-sizing: content;
  min-width: 8ch;
  max-width: 100%;
}

Работает и для textarea, она расширяется по мере ввода, без resize-хэндлов и скриптов:

textarea {
  field-sizing: content;
}

Поддержка пока не во всех браузерах.

🔥 В итоге форма выглядит аккуратно и реагирует на пользователя без JS.

📣 Code Ready | #совет

👍 HTMLBOOK — удобный справочник по HTML и CSS на русском!

Ресурс для изучения вёрстки, где собрана база по HTML, CSS и созданию сайтов. Здесь можно быстро разобраться в тегах, атрибутах, стилях, структуре страниц и типовых приёмах оформления. Материалы написаны простым языком, есть самоучители, примеры и пояснения, поэтому сайт удобно использовать как шпаргалку во время работы.

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

📣 Code Ready | #сайт

❤️ Полезная статью на Хабре: «Интересные HTML и CSS фичи, которые почему-то обходят стороной»

В этой статье:
• Показано, как упростить разметку и логику форм без лишнего JS;
• Разобраны малоиспользуемые возможности для аккуратной типографики, позиционирования и валидации;
• На примерах видно, как писать чище, короче и гибче, используя то, что уже давно есть в стандартах.

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

📣 Code Ready | #статья

Определяем готовность DOM через DOMContentLoaded!

DOMContentLoaded срабатывает после разбора HTML и построения DOM — можно безопасно запускать клиентский код, не дожидаясь полной загрузки страницы. Не ждёт изображения и другие ресурсы, но может задерживаться блокирующими CSS и синхронными скриптами.

Подписка на событие:

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM готов');
});

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

Событие load на объекте window срабатывает позже — после загрузки всех зависимых ресурсов страницы (изображений, стилей, шрифтов, iframe и т.д.):

window.addEventListener('load', () => {
  console.log('Страница полностью загружена');
});

Используйте load только когда действительно необходимы уже загруженные ресурсы (например, для получения фактических размеров изображений).

Если скрипт подключается динамически или выполняется после загрузки документа, событие DOMContentLoaded может уже произойти. В этом случае следует проверить document.readyState:

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init);
} else {
  init();
}

function init() {
  console.log('Инициализация');
}

Такой паттерн гарантирует корректный запуск независимо от момента подключения скрипта.

🔥 DOMContentLoaded срабатывает один раз за жизненный цикл документа и является базовой точкой запуска клиентского кода сразу после готовности структуры страницы.

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

☕️ JS Basic Tasks — практический задачник по JavaScript и DOM!

Репозиторий содержит набор заданий и учебный проект по работе с JavaScript, интерфейсами и браузерным API. Здесь последовательная практика: манипуляции с DOM, события, формы, работа с данными и построение интерактивных элементов. Отличный вариант, если хочешь попрактиковаться.

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

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

👩‍💻 Разрешаем выбор нескольких значений!

С атрибутом multiple можно выбрать несколько имейлов или файлов в <input>, либо несколько вариантов в списке <select>.

В зависимости от элемента поведение отличается:

• для file — можно загрузить несколько файлов одновременно;
• для select — становится доступен множественный выбор пунктов списка;
• для email — можно ввести несколько адресов через запятую.

multiple делает интерфейс гибче и избавляет пользователя от повторяющихся действий при работе с формами.

📣 Code Ready | #атрибут

👩‍💻 Не хочется каждый раз писать базовую структуру вручную?

Simple React Snippets — добавляет быстрые шаблоны для React: функциональные компоненты, импорт React, хуки, export по умолчанию и другие часто используемые конструкции. Вводишь короткое сокращение, получаешь готовый каркас компонента.

📣 Code Ready | #vscode

📂 Шпаргалка по методам поиска в строках!

Например, startsWith(), endsWith() и includes() используются для логических проверок содержимого строки, а indexOf() и lastIndexOf() — для получения позиции первого и последнего вхождения подстроки.

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

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

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

☕️ 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 | #статья