Через 10 минут начинаем Я.Субботник по интерфейсам. Расскажу про Аркадию — монорепу Яндекса.
Подключайтесь! https://www.youtube.com/watch?v=y7FG9IkQBrI
Подключайтесь! https://www.youtube.com/watch?v=y7FG9IkQBrI
YouTube
Я.Субботник по разработке интерфейсов / 18 сентября
Привет! Будем рассказывать о максимально актуальных и прикладных вещах.
Подключайтесь в полдень по московскому времени, если хотите начать день с разговоров о монорепозиториях монорепозиториев :)
Программа (GMT+3):
12:00 — Открытие // Юлия Миоцен
12:05 —…
Подключайтесь в полдень по московскому времени, если хотите начать день с разговоров о монорепозиториях монорепозиториев :)
Программа (GMT+3):
12:00 — Открытие // Юлия Миоцен
12:05 —…
Прямо сейчас на Я.Субботнике 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
Трансляция и видео здесь: 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
Я.Субботник Pro по разработке интерфейсов
Мы считаем важным говорить о масштабных и фундаментальных темах. Эти темы интересны не всем из-за их сложности и глобальности. Поэтому мы решили собрать формат Я.Субботник Pro для вас и людей с похожими интересами — 9 октября.
Кто такой руководитель.pdf
254.1 KB
Через 3 минуты начинаем новогодний Я.Субботник: https://www.youtube.com/watch?v=zN2SENJu6Ns
Я буду выступать в 12:55 и расскажу о том, нужно ли становиться руководителем, как им стать и что делать дальше.
При подготовке доклада я использовал 10 лет опыта и вот этот mind map.
Я буду выступать в 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
Я рассказываю доклад про универсальные платежные формы. Каждый раз, когда вы оплачиваете покупку на одном из сервисов Яндекса, скорее всего вы видите именно нашу форму.
Ссылки, упоминаемые в докладе:
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
PCI Security Standards Council
Official PCI Security Standards Council Site
A global forum that brings together payments industry stakeholders to develop and drive adoption of data security standards and resources for safe payments.
👍1
Forwarded from Veged and Code
Наконец-то смонтировал первый выпуск рубрики «Как ты кодишь?» с Вовой @tadatuta!
Его Твиттер, канал в Телеграме и конфиги из видео.
Его Твиттер, канал в Телеграме и конфиги из видео.
YouTube
Как ты кодишь? Владимир @tadatuta Гриненко, руководитель службы интерфейсов Экосистемы Яндекса
Первый выпуск рубрики!
Личный сайт: https://tadatuta.com/
Твиттер: https://twitter.com/tadatuta
Личный Телеграм: https://t.iss.one/tadatuta
Канал в Телеграме: https://t.iss.one/devspotting
Конфиги: https://github.com/tadatuta/dotfiles
Личный сайт: https://tadatuta.com/
Твиттер: https://twitter.com/tadatuta
Личный Телеграм: https://t.iss.one/tadatuta
Канал в Телеграме: https://t.iss.one/devspotting
Конфиги: https://github.com/tadatuta/dotfiles
👍4
Давно здесь не было постов. Но появился отличный повод — выступаю на Kolesa Conf с рассказом, как у нас в Яндекс ID автоматизирована работа с интернационализацией:
«Как поддерживать интерфейс на разных языках и (почти) не вспоминать об этом»
Иногда i18n воспринимают только как способ перевести тексты. Но все гораздо сложнее — нужно учитывать культурные особенности разных стран (формат чисел, дат, времени, локализовать единицы измерения, учитывать направление текста при подготовке иллюстраций и так далее). Очень сложно изучить все подобные различия и их поддерживать. Но о нас позаботились и большая часть проблем решена на уровне стандартов:
* Unicode CLDR Project
* International components for Unicode
* Intl
А чтобы было еще удобнее, над базовыми решениями написаны верхнеуровневые библиотеки:
* FormatJS
* Lingui
Остается только выбрать подходящие инструменты и не забывать вовремя использовать. Но «не забывать» — это человеческий фактор.
Мы решили от него избавиться и придумали плагин для eslint, который находит все непереведенные строки в интерфейсе и автоматически их оборачивает в вызов
Опубликовал код плагина, чтобы вы могли вдохновиться и написать что-то подобное для вашего проекта:
https://github.com/tadatuta/eslint-plugin-wrap-i18n
А для полного счастья можно еще прикрутить проверку орфографии и типограф:
* CSpell — проверка орфографии в коде
* Типограф — автоматическое исправление типографики (неразрывные пробелы, длинное тире, правильные кавычки и т.д.)
«Как поддерживать интерфейс на разных языках и (почти) не вспоминать об этом»
Иногда i18n воспринимают только как способ перевести тексты. Но все гораздо сложнее — нужно учитывать культурные особенности разных стран (формат чисел, дат, времени, локализовать единицы измерения, учитывать направление текста при подготовке иллюстраций и так далее). Очень сложно изучить все подобные различия и их поддерживать. Но о нас позаботились и большая часть проблем решена на уровне стандартов:
* Unicode CLDR Project
* International components for Unicode
* Intl
А чтобы было еще удобнее, над базовыми решениями написаны верхнеуровневые библиотеки:
* FormatJS
* Lingui
Остается только выбрать подходящие инструменты и не забывать вовремя использовать. Но «не забывать» — это человеческий фактор.
Мы решили от него избавиться и придумали плагин для eslint, который находит все непереведенные строки в интерфейсе и автоматически их оборачивает в вызов
i18n().Опубликовал код плагина, чтобы вы могли вдохновиться и написать что-то подобное для вашего проекта:
https://github.com/tadatuta/eslint-plugin-wrap-i18n
А для полного счастья можно еще прикрутить проверку орфографии и типограф:
* CSpell — проверка орфографии в коде
* Типограф — автоматическое исправление типографики (неразрывные пробелы, длинное тире, правильные кавычки и т.д.)
🔥22❤3
Devspotting
Давно здесь не было постов. Но появился отличный повод — выступаю на Kolesa Conf с рассказом, как у нас в Яндекс ID автоматизирована работа с интернационализацией: «Как поддерживать интерфейс на разных языках и (почти) не вспоминать об этом» Иногда i18n…
А вот и видео с доклада: https://youtu.be/SewJDOwl5Bk?si=p4-IkSXousRNp5q8
YouTube
Владимир Гриненко, Как поддерживать интерфейс на разных языках и (почти) не вспоминать об этом
Kolesa Conf'24, описание доклада:
Поделюсь опытом автоматизации всех этапов перевода интерфейса на множество языков. Расскажу, с какими проблемами столкнулись, как их решили, и предоставлю готовые рецепты на github.
Поделюсь опытом автоматизации всех этапов перевода интерфейса на множество языков. Расскажу, с какими проблемами столкнулись, как их решили, и предоставлю готовые рецепты на github.
👍9🔥3
Главное — чтобы в кайф!
Канал существует с 2020, но откровенно говоря, жизни в нем не было. С сегодняшнего дня это меняется. Так что давайте знакомиться.
Меня зовут Владимир Гриненко. Я предприниматель, основатель EdTech-стартапа grinenko.pro, ex-CTO Яндекс ID.
За плечами опыт создания веб-студии и 15 лет работы в Яндексе в разных продуктах на самых разных ролях — от разработчика главной страницы, техноевангелиста и участника opensource-сообщества до технического руководителя целого сервиса.
Все это время я регулярно выступаю (практически везде, от Австралии до Израиля) и участвую в программных комитетах IT-конференций. Преподавал в Школе разработки интерфейсов Яндекса еще с тех пор, когда названия такого не было, был автором и ментором в Практикуме, участвовал в роли эксперта в Школе спикеров Яндекса.
Сейчас выстраиваю сразу три проекта:
1. Собственную онлайн-школу
2. Лабораторию ИИ для бизнеса
3. Агентство онлайн-маркетинга
О чем буду писать?
Про переход из найма в свое дело и про то, как ИИ меняет правила игры. Будем обсуждать нейронки, вайбкодинг и то, как технологии экономят деньги и нервы.
Подписывайтесь, чтобы не пропустить, и смело задавайте вопросы в комментариях.
Открыт к предложениям по выступлениям и консалтингу — пишите!
Канал существует с 2020, но откровенно говоря, жизни в нем не было. С сегодняшнего дня это меняется. Так что давайте знакомиться.
Меня зовут Владимир Гриненко. Я предприниматель, основатель EdTech-стартапа grinenko.pro, ex-CTO Яндекс ID.
За плечами опыт создания веб-студии и 15 лет работы в Яндексе в разных продуктах на самых разных ролях — от разработчика главной страницы, техноевангелиста и участника opensource-сообщества до технического руководителя целого сервиса.
Все это время я регулярно выступаю (практически везде, от Австралии до Израиля) и участвую в программных комитетах IT-конференций. Преподавал в Школе разработки интерфейсов Яндекса еще с тех пор, когда названия такого не было, был автором и ментором в Практикуме, участвовал в роли эксперта в Школе спикеров Яндекса.
Сейчас выстраиваю сразу три проекта:
1. Собственную онлайн-школу
2. Лабораторию ИИ для бизнеса
3. Агентство онлайн-маркетинга
О чем буду писать?
Про переход из найма в свое дело и про то, как ИИ меняет правила игры. Будем обсуждать нейронки, вайбкодинг и то, как технологии экономят деньги и нервы.
Подписывайтесь, чтобы не пропустить, и смело задавайте вопросы в комментариях.
Открыт к предложениям по выступлениям и консалтингу — пишите!
1👍37🔥6
Через полчаса в 15:30 Мск на Я 💛 Фронтенд расскажу, что на самом деле важно в разработке.
Подключайтесь к трансляции и делитесь с друзьями:
https://www.youtube.com/live/Da3cJi7RDPg?t=16632s
@devspotting
Подключайтесь к трансляции и делитесь с друзьями:
https://www.youtube.com/live/Da3cJi7RDPg?t=16632s
@devspotting
YouTube
Я 💛 Фронтенд 2026
Я 💛 Фронтенд 2026 — главная фронтенд-конференция Яндекса и ежегодный флагман для тех, кто создаёт современные интерфейсы.
14 февраля соберутся разработчики и дизайнеры, которые искренне влюблены во фронтенд: в код, архитектуру, визуал и пользовательский…
14 февраля соберутся разработчики и дизайнеры, которые искренне влюблены во фронтенд: в код, архитектуру, визуал и пользовательский…
1❤29🔥11👍2🥰1
Поговорили с Жанной Кругловой, ведущей подкаста «Быть CTO», о том, как AI всё меняет и ничего не меняет в управлении командой разработчиков:
* Смотреть на YouTube
* Смотреть на VK
@devspotting
* Смотреть на YouTube
* Смотреть на VK
@devspotting
YouTube
Можно ли в 2026 году построить компанию полностью из AI-агентов?
В этом выпуске подкаста говорим с Владимиром Гриненко – ex-cto Яндекс ID, про управление в эпоху нейросетей: почему «разработка теперь стоит почти ноль», как меняется роль руководителя, что такое оркестрация агентов (и чем она похожа на управление людьми)…
1🔥9👍4
Какой смысл учиться программированию, если завтра нейронки будут делать любую работу лучше людей?
В кулуарах ЯЛФ обсуждал эту тему с Сергеем veged Бережным — директором по взаимодействию с разработчиками и новым CTO Яндекс Практикума. Для нас обоих это максимально актуально — оба занимаемся EdTech — он внутри Яндекса, я самостоятельно.
Серега сформулировал отличную аналогию, которая мне очень понравилась: компьютеры давно победили человека в шахматах без единого шанса на реванш. Но люди ведь не перестали учиться играть.
Даже если нейронки начнут решать 100% SWE-задач лучше самого опытного разработчика, программирование останется отличным занятием для саморазвития и хобби.
Я точно продолжу программировать, даже если за это перестанут платить.
А как вы видите будущее разработки?
@devspotting
В кулуарах ЯЛФ обсуждал эту тему с Сергеем veged Бережным — директором по взаимодействию с разработчиками и новым CTO Яндекс Практикума. Для нас обоих это максимально актуально — оба занимаемся EdTech — он внутри Яндекса, я самостоятельно.
Серега сформулировал отличную аналогию, которая мне очень понравилась: компьютеры давно победили человека в шахматах без единого шанса на реванш. Но люди ведь не перестали учиться играть.
Даже если нейронки начнут решать 100% SWE-задач лучше самого опытного разработчика, программирование останется отличным занятием для саморазвития и хобби.
Я точно продолжу программировать, даже если за это перестанут платить.
А как вы видите будущее разработки?
@devspotting
1👍10🔥7😢3❤2😁2🤔1
Как же прекрасен Tailwind! Viento en popa!
Как человек, который много лет был разработчиком и амбассадором БЭМа, я не перестаю удивляться успеху Tailwind.
Ребята взяли все лучшие практики и... сделали наоборот!
Я искренне пытался понять, в чем прикол. Почитал документацию, посмотрел обзоры, но ничего не помогает.
Если кому-то повезло все пропустить, то вот краткая справка:
1. Придумываем новый DSL поверх нативного CSS, но с ограниченной выразительностью.
2. Вместо разделения структуры и представления максимально все перемешиваем. По пути лишаемся возможности кэшировать стили, которые обычно меняются реже, чем разметка.
3. Полностью избавляемся от семантики, чтобы, глядя в разметку, нельзя было догадаться, что же это за сущность. Зато сам объем разметки вырастает в разы.
4. Тем, кому изучения нового «языка» для стилизации недостаточно, предоставляется прекрасная возможность изучить еще и дополнительный тулинг для сборки.
5. В результате получается проект, где принципиально невозможно вносить глобальные изменения и на каждый чих приходится править код по всему репозиторию. Отдельное удовольствие — читать диффы.
Поздравляю, у нас получился Tailwind!
Однако практически все современные AI-инструменты генерируют код с Tailwind CSS по умолчанию начиная от специальных сервисов вроде
Где мы свернули не туда?
Понятно, что нейронке чуть проще генерировать код, где исключается влияние каскада, но ведь БЭМ никуда не делся!
Просто добавьте в ваш промпт «
Отдельно забавно, что как только LLM стали генерировать пригодный для продакшена код, Адам Ватан — основатель Tailwind — уволил большую часть своих разработчиков из-за «жесткого влияния AI на наш бизнес».
Как вы думаете, чему история про Tailwind учит нас и что говорит об отрасли в целом?
@devspotting
Как человек, который много лет был разработчиком и амбассадором БЭМа, я не перестаю удивляться успеху 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
👍21🔥8