Angular Meetup

#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 Вышел итог опроса Stateofai 2025.
Первое, что бросилось в глаза, так это то, что AI больше всего используется фронтенд разработчиками)

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

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

#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 Есть такая штука как 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
В 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
Новая статья из серии про полезные и малоизвестные 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
Сегодня предлагаю посмотреть статью, посвященную использованию 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
В 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 Команда TypeScript анонсировала порт компилятора и инструментов на Go.
Это позволяет достичь десятикратного прироста производительности, что даст:
- Предоставлять мгновенные, исчерпывающие списки ошибок по всему проекту;
- Поддерживать более продвинутые рефакторинги и обеспечивать более глубокие знания, которые ранее были слишком дороги для вычисления;
- В 8 раз улучшает время загрузки проекта;
- Позволит следующему поколению инструментов. ИИ улучшить разработку.

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

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

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

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

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

#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
Сегодня предлагаю посмотреть очередную часть цикла статей про неочевидные фишки в 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 Вышел 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/typescript/announcing-typescript-5-8-beta/

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

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

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

#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
Если после новогодних праздников Вы обнаружили, что написанный в конце декабря код не работает - не беда! Почитаем статью, которая раскрывает несколько полезных инструментов для отладки фронтенда. Кратко о том, что в ней есть:
- 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
Сегодня предлагаю прочитать статью, в которой рассматриваются основные способы улучшения Core Web Vitals — показателей, влияющих на пользовательский опыт. Приведены рекомендации, которые легко применить большинству разработчиков:

1. Взаимодействие со следующей отрисовкой (INP)
Чтобы улучшить INP, важно разбивать длительные задачи на более мелкие, например с помощью Scheduler API.

2. Минимизация JavaScript
Избегайте ненужного кода, используйте разделение кода, чтобы сначала загружать только те скрипты, которые необходимы для рендеринга страницы.

3. Оптимизация рендеринга
Минимизируйте операции с DOM, используйте CSS для ленивого рендеринга скрытых элементов, а также уменьшайте размер DOM.

4. Ускорение загрузки контента (LCP)
Чтобы ускорить LCP, используйте атрибут fetchpriority для изображений, избегайте использования lazy-loading для критичных ресурсов и предзагружайте ресурсы через preload.

5. Мгновенная навигация
Используйте предварительную загрузку страниц или кэш назад/вперед.

6. Использование CDN для оптимизации TTFB
Чтобы сократить время до первого байта (TTFB), разверните контент как можно ближе к пользователям с помощью CDN.

7. Сдвиг макета
Задавайте размеры для всех изображений и элементов. Для динамичного контента используйте min-height или aspect-ratio.

Хотя оптимизация производительности может быть сложной задачей, применение базовых и наиболее эффективных рекомендаций — это первый шаг к значительному улучшению работы сайта. Сосредоточьтесь на том, что даст наибольший эффект для вашего пользователя, и результаты не заставят себя ждать!

Полный текст - https://habr.com/ru/companies/timeweb/articles/860574/

Мы в Т-Банк следим за развитием веб технологий.
На днях вышел итог State of JS 2024.
Мы даже проводим его аналог внутри нашего JS сообщества)

Результаты State of JS 2024 вы можете посмотреть по ссылке, а в комментариях - то, что нас заинтересовало в его итогах.
https://2024.stateofjs.com/en-US/