Лучшие онлайн-песочницы для разработчиков

Песочницы — это онлайн-редакторы кода. Специально выделенная (изолированная) среда для безопасного исполнения компьютерных программ. Здесь вы можете сверстать страницу, решить задачу или написать программу, и результат вашей работы сразу отобразится. Часто песочницы используют для проверки незнакомого кода из непроверенных источников.

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

В чем удобство песочниц:

1. Работа происходит прямо в браузере, не нужно ничего дополнительно устанавливать
2. Они простые и заточенные под то, что от них требуется
3. Экран разделен на 2 части: редактор кода и трансляция исполнения кода
4. Объединяет технологии (языки, их библиотеки, препроцессоры)
5. Сервисы позволяют сохранить код у себя на компьютере или прямо на сервисе для демонстрации, дальнейшей корректировки или просто для хранения
6. Есть возможность нескольким разработчикам работать над одним проектом.

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

CodePen

Его основной интерфейс — три окна рабочей области (редакторы для HTML, CSS и Javascript) и четвертое окно для предпросмотра (здесь результат выполнения кода). Удобно, что вы можете выбрать препроцессор Less, Sass или PostCss для CSS. Подключить библиотеки jQuery, Lodash и React.js, использовать фреймворки Angular и Vue.js и другие для JavaScript.

Кроме этого в CodePen есть раздел «Тренды», где можно рассматривать интересные работы, черпать вдохновение, сохранять себе в шаблоны понравившееся.

Plunker

Если вы учились на Learn JS, то вы уже знакомы с этой песочницей. Чтобы приступить к работе, сначала нужно выбрать библиотеку/фреймворк Angular, React.js, AngularJS или Preact, либо остаться на VanillaJS. После этого откроется редактор кода, в котором можно подключать библиотеки и устанавливать пакеты npm. Препроцессоры стилей тоже можно настроить

JavaScript Sandbox

Данный сервис ориентирован только на работу с этим языком.

Лично я использую js bin.

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