Обзор онлайн «песочниц» (sandboxes) для совместного тестирования кода | Разное

Обзор онлайн «песочниц» (sandboxes) для совместного тестирования кода

Всем привет!

Сегодня мы рассмотрим несколько так называемых онлайн «песочниц» — специальных инструментов, представляющих собой изолированные окружения, в которых разработчики могут создавать, тестировать и отлаживать свои программные продукты и части кода совместно с другими людьми.

Такие инструменты могут быть полезны, когда простого совета от друзей или коллег недостаточно. Согласитесь, что не всегда можно «на пальцах» объяснить возникшую при разработке проблему, а пустить стороннего человека в код проекта можно себе позволить далеко не всегда.

Итак, в статье мы рассмотрим 10 бесплатных онлайн «песочниц» (или sandboxes), которые могут однажды помочь вам решить ту или иную задачи или проблему с помощью третьих лиц.

Общие возможности

Понятно, что каждый инструмент имеет свой набор возможностей и каждый выделяется той или иной фишкой. Но несмотря на это, у всех есть следующие общие возможности:

• простота и «заточенность» под сниппеты: рассматриваемые инструменты не являются полноценными средствами разработки;
• работают в браузере: для работы не нужно устанавливать какие-то отдельные программы или плагины;
• панель просмотра результата: область, где отображается то, что генерит написанный вами код;
• клиентский код: обрабатывает HTML, CSS и JavaScript;
• сохранение: большинство инструментов позволяют вам как сохранить код себе, так и на сайте;
• совместный доступ: большинство позволяет вам делится тем, что вы делаете с другими и работать совместно.

Теперь давайте посмотрим на каждый из инструментов отдельно и попробуем выделить особенности каждого из них.

Tinkerbin

Создан компанией Sinefunc. Tinkerbin является относительно новым продуктом; наряду с обычными HTML, CSS и JavaScript позволяет так же запускать такие вещи как SASS и CoffeeScript.

Tinkerbin поддерживает горячие клавиши и имеет функцию автоматического обновления панели просмотра, что достаточно удобно.

JS Bin

Open source продукт, разработанный Рэми Шарпом. Есть опция предпросмотра в реальном времени и возможность подключать популярные библиотеки, например, MooTools или jQuery.

Если вы захотите использовать JS Bin локально, то можете скачать исходный код с GitHub. Документацию, примеры использования и советы можно найти в блоге проекта на Tumblr.

JS Fiddle

В этой «песочнице» так же есть возможность подключать популярные библиотеки и тестировать асинхронные (Ajax) вызовы вашего кода. Плюс есть команда для запуска JSLint для проверки качества кода и команда «Tidy Up» для его форматирования.

Код проекта так же является открытым и доступен на GitHub.

CSSDesk

Данный инструмент позволяет тестировать только CSS и HTML сниппеты. Есть возможность смены фона панели предпросмотра (полезно чтобы быстро протестировать как смотрится верстка на разных фонах). Спрятав панели с HTML и CSS, вы можете расширить область просмотра на весь экран.

Pastebin.me

 

Этот сервис создан разработчиком и предпринимателем Дейлом Харви и представляет собой HTML-JS «песочницу» с открытым исходным кодом, который можно найти на GitHub.

Панель с кодом расширяется на всю ширину экрана, что особенно удобно, когда у вас широкоформатный монитор. Три полезные шаблона (HTML, JavaScript и jQuery) позволяют быстро создать заготовку для работы.

jsdo.it

Сервис делает упор на коллективной работе, позволяя поделиться своим кодом как в популярных социальных сетях, так и внутри сайта. Приятный интерфейс, автообновление панели предпросмотра и возможность подключать популярные библиотеки и фреймворки. Особенности является функция «Просмотр в мобильном телефоне» — открывает окно, размеры которого равны размер экрана смартфона. Для использования это функции необходимо зарегистрироваться.

Tryit Editor Instant

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

PractiCode

Онлайн редактор PractiCode — это дополнительный инструмент для материалов сайт LandofCode.com. Хотя подразумевается, что его используют пока читают и разбирают примеры и материалов сайта, он так же может быть использован в качестве «песочницы». Поддерживает HTML, CSS и VBScript.

JavaScript Sandbox

Этот аскетичный инструмент предназначен для работы только с JavaScript.

Google Code Playground

Инструмент от Google позволяет вам легко и удобно тестировать код для работы с предоставляемыми компанией API.

 

Вольный перевод статьи «10 Web-based Sandbox Tools for Testing Your Code Snippets».

Как подключить и установить React JS. Простой способ.

Хотите начать пользоваться библиотекой React JS? Для этого ее сначала нужно подключить и установить на те страницы, где вы планируете ее применять.

Прежде чем начать, если вы хотите подробнее погрузиться в работу с библиотекой React, рекомендую посмотреть мой курс «Философия React для начинающих»

Эта статья о простом способе, как это можно сделать. Это подойдет вам если у вас небольшой и несложный проект, который состоит из нескольких веб-страниц.

Итак, вот как вы можете подключить и попробовать в работе React JS. 

1 способ. Использование «песочницы».

Чтобы просто посмотреть возможности React JS можно воспользоваться так называемой «песочницей» — онлайн страницей, где уже эта библиотека подключена и вам остается только вводить команды в соответствующую вкладку и наблюдать результат в другой.

Не нужно ничего подключать или устанавливать.

Вот страница, где это можно сделать:

https://codepen.io/pen?&editors=0010

После внесения изменений в код, просто нажимайте кнопку «Change View», чтобы посмотреть результат.

Этот способ использования библиотеки React JS идеально подходит, если вы просто хотите поэкспериментировать с ее возможностями. Также это удобный инструмент для обучения.

2 способ. Подключение Javascript файлов вручную.

Если вы хотите использовать React JS на своих веб-страницах, к ним нужно подключить несколько javascript файлов. 

Вы можете скачать эти файлы и подключить их указав локальный путь до них.

Также можно подключать библиотеку указав путь до Javascript-файлов на удаленном сервере (на так называемых CDN серверах).

О том как можно подключить javascript файлы к веб-страницам, можно почитать здесь:

https://webkyrs.info/post/kak-podkliuchit-javascript-fail-k-html-dokumentu-1

Библиотека React JS представляет собой два javascript файла. 

1) Сама библиотека и ее основные функции (ядро). 

react.js

2) Функции для работы с DOM-деревом. Нужна для использования на веб-страницах и работы react в браузере.

react-dom.js

Для полноценной работы со всеми возможностями React, также рекомендуется подключить javascript транспайлер Babel.

Он будет обеспечивать, чтобы ваш код поддерживал новый синтаксис Javascript и поддерживался в старых браузерах.

Файл babel.js

Пример веб-страницы, где подключена библиотека React JS можно здесь:

https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html

Это пример от разработчиков библиотеки.

Скрипты можно подключить между открывающим и закрывающим тэгом <head>…</head> вашей веб-страницы.

Например, подключение скриптов для разработки (development).

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>

Можно вместо этого подключить сжатые версии этих файлов для размещения на рабочем сервере (production):

<script crossorigin src="https://unpkg. com/react@16/umd/react.production.min.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>

Актуальные версии ссылок CDN всегда можно посмотреть здесь:

https://reactjs.org/docs/cdn-links.html

Вот таким способом, вы можете быстро подключить React JS и уже начать его использовать. 

И еще раз. Курс более подробный курс по работе с React «Философия React для начинающих» здесь.

Virtual space isolated from rest of your PC

Прокрутить вниз

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

Поделиться

Что находится под угрозой?

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

Каким образом хакеры похищают данные?

Хакеры могут использовать программы, файлы и сайты для заражения вашего компьютера вредоносным ПО. Песочница позволяет запускать сомнительные файлы в безопасной изолированной виртуальной среде. Если после запуска подтвердится, что файл безопасен. вы можете запустить его в своей системе. В противном случае ваш компьютер будет по-прежнему невредим, вы не ставили его под угрозу.

Запускайте файлы и приложения в

безопасной виртуальной среде

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

Все платные продукты Avast содержат «песочницу». Чтобы безопасно запустить любой файл с расширением . exe в изолированной среде, просто щелкните его правой кнопкой мыши и выберите пункт «Запустить в песочнице». Кроме того, можно открыть программу Avast и щелкнуть плитку «Защита». На экране отобразится значок песочницы. Открыв ее, можно запускать любые программы.

Еще не используете Avast?

Какие продукты включают компонент

Песочница

Поделиться

Практические занятия с CodeSandbox | Информационный мир

Интегрированная среда разработки (IDE) остается центральным элементом инструментов разработчика. Онлайн-среды разработки оседлали волну облачных инструментов, мощность которых за последние несколько лет возросла. CodeSandbox — один из самых популярных вариантов в этой области, и в последнее время его использование растет.

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

Кроме того, CodeSandbox — это проект с открытым исходным кодом.

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

Hello CodeSandbox

CodeSandbox наиболее известен как среда для быстрого развертывания и совместного использования интерфейсных приложений JavaScript. Звучит похоже на CodePen и JSFiddle, но на самом деле CodeSandbox — более амбициозный проект с поддержкой полного стека, почти сравнимой с полноценной онлайн-средой IDE, такой как Cloud9, хотя и только для JavaScript.

CodeSandbox упрощает обмен проектами. Например, вот ссылка на простой пример статического HTML. Если щелкнуть эту кнопку, браузер откроет песочницу IDE с простым HTML-приветствием от InfoWorld и логотипом InfoWorld, как на рис. 1.

Рис. 1. Базовая песочница

IDG

сгенерировал уникальное имя для проекта («stoic-shaw-c9u57»). Это постоянное имя проекта, которое используется для совместного использования и встраивания. CodeSandbox имеет хорошие возможности встраивания, включая автоматическую поддержку на Medium и простое iframeing.

Разветвить песочницу

Теперь давайте исправим размер логотипа InfoWorld, разветвив проект и добавив таблицу стилей. Нажмите кнопку «Вилка» в правом верхнем углу. Это создаст новый уникальный URL-адрес для вашего проекта с той же кодовой базой.

Убедитесь, что вы находитесь в файловом менеджере (второй значок внизу в левой строке меню). В заголовке панели «Файлы» щелкните значок «Добавить каталог».Создайте каталог /css, затем используйте кнопку «Добавить файл» в новом каталоге, чтобы добавить файл index.css.

Теперь вы можете добавить правило CSS, как в листинге 1, в файл css/index.css и импортировать его в index.html, как показано в листинге 2.

Листинг 1. Добавление стиля

 #logo { 
   width: 90%; 
 } 

Листинг 2. Импорт таблицы стилей

  css" /> 

Вы можете увидеть эти изменения здесь.

Шаблоны CodeSandbox

Предыдущее простое упражнение должно дать вам представление о возможностях CodeSandbox, а также познакомит вас с основным способом получения доступа к коду на платформе: через общие URL-адреса. Следующий основной способ — создание нового проекта с использованием шаблонов. Давайте посмотрим на это дальше.

В правом верхнем углу нажмите кнопку Create Sanbox . Появится диалоговое окно, подобное рисунку 2.

Рисунок 2. Диалоговое окно «Создать песочницу»

IDG

Вы можете видеть, что диалоговое окно предлагает вам шаблоны для использования.Вы можете найти еще больше шаблонов, созданных сообществом (а их тысячи), выбрав Исследуйте шаблоны. И вы можете импортировать шаблоны из GitHub с помощью параметра «Импорт проекта», который вы увидите через мгновение.

Сейчас просто используйте параметр «Создать песочницу» и введите «Svelte» в поле поиска. Это предложит официальный шаблон Svelte от CodeSandbox. Выберите этот шаблон.

Обратите внимание, что макет CodeSandbox IDE является гибким. Размер большинства панелей можно изменить, текстовые редакторы поддерживают режим разделенного просмотра, а в меню «Вид» доступны различные параметры макета.Вы можете использовать эти параметры, чтобы настроить макет по своему вкусу.

Обратите внимание, что шаблон Svelte дает нам полноценное приложение Svelte с Rollup, настроенным в качестве инструмента сборки. Если вы откроете файл package.json, вы увидите все, что ожидаете.

Зависимости

CodeSandbox также обнаруживает ваши зависимости, и вы можете управлять ими из панели зависимостей, расположенной прямо под браузером файлов. Обратите внимание, что система достаточно умна, чтобы также обнаруживать внешнюю зависимость bootstrap.css вместе с данными из файла package.json.

Привязки клавиш

Пока у нас открыт этот проект, я хочу, чтобы вы увидели, что многие команды следуют соглашениям Visual Studio Code. Например, Ctrl-Shift-p откроет палитру команд, а Ctrl-p запустит средство поиска файлов.

Если вы нажмете Ctrl-p и начнете вводить «App», появится App.svelte для быстрого открытия.

Среды CodeSandbox

Теперь давайте разберемся со средами Sandbox.Они определяют, как CodeSandbox размещает ваш проект. В вашем новом приложении Svelte, если вы выберете «Информация о песочнице» в верхней части левого меню, вы увидите, что там написано «среда: статическая». Это означает, что песочница работает как простое внешнее приложение, такое как JSFiddle. CodeSandbox также поддерживает запуск приложений на основе Node.

При запуске приложений Node.js CodeSandbox использует контейнер Docker с официальным образом Node.js. Помимо предоставления доступа к среде выполнения Node.js и сценариям в пакете.json среда Node.js позволяет получить доступ к терминалу командной строки.

Чтобы увидеть это в действии, создайте новую песочницу, используя официальный шаблон Node.js, как показано на рисунке 3.

Рисунок 3. Создание приложения Node.js

IDG

Обратите внимание, что в среде теперь указано «Node. ” Файлы package.json и index.js — это то, что вы ожидаете от простого HTTP-модуля с ответом «Hello world».

Существует также «конфигурация сервера» (значок, который выглядит как стек сервера), который позволяет вам изменять такие вещи, как порт.

Теперь вы можете использовать интерактивный терминал. В правом нижнем углу вы увидите, что работает выходной терминал только для чтения под названием «yarn start». Рядом с этим вы можете щелкнуть значок плюса, чтобы получить командную строку. Там вы можете ввести ls , чтобы увидеть список каталогов. Обратите внимание, что приложение работает в /bin/bash/sandbox.

Интеграция с GitHub

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

Эта интеграция делает CodeSandbox очень удобным для совместного использования и изменения небольших приложений, находящихся в системе управления версиями.

Чтобы использовать частные репозитории GitHub, вам понадобится учетная запись Pro, которая на момент написания стоит 9 долларов в месяц.

Импорт из командной строки или расширения браузера

В дополнение к методам, которые вы уже видели — использование шаблона и импорт из GitHub — CodeSandbox предлагает инструмент командной строки, который будет импортировать проект из вашей локальной системы.Вы можете получить инструмент здесь.

И вы можете добавить расширение для браузера, которое позволит вам импортировать прямо из GitHub.

Экспорт в Zip

Еще одна удобная функция — возможность экспортировать проект в Zip-файл. Это позволяет вам использовать CodeSandbox для быстрого прототипирования, а затем экспортировать прототип в вашу традиционную IDE, когда ваше приложение перерастет ее. Вы можете найти эту функцию в меню «Файл» -> «Экспорт».

Выполнение тестов

CodeSandbox имеет встроенную поддержку тестов для клиентских приложений.Если ваш проект построен с использованием поддерживаемого стека технологий, тесты должны работать сразу после нажатия кнопки.

Песочницы на стороне сервера не будут автоматически обнаруживать тесты, но их можно запускать как обычно (с помощью сценария NPM).

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

Поддержка развертывания

Еще одна важная функция, о которой следует помнить, — это интеграция с платформами развертывания. Слева значок ракеты при нажатии покажет доступные варианты развертывания.Например, шаблон Node.js можно развернуть в Vercel.

Интеграция развертывания обеспечивает плавный конвейер доставки для простых сценариев.

Совместная работа в реальном времени

И последнее, но не менее важное: самая нижняя кнопка в левом меню активирует режим Live, в котором среда IDE доступна для совместного использования и одновременного редактирования. Режим Live предоставляет вам ссылку для совместного использования песочницы и множество опций, таких как возможность контролировать, кто может редактировать.

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

Хотя CodeSandbox не может сравниться по функциям и многоязычной поддержке с такими IDE, как Eclipse, VS Code или даже AWS Cloud9, он может похвастаться рядом интересных функций для быстрого прототипирования, совместного использования и совместной работы над небольшими проектами и идеями.

Будет интересно посмотреть, как CodeSandbox будет развиваться и опираться на свою популярность и возможности.

Copyright © 2021 IDG Communications, Inc.

Песочница ArcGIS API для JavaScript

	Кодовая панель
сдвиг esc сдвиг esc	Фокус-песочница
⌘ введите ctrl введите	Обновить вывод
вариант ⌘ г Ctrl Alt G	Перейти к строке
⌘ / Ctrl /	Строка комментария
вариант ⌘ л Ctrl Alt L	Код автоматического отступа
⌘ к ctrl к	Переключить vim, :w Обновить вывод
⌘ сдвиг > Ctrl шифт >	Увеличить размер шрифта
⌘ сдвиг < Ctrl сдвиг <	Уменьшить размер шрифта
⌘ 0 Ctrl 0	Сбросить размер шрифта
Ctrl 1 Ctrl 1	Переключить HTML
Ctrl 2 Ctrl 2	Переключить выход

Ярлыки панели кода по умолчанию

Онлайн-игровая площадка Javascript, которая поразит вас

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

Основы

Онлайн-игровые площадки с кодом предлагают множество базовых, можно сказать, обязательных функций:

• подсветка синтаксиса
• окно предварительного просмотра
• предварительная обработка файлов (например, Typescript, SASS)
• включение внешних файлов и библиотек JavaScript
• обмен через короткий URL
• встраивание демонстраций в другие страницы
• нулевая стоимость базовых функций

Существует длинный список редакторов, отвечающих вышеуказанным критериям: JSFiddle, CodePen, JSBin, Liveweave, PlayCode, Plunker, JSitor.

Проблема

Вышеупомянутые игровые площадки вполне хороши, но я хотел поделиться полными проектами, созданными с помощью интерфейсов командной строки (например, Angular CLI, Vue CLI и CreateReactApp). Хотя некоторые игровые площадки позволяют использовать интерфейсные фреймворки, доступ к ним обычно осуществляется глобально. Так, как вы бы не написали свое следующее производственное приложение.

Функции, которые я хотел:

• использовать тот же стек, что и в производственном проекте
• импорт из Github
• используйте любой пакет NPM

Решение

Проект, который удивил и меня, и имеет вышеперечисленные функции, это Codesandbox.

Codesandbox позволяет импортировать ваши проекты Github или запускать новое приложение React, Angular, Vue, сгенерированное их интерфейсом командной строки. Он просто работает и загружается быстро. Мне удалось перенести мой TodoApp, реализованный в React Hooks, за считанные секунды.

Он также имеет несколько приятных дополнительных функций:

• развертывание в Netlify или Zeit
• Интеграция VSCode (например, ярлыки)
• живое сотрудничество
• автодополнение
• пух
• функциональность средства разработки
• Github фиксирует
• контейнерных песочниц для серверных приложений (Node. js)
• это с открытым исходным кодом, вы можете внести свой вклад

Резюме

Я был поражен простотой, скоростью и набором функций Codesandbox. Это похоже на онлайн-площадку, в которой мы нуждались. Я пробовал другие игровые площадки, но после этого я не оглядываюсь назад.

Надеюсь, вы почувствуете то же самое и попробуете этот замечательный веб-сайт.

Игровая площадка JavaScript и TypeScript в вашем редакторе

Код запускается сразу после ввода несохраненных изменений; нет необходимости делать что-нибудь вручную или переключите контекст.Сообщения об ошибках отображаются рядом с кодом, вызвавшим их. Консоль журналы и значения выражения идентификатора также отображаются в строке.

Индикаторы в низу вашего редактора кода постоянно обновляются в режиме реального времени для отображения кода покрытие, чтобы вы могли быстро увидеть, какие строки кода являются источником ошибки, какие полностью покрыты, только частично покрыты или нет прикрыта вообще.

Перемещайтесь вперед и назад по коду, чтобы понять, как он выполняется.Time Machine позволяет вам автоматически воспроизводить или переходить к определенной строке кода, просматривать значения времени выполнения, редактировать и продолжать, а также входить, повторять и выходить из вашего кода.

Value Explorer позволяет просматривать и исследовать не примитивные значения времени выполнения в удобном для навигации древовидное представление в реальном времени. Эта функция отлично подходит для изучения больших объектов и упрощает отладку. и быстрее. Открытые пути/значения можно копировать прямо в буфер обмена.

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

Импортируйте любые файлы из вашего проекта в ваш файл Quokka. Quokka будет следить за изменениями в файлах проекта и автоматически обновляться при изменении зависимых файлов.Для импорта можно использовать Babel или TypeScript. компиляция файлов.

CPU Profiler позволяет быстро записывать профиль использования ЦП вашего кода для анализа времени его выполнения. представление. Любые предоставленные ссылки, которые ссылаются на ваши файлы проекта, будут открыты в вашем редакторе, когда вы нажимаете на них.

Быстро установите любой пакет узлов, не выходя из редактора и не введите имя пакета.При установке выберите, следует ли устанавливать только для активный сеанс Quokka или для всего вашего проекта.

Образцы кода как носитель

Неструктурированная песочница предоставляет открытую терминальную модель для ввод и выполнение кода. Эти терминалы могут быть встроены в страница, открываемая нажатием кнопки или встроенная в структуру общих документов.

• Сильные стороны

  • Редакционная гибкость — позволяет автору вставлять любые типы контента он или она лучше всего опишет тему

• Слабые стороны

  • Негибкость конструкции.Они часто появляются как фреймы или что-то в этом роде. искажает общее впечатление.

  • Неинтегрированный. Если не соблюдать осторожность, песочница может показаться редакционная запоздалая мысль.

Примеры:

repl.it

repl.it — это инструмент, который использует различные скомпилированные языки (Python, Ruby и Lua, среди прочих). Сайт предлагает код runner, панель вывода, удивительно широкий выбор языков и хороший выбор образцов для каждого типа.

Программатор

Программатор запускает языки в браузере включая консоль (C++, C#, Java, Objective-C), Интернет (PHP, Javascript, JQuery, Java Server Pages, AJAX), мультимедиа (Flex, Processing), рабочий стол (Java Swing) и базы данных (SQL, SQLite). Другие на сайте включают Ruby, Python, VB, AJAX, Flex, Flash, iOS, Android и другие.

Анализ Эндрю: "хотя он поддерживает довольно широкий выбор языки, производительность у него довольно ужасная. Например, проверьте эти рубины примеры:

http://www.Programr.com/append-and-concatination http://www.programr.com/using-loop-1

Каждому из них требуется 9-10 секунд для оценки."

Парное программирование Twilio

http://www.twilio.com/blog/2013/06/pair-programming-in-the-browser-with-twilio.html

Инструменты для создания приложений реального времени в браузере получают все время лучше. Запуск node.js на сервере вместе с библиотеки, такие как socket.io, делает до смешного простым push-уведомление сервера и управляемая событиями связь между клиентами.Объедините это с Twilio Client для голосовой связи в браузере и у вас есть невероятно мощная платформа для облегчения общения между пользователей вашего приложения.

Парное программирование в реальном времени с распределенной командой вполне возможно с некоторыми технологиями, которые мы рассмотрим сегодня. Давайте пробежимся через список ингредиентов для этого хака: * node.js на сервере * официальный модуль узла twilio, доступный на npm * Клиент Twilio JavaScript SDK (для браузера) * socket.io (и сервер, и браузер) * Express для маршрутизации HTTP-запросов и обработки ответов * Ace редактор кода (браузер) * AppFog (платформа как услуга для хостинга)

Блокнот IPython

Блокнот IPython — это инструмент для просмотр питона в браузере. Автор пишет комплексно. среде (собственный формат — JSON), которая позволяет использовать текст, уравнения и живой код. (Код выполняется на удаленном сервере.) Вывод код представлен в формате терминального стиля. Один из другого действительно приятной особенностью является простота встраивания изображений, таких как сгенерированные из числовых или научных инструментов, таких как numpy или scipy.

Академия Хана

Академия Хана предоставляет широкий спектр учебные классы по основам информатики. Обычно есть видео или анимация для каждого шага, после чего студент может поэкспериментируйте с кодом в песочнице. Среда кодирования разделен на панель для листинга и панель для вывода, где ученик может увидеть результат. (В настоящее время только языки на основе Javascript похоже, поддерживается.) Среда кода также поддерживает функцию «Сохранить как кнопка «отключить», где пользователь может сохранить список кодов на свой собственный личный кабинет для модификации.

Царапина

Царапина есть интерактивная среда обучения, ориентированная на детей. Пользователь редактирует код в окне, похожем на IDE. Советы, инструкции и учебные пособия могут быть отображаются на боковой панели под названием «Советы», которую можно включить или отключить. То пользователь также может сохранять свои программы (которые часто похожи на небольшие анимации или фильмы), чтобы ими можно было поделиться.

JQFundamentals

jqfundamental — сайт для обучения JavaScript. Он проходит через богатый набор концепций, которые проиллюстрированы с конкретными примерами кода.Вы можете нажать на маленькую иконку на example, чтобы открыть редактор кода в реальном времени, где вы можете запустить пример.

Chimera

O’Reilly Chimera — новый бета-сайт за эксперименты с тем, как книги могут стать более интерактивными. В это в настоящее время в разработке, сайт имеет встроенные JSBins, которые позволяют читателю попробовать код. (Только для JavaScript.)

Opal

Opal — компилятор ruby ​​для javascript. это от источника к источнику, что делает его быстрым в качестве среды выполнения.Opal включает компилятор (который можно запустить в любом браузере), реализацию corelib и среды выполнения. Corelib/среда выполнения также очень мала (10,8 КБ в сжатом виде).

попробуйте clojure

Попробуйте Clojure — это онлайн-песочница для использования Clojure, динамический язык программирования, ориентированный на Java Virtual Машина (и CLR, и JavaScript). Он разработан, чтобы быть язык общего назначения, сочетающий в себе доступность и интерактивность разработка языка сценариев с эффективным и надежным инфраструктура для многопоточного программирования.

forio julia tutorial

Julia Tutorial — интерактивный учебник для языка julia. Он структурирован как стиль командной строки tutoral, где пользователь может связать такие команды, как «учебник» или «далее», которые предложить вам попробовать определенные элементы языка.

Python Tutor

http://www.pythontutor.com/ — это инструмент для изучения Python, Java, JavaScript, TypeScript и Ruby. На данный момент более 1,2 миллиона человек использовали этот инструмент для самообучения, часто в сочетании с МООК и чтением онлайн-учебников.

CodePen vs CodeSandbox — сравнение игровых площадок JavaScript

Являясь одним из 4 языков, работающих в Интернете, JavaScript чрезвычайно прост в освоении. Просто откройте настольный браузер, перейдите к инструментам разработчика (обычно с F12 ), и все! Оттуда вы можете играть с JS, не устанавливая и не запуская никаких сложных настроек. Все, что вам нужно, это браузер .

Приятно иметь всю эту простоту в готовом виде, но иногда нужно больше.Например, вы хотите поиграть с каким-то новым веб-API, который вы только что изучили, но не хотите создавать совершенно новый проект.

Если у вас нет завалявшегося шаблонного кода, вам, скорее всего, придется устанавливать и настраивать все с нуля. К сожалению, инструменты разработчика и встроенная консоль также не помогут — они слишком просты и поэтому плохо подходят для такой цели. Осталось только одно решение — кодовая площадка .

Благодаря своему уникальному положению JavaScript является самым простым языком для работы в Интернете.Таким образом, это наиболее поддерживаемая среди онлайн-площадок — мест, где вы можете легко писать и играть с кодом. Их много в Сети, но лишь немногие из них хорошо известны и пользуются доверием.

В этой статье мы подробно сравним две самые популярные игровые площадки JS — CodeSandbox и CodePen — друг с другом. Давайте начнем!

Целевая страница CodeSandbox

Созданная в 2017 году (младшая из двух), CodeSandbox предназначена для улучшения и ускорения процесса веб-разработки.Это устраняет все сложности, связанные с настройкой проекта, и обеспечивает простое сотрудничество в режиме реального времени.

В основе CodeSandbox лежат песочниц - блоки, содержащие собственно проекты и их код. На момент написания статьи их насчитывается более 3 миллионов, и большая часть их кода находится в свободном доступе для ваших собственных вариантов использования. При этом CodeSandbox также имеет открытый исходный код, а его кодовая база размещена на GitHub.

Целевая страница CodePen

С момента своего появления в 2012 году CodePen превратилась в огромную среду социальной разработки .Он ориентирован на небольшие игровые площадки под названием Pens, которыми можно легко делиться, встраивать и группировать, когда и как вы хотите.

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

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

Редактор

С точки зрения фактического пространства для редактирования — места, где происходит волшебство — эти двое очень разные.

При использовании CodeSandbox любой создаваемый проект начинается с шаблона . Он может либо соответствовать определенной библиотеке, фреймворку или среде выполнения (включая Node.js), либо использовать только стандартные веб-технологии. После выбора шаблона вы попадаете в редактор со всеми необходимыми файлами, и окно предварительного просмотра уже открыто.

Все песочницы предоставляют вам доступ к «файловой системе», что означает, что вы можете создавать дополнительные файлы, использовать модули (включая пакеты NPM) и взаимодействовать со статическими активами. Также есть возможность редактировать файлы конфигурации , относящиеся к данному шаблону.

Сам редактор работает на базе редактора Monaco Editor с открытым исходным кодом, с которым вы, возможно, знакомы по VS Code . Это означает, что все функции повышения производительности (например, intellisense и переход к определению) помогут вам.

С другой стороны, CodePen предоставляет вам два «режима». Первым и наиболее часто используемым является ручка Pen . Создать его так же просто, как нажать кнопку, после чего вы попадаете прямо в редактор.

Оттуда у вас есть доступ к панели предварительного просмотра и основным окнам редактирования HTML, CSS и JS. Никакой "файловой системы", intellisense или чего-то подобного - только простая подсветка синтаксиса и быстрые команды, такие как prettify. На панели настроек вам разрешено выбирать из ограниченного набора препроцессоров для всех трех языков (например, TypeScript для JS) или добавлять ссылки на внешние источники.

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

В любом случае, если все, что вам не хватает в вашей Pen, это поддержка «файловой системы», тогда вы можете выбрать CodePen Projects .Опыт редактирования по-прежнему похож, но немного ограничен в бесплатной версии.

Социальные сети

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

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

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

Как я уже сказал, CodePen выводит социальные возможности на новый уровень. Лайки, комментарии, просмотры, теги, посты, коллекции и т. д.- все это делает CodePen платформой для социальной веб-разработки . Есть даже место для списков вакансий, задач, информационного бюллетеня и страницы исследования. Наконец, вы получаете режим совместной работы в реальном времени, но только если вы выбрали один из планов Pro.

Другие

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

CodeSandbox отличается функциональностью редактора. Вы получаете выделенный тест-раннер , глубокую интеграцию с GitHub (импорт репо, коммиты и запросы на вытягивание) и встроенный инструмент развертывания для ZEIT Now и Netlify (в настоящее время находится в бета-версии).

У вас также есть доступ к некоторым настройкам VS Code. Таким образом, вы можете настроить свою тему (может быть пользовательской), настроить конфигурацию Prettier и сделать другие вещи.

Опять же, основное внимание CodePen уделяет социальным функциям, поэтому неудивительно, что в этом его сила. Возьмем, к примеру, документацию и специальный блог . Они есть у обоих инструментов, и они в значительной степени парные, но документы CodePen немного более подробные, а его блог гораздо более активен.Блог CodeSandbox в основном посвящен обновлениям инструментов и новым функциям, в то время как блог CodePen также затрагивает то, что происходит за кулисами, включая дополнительный подкаст .

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

CodeSandbox в этом отношении достаточно ясен. За $12 в месяц вы можете создавать неограниченное количество частных песочниц и подключаться к частным репозиториям GitHub.Вы также получаете более высокий лимит хранилища (учитывается для всех песочниц) с 50 МБ (на бесплатном уровне) до 500 МБ. И если вам интересно, скоро появится план Pro для Teams.

На CodePen у вас немного больше возможностей для выбора. Существует три премиальных плана: $12 , $19 и $39 в месяц или меньше, если вы платите ежегодно. Любой из трех уровней позволяет создавать неограниченное количество частных ручек, постов и коллекций. Вы также получите значок Pro (социальное усиление), доступ к режиму совместной работы в реальном времени, отсутствие рекламы и многое другое.

Есть также специальные планы для команд и другие межуровневые различия. Для этого вы можете проверить официальную доску выставления счетов.

Итак, основываясь на том, что мы уже рассмотрели, мы сможем выбрать победителя. Но все не так прямолинейно. Одна игровая площадка лучше другой в некоторых отношениях и наоборот. Мы можем принимать решения только на основе конкретных категорий.

Если все, что вам нужно, это делать что-то бесплатно, подойдет любой из редакторов. Я бы рекомендовал CodePen для всего, что не требует сложной настройки или библиотек — только чистый HTML, CSS и JS с дополнительными препроцессорами в верхней части.CodeSandbox должен быть выбором всякий раз, когда вам требуется дополнительная настройка, структура пользовательского интерфейса, Node.js, пакеты NPM или что-то более сложное .

Если вы хотите использовать игровую площадку, чтобы укрепить свои позиции в социальных сетях или создать личное портфолио, CodePen — лучший выбор. CodeSandbox хорош, но не так хорош, как его конкурент. Сообщения, коллекции, страница исследования — все эти функции и более широкое сообщество делают CodePen отличным выбором для социального взаимодействия .

Если вы используете игровую площадку только для встраивания на свой веб-сайт или в блог, тогда случай сложности остается в силе. Оба редактора имеют отличные возможности для встраивания, и выбор должен зависеть от сложности вашего проекта. CodePen, однако, может лучше поддерживать местами из-за его более длительного присутствия на рынке.

Наконец, если вы решите выбрать премиум-план, CodeSandbox даст вам больше за меньшие деньги. Но, опять же, если вы делаете это для социального взаимодействия, CodePen стоит своей цены.

Хотя CodeSandbox и CodePen находятся в центре внимания этого сравнения, я хотел бы упомянуть некоторые другие игровые площадки, которые также заслуживают внимания.

JS Bin

JS Bin — это очень простая площадка HTML + CSS + JS, похожая на Pens CodePen. Это позволяет вам выбирать из базовых препроцессоров, связывать внешние активы на основе CDN и встраивать ваши бинов (потому что они так их называют). Если вы хотите написать код еще быстрее, чем с помощью Pens, JS Bin — отличный вариант.

Целевая страница StackBlitz

Как и CodeSandbox, StackBlitz фокусируется на переносе опыта кодирования VS Code в Интернет. Таким образом, он имеет много общего с игровой площадкой, которую мы уже рассмотрели. Большой опыт редактирования, импорт репозитория GitHub и быстрое развертывание Firebase — это лишь некоторые из его преимуществ. Проект быстро растет, и вы можете проверить его.

Целевая страница Repl.it

Repl.it можно считать лучшим из CodeSandbox и CodePen вместе взятых.Большой опыт редактирования с помощью автодополнения, быстрого развертывания, интеграции с Git и обширных социальных функций и функций сообщества делают Repl.it полноценной платформой для программирования .

Комментарии, вызовы, посты - все что есть. Но что больше всего впечатляет в этом редакторе, так это то, что он не ограничивает себя веб-технологиями, позволяя вам играть со многими различными языками , такими как C++, Go, Rust, Python и другими!

Вот и все. Что вы думаете о сравнении? Может быть, есть какие-то другие игровые площадки для программирования, которыми вы хотели бы поделиться? Не стесняйтесь делиться своими мыслями в разделе комментариев ниже и делиться этим постом , если он вам нравится.

Для получения более актуальной информации следите за мной в Twitter, Facebook или через мой еженедельный информационный бюллетень . У меня также есть канал на YouTube, если вам интересно. Спасибо за прочтение этой статьи и хорошего дня!

Рекламные ссылки — посмотрите их, чтобы узнать больше интересного о программировании!

CodeSandbox — онлайн-площадка React Playground

Начало работы с React может быть сложным, особенно если вы хотите понять всю настройку.Такие решения, как create-react-app, скрыли большую часть этой сложности. Но это еще не все.

CodeSandbox от Ives van Hoorne продвигает проблему в Интернете. Вместо того, чтобы настраивать проект React каждый раз, когда вы хотите поэкспериментировать, вы можете вместо этого использовать его сервис. Читайте дальше, чтобы узнать больше.

Меня зовут Айвс ван Хорн. Я изучаю компьютерные науки в Университете Твенте и частично занят разработчиком в Catawiki. В прошлом году я работал там полный рабочий день, в то время я отвечал за перевод сайта на React.

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

CodeSandbox — онлайн-редактор для проектов веб-разработки. Он автоматизирует для вас такие вещи, как транспиляция, объединение и управление зависимостями, поэтому вы можете легко создать новый проект одним щелчком мыши. Редактор также имеет предварительный просмотр в реальном времени, поэтому вы можете видеть результаты своей работы во время ввода.

Делиться очень просто; вы можете просто поделиться URL-адресом вашего проекта или вставить его в iframe. Затем другие могут разветвить его, чтобы отредактировать проект по своему вкусу. CodeSandbox в настоящее время фокусируется на проектах React, а это означает, что он поддерживает такие функции, как загрузка в шаблон create-react-app .

Это пример проекта на CodeSandbox, это классический пример TodoMVC в Redux:

CodeSandbox по своей сути состоит из двух частей: редактора и превью.Редактор — это все приложение CodeSandbox (файловый менеджер, редактор кода, настройки зависимостей), а предварительный просмотр — это результат, который вы видите справа. Эти две части очень развязаны и общаются только с помощью postMessage . Предварительный просмотр находится на поддомене ( sandbox.codesandbox.io ) в iframe, чтобы буквально «изолировать» предварительный просмотр вдали от основного приложения.

Редактор и предварительный просмотр

Редактор отправляет все свои файлы, каталоги и зависимости на предварительный просмотр; это происходит либо когда пользователь что-то меняет, либо когда загружается приложение. Затем предварительный просмотр берет все эти файлы и обрабатывает каждый тип с помощью разных загрузчиков, которыми в настоящее время являются CSS, JavaScript, JSON или HTML. Эти загрузчики могут быть очень простыми, например, загрузчик JSON является однострочным:

.

  модуль экспорта по умолчанию => JSON.parse(module.code);
  

Загрузчик JavaScript, безусловно, наиболее интересен, так как этот загрузчик также должен транспилировать, запрашивать и кэшировать результат. Сначала он транспилирует код, используя babel ; затем он оценивает переданный код с заглушенной функцией require .

Эта функция require просто берет путь, проверяет, является ли это зависимостью npm или файлом, и снова обрабатывает его с помощью загрузчика для этого расширения. Каждый результат кэшируется, поэтому в большинстве случаев после изменения снова оценивается только отредактированный файл.

Выход загрузчика проходит через шаблон , этот шаблон определяется выходом. Шаблон — это просто отдельный файл, который что-то делает с выводом загрузчика, например, шаблон для возвращенных компонентов React:

.

  импортировать React из 'реагировать';
импортировать {рендеринг} из 'реагировать-дом';



функция экспорта по умолчанию (evaluatedModule, domChanged) {
  если (!domChanged) {
    константный узел = документ.создатьЭлемент('div');

    document.body.appendChild (узел);

    оказывать(
      React.createElement(evaluatedModule.default),
      узел
    );
  }
}
  

Этот шаблон отображает вывод компонента React в DOM, если он вообще не меняет DOM. Я хочу, чтобы другие могли также создавать и совместно использовать загрузчики/шаблоны, но это требует некоторого размышления, потому что мы все еще хотим поддерживать совместимость create-react-app .

Зависимости npm обрабатываются отдельным сервером; Я называю это «комплектовщиком».Редактор отправляет ему список зависимостей, сборщик затем создает UMD-сборку этой комбинации с помощью webpack 2 и отправляет обратно объект, содержащий URL и манифест.

Манифест — это объект с сопоставлением имени зависимости с номером модуля, поэтому загрузчик JavaScript знает, какой модуль нужно загрузить из сборки UMD, когда требуется зависимость.

CodeSandbox — один из немногих редакторов, который поддерживает зависимости npm и несколько файлов/каталогов. Он также обрабатывает почти все в браузере, что позволяет нам отображать обратную связь в реальном времени без какой-либо связи с сервером.

Это разница в функциях, но я думаю, что настоящая разница по сравнению с другими редакторами заключается в цели. Мы хотим, чтобы другие могли импортировать вашу песочницу в качестве зависимости. Таким образом, вы можете не только редактировать чужие работы, но и использовать их в своих проектах. Эта функция еще не реализована полностью; Мне все еще нужно закончить пользовательский интерфейс для него.

Я начал думать о CodeSandbox прошлым летом, когда был в отпуске в Сент-Айвсе. Несколько коллег задавали мне вопросы о проекте React, над которым мы работали, но у меня не было простого способа ответить на них. Вопросы либо были связаны с библиотекой, либо были настолько сложными, что их было очень сложно показать, например, в Codepen.

Вот тогда я и подумал: «Чувак, было бы здорово просто иметь онлайн-редактор, который мог бы это делать». Я начал работать над этим в свободное время, и в конце концов ко мне присоединился мой друг Бас Буурсма.

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

Он также включает очень востребованную функцию: удаление песочниц. Удаление в настоящее время невозможно, а также очень раздражает, у меня сейчас 38 песочниц, и я бы хотел удалить ненужные.

Это текущий дизайн для нового вида профиля:

Вид профиля

После улучшения поддержки поиска и совместного использования песочниц в CodeSandbox я могу работать над «импортом в виде библиотеки». Я в восторге от этой функции и хотел бы создать ее раньше; просто мне сначала нужно построить фундамент для этого.

Я также изучаю способы использования вашего редактора для создания вещей в CodeSandbox; Я рассматриваю такие вещи, как установка CodeSandbox в качестве интеграции git remote/Github или возможность синхронизации локальных файлов. Однако синхронизация все еще очень расплывчата и не изучена, поэтому в этом нет уверенности.

В этом динамичном мире очень трудно предположить, в каком направлении мы движемся. Я думаю, что React и другие фреймворки для веб-приложений, такие как Vue, в этом году получат гораздо большее распространение.

Я заметил значительный рост интереса к Vue, и в последнее время многие компании переходят на React. Интерес автоматически означает, что больше людей будут заходить в CodeSandbox либо для того, чтобы узнать что-то, попробовать что-то или создать пример для того, чтобы задать вопрос.

Мой большой вопрос заключается в том, будут ли люди использовать CodeSandbox для создания проектов, либо для совместного использования, либо для начала чего-то серьезного. Подводя итог: я думаю, что веб-фреймворки и, как следствие, CodeSandbox будут сильно расти, большой вопрос для CodeSandbox заключается в том, в каком направлении это будет развиваться.

Старайтесь не перегружаться! Это легче сказать, чем сделать, поэтому, если вы перегружены задачей, разумно разделить ее на более мелкие, более управляемые подзадачи. Делайте это шаг за шагом.

Я также рекомендую учиться, просто начав личный проект. Создание чего-то, что вам нравится и чем вы можете поделиться, — это отличная мотивация, и эта мотивация помогает преодолеть множество препятствий на этом пути.

Кристиан Альфони, создатель WebpackBin (ныне несуществующего) и Cerebral.Работать с ним было круто. Он близок к выпуску новой версии контроллера состояния под названием Cerebral.

Примечание редактора: Ранее я брал у Кристиана интервью о Cerebral.

Я изучил React с помощью SurviveJS! Отличная книга, очень помогла мне понять React.