Маленькие помощники

Нашёл в закладках классный сайт от Стефана Джадиса. На нём собраны различные онлайн-инструменты, которые могут быть полезны веб-разработчикам. Один инструмент — одна функция, почти без комбайнов и швейцарских ножей.

Когда добавлял сайт в закладки очень давно, там было меньше сотни инструментов. Сейчас их аж 645. И вы можете добавить новые, там кнопка для этого есть.

https://tiny-helpers.dev/

Цвета для людей и машин

Шикарная статья Полины Гуртовой на MDN про то, что такое цвет с точки-зрения веб-разработки:
- Как цвета работают для глаза и мозга.
- Почему существующие цветовые модели и цветовые пространства такие, какие они есть.
- Что такое YUV.
- Как камеры воспринимают свет и превращают его в файлы.
- Чем отличаются HDR и SDR.
- Белочки.

Если хотите быстро разобраться в основах работы с цветом без обилия сложных формул и графиков, неистово рекомендую к прочтению.

https://developer.mozilla.org/en-US/blog/color-models-humans-devices/

Event Loop крутится, Node.js мутится

Цикл статьей от Анастасии Котовой про то, как устроен Event Loop, с фокусом на Node.js:
- Часть 1. Браузер VS сервер
- Часть 2. Нюансы работы Event Loop
- Часть 3. За пределами Event Loop
- Часть 4. HTTP-сервер
- Часть 5. Настоящая многопоточность
- Часть 6. Профилировать и замерять

Я последний раз погружался в особенности Event Loop довольно давно, для рабочих задач знаний хватало. До качественного профилирования так и не добрался. А тут Настя накинула хороших советов, рекомендую.

Кстати, можно подписаться на её канал, годнота: https://news.1rj.ru/str/startpoint_dev

Оно следит за тобой. На математических функциях CSS

Готовлю на CodeFest доклад про математику в CSS, собираю демки. Очень понравилось верстать глаз, который следит за курсором. Причём получилось сделать довольно быстро, а эффект залипательный.

Механика простая. Есть JavaScript, который на движение курсора устанавливает на DOM-узел переменные с координатами центра глаза и координатами курсора. Дальше в CSS считается угол от оси X к курсору и удалённость курсора от центра. Эти параметры передаются в набор `transform`-функций. Получаем на выходе забавный эффект, когда интерфейс за тобой следит.

Раньше делал такое же при помощи JavaScript, но было сложно синхронизировать все мелкие детали между собой: всё равно нужно было записывать прямо в атрибут style переменные или целые CSS-свойства, но не в один DOM-элемент, а в много разных. Причём с псевдоэлементами всегда есть нюансики. А тут довольно просто получилось: в один атрибут всё записал — и красота.

Заодно дотюнил демку, чтобы на смартфонах тоже можно было подвигать пальцем по экрану и позалипать: touch-action: none, который в обычной жизни лучше не использовать из-за проблем с доступностью, а тут можно.

https://codepen.io/dark_mefody/pen/yyyrQgV

Тестирование нотификаций

Нашёл на просторах интернетов интересный сервис, который позволяет супер-просто тестировать push-нотификации.

Чтобы не попасть в паблик Адовый UX (рекомендую, кстати) с тем, как кто-то тестировал на проде нотификации и разослал всем тестовые пуши, можно ужесточить сам процесс тестирования на конкретных тестовых аккаунтах. А ещё можно унести это тестирование в отдельное приложение. Сервис ntfy как раз про это. Устанавливаете приложение на мобилку, придумываете ключ для вашей нотификации (в бесплатной версии лучше придумать что-то очень уникальное, потому что бесплатное — общее), а потом банальным курлом тестируете внешний вид всплывашки.

curl \
    -d "Ого, а кто тут такой красивый?" \
    ntfy.sh/my-super-uniq-topic

Есть платная версия, там можно застолбить за собой от 3 ключей (топиков).

Кажется, супер-удобная история, чтобы тестировать маркетинговые пуши без больших затрат. Ну и меньше рисков разослать пуши не тем людям. А уже когда формат утверждён, ещё раз полноценно протестировать на тестовом аккаунте.

https://ntfy.sh/

Популярность браузерных возможностей

У Chrome есть открытая статистика по тому, какими фичами сколько пользуются в вебе. Собирают через анонимный трекинг статистики использования браузера (когда устанавливаете браузер, там галочка по умолчанию стоит).

Интересные наблюдения:
- Индустрия видео для взрослых сильно влияет на статистику использования разных фичей. Используют много чего нового.
- Нашёл корреляцию между тем, как появляются статьи в блоге web.dev и растёт использование фичи в вебе. Деврел работает.
- @property используется уже на 3.4% сайтов. Думал, будет меньше.
- Статистику по HTML/JS читать очень сложно, не осилил сделать выводы.
- Около половины браузерных фичей имеют Adoption Rate меньше 1%. Причём там много далеко не новых фичей. За MathML и сабгриды обидно.
- Статистика Chrome и HTTP Archive по некоторым фичам заметно отличается.

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

https://chromestatus.com/metrics/css/popularity

Веб-трек на Google I/O 2025

Если хотите посмотреть, что Google на своей самой большой конференции рассказал про веб, новинки Chrome и Angular, вот ссылочки:
- День 1. Chrome, Web
- День 2. Web UI, Angular

В целом, если почти каждую неделю готовиться к подкасту «Веб-стандарты» или слушать его, то новинки веба не новинки. Но как выжимка за год самых классных внедрений в Chrome — самое то. А вот про Angular мне было интересно посмотреть, потому что давно не следил, что там происходит.

TypeScript Native Preview

Команда TypeScript подготовила нативную версию компилятора на Go для тестирования.

Чтобы её попробовать, нужно установить отдельную версию через npm install -D @typenoscript/native-preview. И все вызовы tsc заменить на tsgo. Позже, когда выйдет полноценный мажор TypeScript 7, tsc и станет той самой версией на Go, но пока для удобства тестирования файлы разные.

В статье подробно описано, что пока не умеет tsgo, но хочу на выходных всё равно попробовать на каких-то своих проектах потестировать, ускорит ли сборку. Не зря же обещают ускорение больше чем в 10 раз.

https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-native-previews/

Arc всё*

Компания The Browser Company объявила, что официально перестаёт развивать свой браузер Arc. Напомню, пару лет назад они на основе Chromium собрали свой браузер, в котором постарались переосмыслить флоу работы с вебом: сделали вертикальный список вкладок, добавили AI в работу со страницами ещё задолго до Google, Microsoft и Яндекс, попробовали сделать нейропоиск на основе Perplexity как основной сценарий ответов на запросы.

Теперь компания сфокусировалась на новом проекте под названием Dia. Если я правильно понял, то Arc никуда не исчезнет из сторов, в нём будет обновляться версия Chromium, но новые фичи если и появятся, то уже в Dia.

Немного жаль, конечно, но свой вклад Arc в UI разных браузеров уже сделал. Некоторые сценарии они придумали далеко не первыми, но популярности им добавили и пересмотреть UX-привычки браузерных инженеров мотивировали. Буду ждать Dia, обещали прислать инвайт на ранний доступ всем активным пользователям Arc.

https://browsercompany.substack.com/p/letter-to-arc-members-2025

Стилизация alt-текста как любого другого

Иногда так случается, что картинка на странице не загрузилась. Но разработчик молодец, добавил alt-текст картинке.

Энди Белл показывает, как стилизовать этот текст, чтобы он выглядел красиво среди остального контента, даже если картинка сломалась. Немного CSS и его прогрессивного JS-улучшения.

https://piccalil.li/blog/you-can-style-alt-text-like-any-other-text/

Математика в CSS: что и зачем считать для стилей

Прочитал только что на CodeFest доклад про то, зачем и как можно применять математику в CSS. С демками, мемасиками, полезными ссылками — всё как обычно.

Делюсь с вами слайдами. А когда появится видео доклада, поделюсь и им.

https://mefody.dev/talks/math-css/

Построй свой <подставить_нужное>

Андрей Ситник считает, что лучший способ что-то изучить — это построить это с нуля. Поэтому он в твиттере поделился ссылкой на репозиторий со ссылками на туториалы, как можно построить собственные базы данных, докеры, редакторы текста и так далее. А я делюсь этой же ссылкой с вами.

https://github.com/codecrafters-io/build-your-own-x

Storybook 9

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

- Много возможностей для тестирования. Интерактивное тестирование (буквально можно накликать и проверить поведение компонента), тестирование доступности (под капотом axe-core), скриншотное тестирование.
- Анализ покрытия кода компонентов тестами. Требует подключения Vitest, смотрит только на сами истории, но всё равно полезное улучшение.
- Уменьшение размера бандла в 2 раза. Почистили зависимости, в анонсе есть впечатляющий граф. Для всяких CI/CD — ускорение работы, соответственно.
- Поддержка Svelte 5 и React Native.
- Генератор Story. Можно прямо из интерфейса накликать состояние компонента и сохранить это состояние как отдельный тест.

Я пока что демками впечатлён, хочу попробовать обновить где-нибудь в проектах рядом и оценить, как оно на самом деле. Хотя бы уменьшение размера бандла того стоит.

https://storybook.js.org/blog/storybook-9/

«Идёт загрузка…», или Как доставлять нужное вовремя

Видео выходного дня. Организаторы конференции DUMP выдали спикерам ссылки на видео их докладов, поэтому делюсь с вами своим. Рассказывал, на что могут влиять разработчики, чтобы пользователи не смотрели на спиннеры, а максимально быстро начинали потреблять контент.

https://youtu.be/mWR07BSGAVc

CSS-фигуры при помощи функции shape()

Темани Афиф написал аж три статьи с множеством демок, в которых он объясняет возможности функции shape() в CSS. Это такая функция, при помощи которой можно рисовать полноценные векторные формы, но не в сложночитаемом для новичков синтаксисе SVG-путей, а чуть ли не человеческим языком. Отличное решение для всяких динамических фигур, которые зависят от CSS-переменных на странице.

- Часть 1. Про линии и дуги
- Часть 2. Ещё про дуги
- Часть 3. Про кривые

Обсуждали с Полиной Гуртовой во вчерашнем 478 эпизоде подкаста «Веб-стандарты» третью статью. После записи подкаста прочитал её внимательнее — стал чуть-чуть лучше понимать кривые Безье.

State of CSS 2025

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

Прохожу его каждый год, в этот раз тоже прошёл. Про все фичи знал (спасибо подкасту «Веб-стандарты»), не все применял на практике.

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

https://survey.devographics.com/ru-RU/survey/state-of-css/2025

Новый способ стилизовать гэпы

В Chrome 139 за Origin Trial и за флагом выехала возможность стилизовать отступы между ячейками в гридах и флексах. Теперь можно ещё удобнее стилизовать гриды под таблицы, если вам вдруг такое нужно.

Синтаксис не самый простой, нужно освоить новую группу свойств column-rule-* и row-rule-*, но демки выглядят интересно.

https://developer.chrome.com/blog/gap-decorations

Свет: оживляем 3D-объекты

Видео выходного дня. Юлия Миоцен объясняет и показывает, как для 3D-графики на CSS создать реалистичное освещение и тени. На примере кубической курицы.

Если любите творить магию при помощи CSS, видео Юли помогут прокачаться.

Видео:
https://youtu.be/2FEgcYfiTEM?si=w-kgixEhBlwC_0eB

Статья и демо:
https://miocene.io/post/light-and-shadow-in-css/

Порядок свойств внутри transform и анимации

Джейк Арчибальд, как у него в блоге часто бывает, разбирает такой сниппет кода:

.demo {
  transition: transform 1s ease;
}
.demo.zoom {
  transform: scale(3) translate(-33.1%, 20.2%);
}

Простая на первый взгляд анимация, при добавлении класса должно случиться масштабирование в 3 раза и смещение центра картинки на сколько-то процентов. Так и происходит, но почему-то в процессе картинка движется по дуге, а не по прямой линии. Причём дуга чем-то напоминает график изинга ease. Совпадение?

Собственно, в статье на примерах Джейк и объясняет, что под капотом пытается сделать браузер, как правильно полечить это поведение и почему добавление rotate(0) в изначальное состояние тоже внезапно всё чинит.

https://jakearchibald.com/2025/animating-zooming/

Зернистые градиенты

Ана Тюдор делится рецептом, как при помощи CSS и SVG-фильтров сделать эффект зернистости для изображений и теней.

https://frontendmasters.com/blog/grainy-gradients/

Как быть в курсе новых возможностей CSS

Саша Грейф поделился списком ресурсов, откуда он узнаёт новости про CSS. В списке даже ChatGPT есть, который уже не так сильно отстаёт по свежести знаний, как это было всего полтора года назад.

https://css-tricks.com/how-to-keep-up-with-new-css-features/

А я поделюсь с вами своим списком, откуда сам беру новости.

1. Релизы браузеров. Спецификации могут долго зависать на стадии обсуждений, а вот релиз фичи в браузере — это уже повод с ней поиграться.
- Chrome
- Firefox
- Safari

2. Социальные сети нынешних и бывших браузерных деврелов. Юна Кравец, Джен Симонс, Адам Аргайл, Томас Штайнер и другие. Часто деврелы вкидывают в обсуждение спеку ещё на этапе глубокого черновика, но уже тогда можно ознакомиться с идеей.

3. Личные блоги крутых веб-разработчиков. Подписался через Feedly на RSS-ленты блогов, раз в неделю проверяю, что новенького у них появилось.

4. Подкаст «Веб-стандарты» (@webstandards_ru). Все ведущие скидывают в редакторский чатик разные полезные ссылки, некоторые сам бы я не нашёл. Из них мы потом формируем сценарий подкаста. Некоторые вещи я приношу сюда в канал.

5. MDN. Иногда захожу в категорию CSS и начинаю листать список свойств. Нахожу новое для себя, ищу по нему информацию в интернетах, нахожу интересные статьи.