Статьи

7 лучших игровых площадок с кодом

Разнообразные игровые площадки с кодовым интерфейсом появились за эти годы. Большинство предлагают быстрый и грязный способ экспериментировать с клиентским кодом и делиться им с другими. В этой статье мы кратко рассмотрим семь лучших.

Типичные особенности этих онлайн игровых площадок включают в себя:

  • Редакторы HTML, CSS и JavaScript с цветовой кодировкой
  • окно предварительного просмотра — многие обновляются на лету без обновления
  • Препроцессоры HTML, такие как HAML
  • Предварительная обработка LESS, SASS и Stylus CSS
  • включение популярных библиотек JavaScript
  • консоли разработчика и инструменты проверки кода
  • обмен через короткий URL
  • встраивание демонстраций в другие страницы
  • разветвление кода
  • нулевая стоимость (или оплата только за премиальные услуги)
  • демонстрируя свои навыки кодирования миру!

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

JSFiddle

JSFiddle JSFiddle была одной из первых игровых площадок с кодом и основным влиянием для всех последующих. Несмотря на название, его можно использовать для любого сочетания тестирования HTML, CSS и JavaScript. Сегодня он выглядит немного базовым, но все же предлагает расширенные функциональные возможности, такие как моделирование Ajax.

CodePen

CodePen Приз за лучшую на вид многофункциональную игровую площадку получает CodePen . Служба, соучредителем которой является Крис Койер, выделяет популярные демонстрации («Ручки») и проекты , которые представляют собой интерактивную интегрированную среду разработки, которую вы можете использовать для создания и развертывания веб-проектов. Эта функция была добавлена ​​в марте 2017 года. как совместное использование и встраивание Pens, добавление внешних библиотек JS и CSS, популярных препроцессоров и многое другое. Сервис PRO предлагает кросс-браузерное тестирование, парное программирование и обучение, начиная всего с 9 долларов в месяц.

CSS-колода

CSS-колода Это может называться CSS Deck , но это полноценная площадка для HTML, CSS и JavaScript с функциями социальных сетей и совместной работы. Это похоже на CodePen (я не знаю, кто на кого повлиял!), Но вы можете предпочесть его.

JS Bin

JS Bin JS Bin был основан г-ном JS Реми Шарпом . Он концентрируется на основах и отлично с ними справляется. Он также предлагает удобную консоль JavaScript. Рекомендуемые.

Dabblet

Dabblet Еще одна ранняя площадка, Dabblet, начала свою жизнь как демонстрационная система HTML5 / CSS3 от Lea Verou с возможностями JavaScript. Он выглядит великолепно и автоматически префиксирует все ваши CSS, если это необходимо.

Plunker

Фронт-Код игровые площадки: Plunker Plunker позволяет добавлять несколько файлов, включая шаблоны, созданные сообществом, для запуска вашего проекта. Как и в CodePen, с помощью Plunker вы можете создавать рабочие демоверсии, также в сотрудничестве с другими разработчиками, и делиться своей работой. Исходный код Plunker бесплатен и находится в репозитории GitHub .

Liveweave

Liveweave Code Playground Liveweave — это еще один онлайн-редактор HTML5, CSS3 и JavaScript с возможностью предварительного просмотра в реальном времени. Он предлагает подсказки по коду для HTML5, CSS3, JavaScript и jQuery и позволяет загружать ваш проект в виде zip-файла.

Вы также можете легко добавить внешние библиотеки, такие как jQuery, AndgularJS, Bootstrap и т. Д., В свое рабочее пространство. Кроме того, Liveweave предлагает линейку, которая поможет вам создавать адаптивные проекты, и функцию «Объединить в команду», которая имеет те же функции, что и совместное редактирование JSFiddle.

Другие опции

Конечно, есть и другие варианты. Мы скучали по твоей любимой? Расскажите нам об этом!

Мы не говорили здесь об онлайновых игровых площадках с кодом, которые позволят вам также делиться внутренним кодом, например CodeSandbox . Для получения дополнительной информации обращайтесь к обзору Джеймса Хиббарда, посвященному онлайн-игровым площадкам с внутренним кодом, для получения дополнительной информации.

Если вы предпочитаете размещать свою собственную среду онлайн-разработки, посмотрите ICEcoder (у нас есть статья об этом здесь ).

И если вы не хотите быть в сети, когда возитесь с кодом, но хотите что-то подобное, посмотрите что-то вроде Web Maker (у нас есть статья об этом здесь ).

Удачного кодирования!