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