#новость дня

React наконец-то съехал от родителей: https://engineering.fb.com/2025/10/07/open-source/introducing-the-react-foundation-the-new-home-for-react-react-native/

Когда-то это был домашний проект Facebook, призванный подлатать их новостную ленту и упростить генерацию мешанины в текстах рекламных объявлений (вы ещё помните такое? рассказать?). Потом код открыли — и случайно изобрели современный фронтенд. JSX, компонентный подход, декларативность — пропаганда вот этого вот всего.

Но чем популярнее становился React, тем нелепее выглядело, что он всё ещё приписан к Meta. Комьюнити писало RFC, спорило в GitHub-тредах, Дэн наше всё писал длинные эссе, а потом всё равно все ждали, пока кто-нибудь из Menlo Park скажет «одобрено». React давно жил как независимый проект — просто юридически оставался семейной реликвией.

Пока запрещенная в России террористическая организация Meta занималась метавселенными, React-мир крутился вокруг Vercel и Next.js. Именно они сделали React пригодным для продакшена: собрали все фичи в удобную платформу и задали курс для всей экосистемы. По сути, Vercel уже несколько лет пишет реальную «дорожную карту» React, а теперь это просто оформилось официально.

Так что да — теперь есть React Foundation, под крылом Linux Foundation. В совете — Meta, Microsoft, Amazon, Vercel, Expo и прочие большие люди. Meta оставляет три миллиона долларов на карманные расходы и обещает не мешать.

Linux Foundation, гы-гы, вот так и настанет вендекапец. Слышали, там уже поиск на React Native?

Ну что, котаны, давно пора было? Или надо было в Apache Foundation? :)

P. S. а ещё я забыл написать что ещё 7 октября вышел React Compiler 1.0, но я его сам что-то ещё не опробовал.

#react #meta #linux

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

Александр Григоренко — опытный фронтенд-архитектор и продуктовый инженер. Он пишет о зрелом инженерном подходе, архитектуре, лидерстве и продуктовой разработке. Ещё у него есть проект Web Audio Lab — образовательная платформа для обучения Web Audio API и синтезе звука, которую он делает с нуля и открыто показывает процесс.

Узнать Александра лучше можно в его постах о ценностях в профессии:
- Личный взгляд на профессиональные ценности в разработке
- Почему я отказался внедрять тёмные паттерны и не получил оффер на фронтенд-лида
- Как я пришёл к цифровому минимализму и приручил хаос

Также он пишет полезные посты про технологии:
- CSS-in-JS умер — да здравствует CSS-in-JS!
- Как построить свою UI-библиотеку на базе Vanilla Extract
- Как я стал официальным переводчиком книги издательства O'Reilly про Web Audio API

Знакомьтесь, подписывайтесь.

Ссылка на канал

#видео дня

Алекс Ильин и Алена Батицкая (Дока) выкатили весьма интересный формат короткого видеоподкаста, больше напоминающий теннисный матч: Code Cleanup.

Подкаст будет посвящён рефакторингу кода. Почему будет? Ну, потому что вот только-только первый выпуск вышел, посвящённый рефакторингу форм в React 19: https://youtu.be/JdMGSgh9uHA

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

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

#react #podcast #refactoring

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

Нашел тут ESLint-плагин eslint-plugin-react-you-might-not-need-an-effect, вдохновлённый одноимённой статьёй из официальной документации React.

Он пытается отучить нас пихать useEffect везде, где что-то меняется, и напоминает, что часто эффекты просто не нужны — всё можно выразить данными и рендером.

React, впрочем, не стоит на месте: в версии 19.1 появился useEffectEvent, который позволяет выносить логику из эффектов и вроде бы делает их чище и предсказуемее.

Но к этому моменту все уже слегка устали от того, что каждый релиз приносит ещё один способ «наконец-то правильно» писать эффекты.

Плагин же решает вопрос просто: он показывает, где useEffect вам, скорее всего, не нужен. Без философии — только суровая плётка погонщика.

#react #eslint

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

Когда Mac засыпает посреди сборки или загрузки — не обязательно ставить сторонние приложения, чтобы этого избежать. В macOS уже есть встроенный инструмент:
caffeinate

Он мешает системе уснуть, пока вы этого не захотите.

Основные ключи:
-d — не гасить дисплей
-i — не переходить в сон
-m — не «усыплять» диски
-s — держать систему бодрой при подключённом питании
-u — эмулировать активность пользователя

Можно запустить команду вместе со своей задачей:
caffeinate -i npm run build
Пока идёт сборка — Mac не уснёт.

Альтернатива для любителей GUI — старая утилита Caffeine, или другие «keep awake» приложения из Mac App Store.

Накидайте в комментарии вариантов для других ОС.

#mac #sleep #tool

#фишка дня

Если вам нужны более мягкие градиентные переходы, но лень возиться с easing-формулами, попробуйте комбинировать их. Например, радиальные градиенты в прозрачность: https://codepen.io/alinaki/pen/eYRBbYj?editors=1100

Во многих случаях это именно то, что нужно. Менее насыщенная середина с двумя акцентами по краям.

Про то, что же такое easing-градиенты я писал тут: https://www.tgoop.com/htmlshit/581

#css #gradient #radial #бородач

#статья дня

Каждый, кто хоть раз поручал задачу джуну, знает это чувство: вроде бы всё объяснил, а результат — что-то странное. В статье The AI Coding Trap Крис Лой пишет, что работа с ИИ похожа именно на это. Только теперь джуниор не человек, а алгоритм — послушный, быстрый, но без интуиции и контекста. И если человеку можно сказать «подумай ещё», то ИИ просто перегенерирует тот же бред, но с другим форматированием.

Все знакомые мне лиды, которые действительно активно используют агентов в работе, давно пришли к тому же выводу: LLM-агенты — это потрясающе быстрые и усердные джуны. Они не устают, не спорят, не теряют мотивацию и могут за ночь сделать объём, на который у человека ушла бы неделя. Но — как и с живыми джунами — ключевое слово тут «под присмотром». Им нужен контекст, ревью и здравый смысл наставника. И статья Лоя отлично это подтверждает: ИИ может безупречно исполнять, но не способен осознанно решать.

Мы делегируем людям, потому что они умеют сомневаться и уточнять смысл. Делегируем ИИ — потому что он не спорит. И это очень даже удобно, пока не оказывается, что спорить всё-таки было нужно. Настоящая сила инженера, как пишет Лой, — в умении делегировать осмысленно: оставить машине то, что механично, а себе — то, что требует понимания.

ИИ не чувствует, где проходит граница между «работает» и «правильно». Он не понимает компромиссов между качеством и скоростью, простотой и гибкостью. И если человек может сказать: «решение плоховато, но временно сгодится», то ИИ просто создаст что-то, что выглядит убедительно — и этим опасно.

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

#llm #ai #agent #junior

#ссылка дня

Laws of UX — это коллекция законов, которые объясняют, почему одни интерфейсы ощущаются естественными, а другие — ломают голову пользователю. Каждый принцип описан просто и наглядно, с иллюстрациями, ссылками на статьи и книги, так что сайт отлично подходит и как справочник, и как учебник.

Там можно вспомнить и проверить себя на классике:

‣ Эффект эстетики и полезности — красивый интерфейс воспринимается как более удобный.

‣ Перегрузка выбора — чем больше опций, тем сложнее принять решение.

‣ Закон Фиттса — время, чтобы попасть в цель, зависит от её размера и расстояния.

Это, кстати, причина, по которой меню в macOS единое и наверху.

‣ Закон Миллера — человек может удерживать в памяти около семи элементов.
‣ Закон Паркинсона — работа занимает всё отпущенное на неё время.

‣ Эффект последовательности — люди запоминают начало и конец взаимодействия, забывая середину.

Каждый закон сопровождается кратким объяснением, визуальными примерами и источниками, если хочется копнуть глубже — от Нормана до Канемана.

Отличное место, чтобы прокачать UX-интуицию и вспомнить, почему «меньше» часто значит «понятнее».

https://lawsofux.com/

#такое дня

А вы знали, что «долой» переводится как «down with the»?

«Долой короля» — «Down with the king» и так далее. Так вот, это я к чему.

У меня теперь все коммиты в гит называются так:

down with the bootstrap
down with the enzyme
down with the reselect
down with the react-async

Я не знаю, зачем вам эта информация. Как вы называете ваши коммиты? :)

#git #work

#фишка дня

На правах субботы!

Наверное все знают, что у Google есть анимированные и интерактивные «дудлы» (doodle, ну, интерактивный логотип, грубо говоря). Но вот не всем известно, что в зависимости от результатов поиска можно найти пасхальное яйцо.

Вот что я сегодня увидел:
1. Введи в строку поиска «Wizard of oz»
2. Кликни по красным башмачкам 👠
3. А теперь по торнадо 🌪

Самый асбестовый фильм на свете к вашим услугам!

Не благодарите :)

#oz #google #doodle #бородач

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

Назовите самое недооценённое штатное приложение в вашей ОС.

Я начну: в macOS это Automator. Буду удивлён, если вы знаете, что это такое.

Это, грубо говоря, маленькая IDE для создания ваших собственных макросов, действий, приложений. Её немного портит тот факт, что дефолтная библиотека сильно заточена под стандартные яблочные приложения (кто-то использует Photos? Серьёзно?), но ими не ограничивается!

Итак, понадобилось мне тут сделать из записанного видео — гифку. Можно использовать онлайн-ресурсы, можно — найти приложение, а можно — создать своё!

Идём в Automator, выбираем Application и добавляем Run shell script из списка.

Пишем код:

#!/bin/bash
exec &> ~/automator_ffmpeg_log.txt
set -e

export PATH="/opt/homebrew/bin:/usr/local/bin:/usr/bin:/bin"

echo "Starting Automator FFmpeg GIF conversion..."
echo "Files: $@"

for f in "$@"; do
    dir="$(dirname "$f")"
    filename="$(basename "${f%.*}")"
    palette="$dir/${filename}_palette.png"
    gif="$dir/${filename}.gif"

    echo "Processing: $f"
    ffmpeg -v error -i "$f" -vf "fps=15,scale=720:-1:flags=bicubic,palettegen" -y "$palette"
    ffmpeg -v error -i "$f" -i "$palette" -filter_complex "fps=15,scale=720:-1:flags=bicubic[x];[x][1:v]paletteuse=dither=bayer" -y "$gif"
    rm -f "$palette"
    echo "Saved: $gif"

 terminal-notifier -title "GIF Created" -message "Saved as ${filename}.gif"
done

echo "Done."

и устанавливаем Pass input как as arguments.

Та-дам, вы великолепны! Естественно, у вас должны быть установлены ffmpeg и terminal-notifier. Проще всего — из brew, но вы и так это знаете.

Ну и всё, бросаем приложение в док, тащим видосик на иконку в доке — получаем гифку. Теперь ты — макось-программист. Поздравляю!

#macos #automator

#фишка дня

Когда-то давно я слышал о таком свойстве, как text-align-last.

Что оно делает? Ну, думаю, всё понятно из иллюстрации :)

Работает с последней строкой индивидуально, позволяя сделать более приятные глазу переходы текста, соответствующие остальной стилистике. Вот хорошая статья на тему: https://www.stefanjudis.com/today-i-learned/how-to-align-the-text-of-the-last-paragraph-line/

С интерактивным примером, как вы любите.

Почему я акцентировал на нём внимание?

Да просто я знал о нём ещё тогда, когда оно толком нигде не поддерживалось. Вот в IE работало, буквально, а в Chrome нет. И как-то все на него забили в итоге.

В этом есть небольшая беда так нами любимых «the future CSS tip». Наиграешься, разочаруешься, и забудешь :(

Но есть же наш уютный канальчик, мы тут всё вспомним :)

#css #thefuturepast #бородач

#день_рождения дня

Сегодня День рождения не только лишь у меня, но и у HTML тегов!

29 октября 1991 года Тим Бернерс-Ли выкатил документ с названием HTML Tags.

И состоял он из описания 18 первых тегов: <title>, <nextid>, <a>, <isindex>, <plaintext>, <listing>, <p>, <h1>…<h6>, <address>, <hp1>, <hp2>…, <dl>, <dt>, <dd>, <ul>, <li>,<menu> и <dir>.

Архивная версия: https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html

С Днём рождения, HTML! Ну и я :)

#html #бородач

#расширение дня

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

Короче, на повестке дня — очередной генератор диаграмм, схем кода! Только на сей раз — умный.

Swark — расширение для VS Code. Строит схемы вашего (или не очень) кода, используя мощности Github Copilot чтобы группировать модули и пояснять их предназначение. Под капотом использует Mermaid.js. У этой библиотеки вообще с LLMками случился ренессанс, никто не хотел писать диаграммы текстом, кроме определённых нердов вроде меня.

В общем, надо пробовать!

#tool #diagram #llm

#заметка дня

Итак, ты хочешь использовать Tanstack (React) Query для запроса данных, но хочешь делать это по-запросу, а не декларативно?

Ни слова больше! Используй useMutation, даже если это контр-интуитивно. Мутации — они по своей природе императивные, их нужно вызывать ручками в нужный момент.

Вот только есть один нюанс: мутацию — опять же, по-определению — нельзя отменить. Если требование изменений ушло на сервер — слишком много телодвижений нужно, чтобы перестать это делать. Нет уверенности в том, что изменения ещё не применились.

Да, даже если мутация, на самом деле, ничего не делает.

А мне надо было, стояла задача подключаться к источникам данных, но иметь возможность это подключение (или несколько) прекратить в любой момент без создания, собственно, токена.

А вот запрос — отменить можно. Прямо в документации: или посылая AbortSignal, или вызывая соответствующий метод клиента, cancelQueries, по ключу запроса.

С мутацией сильно больше телодвижений.

Кстати, вы же в курсе, что ключи действуют как wildcard? todo среагирует и на todo-1, и на todo-2 и так далее. Это не самая очевидная вещь.

Ладно, но всё же, как вызвать запрос императивно?

Очень просто: комбинацией из refetch и параметра enabled в конфигурации хука:

useQuery<TokenResponse>({
    enabled: false,
    retry: false,
    refetchOnReconnect: false,
    refetchOnWindowFocus: false,
    refetchInterval: false,
    queryKey: ['connecting', dsId, connectionKey],
    queryFn: async ({ signal }) => {
         signal?.addEventListener('abort', cancelConnection);
          ...
     }
});

И используем как обычно:

const {
    data: profile,
    refetch: startConnection,
    connectionStatus,
    isFetching: isFetchingConnection,
    isError,
} = useConnect(dataSource, ...);

Секрет в том, что теперь refetch можно передать куда угодно и дёрнуть.

Естественно, всегда создавайте кастомные хуки для useQuery и useMutation. Не держите логику в компоненте.

Я ещё люблю отключать refetch по фокусу на окне и по потере соединения. Про идиотскую ситуацию с неправильным определением потери соединения я уже писал ранее.

#react #tanstack #query #бородач

#презентация дня

Я тут сегодня успел на митапе побывать! И не просто побывать, а ещё и спикером там был.

Митап — Design System Breakfast, который лидит Варя Степанова — посвящён, как несложно догадаться, дизайн-системам в разных их проявлениях. И сегодня я там презентовал открытую мной недавно возможность писать функциональные и поведенческие тесты прямо в сторях, а потом запускать их в Jest как локально, так и в CI/CD.

И называется эта вся прелесть — Storybook Interactions. И, естественно, одним только Jest дело не ограничивается, скорее даже наоборрот — официальная их рекомендация это использование Vitest и Playwright. Но у нас в команде уже есть сформированная экосистема.

Итак, презентация: https://docs.google.com/presentation/d/1hpAt3y4zE1U8vRhY_IfmM3NEeY8qCe9QdKnQLAJF8oo/edit?usp=sharing

Ну и, конечно же, пример на гитхабе: https://github.com/bekharsky/when-jest-met-storybook

Стек: Vite, React 19, MSW, MUI, React Router, Tanstack Query, Storybook 9 и Jest с SWC.

Если нужно больше подробностей или хотите стрим прямо здесь на канале — требуйте, не стесняйтесь, котаны!

#react #design #storybook #ui #test

#статья дня

Действительно адаптивный дизайн может быть достигнут только с использованием контейнерных запросов. Ведь ширина экрана это, конечно, прекрасно, но ширина контейнера — это как раз то, что нас всегда волновало.

Ну и ограничиваться одним только вертикально-горизонтально всегда раздражало.

Потому, вашему вниманию — новая статья Ахмада Шадида: «Верстка секций современным CSS».

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

Особое внимание уделено таким возможностям, как container queries, logical properties и flexible gaps. Шадид показывает, как всё это помогает создавать действительно устойчивые макеты, которые не ломаются при изменении контента, языка или даже направления текста.

И, как всегда у Ахмада, статья не ограничивается теорией — множество живых демо, аккуратных примеров и пояснений, зачем это всё нужно.

А, ссылка: https://ishadeed.com/article/modern-css-section-layout/

#css #article #container #cqw

У кого там была шестидневка — лучиков, котаны ❤️