Здравствуйте, представляю вам подборку песочниц (онлайн-редакторов кода), в которых можно использовать, чтобы быстро написать и оценить код, показать приложение другим людям, потренироваться. Песочницу часто используют преподаватели программирования и вёрстки для демонстрации учебного кода. CodePen применяют авторы статей о разработке, когда нужно показать читателям пример кода.
Скачать исходники для статьи можно ниже
Игровые площадки для онлайн-кодирования обычно включают:
– редакторы HTML, CSS и JavaScript с цветовой кодировкой
– автоматическое выполнение кодовой команды
– окно предварительного просмотра, которое (обычно) загружается в реальном времени без обновления вручную
– HTML-препроцессоры, такие как HAML
– Less, Sass, Стилус и аналогичные препроцессоры CSS
– включение популярных библиотек JavaScript, таких как React, Preact, Angular и Vue.js (некоторые новые игровые площадки также позволяют разрабатывать внутренний код)
– консоли разработчиков и инструменты проверки кода
– средства для совместной работы в области кодирования
– общий доступ по короткому URL-адресу
– встраивание демонстраций на другие страницы
– клонирование и разветвление кода
– копирование в репозитории кода, такие как GitHub
– нулевая стоимость базовой услуги
– дополнительные услуги премиум-класса за небольшую ежемесячную плату
– способ продемонстрировать свои навыки кодирования всему миру!
Самая популярная песочница – это CodePen:
Соучредитель CodePen – Крис Койер из CSS-Tricks. CodePen предлагает чистый и функциональный пользовательский интерфейс редактирования с расширенными функциями, такими как общий доступ, встраивание, консоль ошибок, внешние библиотеки JavaScript, популярные препроцессоры CSS и многое другое.
1. JSFiddle
https://jsfiddle.net/
JSFiddle был одной из самых ранних песочниц для кода и повлиял на последующие. Он может быть использован для тестирования любой комбинации HTML, CSS и JavaScript и предлагает широкий спектр библиотек и фреймворков. Необычно, что он также может имитировать асинхронные Ajax-запросы.
JSFiddle концентрируется на коде, поэтому вы не найдете целый ряд социальных функций, таких как выделенные демонстрации и возможности обмена. Интерфейс проще, чем у других. Тем не менее, он всегда кажется быстрым, и его простота может быть предпочтительнее для некоторых.
2. JS Bin
“https://jsbin.com/”
JS Bin был создан гуру JavaScript Реми Шарпом и до сих пор управляется им. Он концентрируется на основах кодирования и хорошо с ними справляется. В отличие от некоторых других песочниц, вы можете редактировать весь HTML-файл, включая тег “head”.
Помимо обычных опций, библиотек и препроцессоров, JS Bin был одним из первых, кто предложил консоль ведения журнала, которая необходима для разработки JavaScript. Учетная запись commercial Pro предоставляет дополнительные функции, такие как загрузка активов, личные ячейки и синхронизация Dropbox. Вы даже можете загрузить и установить JS Bin локально, если вас беспокоит конфиденциальность или вы не хотите, чтобы другие видели ваш код!
3. CSS Deck
https://cssdeck.com/
Несмотря на название, CSS Deck – это полноценная песочница HTML, CSS и JavaScript с функциями социального взаимодействия и совместной работы. Он существует уже давно и оказал большое влияние на другие игровые площадки. В CSS Deck не так много функций, как в CodePen, но она работает немного быстрее и имеет более настраиваемый экран компоновки кода. Есть активное сообщество, которое регулярно представляет примеры демонстраций кода.
4. CodeSandbox
https://codesandbox.io/
Большинство песочниц для кода предлагают один HTML-файл, один CSS-файл и один файл JavaScript. CodeSandbox – это не столько песочница, а скорее онлайн-среда разработки.
Как и стандартные веб-проекты, вы можете добавлять любое количество файлов и редактировать их с помощью многозадачной интегрированной среды разработки, похожей на код (она же IDE). Регистрация с помощью учетной записи GitHub или Google бесплатна, но затем вы можете сотрудничать с другими пользователями в режиме реального времени, экспортировать проекты в репозиторий Git и развертывать на статических узлах сайтов, таких как Netlify и Vercel.
CodeSandbox может быть практичным вариантом, если вы работаете удаленно или используете нетипичное устройство разработки, такое как хромбук.
5. PLAYCODE
https://playcode.io/
PLAYCODE – это еще одна сетевая среда разработки, которая позволяет добавлять несколько файлов HTML, CSS, JavaScript и активов. Интерфейс проще, чем CodeSandbox, но он быстрый, отлично смотрится, прост в использовании и, возможно, менее сложен для начинающих.
PLAYCODE оснащен консолью журнала и, что необычно, позволяет управлять размером и частотой обновления окна предварительного просмотра. Редактор бесплатный, но для сохранения проектов необходимо войти в систему с помощью Google, Microsoft, GitHub или учетной записи электронной почты.
6. Plunker
https://plnkr.co/
Plunker-это еще один редактор на основе проекта, который позволяет добавлять несколько файлов HTML, CSS и JavaScript. Вы можете включить созданные сообществом шаблоны для запуска вашего проекта. Как и другие, Plunker позволяет вам создавать рабочие демо-версии, сотрудничать с другими разработчиками и делиться своей работой. Пользовательский интерфейс остается быстрым и функциональным.
Существует активное сообщество участников. Большинство из них, похоже, представляют демонстрации Angular, но они также поддерживают шаблоны Vanilla JS, React и Preact starter.
Другие песочницы:
Конечно, существует множество других песочниц для кода, включая Glitch, ESNextBin, JSitor, Liveweave, Dabblet и многое другое. StackBlitz-это новая игровая площадка, которая поддерживает интерфейсную разработку, но также позволяет экспериментировать с внутренним кодом, используя Node.js, Next.js, и GraphQL.
PS: Красивых и прибыльных Вам сайтов!