Катерина | Про Frontend

Распределение условных типов и infer в TypeScript 🤩 В TypeScript условные типы по умолчанию распространяются по объединениям (A | B). Это часто полезно, но иногда приводит к неожиданным результатам. Простое и надёжное решение — спрятать параметр в кортеж: [T] extends [X] ? ... 🧩 Проблема: Условный тип вида T extends X ? A : B при подстановке T = A | B автоматически разбивается и проверяется для каждого члена объединения отдельно. Такой механизм называется distributive conditional types. type I...

Cumulative Layout Shift: почему страница «прыгает» и как это остановить 🤓 Cumulative Layout Shift (CLS) — это метрика, которая показывает, насколько часто и насколько сильно элементы страницы неожиданно смещаются после первого рендера. Браузер для каждого такого сдвига оценивает, какая часть экрана была затронута и как далеко элементы уехали, а затем суммирует эти значения. В итоге CLS отражает не скорость загрузки, а стабильность интерфейса во времени. 📚 Откуда берётся CLS Почти всегда причин...

Сейчас все подводят итоги, и я долго думала — писать ли тоже. Чем честнее смотришь на год, тем легче принять: он был непростым для канала. Активность немного просела, многие планы отложились, а фокус всё чаще уходил в личные дела. Иногда просто не хватало времени и сил проявляться так, как хотелось — и это тоже часть истории, хотя принять это было непросто. 😒 Вместе с тем год подарил много хорошего: были разобраны интересные темы, снято несколько видео, а также получен важный опыт. 👏 Были публ...

Как сделать «скрытый, но находимый» контент? 🔍 Представьте: у вас длинная страница с FAQ, аккордеонами и сворачиваемыми разделами. Пользователь нажимает Ctrl/Cmd+F, вводит слово — и... браузер ничего не показывает, потому что нужный текст спрятан в свернутом аккордеоне. Раздражает? 😔 Для таких случаев есть hidden="until-found" — атрибут, который позволяет визуально скрывать контент, но оставлять его доступным для поиска на странице. Если браузер находит совпадение, он автоматически раскрывает ...

«Хочу стиль для p в header, но не хочу повышать специфичность» 😎 Иногда самая тривиальная задача — задать стиль для p внутри header — перерастает в бесконечную гонку селекторов. Вы пишете header p { … }, кто-то добавляет .text { … }, вы усложняете селекторы, и проект медленно погружается в «адские» веса CSS. 😞 К счастью, есть аккуратный и очень полезный приём — использовать :where() 🧩 Что делает :where(): :where() — это CSS-псевдокласс, который принимает список селекторов и всегда имеет нулев...

Обработка комбинаций клавиш 🧑‍💻 Комбинация клавиш используют для обычных вещей: сохранить данные, перейти между экранами, ускорить работу. В JavaScript это реализуется довольно просто, если понимать, как работают события клавиатуры. Немного теории ✔️ Комбинация клавиш — это одно событие keydown, внутри которого мы проверяем: ⏺️ какую клавишу нажали; ⏺️ зажаты ли модификаторы (Ctrl, Shift, Alt, Meta); ✔️ В браузере нет отдельного события “Ctrl+S” — всё делается через условия. Ключевые свойства ...

Связность и сцепленность: как написать код, который не боишься менять 🧩 Представьте проект как дом. Комнаты — это модули и компоненты. В хорошем доме каждая комната имеет своё назначение: кухня для готовки, спальня для сна, ванная для гигиены. Если в одной комнате стоит плита, кровать и стиральная машина, жить неудобно — это низкая связность: элементы внутри модуля занимаются разными вещами. 😏 Двери и коридоры — это интерфейсы и API между модулями. Хорошие двери простые и предсказуемые: можно ...

Когда нужен приоритет загрузки 🤔 Ленивая загрузка (loading="lazy") удобна: экономит трафик и ускоряет загрузку страницы за счёт отложенной загрузки картинок, которые пока не видны пользователю. Однако если вы не укажете приоритет для критичных картинок, браузер сам примет решение о порядке загрузки — а его алгоритмы могут не совпасть с вашими целями. ☹️ В результате изображение или шапка могут загрузиться позже, чем нужно: это ухудшит LCP и создаст ощущение «медленной» страницы; при отсутствии ...

firstValueFrom vs lastValueFrom 🤨 В RxJS мы часто работаем с Observables — потоками данных. Иногда нужно получить одно значение из Observable как Promise, чтобы использовать async/await. Для этого есть firstValueFrom и lastValueFrom.😉 Немного теории: ✔️ firstValueFrom(obs$) — возвращает Promise, который резолвится при первом эмите и автоматически отписывается; ✔️ lastValueFrom(obs$) — возвращает Promise, который резолвится только после завершения Observable и содержит последний эмит ...

INP: как измеряется отзывчивость страницы 🤨 Иногда сайт загружается быстро, контент появляется почти сразу, но пользоваться им всё равно не очень приятно. Клик срабатывает с задержкой, поле ввода реагирует не сразу, интерфейс как будто «думает». Формально всё загрузилось, но ощущение отзывчивости — так себе. 😥 Именно такие ситуации описывает INP (Interaction to Next Paint). INP — это метрика, которая показывает, насколько быстро интерфейс реагирует на действия пользователя. Она измеряет задерж...