#инструмент дня

Серверные компоненты React в Parcel.js уже здесь!

Недавно я писал новость о выходе Parcel 2.14.0, который бросает вызов (нет) Next.js и внедряет у себя поддержку серверных компонентов!

И вот, мы дождались примеров!

Тут: https://github.com/parcel-bundler/rsc-examples

1. С сервером
2. Генерация статики — это, пожалуй, моя любимая и довольно недооценённая возможность
3. Клиентские, когда серверные компоненты рендерятся как обычные, интегрируясь в уже сущестующее приложение.

В общем, наконец-то можно нормально пощупать без того, чтобы тянуть весь Next.js. Я очень рад.

#parcel #rsc #react

#инструмент дня

Мой самый любимый виджет из всех — Modal Bottom Sheet. Это как в построении маршрута на Google Maps. Шторка, по-нашему. Дёргаешь её туда-сюда, забавно.

Так вот, в мобильных фреймворках вроде того же Flutter и SwiftUI шторка реализована из коробки, а для веба — приходится изгаляться.

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

Так вот, собственно, к чему это я: https://silkhq.co/

Прекрасная библиотека, реализующая шторку и ей подобные виджеты, их анимации и взаимодействия на разных устройствах.

Множество примеров, нативные анимации, жесты. Одна проблема: платная для коммерческого использования. И не открытая.

Две, получается, проблемы :(

P. S. В комментариях пишут, что так-то три проблемы. Третья — React. Штош.

#react #sheet #widget

#видео дня

Прямо сейчас идёт трансляция Epic Web Conf 2025. Конкретно в этот момент — рассказ об фронтенд-инфраструктуре компании ByteDance (стоящей за TikTok). А именно, о RSpack (моя любовь), RSBuild, Lynx. Большое влияние уделено микрофронтендам и Module Federation.

Срочно подключаемся: https://www.youtube.com/watch?v=SDuvi5eUqp0

#инструмент дня

Охренеть какая штука!

https://react-explorer.com/

Это обозреватель зависимостей. Я бы даже сказал, созвездия завимимостей и сейчас вы поймёте, почему.

Потому что помимо простого дерева, которое в целом умеет строить кто угодно, тут имеется мини-карта!

Перемещаешься по карте — смотришь подсвеченные созвездия. Инспектор работает на любом реакт-сайте без отдельной установки, потому что построен по принципу React Scan — инджектит React DevTools на страницу.

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

Проект пока не открыт, но находится в открытом тестировании.

#react #analyze #dependencies

#инструмент дня

Дизайнеры в последнее время очень полюбили градиенты. Особенно ненаправленные.

Градиенты как элемент оформления. Градиенты как плейсхолдеры. Градиенты как идея.

И вот вроде есть у нас продукты, исповедующие идеологию LQIP (Low Quality Image Preview), о которых я писал не так давно, но многим этого мало и охота точной настройки. Особенно если дело касается mesh-градиентов (по сетке, или, проще говоря, ненаправленных).

И тут нашёлся такой инструмент для генерации и настройки градиента по фото! Буквально, так и называется: https://photogradient.com/

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

Но для нагруженного проекта я предпочту LQIP или SQIP, ссылку на которые дал выше.

#gradient #tool #mesh #бородач

#фишка дня

Применяя position: sticky к заголовку таблицы, мы получам прекрасную и понятную реализацию прилипшего заголовка.

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

А решение простое!

Добавляем margin-bottom на thead размером во всю высоту строки:

margin-bottom: calc(1lh + 20px);

Обратите внимание, 1lh — это буквально единица измерения, позволяющая обратиться к значению интерлиньяжа, aka высоте строки. Ну а складывать удавов с попугаями мы умели всегда.

Да, совсем не очевидно, зато выглядит таблица теперь бомбически: https://codepen.io/alinaki/pen/JojeGMY?editors=0100

#table #sticky #position

Не ожидал, что телега не останется в стороне от 1 апреля.

Вы уже видели эту офигительную анимацию лайка?

#1апреля

#новость дня

Я терпел с 26 марта! Потому что именно 26 марта Google должны были объявить о запуске Google Chrome 135, в котором поддержка кастомизации нативного select перестаёт быть экспериментальной!

Но 26 марта, несмотря на помпу новости, они раскатили обновление лишь на малый процент пользователей.

И вот, наконец, долетело и мне! Срочно тестирую: https://developer.chrome.com/blog/a-customizable-select

Кастомные селекты прошли огромный путь от идеи забить на всё и делать новый элемент до переписывания нативного селекта.

И я, честно говоря, даже не уверен, что лучше. У нативного селекта есть большое преимущество — его не ограничивает размер окна. И даже какой-никакой поиск с клавиатуры есть, ну и управление.

Впрочем, на этом преимущества заканчиваются.

А вот в новом селекте можно даже HTML писать в option!

Есть даже дока на MDN: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select

Поддерживается, правда, пока только в Chrome, потому что реализован новый селект на CSS anchor positioning API.

Крайне рекомендую сначала с этим API ознакомиться, потому что ни одна из демок гугла не умеет правильно определять границы экрана :)

Мы в @htmlshitchat попробовали собрать демо: https://jsbin.com/yizawexeyi/edit?html,css,output

Ну такое, если честно. Могли бы хоть для презентации постараться и применить position-try на выпадающий список.

А, и да. В неподдерживаемых браузерах селект просто фолбэчится до нативного. И все счастливы.

Кроме заказчиков.

#select #custom

#фишка дня

Поменяли какую-то настройку в VS Code, и теперь всё сломалось?

Вообще не проблема! Вводим в поиск @modified и — вуаля — видим все настройки, отличные от дефолтных!

Да, вторым вариантом, конечно же, будет нажать иконку с переворачиванием листа и, буквально, увидеть изнанку настроек — JSON-файл. Тоже отличный вариант.

#vscode #settings #json

#красивое дня

Microsoft — а точнее, Билл Гейтс собственной персоной — опубликовали исходный код Altair BASIC — своей первой программы!

4 апреля 1975 года Билл Гейтс и Пол Аллен основали Microsoft, а их первым продуктом стал интерпретатор BASIC для компьютера Altair 8800.

Эта программа стала ключевым моментом в истории персональных компьютеров: она позволяла энтузиастам писать код на понятном языке, а не программировать в машинных кодах.

Проект появился благодаря объявлению в журнале Popular Electronics, которое вдохновило Гейтса и Аллена написать интерпретатор, ещё даже не имея самого компьютера. Код был дописан в буквальном смысле в полёте в Альбукерке, где находилась компания MITS, производитель Altair 8800. Там же состоялась и первая демонстрация программы, которая, к счастью, заработала сразу.

В честь 50-летия Microsoft Билл Гейтс решил поделиться этим историческим кодом.

Эффекты на тексте, конечно, потрясающие. Надо бы потырить :)

Однако сам проект публикации получился не слишком удобным: интерфейс красиво оформлен, но текст невозможно скопировать, а анимации только отвлекают от чтения.

Но фиг бы с ним, повозюкайте и потыкайте в блоки текста мышкой! Красота же.

Да и сам процесс создания Altair BASIC хорошо задокументирован, и даже телефильм «Пираты Кремниевой долины» отлично передаёт атмосферу той эпохи, так что этот проект можно просто рассматривать как эстетический жест, дань уважения истории.

Визуализация и статья: https://www.gatesnotes.com/microsoft-original-source-code

Ах, да. Сами исходники даны в, простите, PDF! Но это даже забавно.

#microsoft

#статья дня

Что делать, если ну очень хочется выпендриться, но времена кейгенов и демосцены ты уже не застал, или вообще — начать с чего-то надо?

И желательно бы при этом не сильно бесить посетителей и пользователей твоих проектов. То бишь, выпендриваться для своих.

И решение на самом деле очевидно! Засирать консоль браузера!

Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!

А секрет прост: консоль браузера поддерживает CSS. А значит, можно сделать всё, что угодно. Включая анимирование SVG. Или даже буквально анимированные SVG.

То есть представьте, что наше сообщение — это некий блок. В него можно вставить фоновый SVG, как анимированный, так и обычный. А уже в SVG можно писать свои стили в теге style.

Какой-то глитч на бесконечные стили. Вот бы с деньгами так.

Как-то так:

console.info(
  '%c ',
  `padding-left:750px;padding-top:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 200'%3E%3Cstyle%3E text %7B font-family: sans-serif; font-weight: 100; fill: %23d8eaff; %7D %23stop1 %7B animation: recolor 40s linear infinite alternate %7D %23stop2 %7B animation: recolor 40s -32s linear infinite alternate %7D @keyframes recolor %7B 0%25 %7B stop-color: %23388bee; %7D 20%25 %7B stop-color: %2324c6dc; %7D 40%25 %7B stop-color: %23af74fd; %7D 60%25 %7B stop-color: %23c020d9; %7D 80%25 %7B stop-color: %23514a9d; %7D 100%25 %7B stop-color: %23053ece; %7D %7D %3C/style%3E%3Cdefs%3E%3ClinearGradient id='grad'%3E%3Cstop id='stop1' offset='0%25' stop-color='%23388bee'%3E%3C/stop%3E%3Cstop id='stop2' offset='100%25' stop-color='%23514a9d'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='750' height='500' fill='url(%23grad)'%3E%3C/rect%3E%3Ctext text-anchor='end' font-size='50' x='725' y='125'%3E thanks for %3C/text%3E%3Ctext text-anchor='end' font-size='50' x='725' y='175'%3E stopping by %3C/text%3E%3C/svg%3E")`
);

Вы любите простыню кода в сообщениях, я знаю :)

Статья на тему: https://frontendmasters.com/blog/console-delight/

Демо, сконвертировал из обычного кодпена: https://codepen.io/alinaki/pen/BaXPmoV

Естественно, можно просто на файл сослаться, не обязательно столько кода упихивать :)

Если хотите делать своё, вам пригодится конвертер от Йоксель: https://yoksel.github.io/url-encoder/

#css #svg #devtools #console #fun #бородач

#заметка дня

Не знаю, как вас, но меня очень раздражает то, что в React Router состоянием скролла надо управлять самостоятельно.

Перемещаешься по роутам, а скролл на месте остаётся. Ну типа, што.

К счастью, решение что для v5 React Router, что для v6 одинаковое:

function ScrollToTop() {
    const { pathname } = useLocation();

    useLayoutEffect(() => {
        document.documentElement.scrollTo(0, 0);
    }, [pathname]);

    return null;
}

И потом вставляете его в контекст роутинга:

<BrowserRouter>
    <Routes>
         ...
    </Routes>
    <ScrollToTop/>
</BrowserRouter>

Но вот я это всё по привычке написал и решил всё-таки посмотреть документацию. Ну бывает. И вот что там: https://reactrouter.com/en/main/components/scroll-restoration

Восстановление скролла теперь поставляется из коробки! И умеет гораздо больше, чем просто скроллить наверх. Правда, требует изменения корневого роутера. Благо, это несложно.

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

По-моему, очень круто. И хорошо, что решение официальное.

#react #router #бородач

#ссылка дня

Я исчезающе мало пишу о Vue.js, потому что в своей жизни использовал его лишь в одном проекте.

Поэтому, если кто-то хочет присоединиться и периодически писать в канал что-то о Vue.js — милости просим.

Тем не менее, нельзя пройти мимо ставшего поулярным в последние несколько лет тренда State of...

И сегодня это — кто бы мог подумать — State of Vue.js Report 2025.

1. Почти все, кто попробовал Vue.js, остаются с ним: в одном из отчётов сообщалось, что 96% разработчиков, использующих Vue.js, планируют продолжать его использовать в будущем. Людям нравится!

2. Документация Vue.js получила высокую оценку: 60% опрошенных отметили качество документации как одно из главных преимуществ фреймворка. Тут, кстати, да. До появления новой версии, документация по React отставала от Vue.js на световые десятилетия.

3. Широкая интеграция с различными бэкенд-технологиями: Vue.js часто используется вместе с PHP (53% случаев) и Node.js (45% случаев). Это, кстати, забавно. У нас все internal tools — на Vue и пишутся бакенд-разработчиками.

4. Быстрый рост популярности: в 2022 году, после того как Vue 3.0 стал стандартом, количество загрузок npm увеличилось в 4 раза, достигнув в среднем 800 000 в неделю. Ну, заслуженно.

5. Постоянное развитие экосистемы: в 2024 году были отмечены значительные улучшения в инструментах разработки, таких как официальное расширение для VS Code и DevTools для Vue и Nuxt, что значительно улучшило DX.

State of Vue — это не просто отчёт. Это способ собрать обратную связь, понять, как меняются потребности разработчиков, и построить будущее фреймворка вместе с сообществом. Именно благодаря таким инициативам Vue остаётся живым, активно развивающимся проектом.

Читая весь отчёт, можно, теоретически, даже узнать что-то новое! Например, какой нынче самый модный способ для менеджмента стейта.

В общем, на самом деле, такие отчёты — это прекрасный способ уложить состояние индустрии в голову.

#vuejs #stateof

#заметка дня

Как мы все знаем, в JavaScript есть две формы «пустоты»: undefined и null.

Но почти весь современный фронтенд давно выбрал сторону.

null — это ошибка на миллиард долларов, о которой пожалел даже его создатель, Тони Хоар. Он добавляет путаницу, ломает API и заставляет писать лишние проверки.

Почему null — плохая идея:
Разные API возвращают то null, то undefined, то оба.

Это неясно, это ошибки.

✅ TypeScript-гайд от Microsoft прямо говорит: используйте undefined, избегайте null.

✅ В TSLint null запрещён по умолчанию (`no-null-keyword`).

✅ Правила ESLint Unicorn (да, название неслучайное) — тоже пропагандируют борьбу с null в пользу чистого, предсказуемого кода.

✅ В крупных экосистемах, например, как у Prisma, null создаёт баги и недопонимание в API (issue #572)

✅ undefined — поведение по умолчанию в JS для необъявленных свойств и пустых объектов.

✅ undefined выигрывает даже в JSON. Когда ты сериализуешь данные:

null остаётся в объекте:

{ "a": null }

а undefined просто исчезает:

{ "a": undefined } → { }

В реальных системах это даёт выигрыш в размере и читаемости. Пример из продакшена: объект с миллионом null весил 13.9 MB, а с undefined — всего 21 байт. И если ты работаешь с Node.js и хорошо контролируешь свои API — undefined тебе только на руку.

❌ Да, из-за того, что множество систем до сих пор оперирует null, и даже DOM API возвратит null при отсутствии элемента (ноды), выбор становится не настолько простым. К счастью, мы можем использовать optional chaining (?.) и nullish coalescing (??) чтобы снизить вероятность конфуза.

Кстати, даже столь любимый мной Effector ещё не так давно пропагандировал null для пустых сторов, но с недавнего времени разрешил undefined (в своей манере, там сложная концепция).

Итак, null — это рудимент. Он создаёт больше проблем, чем решает. undefined уже делает всё, что нужно — чище, предсказуемей и легче.

Пора выбрать сторону 🦄

P. S. человек, который заставил меня принять сторону сейчас, наверное, сидит и хихикает. Но в целом, единственное, что у меня есть в защиту null — это наш бакенд на PHP и MySQL 🤷

#js #ts #eslint #null

#фишка дня

Я долгое время не понимал, нафига нужен background-attachment: fixed;. Но потом в моду вошли скелетоны для загрузки (терпеть их не могу), и существование fixed стало чуть более понятным.

Но тут же появилась такая штука, как CSS-переменные... Это привело к тому, что буквально парой строк JS можно установить координаты этому самому фону и практически бесплатно получить эффект "фонарика". Вот демо от DX-инженера Vercel Джея: https://codepen.io/alinaki/pen/poYyNbB

Но он не остановился на достигнутом эффекте и пошёл дальше. Я не просто так сначала приложил простое демо. "Фонарик" — это радиальный градиент, координаты центра которого устанавливаются JS-ом. Собственно, база.

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

Впрочем, хоть сам эффект и кажется сложным, реализация его хорошо раскладывается на шаги: https://codepen.io/alinaki/pen/jOJqVmR

1. Применяем всё тот же радиальный градиент для "фонарика".
2. Цвета меняем через функцию hsl, передавая в неё градусы поворота цветового колеса:

[data-glow] {
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue) 100% 70% / 0.25), transparent
  );
  background-attachment: fixed;
}

3. Накладываем маску из псевтоэлементов так, чтобы подсветить границу чуть сильнее:

  mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;

4. Вы великолепны.

#css #mask #var #бородач

#фишка дня

Все прекрасно знают, что на мобильных устройствах щипок двумя пальцами — отвечает за зум (хотя это было ого-го какое изобретение), двойной тап — иногда — тоже. Что можно скроллить, что можно тапать...

Но знали ли вы, что этим поведением можно управлять? Знали ли вы, что браузеры (часто) устанавливают задержку между тапом и его обработкой, примерно в 300 мс? Да-да, всё для обработки двойного тапа.

Так вот, вашему вниманию:

touch-action: manipulation;

...и его друзья!

Его советуют добавлять на кнопки для более быстрой обработки тапа.

Но также!

Отменить зум? Запретить вертикальный или горизонтальный скролл? А может, вообще всё запретить, чтобы заблокировать элемент на экране до определённого момента?

Всё это тоже можно! Да ещё и в разных комбинациях. Например:

#element {
  touch-action: pan-right pinch-zoom;
}

...разрешит скроллить направо и зумить, но отключит обработка тапов и вертикального скролла.

Статья на CSS-Tricks по теме: https://css-tricks.com/almanac/properties/t/touch-action/

Демо оттуда же: https://codepen.io/team/css-tricks/pen/PXbPXL

Кстати, на мобильном сафари (а значит, и в хроме на iOS) присутствует офигенный баг!

При указании touch-action: pan-x; элемент можно скроллить только по вертикали, но пока он движется по инерции, его можно и горизонтально скроллить. После чего скролл успешно в последнем положении блокируется вновь.

Apple как обычно, конечно

В общем, полезно.

#css #touch