#blog
Сегодня предлагаю посмотреть статью, посвященную использованию CSS-свойства content-visibility для ускорения рендеринга веб-страниц. Основные тезисы:

- Что такое CSS Containment?
CSS Containment позволяет указать браузеру, какие части страницы независимы, что помогает браузеру принимать умные решения о рендеринге.

.container {
contain: style layout paint;
}

- Как работает content-visibility?
Свойство content-visibility указывает браузеру пропускать рендеринг невидимого контента, тем самым экономить время обработки.

- Значения content-visibility
visible: Стандартное поведение.
hidden: Контент скрыт, но состояние рендеринга сохраняется.
auto: Контент рендерится только при необходимости.

- Когда использовать content-visibility?
Для контента ниже области просмотра.
Для самодостаточных элементов.
Для контента с высокой стоимостью рендеринга.

- Когда не использовать content-visibility?
Для видимого контента.
Для небольших элементов с минимальной стоимостью рендеринга.
Для элементов, влияющих на макет страницы.

- Использование contain-intrinsic-size
Позволяет указать плейсхолдерный размер для отложенного контента.

.content-section {
content-visibility: auto;
contain-intrinsic-size: auto 600px; /* Ширина и высота плейсхолдера */
}

- Понимание свойства contain
Значение content-visibility: auto применяет style containment, layout containment и paint containment.

.container {
contain: style layout paint;
}

- Поддержка браузерами
Поддерживается всеми современными браузерами, но Firefox и Safari могут иметь особенности.

Статья - https://www.debugbear.com/blog/content-visibility-api
Официальная документация MDN по content-visibility - https://developer.mozilla.org/ru/docs/Web/CSS/content-visibility

#blog
Новая статья из серии про полезные и малоизвестные CSS-фишки. В этот раз нам поведают о следующем:

1. Используйте отдельные свойства трансформации
Вместо длинной цепочки значений для transform используйте отдельные свойства translate, rotate и scale.

.awesome-block::before {
 position: absolute;
 top: 50%;
 left: 50%;
 translate: -50% -50%;
}

2. Новый синтаксис медиа-запросов
Используйте математические знаки (<, <=, >, >=) для более явного указания диапазонов в медиа-запросах.

@media (width <= 1024px) {
 body {
  background-color: lightblue;
 }
}

3. Свойство grid-auto-flow для CSS Grid
Не обязательно использовать grid-template-columns или grid-template-rows для расположения элементов в столбец или строку. Используйте grid-auto-flow со значением row или column.

.awesome-container {
 display: grid;
 grid-auto-flow: column; /* Элементы будут выстроены в строку */
}

4. Свойство align-content для блочных элементов
Свойство align-content работает и для блочных элементов, позволяя выровнять содержимое по вертикали.

.awesome-container {
 display: block;
 align-content: center; /* Выравнивает содержимое по центру по вертикали */
}

5. Свойство outline-offset
Используйте outline-offset для смещения обводки элемента, что улучшит доступность для пользователей клавиатуры.

Статья - https://habr.com/ru/companies/ruvds/articles/896174/

#blog
В Chrome появилась интересная функция scheduler.yield()
Ее суть в том, что она позволяет обрабатывать тяжелые операции (например трансформация DOM).

Она выходит из текущий функции в основной поток, выполняет его и затем возвращается обратно.

async function respondToUserClick() {
giveImmediateFeedback();
await scheduler.yield(); // Тут выходим из respondToUserClick() в mainThread, а потом автоматически возвращаемся и продолжаем работу.
slowerComputation();
}

Раньше для этого мы использовали setTimeout(() => {}, 0), но у них есть недостатки.
Похоже, что данный инструмент позволяет их решить.
На данный момент scheduler.yield() доступен только в браузерах на базе Chromium, правда есть частичный polyfill
https://developer.chrome.com/blog/use-scheduler-yield?hl=ru

#blog Есть такая штука как Cookie Store API , которая позволяет асинхронно работать с cookies.
В Chrome данный инструмент уже давно, но его не было в safari.
Недавно, 31 марта, Safari стал его поддерживать.
В отличии от document.cookie, Cookie Store API является асинхронной (promise-based), не блокирует event-loop и с ней могут работать Service Workers (правда не в firefox).

Она позволяет:
- задавать значение куки;
- получать нотификацию при изменении (удобно для микрофронтов);
- Service worker подписываться на изменения (правда не в firefox).

https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API
https://caniuse.com/?search=Cookie%20Store%20API

#blog Интересный подход к сжатию данных Shared Compression Dictionaries.
Его суть заключается в следующем:
- пользователь скачивает основной код:
например, страница с footer;
- затем пользователь скачивает вторую страницу с тем же footer, только в ней указывается не сам footer, а позиция символов на него с первой страницы.

Это позволяет значительно уменьшить размер второй страницы.
Есть тест с уменьшением размера bootstrap на 76%.
Работает это через установку заголовоков в http.
Первая страница:
Use-As-Dictionary: match="/js/app.*.js" // задает словарь
Вторая страица:
Available-Dictionary: - хэш SHA-256 словаря // ссылается на словарь

Данный алгоритм поддерживает Brotli и Zstandard.
Из недостатков можно отметить то, что он совсем не поддерживается в Safari.
Пока не поддерживается и в Firefox, но там висит один баг.
https://www.debugbear.com/blog/shared-compression-dictionaries
https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Compression_dictionary_transport

#blog Вышел итог опроса Stateofai 2025.
Первое, что бросилось в глаза, так это то, что AI больше всего используется фронтенд разработчиками)

Выводы:
- в топе из моделей chatgpt;
- в топе из IDE Сursor, слышали такой?;
- GitHub Copilot в топе среди аcсистентов;
- DALL·E в топе по генерации картинок;
- больше всего AI используется для кодогенерации и поиска;
- в топе языков использования AI - javanoscript/typenoscript.

Смотрим отчет, чтобы узнать текущие тренды, подсмотреть новые инструменты, модели!
https://2025.stateofai.dev/ru-RU/

#blog

Сегодня предлагаю посмотреть интересную статью о современном attr() в CSS

Ранее attr() поддерживал только текстовые значения, но новый синтаксис позволяет указывать тип данных: attr(data-color type(<color>)). Поддержка пока весьма ограничена, но скоро это должно добраться до baseline.

Примеры использования современного attr() из статьи:
1. Назначение номеров колонок, шаблонов областей и значений grid-gap в CSS Grid
2. Доступ к атрибуту rows в textarea: Умножение значения rows на определённое значение для установки минимальной высоты
3. Задержка анимации: Установка animation-delay на основе атрибута data-delay
4. Изменение цветовой тени
5. Фоновые изображения: Установка фонового изображения на основе атрибута data-bg
6. Прогресс-бар: Установка цвета и прогресса на основе атрибутов data-color и data-progress.

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

Почему стоит использовать современный attr() вместо инлайн-стилей?
1. Использование JavaScript: Доступ к атрибутам через dataset.
2. Разделение содержимого и стиля: Улучшение читаемости HTML.
3. Снижение конфликтов CSS: Предотвращение случайного переопределения стилей.


Статья - https://ishadeed.com/article/modern-attr/

#blog Интересная статья, подсвечивающая текущие проблемы понимания DDD во frontend.
В частности автор приводит "некорректный" вопрос из Твиттера на тему того, как построить проект на Angular, используя архитектуру DDD.

Какие тезисы можно выделить?

- DDD — это подход, который вы применяете в рамках своего продукта, бизнес сегмента, всей организации. Это включает весь стек: Frontend, Backend, Базы данных, а также следующие действия: развертывание, мониторинг/наблюдаемость (DevOps) и т.д., и т.п.
- Вы не делаете DDD на Frontend отдельно, так как ваш Frontend не является отдельным продуктом.
- DDD - это прежде всего стратегические паттерны, а не тактические.
- Аггрегаты практически не нужны во фронте, т.к. не сохраняют данные, да и нет задачи соблюдения консистентности при их сохранении.
- Мнорепозиторий - это не про DDD.
- Фронтенд не является отдельным ограниченным контекстом.

https://www.angularspace.com/youre-misunderstanding-ddd-in-angular-and-frontend/

#blog
По-пятничному короткая статья о статическом методе Error.isError(), если кратко:
- позволяет выявить Error без лишних действий и надежно
- поддержка пока не полная, в Safari и Opera еще не довезли
- есть ряд преимуществ над классической проверкой через instanceof Error (примеры есть в статье)
- может хорошо помочь в нормализации не-Error ошибок и приведению их к Error

статья - https://www.trevorlasn.com/blog/error-iserror-javanoscript
MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/isError

#blog Классная статья для аппологетов Playwright и LLM.
Сейчас на слуху такая технология, как Model Context Protocol (MCP).
По сути это мостик между LLM и сторонними ресурсами, например, вашим сайтом.
В статье описывается пример того, как локально поставить Playwright MCP и с помощью него попросить Copilot написать тесты на ваш сайт.

- Ставим playwright, mcp server playwright
- Запускаем mcp server playwright.
- Логинимся в copliot, задаем ему вопросы в чат (как в статье), можно на русском.

Будут сложности при написании тестов локально, т.к. серверу LLM нужно будет как-то достучаться до вашего локального сайта, но, я думаю, это решаемо.
Правда, тесты написал он криво: при запуске не сработало где-то 60%.
https://timdeschryver.dev/blog/vibe-testing-with-playwright

#blog В ngrx вышел новый эксперементальный плагин Events.
Он пока в экспериментальной версии, так что может измениться.
Его суть состоит в том, чтобы разнести логику из effect и reducer на группы и не делать из них god object.

- Создаем группы eventGroup из actions.
- Делаем для них свой effect.
- Делаем для них свой reducer.
- Диспатчим action из данной группы.

https://dev.to/ngrx/announcing-events-plugin-for-ngrx-signalstore-a-modern-take-on-flux-architecture-4dhn
https://www.angulararchitects.io/en/blog/the-new-event-api-in-ngrx-signal-store/

#news Тем временем вышел Angular 20!

Что можно отметить:
- Deprecated NgIf, NgFor, and NgSwitch
- Улучшенная отладка с помощью Angular DevTools и партнерство с Chrome для создания пользовательских отчетов Angular непосредственно в Chrome DevTools
- Экспериментальная поддержка vitest
- Начиная с Angular v20, по умолчанию Angular CLI не будет генерировать суффиксы для компонентов, директив, служб и каналов.

https://blog.angular.dev/announcing-angular-v20-b5c9c06cf301
https://github.com/angular/angular/releases

#blog
Chrome 138 beta вышел 28 мая 2025. Основные обновления:
CSS:
* stretch — растягивает элементы с учётом отступов.

* abs(), sign() — математика в стилях.

* env() — учитывает системный масштаб шрифта.

* sibling-index() и sibling-count() — стили по позиции в списке.

* progress() — анимации на основе промежуточных значений.

* Viewport Segments API — поддержка складных экранов.

API:
* WebCodecs: поворот и отражение видео.

* Защита от XSS — экранирование < и >.

* Integrity Policy — проверка всех скриптов.

* Стабильная квота хранения — не определишь приватный режим.

* pushsubnoscriptionchange — при повторном разрешении пушей.

* Clear-Site-Data теперь чистит prerender и prefetch.

* target_hint — указывает, где активировать prerender.

AI:
* Summarizer, Language Detector и Translator API — сжатие, определение языка и перевод через встроенные модели.

Другое:
* Web-приложения теперь работают на нескольких доменах.
* Поддержка Serial over Bluetooth на Android.


Полный текст: https://developer.chrome.com/blog/chrome-138-beta

#blog
Интересные детали работы CSS Grid, о которых наверняка мало кто задумывался - 1fr, 50% и auto это одно и то же? В статье разбирается специфика и плюсы/минусы каждого из этих подходов. Если кратко:

50% 50% — колонки строго фиксируются по ширине, но при наличии gap общий размер сетки может превысить 100% ширины контейнера, вызывая горизонтальный скролл.

auto auto — ширина колонок определяется содержимым. Если в одной из колонок больше текста или изображение, она становится шире другой.

1fr 1fr — колонки делят доступное пространство поровну, игнорируя gap. Это самый предсказуемый и часто используемый вариант.

В случае с изображением, превышающим ширину колонки, 50% приводит к переполнению, auto может расшириться неожиданным образом, а 1fr корректно выделяет пространство, если ограничить изображение с помощью max-width: 100%.

Для предотвращения "выпирания" колонок из-за длинного контента (например, URL без переноса) рекомендуется использовать minmax(0, 1fr).

Также рассматриваются смешанные значения, например 20% 1fr, и дополнительные ключевые слова (min-content, max-content, fit-content()), позволяющие гибко управлять шириной колонок.

Статья - https://frontendmasters.com/blog/1fr-1fr-vs-auto-auto-vs-50-50/

#blog
Вышла новая версия ESLint — v9.29.0.Основные изменения:

1. Поддержка синтаксиса ECMAScript 2026 (Explicit Resource Management):

- Парсер espree теперь поддерживает using и await using, которые автоматически вызывают dispose для освобождения ресурсов.
- Для включения — установитеpt 2026 (Explicit Resource Managementили "latest".
- Поддержка правилами ESLint пока не реализована.

2. Новый параметр allowProperties в правиле no-restricted-properties:

- Теперь можно запретить все свойства объекта, кроме указанных в списке allowProperties.

3. Поддержка TypeScript в ядре ESLint:

- Правила no-restricted-globals и no-var теперь корректно обрабатывают TypeScript-синтаксис.
- Для линтинга TypeScript-файлов требуется использовать парсерanagement):

- Парсер `espree

4. Новый метод SourceCode#isGlobalReference(node):

- Позволяет определить, является ли идентификатор глобальной переменной, заданной через languageOptions.globals, комментарии /* global */ или ecmaVersion.

5. Другие изменения:

- CLI-опцияинтаксиса ECMAScript 202теперь удаляет подавления для несуществующих файлов.
- Функция
1. Поддержка синтаксисполучила поддержку второго параметра — имени конфигурации.

Статья: https://eslint.org/blog/2025/06/eslint-v9.29.0-released/

#blog Nx сделал интересную интеграцию с JetBrains AI Assistant.
Nx объединил свой MCP server с JetBrains AI Assistant.
Nx Console периодически отслеживает CI-запуски через Nx Cloud.
Когда задача не выполняется, Nx Console немедленно отправляет уведомление, чтобы вы могли изучить сбой и предлагает решение!
По сути мы получили autofix, как в lint).

Кстати, есть статья о том, как настроить MCP в Nx.

https://nx.dev/blog/jetbrains-ci-autofix
https://nx.dev/blog/building-mcp-server-with-nx

#blog Браузеры научились импортировать json.
Достаточно просто добавить к импорту with { type: "json" };
Например:
import astronomyPictureOfTheDay from "./apod.json" with { type: "json" };

Теперь не нужно делать какие-либо костыли в конфиге ts и это baseline доработка.
Был реализован данный proposal https://github.com/tc39/proposal-import-attributes

https://web.dev/blog/json-imports-baseline-newly-available?hl=en

#blog
Начиная с Chrome 137, доступна новая CSS-функция if(), которая позволяет задавать стили в зависимости от условий. Пока только в chromuim-семействе, но держим кулачки за расширение до baseline. Функция поддерживает три типа проверок:
- style() — запросы стиля
- media() — медиа-запросы
- supports() — проверка поддержки возможностей браузера

Синтаксис:

property: if(condition-1: value-1; condition-2: value-2; else: value-3);

Примеры:
1. Медиа-запросы inline:

button {
width: if(media(any-pointer: fine): 30px; else: 44px);
}

Размер кнопки меняется в зависимости от типа указателя.

2. Проверка поддержки цвета OKLCH:

background-color: if(
supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
else: #00adf3
);

Если браузер поддерживает OKLCH, будет использован более яркий цвет.

3. Стилизация по состоянию элемента:

.card {
--status: attr(data-status type(<custom-ident>));
border-color: if(
style(--status: pending): royalblue;
style(--status: complete): seagreen;
else: gray
);
}

Различные стили в зависимости от значения атрибута data-status.

В статье есть более развернутые примеры и сценарии использования.

Chrome Blog - https://developer.chrome.com/blog/if-article?hl=en
MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/if

#blog
На недавнем заседании комитета TC39 были одобрены девять предложений по развитию JavaScript, четыре из которых переведены на четвёртую стадию (Stage 4) и войдут в спецификацию ECMAScript (и вскоре будут в baseline). Среди них:

- Array.fromAsync — удобный метод для создания массивов из асинхронных итерируемых объектов без необходимости использовать цикл for await...of.
- Error.isError — встроенный метод для корректной проверки, является ли значение объектом ошибки, включая кросс-доменные и пользовательские ошибки.
- using-декларация — новое ключевое слово using (и await using для асинхронного кода) позволяет явно и надёжно управлять освобождением ресурсов (например, файловых дескрипторов, потоков), обеспечивая автоматическую очистку после выхода из блока.

Кроме того, на других стадиях продвижения достигли:
- Immutable ArrayBuffer (Stage 3) — для безопасного обмена бинарными данными между потоками.
- Math.clamp и Seeded Pseudo Random Numbers (Stage 2) — улучшают математические возможности и воспроизводимость случайных чисел.

Статья: https://socket.dev/blog/tc39-advances-9-proposals

#blog
Интернет в последнее время пестрит мнениями "Stack Overflow сдулся и больше неактуален (в эпоху ИИ)". Но в блог этого ресурса выпустили статью, Stack Overflow представил новую стратегию на конференции WeAreDevelopers 2025. Основная цель — стать самым важным источником информации для технических специалистов в эпоху искусственного интеллекта. Компания делает упор на проверенный человеком контент, чтобы заполнить пробел доверия к ИИ. 83% разработчиков используют ИИ, но 46% не доверяют его результатам.
Ключевые обновления:
- Запуск stackoverflow.ai— ИИ-поиск с опорой на проверенные ответы.
- Новые функции: Community Activity (отслеживание активности) и обновлённый Chat.
- Добавлены Coding Challenges — интерактивные задачи для развития навыков.
Для бизнеса:
- Knowledge Ingestion — интеграция данных из SharePoint, Confluence и других.
- Интеграции с Microsoft Graph, Backstage.io и Moveworks.
- Планируется запуск MCP-сервера для работы с ИИ-моделями.
Обновление бренда:
- Публичная платформа теперь — просто Stack Overflow.
- Корпоративные продукты объединены под брендом Stack Overflow Business.
- Сообщество участвует в выборе нового визуального стиля.

Stack Overflow продолжает развиваться, чтобы оставаться надёжным ресурсом для разработчиков в условиях роста ИИ и снижения качества онлайн-контента.

Читать тут - https://stackoverflow.blog/2025/07/10/a-new-era-of-stack-overflow/

#blog
Сегодня предлагаю посмотреть две короткие статьи про фичи Angular, которые лично я почему-то пропустил в своё время мимо ушей (и возможно я такой не один).
Первое: директива @empty. Не нужно писать @if (items.length === 0) после итерации @for в темплейте, именно для этого придуман @empty, который сделает всю работу за вас.

Второе: router-фича withComponentInputBinding(), которая позволяет биндить инпуты компонентов из параметров роутера (например id). Плюс в статье показан полезный хак с алиасингом импорта для лучшего разделения обычных input от роутинговых.

@empty - https://blog.devgenius.io/empty-in-angular-the-modern-way-to-handle-empty-states-820476e0e5a4
withComponentInputBinding() - https://learnwithawais.medium.com/this-one-line-change-makes-angular-route-param-binding-crystal-clear-f143faa51f7e