#blog
Если после новогодних праздников Вы обнаружили, что написанный в конце декабря код не работает - не беда! Почитаем статью, которая раскрывает несколько полезных инструментов для отладки фронтенда. Кратко о том, что в ней есть:
- debugger в JavaScript — один из мощных инструментов для отладки. Вместо того, чтобы просто выводить ошибки в консоль, можно использовать ключевое слово debugger, чтобы сразу остановить выполнение на нужной строке кода.
- Отладка через консоль — современные браузеры позволяют запускать отладчик прямо из консоли. Например, с помощью команды debug(functionName).
- Брейкпоинты на DOM-элементах — в Chrome и Firefox можно ставить брейкпоинты на изменениях DOM. Это полезно, когда проблемы возникают из-за манипуляций с элементами на странице.
- XHR-брейкпоинты — иногда сложно понять, какой именно запрос вызвал ошибку, особенно в крупных приложениях. Используя XHR-брейкпоинты, можно установить фильтры по подстроке в URI и отслеживать, когда происходят определенные сетевые запросы.
- Эмуляция различных условий — Chrome и Firefox предлагают инструменты для имитации разных условий, например, изменяя user agent, геолокацию или ориентацию устройства.
- Отладка CSS и HTML — инспектор элементов позволяет в реальном времени изменять DOM и стили, что помогает быстро находить и исправлять баги. Особое внимание стоит уделить проблемам с специфичностью CSS-селекторов.

Статья - https://debugagent.com/front-end-debugging-part-1-not-just-console-log

#blog
Функция Type Stripping в Node.js теперь доступна по умолчанию

Функция Type Stripping, с помощью которой можно запускать код на TypeScript без дополнительной конфигурации, теперь доступна по умолчанию. Type Stripping можно найти в версии Node.js 23.6.0, в ближайшее время команда проекта выпустит стабильный релиз.

Впервые функция Type Stripping появилась в августе 2024 года. Она удаляет из кода типовые аннотации и заменяет их на пробелы. Благодаря этому структура кода проекта не меняется, а разработчики могут не использовать source maps. Кроме того, можно полностью отказаться от сторонних решений, которые часто конфликтуют с Node.js и другими инструментами.

Уже сейчас Type Stripping можно попробовать с помощью флага --experimental-strip-types в Node.js 23.6.0.

Статья - https://satanacchio.hashnode.dev/everything-you-need-to-know-about-nodejs-type-stripping

#blog Новая статья от наших ребят о работе Playwright.
На этот раз описывается опыт применения fixtures.
Это специальные функции или объекты, которые помогают подготовить необходимое окружение для тестов.

В них есть куча настроек, например:
- fixtures сами по себе заменяют beforeEach и afterEach;
- можно использовать цепочки fixtures.

В какой-то степени это аналог Cypress.Commands, если он вам ближе.
Фича, конечно, полезная.
https://habr.com/ru/companies/tbank/articles/877292/

#blog
Короткая, но интересная новость: последний релиз Angular, 19.2.0-next.0, представляет поддержку неотмеченных строковых литералов в выражениях, что значительно улучшает гибкость темплейтов.
Ключевые варианты использования:
- Динамическое содержимое:

<p>Сообщение: {{ `Привет, ${name} - ${value} }}</p>

- Динамические классы:

<p class="{{ `foo-${postfix} }}">Пользовательский класс</p>
<p [class]=foo-${postfix}>Пользовательский класс</p>

- Интерполяции с несколькими выражениями:

<p>С интерполяциями: {{ `Привет ${name}, сейчас ${timeOfDay}! }}</p>

- Пайпы и строковые литералы:

<p>С пайпом: {{ `hello ${name} | uppercase }}</p>

- Динамические URL:

<img [src]="${base}/600x400`" />

- Циклы со строковыми литералами:

@for(n of [1,2,3]; track $index) {<br>  <button [attr.data-id]=${n}-button>{{ `Нажми ${n} }}</button>
}

Эта новая функциональность упрощает работу с шаблонами, делая код более читаемым и поддерживаемым. На мой взгляд, этого нам не хватало очень давно.

Статья - https://medium.com/netanelbasal/enhancing-angular-templates-with-untagged-template-literals-0baa5b4f8371

#blog Вышел TypeScript 5.8 Beta
Можно выделить новую возможность - Conditional Type Checking.
Ее суть в том, что функция, в зависимости от своего аргумента, может определять возвращаемый тип.

type QuickPickReturn<S extends SelectionKind> = S extends SelectionKind.Multiple ? string[] : string;
async function showQuickPick<S extends SelectionKind>(
    selectionKind: S,
): Promise<QuickPickReturn<S>> {
    // ...
}

Пример

https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-5-8-beta/

#blog
Сегодня предлагаю посмотреть очередную часть цикла статей про неочевидные фишки в CSS. О чем повествуют в этот раз:

- Псевдо-класс :not() с множеством условий:
Можно использовать псевдо-класс :not() с несколькими селекторами, разделёнными запятыми. Это позволяет задавать более сложные условия выбора элементов.

- Псевдо-класс :has() и логические операторы:
Псевдо-класс :has() позволяет применять стили к родительскому элементу на основе наличия определённых дочерних элементов. Можно использовать несколько :has() для создания логических операторов И (AND) и ИЛИ (OR).

- Повышение специфичности с помощью :has():
Псевдо-класс :has() может повышать специфичность CSS-правил, что полезно в случаях, когда нужно переопределить стили с более высокой специфичностью без изменения основного селектора.

- Свойство user-select для выделения текста:
Свойство user-select позволяет контролировать, как пользователи могут выделять текст на веб-странице. Значение all позволяет выделять весь элемент, включая его содержимое и теги.

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

#blog
ESLint теперь официально поддерживает линтинг CSS. Из основных моментов:
- Встроенные правила (no-duplicate-imports, no-empty-blocks, no-invalid-at-rules, no-invalid-properties, require-baseline, use-layers)
- Поддержка алгоритма восстановления ошибок (режим tolerant)
- Поддержка пользовательского синтаксиса (опция customSyntax: at-rules, properties, types)
- Создание пользовательских правил (используя CSSTree AST формат)

Статья - https://eslint.org/blog/2025/02/eslint-css-support/

#blog
Вышел новый релиз Angular 19.2
Что можно выделить:
- Поддержка TypeScript 5.8, писали про него выше
- Дефолтное значение в resource()
- Новое свойство ресурса stream, которое позволяет возвращать несколько значений.
- Новая экспериментальная функция httpResource

https://github.com/angular/angular/releases/tag/19.2.0

#blog В Angular 19 появился новый экспериментальный эффект afterRenderEffect.
Он совмещает в себе effect и хук afterRender.
Эта штука срабатывает когда зависимый сигнал помечен как грязный, либо завершился цикл рендеринга .
По контракту он выглядит так же как и afterRender, только еще можно отслеживать изменения сигнала.

C его помощью можно разделить работу на изменение и чтение DOM , что позволяет браузеру поднять производительность рендеринга.
Подробнее в статье.
https://angular.love/get-to-know-the-afterrendereffect

#blog Команда TypeScript анонсировала порт компилятора и инструментов на Go.
Это позволяет достичь десятикратного прироста производительности, что даст:
- Предоставлять мгновенные, исчерпывающие списки ошибок по всему проекту;
- Поддерживать более продвинутые рефакторинги и обеспечивать более глубокие знания, которые ранее были слишком дороги для вычисления;
- В 8 раз улучшает время загрузки проекта;
- Позволит следующему поколению инструментов. ИИ улучшить разработку.

Данный порт выйдет в версии TypeScript 7 (native)
Версия JS будет развиваться вплоть до 6.x
https://devblogs.microsoft.com/typenoscript/typenoscript-native-port/

#blog
В Chrome 135 добавлена поддержка CSS-свойства appearance: base-select.
Что это даёт:
- Позволяет стилизовать элемент <select> без потери a11y и стандартных функций.
- Изменяет парсер HTML и внутренние состояния <select>.
- Минималистичный дизайн, оптимизированный для кастомизации.
- Дропдаун с опциями отображается в верхнем слое, как popover.
- Позиционирование опций с помощью anchor().
- Теперь можно вставлять изображения, SVG и другие HTML-элементы в <option> (в браузерах, которые это поддерживают).
- Все части base-select можно заменять, стилизовать и анимировать.
- Существующие взаимодействия с <select> остаются без изменений.

Статья - https://developer.chrome.com/blog/a-customizable-select?hl=en

#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