6 игровых площадок для веб-разработчиков

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

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

Рекомендуемое чтение: 15 сайтов для проверки ваших кодов онлайн

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Codepen
Codepen, вероятно, одна из самых популярных игровых площадок для кодирования. Крис Койер из CSS Tricks является соучредителем / соавтором Codepen, что, вероятно, объясняет, почему это веб-приложение выглядит великолепно. Помимо гладких визуальных элементов, Codepen отображает предварительный просмотр изменений, которые вы вносите, в своем редакторе, что упрощает просмотр причин и следствий.
Доступные CSS-препроцессоры Codepen включают SCSS, SASS, LESS и Stylus. А для препроцессора JS у него есть CoffeeScript и LiveScript. Для HTML есть Haml, Markdown, Slim и Jade. Есть также 8 встроенных библиотек JS, готовых к использованию. Сотрудничество и частные «ручки» в Codepen доступны, но за них нужно платить.
JSFiddle
JSFiddle, вероятно, отвечает за популярность игровых площадок для кодирования, поскольку это одна из первых и самых известных игровых площадок. JSFiddle имеет более 30 библиотек JavaScript, готовых к немедленному использованию, плюс вы можете легко добавлять внешние файлы. Для предварительной обработки у него есть SCSS для CSS, CoffeeScript для JS и простой ванильный HTML.
Если вы сотрудничаете с другим разработчиком, я настоятельно рекомендую использовать JSFiddle, чтобы разобраться. Среди доступных площадок для кодирования функция совместной работы JSFiddle, вероятно, лучшая из множества. Плюс эта функция проста в использовании и бесплатна, в отличие от Codepen.

Чего не хватает в JSFiddle – это живые превью. Вы должны в основном обновить страницу, нажав на кнопку воспроизведения. И по сравнению с другими игровыми площадками JSFiddle, вероятно, самый медленный. Еще одна слегка разочаровывающая особенность JSFiddle – его кнопка запуска, иногда нажатие на нее не работает, поэтому вам придется нажимать еще пару раз, прежде чем он действительно запустит код (и да, я проверял это на нескольких браузерах).
3. JS Bin
JS Bin создан Реми Шарпом, ведущим разработчиком JavaScript, который владеет компанией по веб-разработке, на которой, как вы уже догадались, JavaScript (и HTML5). Препроцессор JS JS Bin включает CoffeeScript, TypeScript, Traceur и JSX и имеет в своем распоряжении более 40 библиотек JS. Вы можете добавить внешние файлы, но вам придется сделать это вручную в редакторе. Что касается CSS препроцессора, он обеспечивает МЕНЬШЕ.
Что отличает его от предыдущих игровых площадок, так это то, что JS Bin позволяет вам загружать файлы на ваш компьютер, отличная функция, которая может оказаться полезной для разработчиков, особенно при работе с кодом в автономном режиме. В JS Bin вы также можете создавать частные «корзины», но вам придется заплатить за эту функцию. К сожалению, на данный момент JS Bin не имеет функции совместной работы.
4. CSSDeck
CSSDeck существует уже несколько лет, но он не оказал большого влияния. Но это все же заслуживает внимания из-за своей простоты. Если вы хотите избежать шума других игровых площадок со всеми их функциями, CSSDeck – приложение для использования.
В число препроцессоров CSSDeck входят HAML, Markdown, Slim и Jade для HTML, LESS, Stylus, SASS и SCSS для CSS и CoffeeScript для JS. Он также имеет несколько доступных библиотек CSS и JS, а добавление библиотек, которых нет в списке, выполняется вручную, что должно быть легко.

Одна вещь, которая удивила меня в CSSDeck, это его простая, но полезная функция, которая позволяет пользователям увеличивать размер текста. Если вы ищете детскую площадку с множеством необычных функций, CSSDeck не для вас. Но это также то, что делает его уникальным, поскольку его простота фокусируется на вещах, которые имеют значение.
5. Dabblet
Прежде всего, Дабблет удивил меня большим временем, когда я завис на шестнадцатеричных цветовых кодах. Цвета на самом деле выскочили! Теперь это первое. Хотя я не уверен, что это действительно полезная функция, она все еще довольно изящная.
Самое замечательное в Dabblet состоит в том, что он позволяет пользователям просматривать его в 5 разных видах: редактор CSS и результат, редактор HTML и результат, редакторы CSS и HTML и результат, JavaScript и его воспроизводимый результат, или все сразу. , Надеюсь, это не было полным глотком, но важно понимать, что эта массовая функция недоступна на других игровых площадках.

Одна вещь, которая меня смущает, это отсутствие параметров препроцессора для HTML и CSS. Он не имеет их вместе со встроенными библиотеками JavaScript. Но я думаю, что вы можете вставить их вручную, так что не волнуйтесь. Что касается каждой панели, они имеют фиксированный размер, и вы не можете изменить их размер, как на предыдущих игровых площадках. Кроме того, у него нет галереи демонстраций от других пользователей.
6. Liveweave
Liveweave – это полезная игровая площадка для программирования, включающая в себя довольно много функций, таких как возможность отключить предварительный просмотр в реальном времени. Вы также можете лучше заботиться о своем зрении с режимом ночного видения, когда все становится темным. Liveweave предлагает более 20 библиотек JavaScript. Он даже поддерживает SVG. Он также поставляется со встроенной линейкой, которая отлично подходит для получения точных измерений и эстетики.
Еще одна вещь, которая привлекла мое внимание, – это удобство совместной работы. Если вы использовали Teamviewer в прошлом, он работает так же. Все, что вам нужно сделать, это нажать на ссылку Team Up, и вы можете поделиться ссылкой на ваш «ткать». Я не уверен, является ли это моим ноутбуком или моим интернет-соединением, но, похоже, есть небольшое отставание. Тем не менее, это важная функция, и Liveweave сделал это прекрасно.

Вы даже можете загрузить свои переплетения в виде одного файла HTML (упс, JS, CSS и HTML в одном файле – минус баллы!) Или в виде zip-файла для отдельных файлов HTML, CSS и JS (ну, вот так). Прежде чем я забыл, у него есть встроенный генератор Lorem Ipsum.
Вывод
Ну, вот и все, каждая игровая площадка имеет свои уникальные характеристики, которые могут оказаться полезными для вас в одной из ваших «игр». Я надеюсь, что эта статья помогла вам выбрать правильный вариант для ваших нужд. Если у вас есть другие игровые площадки, пожалуйста, поделитесь ими с нами в комментариях ниже.