Frontosaur помогает ставить задачи разработчикам через браузер

Постановка задачи веб-разработчикам на удалёнке сродни игре в крокодила: объясни, что хочешь, не сказав ни слова. В итоге менеджеру приходится придумывать множество способов объяснить задачу: скриншоты, записи экранов. А важно не только поставить задачу, но и проверить её.

В закладки
Аудио

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

Около года назад я работала менеджером интернет-проектов в отраслевом онлайн-СМИ, в котором веб-разработчики были на удалёнке (думаю, многим читающим знакома эта ситуация).

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

Звучит просто, но это приносило массу затруднений как мне, так и разработчикам: в чате было трудно найти давний скриншот, диалоги из комментариев в Trello всё равно перекочёвывали в мессенджеры, а на одном мониторе переключаться между окнами мессенджера, Trello или чата и самим интерфейсом было неудобно. Но хуже всего было увидеть сообщения вроде:

  • А это где?

  • Не вижу у себя такого.

  • Не понимаю, о чём ты.
Всем знакомая ситуация при общении с удалёнщиками Наталья Пестова

Ставить задачи удалёнщику было затруднительно: из Trello обсуждение всё равно переходило в чат, в чатах сообщения часто терялись. Постановка и проверка правок требовала постоянного переключения между интерфейсом и таск-трекером.

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

Точкой кипения стал момент, когда нам пришлось нанять аутсорс-агентство фронтендеров для вёрстки 20 страниц под редизайн сайта. Теперь правки нужно было высылать по почте большим документом со скриншотами и урлами в определённый срок. А после их исправления, естественно, уже забыв всё написанное, вновь поднимать документ и самой разбираться в своих же скриншотах и описаниях.

Как выглядел процесс проверки задач на двух мониторах Наталья Пестова

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

При этом с дизайнерами мы давно пользовались Invision, Figma, MarvelApp или Zeplin, и это было невероятно удобно: кликнул на экран — оставил комментарий — дизайнер увидел и отметил как выполненный — всё! Никаких скриншотов, чатов и таск-трекеров — только команда и сам интерфейс.

Вопрос «как иначе» не давал мне покоя, и в один день решение пришло. Основательно погуглив, я поняла, что на рынке есть только сервисы, которые в итоге тоже сводились к скриншотам или скринкастам. Некоторые из них существенно упрощали процесс постановки задач в таск-трекерах, например, Marker.io. Но в моём представлении это должно было выглядеть иначе:

Зарождение идеи

В результате, обсудив идею со своим другом — основателем веб-студии, которому была отлично знакома боль общения с удалёнными заказчиками, — мы решили попробовать реализовать расширение, позволяющее оставлять комментарии прямо на странице. Так у нас появился pet-project, который мы делали больше для себя, чтобы стало комфортнее работать.

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

Первая версия плагина

Написание кода заняло примерно неделю во внерабочее время. Так мы решили первую проблему и практически исключили скриншоты из рабочего процесса.

Вскоре выявились и минусы такого решения — сами ссылки на страницы мы всё равно скидывали в чат или Trello, плюс для появления задач URL должен был в точности совпадать с тем, на котором ставились задачи.

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

Так удалённые разработчики могли случайно наткнуться на задачи, которые были поставлены не им, а другим подрядчикам. Да и когда работают несколько менеджеров, было не очень удобно натыкаться на чужие задачи.

Поэтому мы сделали систему проектов, в каждый из которых можно было добавить нужные веб-страницы. И дать доступ к проекту удалённым разработчикам и, например, дизайнеру.

Система проектов и страниц в них

Постепенно знакомые и друзья из ИТ-сферы, которые узнавали об этой идее, просили дать доступ и им. В конечном счёте мы сделали бесплатное расширение, назвав его Frontosaur — сервис, позволяющий отметить элемент на свёрстанном интерфейсе, написать комментарий — после другие члены команды увидят его у себя в браузере.

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

Добавление задач на интерфейс через Frontosaur

Что сегодня умеет плагин:

  • Отмечать задачи прямо на веб-странице ровно в той точке, которую отметил пользователь. Работает в том числе и с SPA.
  • Даёт возможность комментировать поставленные задачи.
  • Группировать страницы в проекты и приглашать членов команды в проект.
  • Работает в Chrome, Opera и Яндекс Браузере

Прямо сейчас учим плагин интегрироваться в самые популярные таск-менеджеры.

Сайт проекта: frontosaur.com. Будем рады, если пригодится и вам!

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Наталья Пестова", "author_type": "self", "tags": [], "comments": 50, "likes": 36, "favorites": 73, "is_advertisement": false, "subsite_label": "tribuna", "id": 72352, "is_wide": false, "is_ugc": true, "date": "Wed, 07 Aug 2019 18:41:14 +0300" }
{"average":26297,"one":95,"ten":75}
Сколько денег вы откладываете в месяц?
Ответьте и узнаете, сколько копят другие.
0 ₽
70 000+ ₽
0 ₽
{ "id": 72352, "author_id": 314959, "diff_limit": 1000, "urls": {"diff":"\/comments\/72352\/get","add":"\/comments\/72352\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/72352"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199116, "last_count_and_date": null }
50 комментариев

Популярные

По порядку

Написать комментарий...
6

меня подбешивало, что нужно для каждой правки сделать скриншот, описать проблему, поставить задачу в Trello или скинуть в чат

Так вы просто категорически непригодны для этой работы. Это видно по вашим деструктивным формулировкам – "поменьше, побольше, поярче". Это все не задачи для разработчиков, вы им нервы треплете только, разработчик должен получать конкретно сформулированный запрос. Не можете сами на скриншоте нарисовать линии, количество пикселей указать, код цвета, как это делают все, нанимайте дизайнера (хотя в вашем случае, тут надо вообще целого менеджера нанимать, вместо себя). Ставить задачи, ясные, четкие, однозначные и корректно адресованные – это и есть работа нормального менеджера, а вы похоже из категории "работать не хочу, хочу руководить".

Ответить
8

Уважаемый M Bot, себя поменяйте.
Суть кейса в том, что менеджер выявил проблему, а после этого предложил и реализовал ее силами команды. В этом, собственно, и состоит одна из основных задач менеджера. Это раз.
Кроме того, у вас чуть-чуть путается понимание "идеального" мира и реального, в котором обычно присутствует большое количество самых разных багов и хотфикса. И, как следствие, кроме "конкретно сформулированного вопроса" они получают список правок.
А чтобы вы понимали (потому что вы, вероятно, с этим мало сталкивались, раз у вас столько желчи): как для менеджера, так и для разработчика/дизайнера/who-ever составить и принять в работу док с правками занимает, порой, очень много времени.
А, в конечном счете, сервис экономит именно время на выполнение рутинных операций с формированием и передачей правок в работу. Это два.
Третье.
К слову, большая часть известных ныне продуктов появилась именно в результате того, что кому-то в голову приходит превентивное решение какой-то рутинной проблемы. Но всегда найдется куча ретроградов, которые говорят: "Да ну, это ж говно! И ты - говно, а не специалист!".
Так что M Bot - идите и набирайте правки.
Наталья, все круто - выкатывайте новую версию не обращая внимание на ботов)
Удачи!

Ответить
0

Вениамин, здорова!!! Сколько лет, сколько зим! Приятно удивлен видеть тебя в комментах на этом сайте )))

Ответить
4

Внимательно перечитала, но не нашла ничего про "побольше" или "поярче" в задачах, которые ставила.
Вы явно не читали текст: проблема, которую я хотела решить - это создание и отправка скриншотов как таковых в отдельном от самого интерфейса месте. Зачем писать количество пикселей, рисовать линии и стрелки на скриншоте, когда можно указать это прямо на интерфейсе (и рисовать линии на скриншотах, к слову, никак не задача дизайнера).
Ключевое в вашем сообщении - фраза "как делают все". Когда-то все делали скриншоты с файлов psd и отправляли дизайнерам, однако появились Invisionapp и Marvel и упростили жизнь всем, кто не слушал наставлений вроде вашего "делай скриншоты детально, как все, тыжеменеджер". А пока ваш совет больше похож на советское "все так делают и ты не жалуйся" 🤷🏻‍♀️

Ответить
1

Я был и программистом и руководителем проекта. Работал много и с удаленщиками и с штатными
Всегда, когда общаются люди между собой, есть риск недопонимания. И чем мельче правка, тем больше времени уходит на ее согласование и пояснение.

Лучше один раз показать, чем сто раз объяснить :-)

Ответить
0

Согласен с @M Bot. Такие мелкие задачи, как в тексте, обычно нарезаются в одну задачу, зачастую на звонке между менеджером и разработчиком, список лучше составлять самим разработчиком, и потом выполняются за раз, более крупные оформляются в отдельные таски. Всё. Так же у созвона с разработчиком есть куча других плюсов: он может предложить другой, более простой способ реализации из-за чего экономится время, деньги, качество реализации и достигается понимание.

ЗЫ: способ возможно не подходит для галер, очень больших команд или если плохая самоорганизация в команде.

Ответить
0

Владимир, согласна с вами: созвон - отличная практика и без них, наверное, вообще никак нельзя обойтись. Плагин его никак не заменяет и не отменяет :) Но не будете же вы каждый раз созваниваться насчёт мелких правок, гораздо проще имхо их где-то зафиксировать и идти дальше. А как раз объемные задачи лучше обговорить лично, как вы верно говорите, с предложениями от разработчика как сократить на них время

Ответить
4

От себя скажу: Хороший и отличный плагин, в реальности убирает много сообщений о не понятных задачах. Удивляет отношения людей к реализованной идеи, аргументов в многих комментариях нет. У ребят была проблема, они своими силами ее решили, и дали возможность использовать свою разработку другим командам, разработчикам и т.п. лицам. Рекомендую вам делать продукт и дальше, главное не убейте его сотнями возможностей, лучше позвольте их отключать.

P.S. Решил написать просто, без "Умных" слов. Развивайте проект, реально получится годный продукт, особенно сейчас.

Ответить
0

Спасибо за добрые слова! Будем рады отзывам и предложениям

Ответить
3

Очень крутое и нужное расширение, не понимаю хейта в других комментариях.

Ответить
0

Спасибо! Будем очень рады отзывам по итогам использования.

Ответить
–1

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

Ответить
–1

"Не знаю... ну поиграйся со шрифтами (с)" :D

Ответить
1

Владимир, Наташа начинала как frontend разработчик и длительное время со мной работала в веб-студии, где мы все это как раз выслышивали
Лучше отвечать на такое комментариями на странице, чем в док файле :-D

Ответить
2

Отличный плагин, спасибо большое

Ответить
0

Спасибо! Будем рады отзывам. Если возникнут проблемы - можно писать мне в телеграм @klimenkoyuri

Ответить
2

круто! протестим с командой

Ответить
0

Буду рада отзывам! Можно в тг @napest

Ответить
1

Кто может видеть комментарии? Их можно разделить как-то для разных разработчиков в рамках одного проекта?

Ответить
3

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

Ответить
0

Пока даже, к сожалению, нельзя поставить для кого задача :((
Но скоро будет интеграция в трелло и с этим же обнолвением добавим для кого задача

Ответить
–1

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

Ответить
4

Вот только сплошь и рядом в таких местах процессы нифига не оптимальны.

Ответить
1

А как быть, если у разработчика и менеджера разные расширения мониторов? Сместится ли комментарий от этого?

Ответить
2

Мы специально в комментарии делаем пометку расширения, на котором найдена ошибка.
+ Комментарий сдивгается вместе с элементом при адаптивной верстке

Ответить
1

Давно мечтаю о расширении или сервисе, с помощью которого можно делать пометки, выделять текст на определённых страницах и сохранять это как закладки. С возможностью пошерить.

Часто из-за одной фразы или картинки сохраняю в закладках всю страницу. А потом надо ещё вспомнить, зачем её сохранил.

Если расширить функциональность вашего сервиса до описанного, получится очень востребованная штука для широкой аудитории.

Ответить
1

Спасибо за идею! Функциональность сейчас позволяет сохранить страницы с комментариями и для себя, можно назвать проект "Сохраненное" или вроде того и добавлять туда страницы с комментариями. Согласна, что для задачи сохранить страницу, возможно, просится что-то проще, подумаем над этим. Но как временное решение проблемы - почему бы и нет :)

Ответить
1

Спасибо! Подумайте над возможностью выделить текст и прямоугольную область (элемент, изображение)

Ответить
0

Разве расширение evernote не умеет это делать?

Ответить
0

Насколько помню, эвереоут сохраняет страницы внутри приложения, что не очень удобно. Он монструозен, пользуюсь крайне редко. Хочется прямо в браузере, открыв любую страницу, сразу иметь доступ к пометкам на ней.

Ответить
0

Интересная идея. Спасибо!

Ответить
1

Для корректировки контента наверное ок, а вот для тестирования верстки скорее нет.

80% проблем возникают в сложных ситуациях - мобильные браузеры, непопулярные браузеры (IE, Safari, FF и т.п.), разные версии браузеров, ОС и устройств, разные размеры и разрешения экранов. Если плагин работать даже на половине браузеров, вторую половину всё равно придётся комментировать скриншотами и скринкастами... А современные скриншотилки позволяют быстро и удобно делать пометки и текстовые замечания прямо на скриншоте, это обычно снимает недопонимание.

Ответить
0

Приветствую!
То, что касается разных размеров у хрома и сафари есть отличная встроенная функция для тестирования разных размеров. + мы специально пишем размер на котором найдена ошибка
У сафари вообще можно настроить просмотр в режиме IE7, что очень удобно

Ответить
0

1. не работает, см. видео
2. на чём гифки делали?

Ответить
2

Извините за неудобства! :( Как можно с вами связаться? Пока такого бага не наблюдалось у других, буду рада разобраться
Гифки делала сама из картинок, нарисованных в Figma и дальше https://ezgif.com/

Ответить
0

эммм... пытался через профиль Вам ответить, но там нет контактных данных, как Вы регистрировались то? в моём профиле есть ... эммм... профиль на ФБ - пишите.

Ответить
0

Через Google :)
Написала вам на ФБ

Ответить
0

Вообще можно в фигму скриншот вставить и потом уже по этому скриншоту комментить.
PrintScreen -> Ctrl+V -> comment -> можно упомянуть человека

И уже есть сервисы для комментирования веб-приложений, которые встраиваются в сайты
https://usepastel.com/

Ответить
0

И другие альтернативы https://alternativeto.net/software/pastel/
Мы пользовались Pastel и TrackDuck

Не предлагаю остановить вашу разработку, а проанализировать их работу и бизнес-модели и возможно применить у себя.

Ответить
0

Павел, большое спасибо, изучим!
Забавно, у нас в начале была идея сделать подобное Pastel, когда ссылка открывается во внутреннем фрейме. У них только есть существенный недостаток: если url закрытый или домен на локальном сервере они не подходят, слышали от многих знакомых такой запрос

Ответить
0

приложение только для Хрома. А другие браузеры?

Ответить
0

Олег, плагин не только для Хрома, сейчас работает также в Opera и Яндекс Браузер, что уже составляет 81% десктопных устройств в РФ. Добавила об этом упоминание в статье. Работаем сейчас над Firefox и Safari :)

Ответить
0

Не могу зарегистрироваться и войти(

Ответить
0

Павел, добрый день!
После публикации у нас зарегистрировалось много пользователей, поэтому понадобилось переехать на новый хостинг помощнее. Увы, не обошлось без казусов, в течение дня обещают восстановить работоспособность сервера. Напишу Вам, как только это произойдет

Ответить
0

Успешно все починили. Простите за неудобства. Пришолсь резко перезжать на нвый сервер

Ответить
0

Успешно все починили. Простите за неудобства. Пришолсь резко перtезжать на новый сервер*

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления
{ "page_type": "default" }