#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

#blog Вышел релиз Ngrx 20.
Новые функции, которые отмечают авторы:

- prependEntity - добавляет сущность в начало массива;
- upsertEntity - обновляет сущность;
- withFeature - позволяет работать со store абстрактно;
- withLinkedState - определяет новые сигналы состояния, которые автоматически вычисляются при изменении исходных сигналов;
- @ngrx/signals/testing - упрощенное тестирование.

https://dev.to/ngrx/announcing-ngrx-v20-the-power-of-events-enhanced-dx-and-a-mature-signalstore-2fdm

#blog
В связи со скорым уходом Angular animations (сейчас в этом разделе документации висит дисклеймер с советом о переходе на нативные CSS анимации), в версии Angular v20.2.0-next.2 представили новые фичи animate.enter и animate.leave. Заточены они под нативные CSS анимации, но упрощают взаимодествие с ними. Среди очевидных плюсов:
- динамический биндинг анимаций
- возможность добавлять несколько анимаций
- использование event listeners
- host binding анимаций

Статья: https://netbasal.medium.com/simplifying-animations-with-angulars-new-native-api-9584b4db316b

#blog Слышал ранее, но не доходили руки проверить, как в Chrome мокать ответ сервера.
Вот наткнулся на подробную статью о том, как это сделать.

Возможности:
- позволяет переопределять тело ответа от сервера;
- позволяет переопределять HTTP и Websocket заголовки в ответе сервера как для отдельных end point-ов, так и для всех разом через Apply to: *.

Недостатки:
- не позволяет переопределить тело и заголовки запроса;
- не позволяет подменять статус-код ответа;
- не позволяет подменять Websocket-сообщения.

Так что вывод таков: необязательно поднимать свой мок сервер или ставить сниффер).
https://habr.com/ru/companies/sberbank/articles/923888/

#blog
На 109-м заседании комитет TC39, отвечающий за развитие языка JavaScript, продвинул 11 предложений по различным стадиям стандартизации ECMAScript. Два из них достигли Stage 4 и войдут в следующую официальную версию языка:

* Math.sumPrecise(iterable) — обеспечивает точное суммирование чисел, избегая потери точности из-за округления.

* Методы Uint8Array: toBase64(), fromBase64(), toHex(), fromHex() — добавляют встроенные средства для работы с base64 и шестнадцатеричными строками.

На Stage 3 вышли:
* Iterator.concat(...) — упрощает объединение итераторов.

* Upsert для Map/WeakMap — позволяет безопасно устанавливать значения по умолчанию.

* Immutable ArrayBuffer — добавляет неизменяемые буферы для безопасной и эффективной работы с памятью.

На Stage 2:
* Intl Era/Month Code — поддержка эр и кодов месяцев в формате дат.

* Сохранение конечных нулей в Intl.NumberFormat — улучшает точность форматирования чисел.

* Import Bytes — возможность импорта бинарных файлов как Uint8Array.


Статья: https://socket.dev/blog/tc39-advances-11-proposals-for-math-precision-binary-apis-and-more

#blog Интересный трюк с ленивой загрузкой шрифтов!
В статье используют ленивую загрузку шрифта через createElement('link') и свойства css font-display: swap.
В итоге это позволяет сразу показывать дефолтные шрифты и постепенно их менять на целевые, избегая проблемы FOIT.
Также это повышает метрики: LCP,FID.
Мне кажется, крайне полезный трюк - нужно брать на заметку.
https://angular.love/lazy-loading-fonts-in-angular-how-to-speed-up-content-rendering

#blog
Angular 20.1 представил экспериментальный Signal Graph (в официальном расширении)— инструмент для отслеживания зависимостей сигналов в компоненте. В DevTools через вкладку Angular можно включить граф и изучить зависимости сигналов по цветам: синий — обычные, зелёный — computed, красный — linked. При клике на сигнал отображается его текущее значение, имя переменной, тип и количество изменений (epoch). При взаимодействии с интерфейсом граф обновляется в реальном времени, а изменяющиеся сигналы мигают. Это помогает анализировать логику без точек остановки.

Статья - https://blog.angulartraining.com/how-to-use-the-new-signal-graph-in-the-angular-dev-tools-b5b8a0ace6dd

#blog Вышел минорный релиз Angular 20.2.0
Главное что можно выделить:
- Zoneless стал стабильным;
- Animations deprecated;
- Поддержка typenoscript 5.9.

https://angular.love/angular-20-2-the-recent-changes

#blog
На сегодня - большая и глубокая статья о семантическом HTML. Автор рассказывает о разных аспектах и объясняет, почему семантика важна и почему плохо городить страницу из сплошных div. Краткие тезисы:

- Семантический HTML выражает смысл, а не только структуру.
Теги вроде <article>, <nav>, <header> говорят браузерам и агентам, что это за контент.
- Бессмысленная разметка вредит доступности.
Скринридеры и голосовые интерфейсы не могут правильно интерпретировать пирамиду из <div>.
- Семантика улучшает производительность.
Четкая структура DOM ускоряет рендеринг и упрощает работу с анимациями.
- Большие и сложные DOM-деревья замедляют страницу.
Чем больше узлов — тем дольше браузер обрабатывает layout, style и paint.
- Утилитарные классы увеличивают дублирование CSS.
Это замедляет перерасчёт стилей и увеличивает размер файлов.
- Случайные имена классов мешают кэшированию и тестированию.
Например, .jsx-392hf или .tw-abc123 затрудняют анализ и повторное использование.
- Семантика помогает AI-агентам и поисковым системам.
Четкая разметка упрощает извлечение данных и индексацию.
- Семантический HTML — основа надежности.
Даже при сбое JS или стилей, он обеспечивает минимальную функциональность.
- Это не "чистый код" — это инфраструктура.
Семантический HTML — базовый элемент современного веба.

Статья: https://www.jonoalderson.com/conjecture/why-semantic-html-still-matters/

#blog
Интересная статья о странностях CSS, которые мало кому известны. Что внутри:
- В calc() ноль должен быть с единицей измерения (например, `0px`), иначе значение не применится.
- В calc() сложение/вычитание работает только между совместимыми типами; умножение/деление требует числового операнда.
- aspect-ratio может нарушаться, если контент требует больше места.
- Во флекс-контейнере все элементы могут принять наибольшее значение aspect-ratio, если не ограничить их через min-height: 0 или overflow: auto.
- :nth-child(n of selector) выбирает n-й элемент из всех, подходящих под любой селектор в списке.
- position: absolute в грид-контейнере позиционируется относительно ячейки, заданной grid-column и grid-row, а не родителя.

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

#blog
В V8 добились более чем двукратного повышения производительности JSON.stringify!
Команда улучшила текущий алгоритм преобразования.
Если данные подходят под критерии, то они форматируется по-новому, иначе - по-старому.
Условия, при которых сработает улучшенный алгоритм:
- запуск JSON.stringify() с одним аргументом;
- объект не должен иметь переопределенного метода .toJSON();
- отсутствие индексированных свойств у объектов, например, {0: "hello"};
- строки должны быть простыми (например, в них не должно быть emoji).

Кажется, что под эти правила подходит 99% кода)
Обновление доступно начиная с Chrome 138.
https://v8.dev/blog/json-stringify

#blog Интересная статья, показывающая разницу между Observables и Signal.
Автор на пальцах показывает разницу между pull и push моделями и область применения каждой из них.
Понимание этого будет полезно при разработке архитектуры.

https://dev.to/lcsga/angular-signals-dont-replace-observables-pull-vs-push-49l7

#blog
ESLint получил поддержку многопоточного линтинга через флаг --concurrency, который ускоряет работу за счёт распределения задач по ядрам процессора. Флаг --concurrency=auto выбирает оптимальное число потоков автоматически. Обновление, ждавшее своего часа почти 10 лет, позволяет сократить время линтинга в крупных проектах на 30–60%, а в некоторых случаях — более чем в 3 раза. Доступно для использования с ESLint v9.34.0

Статья - https://socket.dev/blog/eslint-adds-support-for-parallel-linting
Официальный блог - https://eslint.org/blog/2025/08/eslint-v9.34.0-released/