Топ 20 лучших онлайн-инструментов кодинга

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

Перед вами 20-ка лучших!

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

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

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

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

1. Koding (публичная бета-версия)

На данный момент совместное кодирование не является диковинкой. Ранее известный как Kodingen, многофункциональный инструмент на основе браузера IDE все еще находиться в бета-версии, но он уже радует своими 

«20 процентами» оставшимися до  завершения.

Опираясь на данный этап в редакторе кода Ace, Koding уже имеет несколько интересных возможностей, в том числе доступ к MongoDB в качестве опции для  SQL.

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

2. Cloud9

«Это как Google Docs, но только для кода». Так звучит кульминация его рекламной кампании. Но на самом деле очень приятно наблюдать за Cloud9, развивающимся от Mozilla Bespin cloud. И для совместного кодирования — это первый шаг.

SSH, FTTP, поддержка drag and drop, и даже локальный / оффлайновый вариант разработки для пользователей Linux / Mac. Вы можете поделиться своим кодом, и буквально через несколько минут с ним смогут работать другие пользователи. Вам всего лишь надо будет отправить и получить быстрое письмо, и вы сразу сможете начинать. Расширенный функционал, конечно, доступен за определенную плату.

3. CodePen

Работа Alexa Vazqueza, Tima Sabata и Chrisa Coyiera, CodePen ориентирован на получение удовольствия от функциональности интерфейса. CSS3 и Canvas заслуживают особого внимания.

Войти можно с помощью своего GitHub ID или создать свой собственный CSS / HTML / JS эксперимент, или присоединиться к одному из многочисленных и весьма продвинутых исследований в сети. Сферы могут адаптироваться к вашему выбору приложений из библиотеки: jQuery, MooTools и т.д. Таким образом, практически любой мастерский интерфейс может быть продемонстрирован и деконструирован. Это — обучение на стероидах, отличная вещь.

4. Dabblet

Dabblet — это чистый и простой CSS / HTML код. Интерфейс обеспечивает просмотра кода на трех панелях, и это результат данного приложения. В настоящее время не существует возможности ввода JS, но фрагменты могут быть сохранены как GitHub Gists и перезагружены / отправлены по той же схеме.

Дабы заверить, что работа в Dabblet является настолько чистой, насколько это возможно, CSS ввод использует prefix-free.js (еще один из первых рейтинговых проектов от Lea Verou). И на этом все. Никаких излишеств, с ним не нужно не возиться, просто ясность и фокусировка. В социальном плане возможности слабые, но если это не серьезная проблема для вас, приступайте.

5. Pastebin.me

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

Быстрый просмотр последних экспериментов скажет вам, что Pastebin действует как рабочая лошадка. “Что делает этот код” — проверку условий для ряда работающих разработчиков. Возможно, он мог бы сделать то же самое и для вас? Он работает на CouchDB, и это уже хорошо, не так ли?

6. CSSDesk

Тот факт, что CSSDesk является результатом работы одинокого дизайнера / разработчика Josha Pylesa, показывает, как много можно сделать, располагая даже самой маленькой командой в наши дни. Сотрудничество и экспериментаторство в сети здесь остаются. Но кроме этого также существует очень хороший шанс, что инструменты такого же типа как разработка Джоша, помогут изменить способ строения Интернета.

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

7. JSFiddle

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

Как в устранении неполадок в JavaScript/HTML/CSS/SCSS, так и в экспериментировании и обмене информацией данное приложение является одним из лучших. Вы можете выбрать свои библиотеки, отладить JS, вставить полученный результат или просто поделится URL. Таким образом, приложение подтянет код и для вас, но здесь нет завершения или подсказки, только демонстрация информации.

8. jsdo.it

jsdo.it владеет всем необходимым. Если вас вдруг взломают в ходе экспериментов WebGL, HTML5 игры или просто старых JavaScript, система готова к работе, а количество импортируемых библиотек просто впечатляет. Данному приложению просто кое-чего не хватает в пользовательском интерфейсе.

Этот недостаток в значительной степени влечет за собой отсутствие возможности настройки под себя. И очень жаль, потому что если вы продолжите настраивать учетную запись, вы наткнетесь на множество интересных вещей, которые размещены в плане пометки / анализа вашей продукции, а доска обсуждений здесь довольно оживленная (хотя, в основном, на японском). Вы даже сможете настроить длину страницы.

9. Tinker.io

Chiel Kunkels’ Tinker избегает звона колоколов и свиста из песочницы других JS / HTML / CSS, предпочитая достоинства тихой компетентности и визуальной простоты. Результатом этого является то, что вы сосредоточены на коде, над которым вы работаете, а не на других людях и на возможности лишний раз показать себя.

Тем не менее, если вы хотите продемонстрировать свои усилия, Tinker достаточно хорош, чтобы автоматически переводить версию вашей работы каждый раз, когда вы сохраните ее. Таким образом, есть много возможностей для ведения дискуссий с теми, кого вы пригласили в команду. Tinker работает на Node.j. Это открытый исходный код, который также доступен на GitHub. Если вы готовы предоставить собственную версию, используйте даже  быстрые клавиши.

10. Tinkerbin

Созданный для филиппинской конференции по веб-дизайну 2011 года, инструмент Tinkerbin разумно утверждает то, что сегодня должно быть в понятном формате — отдельные панели для HTML / Haml / JS / CoffeeScript / CSS / Sass / LESS и одна для подведения итогов. Каждое последующее сохранение выпускает новую версию / URL для вас, чтобы поделиться ею, и здесь также присутствует хороший режим просмотра кода.

Tinkerbin позволяет импортировать библиотеки из внешних источников — таких, как Google code — вместо внутреннего обмена параметрами. Хотя здесь не хватает документации. Например, открытая страница говорит, что список поддерживаемых языков включает в себя «больше», хотя этих расширений нигде нет… и чувствуешь себя немного обманутым.

11. SQL Fiddle

Кто может, положа руку на сердце, сказать, что эти три маленькие буквы не вызывают неприятное чувство замешательства? Одной из причин, по какой SQL может быть сложным, является длительная настройка, необходимая для тестирования даже в самых простых ситуациях. Ничего не могу сказать, кроме как: спасибо разработчику из Аляски, Джейку Физелу и инструменту SQL.

Вы можете настроить инструмент так, чтобы играть против любого количества баз данных из MS SQL Server на Oracle с помощью старого доброго MySQL. Вы можете создать схему запроса, заполнить таблицы минимальным набором данных и идти дальше. Как и с другими сайтами, если дела идут не так, как вам бы этого хотелось, вы всегда можете обратиться на StackOverflow с вашей проблемой.

12. ReFiddle

Ну, если JavaScript, SQL и большинство популярных скриптовых языков владеют собственными страничками с инструментами, почему бы не использовать регулярные выражения? (Печаль любого здравомыслящего кодера)

Хотя он и не сможет заглушить всю боль, ReFiddle проводит тестирование и устранение неполадок регулярных выражений в Ruby, JavaScript и. NET менее болезненным способом. И если у вас все еще не получаеться, он наполовину автоматизирует ваш печальный постинг на StackOverflow.

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

13. CSSDeck

CSSDeck включает социальную составляющую, открывая страницу просмотра текущих и наиболее популярных экспериментов. Они также хорошо варьируются от чистых обрисовок CSS испытаний до тестов по three.js анимации.

Есть несколько объявлений, которые немного раздражают, но по общему впечатлению сайт живой и интересный. Плюс, в наличии актуальная документация, поддержка горячих клавиш, и вы можете войти в систему с Twitter или GitHub. Библиотеки, препроцессоры, валидатор: все это здесь есть.

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

14. JS Bin

HTML / CSS / JS плюс консоль и подведение итогов. Настройте их так, как вам больше нравится, добавьте библиотек и препроцессоров, или просто начните играть. JS Bin действительно мощный в плане юзабилити. Здесь есть немного латентности в системе по сравнению с некоторыми другими песочницами, но UI представляет собой понятную модель.

Также есть возможность поделиться вашей разработкой на «codecast», это происходит путем обмена URL — идеальное решение для тех, кто пытается продемонстрировать, какие именно проблемы могут появиться или каким образом решения могут быть разработаны. Кроме того, благодаря консоли, JS Bin хорош для устранения неполадок, а также для  реализации желания «показать и рассказать».

15. Thimble

Mozilla, чемпион открытой сети, создала Thimble. Этот инструмент призван предоставить в распоряжение молодежи и другим пользователям ресурсы, которых им не хватало, а также доступ к основным средствам создания веб: HTML и CSS.

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

16. Eclipse Orion

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

На бумаге система выглядит великолепно — HTML / JS / CSS редактирование, Git интеграции, подсказки по коду и некоторые интересные плагины, к примеру, JSLint и JS Beautifier. И, конечно, присутствует история рабочего процесса. Однако, программа совершенно неудобная в использовании, и визуально непривлекательная. Возможно, когда проект созреет, он заявит о себе, будучи возможно даже массовой системой в какой-то полезной форме. Но на данный момент опыт пользования этой программой не очень приятен.

17. Liveweave

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

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

18. Площадка Google Code

Поиск изображений, перевод, Google Earth. Этот список можно продолжать еще очень долго. Взаимодействие с многочисленными и разнообразными интерфейсами Google API, является одним из способов быстро внедрить что-то значимое для веб-страниц, но с чего же начать? С Google Code Playground, вот с чего. И только так!

Он настолько прост, насколько вы бы могли это представить. Возьмите API и сделайте свой выбор из числа основных предложений, чтобы начать работу, например, поиск изображений с определенным ограничением цвета. И если вы застряли, запустите устранение неполадок нажатием одной кнопки, или читайте книги через «Просмотр документов». Возможности поделиться результатом своей работы с кем-либо, как ни странно для компании, которая в настоящее время находится в противостоянии с Facebook, не существует.

19. Pastebin.com

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

Вы можете входить с Twitter или Facebook, если хотите отслеживать свою активность. Войдите в качестве гостя, если вы предпочитаете остаться анонимным. И еще одна из интересных особенностей Pastebin — популярность в качестве общего рекламного щита для групп, заявляющих свою принадлежность к сообществу AnonOps.

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

20. Compilr

Compilr – это больше, чем просто сайт обмена простыми сниппетами, это многофункциональный интерфейс IDE с возможностью обработки исчерпывающего ряда языков, с доступом в консоль и автоматизированным обменом через Google+, Facebook и Twitter. Вы также можете просто отправить ссылку вашим сотрудникам.

Если вы планируете что-то более серьезное, чем небольшой эксперимент, и хотите иметь возможность поделиться кодами, работая в сети, из любого места и любого устройства, то вы должны рассмотреть Compilr более внимательно. Бесплатная версия предоставляет вам 1 Гб памяти, но ваши проекты будут доступны в паблике.

Инструменты на все случаи жизни

Следовательно, у вас есть эти инструменты. Хорошие, нормальные, один или два из них — немного скверные. После вступления в эту партию, у вас появиться ощущение, что происходит что-то новое. И не все то, что развивается в данном направлении, становится IDE. Каждый сайт по-своему определяет направление в том, как пользоваться продуктами, предложенными в Интернете.

Может быть, вам просто нужно где-то протестировать новый код. Попробуйте один из инструментов. Может быть, вы создали макет Эйфелевой башни в CSS и просто хотите прокричать это CodePen или CSSDeck. У вас есть крупный проект по развитию и разделенная команда, которую нужно собрать воедино? Cloud9 или Compilr — то, что вам нужно. Планирование глобальной хакерской кампании, которая сможет свергнуть империю зла? Для этого у нас есть pastebins …

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