JsBin или Codepen?

Я долгое время использовала для своих демо jsbin.com. Похоже, слишком активно использовала. В какой-то момент в процессе редактирования кода Jsbin вообще переставал открываться. Тогда я открывала другой браузер, но через какое-то время он переставал открываться и там. Постепенно в дело шли все доступные браузеры и режимы инкогнито.

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

Попробую их сравнить.

Jsbin

Плюсы:

• моментально применяет изменения, сделанные в коде;
• также моментально применяет их в любом браузере, где открыт этот сниппет (очень удобно для тестирования в разных браузерах, на разных виртуалках и мобильных устройствах);
• показывает ошибки в JS;
• умеет комментировать/раскрывать код под Ctrl + /;
• есть Less.

Минусы:

• сохраняет сниппеты в виде одной ленты, где они сгрупированы по родительскоу сниппету, внутри этой группы — по времени создания. Ручной группировки нет;
• если открыть сниппет и начать его редактировать, он сохранится под новым номером. Это приводит к неконтролируемому росту их количества: у меня уже больше 1000, и как в них искать нужное — непонятно. Кроме того, если где-то вставить сниппет на страницу — после редактирования надо будет обновить в коде фрейма номер сниппета;
• нет препроцессоров нет Sass;
• ломает кириллицу: в сниппетах внезапно можно обнаружить кракозябры вместо русского текста.

Jsbin работает как личная песочница, нет взаимодействия с другими пользователями, не нужно забоиться о том, что бардак рабочий процесс в твоей песочнице кто-то увидит : ) Отсутствие взаимодействия с другими пользователями сервиса помогает не отвлекаться от кода, это можно считать плюсом.

Codepen

Плюсы:

• есть CSS-препроцессоры (очень существенное преимущество);
• есть группировка сниппетов в коллекции, есть теги и поиск по сниппетам;
• есть группировка по другим признакам, например — по популярности, а также можно посмотреть сниппеты, которые вам понравились или которые вы скопировали к себе;
• можно открыть сниппет, отредактировать и сохранить — его адрес останется таким же, и не нужно обновлять коды фреймов с этим сниппетом. Можно открыть сниппет на другом компе (под своим аккаунтом), отредактировать и сохранить — это будет тот же сниппет, и его не нужно будет искать в истории;
• сниппету можно добавить название и описание.

Минусы:

• добавление в коллекцию неявное. На странице сниппета непонятно в какой коллекции он находится и добавлен ли вообще в какую-то подборку. При добавлении сниппета в коллекцию этого тоже не видно. Как-то очень криво сделано, надеюсь, исправят;
• изменения в коде применяются с небольшой задержкой и только в окне редактирования;
• живой предпросмотр в других браузерах — привилегия PRO-аккаунта ($9/month or $75/year);
• периодически перестает обновлять превью (что может быть понятно не сразу), тогда приходится сохранять сниппет и перегружать страницу;
• не показывает ошибки в JS;
• комментирование кода по Ctrl + / работает только для выделенного блока. Нельзя быстро закомментировать строчку. Чтобы раскомментировать блок, нужно выделить его ещё раз, и не факт, что он раскомментируется — может ещё раз завернуться в комментарии, что очень неудобно;
• не запоминает раскладку страницы.

Оба редактора умеют разворачивать Emmet-комбинации и сокращения CSS-свойств.

Codepen работает как социальная сеть: можно смотреть работы других пользователей, лайкать их, форкать, оставлять комментарии. Для меня первые комментарии к моим работам и лайки были полной неожиданностью : )) Можно смотреть на работы других пользователей, вдохновляться и находить новые идеи. Работы на главную страницу ресурса выбираются вручную, поэтому там много интересного. Также можно посмотреть самые последние и самые популярные сниппеты.

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

В итоге мои предпочтения разделились следующим образом: для быстрых экспериментов и отладки кода в разных окружениях — Jsbin, для основательных экспериментов, для демо и сохранения находок в удобном и доступном виде — Codepen.