Наверх

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

Опубликовано:
900
1 2 3 4 5
(90%) / 2

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

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

 

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

 

JSFiddle

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

JSFiddle

CodePen

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

CodePen

CSS Deck

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

CSS Deck

JS Bin

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

JS Bin

Dabblet

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

Dabblet

Plunker

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

Fron-end Code Playgrounds: Plunker

Liveweave

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

Liveweave Code Playground

 

Дорогой web-мастер.
Для меня очень важна обратная связь от Вас в виде лайков или рейтинга.
Пожалуйста оцените эту публикацию или поставь лайк за старание.
Статья подготовлена для Вас сайтом kisameev.ru
Перевел: Кисамеев Дмитрий
Статью просмотрели: 900
Понравилось:
Поделится ссылкой
Комментариев...
Оставьте его первым.

Для вставки кода используйте комментарии от ВК или FB:

5 последних публикаций из раздела "HTML&CSS"

Когда я начал изучать эту тему, мне не нужна была трехмерная карусель, но я больше интересовался техническими деталями ее реализации....
В настоящее время существует множество Фреймворков. Мы рассмотрим лишь несколько: Bootstrap, Foundation by ZURB, Semantic UI, Pure by Yahoo!, UIkit...
Все любят шаблоны и активно их используют для получения быстрых результатов. Это касается многих сфер жизни. В том числе и...
Этот эффект отличается от обычного заполнения фона цветом тем, что сама анимация начинается с положения курсора относительно родительского элемента.
Существует много различных библиотек, которые помогают нам, разработчикам реализовывать потрясающие эффекты анимации на странице прокрутки. Сегодня мы поковыряемся в настройках AOS,...

Нашли баг или ошибку?

Выдели текст
мышкой и нажми:
Нашел ошибку