Если вы вообще увлекаетесь веб-программированием, вы, вероятно, в свое время использовали хотя бы одну площадку для написания кода. Это не ваши обычные редакторы кода , а места, где вы можете протестировать свой код, не беспокоясь о настройке внутреннего сервера. Codepen и JSFiddle – два самых популярных варианта, но, что, возможно, неудивительно (учитывая, что целевая аудитория игровых площадок для веб-кода — это люди, обладающие навыками самостоятельного создания площадок для кода), существует многоальтернатив.
Если вы просто хотите создать быстрое приложение HTML/CSS/JavaScript и поиграть с ним, то выбор игровой площадки будет зависеть от ваших личных предпочтений. Однако если вам нужны дополнительные функции, такие как совместное программирование в реальном времени, быстрый доступ к платформам JS, таким как React или Vue, внутренняя поддержка или даже просто активное творческое сообщество, возможно, вам стоит немного поискать варианты.
КодПен
Наверное, самой популярной площадкой для разработки внешнего кода является CodePen, и на это есть веская причина: он интуитивно понятен и прост в использовании, имеет большое и активное сообщество и стал общепринятым стандартом для встраивание функционирующего веб-кода в страницы. Быстрое автоматическое обновление и гибкие окна просмотра делают его довольно популярным для таких проектов, как CSS-анимация. Он имеет препроцессоры CSS/JS и может легко подключаться к внешним скриптам (React, Vue и всем остальным, доступным через CDNjs) и даже к другим ручкам.
В целом CodePen заслуживает
Contents
КодПен
места, особенно для интерфейсных проектов и портфолио. Однако он не предназначен для серверной части, и некоторые из его функций, такие как совместное кодирование, несколько проектов (в отличие от отдельных перьев) и полностраничный просмотр в реальном времени (частичный просмотр страниц в реальном времени бесплатен), требуют платного профессионального уровня. подписка.JSFiddle
На второй скрипке (хотя хронологически она одна из старейших) в мире фронтенд-кода находится JSFiddle . Как следует из названия, он ориентирован на JavaScript, поэтому предлагает больше готовых функций JS и меньше возможностей HTML/CSS. (Буквально по умолчанию он поддерживает Sass, но не Less.) Однако это не такая уж большая проблема, поскольку, приложив немного усилий, вы можете добавить любые необходимые функции HTML/CSS/JS, а также поскольку он поддерживает подсказки по коду и авто- при перезагрузке он может быть даже немного лучше, чем CodePen, с точки зрения общих возможностей кодирования.
Важным преимуществом JSFiddle является то, что он предлагает бесплатный режим совместной работы (включая голосовой и текстовый чат!), что позволяет вам работать над кодом одновременно с другими людьми. Однако на самом деле он не имеет особого аспекта сообщества и не демонстрирует интересных проектов, поэтому в этом отношении он проигрывает CodePen.
В целом, если у вас есть проект с большим количеством JS или вам нужно совместно писать код, JSFiddle — отличный вариант. Однако если вас что-то беспокоит, в списке «Другие игровые площадки» ниже есть много очень похожих альтернатив.
Сбой
Хорошо, вы хотите не просто поиграться с внешним интерфейсом: вам нужно что-то, на чем можно создать полнофункциональное веб-приложение. Многие игровые площадки для кода позволяют просто кодировать HTML/CSS/JS и г
JSFiddle
ческие веб-страницы, но Сбой дает вам немного места для хранения, 4000 запросов в час и позволяет довольно легко запускать Node. js серверный код. За абсолютно выгодную цену в 0,00 доллара США вы получаете возможность создавать и мгновенно развертывать небольшие проекты независимо от вашего опыта.
Он также имеет множество других замечательных функций: совместное программирование, контроль версий (так называемый «перемотка»), множество обучающих ресурсов, хорошая интеграция с GitHub, простота встраивания, дружелюбное сообщество, множество проектов, которые вы можете ремиксовать и играть и даже интегрировать Visual Studio. Его внешний интерфейс кодирования, возможно, не такой гладкий, как у некоторых других игровых площадок, но общая функциональность так же хороша. Если вы ищете быстрый и простой способ запустить веб-приложение (или пытаетесь научиться этому!), Glitch — отличное начало.
Песочница кода
КодПесочница относится к той же категории, что и Glitch, но немного более сложный и полнофункциональный. В то время как Glitch сочетает довольно минималистичный интерфейс со своей довольно мощной функциональностью, CodeSandbox раскрывает всю эту мощь, используя тот же редактор Monaco, который поддерживает VS Code. Поэтому люди, которым нравится эта IDE, будут чувствовать себя как дома в CodeSandbox.
Он чрезвычайно гибок и настраиваем, имеет открытый исходный код, позволяет развертывать полноценные веб-приложения (хотя и на несколько больше шагов, чем Glitch), размещает ваши файлы, создает атмосферу сообщества и выполняет за вас большую часть фоновой работы, освобождая вас. вплоть до простого написания кода и развертывания вашего приложения. Он также имеет интеграцию с GitHub и VS Code, Emmet (расширитель сокращений) и массу других функций, которые оценят как опытные пользователи, так и менее опытные программисты. Ве
Сбой
злишне, если вы просто бездельничаете, но если ваш проект больше не помещается в CodePen, и вы не возражаете против некоторого обучения, попробуйте CodeSandbox.Repl.it
Эта игровая площадка/IDE не находится в конце, потому что она мне меньше всего нравится (конечно, нет): а потому, что Репл.it находится в отдельной категории. Он поддерживает тоннуязыков, от Python до ЛОЛКОД (предпочитаемый язык программирования Lolcats), имеет поддержку внешнего и внутреннего кода, позволяет развертывать сайты и приложения, имеет очень тесную интеграцию с GitHub, содержит большое и очень активное сообщество разработчиков и имеет интуитивно понятный интерфейс, который не соответствует его возможностям.
Repl.it обладает всеми функциями, которые вы ожидаете от других игровых площадок в этом списке, от совместного кодирования до внедрения, и, хотя это по-прежнему в первую очередь инструмент для создания прототипов и обмена кодом, он определенно обладает достаточным потенциалом для большинства проекты малого и среднего размера (при наличии постоянного подключения к Интернету). Это может быть слишком много, если вы просто занимаетесь дизайном интерфейса или новичком в программировании, но если вы вообще программируете регулярно, это стоит изучить.
Другие потрясающие игровые площадки, на которые стоит обратить внимание
Вышеупомянутые игровые площадки — мои любимые, но их гораздо больше. Все они прекрасно справляются с базовыми задачами, и у каждого есть свои особенности, отвечающие разным потребностям. JSFiddle явно вдохновил многих из них, поэтому, если вы ищете альтернативу этому приложению, вы можете найти ее здесь.
- Живое плетение : очень похоже на JSFiddle
Песочница кода
о на дизайн. Он особенно выделяется встроенным CSS, инструментами генератора цвета и векторным редактором. - JSItor : альтернатива JSFiddle с очень похожим интерфейсом и, в частности, приложениями для Android/iOS.
- СтекБлиц : отличная браузерная интегрированная среда разработки, созданная с помощью редактора Monaco Editor, которая поддерживает VS Code. Он чем-то похож на CodeSandbox, но немного проще, поскольку в нем отсутствует серверная поддержка.
- Флемс : простая, минималистская игровая площадка. Идеально, если вы хотите что-то без всякой ерунды и/или без отвлекающих факторов.
- JSBin : более минималистичная версия JSFiddle.
- CSSDeck : очень простая игровая площадка интерфейса. Если вам нужен простой способ протестировать несколько идей в HTML/CSS и базовом JS, это хороший выбор.
- ICECoder : это онлайн-игровая площадка с функциями, сравнимыми со многими другими, но ее главная фишка в том, что это такжезагружаемая программа, которая по сути запускается в вашем браузере. что делает его автономной IDE на основе браузера.
- Планкер : интерфейсный инструмент, который позволяет вам работать с файлами немного больше, чем некоторые другие игровые площадки, и имеет хорошую интеграцию с рабочим столом и GitHub.
- Скримба : окей, это не просто игровая площадка для кода — это сайт с инновационной комбинацией редактора видео и кода, которая одновременно предоставляет вам среду обучения и игровую площадку. Стоит обратить внимание на учащихся!
- Repl.itl="noopener" title="Веб-конструктор">Веб-конструктор : хорошая интерфейсная площадка с автономной функциональностью и даже интеграцией с CodePen!
- Дабллет : довольно простая площадка для HTML/CSS/JS, но приятный дизайн.
- PlayCode : хорошая базовая площадка для HTML/CSS/JS. Самый большой недостаток: каждые 60 секунд появляется надоедливое сообщение с предложением перейти на профессиональный план.
Их слишком много! Какой из них я выберу?
Да, существует миллион игровых площадок для веб-кода, но не теряйтесь, выбирая между ними и не теряя времени, которое вы могли бы потратить на создание чего-то! Если у вас есть примерное представление о том, что вы ищете в онлайн-среде программирования, просто сузьте круг до двух или трех приложений, которые имеют эти функции, попробуйте немного поработать с каждым из них и посмотреть, какое из них вы найдете сами. тяготеет к. В любом случае у многих из них есть функции интеграции и/или экспорта/импорта с GitHub, так что вы не навсегда застрянете в неправильном решении.
Лично я использую CodePen для простых статических страниц и экспериментов с дизайном, а Glitch — для более крупных проектов, хотя мне очень нравится дизайн VS Code CodeSandbox и консоль Repl.it. Если я пропустил вашу любимую игровую площадку или забыл упомянуть замечательную функцию, оставьте комментарий ниже, чтобы другие могли ее найти!
