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

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

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

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

📣 Code Ready | #vscode

👨👨👨👨👨👨👨👨👨👨

Каналы с IT мероприятиями

Подписывайся,
чтобы не пропустить 🤘

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

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