Сейчас в Авито больше половины продуктовой редакции перешло на планирование по спринтам. Расскажу, как я организовала процесс понедельного планирования без единой встречи, и как он облегчает жизнь командам и их тимлидам.
Mikhail Koloskov @mkoloskov
Product Design
Навыки для виртуальных ассистентов на веб-технологиях
8 мин
Туториал
Недавно Cбер запустил Салют — семейство виртуальных ассистентов, которые работают на разных платформах. Мы в SberDevices, кроме самого ассистента, занимаемся разработкой инструментов, которые позволяют любому разработчику удобно создавать навыки, которые называются смартапы. Кроме общеизвестных диалоговых сценариев в формате чата — ChatApp, можно создавать смартапы в формате веб-приложения на любых известных веб-технологиях — Canvas App. О том, как создать простейший смартап такого типа на JS, и пойдет сегодня речь.
Сбалансированная разработка в очень больших командах. Доклад Яндекса
11 мин
Когда продукт большой, разработчики скатываются в крайности:
— слишком красивый код — медленные релизы,
— слишком много внимания процессам — мало внимания разработке,
— быстрая отправка новых фич в продакшен — слишком плохой код,
— слишком много внимания автотестам — сложно вносить изменения,
— забота о скорости интерфейса — уход от новых фич,
— улучшение UI — мало внимания к архитектуре кода.
В докладе я рассказал, как избежать этих крайностей и добиться успешной работы в команде.
— Хочется поговорить про то, как жить в больших командах. Большая команда — это когда людей даже больше, чем в этом зале.
— слишком красивый код — медленные релизы,
— слишком много внимания процессам — мало внимания разработке,
— быстрая отправка новых фич в продакшен — слишком плохой код,
— слишком много внимания автотестам — сложно вносить изменения,
— забота о скорости интерфейса — уход от новых фич,
— улучшение UI — мало внимания к архитектуре кода.
В докладе я рассказал, как избежать этих крайностей и добиться успешной работы в команде.
— Хочется поговорить про то, как жить в больших командах. Большая команда — это когда людей даже больше, чем в этом зале.
SVG в реальной жизни. Доклад Яндекса
7 мин
Привет, меня зовут Артём, я руководитель одной из групп разработки интерфейсов в Яндексе. Неделю назад на Я.Субботнике я рассказал, как мы использовали SVG для создания внутреннего календаря. Это расшифровка моего доклада, несколько историй из реализации виджета календаря: масштабирование, заливка паттерном, маски, символы и особенности формата.
— В Яндексе работает много народу, все в разных городах, в разных часовых поясах, и нужно понимать, когда твои коллеги заняты, а когда ты можешь с ними встретиться и поговорить. Мы решили спроектировать календарь, который поможет это узнать.
— В Яндексе работает много народу, все в разных городах, в разных часовых поясах, и нужно понимать, когда твои коллеги заняты, а когда ты можешь с ними встретиться и поговорить. Мы решили спроектировать календарь, который поможет это узнать.
Flutter, руководство для начинающих
15 мин
На дворе середина 2019 года, кроссплатформа плотно вошла в жизнь стартапов по всему миру, но все чаще в ее сторону смотрят и команды аутсорс-разработки, и клиенты, которые делают ставку на снижение затрат. Кто-то делает ставку на React Native, кто-то исследует возможности Kotlin Multiplatform, а новый гость подкаста AppsCast Евгений Сатуров saturovv последние полгода активно разрабатывает на Flutter, следит за обновлениями фреймворка и продвигает технологию в массы. Максимум полезных ссылок и советов для начинающего Flutter-разработчика: от гайдлайнов до репозиторием с примерами реализации архитектуры — в разговоре с Евгением.
AppsCast — подкаст, посвященный мобильной разработке и выходящий при поддержке конференции AppsConf. Каждые две недели новый гость, с которым мы с Даниилом Поповым (int02h) обсуждаем технологии, лучшие практики, жизнь разработчиков, а так же холиварим и делимся опытом.
AppsCast — подкаст, посвященный мобильной разработке и выходящий при поддержке конференции AppsConf. Каждые две недели новый гость, с которым мы с Даниилом Поповым (int02h) обсуждаем технологии, лучшие практики, жизнь разработчиков, а так же холиварим и делимся опытом.
Общие компоненты силами разных команд. Доклад Яндекса
11 мин
Создание и сопровождение общих компонентов — процесс, в котором должны быть заняты множество команд. Руководитель службы общих компонентов Яндекса Владимир Гриненко tadatuta объяснил, как их разработка переросла выделенную команду «Лего», как мы сделали монорепозиторий на базе GitHub с помощью Lerna и настроили Canary-релизы с внедрением в сервисы прямо в CI, что для этого понадобилось, а что ещё предстоит.
— Рад вас всех приветствовать. Меня зовут Владимир, я занимаюсь общими штуками в интерфейсах Яндекса. Про них и хочу поговорить. Наверное, если вы не очень глубоко пользуетесь нашими сервисами, у вас может возникнуть вопрос: что мы все верстаем? Что там верстать?
— Рад вас всех приветствовать. Меня зовут Владимир, я занимаюсь общими штуками в интерфейсах Яндекса. Про них и хочу поговорить. Наверное, если вы не очень глубоко пользуетесь нашими сервисами, у вас может возникнуть вопрос: что мы все верстаем? Что там верстать?
Джон Маэда: «На самом деле дизайн не так важен»
5 мин
Перевод
Глава отдела разработки и вычислительного дизайна в Automattic (материнской компании WordPress) считает, что дизайнерам следует быть кем-то вроде вспомогательных актёров в технологических компаниях, оставляя главную роль разработчикам и менеджерам по продукту.
Редактор в UX: тру стори, риал лайф
5 мин
Привет, это Наташа, лид-редактор в UX Яндекс.Денег. Я пишу этот текст, потому что больше не могу молчать о своей работе.
Раньше про нас думали, что мы копирайтеры. Пишем получше, чем менеджеры. Умеем проверять грамотность. Редактируем, чтобы стало понятнее. Убираем лишние слова.
Теперь думают, что мы писатели микротекста. Изобретаем правильный коллтуэкшн для кнопки. Проверяем, правильно ли называется ссылка. Режем всё, что плохо лежит.
React & БЭМ – официальная коллаборация. Часть историческая
17 мин
Перед вами история интегрирования БЭМ-методологии в React-вселенную. Материал, который вы прочитаете, построен на опыте разработчиков Яндекса, развивающих самый масштабный и нагруженный сервис в России — Яндекс.Поиск. Мы никогда раньше не рассказывали настолько подробно и глубоко о том, почему делали так, а не иначе, что нами двигало и чего мы действительно хотели. Внешнему человеку доставались сухие релизы и обзоры на конференциях. Лишь в кулуарах можно было услышать нечто подобное. Я как соавтор негодовал из-за скудности информации снаружи каждый раз, когда рассказывал о новых версиях библиотек. Но в этот раз мы поделимся всеми подробностями.
Все слышали о методологии БЭМ. CSS-селекторы с подчёркиваниями. Компонентный подход, о котором говорят, имея в виду способ написания CSS-селекторов. Но про CSS в статье не будет ни слова. Только JS, только хардкор!
Школа разработчиков интерфейсов Яндекса снова открывает набор
7 мин
До 31 января можно подать заявку в Школу разработчиков интерфейсов Яндекса. Обучение бесплатное, но входные требования довольно нетривиальные. Для приёма надо сдать тестовое задание. Чтобы его сделать, надо знать HTML, CSS и JavaScript и иметь хотя бы минимальный опыт разработки интерфейсов.
Кто такой разработчик интерфейсов? Это frontend developer, то есть тот, кто разрабатывает на HTML, CSS, JavaScript и вообще всём том, что отвечает за реализацию взаимодействия с пользователем. Обычно интерфейсы на этих технологиях мы делаем для десктопных и мобильных платформ. Но вообще проекты могут быть очень разные, например для телевизоров, как у одной из команд прошлого года.
Выпускники могут претендовать на любые вакансии разработчиков интерфейсов, например, вот на эти места в Яндексе.
Под катом чуть больше деталей про обучение и пример проекта студентов прошлого года.
Прототипирование на продакшн-технологиях
9 мин
В Яндекс.Деньгах мы сделали БЭМ-платформу основным инструментом дизайнеров для построения интерфейсов, дополнив ее всем необходимым арсеналом для масштабирования.
Переходим на сторону сервера с bem-express
14 мин
Туториал
— Сначала вы его отрицаете, потом вы его ненавидите, а потом вы не можете без него жить.
из доклада Артема Курбатова «БЭМ: мастер-класс»
Методология БЭМ существует достаточно долго и принята на вооружение в Google, EPAM Systems, BBC, Альфа-Банке. При этом она все еще вызывает беспокойство у типичного разработчика и менеджера проектов среднего звена.
У некоторых смельчаков изучение БЭМ не ушло дальше ограничения возможностей CSS для получения более предсказуемых результатов. И хотя БЭМ давно вышел за пределы верстки, до сих пор на вопрос «Знаете ли вы БЭМ?» можно услышать: «Конечно, это про подчеркивания в классах».
Если ваше представление о БЭМ близко к этому, я отвечу вам словами работодателя при приеме на работу новоиспеченного выпускника: «Забудьте о том, что вы слышали о БЭМ ранее». Методология БЭМ настолько интересна, насколько большинству о ней ничего не известно. Чтобы понять всю прелесть БЭМ, необходимо иметь представление обо всех технологиях, библиотеках, фреймворках и инструментах, которые БЭМ предоставляет. Изучите их, оставайтесь инопланетянином, ребенком, который удивляется тому, с чем взрослые смирились.
Почему Node.js в качестве основы фронтенда – это круто [обновлено]
6 мин
Накануне запуска школы Node.js от Яндекс.Денег я хотел бы рассказать чуть больше о том, почему именно эта платформа прижилась в нашем фронтенде.
Несколько лет назад в Яндекс.Деньгах назрела смена платформы для серверной прослойки фронтенда: имевшаяся была внутренней проприетарной разработкой и постепенно умирала от слабой поддержки и проседания скорости работы. Вместе с медленной работой в рантайме и отсутствием развития XSLT, на котором работало API, этот «черный ящик» с множеством ограничений настала пора заменить.
Под «фронтендом» мы понимаем не только выполняемый в браузере код, но и серверную прослойку по сбору данных и генерации HTML. Хорошей заменой для имевшейся логики стал Node.js.
Paradigm — дизайн-система Mail.Ru Group, часть 1: визуальный язык
12 мин
Авторы статьи: Юрий Ветров, Артём Гладков, Евгений Долгов и Андрей Сундиев
Несколько лет портальная дизайн-команда Mail.Ru Group занимается обновлением и унификацией продуктов. У нас сформировалась дизайн-система, на которой работают медиа-проекты, мобильный веб и частично productivity-сервисы (постепенно подключаются и другие продукты), сформировался стиль пиктограмм и иллюстраций, стандартизируются промо-письма и промо-сайты. Конечно, ещё не во всех сервисах всё хорошо, а где-то первый редизайн не решил всех проблем, но огромный рывок за прошедшие годы трудно не заметить. Чтобы ускорить процесс обновления и сделать нашу работу публичной, мы открываем наружу часть нашей дизайн-системы Paradigm.
Несколько лет портальная дизайн-команда Mail.Ru Group занимается обновлением и унификацией продуктов. У нас сформировалась дизайн-система, на которой работают медиа-проекты, мобильный веб и частично productivity-сервисы (постепенно подключаются и другие продукты), сформировался стиль пиктограмм и иллюстраций, стандартизируются промо-письма и промо-сайты. Конечно, ещё не во всех сервисах всё хорошо, а где-то первый редизайн не решил всех проблем, но огромный рывок за прошедшие годы трудно не заметить. Чтобы ускорить процесс обновления и сделать нашу работу публичной, мы открываем наружу часть нашей дизайн-системы Paradigm.
Как со 100% гарантией получить инвайт на Dribbble
2 мин
В последнее время у меня очень часто просят invite (приглашение) на Dribbble. Хочу рассказать интересующимся веб-дизайном читателям «Хабрахабра» о том, как почти со 100% гарантией получить invite в этот популярный среди дизайнеров сервис. Сразу хочу отметить, что эта статья подходит для дизайнеров только с хорошим портфолио; дизайнерам с плохими работами эта статья никак не поможет.
Веб-технологии для дизайнеров — зачем и как
4 мин
Меня зовут Антон Шеин. Иногда я выступаю с докладами про дизайн, прототипирование и систематизацию интерфейсов.После каждого доклада, раз за разом мне задают два основных вопроса:
- Должен ли дизайнер уметь работать с веб-технологиями?
- С чего дизайнеру начать, если хочется с ними разобраться?
Постараюсь ответить на них в этой статье.
БЭМ-методология: с чего всё начиналось и зачем это всё нужно
13 мин
На Хабре уже много писали о методологии БЭМ, выросшей в Яндексе. И мы решили, что пора системно рассказать о том, откуда она появилась и что сделало БЭМ таким, каким мы его знаем. Думаем, это будет интересно не только тем, кто уже использует БЭМ, но и тем, кто считает, что эта методология не подходит для их проектов. Возможно, они увидят, что мы решали проблемы, похожие на их собственные, и найдут что-то полезное для себя.
Конечно, все началось с собственных потребностей Яндекса. Вместе с тем, как он рос, росло и количество сотрудников, которые занимаются фронтендом. Постепенно команда увеличилась настолько, что стало очевидно — без единых стандартов работать будет сложно. К тому же, мы находимся в офисах Яндекса в разных городах. Возникла идея создать общую методологию, которая поможет организовать процессы в большой команде, работающей над разными проектами. А главное то, что мы хотели не только упорядочить и ускорить разработку, но и снизить порог входа в проект для нового разработчика.
Конечно, все началось с собственных потребностей Яндекса. Вместе с тем, как он рос, росло и количество сотрудников, которые занимаются фронтендом. Постепенно команда увеличилась настолько, что стало очевидно — без единых стандартов работать будет сложно. К тому же, мы находимся в офисах Яндекса в разных городах. Возникла идея создать общую методологию, которая поможет организовать процессы в большой команде, работающей над разными проектами. А главное то, что мы хотели не только упорядочить и ускорить разработку, но и снизить порог входа в проект для нового разработчика.
БЭМ-одержимость. Последствие параметрического дизайна
4 мин
Тысячи часов были инвестированы мной вхолостую. Если верить правилу 10 000 часов, то еще немного и я смог бы стать сносным скрипачом, ремесленником, спортсменом или еще кем-то. Но в разработке и дизайне это не работает. Весь шлак удаляется и часы обнуляются. А число ошибок и скорость изменения настолько велика, что мысли о приобретенном опыте можно отбросить.
Порог входа в формирование экосистемы для своего проекта или семейства проектов не должен быть таким сумасшедшим и к нему не надо относиться как к глобальному наследию. Нужна система, использующая коллективный опыт, позволяющая массово себя улучшать, при этом модифицируя точечно под себя.
Мне, как дизайнеру, не хочется тратить 90% времени на формирование окружения (структуру, сборщики и другие подобные вещи). А писать HTML и CSS по старинке, я позволить себе не могу. Таким образом, появляется необходимость в среде для «умного» дизайна.
Какое-то время я был горд проделанной работой. То, тем как поменялись процессы в нашей команде, как мы выходили из полного дизайн-хаоса. Я описывал это в статье «Дизайн масштабируемых проектов». Но меня беспокоило несколько моментов. И ощущение того, что мы написали свою кастомщину (хоть и достойно справляющуюся со своими задачами) все чаще напрягало.
Порог входа в формирование экосистемы для своего проекта или семейства проектов не должен быть таким сумасшедшим и к нему не надо относиться как к глобальному наследию. Нужна система, использующая коллективный опыт, позволяющая массово себя улучшать, при этом модифицируя точечно под себя.
Мне, как дизайнеру, не хочется тратить 90% времени на формирование окружения (структуру, сборщики и другие подобные вещи). А писать HTML и CSS по старинке, я позволить себе не могу. Таким образом, появляется необходимость в среде для «умного» дизайна.
Анти-кастомщина
Какое-то время я был горд проделанной работой. То, тем как поменялись процессы в нашей команде, как мы выходили из полного дизайн-хаоса. Я описывал это в статье «Дизайн масштабируемых проектов». Но меня беспокоило несколько моментов. И ощущение того, что мы написали свою кастомщину (хоть и достойно справляющуюся со своими задачами) все чаще напрягало.
Параметрический дизайн. Следующие пол шага после Дизайна в браузере
5 мин
Дизайн в браузере — Параметрический дизайн — Автоматический дизайн
Начну с фразы Григория Бакунова, которую большинство выпустили из внимания, но я не мог проскочить мимо нее.
«Произойдет вытеснение на рынок большого количество специалистов, которые в этот раз вместо того, чтоб рисовать дизайн, будут настраивать средства для построения автоматического дизайна»
Это было упомянуто в контексте автоматического дизайна, что сразу приковало мое внимание. Детально, я пока слабо представляю техническую реализацию автоматического дизайна, разве, что несколько размытых мыслей, не подкрепленных технологиями. Но понятно, что это будет сложная, интересная и гибкая экосистема.
Откатимся немного назад. Буквально года полтора назад, камнем преткновения были отрисованные макеты. Так, как основной проблемой, была разница в отображении/поведении возможностях графического редактора и живого кода. Затем многие «тру» дизайнеры, в основном проектные, перешли на сторону «Дизайна в браузере» и планка логики стала возрастать в довольно быстром темпе. Все синхронизировались в понятиях. Стало понятней общаться с интерфейсными спецами разных уровней и разных ролей (в интерфейсном процессе). Дизайн в браузере само собой точка не возврата, но это всего лишь отправной пункт долгого пути.
Сайт с нуля на полном стеке БЭМ-технологий. Методология Яндекса
29 мин
Туториал
На прошлой неделе BBC рассказала, что для новой версии главной страницы использовала методологию БЭМ, созданную в Яндексе. По такому случаю мы решили поднять материалы мастер-класса «Разрабатываем сайт с нуля на полном стеке БЭМ-технологий» и рассказать вам, как начать использовать полный стек БЭМ-технологий в своих проектах.
БЭМ упрощает разработку сайтов, которые нужно быстро создавать и долго поддерживать. Эту технологию используют во фронтенде почти всех сервисов Яндекса, и она уже успела обрасти множеством библиотек и инструментов, которыми мы хотим с вами поделиться.
В статье мы расскажем, в чём преимущество вёрстки независимыми блоками и что такое уровни переопределения, познакомимся с готовыми библиотеками блоков и инструментами для автоматизации сборки. Покажем, как разные инструменты — например, autoprefixer, css-препроцессор Stylus или модульная система YModules — упрощают жизнь разработчика и создают по-настоящему удобную платформу, если встроить их в процесс разработки по БЭМ.
На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JavaScript. Отдельно остановимся на декларативных шаблонах BEMHTML и BEMTREE, которые позволяют преобразовывать данные в БЭМ-дерево, описанное в формате BEMJSON и, затем в HTML. Рассмотрим в деталях, как написать серверную часть приложения по БЭМ-методологии.
БЭМ упрощает разработку сайтов, которые нужно быстро создавать и долго поддерживать. Эту технологию используют во фронтенде почти всех сервисов Яндекса, и она уже успела обрасти множеством библиотек и инструментов, которыми мы хотим с вами поделиться.
В статье мы расскажем, в чём преимущество вёрстки независимыми блоками и что такое уровни переопределения, познакомимся с готовыми библиотеками блоков и инструментами для автоматизации сборки. Покажем, как разные инструменты — например, autoprefixer, css-препроцессор Stylus или модульная система YModules — упрощают жизнь разработчика и создают по-настоящему удобную платформу, если встроить их в процесс разработки по БЭМ.
На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JavaScript. Отдельно остановимся на декларативных шаблонах BEMHTML и BEMTREE, которые позволяют преобразовывать данные в БЭМ-дерево, описанное в формате BEMJSON и, затем в HTML. Рассмотрим в деталях, как написать серверную часть приложения по БЭМ-методологии.