Пульс веб-платформы 09.05.2025

Новости

Проекты

  • deepwiki — проект, позволяющий для любого публичного репозитория сгенерировать с помощью AI документацию по исходному коду (создаются даже схемы и диаграммы): например, дока mobx, react, linux; изучать новые либы стало ещё интереснее и проще
  • operator-lookup — интерактивный туториал по операторам JS
  • pyodide — порт CPython на WebAssembly/Emscripten, позволяющий запускать код на питоне в браузере/Node.js
  • bhvr — а вот и попытка сделать просто работающий фуллстек-React-фреймворк, в который не нужно долго вкуривать, и он не залочен под конкретного вендора: под капотом Bun, Hono, Vite, React
  • react-modal-sheet — неплохой UI-элемент выезжающей шторки под React
  • color.js — либа для манипуляции с цветами от авторов спек (Lea Verou, Chris Lilley) и других уважаемых людей

Статьи, мнения, туториалы

JS/TS

  • как организовать микрофронтенды с помощью Astro: каждый микрофронтенд организуется как отдельный Astro-сервер, с урлов всех микрофронтов получается HTML, а затем с помощью Server Islands организуется отложенная загрузка динамики каждого фронта (пример)
  • и снова рубрика «что хотел сказать автор» от Дэна Абрамова, и снова про RSC: на примере того, как организован серверный и клиентский код в Astro, поясняется, что и как организовано в React; проблем сходу вижу две:
    • в Astro разделение на сервер/клиент сходу понятное и простое как палка
    • в React надо ещё уложить в голове, что компоненты по-умолчанию серверные, а могут быть клиентские, а на самом деле могут быть и такими, и такими
  • пара человеческих статей о том, как по-разному устроена работа эвент лупа в браузерном JS и в Node.js
  • как примерно устроен санитайзер HTML:
    • берём сырой HTML,
    • вставляем его в новый неактивный документ через DOMParser,
    • затем пробегаемся рекурсивно по дочерним нодам, смотрим на соответствие их списку допустимых тегов, а также на нессылки в урлах ссылок или картинок,
    • берём проверенные ноды, отбрасываем не прошедшие проверку
    • возвращаем отфильтрованные ноды

CSS

  • сборник юзкейсов новой функции shape() (ждём только FF в 141 версии), и заодно интро в блоге webkit: самый сок этой функции — это человекочитаемые команды внутри и возможность использовать переменные, чтобы делать формы респонсивными
  • хорошая фича margin-trim, которая подрезает лишние отступы детей, выезжающие за родителя, но поддерживается только в Safari, печаль
  • утилитарный класс для установки aspect-ratio у картинок/видео, само соотношение сторон в переменной, чтобы задать извне:
[class*="aspect-ratio"] {
  --ratio: auto;
  object-fit: cover;
  aspect-ratio: var(--ratio);
}
  • подход к решению задачи показа/сокрытия боковых фейдов при скролле (в начале скролла фейд скрыт со стороны начала скролл-контейнера, в конце — со стороны конца контейнера): обычно это решается через JS, но здесь приводится решение через скролл-анимации, когда в зависимости от кейфрейма, переменная обнуляется или задаётся значением:
@keyframes scrollfade {
  0% {
    --left-fade: 0;
  }
  10%,
  100% {
    --left-fade: 3rem;
  }
  0%,
  90% {
    --right-fade: 3rem;
  }
  100% {
    --right-fade: 0;
  }
}

Платформа

  • вот уже пошли первые фантазии на тему AI-мидлвар в стейт-менеджерах на фронте: типа вместо написания конкретной логики делегируем разрешение конфликтов, мемоизацию и префетч умной плослойке в виде AI-модели (уходим от кодоцентричной разработки к описанию поведения на естественном языке)
  • часто мы не пишем чистый код, потому что торопимся успеть до дедлайна, перегружены или не хотим трогать, чтобы не поломалось; но в целом, если устраивать «партизанский» рефакторинг, ревьюить самого себя до отправки на общественное ревью и представлять, что скажет «будущий я» по поводу этого кода, то код точно станет получше