За последние годы появилось несколько онлайн-площадок для веб-разработчиков. Это веб-приложения, которые позволяют редактировать код в реальном времени и с предварительным просмотром на стороне клиента. Поддерживаются: HTML, CSS, и JavaScript. Самым приятным в этих площадках является то, что большинство из них бесплатны и вы можете легко обмениваться своими разработками с кем-то для учебных целей или для отладки.
1. Codepen
Codepen, вероятно, одна из самых популярных площадок для кодирования. Крис Койьер из “CSS Tricks” является соучредителем / соавтором Codepen, что, вероятно, объясняет почему это веб-приложение выглядит грандиозно. Помимо своих плавных визуальных эффектов, Codepen сразу отображает изменения, внесенные в редакторе, что позволяет увидеть причину и следствие.
В Codepen доступны пре-процессоры CSS, включая SCSS, SASS, LESS, and Stylus. Для JS имеются CoffeeScript и LiveScript. А для HTML имеются HAML, Markdown, Slim, и Jade. Там также встроены 8 JS библиотек готовых к использованию.
2. JSFiddle
JSFiddle одна из первых и самых известных площадок. Она имеет более 30 JavaScript библиотек для использования, а также вы легко можете добавлять внешние файлы . Для предварительной обработки она имеет SCSS для CSS, CoffeeScript для JS и простой “vanilla” HTML.
Если вы собираетесь сотрудничать с другими разработчиками, настоятельно рекомендуется использовать JSFiddle. Среди доступных площадок для кодирования, функция “сотрудничество” JSFiddle, вероятно, является лучшей. Плюс, эта функция проста в использовании и бесплатна, в отличие от Codepen.
Чего не хватает JSFiddle, это живого превью. Вы должны сначала обновить страницу, нажав на кнопку воспроизведения. И по сравнению с другими площадками, JSFiddle является, вероятно, самым медленным. Еще немного расстраивает причуда JSFiddle – кнопка запуска, иногда, с первого раза она не работает, так что вам придется нажать еще пару раз, прежде чем она обработает код.
3. JS Bin
JS Bin создал Remy Sharp, мастер – разработчик JavaScript, который владеет компанией по разработке веб-приложений на, как вы уже догадались, JavaScript (и HTML5). JS Bin имеет пре-процессоры CoffeeScript, TypeScript, Traceur, и JSX и имеет более чем 40 JS-библиотек. Вы можете добавить внешние файлы, но вам придется сделать это вручную в редакторе. Что касается CSS пре-процессора, в наличчи есть LESS.
Отличаие JS Bin от предыдущих площадок в том, что он позволяет загружать файлы на ваш компьютер, интересная функция, которая может оказаться полезной для разработчиков, особенно, если нужно работать с кодом в автономном режиме. Вы также можете создавать приватные “bins” на 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. Он также имеет встроенную линейку, которая отлично подходит для получения точных измерений. Так же имеется встроенный генератор Lorem Ipsum.
Вывод
Каждая площадка имеет свои собственные уникальные характеристики, которые могут оказаться полезными для вас в одном из ваших проектов. Надеемся, что эта статья поможет вам сделать правильный выбор.