7 лучших площадок для клиентской разработки front-end

7 лучших площадок для клиентской разработки front-end

От автора: в последние годы появилось много площадок, с помощью которых осуществляется 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.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Full-Stack практика. Создание JavaScript блога

Создание веб-приложения с нуля на JavaScript, NodeJS, ExpressJS

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree