{"id":14275,"url":"\/distributions\/14275\/click?bit=1&hash=bccbaeb320d3784aa2d1badbee38ca8d11406e8938daaca7e74be177682eb28b","title":"\u041d\u0430 \u0447\u0451\u043c \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u0430\u0432\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f72066c6-8459-501b-aea6-770cd3ac60a6"}

Пока я искал работу, делал платформу для собеседований, а придумал симбиоз YouTube и GitHub Gist

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

Проект еще в разработке — релиз планируется после середины октября.

Предыстория

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

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

Полтора года спустя, пока искал вакансии по Golang было много свободного времени, интервью все проходили в разных лайвкодинг-комнатах, и появилась затея запилить свою систему для таких записей. Кроме того, некоторые компании просили дать право на запись, чтобы др команды могли пересмотреть (например Skyeng делает именно так) … Запись всегда делалась записью экрана, что мне показалось не очень удобным — может этого и достаточно, но мне показалось, что можно сделать более интерактивный формат.

Проблема

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

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

Третья проблема: когда кому-то надо помочь с кодом, то людям приходится в чатах писать десятки сообщений, чтобы объяснить — что исправить, где переписать код.

Явно напрашивается сервис, где нужно написать код и объяснить построчно, пословно.

Если говорить про собеседование, то иногда полезно дать запись с кодом, чтобы отревьюить и прокомментировать всей командой.

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

Первый образец

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

Готового ничего не было — пришлось написать свое, взяв пару опенсорс-библиотек на языке Typescript за основу.

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

Функционал

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

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

В каждый момент времени будет возможность оставить комментарий с указанием выделенного участка кода:

При клике на паузу вы можете поработать с состоянием кода в любом моменте времени при проигрывании. Видео/аудио также управляются плеером воспроизведения.

Код можно комментировать также в любой момент времени и ссылаться на время, при клике на такой комментарий — произойдет перемотка к нужному состоянию:

В любой момент времени работайте с кодом и замечайте. Автор записи сможет выводить некоторые комментарии на таймлайн

Монетизация

  • Предполагается, что общедоступный функционал записей будет в виде: короткие записи до 10 минут с хранением записи от 1 до 3 суток. Запись можно сделать приватной или расшарить всему интернету.
  • Длинные записи и длинное хранение — за оплату по подписке.
  • В будущем: различные интеграции с Gitlab/Github для работы с многофайловыми проектами — эти фичи будут не в первом релизе.
  • Сделать платформу с курсами/уроками, где каждый сможет выкладывать и категоризировать свои записи.
  • Встраивание плеера записи на своем блоге/сайте через js-скрипт, чтобы не писать портянки с кодом и держать изменения кода с объяснением в одном блоке.
  • Сделать live-stream, но при этом чтобы можно было приостанавливать изменения кода, отматывать назад и писать комментарии к коду в нужном вам файле. На базе этого сделать те самые изначальные интервью с несколькими участниками
  • еще много всего…

Команда

Разрабатываю пока один. Первая версия почти доделана: осталось доработать запись через WebRTC и сделать несколько оптимизаций и страниц кабинета.

После первого релиза буду искать команду, и, возможно, инвестиции для команды. Все будет зависеть от того, насколько сервис будет иметь спрос: -)

Жду ваших комментариев и оценок в комментариях. По вопросам пишите в телеграм: @halabooda

Чтобы быть в курсе запуска сервиса — подпишитесь на канал проекта

0
92 комментария
Написать комментарий...
Daily Science

Следующим можно сделать симбиоз GitHub и OnlyFans: за донаты в прямом эфире разработчики Rust и C будут писать на JavaScript.

Ответить
Развернуть ветку
Дмитрий Валерьевич

Лучше на 1C. Если уж это аналог онлифанс. Разврат, так разврат.

Ответить
Развернуть ветку
2 комментария
Pixel Lens

На твиче давно такие стримеры есть

Ответить
Развернуть ветку
3 комментария
Ann Kozlova

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

Ответить
Развернуть ветку
Павел Шабалин

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

Ответить
Развернуть ветку
5 комментариев
Плохой пришелец

давно есть плагин на хром для копирования кода прямо с видоса. Blackbox или что то такое. Поищите в инете

Ответить
Развернуть ветку
1 комментарий
Максим Федоров
Автор

Спасибо! Да, есть амбиции замахнуться на курсы и уроки… и скопировать удобно, и комментарии раскинуть по коду и много чего еще

Удобно будет инструкции писать для оньординга по проекту

Ответить
Развернуть ветку
Невероятный Блондин

Делаешь скриншот,
открываешь картинку,
и с помощью встроенной функции Live Text на маках и айфонах выделяешь нужный кусок кода на этой картинке и копируешь его.

Изи пизи.

Ответить
Развернуть ветку
Владимир Тихонов

крутяк, верю что будет спрос

Ответить
Развернуть ветку
Франсуа Пиньон

да хорошо бы взлетело.

Ответить
Развернуть ветку
Максим Федоров
Автор

спасибо большое!

Ответить
Развернуть ветку
2 комментария
Sergio Diflux

предоплата — лучше всяких слов

Ответить
Развернуть ветку
Андрей Середа

не слишком ли это нудно смотреть как человек пишет код и комментирует свои действия?

Ответить
Развернуть ветку
Дмитрий Перепёлкин

Думаю зависит от того, что смотреть.
Многие не могут въехать в MVC модель и опускают руки на первых уроках, т.к. информации кажется слишком много. Я про Django, ROR и, прости господи, Spring.
А так смотришь видео как да что сильно не вдаваясь, доходишь до конца, видишь результат, и, примерно понимая этапы, начинаешь по-тихоньку самостоятельно изучать )

Ответить
Развернуть ветку
Максим Федоров
Автор

можно не смотреть... но доступ к изменениям кода иметь:
- тут так сделал
- тут так поменял
- пошарил ссылку на таймкод

Ответить
Развернуть ветку
1 комментарий
Artem Petrenkov

Нейминг от бога: gore play — кровавая игра ))

Ответить
Развернуть ветку
Антон Кузьмин

Ну или горе-плей, тоже ничего)

Ответить
Развернуть ветку
Дмитрий Перепёлкин

Интересный сервис, хотя для себя пользы не вижу, по ряду причин:
1. Учиться кодить по видео, лично мне, кажется странным, хоть это и популярно. Формат статей гораздо удобнее.
2. Не вижу особой проблемы переключаться между окнами, к тому же код есть смысл выполнять сразу в среде, если речь не про JS.

Но в целом формат крутой для обучалок, есть большая вероятность что взлетит 😉

Ответить
Развернуть ветку
Максим Федоров
Автор

спасибо!

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

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

Ответить
Развернуть ветку
1 комментарий
Артем Шатов

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

Ответить
Развернуть ветку
emil

ничего не понятно, но очень интересно попробовать

Ответить
Развернуть ветку
Максим Федоров
Автор

на самом деле все просто — пишешь код, комментируешь звуком/видео и выкладываешь...

зрители могут смотреть, перематывать и в моменте иметь доступ к коду :-)

Ответить
Развернуть ветку
1 комментарий
Максим Федоров
Автор

Доступ к колу — в смысле выделять, копировать

Ответить
Развернуть ветку
Гена Фомин

Помоему тут монетизация это чистый B2B. Подписки для enterprise клиентов как инструмент команды, для обучения, knowledge transfer, и собеседований. Правда нужен хороший продажник.
А виджеты это наоборот средство продвижения, это в ваших интересах чтобы на него везде натыкались. Поэтому брать за это деньги это только себе вредить.

Ответить
Развернуть ветку
Максим Федоров
Автор

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

Ответить
Развернуть ветку
1 комментарий
Дмитрий Перепёлкин

В enterprise этого дела полно уже )

Ответить
Развернуть ветку
2 комментария
Marine Le Pen

Видел подобный сервис, пример: https://scrimba.com/scrim/czvKPPsw

Ответить
Развернуть ветку
Дмитрий Перепёлкин

Онлайн интерпретаторов чуть больше чем дофига )
Тут речь про комбо видео и подсветок с видео.

Ответить
Развернуть ветку
1 комментарий
Максим Федоров
Автор

воу, ничего себе! мне сегодня кидали уже его в личке, но там на главной не понятно было как он работает...

да, но! есть чего сделать не как у них много разных фич и совсем другой уклон по использованию

Ответить
Развернуть ветку
Petr Sidorov

Недавно как раз думал, что было бы здорово, если бы подобный сервис был, а вы его сделали)

Ответить
Развернуть ветку
Максим Федоров
Автор

круто, что есть мысли иметь такой функционал, спасибо — очень взбодряет

Ответить
Развернуть ветку
Viacheslav

очень круто!! молодцы!

Ответить
Развернуть ветку
Aleksey Dmitriev

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

Ответить
Развернуть ветку
c01nd01r

Пока пытался вспомнить как называется Scrimba, нашел https://www.codecast.io/

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Sergey Bunevich

Научись, пожалуйста, доляры переводить по свифт нормально.

Ответить
Развернуть ветку
2 комментария
Дмитрий Перепёлкин

Если уровень начальный, рекомендую вот эту штуку, чтобы разогнаться
https://www.sololearn.com/learning/1075

Ответить
Развернуть ветку
Алексей Викторович

Идея хорошая и востребованная. Желаю удачи!

Ответить
Развернуть ветку
Максим Федоров
Автор

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

Ответить
Развернуть ветку
Олег Коваль

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

Ответить
Развернуть ветку
Максим Федоров
Автор

да! под это будет вторая статья :) но через 2-3 месяца

Ответить
Развернуть ветку
1 комментарий
Alexander Matveev

Кайф! Удачи!

Ответить
Развернуть ветку
Sergio Diflux

А проблема не решается простым добавлением ссылки на исходник?

Ответить
Развернуть ветку
Максим Федоров
Автор

Если нужно объяснить кусок кода, одновременно изменяя его, то нет

Ответить
Развернуть ветку
3 комментария
Игорь Кулаков

Хз зачем это.
У курсов почти всегда есть гитхаб, разбитый по урокам.

Ответить
Развернуть ветку
Дмитрий Перепёлкин

Ответ в самой статье. Чтобы не прыгать между окнами.

Ответить
Развернуть ветку
1 комментарий
Пряничный дедушка

за старания лайк, но так-то проще открыть код в одном окне, видос в другом

Ответить
Развернуть ветку
Peter Bondarenko

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

Погуглил и вот такое нашел: https://chrome.google.com/webstore/detail/copyfish-%F0%9F%90%9F-free-ocr-soft/eenjdnjldapjajjofmldgmkjaienebbj

Выделяешь IDE в видосе, а он тебе OCR-ом выдает текст с экрана. Копипастишь и готово. Жаль только, табуляция портится.

Ответить
Развернуть ветку
Максим Федоров
Автор

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

это отдельная тема для отдельной статьи месяца через 3-4 :)

в данном случае рассматривается работа с кодом, где можно взять код и прокомментировать его голосом/видео... бро, просто взять код откуда-то — совсем не задача текущего сервиса :)

Ответить
Развернуть ветку
1 комментарий
Guy Fawkes

Расскажите, как отсылаете текущий стейт на бекенд и сохраняете его? Допустим, я быстро ввожу текст, где хранится каждый ввод моей буквы?

Ответить
Развернуть ветку
Максим Федоров
Автор

websocket (уже даже готов почти), но в первой версии будет батчем http

Ответить
Развернуть ветку
7 комментариев
Sergey Bunevich

Принтскрин)

Ответить
Развернуть ветку
2 комментария
Bastard

Есть сервис, в котором можно записать процесс написания кода - https://codeinterview.io/playback/OYNDPAHSPN. Но видео и заметок (вроде) там нет

Ответить
Развернуть ветку
Кадет Новоильинский
Ответить
Развернуть ветку
Копил и Верил

На днях видел запрос - сделать клон GitHub
Хотел картинку вставить, но почему-то не аттачится. https://spb.hh.ru/vacancy/69501368

Ответить
Развернуть ветку
89 комментариев
Раскрывать всегда