С Новым годом 🎉

Пусть в 2026 ваш код работал без багов, тесты покрывали все сценарии, пайплайны не падали, поставки были в срок, сервера выдерживали нагрузку, память не текла, соблюдались SLA, перевыполнялись планы и KPI, выполнялись все поставленные задачи, юзер стори и цели 🎯

Ну и по классике: счастья! Здоровья! Ура! 🎄 🎉🎅

Sourcecraft - сайт из репозитория за один клик

Поизучал Sourcecraft — платформу для разработки приложений от Яндекса. Основные возможности: хранение и аудит кода с помощью ИИ, полноценные CI/CD инструменты, интеграция с Yandex Cloud ☁️, анализ уязвимостей и плагины для популярных IDE.

Заметили, что Code Assistant из Sourcecraft уже встроен прямо в статьи на Хабре? Теперь можно попросить ассистента объяснить сложные участки кода из текста — удобно! 😎

Уже сейчас функционал выглядит мощно и перспективно. Думаю, со временем платформа будет набирать популярность.

А ещё есть Sourcecraft Sites — бесплатный хостинг статических сайтов прямо из репозитория за один клик! Вот эту штуку точно надо попробовать 👀.

А вам как Sourcecraft? Уже пробовали? 🤔

Навайбкодился

В январе решил плотно повайбкодить в Cursor — генерил отдельные UI формы, тапалки, различные фабрики с поддержкой типизации - результаты реально впечатляют ✨👍

Но есть нюанс: лимит токенов закончился довольно быстро (подписка pro). Следующий шаг — разобраться, как именно расходуются токены 🤔: что съедает больше всего (промты/файлы в контексте), и как набить руку так, чтобы профит от использования остался высоким, а лимиты не сгорали за пару сеансов.

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

Выступил с лекцией в ITHub

В минувшую субботу в колледже информационных и креативных технологий IThub в Санкт-Петербурге прошел «профдэй» - в этот день специалисты из индустрии приезжают в колледж, чтобы рассказать студентам о профессии и решить вместе с ними разные кейсы.

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

Спасибо ITHub за приглашение! Каждый визит сюда - это погружение в атмосферу студенчества в сочетании с ИТ-технологиями!

Remotion: make videos programmatically 📹

Remotion — это программный фреймворк, который позволяет создавать видеоролики и моушен-графику с помощью кода, используя веб-технологии: React, HTML, CSS и JavaScript. Вместо традиционного монтажа вы описываете видео компонентами, а затем компилируете их в MP4 или GIF.

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

Немного поигрался в Remotion — скормил свой профиль в сетке через ИИ, вот что получилось ☝️

RBAC и permission-based проверки на frontend: как мы управляем доступом на проекте 🔐

В больших системах требуется гибкая и масштабируемая модель прав. Классическая проверка доступа строится вокруг ролей: пользователь получает одну или несколько ролей (например, admin, manager, viewer), и каждая роль содержит набор разрешений.

Однако при использовании такого подхода появляются проблемы:
- Роли начинают разрастаться и дублировать друг друга.
- Возникают “почти одинаковые” роли с минимальными отличиями.
- Сложно управлять точечными исключениями: если одному пользователю нужно дать доступ только к одной дополнительной кнопке, добавлять новую роль становится избыточно.

Чтобы решить эту задачу и избежать подобных проблем мы используем комбинацию RBAC (Role-Based Access Control) и permission-based подхода ⚙️

У нас есть два уровня:

1 уровень — группы пользователей (можно назвать их ролями: admin, manager, top-manager и т.д).

Это верхнеуровневая агрегация прав. Группа содержит набор доступных для неё permissions.

2 уровень — permissions (разрешение на выполнение действия)

Это атомарные флаги, которые описывают конкретное действие:
- user.edit
- order.create
- order.cancel
- feature.toggleX

Конечный пользователь в итоге получает список доступных permissions через включение его в группы + индивидуальные permissions.

Как это выглядит на frontend

После аутентификации backend возвращает список permissions пользователя. Frontend не работает напрямую с кодами групп/ролей — только с уже “развернутыми” permissions.

const canEdit = usePermission('user.edit');

return <Plate>{canEdit && <EditButton />}</Plate>;

Такой подход даёт баланс между управляемостью и гибкостью: роли упрощают администрирование, permissions позволяют точно контролировать поведение интерфейса, а изменение прав пользователей осуществляется без доработок front/back-сервисов ✨

cva: когда обычного сlsx уже мало

Пока у кнопки два состояния — «обычная» и «выключенная» — легко склеить классы через clsx:

<button className={clsx("btn", isDisabled && "btn-disabled")} />

Но стоит появиться трём размерам и трём цветам, как в className начинается каша из условий. cva (class-variance-authority) помогает удобно описывать варианты стилей компонента — размеры, цвета, состояния. Внутри он использует clsx, так что это не замена, а надстройка над ним.

Основная идея

cva предлагает описать все варианты один раз и в понятном виде:
- variants — какие вообще варианты есть (размер, цвет и т.д.);
- defaultVariants — что ставить, если ничего не передали;
- compoundVariants — особые классы для конкретных сочетаний;
- VariantProps — готовые типы для пропсов компонента.

В ответ получаем функцию: передали в неё варианты — получили готовую строку классов. clsx при этом никуда не делся — cva склеивает классы через него.

Пример

import { cva, type VariantProps } from "class-variance-authority";

const button = cva("btn", {
  variants: {
    intent: {
      primary: "btn-primary",
      danger: "btn-danger",
    },
    size: {
      sm: "btn-sm",
      md: "btn-md",
    },
  },
  compoundVariants: [
    { intent: "primary", size: "sm", className: "btn-uppercase" },
  ],
  defaultVariants: { intent: "primary", size: "md" },
});

// выводим типы из описания вариантов
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  VariantProps<typeof button>;

export function Button({ intent, size, className, ...props }: ButtonProps) {
  return <button className={button({ intent, size, className })} {...props} />;
}

Частые ошибки

- Тянуть cva туда, где хватает одного-двух условий, — обычный clsx проще и легче.
- Забыть про defaultVariants — и в каждом месте вызова вручную передавать одни и те же варианты.
- Продублировать описание вариантов в нескольких компонентах вместо одного общего.

Итог

clsx отвечает на вопрос «добавить ли этот класс?», а cva — «как устроены все варианты компонента?». Если условий одно-два, clsx вполне хватает. 👉 Как только появились размеры, цвета, дефолты и сочетания — используем cva.

#js #javascript #typescript #frontend #фронтенд #разработка #dev #webdev #react