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

С атрибутом 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 | #статья

👨👨👨👨👨👨👨👨👨👨

Каналы с 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. Вакансии, которых нет на ХХ.РУ