7 лучших площадок для работы с кодом
За прошедшие годы появилось множество кодовых площадок. Большинство из них предлагают быстрый и практичный способ экспериментировать с кодом на стороне клиента (а иногда и на стороне сервера), а затем делиться им с другими. Самым популярным является CodePen, который вы, скорее всего, видели или даже использовали. Это отличный инструмент, но он не предлагает всего, что может понадобиться вашей программе. Здесь мы рассмотрим семь лучших из них, сравнивая CodePen и ряд альтернатив CodePen.
Онлайн-площадки для программирования обычно включают в себя:
- редакторы HTML, CSS и JavaScript с цветовой разметкой.
- автозаполнение команд кода
- окно предварительного просмотра, которое (обычно) перезагружается в реальном времени без ручного обновления
- препроцессоры HTML, такие как HAML, Pug
- Less, Sass, Stylus и аналогичные препроцессоры CSS
- Включение популярных библиотек JavaScript - React, Preact, Angular и Vue.js
- консоль разработчика и инструменты проверки кода
- средства совместной работы над кодом
- совместное использование по короткому URL-адресу
- встраивание демонстраций в другие страницы
- клонирование и возможность форка кода
- копирование в репозитории кода, такие как GitHub
- нулевая стоимость базового сервиса
- дальнейшие премиум-услуги за небольшую ежемесячную плату
- возможность продемонстрировать свои навыки кодирования всему миру!
Они позволяют тестировать и хранить экспериментальные фрагменты кода без необходимости создавать файлы, запускать редактор или запускать локальный сервер.
Давайте рассмотрим некоторые из лучших вариантов.
1. CodePen
CodePen не был первым, но это одна из самых популярных и наиболее привлекательных площадок для кода. Основанный Крисом Койером из CSS-Tricks, сервис выделяет популярные Pens (демонстрации на стороне клиента) и Projects (онлайн интегрированные среды разработки, которые можно использовать для создания веб-проектов). Он предлагает чистый и функциональный пользовательский интерфейс редактирования с расширенными функциональными возможностями, такими как обмен, встраивание, консоль ошибок, внешние библиотеки JavaScript, популярные препроцессоры CSS и многое другое.
CodePen PRO предоставляет приватные Pens, хостинг файлов, режим совместной работы и темы для встроенных iframe по цене от $8 в месяц.
2. JSFiddle
JSFiddle был одной из самых первых площадок для тестирования кода и оказал влияние на последующие. Он может использоваться для любого сочетания тестирования HTML, CSS и JavaScript и предлагает ряд библиотек и фреймворков. Необычно, что он также может имитировать асинхронные запросы Ajax.
JSFiddle сосредоточен на коде, поэтому в нем вы не найдете ряд функций, таких как демонстрации с подсветкой и функции совместного использования. Интерфейс проще, чем у других, и, что необычно, для перезагрузки панели результатов необходимо нажать кнопку Run. Однако он всегда работает быстро, и его простота может оказаться предпочтительной для некоторых.
3. JS Bin
JS Bin был создан гуру JavaScript Реми Шарпом и до сих пор им управляется. Он сосредоточен на базовых вещах и хорошо с ними справляется. В отличие от некоторых других платформ, вы можете редактировать весь HTML-файл, включая <head>.
Помимо обычных опций, библиотек и препроцессоров, JS Bin был одним из первых, кто предложил консоль протоколирования, что очень важно для разработки JavaScript. Коммерческий аккаунт Pro предоставляет расширенные возможности, такие как загрузка файлов, приватные корзины, уникальные URL и синхронизация с Dropbox. Вы даже можете загрузить и установить JS Bin локально, если вы беспокоитесь о конфиденциальности или не хотите, чтобы другие видели содержимое вашего кода!
4. CSS Deck
Несмотря на название, CSS Deck - это полноценная кодовая площадка для HTML, CSS и JavaScript с функциональными возможностями для общения и совместной работы. Он существует уже давно и оказал большое влияние на другие площадки. В CSS Deck не так много функций, как в CodePen, но он немного быстрее и имеет более настраиваемый экран макета кодирования. Существует активное сообщество, которое регулярно присылает примеры демонстрации кода.
5. CodeSandbox
Большинство игровых площадок предлагают один HTML-файл, один CSS-файл и один JavaScript-файл (хотя возможен и дополнительный импорт). CodeSandbox - это не столько платформа, сколько онлайновая среда разработки.
Как и в стандартных веб-проектах, вы можете добавлять любое количество файлов и редактировать их с помощью интегрированной среды разработки (IDE), похожей на VS Code, с несколькими вкладками. Регистрация бесплатна, если вы используете учетную запись GitHub или Google, но затем вы можете разрабатывать проект вместе с другими людьми в режиме реального времени, экспортировать проекты в репозиторий Git и развертывать их на статических хостах сайтов, таких как Netlify и Vercel.
CodeSandbox может стать практичным вариантом, если вы работаете удаленно или используете нетипичное устройство для разработки, например, Chromebook.
6. PLAYCODE
PLAYCODE - еще одна онлайн-среда разработки, позволяющая добавлять множество HTML, CSS, JavaScript и файлов активов. Интерфейс проще, чем у CodeSandbox, но он быстрый, отлично выглядит, прост в использовании и, возможно, менее пугающий для новичков.
PLAYCODE имеет консоль и, что необычно, позволяет контролировать размер и частоту обновления окна предварительного просмотра. Редактор бесплатный, но для сохранения проектов необходимо войти в систему с помощью Google, Microsoft, GitHub или учетной записи электронной почты.
7. Plunker
Plunker - еще один редактор на основе проекта, позволяющий добавлять множество файлов HTML, CSS и JavaScript. Вы можете включить шаблоны, созданные сообществом, чтобы запустить свой проект. Как и другие, Plunker позволяет создавать рабочие демонстрации, совместно работать с другими разработчиками и делиться своей работой. Возможно, он не так привлекателен, как некоторые другие, но пользовательский интерфейс остается быстрым и функциональным.
Существует активное сообщество разработчиков. Большинство из них создают демонстрации Angular, но также поддерживаются стартовые шаблоны vanilla JS, React и Preact.
Другие варианты
Конечно, существует множество других площадок, включая Glitch, ESNextBin, JSitor, Liveweave, Dabblet и другие. А один из более новых редакторов является StackBlitz, который поддерживает разработку front-end, но также позволяет экспериментировать с back-end кодом, используя Node.js, Next.js и GraphQL.
Подсказка: чтобы опробовать StackBlitz, просто введите "node.new" (без кавычек) в адресную строку браузера.
