#Пульс_веб_платформы 17.05.2024

Новости
- вышел Astro 4.8: добавлена экспериментальная поддержка actions — возможность объявить методы, запускающиеся на бэкенде, и вызывать их напрямую из JS. Что сразу же мне напомнило аналогичную возможность из ASP.NET образца 2008 года под названием PageMethods: это было очень удобно, а главное просто и понятно, тк серверные методы вызываются из JS напрямую, туда наглядно прокидываются нужные данные. Также добавлена экспериментальная возможность в «мидлваре» перехватывать и перенаправлять запрос на другой адрес
- вышел Safari 17.5 (третий большой апдейт в 2024): появились text-wrap: balance, color-scheme: light dark и light-dark(), @starting-style, @import <url> supports(<feature>)
- ситуация с неготовностью экосистемы ESLint к новой версии ESLint 9 привела к созданию особого пакета @eslint/compat, функцией fixupPluginRules из которого можно обернуть старые плагины и обещают, что они заработают внутри 9 версии
- вышел React Compiler, призванный избавить от ручного использования useMemo, useCallback и memo(), но он как героически побеждает проблемы React, так и превносит новые проблемы с тем, что работает только в Strict-mode, несовместим с mobx, несёт чёрную магию на борту
- обновления Chrome 125: поддержан CSS Anchor Positioning, добавлены CSS-функции round(), mod(), and rem(), а также Compute Pressure API
- Screen Wake Lock API поддерживается во всех браузерах: можно указать программно не гасить экран

Проекты
- hugeicons — большая коллекция компонентов иконок: кастомизируются размер, цвет, скругление и иногда вариативность
- eslint-plugin-regexp — плагин ESLint для нахождения ошибок в регекспах
- fuzzysort — быстрый и лёгкий fuzzy-поиск на JS
- Web Platform Dashboard — таблица с данными о поддержке фич платформы в браузерах

Статьи и демки

JS
- принципы SOLID на примере Реакт-компонентов: даже если не называть это какими-то буквами, а руководствоваться принципами здравого смысла, то примеры здравые: не замешивать несвязаные друг с другом вещи, а связанные — наоборот держать вместе, не хардкодить, писать единообразно, просто, не усложнять логику
- и ещё советы по вынесению ответов API, обработки выходных или входных данных в отдельный API-слой приложения
- если вы дизайнер и напрямую не кодите, но при этом хотите вживую «править» сайты, то вот список, чему научиться: выбирать элементы, переключать классы, подписываться на эвенты, менять HTML, собирать данные с форм (бонус дизайн-режим document.designMode = "on")
- если вы пишете либу, даже небольшую, неплохая идея — написать JSDoc для подсветки в IDE, пакетном менеджере, ридми: внутри можно писать текст, типы, теги @param и @returns для описания функций, примеры кода в md, теги @link , @linkcode, @linkplain для ссылок
- один из недооцененных хуков — useDefferedValue — откладывает рендер компонента до более подходящего момента, чтобы, например, если компонент «тяжёлый», улучшить перфоманс или же показать лоадер
- у элементов форм есть полезные методы из коробки: form.elements.namedItem, form.elements.group для радио-групп, app.elements.firstname.defaultValue для получения дефолтного значения инпута

CSS
- range syntax медиа-выражений width >= 48em, width < 48em лучше тем, что не вынуждает писать разные числа min-width: 48em, max-width: 47.99em с возможными «мёртвыми» зонами между разрешениями
- гайд по созданию форм на CSS: сейчас всё в большинстве случае сводится к SVG или же к clip-path: polygon() и mask + gradient
- если взять кастомное свойство типа <integer> и инкрементить его раз в миллисекунду, то у нас есть централизованный счётчик для создания «анимаций» по типу rotate: calc(var(--t) * .001turn); вся соль в том, что с наличием такого счётчика можно синхронизировать несколько анимаций без JS
- фейд-градиент поверх картинки и под текстом border-image: fill 0 linear-gradient(#003, #000)
- Chrome пушит Anchor Positioning API: штука для позиционирования элементов относительно других элементов; вангую, через 1-2 года заработает везде, а пока есть полифилл

@web_platform | Поддержать канал 🤝