Что такое песочница для разработчика и для чего она нужна? Предположим, что вы как и я занимаетесь разработкой сайтов и вам требуется быстро проверить можно ли реализовать элемент, который придумал веб-дизайнер и показать ему эту реализацию. Можно конечно сверстать этот элемент и выложить у себя на хостинге, но при этом вам придётся занять как минимум место на нём, тем более что тарификация хостингов часто отсчитывает количество размещённых сайтов. В общем это не совсем удобное решение.
Ещё есть GitHub и ему подобные сервисы. Но для этого вы должны владеть git, да и он изначально нужен для других целей и больше подойдёт для проекта, чем для куска кода.
На помощь нам приходят песочницы, это онлайн-редакторы кода. Их преимущество в том, что вы можете сверстать элемент, блок или целую страницу, да и полноценный проект и сразу же увидеть результат работы. Помимо этого вы легко можете поделиться результатом с другими разработчиками или показать его дизайнеру.
В песочницах можно хранить базу знаний состоящую из паттернов для разработки. И если вы не хотите делится ими, можно сделать закрытый доступ.
Код из песочницы можно добавлять на Stack Overflow, Хабр и т.п.
Пожалуй самым популярным в списке онлайн-редакторов кода является CodePen. В нём много разных настроек, можно выбрать препроцессор Less, Sass или PostCss, для JavaScript подключить библиотеки jQuery, React.js и другие фреймворки. CodePen также разрешает использовать пакеты JavaScript из npm.
Я не так часто им пользовалась для написания кода, но периодически ищу там решения под свои задачи в ленте с работами других разработчиков. Недавно мне нужно было показать как будет работать элемент дизайнеру и я обнаружила странность в воспроизведении кода, внутренние отступы контейнера (padding) воспринимался сервисом как внешний (margin). В итоге я просто отказалась от использования Codepen для своих задач и нашла для себя Stackblitz
Это песочница на базе Visual Studio. Здесь можно также использовать различные библиотеки и фреймворки, устанавливать сразу несколько npm-пакетов. Если скопировать кусок кода и вставить в редактор, песочница сама найдёт пропущенные пакеты. Работает офлайн. Загрузка файлов возможна простым перетаскиванием.
Существует ещё несколько онлайн-редакторов:
Например довольно популярный jsfiddle, но он у меня очень долго грузится, поэтому останавливаться на нём не буду.
Песочница CodeSandbox подходит и для разного масштаба проектов. Есть интеграция с GitHub, поддержка библиотек и фреймворков. Есть раздел с опубликованными проектами. Можно посмотреть наработки других разработчиков.
В заключение, скажу, что песочница отличный инструмент для обмена опытом и демонстрации своих навыков.
Пишите в комментариях какие инструменты используете вы в своей работе, если как и я занимаетесь разработкой сайтов.
Если материал был полезен вам дайте знать лайком и подпиской!