Создание сайтов в Часов Яре, ДНР. 7 лучших игровых площадок для кода и альтернатив CodePen

 
 

За прошедшие годы появилось множество игровых площадок для внешнего кода. Большинство из них предлагают быстрый и грязный способ поэкспериментировать с кодом на стороне клиента (а иногда и на стороне сервера), а затем поделиться им с другими. Наиболее популярным является CodePen, который вы, скорее всего, видели или даже использовали. Это отличный инструмент, но он не предлагает всего, что может понадобиться вашему перу. Вот наш взгляд на семь лучших, сравнивая CodePen и ряд альтернатив CodePen.

Онлайн-площадки для кодирования обычно включают в себя:

редакторы HTML, CSS и JavaScript с цветовой кодировкой

автозаполнение команды code

окно предварительного просмотра, которое (обычно) перезагружается без ручного обновления

Препроцессоры HTML, такие как HAML

Less, Sass, Stylus и подобные препроцессоры CSS

включение популярных библиотек JavaScript, таких как React, Preact, Angular и Vue.js (некоторые новые игровые площадки также позволяют разрабатывать внутренний код)

консоли разработчика и инструменты проверки кода

средства совместной работы по кодированию

обмен через короткий URL

встраивание демонстраций на другие страницы

клонирование и разветвление кода

копирование в репозитории кода, такие как GitHub

нулевая стоимость базовой услуги

дополнительные премиальные услуги за небольшую ежемесячную плату

способ показать миру свои навыки программирования!

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

Давайте посмотрим на некоторые из лучших вариантов.

1. КодПен

КодПен

CodePen не был первым, но это одна из самых популярных и красивых игровых площадок для кода. Сервис, соучредитель которого Крис Койер из CSS-Tricks, выделяет популярные Pens (демонстрации на стороне клиента) и Projects (интегрированные онлайн-среды разработки, которые можно использовать для создания веб-проектов). Он предлагает чистый и функциональный пользовательский интерфейс редактирования с расширенными функциями, такими как совместное использование, встраивание, консоль ошибок, внешние библиотеки JavaScript, популярные препроцессоры CSS и многое другое.

CodePen PRO предоставляет частные ручки, хостинг активов, режим совместной работы и темы для встроенных фреймов, начиная с 8 долларов в месяц.

2. JSFiddle

JSFiddle

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

JSFiddle концентрируется на коде, поэтому вы не найдете ряд социальных функций, таких как выделенные демонстрации и возможности обмена. Интерфейс проще, чем другие, и, что необычно, вы должны нажать «Выполнить», чтобы перезагрузить панель результатов. Тем не менее, он всегда кажется быстрым, и его простота может быть предпочтительнее для некоторых.

3. JS-бин

JS-бин

JS Bin был создан гуру JavaScript Реми Шарпом и до сих пор им управляется. Он концентрируется на основах кодирования и хорошо с ними справляется. В отличие от некоторых других игровых площадок, вы можете редактировать весь файл HTML, включая расширение

.

Помимо обычных опций, библиотек и препроцессоров, JS Bin был одним из первых, кто предложил консоль ведения журнала, которая необходима для разработки JavaScript. Коммерческая учетная запись Pro предоставляет расширенные функции, такие как загрузка активов, личные корзины, персональные URL-адреса и синхронизация с Dropbox. Вы даже можете загрузить и установить JS Bin локально, если беспокоитесь о конфиденциальности или не хотите, чтобы другие видели состояние вашего кода!

4. CSS-колода

CSS-колода

Несмотря на название, CSS Deck — это полноценная площадка для HTML, CSS и JavaScript с функциями социальных сетей и совместной работы. Он существует уже давно и оказал большое влияние на другие игровые площадки. В CSS Deck не так много функций, как в CodePen, но он работает немного быстрее и имеет более настраиваемый экран макета кода. Существует активное сообщество, которое регулярно представляет примеры демонстрации кода.

5. Песочница для кода

КодПесочница

Большинство игровых площадок кода предлагают один файл HTML, один файл CSS и один файл JavaScript (хотя importsвозможны и другие). CodeSandbox — это не столько игровая площадка, сколько онлайн-среда разработки.

Как и в стандартных веб-проектах, вы можете добавлять любое количество файлов и редактировать их с помощью интегрированной среды разработки, похожей на VS Code, с несколькими вкладками (также известной как IDE). Зарегистрироваться с помощью учетной записи GitHub или Google можно бесплатно, но затем вы можете сотрудничать с другими в режиме реального времени, экспортировать проекты в репозиторий Git и развертывать их на статических узлах сайта, таких как Netlify и Vercel.

CodeSandbox может быть практичным вариантом, если вы работаете удаленно или используете нестандартное устройство для разработки, такое как Chromebook.

6. ИГРОВОЙ КОД

КОД ИГРЫ

PLAYCODE — это еще одна онлайн-среда разработки, которая позволяет добавлять несколько файлов HTML, CSS, JavaScript и ресурсов. Интерфейс проще, чем CodeSandbox, но он быстрый, отлично выглядит, прост в использовании и, возможно, менее сложен для новичков.

PLAYCODE имеет консоль журнала и, что необычно, позволяет вам контролировать размер и частоту обновления окна предварительного просмотра. Редактор бесплатный, но для сохранения проектов необходимо войти в систему с помощью Google, Microsoft, GitHub или электронной почты.

7. Плункер

Плункер

Plunker — еще один проектный редактор, который позволяет добавлять несколько файлов HTML, CSS и JavaScript. Вы можете включить шаблоны, созданные сообществом, чтобы дать толчок вашему проекту. Как и другие, Plunker позволяет создавать рабочие демоверсии, сотрудничать с другими разработчиками и делиться своей работой. Возможно, он не такой привлекательный, как некоторые, но пользовательский интерфейс остается быстрым и функциональным.

Существует активное сообщество участников. Похоже, что большинство из них представляют демонстрации Angular, но он также поддерживает стартовые шаблоны vanilla JS, React и Preact.

Другие варианты

Конечно, есть много других игровых площадок для кода, включая Glitch, ESNextBin, JSitor, Liveweave, Dabblet и другие. StackBlitz — это новая игровая площадка, которая поддерживает интерфейсную разработку, но также позволяет вам экспериментировать с внутренним кодом, используя Node.js, Next.js и GraphQL.

Совет: чтобы попробовать StackBlitz, просто введите «node.new» (без кавычек) в адресную строку браузера.

Мы пропустили ваш любимый? Расскажите нам об этом!

Чтобы узнать больше о возможностях совместного использования внутреннего кода, обратитесь к обзору Джеймса Хиббарда, посвященному игровым площадкам для внутреннего кода в Интернете.

Если вы предпочитаете размещать собственную онлайн-среду разработки, ознакомьтесь с ICEcoder и обратитесь к учебнику SitePoint «Редактирование кода в браузере с помощью ICEcoder «.

Если вы хотите что-то подобное, но не хотите работать с кодом в сети, ознакомьтесь с Web Maker и обратитесь к учебнику SitePoint «Web Maker, автономная браузерная альтернатива CodePen «.

3D-печать5GABC-анализAndroidAppleAppStoreAsusCall-центрChatGPTCRMDellDNSDrupalExcelFacebookFMCGGoogleHuaweiInstagramiPhoneLinkedInLinuxMagentoMicrosoftNvidiaOpenCartPlayStationPOS материалPPC-специалистRuTubeSamsungSEO-услугиSMMSnapchatSonyStarlinkTikTokTwitterUbuntuUp-saleViasatVPNWhatsAppWindowsWordPressXiaomiYouTubeZoomАвдеевкаАктивные продажиАкцияАлександровск ЛНРАлмазнаяАлчевскАмвросиевкаАнализ конкурентовАнализ продажАнтимерчандайзингАнтрацитАртемовскАртемовск ЛНРАссортиментная политикаБелгородБелицкоеБелозерскоеБердянскБизнес-идеи (стартапы)БрендБрянкаБукингВахрушевоВендорВидеоВикипедияВирусная рекламаВирусный маркетингВладивостокВнутренние продажиВнутренний маркетингВолгоградВолновахаВоронежГорловкаГорнякГорскоеДебальцевоДебиторкаДебиторская задолженностьДезинтермедитацияДзержинскДивизионная система управленияДизайнДимитровДирект-маркетингДисконтДистрибьюторДистрибьюцияДобропольеДокучаевскДоменДружковкаЕкатеринбургЕнакиевоЖдановкаЗапорожьеЗимогорьеЗолотоеЗоринскЗугрэсИжевскИловайскИрминоКазаньКалининградКировскКировскоеКомсомольскоеКонстантиновкаКонтент-маркетингКонтент-планКопирайтингКраматорскКрасноармейскКрасногоровкаКраснодарКраснодонКраснопартизанскКрасный ЛиманКрасный ЛучКременнаяКураховоКурскЛисичанскЛуганскЛутугиноМакеевкаМариупольМаркетингМаркетинговая информацияМаркетинговые исследованияМаркетинговый каналМаркетинг услугМаркетологМарьинкаМедиаМелекиноМелитопольМенеджментМерчандайзерМерчандайзингМиусинскМолодогвардейскМоскваМоспиноНижний НовгородНиколаевНиколаевкаНишевой маркетингНовоазовскНовогродовкаНоводружескНовосибирскНумерическая дистрибьюцияОдессаОмскОтдел маркетингаПартизанский маркетингПервомайскПеревальскПетровскоеПлата за кликПоисковая оптимизацияПопаснаяПравило ПаретоПривольеПрогнозирование продажПродвижение сайтов в ДонецкеПроизводство видеоПромоПромоушнПрямой маркетингРабота для маркетологаРабота для студентаРазработка приложенийРаспродажаРегиональные продажиРекламаРеклама на асфальтеРемаркетингРетро-бонусРибейтРитейлРовенькиРодинскоеРостов-на-ДонуРубежноеСамараСанкт-ПетербургСаратовСватовоСвердловскСветлодарскСвятогорскСевастопольСеверодонецкСеверскСедовоСейлз промоушнСелидовоСимферопольСинергияСколковоСлавянскСнежноеСоздание сайтов в ДонецкеСоледарСоциальные сетиСочиСтаробельскСтаробешевоСтахановСтимулирование сбытаСуходольскСчастьеТелемаркетингТельмановоТираспольТорговый представительТорезТрейд маркетингТрейд промоушнТюменьУглегорскУгледарУкраинскХабаровскХарцызскХерсонХостингЦелевая аудиторияЦифровой маркетингЧасов ЯрЧелябинскШахтерскЮжно-СахалинскЮнокоммунаровскЯндексЯсиноватая