7 лучших платформ для редактирования и хранения кода на HTML, CSS и JavaScript

На протяжении многих лет появилось множество платформ с интерфейсом. Большинство предлагают быстрый и грязный способ взаимодействовать с клиентским кодом и делиться с другими.
Типичные особенности:

• Цветные HTML, CSS и JavaScript-редакторы
• Окно предварительного просмотра — много обновлений на лету без обновления
• Предварительные процессоры HTML, такие как HAML
• МЕНЬШЕ, SASS и предварительная обработка CSS Stylus
• Включение популярных библиотек JavaScript
• Консоли разработчика и инструменты проверки кода
• Обмен через короткий URL-адрес
• Внедрение демонстраций на другие страницы
• Форматирование кода
• Нулевая стоимость (или оплата только премиальных услуг)
• Показ своих навыков кодирования миру!

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

JSFiddle

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

CodePen

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

CSS Deck

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

JS Bin

JS Bin был запущен гуру JS Remy Sharp. Он концентрируется на основах и отлично справляется с ними. Он также предлагает удобную консоль 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 предлагает линейку, которая поможет вам создавать гибкие проекты и функцию «Team Up», которая имеет те же функции, что и совместное редактирование JSFiddle.