Html and css sandbox

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Sandbox for HTML, CSS, JavaScript code

License

olton/Sandbox

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

The Sandbox is a tool for prototyping and testing your HTML, CSS and JavaScript code and getting support with your problems. You write code in the browser and see the results of it as you build.
Prototype your code now »

• Metro 4 by Sergey Pimenov
• Domain by Imena.ua
• Hosting by Mirohost
• CDN by Key CDN
• IDE PhpStorm by JetBrains

IE11+, Chrome, Firefox, Opera, Safari, Android, IOS

About

Sandbox for HTML, CSS, JavaScript code

Источник

5 популярных песочниц для веб-разработчиков

Песочницы — это изолированное пространство, онлайн-редакторы кода. Их особенность в том, что вы можете сверстать страницу или написать программу и сразу же увидеть результат работы. В песочнице можно написать фрагмент кода или вести целый проект. Некоторые из таких сервисов, например, JSFiddle, дают возможность командной работы: над одной задачей работает сразу несколько людей.

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

Для чего нужны песочницы

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

Код из песочницы можно добавлять на Stack Overflow, Хабр и их аналоги. Благодаря этому разработчик может показать свою работу другим пользователям, чтобы попросить помощи или совета. Или наоборот: помочь кому-то, объяснив решение проблемы.

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

CodePen

CodePen — онлайн-редактор и сообщество разработчиков. Он представляет собой страницу, разделённую на четыре окна. Первые три — рабочие области, редакторы для HTML, CSS и Javascript. Последнее — окно предпросмотра. В нём отображается результат выполнения кода.

У CodePen гибкие настройки. Для CSS здесь можно выбрать препроцессор Less, Sass или PostCss. Для JavaScript — подключать библиотеки jQuery, Lodash и React.js, использовать фреймворки Angular и Vue и другие. CodePen также разрешает использовать пакеты JavaScript из npm, подключать Normalize.css, Autoprefixer или PrefixFree. Вы можете создавать новые шаблоны или экспортировать код.

Одна из особенностей CodePen — раздел «Тренды». Это лента с работами других разработчиков: вёрсткой, анимацией и программами. Здесь можно черпать вдохновение, изучать реализацию, добавлять понравившиеся работы к себе в шаблоны и подписываться на других пользователей.

JSFiddle

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

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

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

Plunker

Plunker похож на стандартный редактор кода, в который добавили окно предпросмотра. Чтобы приступить к работе, сначала нужно выбрать библиотеку/фреймворк Angular, React.js, AngularJS или Preact либо остаться на VanillaJS. После этого откроется редактор кода, в котором можно подключать библиотеки и устанавливать пакеты npm. Препроцессоры стилей тоже настраиваются, хотя для новичков это может оказаться непростой задачей.

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

StackBlitz

StackBlitz — это песочница на базе Visual Studio. Здесь можно создавать приложения на Angular, Vue.js, React.js или использовать другие библиотеки и фреймворки. Плюс этого редактора — простая установка npm зависимостей и компиляции, можно устанавливать сразу несколько пакетов. А если скопировать кусок кода и вставить в редактор, песочница сама найдёт пропущенные пакеты.

StackBlitz работает офлайн: вы сможете заниматься проектом даже без интернета. Ещё один плюс этого редактора — простая загрузка файлов. Чтобы добавить картинку в проект, нужно перетянуть её в редактор.

CodeSandbox

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

В CodeSandbox большой выбор фреймворков и удобный редактор кода. По желанию окно предпросмотра можно открыть в отдельной вкладке браузера.

Как и на других ресурсах, на CodeSandbox есть раздел с опубликованными проектами. Можно заглянуть в код других разработчиков и посмотреть, как написаны программы. А если появится вопрос — написать авторам в Discord.

Перечисленные песочницы — только небольшая часть из размещённых в Сети. Есть ещё Replit, JS Bin, CSSDeck и другие редакторы кода, о которых невозможно рассказать в одной статье.

Может ли песочница помочь программисту в работе

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

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

В чём недостаток песочниц для начинающих разработчиков

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

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

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

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Лучшие онлайн-песочницы для разработчиков

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

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

1. Работа происходит прямо в браузере, не нужно ничего дополнительно устанавливать
2. Они простые и заточенные под то, что от них требуется
3. Экран разделен на 2 части: редактор кода и трансляция исполнения кода
4. Объединяет технологии (языки, их библиотеки, препроцессоры)
5. Сервисы позволяют сохранить код у себя на компьютере или прямо на сервисе для демонстрации, дальнейшей корректировки или просто для хранения
6. Есть возможность нескольким разработчикам работать над одним проектом.

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

CodePen

Его основной интерфейс — три окна рабочей области (редакторы для HTML, CSS и Javascript) и четвертое окно для предпросмотра (здесь результат выполнения кода). Удобно, что вы можете выбрать препроцессор Less, Sass или PostCss для CSS. Подключить библиотеки jQuery, Lodash и React.js, использовать фреймворки Angular и Vue.js и другие для JavaScript.

Кроме этого в CodePen есть раздел «Тренды», где можно рассматривать интересные работы, черпать вдохновение, сохранять себе в шаблоны понравившееся.

Plunker

Если вы учились на Learn JS, то вы уже знакомы с этой песочницей. Чтобы приступить к работе, сначала нужно выбрать библиотеку/фреймворк Angular, React.js, AngularJS или Preact, либо остаться на VanillaJS. После этого откроется редактор кода, в котором можно подключать библиотеки и устанавливать пакеты npm. Препроцессоры стилей тоже можно настроить

JavaScript Sandbox

Данный сервис ориентирован только на работу с этим языком.

Лично я использую js bin.

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

Источник