Полтора года назад, когда я переосваивал навык десятипальцевой слепой печати на клавиатуре, среди прочих сайтов и сервисов по тренировкам и проверкам скорости набора мне повстречался сайт https://zty.pe. Он был хорош. Минимализм, игровая составляющая. Единственное, что не пришлось мне по душе это доступный для игры только английский язык. Его набор я тоже немного осваивал, но он был не в приоритете. Тогда я подумал — как здорово было бы иметь подобную игрушку с возможностью использовать русский язык.
zty.pe
zty.pe
zty.pe
Эта идея в тот момент осталась где-то на задворках сознания. Как и множество других. Не хватало навыков и умений, нужно было выделить значительный кусок времени, которого тоже обычно не хватает. Поэтому все откладывалось на когда-нибудь потом.
Эпоха вайбкодинга и рождение RUTYPE_
Затем наступила эпоха вайбкодинга. И вот, спустя полтора года, когда у меня появилось немного свободного времени и возможность пробовать реализовывать различные идеи и необычные штуки, в том числе в виде интерактивных онлайн-страниц и приложений, мысли вернулись к этой теме.
За основу внешнего вида и механики игры я взял упомянутую выше игру, но в качестве языка по умолчанию выбрал русский. С возможностью добавлять и другие. Сейчас там доступны также английский и украинский.
В работе над проектом мне помогал чат-бот Claude, который, на мой взгляд, из бесплатных аналогов сейчас лучше всего справляется с написанием кода и созданием архитектуры программ. Он же придумал и название, которое мне показалось весьма удачным, поэтому оно и осталось.
Общаться с коллегами крайне полезно. Глупо считать, что ты самый умный и все знаешь лучше всех (иногда есть такой соблазн, но его надо душить на корню). Особенно если ты преподаватель и учишь других. Невозможно это нормально делать, если сам не учишься постоянно, не развиваешься и не стремишься стать лучше и узнать что-то новое, актуальное. Как в сфере своих интересов так и в смежных.
Поэтому, одно из мест, где я сижу, это канал Степика для преподавателей в телеграме. Там в основном авторы платных курсов и из разговоров, преимущественно, темы о том, что с продажами, где найти покупателей, как организовать рекламу и прочие подробности внутренней кухни преподавателей-продажников. Иногда еще возникают небольшие холивары про влияние искусственного интеллекта на образование и, как следствие, будущие перспективы онлайн-курсов.
Во время очередной дискуссии один из преподавателей выложил скрин:
Мне он прям очень понравился. С первого взгляда я оценил удобства, которые может дать подобный дашборд для управления большим количеством курсов (их у меня 25 на текущий момент, на секундочку). Понравился да и понравился, сколько всего интересно каждый день встречаешь в сети? Правильно, много, обрабатывать не успеваешь. Очень много. А тут еще очередные новости на Хабре про новые модели искусственного интеллекта то тут, то там. Мне показалось, что стоит расширить кругозор и отойти от слегка приевшейся гугловской Gemini. Особенно в свете урезания лимитов на нее и кажущейся небольшой деградации актуальных бесплатных моделей.
В свете этого всего, однажды вечером (точнее, поздней ночью или даже ранним утром) я открыл Claude.ai и тамошний чат с Sonnet. Вспомнил про тот самый скриншот из телеграма и подумал — почему бы не сделать что-то подобное? У меня уже был опыт работы с API Степика, я имел представление как он работает и что можно из него вытащить полезного. Фронтендом займется Клод, да и внутренностями тоже. Мое дело будет лишь оценивать в общих чертах результаты и выискивать потенциальные косяки и ошибки.
В последнее время о вайбкодинге не писал только очень ленивый. Даже я писал. Кто-то его не очень жалует, кто-то любителей повайбкодить всячески критикует, кому-то это нравится, а кто-то вообще может считать, что за этим будущее. Даже сам термин еще до конца не определен. Одни считают это просто развлечением, в то время как другие — частью работы. Лично для меня вайбкодинг это возможность создавать что-то используя программирование не особо вникая в детали этого самого программирования.
Например, я давно хотел попробовать сделать расширение для браузера. Но то недоставало желания сесть и разобраться в тонкостях создания и особенностях JavaScript’та, то не было достаточно времени. Статьи и полезные материалы по теме регулярно добавлялись в закладки и прочие списки, а руки так и не доходили.
А потом возникла необходимость, я сел и подумал, а почему бы не завайбкодить? Все так делают, чем я хуже? И спустя час я уже пользовался расширением. Не вникая в детали, так и не разобравшись в итоге с JavaScript, я вместе с Gemini сделал реально работающую и полезную вещь. Очевидно, что там костыли на костылях и все в таком духе. Но лично мне ехать, а не шашечки.
Потом уже как обыденность сделал еще четыре расширения. Принцип таков — возникает необходимость в чем-то, обычно нужно автоматизировать некий процесс, я сажусь и быстро делаю.
Тут важно отметить, что это не бездумный процесс типа — написал промпт, копи/пасте и случилось чудо. Конечно же, я вполне представляю себе как работают и подключаются расширения в браузере, что такое json и как работает всплывающее окно с настройками и почему оно в html, да и код JS, в конце-концов, я тоже вполне могу прочитать и даже заметить явные косяки или попробовать его отладить через средства самого браузера. То есть ИИ выступает не в роли волшебного черного ящика с прекрасной кнопкой «Сделай мне хорошо», а в роли удобного и быстрого инструмента. Хотя может и сделать хорошо. Даже если человек не очень опытный, но умеет задавать вопросы и читать ответы, то вполне сможет по инструкциям от ИИ сделать очень многое.
На мой взгляд, мы сейчас находимся в моменте очередной смены парадигмы в программировании. Так, когда-то писали код на языках низкого уровня, на ассемблерах, отдельно под каждую архитектуру. Затем стали появляться языки высокого уровня. Все выше и выше, все больше абстракций. Они были все проще и программисту не уже не нужно было разбираться как устроен компьютер на низком уровне, не было необходимости напрямую работать с памятью, регистрами или отдельными устройствами. Он мог просто писать код и код работал. Да, знаток асма сможет написать более оптимальный код. Он имеет больше возможностей из-за доступа к машине напрямую. Но процесс написания им кода очень медленный. И уже в моменте появления и развития языков программирования высокого уровня появились мнения представителей старой школы о том, что высокоуровневое программирование это баловство. Но в итоге скорость и простота разработки победили необходимость работать напрямую с железом. Да, асм все еще нужен, иногда используется и его знатоки ценятся. Но в большинстве случаев хватает языков программирования высокого уровня и программистов способных быстро написать работающий код на Python, не понимая как обратиться напрямую к памяти.
Сейчас у нас намечается очередной перелом. О котором, кстати, мечтали разные люди во все времена. Мол не хочу изучать этот язык для компьютера. Пусть лучше он научиться понимать мой, человеческий язык и просто будет выполнять мои команды. Именно так появились языки программирования высокого уровня. Ну ок, кажется время настало. Можно сказать, что текущий ИИ предлагает условно сверхвысокоуровневый язык программирования. Когда ты просто можешь описать, что ты от него хочешь и получить готовый код. Насколько Python далек от машинных кодов и близок к человеческому языку, настолько использование ИИ позволяет программировать описывая задачу обычным человеческим языком. При этом на любом, не обязательно даже английским, под который заточено большинство обычных языков программирования.
Это очередной этап развития программирования. И это очень круто, на мой взгляд. С какой стороны не посмотри. Каждый раз, когда появлялась возможность упростить себе жизни, сделать более доступными какие-то сложные вещи, люди радовались. Когда-то Delphi показал, что интерфейс программы можно делать легко и быстро, буквально накидывая на форму компоненты. WYSIWYG-редакторы избавили от необходимости вникать в детали оформления. Конструкторы сайтов позволили их создавать самому обычному человеку. Все эти инструменты снижали уровень входа. Давали возможность что-то создавать людям, которые могли творить не обращая внимания не некоторые технические преграды. Сейчас у нас появился еще один инструмент. Который помогает, но не заменяет, как не заменили все упомянутые выше инструменты.
Вот такая небольшая простынка размышлений получилась, а я ведь просто хотел рассказать, что сделал еще одну вещь, которую тоже долго хотел попробовать, а руки все никак не доходили — плагин для программы Obsidian.
Всегда хотел вести подсчет количества набираемого текста. Вот люблю я циферки и разные подсчеты. Есть, конечно, готовые плагины. Но вот такой вот я, хочу все сделать сам. Да и просто интересно, а как оно там работает? Поэтому взял и сделал, вместе с Gemini, разумеется. Хотя там ничего сложного-то и не было, кроме кода в TypeScript, с которым я ранее никогда не работал. Но по факту это считай тот же JS, так что…
В общем пара-тройка промптов, компиляция:
И плагин готов, подключен и работает:
Эту статью, как и все прочие уже давно, пишу тоже в Обсидиане. В процессе еще и скриншоты делаю:
Но это в процессе, под конец вышло больше тысячи слов. Не очень и много. Хотя изначально планировал написать пару абзацев. А потом меня куда-то понесло.
Вечно я занимаюсь непонятно чем, вместо того, чтобы спать. Ох уж этот увлекательный вайбкодинг. Но, повторюсь, для меня это не просто промпты и копи/паст, а по факту обучение через практику. Я и код предложенный полистал, и на структуру плагина посмотрел, еще и с npm поразвлекался. Сплошная польза.
Я всегда с осторожностью смотрел в сторону искусственного интеллекта, но, в целом, старался не оставаться в стороне от современных технологий и тенденций. Работал локально с LLM, локально же генерировал картинки и даже видео, использовал публичные сервисы для работы, общался с разными чат-ботами и иногда писал об этом статьи. Но до поры до времени не касался темы вайбкодинга.
Что ж. Настал тот день и час, когда обстоятельства и звезды сложились должным образом. За полчаса я сделал работающее полезное расширение для браузера. Эта немного ироничная статья о том, как я ко всему этому пришел, что и как делал и что в итоге получилось.
Идея
Был обычный вечер. Я лениво общался в Дискорде, параллельно листая ленту Хабра. Увидел очередную статью про вайбкодинг. Как и много раз прежде задумался о том, что уже давно хотел попробовать создать расширение для браузера. Но руки никак не доходили. Да и не было подходящей идеи, которую бы хотелось реализовать. А без интереса делать что-то скучно.
С такими мыслями я открыл вкладку браузера с ютубом. Видео почти на десять минут, где автор будет неспешно вещать великие мудрости, соблюдая интонацию, паузы и все прочее, максимально растягивающее процесс просмотра во времени.
И тут что-то во мне щелкнуло. Есть же волшебная кнопка «Показать текст видео»! Дело в том, что читаю я очень быстро и очень хорошо воспринимаю именно текст. К тому же, читая можно приостановиться на сложных моментах, перечитать, или вернуться к предыдущей части, перескочить через фрагмент, если видно, что он пустой. В общем, с текстом работать можно намного быстрее и удобнее, чем возиться с видео.
Но есть минус. Текст показывается сбоку в небольшом окошке с узкими строками, его приходится долго прокручивать и нельзя просто скопировать (ок, ок, можно, но это все равно лишние телодвижения, особенно если текст длинный, хотя…). В общем, не очень удобно. Вот если бы его можно было взять и скопировать в отдельный документ и спокойно пролистать… Да это же идея для расширения! По идее это не должно быть сложно, тем более у меня даже есть неплохой опыт парсинга веб-страниц.
Однако я решил попробовать чистый вайбкодинг. Отринув свой опыт программирования и прочего. Только Gemini, только хардкор. Никакой помощи. Посмотрим, на что он способен. Были некоторые сомнения, но задача казалась несложной, поэтому я верил в успех. Не зря, кстати.
