Гость

Нажмите для авторизации/регистрации

  • Назад
  • Меню
  • Статьи
    • Все
    • Интернет и технологии
    • Laravel и WebDev
    • Linux, Windows, Docker, Etc
    • Новости
    • Прочее
    • Геймдев
    • Смотри как я умею
  • Информация
    • Оферта на дополнительные функции
    • Политика конфиденциальности
    • Тарифы
    • Пользовательское соглашение

Онлайн-песочницы для кода

  1. Главная
  2. Статьи
  3. Laravel и WebDev
  4. Онлайн-песочницы для кода
Онлайн-песочницы для кода
  • 18/12/2021
  • Chebukin Pavel
  • 956 просмотров
  • 0 комментариев

Онлайн-песочницы для кода

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

JSFiddle

Сервис существует много времени и позволяет удобным образом набросать схемку HTML+JS+CSS. Песочница позволяет использовать разные библиотеки и фреймворки как для JavaScript, так и CSS-процессоры. Сохранять результат и делится им с другими.

JS Bin

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

CodeSandbox

Это уже песочница с широкими возможностями. Даже правильнее ее назвать Online IDE для веб-разработки. Бесплатная для индивидуального использования. Интегрируется с Github, Vercel, Netlify. Имеет возможность работать онлайн сразу нескольким участникам команды над одним проектом в коллаборации или подключать людей для интерактивного обучения на примере используя режим "Классной комнаты". Возможности очень широкие, а плюс, он же минус - постоянное подключение к сети.

Сам же сервис внутри выглядит как открытая IDE + браузер.

Неплохой вариант обучаться или даже может создать какие-то проекты. Стоимость персональной версии - 7.у.е./месяц. При этом будет возможность создавать приватные песочницы и подключать приватные репозитории с GitHub.


CodePen

Еще одна песочница для HTML+CSS+JS стека. Для многих он не столько песочница, сколько каталог работ, чтобы посмотреть чужие и показать свои работы. Есть возможность создавать проекты и работать в коллаборации, но в целом это уже прерогатива платного тарифа, как и delployment. На бесплатном тарифе возможности сильно урезаны и прошлая песочница предоставляет куда больше возможностей.


Web Maker

Простая песочница HTML+CSS+JS, позволяющая открыть свое же творение на CodePen. Есть возможность подключения библиотек. Но в целом все достаточно просто.

Ideone

Это уже онлай-песочница для большого спектра языков. К сожалению это, по сути, однофайловые сниппеты кода. Но и этого иногда может хватить. Количество поддерживаемых языков вы можете видеть на скриншоте ниже. Среди них Bash, C#, C++, Java, Python, Lisp и другие.


Code Share

Этот онлайн-сервис делает ровно то, что сказано в его названии. Он позволяет отображать код всем тем, с кем вы им поделились. Имеет широкие возможности подсветки синтаксиса. Среди них как веб-языки программирования, так и системные, SQL и др.


StackBlitz

Еще одна заявка на онлайн-IDE. Заявлена работа с Next.js, Nuxt, HTML/CSS/JS, TypeScript, Angular, React, Vue, Svelte, RxJS и прочим. Легкое подключение репозитория на гитхаб. На бесплатном тарифе вы можете использовать без ограничений любое количество публичных проектов, а для скрытых(доступных по ссылке) или закрытых(доступных для вас) нужно брать платный тарифный план. Вполне неплох для самообучения и обкатки JS фреймворков, если вы захотите изучить парочку новых для себя.

Выводы

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

Отзывы

Пока нет комментариев


Для того чтобы оставить комментарий, авторизуйтесь.
Понравился материал? Поделись!
Laravel нотификации в Microsoft Teams
Дек11
Laravel нотификации в Microsoft Teams

Я уже писал в прошлом материале о добавлении нотификаций в Laravel для сообщений в телеграмм. А в этом материале рассмотрим нотификации в Microsoft Teams. Но тут все немного проще, так как мы будем использовать уже готовый пакет. Ставим пакет через композер composer require laravel-notification-channels/microsoft-teams Я не рассматриваю версии ниже 7-й....

  • Chebukin Pavel
  • 0
  • 11.12.2021 16:33
Laravel + TinyMCE
Дек02
Laravel + TinyMCE

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

  • Chebukin Pavel
  • 0
  • 02.12.2021 20:06
Laravel, подключаем комментарии Disqus на сайт
Дек11
Laravel, подключаем комментарии Disqus на сайт

Ранее я уже писал о том, как добавить комментарии Facebook на сайт. В этом материале мы добавим альтернативные комментарии, от сервиса Disqus.  Комментарии на сайт встроенные лучше, чем подключаемые. Но требуют разработки, внедрения, модерации и т.д. Все это время и ресурсы. Но такие комментарии будут работать быстрее даже. Не всем...

  • Chebukin Pavel
  • 0
  • 11.12.2021 18:29
Актуально ли использовать PHP framework Laravel в 2021 и 2022 году?
Дек09
Актуально ли использовать PHP framework Laravel в 2021 и 2022 году?

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

  • Chebukin Pavel
  • 0
  • 09.12.2021 22:32
Проблема с просмотром больших XML/YML файлов?
Ноя28
Проблема с просмотром больших XML/YML файлов?

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

  • Chebukin Pavel
  • 0
  • 28.11.2021 23:24
Редактирование кода страницы из админ панели с помощью редактора Ace9
Авг13
Редактирование кода страницы из админ панели с помощью редактора Ace9

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

  • Chebukin Pavel
  • 0
  • 13.08.2022 12:12

Copyright 2023 © All rights reserved.

Мы в: