Недавно в Chrome Web Store мне попалось приложение jsFiddle, проект британского программиста Piotr Zalewa aka @zalun. По-сути, это очередная песочница для web-программистов, но говоря «очередная» я не подразумеваю «никому не нужная». Я долго ждал момента, когда WYSIWYG заменят такие песочницы, и, похоже, дождался.
Рабочая область jsFiddle поделена на четыре части, размеры которых можно изменять (о чудо, не фреймы!). Как и во всех приложениях такого типа, отдельно пишем HTML код, отдельно JavaSript, отдельно CSS. Результат получаем в iframe, посмотря код которого, я убедился: ничего лишнего, никаких копирайтов и других костылей приложение не приписывает. Подсветка синтаксиса — везде. Вообще, чувствуется, что автор пытался сделать как можно больше фич «a la IBM Eclipse».
Ничего не исправлял, позволяя приложению распорядиться моим кодом по-своему. Как видите, сильно хромают отступы (их jsFiddleтоже ставит пытается ставить автоматически). И это не кошерная табуляция, а убогие пробелы циклические. Мы долго ругались с приложением по поводу закрывающего тега, который оно почему-то решило сдвинуть вправо.
С разметкой CSS все гладко: можно вообще не смотреть на экран.
Теперь, собственно, к возможностям, отличающим jsFiddle от аналогов. Во-первых, это возможность выбора подключаемых JavaScript библиотек. В списке есть Mootools, jQuery, Prototype, YUI, Glow, Dojo, Raphael и др. Можно выбрать версию библиотеки, а так же способ подключения: библиотека может быть описана в head, body, загружена по событию onLoad или onDomReady. Есть поле для атрибутов библиотеки, а так же пара настроек.
Естественно, можно подключить свой JS файл, как с помощью редактирования html, так и с помощью специального поля. Есть какая-никакая работа с meta тегами (можно было сделать и побольше!). Правда есть там одна возможность, которая, хоть и мелочная, но меня, лично, обрадовала: выбор html стандарта (да, html5 есть). У jsFiddle есть специальные Api для тестирования Ajax запросов:
На самом деле, это тоже очень полезно, т.к. AJAX не кроссдоменный, а тестировать его как-то надо.
Примеры работы с jsFiddle есть в самом jsFiddle. Причем их много и они, как мне показалось, весьма поучительны. Правда, на магию похожи. Этот иллюстрирует работу с Canvas:
А этот (как это?!) — работу JQuery с твиттером:
Достаточно быстро понимаешь, что js в слове jsFiddle не случайно. Приложение фактически является именно JavaScript песочницей, которую, в отличие от WYSIWYG, вполне можно использовать. Сколько я ни искал, годных аналогов в Chrome Web Store нет. Так что, спасибо Piotr, а также еще одному программисту: Oskar Krawczyk aka @Oskar.
jsFiddle — Chrome Web Store
Ах, да, это же Stateless проект, так что добро пожаловать на сайт.
@unnx
Рабочая область jsFiddle поделена на четыре части, размеры которых можно изменять (о чудо, не фреймы!). Как и во всех приложениях такого типа, отдельно пишем HTML код, отдельно JavaSript, отдельно CSS. Результат получаем в iframe, посмотря код которого, я убедился: ничего лишнего, никаких копирайтов и других костылей приложение не приписывает. Подсветка синтаксиса — везде. Вообще, чувствуется, что автор пытался сделать как можно больше фич «a la IBM Eclipse».
Ничего не исправлял, позволяя приложению распорядиться моим кодом по-своему. Как видите, сильно хромают отступы (их jsFiddle
С разметкой CSS все гладко: можно вообще не смотреть на экран.
Теперь, собственно, к возможностям, отличающим jsFiddle от аналогов. Во-первых, это возможность выбора подключаемых JavaScript библиотек. В списке есть Mootools, jQuery, Prototype, YUI, Glow, Dojo, Raphael и др. Можно выбрать версию библиотеки, а так же способ подключения: библиотека может быть описана в head, body, загружена по событию onLoad или onDomReady. Есть поле для атрибутов библиотеки, а так же пара настроек.
Естественно, можно подключить свой JS файл, как с помощью редактирования html, так и с помощью специального поля. Есть какая-никакая работа с meta тегами (можно было сделать и побольше!). Правда есть там одна возможность, которая, хоть и мелочная, но меня, лично, обрадовала: выбор html стандарта (да, html5 есть). У jsFiddle есть специальные Api для тестирования Ajax запросов:
На самом деле, это тоже очень полезно, т.к. AJAX не кроссдоменный, а тестировать его как-то надо.
Примеры работы с jsFiddle есть в самом jsFiddle. Причем их много и они, как мне показалось, весьма поучительны. Правда, на магию похожи. Этот иллюстрирует работу с Canvas:
А этот (как это?!) — работу JQuery с твиттером:
Достаточно быстро понимаешь, что js в слове jsFiddle не случайно. Приложение фактически является именно JavaScript песочницей, которую, в отличие от WYSIWYG, вполне можно использовать. Сколько я ни искал, годных аналогов в Chrome Web Store нет. Так что, спасибо Piotr, а также еще одному программисту: Oskar Krawczyk aka @Oskar.
jsFiddle — Chrome Web Store
Ах, да, это же Stateless проект, так что добро пожаловать на сайт.
@unnx
