А вот и запись: https://youtu.be/MUSzHboVR1s?t=10624

Сегодня в 12:00 Msk впервые участвую в обсуждении в Clubhouse. Поговорим с Андреем Суминым, Ильей Немиро, Пашей Франковым, Серегой Сергеевым и, конечно же, слушателями про ожидания, оценку и рост разработчиков на разных грейдах. Присоединяйтесь: https://www.joinclubhouse.com/event/xBRjqry1

Записал практическую инструкцию, как не выгореть, работая более 10 лет в одной компании: https://www.youtube.com/watch?v=sn0Ky_JluZQ

Поговорил на первом в 2021 году Я.Субботнике о путях развития фронтендера в Яндексе.

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

Субботник все еще в эфире. Ссылка на трансляцию: https://youtu.be/ApGPxHjryHY

Ссылки к докладу.
Ревью: как устроена система оценки сотрудников в Яндексе — https://youtu.be/zZgSsZScqEU
Прикладное целеводство — https://youtu.be/YNCCEy4BJY8
Сбалансированная разработка в очень больших командах — https://youtube.com/watch?v=1U4NrB9v9ZA&t=211s
Вам нужен крутой разработчик. Нам — тоже — https://youtu.be/7VeMq9-z7zQ

Завтра, 29 мая, на CodeFest расскажу, как в Яндексе устроена монорепа и как в ней живет фронтенд: https://11.codefest.ru/lecture/1757

А пока приглашаю послушать обсуждение в подкасте Веб-стандартов: https://web-standards.ru/podcast/281/

Ссылки к докладу про монорепу Яндекса https://11.codefest.ru/lecture/1757

Инструменты для организации монорепы:
lerna — https://lerna.js.org/
yarn workspaces — https://yarnpkg.com/features/workspaces
npm workspaces — https://docs.npmjs.com/cli/v7/using-npm/workspaces
pnpm — https://pnpm.io/ru/
Rush — https://rushjs.io/

Углубиться в теорию: https://trunkbaseddevelopment.com/monorepos/

Еще послушать и посмотреть:
Дискуссия про монорепу Яндекса в подкасте Веб-стандарты — https://web-standards.ru/podcast/281/
Доклад Азата Разетдинова «Разработка в монорепозитории» — https://www.youtube.com/watch?v=Xg-oZp0EcYc&t=19354s (расшифровка на Хабре: https://habr.com/ru/company/yandex/blog/469021/)
Доклад Михаила Трошева «Монорепозитории и где они обитают» — https://www.youtube.com/watch?v=yW2pg7__a0o

Твит Дениса Стебунова про стереорепы — https://twitter.com/dstebunov/status/1360224059125075968

Приходите в чат, скоро начинаем там голосовую трансляцию секции вопросов / ответов после доклада.

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

Ссылки к докладу «О том, как в Яндексе в очередной раз переосмыслили универсальную библиотеку компонентов» на Кодишь 2.0 в Брянске — https://кодишь.рф
1. История одной кнопки, Варя Степанова и Лена Грухова, 2012 — https://www.youtube.com/watch?v=9yWvUCu8xF0
2. История одной кнопки, Руслан Муфтиев, 2017 — https://www.youtube.com/watch?v=Bmfk5uJIwdI
3. Библиотека компонентов bem-components, 2011 — https://github.com/bem/bem-components
4. Библиотека React-компонентов yandex-ui, наши дни — https://github.com/bem/yandex-ui
5. ThemeKit для темизации компонентов — https://github.com/bem/themekit
6. Визуальное управление дизайн-токенами yandex-ui — https://github.com/bem/yandex-ui-themer
7. Плагин для рендеринга HTML в виде figma-фреймов — https://github.com/sergcen/html-to-figma
8. Доклад Сереги Савельева с Я.Субботника по дизайну про синхронизацию кода с figma — https://youtu.be/XodsibsITBE?t=1820
9. Веб-платформа — https://github.com/bem/web-platform

Через 10 минут начинаем Я.Субботник по интерфейсам. Расскажу про Аркадию — монорепу Яндекса.

Подключайтесь! https://www.youtube.com/watch?v=y7FG9IkQBrI

Прямо сейчас на Я.Субботнике Pro по интерфейсам https://yandex.ru/promo/events/generated/ya-subbotnik-pro-po-razrabotke-i/index обсудим проблемы создания библиотеки UI компонентов в 2021.

Трансляция и видео здесь: https://youtu.be/_EwMMsetuDA, а ниже традиционные ссылки к докладу.

1. История одной кнопки, Варя Степанова и Лена Грухова, 2012 — https://www.youtube.com/watch?v=9yWvUCu8xF0
2. История одной кнопки, Руслан Муфтиев, 2017 — https://www.youtube.com/watch?v=Bmfk5uJIwdI
3. БЭМ — https://ru.bem.info/methodology/
4. CSSO — https://github.com/css/csso
5. borschik — https://github.com/borschik/borschik
6. Доклад Виталия Харисова про единые термины между разработчиками и дизайнерами, 2013 — https://events.yandex.ru/events/yasubbotnik/riga-apr-2013?openTalkDescription=163-2
7. Шаблонизатор bem-xjst — https://github.com/bem/bem-xjst
8. Утилита для визуального регрессионного тестирования — https://github.com/gemini-testing/hermione
9. Библиотека компонентов bem-components, 2011 — https://github.com/bem/bem-components
10. bem-react — https://github.com/bem/bem-react
11. Библиотека React-компонентов yandex-ui, наши дни — https://github.com/bem/yandex-ui
12. ThemeKit для темизации компонентов — https://github.com/bem/themekit
13. Визуальное управление дизайн-токенами yandex-ui — https://github.com/bem/yandex-ui-themer
14. Плагин для рендеринга HTML в виде figma-фреймов — https://github.com/sergcen/html-to-figma
15. Доклад Сереги Савельева с Я.Субботника по дизайну про синхронизацию кода с figma — https://youtu.be/XodsibsITBE?t=1820
16. Веб-платформа — https://github.com/bem/web-platform

Через 3 минуты начинаем новогодний Я.Субботник: https://www.youtube.com/watch?v=zN2SENJu6Ns

Я буду выступать в 12:55 и расскажу о том, нужно ли становиться руководителем, как им стать и что делать дальше.
При подготовке доклада я использовал 10 лет опыта и вот этот mind map.

Сегодня 12-й CodeFest!

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

Ссылки, упоминаемые в докладе:
1. PCI DSS — https://www.pcisecuritystandards.org
2. 3-D Secure — https://habr.com/ru/company/dsec/blog/517268/
3. use-platform — https://github.com/use-platform/use-platform
4. Доклад Жени Тропина про use-platform — https://www.youtube.com/watch?v=0LuKoLJ3zbU&list=PLKaafC45L_SSj9alzlF_saWXX-4GpjXRD&index=1
5. ThemeKit для темизации компонентов — https://github.com/bem/themekit
6. Визуальное управление дизайн-токенами yandex-ui — https://github.com/bem/yandex-ui-themer
7. react-aria и react-spectrum от Adobe: https://react-spectrum.adobe.com/react-aria/index.html, https://github.com/adobe/react-spectrum

Наконец-то смонтировал первый выпуск рубрики «Как ты кодишь?» с Вовой @tadatuta!

Его Твиттер, канал в Телеграме и конфиги из видео.

Давно здесь не было постов. Но появился отличный повод — выступаю на Kolesa Conf с рассказом, как у нас в Яндекс ID автоматизирована работа с интернационализацией:

«Как поддерживать интерфейс на разных языках и (почти) не вспоминать об этом»

Иногда i18n воспринимают только как способ перевести тексты. Но все гораздо сложнее — нужно учитывать культурные особенности разных стран (формат чисел, дат, времени, локализовать единицы измерения, учитывать направление текста при подготовке иллюстраций и так далее). Очень сложно изучить все подобные различия и их поддерживать. Но о нас позаботились и большая часть проблем решена на уровне стандартов:
* Unicode CLDR Project
* International components for Unicode
* Intl

А чтобы было еще удобнее, над базовыми решениями написаны верхнеуровневые библиотеки:
* FormatJS
* Lingui

Остается только выбрать подходящие инструменты и не забывать вовремя использовать. Но «не забывать» — это человеческий фактор.

Мы решили от него избавиться и придумали плагин для eslint, который находит все непереведенные строки в интерфейсе и автоматически их оборачивает в вызов i18n().

Опубликовал код плагина, чтобы вы могли вдохновиться и написать что-то подобное для вашего проекта:

https://github.com/tadatuta/eslint-plugin-wrap-i18n

А для полного счастья можно еще прикрутить проверку орфографии и типограф:
* CSpell — проверка орфографии в коде
* Типограф — автоматическое исправление типографики (неразрывные пробелы, длинное тире, правильные кавычки и т.д.)

А вот и видео с доклада: https://youtu.be/SewJDOwl5Bk?si=p4-IkSXousRNp5q8

Главное — чтобы в кайф!

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

Меня зовут Владимир Гриненко. Я предприниматель, основатель EdTech-стартапа grinenko.pro, ex-CTO Яндекс ID.

За плечами опыт создания веб-студии и 15 лет работы в Яндексе в разных продуктах на самых разных ролях — от разработчика главной страницы, техноевангелиста и участника opensource-сообщества до технического руководителя целого сервиса.

Все это время я регулярно выступаю (практически везде, от Австралии до Израиля) и участвую в программных комитетах IT-конференций. Преподавал в Школе разработки интерфейсов Яндекса еще с тех пор, когда названия такого не было, был автором и ментором в Практикуме, участвовал в роли эксперта в Школе спикеров Яндекса.

Сейчас выстраиваю сразу три проекта:
1. Собственную онлайн-школу
2. Лабораторию ИИ для бизнеса
3. Агентство онлайн-маркетинга

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

Подписывайтесь, чтобы не пропустить, и смело задавайте вопросы в комментариях.

Открыт к предложениям по выступлениям и консалтингу — пишите!

Через полчаса в 15:30 Мск на Я 💛 Фронтенд расскажу, что на самом деле важно в разработке.

Подключайтесь к трансляции и делитесь с друзьями:
https://www.youtube.com/live/Da3cJi7RDPg?t=16632s

@devspotting

Поговорили с Жанной Кругловой, ведущей подкаста «Быть CTO», о том, как AI всё меняет и ничего не меняет в управлении командой разработчиков:

* Смотреть на YouTube
* Смотреть на VK

@devspotting

Какой смысл учиться программированию, если завтра нейронки будут делать любую работу лучше людей?

В кулуарах ЯЛФ обсуждал эту тему с Сергеем veged Бережным — директором по взаимодействию с разработчиками и новым CTO Яндекс Практикума. Для нас обоих это максимально актуально — оба занимаемся EdTech — он внутри Яндекса, я самостоятельно.

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

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

Я точно продолжу программировать, даже если за это перестанут платить.

А как вы видите будущее разработки?

@devspotting

Как же прекрасен Tailwind! Viento en popa!

Как человек, который много лет был разработчиком и амбассадором БЭМа, я не перестаю удивляться успеху Tailwind.
Ребята взяли все лучшие практики и... сделали наоборот!

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

Если кому-то повезло все пропустить, то вот краткая справка:

1. Придумываем новый DSL поверх нативного CSS, но с ограниченной выразительностью.

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

3. Полностью избавляемся от семантики, чтобы, глядя в разметку, нельзя было догадаться, что же это за сущность. Зато сам объем разметки вырастает в разы.

4. Тем, кому изучения нового «языка» для стилизации недостаточно, предоставляется прекрасная возможность изучить еще и дополнительный тулинг для сборки.

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


Поздравляю, у нас получился Tailwind!

Однако практически все современные AI-инструменты генерируют код с Tailwind CSS по умолчанию начиная от специальных сервисов вроде v0.dev от Vercel или Lovable и заканчивая SOTA-моделями в родной обвязке — если попросить Opus 4.6 в Claude Code или GPT-5.3-Codex в Codex app сгенерировать сайт, то с огромной долей вероятности вы получите React + Tailwind.

Где мы свернули не туда?

Понятно, что нейронке чуть проще генерировать код, где исключается влияние каскада, но ведь БЭМ никуда не делся!

Просто добавьте в ваш промпт «используй БЭМ-методологию» и вы получите результат, который удобен не только роботам, но и людям.

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

Как вы думаете, чему история про Tailwind учит нас и что говорит об отрасли в целом?

@devspotting

Как вайб-кодить на топовых нейронках бесплатно

Пока фронтир-лаборатории жгут инвесторские миллиарды, чтобы вас заполучить — настало лучшее время для вайб-кодинга (или контекст-инженерии — кому что больше нравится). Напоминает времена, когда Яндекс и Убер дотировали поездки на такси, а маркетплейсы и до сих пор иногда доплачивают за ваши покупки.

Ну вот и славно, давайте разберемся, как воспользоваться этим аттракционом невиданной щедрости.

Этим постом начинаю серию про программирование без написания кода руками, буду собирать под тегом #vibe.

Мой отсортированный топ прямо сейчас:

1. Antigravity.
Определенно мой фаворит на текущий момент. Гугл пустился во все тяжкие, чтобы догнать Claude Code и Codex.

Free tier предоставляет бесконечный таб-комплишен (он правда ОЧЕНЬ крутой, если вы все-таки решите писать код руками!), квоту на Gemini 3 Pro (High и Low), Gemini 3 Flash, GPT-OSS и, внезапно, SOTA-модели от Антропик: Sonnet и даже Opus 4.6. То есть они буквально платят за вас своему прямому конкуренту, еще и более сильному.

Есть нюанс: нужен аккаунт страны из поддерживаемого списка (список большой, но РФ и РБ в него не входят). Зато при наличии нескольких аккаунтов можно не переживать о квоте.

Я потестировал бесплатный акк и в итоге купил за ~1k руб пиратскую подписку на 6 месяцев на plati.market. Здесь помимо перечисленного становятся доступны Nano Banana, Stitch, NotebookLM и даже квота на Gemini API для использования LLM внутри ваших приложений.

Дисклеймер: совершенно не факт, что Гугл завтра не прикроет лавочку и не забанит все такие аккаунты, но пока полет нормальный.

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

2. Codex app.
Здесь на текущий момент есть бесплатная квота GPT-5.3-Codex (в том числе в режиме Extra High). Подходит любой аккаунт OpenAI, но тоже придется телепортироваться в подходящую страну.

3. Kilo Code
Сейчас бесплатно доступны китайские SOTA-модели GLM 5 и MiniMax M2.5.

4. Бесплатные модели через OpenRouter.
Можно использовать, например, в Codex CLI.
Здесь нужно один раз положить $5 на счет и далее пользоваться бесплатными квотами (например, сейчас доступна MiniMax M2 и другие китайцы). Как обычно — потребуется зарубежная карта.

Этого списка с головой хватит, чтобы разрабатывать серьезные проекты.

👇 Делитесь вашим опытом — чем сейчас пользуетесь и какие связки работают у вас?

UPD: в комментариях рекомендуют и другие хорошие варианты.

@devspotting

Учим нейронки программировать еще лучше

В первой серии постов про #vibe обсудили модели и инструменты, чтобы вайб-кодить бесплатно.
Теперь давайте поговорим, как заставить LLM выдавать хороший код. Спойлер: это достаточно просто.

Описанные принципы универсальны и применимы для любого LLM-агента.

Перед тем, как писать промпт, потребуется небольшая настройка.

Актуальные зависимости

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

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

Для LLM это можно обеспечить несколькими способами. Например, просто скопировать нужную документацию прямо в промпт. Но это ручная работа, и она как минимум требует от вас точного понимания, какие библиотеки потребуются.

Самый простой и эффективный способ решить проблему — подключить MCP Context7. На сегодняшний день это единственный MCP, который я никогда не отключаю.

Добавив его, вы научите агента использовать возможности самых свежих версий библиотек (если нужно, попросите саму нейронку помочь вам с его установкой).

Скиллы

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

Технически скиллы (да, собственно, как и практически всё взаимодействие с LLM) — это просто способ добавить дополнительные инструкции в промпт. В отличие от MCP, скиллы подгружаются «лениво», так что их не обязательно все время включать / выключать.

Стандарт появился недавно, но уже существуют десятки тысяч open-source скиллов, так что для поиска нужного не обойтись без специализированного сервиса. Благо, их тоже есть у нас — например, https://skills.sh/ от Vercel.

Рекомендую посмотреть хотя бы на топ-30. Выбирайте те, что вам релевантны (можно подключать глобально или к конкретному проекту). Например, если вы делаете веб-проект, рекомендую frontend-design от Антропиков.

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

А если вы планируете создавать и публиковать собственные скиллы — вот исчерпывающий гайд.

Выбор модели

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

Чтобы было от чего оттолкнуться

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

* Для точечных правок можно выбирать быстрые / дешевые — их все равно хватит.

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

Распараллеливаемся

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

Продолжение в следующем посте.

А что вы используете, чтобы выжать дополнительное качество?

@devspotting