В этой статье я хотел бы рассказать о своем новом проекте TryCode, о том почему я его создал и при чём тут Яндекс?
Это мой первый опыт публикации своего проекта в других ресурсах и надеюсь, кому-нибудь мой проект будет полезен.
Мотивация
С 2013 по 2015 год, я работал как fullstack-разработчик на PHP и жиквери. Но в скоре понял, что я занимаюсь какой-то хернёй, развития особого нет и стал изучать только одно направление — Frontend.
В 2016 году я решил устроиться в какую-нибудь компанию на постоянку, ибо фриланс приносил только временный заработок. Начал заполнять резюме на HeadHunter и «МойКруг» и где-то через 2 недели, мне прислали приглашение пройти собеседование на позицию JavaScript-разработчика в Яндексе.
Сказать, что я был удивлен — ничего не сказать.
На тот момент я недостаточно хорошо владел ванильным JS и прекрасно понимал, что я не смогу устроиться в Яндекс. Однако, упускать возможность получить ценный опыт я не собирался.
Собеседование длилось около 1.5 - 2 часов в сервисе CollabEdit.
Мне дали уникальную ссылку от этого сервиса, где я должен был выполнять поочередно каждое задание (всего их было около 5-6). Собеседник в реальном времени видел код, который я писал в этом редакторе.
Сервис работал медленно и по принципу Long Poll , что сильно бесило. Каждое изменение появлялось только через 1-2 секунды и периодически приходилось перезагружать страницу, чтобы увидеть результат.
На работу в Яндекс меня не взяли, как я и ожидал, но после этого собеседования пришла идея разработать TryCode, без боли и по настоящему «in realtime».
Что такое TryCode?
Проще говоря, это онлайн-редактор с возможность как одиночного, так и совместного написания кода или текста (realtime collaborative online editor).
Как я писал выше, после использования CollabEdit, мне понравилась идея с обновлением информации в реальном времени, но из-за недостатков сервиса, я решил разработать свой проект, где были учтены эти минусы и в итоге разработан совершенно другой продукт, который похож лишь идеей «in realtime».
Что есть в этом редакторе?
Я не любитель читать много «букаф» о каком-то проекте, если мне быстро нужно узнать, интересен ли мне проект или нет. Опишу коротко главные фичи.
Live Mode
С помощью режима «Live Mode», вы можете совместного редактирования код в реальном времени. Включив опцию «Readonly», вы сможете демонстрировать изменения, но собеседник не сможет редактировать ваш код.
Password protection
Вы можете защитить свой текст или код с помощью пароля, включив функцию «Password» .
Live Preview
TryCode удобен еще тем, что вы можете разрабатывать HTML-страницу в реальном времени, без перезагрузки редактора, а также, подключать скрипты и стили из другого вашего кода.
Все под рукой
Каждый сохраненный ваш код или текст, будет доступен в вашем профиле в окне «My codes».
Делитесь обычным текстом
TryCode — это такой же сервис, как и Pastebin, только без лишнего мусора. Откройте главную страницу TryCode, нажмите «Save» или просто начните писать текст, чтобы ваша страница сохранилась.
Остальные фичи
- Автоматическое сохранение кода при каждом изменении.
- Prettier
- Emmet
- Command Palette
- Dark theme
- Поддержка подсветки синтаксиса более чем для 30 языков программирования и разметок (Markdown, HTML и т.п.)
Какой стек технологий использовал?
Frontend — ReactJS, Redux, React Apollo, ACE Builds, Socket.IO
Backend — NextJS, ExpressJS, PassportJS, GraphQL (Apollo) , MongoDB (Mongoose), Socket.IO
Для анализа бандла я использую @next/bundle-analyzer.
UI-библиотеки не юзаю, ибо занимают лишние KB в итоговом бандле.
При деплое первой версии в прод, бандл весил почти 5 МБ, Карл! Страница грузилась >= 2 секунды.
Пришлось некоторые библиотеки грузить отдельными файлами через <script>. В итоге из 5МБ, получилось:
Device = No emulation, Network throttling, CPU throttling = Provided by environment.
И чо? Какой смысл создавать очередной велосипед?
Хотелось бы отметить, что это не «убийца» JSFiddle, JSBin, Codepen, Pastebin и т.п., каждый выбирает то, что ему кажется удобным.
Я создал этот сервис для того, чтобы быстро тестировать JS-код, делиться кодом или текстом.
Никаких реклам, никаких лишних popup-окон и мусорных UI-элементов. Интерфейс чем-то подобен обычном блокноту в Windows.
1. Ввёл в адресной строке «try».
2. Автокомплит в браузер выдал ссылку на TryCode.
3. Перекинул в редактор через Drag & Drop файл или ввел какой-нибудь текст.
4. Скопировал ссылку из адресной строки, отправил другу.
5. Все это займет не более чем 3-5 секунд. Profit!
Итого
Данный проект запущен в режиме «beta» и уверен, что там еще достаточно много багов, про которых я не знаю. Для этого, я решил поделиться в сети этим проектом.
Если вы заметили какой-то баг, пишите мне в Telegram: @archakov06 или на почту [email protected]
P.S.: Я знаю, что я допустил мноха ошибок в тексте. Прошу на это закрыть глаза. Спс.
Комментарий недоступен
Эм, TJ = Yandex или что?
Комментарий недоступен
1. Почему не добавили ссылку ?
2. Почему нет русского языка в интерфейсе ?
Комментарий удален модератором
Вдруг какой-нибудь начинающий зайдет в редактор, и не поймет куда и, что ему нажимать? Потеря клиента/посетителя.
Комментарий удален модератором
Согласен. Удачи в развитии! Добавлю в закладки.
Комментарий удален модератором
Комментарий недоступен
это дырка.
Ты один из тех, кто ставит русификаторы что-ли?
Я один из тех, кто залил русификатор Shaun White Snowboarding в интернет в 2009 году, ее.
Я бы не стал этим гордиться
:( была моя единственная гордость
Комментарий недоступен
Комментарий недоступен
Комментарий недоступен
выглядит годно
словил баг:
создаешь новый документ, пишешь в него что нибудь - изменения сохраняются
логинишься и вносишь изменения в документ - они не сохраняются
разлогиниваешься и вносишь изменения - снова все работает
Комментарий удален модератором
проверял с другом, и он внес изменения в документ так же не залогиненым
тогда как это работает?
создаешь документ как гость в документ могут вносить изменения другие гости, но залогинившись вносить изменения ты уже не можешь
Комментарий недоступен
Комментарий удален модератором
Выглядит годно.
Надеюсь, однажды настанет день, когда люди перестанут пользоваться socket.io.
Комментарий удален модератором
тормоз этот socket.io
2019й год всёж на дворе
https://github.com/socketio/engine.io/issues/388
Комментарий удален модератором
Нативные вебсокеты же есть уже.
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications
ну да, он на нативных и построен. с фоллбэком на рест при недоступности вебсокетов. просто в серверной части это очень медленно, а единственное что получаешь в замен - это подписки и комнаты, что можно и руками какбэ сделать.
все очень круто но зачем здесь?
тебе на
indiehackers.com
producthunt.com/ship
Комментарий удален модератором
еще можно влезть на https://news.ycombinator.com/showhn.html
там самое место продукту для разрабов
и не просто опубликуй на ph - используй именно ship
он даст
1) простой лендос
2) возможность сформировать community и работать вокруг него рассылками и т.п.
пример того что мы готовим ща
https://www.producthunt.com/upcoming/jobbrd
P.S. Впрочем с учетом что ты уже запустился, он может и не потребоваться
Комментарий удален модератором
Что-то у меня окно Live Preview не отображается, только редактор. Переименовала файл в index.html, обновила страницу - никак. Эта функциональность доступна только зарегистрированным?
Этот момент немного непонятен, как из 5МБ получилось ~55 Кб как на скрине, девтулс показывают загруженных 1.1 МБ.
Соглашусь, что выглядит годно, как минимум достойная работа для портфолио, имхо. Забота о производительности особенно импонирует