Js песочница онлайн: Attention Required! | Cloudflare

Как пользоваться CodePen: подробное руководство для новичков

CodePen — онлайн-редактор для фронтендеров. Это песочница, в которой можно работать с HTML, CSS и JavaScript. Читайте подробное руководство по этому инструменту.

Кому и когда может пригодиться CodePen

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

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

Как пользоваться CodePen: базовые настройки и возможности

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

После регистрации создайте новый пен: нажмите кнопку Pen в меню.

Создаём новый пен

На странице пена есть четыре окна: для HTML, CSS, JavaScript, а также окно превью. Писать код можно сразу после создания пена.

Пен готов к работе

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

Выключаем автообновления

В настройках HTML, CSS и JS при необходимости подключите препроцессоры, фреймворки и библиотеки, которые планируете использовать.

Подключаем библиотеку Watch.js

В меню Pen Details можно указать название, описание и теги. Метаданные помогут другим пользователям находить ваш пен. В меню Editor доступны настройки отступов. Расширенные настройки редактора доступны в разделе Settings личного профиля.

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

Запускаем пен повторно, чтобы посмотреть превью после внесения изменений

В меню Change View можно выбрать предпочтительный лэйаут, переключиться в полноэкранный режим или режим отладки.

Выбираем режим и лэйаут

Владельцам PRO-аккаунта в CodePen доступны режимы с расширенными возможностями:

• Live View — демонстрация пена в режиме реального времени.
• Collab Mode — режим групповой работы над пеном.
• Professor Mode — режим для преподавателей.
• Presentation Mode — режим для демонстрации пена с помощью проектора.

«Продвинутые» режимы доступны владельцам PRO-аккаунта

Чтобы получить доступ к консоли, нажмите на соответствующую кнопку в левом нижнем углу экрана. Консоль можно очистить с помощью кнопки Clear.

Работаем с консолью

Владельцам PRO-аккаунтов доступна возможность использовать в пене загруженные изображения, а также файлы CSS и JavaScript. Чтобы загрузить изображение или файл, нажмите кнопку Assets в левом нижнем углу экрана.

Загрузка фото и других файлов

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

Начните изучать разработку с бесплатного курса «Основы современной вёрстки». Вы научитесь создавать статические веб-страницы, стилизовать элементы, использовать редакторы кода с полезными расширениями. В конце курса вы опубликуете свой первый сайт на GitHub Pages.

Как работать с чужими публикациями, экспортировать и встраивать пены

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

Кнопка Embed в правом нижнем углу экрана позволяет встроить пен на сайт. Встраивание доступно в нескольких режимах: HTML, iframe, Prefill Embed и шорткат для WordPress.

Встраиваем пены

В меню Export есть несколько вариантов экспорта пена. Экспорт доступен в виде архива с кодом или GitHub Gist. Владельцы PRO-аккаунта могут экспортировать архив с приложением, а затем запустить пен на локальном сервере.

Кнопка Share позволяет поделиться пеном в соцсетях или отправить ссылку на пен на свой телефон с помощью sms.

Полезная функция: вы можете поделиться ссылкой не на весь пен, а конкретно на код в окне HTML, CSS или JavaScript. Для этого в меню Change View выберите соответствующую опцию.

Прямые ссылки на код

Как работать с редактором проектов, писать посты, создавать коллекции

Редактор проектов доступен на условиях бета-тестирования. На бесплатном тарифе пользователь может создать один проект. На профессиональном тарифе ограничений нет.

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

Интерфейс редактора проектов

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

Возможности для блогеров

Пены можно организовывать в коллекции. Чтобы создать коллекцию, нажмите кнопку Collection в меню. Чтобы добавить свой или чужой пен в коллекцию, нажмите кнопку Add to collection в правом нижнем углу экрана и выберите нужную коллекцию.

Добавляем пен в коллекцию

Читайте также

Обзор популярных школ программирования: личный опыт, плюсы, минусы и фейлы

Социальные возможности CodePen: как настроить личный профиль и следить за интересными людьми и темами

CodePen позиционируется в качестве социальной среды для веб-разработки. То есть эта платформа сочетает характеристики онлайн-песочницы для тестирования кода и социальной сети.

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

Организуйте портфолио

Перетяните лучшие пены в раздел Showcase.

Выберите лучшие работы и отправьте их в портфолио

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

Следим за активностью пользователей

В разделе Explore можно найти интересный контент. Например, в Popular выводятся популярные публикации, в Following можно посмотреть публикации пользователей, на которых вы подписаны. В Topics можно выбрать интересные вам темы.

Ищем контент по интересам

В разделе Grow можно найти работу или сотрудников. Для этого выберите пункт Job. Список вакансий открыт для всех пользователей. Объявление о поиске сотрудников — платная функция, стоимость составляет 299 долларов за 60 дней.

Ищем работу и работников на CodePen

В разделе Grow — Challenges каждую неделю появляются новые челленджи для фронтендеров. Лучшие решения администрация CodePen закрепляет на главной странице. Это позволяет авторам заявить о себе и увеличить количество подписчиков.

CodePen: больше чем песочница кода

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

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

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

27 октября 2011

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

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

Первый вопрос, который приходит на ум, перед использованием «песочниц» — почему нельзя использовать локальные инструменты? Чтобы ответить на этот вопрос, зададим его несколько иначе: «Какие плюсы есть у sandbox-сервисов по сравнению с локальными инструментами?». Как ни странно плюсов достаточно много:

• Простота и оптимизация сервисов для работы со сниппетами: перечисленные ниже сервисы не являются полноценными средствами разработки и предназначены только для работы с небольшими фрагментами кода.
• Работа из браузера: для разработки не понадобится устанавливать специальные программы, что позволяет использовать «песочницы» на любом компьютере, где установлен браузер и есть доступ к интернету.
• Бесплатный доступ: все без исключение сервисы бесплатны, кроме того многие имеют открытый исходный код, как например JS Bin или JS Fiddle.
• Панель предварительного просмотра: после написания кода в специальной области отображается результат, каким бы он выглядел в браузере.
• Работа с клиентским кодом: сервисы могут обрабатывать не только HTML и CSS, но и JavaScript и его фреймворки (jQuery или Mototools).
• Возможность сохранения: большинство сервисов позволяют сохранять созданный код, например, для дальнейшей разработки на своем компьютере. Также можно загружать собственные сниппеты и работать с ними онлайн.
• Совместная разработка: функция, позволяющая работать над исходным кодом совместно, а также передавать его другим разработчикам.

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

Кроме уже описанных нами возможностей следует отметить, что CSSDesk, в отличие от остальных сервисов, умеет работать только с HTML и CSS кодом, а для работы с Jsdo. it придется зарегистрироваться. В остальном функционал «песочниц» очень схож и отличается лишь мелкими деталями и внешним видом. После непродолжительно работы со всеми инструментами, мы рекомендуем, в первую очередь, поработать с Tinkerbin или JS Fiddle, несмотря на то, что окончательный выбор, конечно же, остается за вами.

Как подключить и установить 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 для начинающих» здесь.

тестируем код прямо в браузере

Почти все разработчики рано или поздно сталкиваются с необходимостью запустить или быстро проверить какой-то код, но не все знают, что для такой простой задачи совсем не обязательно запускать тяжёлые десктопные IDE или прикладные компиляторы. Достаточно воспользоваться онлайн-инструментами, которые позволяют всё сделать намного быстрее: Ctrl+C, Ctrl+V, Run, вжух — и вывод программы уже перед вашими красноватыми глазами.

Мы отобрали лучшие онлайн-компиляторы: некоторые из них довольно универсальны, другие заточены под строго определённые задачи. В любом случае лишними они не будут.

Koding

Koding.com не является онлайн-компилятором в привычном смысле. Каждый пользователь сервиса может создать в облаке несколько полноценных виртуальных машин под управлением Ubuntu 14. 04, на которых может сделать всё, что пожелает, в том числе — скомпилировать код. Все популярные языки поддерживаются по умолчанию, но вы с лёгкостью сможете добавить свои.

Кроме панели управления своим сервером, в интерфейсе доступна удобная IDE и окошко терминала. Koding является самым универсальным средством, далее мы рассмотрим более простые и специализированные варианты.

IdeOne

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

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

Для тех, у кого нет девушки, создатели предусмотрели компиляцию кода на языке Brainfuck.

JDoodle

Ещё один онлайн-компилятор, который поддерживает множество языков, в том числе и тех, которые вы не найдете во многих других онлайн-компиляторах. Приятной особенностью JDoodle является возможность совместной работы — просто отправьте ссылку на вашу текущую сессию и плодите баги с двойной скоростью!

jsFiddle

Пусть название вас не обманывает — jsFiddle создан не только для JavaScript. Этот онлайн-редактор для фронтенда позволяет проверить любое сочетание JavaScript, HTML и CSS. Разумеется, есть поддержка разных фреймворков, например, jQuery, Vue, React, TypeScript, а также CSS-препроцессоров вроде SCSS. Для удобства вы можете выбрать привязку клавиш из любимого редактора. Правда, только в том случае, если ваш любимый редактор — Vim, Emacs или Sublime Text.

CodePad

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

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

Из минусов можно назвать полное отсутствие подсветки синтаксиса при вводе кода в форму. Впрочем, при просмотре уже сохранённой записи подсветка присутствует.

GCC GodBolt

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

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

SandBox и PHPFiddle

И SandBox, и PHPFiddle позволяют в один клик запустить PHP код и следом получить его вывод. Но несмотря на одно и то же предназначение, они имеют различия, которые могут стать критичными в той или иной ситуации.

PHPFiddle имеет более удобный и современный дизайн, на нём установлена актуальная версия PHP, а также есть возможность форматировать вывод скрипта HTML-разметкой.

SandBox же, кроме использования самой последней версии языка, даёт пользователю возможность выбрать версию самостоятельно. Это может быть полезно, если вам, например, нужно проверить свой код на обратную совместимость.

[Из песочницы] Создание браузерных 3d-игр с нуля на чистом html, css и js. Часть 1/2

Современная вычислительная техника позволяет создавать классные компьютерные игры! И сейчас, достаточно популярны игры с 3d-графикой, так как, играя в них, ты окунаешься в вымышленный мир и теряешь всякую связь с реальностью. Развитие интернета и браузерных технологий сделало возможным запускать головоломки и стрелялки в любимом Хроме, Мозилле или еще в чем-то там (про Эксплорер помолчим) в онлайн-режиме, без загрузки. Так вот, здесь я расскажу о том, как создать простую трехмерную браузерную игру.

Выбор жанра, сюжета и стилистики игры является достаточно интересной задачей, и от решения этих вопросов может зависеть успех игры. Кроме этого, свои нюансы вносит и выбор технологии, на основе которой будет создаваться продукт. Моя цель – показать элементарные основы этого увлекательного процесса, поэтому я буду делать 3-мерный лабиринт с незамысловатым оформлением. Более того, я это сделаю на чистом коде без использования библиотек и движков, типа three.js (хотя большие проекты лучше делать все-таки на нем), чтобы показать, как можно создать движок для своих нужд. Полностью самописная игра может быть оригинальной, а потому интересной. В общем, оба подхода имеют свои плюсы и минусы.
Читать дальше →

Источник: Уроки CSS на Хабрахабре

Уважаемые посетители,

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

Наш специалист ответит вам в течении суток.

13 июля 2020 
0  
299  
Уроки CSS на Хабрахабре, habrahabr.ru, CSS, JavaScript, Программирование, Разработка игр, HTML, 3d-игры, html, css, javascript,  
Версия для печати

Онлайн сервисы.Песочницы онлайн для Вас.Только полезные онлайн сервисы

Онлайн сервисы

Добрый день дорогие друзья!

Сегодня я хотел бы поделится с Вами очень полезными для веб-разработчика — онлайн сервисами. За частую написание кода отнимает огромное количество времени.  И очень часто случается, что нужно проверить вашу идею быстро и поделится результатом с друзьями или коллегами. Вот тут то и понадобятся наши инструменты.В этих песочницах вы запросто можете быстро протестировать ваш HTML, CSS или JS и отправить его моментально. Приступаем к обзору…

1. jsFiddle

jsFiddle — это пожалуй самый популярный вариант онлайн песочницы. В моем списке он тоже идет первым вариантом из за его отличного UI, Быстроты и функционала.

Плюсы:

Для меня тут просто гора плюсов:

— удобный интерфейс;

— Окно поделено на 4 части: JS,HTML,CSS и предпросмотр.

— Легкая настройка JS и CSS панели. Используйте ваши любимые инструменты;

— поддержка синтаксиса Sass SCSS и CoffeScript;

— Есть авторизация. Просмотр ваших прошлых сохраненных работ;

— Автоматическая чистка «грязного» кода;

— Быстрое подключение JS библиотек (JQuery, MooTools и т.д. )

Минусы:

Минусом является отсутствие автоматического обновления окошка предпросмотра. Это пожалуй и все=)

2. CSSDesk

CSSDesk — очень простая в понимании и довольно давняя песочница для написания HTML и CSS.

Плюсы:

У этой песочницы большое количество положительных оценок. Окно поделено на три части: HTML, CSS и предпросмотр  Размеры окон легко изменяются. очень просто начать использовать. Открыли и он готов к использованию. Подсветка синтаксиса, нумерация строк.

Минусы:

Отсутствует JS. Для тру кодеров это очень важный элемент.

3.Tinkerbin

Tinkerbin — брат близнец jsFiddle.  Но в отличии от своего «старшего брата», Tinkerbin не имеет такого же функционала, которые доступны вам в jsFiddle. Но имеет несколько своих собственных хороших плюсанов.

Плюсы:

— удобный вкладочный интерфейс. HTML, CSS и JavaScript разбиты по вкладкам. И вы со спокойной душой можете работать конкретно с каждым по отдельности.

— Tinkerbin обошел jsFiddle по количеству альтернативных синтаксис вариантов. Вы можете выбрать HTML или HAML, CSS, SCSS (с Compass), SASS или LESS, JavaScript  или CoffeeScript. Этот вариант лучший для вас если вы работать будете с препроцессорами.

— позволяет увидеть Ваш код через окно «View Source».

Минусы:

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

Парочка интересных ссылок:

PractiCode — Используем как песочницу.

Pastebin.me — Очень рекомендую данный сервис.

Jsdo.it — Еще одна песочница.

Tryit Editor Instant — для тестирования  ваших HTML документов.

Google Code Playground — Работаете с Google Api? Тогда полезно для Вас!

JavaScript Sandbox — Песочница для JavaScript

Вот мы и расмотрели известные мне онлайн сервисы. Если Вы знаете другие — милости пишу в комментарии. Подписывайтесь на мой блог, комментируйте. Всего доброго. До связи!

[Из песочницы] Node.js + HTML5 + js = online action game

Давно задавался вопросом, а почему же написание онлайн игр на node.js является таким редким явлением, особенно на хабре? Ведь какие дифирамбы пели ноде при ее появлении, и сколько пророчили хорошего (или нехорошего) сей платформе, а новых продуктов что-то не сильно прибавляется.

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

Краткая предысторияБудучи студентом 4-го курса кибернетики, я получил от преподавателя по программированию предложение поучаствовать в конкурсе, проводимом ШАГ-ом и еще несколькими компании в совместительстве. Конкурс «Золотой байт» проводится не первый год и я подумал, что это замечательная возможность опробовать себя на поприще игростроения. Имея опыт работы 1,5 года в веб-студии в качестве разработчика (php, js, html, ну все как обычно), я решил долго не колебаться и подал заявку в номинацию «Game design». Благо у нас с другом (художник-любитель), были наработки (в мыслях) о концепции браузерной игры.Поехали!
Суть игры вкратце.Браузерный тайм киллер. Две команды пластиковых солдатиков бегают по компьютерному столу и уничтожают друг друга, борясь за владение столом. Команда побеждает набрав определенное количество убийств. Управление: WASD+мышь.

Дизайн-документ был составлен за пару дней, отправлен и одобрен жюри конкурса. К этому моменту я уже определил платформу, на которой будет основываться серверная часть, клиент, в общем, основную архитектуру. Решение было принято в пользу Node.js (сервер), js + html5 (клиент). Данные о карте, предметах, доступных юнитах хранятся в xml формате и лежат на сервере.

Наброски юнитов рисовались пока я пилил код.

Особенности и предысторию к игре тут выкладывать, думаю, не уместно.

Логика
Итак, перед мной встало несколько проблем реализации, и поскольку с нодой я до сих пор дел не имел, пришлось подстраиваться под обстановку.В качестве способа связи клиент-сервер я выбрал Web sockets, подключил socket.io, пару шаманств и танцев и вуаля, коннект есть. Первые наброски а-ля передвижение и синхронизация проводились с отрисоваными коряво в пеинте картинками (для наглядности).

Данные летают в json формате.

Процесс происходящего в бэкграунде был примерно таков.

Пользователь заходит на сайт, получает первичные данные о карте, всю необходимую служебную информацию, first packet.
Пользователь видит главный экран. — Загрузка необходимых картинок (preload).
Пользователя анонимно коннектит socket.io с сервером, регистрирует его в сесию.
Пользователь выбирает за какую сторону он будет играть — отсылается запрос, ставится пометка о стороне.
Пользователь выбирает за какого персонажа он будет играть — отсылается запрос, ставится пометка о персонаже.
Игрока помещают на точку респауна, исходя из настроек карты.
Начинается процесс обмена данными с сервером, ну и сама игра (ниже алгоритм).
Алгоритм синхронизации действий был придуман следующий:

На сервере стоит интервал, 50 мс, который отсылает всем подключенным юзерам необходимую инфу, о местоположении и действиях игроков.(отсылается список объектов игроков).
У пользователей стоит catch-event на сообщения и когда они его ловят, проверяют какой именно пакет пришел, main/first/system и т.д. В ответ от пользователя летит пакет с текущим действием юзера. Летят только нажатые клавиши, все вычисления происходят на сервере (можно ли туда пойти, где окажешься и т.д. и т.п.).
И так по кругу.

Отрисовка
В качестве поля для отрисовки я использовал canvas. После недолгого просмотра популярных библиотек, я подумал что я все же делаю это больше для себя, а не для конкурса. А ведь куда приятнее писать свой велосипед, особенно в новой для меня сфере, так что было принято решение писать свой небольшой движок отрисовки. Ну и как полагается, в ход пошли setInterval, requestAnimationFrame, и все знания, что остались по геометрии и элементарной алгебре.После отрисовки бэкграунда выбиралась та активная область экрана, которую видно пользователю, минус разница в площади отрисовываемого объекта. В данном периметре производится рендеринг активной зоны. На сервере все регулярно сортируется по мере дальности от экрана (по высоте), чтобы картинка солдата стоящего дальше не накладывалась на солдата, стоящего ближе к экрану.

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

Итак, на данный момент у меня было готово:

Отрисовка юнитов с анимацией
Отрисовка предметов
Неровные страницы стола (невозможность пройти за них)
Передвижение по карте
Спрайты юнитов были отрендерены в 3Dmax и склеены вместе. Выглядело это вот так (кликабельно):

Ну и, конечно же, боевка
Боевая часть реализована достаточно просто. При клике левой кнопкой мыши по полю, персонаж разворачивается в ту сторону и бьет. Правая кнопка мыши — блок в сторону по направлению мышки. У персонажа есть определенные характеристики, которые обуславливают его скорость/живучесть/усталость/дальность_удара/дмг и т.д. И опять же, все вычисления происходят на сервере, игроку приходит только результат его нажатия на клавиши.

Немного служебной информации/статистики
Сервер VPS за 5 евро в месяц: CPU 1200 Mhz, ОЗУ 256Мб, ОС Debian.Карта 3000 на 3000 (одномерный массив с последующим преобразованием). При старте сервера инициализируется, занимает 900 мс. Когда был двумерным массивом, занимал 6500 мс.

5Мб канал клиента. 40 подключений (20 на 20). Обеспечивался обмен данными и поддерживался постоянный фпс без проседаний 30–60.

Еще немного картинок:
Главный экран:

Отскроллили колесиком мыши:

Победа синей команды:

Кроссбраузерность предусмотрена для Chrome, Mozilla, Opera, Explorer 10+. В общем все, что поддерживает canvas и Websockets.

Так же была адаптированная версия для тех, кто зашел с телефона (интерфейс не допилен, но работает).

Итог
Вся работа заняла около полутора месяца трудов после учебы и работы.Ссылку на игру не дам, бедный сервер не выдержит хабраэффекта, да и не готов я еще к нагрузочному тестированию.На конкурсе в своем городе мы с другом заняли 2-е место, что в принципе не расстроило меня, а лишь подстегнуло. Игру делал скорее для себя, но в будущем, возможно переделаем графику, и можно будет выкладывать в общий доступ, но об этом говорить еще рано.Для тех, кто хочет посмотреть мой корявый код, вот репозиторий на git. Только не плюйтесь, уже сейчас вижу, на сколько все коряво, хотя делал всего пол года назад: https://github.com/amikstrike/wn

Спасибо за внимание!

© Habrahabr.ru

7 игровых площадок для JavaScript для использования в 2019 году — Scotch.io

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

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

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

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

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

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

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

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

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

Интеграция с Github
С помощью Codesanbox 2.0 вы можете фиксировать, создавать репозитории и открывать запросы на вытягивание прямо из CodeSandbox.

Хост статических файлов
CodeSandbox хранит для вас все файлы в общедоступном каталоге. Раньше этой функции не было в CodeSandbox, но теперь вы можете добавлять статические изображения, веб-работников и т. Д.В результате вы можете имитировать все функции вашего локального сервера разработки, поскольку теперь у вас есть полный доступ к файлу index.html .

Реальный — временное сотрудничество
С CodeSandbox вы можете создать проект и открыть Live Session , чтобы сгенерировать живой URL-адрес, которым вы можете поделиться с коллегами. Через URL-адрес все ваши коллеги могут работать над проектом одновременно. Это может показаться трудным, когда число растет, и вы не можете отслеживать, что делает каждый человек. В результате вы можете переключиться в Classroom Mode , где вы можете указать, кто может редактировать песочницу, а кто может только просматривать.

Интеграция кода Visual Studio
CodeSandbox имеет функцию VSCode в браузере. Он позволяет вам получить доступ к функциям VSCode, таким как привязки клавиш, пользовательские фрагменты, хлебные крошки и т. Д. Все, что вам нужно сделать, это скопировать файлы настроек прямо из VSCode в CodeSandbox, и вы получите контроль над всеми файлами в вашей песочнице. Это лишь некоторые из функций, которые вы получите с CodeSandbox, есть и другие, такие как работа в командах, контейнеры Sandbox и т. Д.Я приглашаю вас проверить их страницу документации, чтобы узнать больше.

Внутренняя поддержка

Стоит отметить, что CodeSandbox — одна из немногих онлайн-площадок, которая поддерживает такие языки, как Node.js. Что еще? Имеет поддержку npm. В результате вы можете установить любой пакет npm за секунды.

StackBlitz — это онлайн-площадка на базе VSCode для веб-разработчиков. Он предлагает разработчикам возможность создавать проекты одним щелчком мыши. Функции совместной работы StackBlitz позволяют делиться созданным проектом с коллегами через уникальный URL-адрес проекта. Полная настройка проекта
Как и другие игровые площадки, о которых мы уже говорили, StackBlitz автоматически берет на себя все фоновые процессы, связанные с настройкой проектов; например, установка зависимостей, компиляция, связывание и т. д. Таким образом, процесс установки абстрагируется для вас, так что вы можете сосредоточиться на том, что у вас получается лучше всего, — на написании кода. Stackblitz известен своей способностью обрабатывать проекты Angular и React, все, что вам нужно, чтобы настроить новый из них, — это нажать кнопку.

VSC Сходство кода
Поскольку VSCode поддерживает StackBlitz, он поставляется со всеми эстетическими функциями, которые нам нравятся в VSCode, что дает вам внешний вид вашей локальной IDE.

Поддержка TypeScript
StackBlitz имеет поддержку TypeScript и автозаполнение TypeScript — функцию, которой нет в других IDE, таких как Plunker.

Поддержка NPM
С помощью StackBlitz вы можете импортировать любой пакет npm в свой проект, как и в VSCode. Более того, вы можете скопировать фрагменты со страниц документации и блогов в редактор, и он автоматически обнаружит отсутствующие пакеты и предложит вам их установить.

Изображение предоставлено Эрику Саймонсу.

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

##

JSFiddle — это онлайн-площадка для создания, тестирования и демонстрации совместных фрагментов кода HTML, CSS и JavaScript, известных как «скрипки».Это одна из первых игровых площадок, положившая начало созданию других современных детских площадок. На данный момент это может показаться немного базовым по сравнению с современными игровыми площадками, такими как CodePen; однако он по-прежнему выполняет основные игровые операции, такие как тестирование, совместное использование и совместная работа. В качестве дополнительного преимущества JSFiddle также может выполнять сложные симуляции ajax.

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

Несмотря на то, что JSFiddle ведет себя так же, как и другие игровые площадки, у него есть определенные особенности, которые делают его по-своему уникальным. В отличие от большинства других, с JSFiddle вы можете легко настраивать, добавлять и использовать другие инструменты и фреймворки JavaScript. Благодаря поддержке Togetherjs JSSFiddle предлагает интерактивный пользовательский интерфейс, который позволяет пользователям сотрудничать и обмениваться скрипками с коллегами. Более того, он имеет встроенную поддержку Git.
Вы также можете использовать JSFiddle для любого из следующего:

• Отчет об ошибке (тестовый пример) для проблем Github
• Представление ответов кода на переполнении стека
• Совместная работа с живым кодом
• Хостинг фрагментов кода

JSBin — это живая площадка для Html, CSS и JavaScript, а также ряда других препроцессоров, таких как jade, markdown и многие другие.Он предоставляет специальные панели редактора с интуитивно понятным пользовательским интерфейсом для взаимодействия с пользователем. С JSBin пользователи могут создавать подборки, публиковать, совместно работать и тестировать коды.

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

Хотя JSBin при запуске открывается в HTML-код по умолчанию, для вас доступно множество библиотек.Вы можете добавить столько библиотек, сколько потребуется вашему проекту для создания желаемого продукта.

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

• Экспортируйте свои бункеры как единое целое
• ящики для живой перезагрузки в редакторе и полный предварительный просмотр
• Загрузочные бункеры
• Сохранение снимков бункеров
• Ящики для шаблонов
• Архивные корзины
• и т. Д.

JSBin также имеет план PRO , который добавляет больше функциональности к вашим возможностям.Это дает дополнительный уровень функций для расширения функциональности вашей корзины. С JSBin PRO вы можете

• SSL встраивает
• Пользовательские настройки вставки CSS и редактора
• Sandbox mode — не сохраняет бин
• Личные места
• Dropbox
• Vanity URLs — сообщение в блоге
• Хостинг активов

Scrimba — это совершенно другой вид онлайн-игровой площадки, чем то, что мы видели до сих пор. Он предлагает вам возможность приостановить видео и отредактировать код инструктора и увидеть результат в редакторе.

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

Cross — платформа
Scrimba полностью кроссплатформенный.Он адаптируется к любому размеру экрана и упорядочивает содержимое как в портретном, так и в ландшафтном режиме в соответствии с требованиями к разрешению экрана, таким образом, он постоянно обеспечивает лучший визуальный результат.

Консоль и зависимости
В Scrimba есть встроенная консоль, к которой пользователь и инструктор могут получить доступ для выполнения команд и отладки кода. Вы можете регистрировать сообщения так же, как и в любом другом редакторе. Он также позволяет вам устанавливать в ваш проект внешние зависимости. Что лучше? команда Scrimba разработала консоль таким образом, чтобы вы могли видеть вывод консоли, открыв консольную панель.

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

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

Moreso, Liveweaver поддерживает широкий спектр сторонних библиотек, таких как Bootstrap, jQuery, Threejs и т. Д. Это помогает разработчикам создавать более надежные приложения без препятствий для поддержки библиотек.

Liveweave можно использовать бесплатно, и в него входит более 20 удобных библиотек JavaScript.С Liveweave вы можете делать все следующее и многое другое.

• Переключить предварительный просмотр в панели редактора
• Переключайте светлый и темный режимы для лучшего просмотра
• встроенная линейка для измерений и эстетики
• Легко сотрудничайте с коллегами с помощью функции TeamUp
• Легко загружайте плетения одним нажатием кнопки
• поддерживает SVG
• и т. Д.

В этом посте мы обсудили пять лучших онлайн-редакторов JavaScript, которые вы можете использовать в 2019 году.У каждой игровой площадки есть свои уникальные способности, поэтому выбрать «лучшую» среди них сложно. Однако мы можем выбрать тот, функции которого лучше всего соответствуют нашим потребностям.
Заявление об ограничении ответственности: пять обсуждаемых здесь онлайн-площадок — это полностью мой выбор, основанный на моем собственном опыте работы с ними.
Есть и другие удивительные онлайн-площадки, такие как Plunker, CSS Deck, Dabblet и т. Д. Если у вас есть другие игровые площадки, поделитесь ими с нами в комментариях ниже. Надеюсь, этот пост поможет вам выбрать наиболее подходящий для ваших нужд.

Понравилась эта статья?

Подпишитесь на @kenny_io в Twitter

25 игровых площадок для JavaScript для тестирования новых идей | Эми Дж. Эндрюс | JavaScript на простом английском

Для тестирования ваших новых идей или даже разработки целого продукта.

Фото Power Lai на Unsplash

Если вы хотите увидеть лучшие игровые площадки на JavaScript в одном месте, тогда этот пост для вас.

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

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

Официальный сайт: https://codesandbox.io

Как интерфейсный разработчик, вы, вероятно, слышали о Codepen. Он предоставляет несколько функций, которые помогут вам тестировать, разрабатывать и сотрудничать с другими.

Официальный сайт: https://codepen.io

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

Официальный веб-сайт: https://jsfiddle.net

Если вам нравится создавать свои отличные веб-сайты с помощью VSCode, вам также понравится StackBlitz.Фактически, он основан на VSCode и имеет функции, дающие вам возможность создавать свои проекты за секунду. Кроме того, вы также можете сотрудничать со своими коллегами, используя общий URL-адрес.

Официальный веб-сайт: https://stackblitz.com

JS Bin, простой пользовательский интерфейс и удобство использования, содержит список мощных функций, позволяющих максимально быстро создавать, тестировать и делиться своими идеями. Помимо JavaScript, HTML и CSS, также предоставляется множество других процессоров, таких как less, SCSS, JSX, TypeScript и т. Д.

Официальный веб-сайт: https://jsbin. com

Что отличает Liveweaver от других игровых площадок, так это то, что он предназначен не только для разработчиков, но и для дизайнеров, не имеющих навыков программирования. Как? Дизайнеры просто выполняют свою работу, проектируют и оставляют часть кодирования таким инструментам, как проводник CSS, проводник цвета и редактор векторной графики, которые генерируют код, соответствующий тому, что создают дизайнеры.

Официальный веб-сайт: https://liveweave.com

SourceLair имеет все необходимое для разработки продуктов для вашего веб-сайта.Вы можете использовать JavaScript для клиентской стороны, PHP для серверной и даже базы данных.

Официальный сайт: https://ide.sourcelair.com

Rendera — очень простая игровая площадка. Однако, если вы хотите быстро протестировать свой JavaScript, то вперед.

Официальный сайт: http://rendera.herokuapp.com

Playcode, быстрый и чистый, это быстрый и простой способ проверить ваш код.

Официальный сайт: https://playcode. io

Scrimba — это больше, чем просто редактор.Это онлайн-академия программирования. На каждом уроке вы видите примеры кода и слушаете, как инструктор объясняет, как работает код. Это позволяет вам просматривать видеоролики курса, называемые «сетками», при написании кода задания и мгновенно видеть результат.

Официальный веб-сайт: https://scrimba.com

Альтернатива для JS Fiddle и JS Bin для написания и обмена фрагментами кода.

Официальный веб-сайт: https://jsitor.com

Для работы с Web Maker вам не нужен Интернет.Кроме того, эта игровая площадка предоставляет отличное расширение для Chrome. Это то, что вам нужно, если вы ищете офлайн-редактор.

Официальный сайт: https://webmaker.app

LeetCode поддерживает не только JavaScript, но и 14 языков программирования. Это хорошее место, чтобы проверить и улучшить свои навыки программирования и расширить свои знания.

Официальный веб-сайт: https://leetcode.com

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

Официальный веб-сайт: https://repl.it

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

Официальный веб-сайт: https://flems.io

Не позволяйте названию обмануть вас. Дело не только в CSS. Он включает трех наших близких друзей — HTML, JavaScript и CSS.

Официальный сайт: http://cssdeck.com

Похоже, Dabblet фокусируется на части CSS, но вы также можете поиграть с HTML и JavaScript.

Официальный сайт: https: // dabblet.com

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

Официальный сайт: https://www.codeply.com

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

Официальный сайт: https://plnkr.co

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

Официальный сайт: https://glitch.com

Koding имеет чистый интерфейс и хорошо продуман. Готовая среда разработки сэкономит вам время при работе с Koding.

Официальный сайт: http://www.koding.com

Короче говоря, RunKit помогает вам попробовать любой пакет Node.js прямо в браузере.

Официальный веб-сайт: https://npm.runkit.com

Katacoda — это живая и интерактивная среда для демонстрации ваших продуктов сообществу. Это больше похоже на обучающую платформу с множеством языков, помимо JavaScript.

Официальный сайт: https://www.katacoda.com

Codeanywhere — мощная кроссплатформенная IDE. Если вы веб-разработчик, это будет идеальное место для вас.

Официальный сайт: https://codeanywhere.com

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

Попробовать онлайн

Что такое TIO?

TIO — это семейство онлайн-интерпретаторов для постоянно растущего списка практических и развлекательных языков программирования.

Чтобы использовать TIO, просто щелкните стрелку ниже, выберите язык программирования и начните вводить текст. После того, как вы нажмете кнопку запуска, ваш код будет отправлен на арену TIO, выполнен в изолированной среде, а результаты будут отправлены обратно в ваш браузер. Вы можете поделиться своим кодом, создав постоянную ссылку на стороне клиента, которая кодирует код и вводит непосредственно в URL-адрес.

Почему ТИО?

• TIO содержит практические и развлекательные языки программирования, всего языков.
• TIO слушает: языки и функции постоянно добавляются по запросу. Если у вас есть запрос или вы хотите сообщить об ошибке, используйте любой из способов связи, перечисленных ниже.
• Веб-приложение TIO предоставляется бесплатно, без рекламы и не использует файлы cookie для отслеживания или сторонние аналитические скрипты.
• Программное обеспечение, на котором работает TIO, имеет открытый исходный код (MIT), и его можно найти на github. com/TryItOnline.
• TIO отлично работает на мобильных устройствах.

Контакты

Если вы хотите поделиться своим мнением, запросить функцию, сообщить об ошибке или задать вопрос, посетите gitter.im / tryitonline или отправьте электронное письмо по адресу [email protected]. Кроме того, пользователи Stack Exchange с репутацией не менее 20 могут общаться в чате на talk.tryitonline.net.

Если вы хотите оставаться на связи и получать объявления и обновления статуса, вы можете подписаться на @Try_It_Online в Twitter.

Основные доноры

Дьялог
предоставляет среду разработки на основе APL, которая позволяет как профильным экспертам, так и ИТ-специалистам эффективно преобразовывать идеи в программные решения.

Пожертвования

Веб-сервер Try It Online и арены (где выполняется код пользователя) в настоящее время работают на трех отдельных серверах. TIO получает все больше и больше трафика, поэтому потребуются дополнительные арены. Кроме того, для постоянных ссылок на стороне сервера в конечном итоге потребуется отдельное хранилище. С вашей помощью я надеюсь обеспечить бесперебойную работу всех сервисов TIO.

биткойнов можно пожертвовать на адрес 1TryittLK3yAScCKavr5pg1eCZgpTdqYH. Это предпочтительный канал пожертвований.

По другим каналам пожертвований обращайтесь по адресу [email protected].

Рефералов

TIO работает на платформе DigitalOcean. Их виртуальные частные серверы доступны по цене, быстры, масштабируемы и (что наиболее важно) профессионально управляются.

Если вы ищете VPS и решили арендовать его у DigitalOcean, вы можете зарегистрироваться, щелкнув ссылку выше. Вы получите 100 долларов в качестве кредита DO за использование моей реферальной ссылки, и, как только вы потратите минимальную сумму на их продукты, я сам получу кредит в размере 25 долларов, чтобы покрыть расходы на свой сервер.

7 лучших игровых площадок для кода

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

Типичные особенности этих онлайн-площадок:

• Редакторы HTML, CSS и JavaScript с цветовой кодировкой
• окно предварительного просмотра — многие обновляются на лету без обновления
• препроцессоры HTML, такие как HAML
• LESS, SASS и предварительная обработка CSS для Stylus
• включение популярных библиотек JavaScript

Консоли разработчика

• и инструменты проверки кода
• обмен через короткий URL
• встраивание демонстраций на другие страницы
• разветвление кода
• нулевая стоимость (или оплата только премиальных услуг)
• демонстрирует миру свои навыки программирования!

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

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

Приз за самую красивую многофункциональную игровую площадку получает CodePen. Сервис, соучредителем которого является Крис Койер, выделяет популярные демонстрации («Ручки») и проекты, представляя собой онлайн-интегрированную среду разработки, которую вы можете использовать для создания и развертывания веб-проектов, функция, добавленная в марте 2017 года.Он предлагает расширенные функции, такие как совместное использование и встраивание перьев, добавление внешних библиотек JS и CSS, популярных препроцессоров и многое другое. Сервис PRO предлагает варианты кроссбраузерного тестирования, парного программирования и обучения всего от 9 долларов в месяц.

Это может называться CSS Deck, но это полноценная площадка для HTML, CSS и JavaScript с функциями общения и совместной работы. Он похож на CodePen (я не знаю, кто на кого повлиял!), Но вы можете предпочесть его.

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

Еще одна ранняя игровая площадка, Dabblet начала свою жизнь как демонстрационная система HTML5 / CSS3, созданная Леа Веру с возможностями JavaScript. Он выглядит великолепно и при необходимости автоматически исправляет весь ваш CSS.

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

Liveweave — еще один онлайн-редактор HTML5, CSS3 и JavaScript с возможностью предварительного просмотра в реальном времени. Он предлагает подсказки по коду для HTML5, CSS3, JavaScript и jQuery и позволяет загружать ваш проект в виде zip-файла.

Вы также можете довольно легко добавить в свою рабочую область внешние библиотеки, такие как jQuery, AndgularJS, Bootstrap и т. Д. Кроме того, Liveweave предлагает линейку, которая поможет вам кодировать адаптивный дизайн, и функцию «Team Up», которая имеет те же функции, что и совместное редактирование JSFiddle.

Другие опции

Конечно, есть и другие варианты. Мы скучали по твоему любимому? Расскажи нам об этом!

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

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

И если вы не хотите быть в сети, когда возитесь с кодом, но хотите что-то подобное, попробуйте что-нибудь вроде Web Maker (у нас есть статья об этом здесь).

Удачного кодирования!

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

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

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

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

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

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

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

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

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

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

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

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

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

Editor

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

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

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

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

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

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

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

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

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

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

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

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

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

Другое

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

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

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

Опять же, основное внимание 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, похожая на ручки 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, если вам интересно. Спасибо, что прочитали эту статью, и хорошего дня!

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

9 лучших онлайн-IDE и редакторов кода для разработки веб-приложений

Что еще лучше всего после программирования? Конечно же, редактор кода!

Редакторы кода — вторая по значимости причина войн между программистами (первая — форматирование кода).

Для кого-то Vim — единственный разумный редактор, когда-либо созданный, в то время как для других все, что не вписывается в головокружительный мир Emacs, похожий на Inception, заслуживает только насмешек. Если вы сильно ищете внимания, все, что вам нужно сделать, это пойти в сообщество программистов и начать обсуждение вроде «Почему я думаю, что X (выберите любой популярный редактор кода) — отстой / лучший», выпить пива и расслабиться.

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

Вопрос: почему?

Конечно, люди умудряются извлекать выгоду из всего, но я думаю, что редакторы кода особенно важны, когда дело касается программистов. Типичный программист тратит почти все свое время (более 98%, если бы я мог поспорить) на выбранный редактор кода. Они знают, что делать с редактором — его сильные и слабые стороны, ограничения, причуды и скрытые жемчужины.

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

Итак, какой редактор кода лучший?

Честно говоря, я даже не решусь туда пойти! 😀 😀

Однако, если вы занимаетесь веб-разработкой, я хочу, чтобы вы подумали об альтернативе — онлайн-редакторах кода ! Вы также можете называть их облачными редакторами кода.

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

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

Звучит странно, правда?

Я тоже так почувствовал, когда встретил их 3-4 года назад. Какого черта кому-то нужно отдавать все в тупой браузер?

Может ли он даже конкурировать с встроенным редактором кода?

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

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

Установка нуля

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

Напротив, после первой настройки онлайн-редактор не имеет ничего общего. Официальные сборки, обновления, ночные сборки, поддерживаемые платформы, архитектура системы, FTP-синхронизация, конвейеры CI / CD — все это не имеет значения, если у вас есть браузер!

Сотрудничество

Чаще всего вам нужно сотрудничать с другими разработчиками при решении проблем или отладке чего-либо.

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

Безопасность данных

Итак, очевидно, что сегодня ни один проект не обходится без контроля версий, что означает, что копия кода всегда существует в репозитории. Тем не менее, бывают случаи, когда контроля версий недостаточно:

• Вы забываете отправить только что созданные коммиты, и ваш ноутбук загорается.
• У вас есть другие важные файлы и дампы данных, с которыми взаимодействует ваш код, хотя они не являются частью живого приложения. Что с ними произойдет, если ваш ноутбук загорится?

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

Обеспечение дисциплины

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

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

То же самое касается табуляции и пробелов (или даже табуляции с двумя пробелами и табуляции с четырьмя пробелами) — вы наивны, если думаете, что программисты в вашей команде не будут скучать.

В таких случаях онлайн-редактор — благо — вы сами решаете настройки для проектов (даже то, как должен быть отформатирован код), а он просто откажется принимать работу, пока не будет соответствовать всем стандартам. Возможно, сурово для человека, но отлично для проекта!

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

JSFiddle

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

Он настолько популярен, что сайты вопросов и ответов, такие как StackOverflow, уже поддерживают встраивание ссылок JSFiddle непосредственно в свою платформу.

Для быстрого начала работы JSFiddle предлагает несколько шаблонов с самого начала; Это означает, что если вы хотите запустить демонстрацию, скажем, React, все, что вам нужно сделать, это нажать соответствующую кнопку и начать писать код. Как только вы нажмете «Сохранить», «скрипка» будет сохранена, и вы получите постоянный URL-адрес (ознакомьтесь с этой глупой скрипкой, которую я создал: https://jsfiddle. net/tuqd76c4/, и обратите внимание, что вы можете внести свои изменения и нажать Сохранить, чтобы создать новый версия этого URL).

Вот что делает JSFiddle жизнеспособной платформой для интерфейсной веб-разработки:

• Бесплатное использование (без скрытых комиссий или функций Freemium).JSFiddle поддерживает себя посредством рекламы (по крайней мере, на момент написания), и вы можете увидеть рекламу Adobe в нижнем левом углу скриншота выше.
• Функции совместной работы над кодом — идеально подходят для совместной разработки концепций, проведения собеседований и т. Д.
• Различные макеты, размеры шрифтов, светлые / темные темы и т. Д.
• Форматирование кода (приведение в порядок), предстоящая поддержка линтеров (CSS и JS) и многое другое.

А теперь рыдания, рыдания за плохое:

• JSFiddle — это чисто интерфейсный редактор.Нет возможности кодировать и запускать свой любимый серверный язык.
• Здесь нет понятия файлов и папок (или загрузок, если на то пошло). Все, что у вас есть, — это единое пространство для кода, независимо от того, сколько его там.
• JSFiddle нельзя использовать для размещения кода на вашем сервере. Код должен находиться на JSFiddle и постоянно быть общедоступным.
• Невозможно создать конвейер CI / CD, использовать Git и т. Д.

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

CodeSandbox

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

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

• Поддержка Npm: Да, вы можете добавить практически любой пакет, доступный на npm.
• Файлы, папки, модули: Вы можете разделить свой код на несколько файлов, добавить / удалить изображения из общей папки, а также создавать / импортировать модули по своему усмотрению. Рабочий процесс повторяет рабочий процесс современного сборщика модулей, поэтому вам не нужно (почти) ничего настраивать.
• Поддержка TypeScript, горячая перезагрузка, экспорт GitHub, хостинг статических файлов и т. Д.
• Он основан на редакторе Monaco , том же самом, что и любимый редактор VSCode. Это дает вам такие мощные функции, как «Перейти», «Найти ссылки» и необходимый рефакторинг!
• Поддержка сниппетов для Emmet
• Интегрированные DevTools, линтинг, наложения ошибок, среды тестирования (Jest), привязки клавиш и многое другое.
• Мощный интерфейс командной строки для прямого импорта локальных проектов в CodeSandbox.

Хотя бесплатная версия CodeSandbox не поддерживает частный код, вы можете получить эту функцию (и увеличить ограничения на размер в целом), помогая им на Patreon всего за 5 долларов в месяц (платите сколько хотите, до 50 долларов в месяц. ).

CodeAnywhere

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

Не так с CodeAnywhere.

В лучшем случае CodeAnywhere имеет две особенности, которые мне особенно выделяются:

• Готовые образы контейнеров для 72+ языков программирования и фреймворков. Это означает, что вы можете создать новую среду разработки прямо из редактора! Конечно, код автоматически размещается во вновь созданном контейнере, и файлы обслуживаются непосредственно оттуда.
• Подключайтесь к чему угодно. Да буквально все что угодно.Вы не обязаны хранить свой код на серверах CodeAnywhere. Независимо от того, находится ли ваш код на FTP, платформах для обмена файлами, таких как Dropbox, Amazon S3, или на сложных платформах контроля версий, таких как GitHub, вы можете легко настроить CodeAnywhere для чтения и записи в этот источник, используя редактор кода исключительно для. . . Ну, редактирование кода. 😛

Я хочу отметить еще одну вещь: если вам неудобно работать с Git, когда дело касается просмотра истории и различий, CodeAnywhere может показаться вздохом облегчения.Редактор использует свою систему различий для сравнения файлов, которая позволяет сравнивать два файла в любых двух ревизиях (ревизия создается каждый раз, когда вы сохраняете файл).

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

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

StackBlitz

Если вы в основном занимаетесь фронтендом и не можете отойти от интерфейса VSCode, StackBlitz создан специально для вас.

Ничего особенного не видите?

Я тоже не делал этого, пока не прокрутил немного вниз и не нажал кнопку Angular.Бум!

Угадайте, это не специально создано, чтобы выглядеть как VSCode — он построен на редакторе VSCode! Настолько, что вы можете устанавливать расширения, выполнять поиск по папкам и упорядочивать файлы так, как вы ожидаете от обычного экземпляра VSCode.

Но подождите, это еще не все!

Вы могли заметить или не заметить, что:

• Все приложения, созданные на StackBlitz, также автоматически развертываются на их серверах! Итак, это игрушечное приложение Angular, которое я только что создал, автоматически размещается на https: // angular-yvyi2j.stackblitz.io/. Скорее всего, URL-адрес все еще работает (хотя будет загружаться медленно, как и следовало ожидать при размещении бесплатно)!
• Вы можете создать форк и поделиться проектом. Обмениваясь информацией, вы получаете больший контроль над тем, что могут делать другие.
• Вы можете подключиться к репозиторию GitHub, а также позволить напрямую извлекать / выталкивать код оттуда. Или вы можете просто загрузить проект в виде zip-файла старым добрым способом.

Но подождите, это еще не все!

Серьезно! 😀

Вот список официальных функций, предлагаемых StackBlitz:

• Встроенная поддержка Firebase (которую я лично не использую, но, эй, это благо для тех, кто не хочет погружаться в темные глубины бэкэнда)
• Intellisense, поиск проекта
• Горячая перезагрузка при вводе
• Импорт пакетов npm
• Редактировать офлайн без подключения!

StackBlitz полон (красивых) сюрпризов, когда дело доходит до устранения препятствий на пути веб-разработки и развертывания.Встраивание VSCode на ваш сайт — это больше не мечта!

Облако AWS9

Cloud9, возможно, была первой IDE на базе браузера, которая предлагала серьезные функции и взяла на вооружение идею «браузер как редактор». Неудивительно, что позже его приобрела Amazon, и сегодня Cloud9 является частью предложений AWS.

Если вы даже удаленно подключены к платформе AWS (или заинтересованы в ней), Cloud9 — это то, где ваш поиск идеального (хорошо, почти идеального) редактора заканчивается.

Посмотрим, почему:

• Дополнительная плата за использование Cloud9 не взимается. Вы можете подключить Cloud9 к существующему / новому вычислительному экземпляру AWS, и вы платите только за этот экземпляр. Также можно подключиться к стороннему серверу через SSH — абсолютно бесплатно! 🙂
• Первоклассная поддержка бессерверных приложений AWS (отладка и т. Д.)
• Прямой терминальный доступ к AWS из редактора (честно говоря, приличный встроенный редактор, терминал с вкладками — это то, чего мне все еще не хватает в VSCode)
• Поддерживается более 40 языков программирования (Go, C ++, Ruby, Node, Python, PHP, Java. . . выбирайте)

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

Еще одна потрясающая функция — это воспроизведение в виде видео изменений, внесенных в файл, что делает процесс просмотра радостью:

Мой совет?

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

КодEnvy

CodeEnvy — это мощный облачный редактор, использующий контейнеры Docker, позволяющий запускать предварительно настроенные и изолированные среды разработки. Он построен на базе облачной IDE Eclipse Che с открытым исходным кодом и предлагает множество возможностей масштабирования и DevOps.

На момент написания CodeEnvy была приобретена RedHat (которая, что забавно, сама была приобретена IBM!).

Gitpod

Gitpod — это обновленная версия облачных редакторов кода (или IDE, если хотите), цель которой — постоянно проверять и обновлять ваш код.Другими словами, он глубоко интегрирован с GitHub, и каждый раз, когда вы добавляете код, он запускает ваше тестирование и конвейеры CI / CD, чтобы убедиться, что код всегда находится на 100% работоспособности.

Стоит проверить, нравится ли вам опыт VSCode и вам нужно что-то, что поддерживает все основные серверные / интерфейсные языки и фреймворки (Django, Rails, Revel, вы называете это).

Theia

Если вы упорный поклонник SOLID и придирчивый архитектор программного обеспечения, Theia IDE пощекотает вашу кость разделения проблем.Это IDE кода, написанного на TypeScript (сразу пять баллов за стиль!), У которого есть совершенно отдельные интерфейс и серверная часть. Внешний интерфейс запускается в браузере, а серверная часть может быть где угодно — на локальной машине или в облаке!

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

Кодер

Хотя на их веб-сайте это четко не сказано, Coder — это среда VSCode, встроенная в сервер, который можно запускать локально или в облаке.Рекомендуемая конфигурация — запуск IDE в качестве сервера в облаке и доступ к нему локально через браузер. Существуют готовые образы Docker для беспроблемной настройки и корпоративный план на случай, если вам потребуется поддержка или возникнут другие потребности.

Заключение

Это более или менее охватывает все IDE и редакторы кода на момент написания. Я не включил в этот список два типа предложений: те, которые ориентированы исключительно на интервью и не имеют полноценной среды (за исключением нашего любимого классического JSFiddle, конечно), и те, которые, похоже, ничего не предлагают. существенный и имел немного больше, чем гладкую домашнюю страницу.

Если вам нужно что-то легкое для веб-разработки, вы можете изучить эти редакторы кода.

Контурная песочница | Прядильные номера

Симулятор для изучения схем. Circuit Sandbox включает в себя схематический захват и механизм моделирования схем. Симулятор схем полностью написан на JavaScript — это не версия SPICE.

Симулятор Circuit Sandbox с возможностью выбора языка,

Можете ли вы помочь перевести Circuit Sandbox на другие языки? Это просто!

ВАМ НЕ НУЖНО ПРОЧИТАТЬ ОТДЫХ ЭТОГО, ЕСЛИ ВЫ НЕ ЗАСТРЕЛИВАТЬСЯ.

Содержание

Играем в песочнице

Чтобы создать схему, перетащите компоненты из корзины деталей справа на схему.

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

Начало работы

Перетащите компоненты из корзины деталей на главный экран.

Добавьте провода, перетаскивая их между точками соединения компонентов (маленькие кружки).

Нажмите значок Rotate или введите «r» на клавиатуре, чтобы повернуть компонент.

Нажмите значок «Удалить» или введите BACKSPACE, чтобы удалить компонент.

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

Добавьте символ земли (треугольник в верхней части корзины деталей).

Добавьте метки узлов (короткая прямая линия под символом земли).

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

Выберите DC , AC или TRAN из меню для моделирования цепи.

Как построить схему, показанную выше

Чтобы создать схему $ \ text {RC} $, показанную выше, выполните следующие действия, начиная с пустой схемы (откройте эту ссылку в новой вкладке).

• Добавьте компоненты (источник напряжения, резистор и конденсатор). Щелкните компонент в корзине деталей справа, затем щелкните схему. Или вы можете навести указатель мыши на компонент в подборке и перетащить его на схему.
• Выберите резистор, щелкнув по нему. Он станет зеленым. Пока он выбран, нажмите на клавиатуре клавишу «r» , чтобы повернуть его в горизонтальное положение. Вы также можете нажать на значок R⤵. Поверните несколько раз, чтобы увидеть, что произойдет.
• Разместите компоненты на странице, перетаскивая их.
• Добавьте провода, перетащив их между точками соединения компонентов. Если вы допустили ошибку, нажмите клавишу возврата / удаления на клавиатуре, чтобы удалить все, что было выбрано, или щелкните значок $ \ large \ times $.{-3} $, поэтому мы будем моделировать 10 $ миллисекунд.
• Нажмите ОК. Моделирование выполнено, и должен появиться график.

Вот завершенная схема $ \ underline {\ text {RC}} $. -15

пример: $ 1000 $ можно ввести как $ 1 \ text k $

Маркировка и аннотация

Вы можете дать узлу имя, прикрепив часть метки — короткую прямую линию под символом земли.Дважды щелкните метку и введите имя узла.

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

Элементы управления на экране

Прокрутка / панорамирование
Увеличение, уменьшение, подгонка
Повернуть
Удалить

Справка: список приведенной выше справочной информации.

Сетка: включение и выключение фоновой сетки.

Открыть список цепей: открыть сохраненный список цепей.

Общая ссылка: отображает ссылку, которую вы можете скопировать для совместного использования вашей цепи. Ссылка — это uriencoded , также известная как -процентная кодировка . Это позволяет использовать эти текстовые символы, /? : @ & = + $ # в именах сигналов и компонентов. Расшифрованная ссылка выводится на консоль javascript вашего браузера.

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

Вырезать, Копировать, Вставить: обычные функции редактирования.

Ярлыки для Mac: ⌘-X, ⌘-C, ⌘-V
Ярлыки для ПК: ctl-X, ctl-C, ctl-V

Удалить: удалить выбранные компоненты.

Моделирование

DC : Найдите напряжения и токи постоянного тока, также называемые рабочей точкой .

AC : изменение частоты переменного тока, график зависимости напряжения или тока от частоты.

TRAN : переходный ответ.Найдите время отклика, постройте график зависимости напряжения или тока от времени.

Загрузка: сохраняет данные TRAN или AC в виде файла .csv (переменные, разделенные запятыми) с именем data.csv в папке загрузок. Этот тип файла можно открыть в Excel или MatLab.

Модели устройств

В симуляторе есть простые модели полупроводниковых приборов и идеальный операционный усилитель. Каждая модель имеет всего несколько настраиваемых параметров. Для более сложных симуляций ознакомьтесь с другими ресурсами по симуляторам схем, упомянутыми ниже.{-14} $ ампер. Параметр Area диода масштабирует ток насыщения до Area $ \ times \, \ text I_ \ text s $.

Установка площади эквивалентна параллельному размещению такого количества диодов.

Операционный усилитель модели

В

Circuit Sandbox есть две модели операционных усилителей, идеальная модель и реалистичная модель с выводами источника питания и несовершенным входным и выходным сопротивлением.

Идеальная модель

Идеальный символ операционного усилителя имеет два входа ($ \ sf v $ + и $ \ sf v $ -) и выход ($ \ sf {vo} $).Нет положительных и отрицательных входов питания. Дополнительный вход, $ \ sf {vg} $, является эталоном выходного напряжения.

Определяющее уравнение для операционного усилителя: $ (\ sf {vo} — \ sf {vg}) = \ text A (\ sf v $ + $ \, — \, \, \ sf v $ — $) $

Коэффициент усиления по умолчанию равен $ \ text A = 30 {,} 000 $. Если входные напряжения идентичны, выходное напряжение будет $ \ sf {vg} $. Если вы планируете использовать симметричные напряжения питания, подключите $ \ sf {vg} $ к земле. Если они не симметричны, установите $ \ sf {vg} $ посередине между входами мощности, которые вы предполагаете для своего операционного усилителя.

Реалистичная модель

Реалистичный символ модели операционного усилителя включает контакты питания,

Он подчиняется аналогичному определяющему уравнению: $ \ sf {vo} = \ text A (\ sf v $ + $ \, — \, \, \ sf v $ — $) $

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

Системная информация

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

Ваша схема никогда не передается на веб-сервер Spinning Numbers.

Настольный компьютер / ноутбук

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

Значок сохранения сохраняет схему в папке Download на вашем компьютере в формате JSON (нотация объектов JavaScript).Файл называется ckt.txt .

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

Если вы хотите сохранить свою работу, не забудьте сохранить схему перед тем, как покинуть веб-страницу.

Сенсорные устройства

Если у вас есть сенсорное устройство (планшет или смартфон),

• Один палец выбирает компонент или перетаскивает прямоугольник выделения
• Два пальца панорамируют окно схемы

Планшет

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

Мобильные устройства

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

Настроить

Circuit Sandbox принимает несколько дополнительных параметров для настройки корзины деталей и вариантов анализа.Вы можете сделать это с помощью URL-адреса или оператора html . Вот пример URL-адреса с ограниченным набором деталей и вариантами анализа,

  https://spinningnumbers.org/circuit-sandbox/index.html?parts=g,v,r,s&analyses=dc,tran
  

Список параметров URL начинается с символа? вопросительный знак. Каждый параметр отделяется символом & амперсанда. Обратите внимание, что нет кавычек.

Вы также можете предоставить исходную схему. Нарисуйте схему и возьмите URL со ссылкой .Схема JSON фиксируется в параметре значения. Добавьте такие параметры детали и анализа, как это, с амперсандами,

  https://spinningnumbers.org/circuit-sandbox/index.html?value=[["g",[104,112,0 ],{"_json_":0},["0"***,["r ", [128,64,0], {" r ":" 1 "," _ json _ ": 1}, [" 1 "," 0 "]], [" v ​​", [80,64,0], {"значение": "dc (1)", "_ json _": 2}, ["1", "0"]], ["w", [80,64,128,64]], ["w", [ 80,112,104,112]], [«w», [128,112,104,112]], [«вид», 0,5,36,5,4, «50», null, null, null, «100», «0,01», «1000»]] & parts = g, v, r, s & analysis = dc, tran
  

Вы можете сделать то же самое, если вызовете Circuit Sandbox из оператора html — на этот раз с кавычками,

Ваш выбор для анализа: dc, ac и tran.

Вот ваш выбор запчастей,

  var parts_map = {
        'g': [Земля, "Соединение с землей"],
        'L': [Метка, «Метка_узла»],
        'v': [VSource, "Voltage_source"],
        'i': [ISource, "Current_source"],
        'r': [Резистор, «Резистор»],
        'c': [Конденсатор, «Конденсатор»],
        'l': [Индуктор, "Индуктор"],
        'd': [Диод, "Диод"],
        'p': [PFet, "PFet"],
        'n': [NFet, "NFet"],
        'pnp': [PNP, "PNP"],
        'npn': [NPN, "NPN"],
        'o': [OpAmp, "Op_Amp"], (идеально)
        'o2': [OpAmp2, "Op_Amp"], (реалистично)
        's': [Пробник, "Voltage_probe"],
        'a': [Амперметр, "Current_probe"]
    };
  

Перевод

Хотите помочь перевести Circuit Sandbox на другие языки? Это было бы прекрасно! Если вы свободно владеете английским и другим языком, особенно техническими терминами, используемыми в симуляторе, мне действительно нужна ваша помощь.Свяжитесь со мной по электронной почте, и я предоставлю вам для перевода таблицу из 170 терминов и фраз.

Circuit Sandbox доступен в,

• Английский, en-US.js
• Испанский, es.js (любезно предоставлено переводчиками-волонтерами Khan Academy)
• Упрощенный китайский, zh-cn.js (любезно предоставлено пользователем GitHub Чжу Хао)
• Японский, ja.js (любезно предоставлено моим другом Лесли Шиодзаки, профессиональным переводчиком)
• Hindi, hi.js (любезно предоставлено Анируддхом Пратапом Сингхом, учеником 12-го класса, который хочет стать инженером.)
• Португальский, pt-BR.js (любезно предоставлено Луисом Ф. В. Пересом, Graduando em engenharia elétrica de Universidade de São Paulo)
• Венгерский, hu.js (любезно предоставлено Торёком Аттилой)

Circuit Sandbox была создана в MIT

Circuit Sandbox был написан профессором Массачусетского технологического института Крисом Терманом в 2011 году для MIT 6.002x, самого первого массово-открытого онлайн-класса (MOOC). Массачусетский технологический институт передал Circuit Sandbox в EdX в 2012 году. Я внес в симулятор дальнейшие улучшения, работая в Khan Academy в 2016 году и с тех пор.

Circuit Sandbox включает в себя схематический захват и механизм моделирования схем. Это , а не версия SPICE. Это его собственная интерпретация симулятора схем, написанная на 100% Javascript. Это не требует установки — просто нажмите на ссылку, и симулятор откроется, готовый к работе.

Симуляторы схем прочие

Дедушкой всех программ моделирования схем является SPICE (программа моделирования с акцентом на интегральные схемы). Эта программа была создана в Калифорнийском университете в Беркли в 1970-х годах.Изначально он был написан на ФОРТРАНЕ. SPICE всегда был достоянием общественности. Это одна из жемчужин человеческого творчества.

Входными данными для SPICE является описание схемы в виде обычного текста (список соединений SPICE). SPICE — это рабочая лошадка электронной промышленности, поскольку он поддерживает сложные модели полупроводниковых устройств (диоды и многие типы транзисторов).

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

Превосходная версия SPICE доступна от Linear Technology, компании по производству полупроводников в Милпитасе, Калифорния. Программа — LTSpice (с linear.com) или LTSpice (с analog.com). LTSpice работает на компьютерах Windows, Macintosh и Linux с эмуляцией Windows. Его можно загрузить и использовать бесплатно.

Примечание: Linear Technologies была приобретена Analog Devices в 2017 году. Веб-сайты были объединены.

Еще один симулятор — JADE. Это тоже творение Криса Термана из Массачусетского технологического института. Это продолжение Circuit Sandbox с улучшенными функциями цифрового дизайна и логического моделирования. Вот вступительное видео.

Лицензирование

© Вилли Макаллистер, 2017-20, © EdX, 2012, © 2011, 2018 MIT EECS

Это произведение находится под лицензией Creative Commons (CC BY-NC-SA 4.0) Attribution-NonCommercial-ShareAlike 4.0 International.

Khan Academy предоставляет свое программное обеспечение по лицензии MIT.

Симулятор схем MIT является частью платформы EdX, лицензированной под
ОБЩАЯ ПУБЛИЧНАЯ ЛИЦЕНЗИЯ GNU AFFERO
Версия 3, 19 ноября 2007 г. Дополнительная информация на странице лицензирования EdX.

Библиотеки

Симулятор Circuit Sandbox использует две библиотеки с открытым исходным кодом,

Download.js находится под лицензией Creative Commons Attribution 4.0 Международная лицензия, приписываемая «дандави». Никаких изменений не было.