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

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

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

1. CodeSandbox

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

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

2. Codepen

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

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

3. JS Fiddle

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

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

4. StackBlitz

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

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

5. JS Bin

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

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

6. Liveweaver

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

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

7. SourceLair

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

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

8. Rendera

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

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

9. Playcode

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

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

10. Скримба

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

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

11. JSitor

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

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

12. Веб-конструктор

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

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

13. LeetCode

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

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

14. Repl.it

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

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

15. Флемс

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

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

16. CSS Deck

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

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

17. Dabblet

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

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

18. Codeply

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

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

19. Плункер

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

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

20. Глюк

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

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

21. Кодинг

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

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

22. RunKit

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

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

23. Катакода

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

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

24. Codeanywhere

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

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

25. Последнее, но не менее важное: консоль браузера.

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

Здесь не было вашей любимой детской площадки? Оставьте комментарий ниже, и я добавлю его в список как можно скорее.



JavaScript на простом английском языке

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube в Decoded!