За прошедшие годы появилось множество игровых площадок для внешнего кода. Большинство из них предлагают быстрый и грязный способ поэкспериментировать с кодом на стороне клиента (а иногда и на стороне сервера), а затем поделиться им с другими. Наиболее популярным является CodePen, который вы, скорее всего, видели или даже использовали. Это отличный инструмент, но он не предлагает всего, что может понадобиться вашему перу. Вот наш взгляд на семь лучших, сравнивая CodePen и ряд альтернатив CodePen.
редакторы HTML, CSS и JavaScript с цветовой кодировкой
автозаполнение команды code
окно предварительного просмотра, которое (обычно) перезагружается без ручного обновления
Препроцессоры HTML, такие как HAML
Less, Sass, Stylus и подобные препроцессоры CSS
включение популярных библиотек JavaScript, таких как React, Preact, Angular и Vue.js (некоторые новые игровые площадки также позволяют разрабатывать внутренний код)
консоли разработчика и инструменты проверки кода
средства совместной работы по кодированию
обмен через короткий URL
встраивание демонстраций на другие страницы
клонирование и разветвление кода
копирование в репозитории кода, такие как GitHub
нулевая стоимость базовой услуги
дополнительные премиальные услуги за небольшую ежемесячную плату
способ показать миру свои навыки программирования!
Они позволяют вам тестировать и сохранять экспериментальные фрагменты кода без необходимости создавать файлы, запускать редактор или запускать локальный сервер.
Давайте посмотрим на некоторые из лучших вариантов.
1. КодПен
КодПен
CodePen не был первым, но это одна из самых популярных и красивых игровых площадок для кода. Сервис, соучредитель которого Крис Койер из
CodePen PRO предоставляет частные ручки, хостинг активов, режим совместной работы и темы для встроенных фреймов, начиная с 8 долларов в месяц.
2. JSFiddle
JSFiddle
JSFiddle была одной из первых игровых площадок кода и повлияла на последующие. Его можно использовать для любой комбинации тестирования HTML, CSS и JavaScript, и он предлагает ряд библиотек и фреймворков. Необычно то, что он также может имитировать асинхронные запросы Ajax.
JSFiddle концентрируется на коде, поэтому вы не найдете ряд социальных функций, таких как выделенные демонстрации и возможности обмена. Интерфейс проще, чем другие, и, что необычно, вы должны нажать «Выполнить», чтобы перезагрузить панель результатов. Тем не менее, он всегда кажется быстрым, и его простота может быть предпочтительнее для некоторых.
3.
JS Bin был создан гуру JavaScript Реми Шарпом и до сих пор им управляется. Он концентрируется на основах кодирования и хорошо с ними справляется. В отличие от некоторых других игровых площадок, вы можете редактировать весь файл HTML, включая расширение
.
Помимо обычных опций, библиотек и препроцессоров, JS Bin был одним из первых, кто предложил консоль ведения журнала, которая необходима для разработки JavaScript. Коммерческая учетная запись Pro предоставляет расширенные функции, такие как загрузка активов, личные корзины, персональные
4.
Несмотря на название, CSS Deck — это полноценная площадка для HTML, CSS и JavaScript с функциями социальных сетей и совместной работы. Он существует уже давно и оказал большое влияние на другие игровые площадки. В CSS Deck не так много функций, как в CodePen, но он работает немного быстрее и имеет более настраиваемый экран макета кода. Существует активное сообщество, которое регулярно представляет примеры демонстрации кода.
5. Песочница для кода
КодПесочница
Большинство игровых площадок кода предлагают один файл HTML, один файл CSS и один файл JavaScript (хотя importsвозможны и другие). CodeSandbox — это не столько игровая площадка, сколько
Как и в стандартных
CodeSandbox может быть практичным вариантом, если вы работаете удаленно или используете нестандартное устройство для разработки, такое как Chromebook.
6. ИГРОВОЙ КОД
КОД ИГРЫ
PLAYCODE — это еще одна
PLAYCODE имеет консоль журнала и, что необычно, позволяет вам контролировать размер и частоту обновления окна предварительного просмотра. Редактор бесплатный, но для сохранения проектов необходимо войти в систему с помощью Google, Microsoft, GitHub или электронной почты.
7. Плункер
Плункер
Plunker — еще один проектный редактор, который позволяет добавлять несколько файлов HTML, CSS и JavaScript. Вы можете включить шаблоны, созданные сообществом, чтобы дать толчок вашему проекту. Как и другие, Plunker позволяет создавать рабочие демоверсии, сотрудничать с другими разработчиками и делиться своей работой. Возможно, он не такой привлекательный, как некоторые, но пользовательский интерфейс остается быстрым и функциональным.
Существует активное сообщество участников. Похоже, что большинство из них представляют демонстрации Angular, но он также поддерживает стартовые шаблоны vanilla JS, React и Preact.
Другие варианты
Конечно, есть много других игровых площадок для кода, включая Glitch, ESNextBin, JSitor, Liveweave, Dabblet и другие. StackBlitz — это новая игровая площадка, которая поддерживает интерфейсную разработку, но также позволяет вам экспериментировать с внутренним кодом, используя Node.js, Next.js и GraphQL.
Совет: чтобы попробовать StackBlitz, просто введите «node.new» (без кавычек) в адресную строку браузера.
Мы пропустили ваш любимый? Расскажите нам об этом!
Чтобы узнать больше о возможностях совместного использования внутреннего кода, обратитесь к обзору Джеймса Хиббарда, посвященному игровым площадкам для внутреннего кода в Интернете.
Если вы предпочитаете размещать собственную
Если вы хотите