Разнообразные игровые площадки с кодовым интерфейсом появились за эти годы. Большинство предлагают быстрый и грязный способ экспериментировать с клиентским кодом и делиться им с другими. В этой статье мы кратко рассмотрим семь лучших.
Типичные особенности этих онлайн игровых площадок включают в себя:
- Редакторы HTML, CSS и JavaScript с цветовой кодировкой
- окно предварительного просмотра — многие обновляются на лету без обновления
- Препроцессоры HTML, такие как HAML
- Предварительная обработка LESS, SASS и Stylus CSS
- включение популярных библиотек JavaScript
- консоли разработчика и инструменты проверки кода
- обмен через короткий URL
- встраивание демонстраций в другие страницы
- разветвление кода
- нулевая стоимость (или оплата только за премиальные услуги)
- демонстрируя свои навыки кодирования миру!
Лучшая функция: они позволяют вам тестировать и поддерживать экспериментальные фрагменты кода переднего плана без необходимости создавать файлы, запускать IDE или настраивать локальный сервер.
JSFiddle
JSFiddle была одной из первых игровых площадок с кодом и основным влиянием для всех последующих. Несмотря на название, его можно использовать для любого сочетания тестирования HTML, CSS и JavaScript. Сегодня он выглядит немного базовым, но все же предлагает расширенные функциональные возможности, такие как моделирование Ajax.
CodePen
Приз за лучшую на вид многофункциональную игровую площадку получает CodePen . Служба, соучредителем которой является Крис Койер, выделяет популярные демонстрации («Ручки») и проекты , которые представляют собой интерактивную интегрированную среду разработки, которую вы можете использовать для создания и развертывания веб-проектов. Эта функция была добавлена в марте 2017 года. как совместное использование и встраивание Pens, добавление внешних библиотек JS и CSS, популярных препроцессоров и многое другое. Сервис PRO предлагает кросс-браузерное тестирование, парное программирование и обучение, начиная всего с 9 долларов в месяц.
CSS-колода
Это может называться CSS Deck , но это полноценная площадка для HTML, CSS и JavaScript с функциями социальных сетей и совместной работы. Это похоже на CodePen (я не знаю, кто на кого повлиял!), Но вы можете предпочесть его.
JS Bin
JS Bin был основан г-ном JS Реми Шарпом . Он концентрируется на основах и отлично с ними справляется. Он также предлагает удобную консоль JavaScript. Рекомендуемые.
Dabblet
Еще одна ранняя площадка, Dabblet, начала свою жизнь как демонстрационная система HTML5 / CSS3 от Lea Verou с возможностями JavaScript. Он выглядит великолепно и автоматически префиксирует все ваши CSS, если это необходимо.
Plunker
Plunker позволяет добавлять несколько файлов, включая шаблоны, созданные сообществом, для запуска вашего проекта. Как и в CodePen, с помощью Plunker вы можете создавать рабочие демоверсии, также в сотрудничестве с другими разработчиками, и делиться своей работой. Исходный код Plunker бесплатен и находится в репозитории GitHub .
Liveweave
Liveweave — это еще один онлайн-редактор HTML5, CSS3 и JavaScript с возможностью предварительного просмотра в реальном времени. Он предлагает подсказки по коду для HTML5, CSS3, JavaScript и jQuery и позволяет загружать ваш проект в виде zip-файла.
Вы также можете легко добавить внешние библиотеки, такие как jQuery, AndgularJS, Bootstrap и т. Д., В свое рабочее пространство. Кроме того, Liveweave предлагает линейку, которая поможет вам создавать адаптивные проекты, и функцию «Объединить в команду», которая имеет те же функции, что и совместное редактирование JSFiddle.
Другие опции
Конечно, есть и другие варианты. Мы скучали по твоей любимой? Расскажите нам об этом!
Мы не говорили здесь об онлайновых игровых площадках с кодом, которые позволят вам также делиться внутренним кодом, например CodeSandbox . Для получения дополнительной информации обращайтесь к обзору Джеймса Хиббарда, посвященному онлайн-игровым площадкам с внутренним кодом, для получения дополнительной информации.
Если вы предпочитаете размещать свою собственную среду онлайн-разработки, посмотрите ICEcoder (у нас есть статья об этом здесь ).
И если вы не хотите быть в сети, когда возитесь с кодом, но хотите что-то подобное, посмотрите что-то вроде Web Maker (у нас есть статья об этом здесь ).
Удачного кодирования!