Софт-Портал

Adobe Brackets скачать

Рейтинг: 5.0/5.0 (1438 проголосовавших)

Категория: Windows

Описание

Adobe Brackets

Adobe Brackets

Brackets — бесплатный редактор с открытым кодом для веб-разработчиков. Brackets ориентирован на работу с HTML. CSS и JavaScript. Эти же технологии лежат в основе самого редактора, что обеспечивает его кроссплатформенность т.е. совместимость с операционными системами Mac, Windows и Linux. Brackets создан и развивается Adobe Systems под лицензией MIT License и поддерживается на GitHub .

На сегодняшний день сообществом создано множество расширений, добавляющих большинство необходимых инструментов для работы над кодом, таких как система контроля версий Git. просмотр HTML-кода в браузере в реальном времени (Live Preview), синхронизация с FTP (Git-FTP) [1]. Принять участие в разработке и поддержке расширений может любой желающий.

История версий Править

  • 4 ноября 2014 года компания Adobe объявила о выпуске 1.0 версии Brackets. [2]
  • 15 октября 2015 года вышла версия 1.5 [3]. включающая новые возможности, такие как пользовательские горячие клавиши и JavaScript-подсказки.

Adobe Brackets:

  • скачать
  • скачать
  • Другие статьи, обзоры программ, новости

    Обзор открытой IDE Adobe Brackets

    Обзор открытой IDE Adobe Brackets


    С момента первого обзора среды (этот обзор был опубликован более чем год назад) IDE Brackets превратилась из просто многообещающего прототипа во вполне полноценный инструмент для разработки web-приложений. Недавно также был опубликован пост. в котором вскользь упоминалась эта среда, но сам текст и комментарии были так скупы на описание проекта, что я посчитал полезным рассказать сообществу о возможностях этой IDE более подробно.

    Немного информации о том, что из себя представляет IDE Brackets. Среда разрабатывается на web-платформе (HTML, CSS и JavaScript) для web-программистов с использованием Chromium Embedded Framework (CEF) компанией Adobe. В основе Brackets лежат такие проекты, как CodeMirror, jQuery, require.js, Bootstrap, Node.js. Исходные коды распространяются под open source лицензией MIT. Основная цель проекта — упрощение процесса web-разработки. Работа над IDE идёт по методологии scrum (спринтами по 2.5 недели). Среда вполне стабильна — сами разработчики IDE Brackets стали использовать её в своей повседневной работе уже достаточно давно. Скачать среду можно отсюда .

    Основные моменты: среда стала доступна для Linux, появилась поддержка Node.js, реализовано интеллектуальное автодополнение кода для HTML, CSS, JavaScript, сообщество создало более сотни полезных плагинов, плюс в разработке находится продвинутая система для упрощения создания макетов с отзывчивым дизайном, которая уже успела произвести WOW-эффект на тех, кто её видел.

    (под катом скриншоты

    Интеллектуальное автодополнение кода

    Благодаря новому API автодополнение работает везде: HTML, CSS, JavaScript (в том числе и для jQuery).

    HTML:

    CSS:

    JavaScript (jQuery):

    Inline-редактирование кода

    Одна из основных идей IDE — сокращение числа перемещений между файлами в рамках одного проекта — воплощается в жизнь с помощью, так называемого, Inline-редактирования, которое позволяет работать с контекстно-зависимыми частями других файлов, не покидая своё текущее местоположение в проекте. Вызывается горячей клавишей (Ctrl+E для PC / Cmd+E для Mac OS). Разработчики также добавляют новые фишки, использующие эту идею, например, «Inline Color Editor», «Inline Bezier Tool».

    Inline-редактирование CSS кода

    Inline-редактирование можно вызывать для нескольких элементов одновременно. Если к элементу применяется несколько стилей, между ними можно перемещаться выбрав соответствующий элемент из списка слева, или с помощью горячих клавиш Alt+^, Alt+v.

    Быстрый доступ к объявлению функции JavaScript:

    На данный момент работает с ощутимыми задержками, иногда не может найти объявление функции/метода.

    Inline Color Editor:

    Inline Bezier Tool:

    Инструмент визуализации кривых Безье в CSS transitions. Находится в стадии активной разработки.

    Быстрый доступ к документации (Quick Docs)

    На самом деле не такая уж и новая функция, но очень полезная и немного пересекается с предыдущей. Отображение справки по CSS-элементам непосредственно во время работы с кодом (Ctrl+K для PC / Cmd+K для Mac OS). Справочная система основана на базе материалов с webplatform.org .

    Управление плагинами

    За прошедшее время у IDE появился человеческий интерфейс для управления плагинами, которым разработчики очень гордятся, и, действительно, им очень удобно пользоваться:

    Стоит сказать, что на данный момент уже доступно более 120 дополнений. и их количество растёт. Вид IDE с дополнительными плагинами:

    Живой предпросмотр (Live Preview) на базе Node.js

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

    Особенность «живого предпросмотра» в том, что при редактировании CSS-файлов результаты отображаются сразу же после внесения изменений, при редактировании HTML и JavaScript — только после сохранения («живой предпросмотр» для HTML-файлов будет доступен со следующей версии. для JavaScript уже есть плагин. реализующий Live Preview). Также при редактировании HTML в Brackets в браузере подсвечивается соответствующий редактируемый элемент:

    Локализации

    Среда разработки доступна на 17 языках, в том числе на русском, японском, немецком, испанском, норвежском, чешском, польском языках. Поддержка русского языка не на самом высоком уровне, тем не менее работать можно. Самое большое недоразумение связано с отсутствием в семействе шрифтов Adobe Source кириллицы, поэтому используется текущий системный шрифт, что немного ломает общее восприятие программы. Конечно, это всё лечится сменой шрифта SourceCodePro, на тот где есть поддержка кириллицы, но для этого надо немного поработать руками.

    Изменение шрифта исходного кода

    Моё решение не блещет элегантностью, так что если кто-то придумает лучший способ, пожалуйста, поделитесь.
    Идея очень тупа — просто заменить файлы шрифтов, на тот, где есть кириллица. В Mac OS X и Linux я выбрал шрифт DejaVuSansMono.ttf (скачать который можно здесь ), в Windows 7 — consolas.ttf (поставляется вместе с операционной системой). Затем я просто заменил этим шрифтом, два файла в директории ресурсов Brackets: SourceCodePro-Medium.ttf и SourceCodePro-Regular.ttf, предварительно переименовав шрифт, которым я заменял существующие шрифты от Adobe.

    Пути, где располагаются файлы шрифтов, в разных операционных системах:
    • Linux. /opt/brackets/www/styles/fonts/SourceCodePro/
    • Mac OS X. /Applications/Brackets\ Sprint\ 29.app/Contents/www/styles/fonts/SourceCodePro/
    • Windows. C:\Program Files (x86)\Brackets Sprint 28\www\styles\fonts\SourceCodePro
    Responsive Design Tool

    В мае этого года Lee Brimelow, рассказал в своём блоге о многообещающем плагине (пока недоступен для пользователей) для упрощения работы над отзывчивым дизайном. Принцип, которого заключается в создании визуальной базы для работы с media queries CSS3. В общем, как говорят, лучше один раз увидеть, чем сто раз услышать:

    Как было сказано выше, плагин пока находится где-то в закромах автора. На предложение разместить проект на Github’е, он ответил. что Responsive Design Tool не будет распространяться в виде плагина, а будет внедрён непосредственно в Brackets, поэтому надо ждать официального выхода.

    Поддержка Linux

    На данный момент Linux-версия Brackets находится даже не в стадии альфа-версии, как говорят сами разработчики это своего рода «супер ранний предпросмотр», потому что ещё не вся базовая функциональность реализована/работает так как надо. Тем не менее текущую Linux-версию можно использовать для работы (с некоторыми ограничениями).

    Ограничения Linux-версии и решение проблемы с запуском

    Известно много проблем в версии текущей версии для Linux, самые существенные:
    • долгий запуск программы;
    • не работает подсветка в режиме живого предпросмотра;
    • расширения могут быть установлены только вручную в
    /.Brackets/extensions/user;
  • невозможно сохранить файлы, которые были созданы в среде (обходной путь — создавать файлы вне среды и перебрасывать их в среду с помощью мыши).
  • Также на некоторых системах может возникать проблема с запуском программы из-за неверной ссылки на libudev.so.0. В этом случае надо просто сделать символическую ссылку с libudev.so.1 на libudev.so.0. Более подробное решение проблемы можно найти здесь.

    Ссылки Итоги

    Да, по возможностям и количеству плагинов, IDE Brackets на данный момент всё ещё уступает другим зрелым средам и редакторам, но тем не менее она уже сейчас может стать для web-разработчика полноценным инструментом, предоставив некоторые уникальные возможности. Недостатки, конечно, есть, например, отсутствует понятный механизм настройки IDE, не самая быстрая скорость загрузки приложения и работы определённых функций (особенно inline-редактирования JavaScript). В любом случае сам факт того, что абсолютно любой разработчик, знакомый с web-программированием, может подключиться к разработке Brackets и воплотить в жизнь свои потрясающие идеи, делает эту среду особенной.

    P.S. Если вы нашли ошибку или неточность в тексте прошу сообщить мне через личные сообщения.

    Adobe brackets скачать

    Brackets. Текстовый редактор кода.

    Сегодня я хочу рассказать вам про еще один молодой, но очень перспективный редактор - brackets .

    Появился этот редактор уже давно, но он был очень сырой. Сейчас же он уже достаточно хорош, чтобы конкурировать даже с Sublime Text. Разрабатывается редактор фирмой Adobe. Редактор полностью кроссплатформерный, т.к. он написан с применением WEB технологий: html. css. js .

    Наверное, самой основной фишкой редактора является возможность живого редактирования страницы без необходимости перезагрузки. Заметьте, что это не банальная перезагрузка после того, как вы сохраните файл, а именно живое редактирование. На данном этапе это касается только html и css и не касается js. Но то, как это реализовано сейчас, выглядит очень даже хорошо и в скором времени, думаю, будет и поддержка js и т.д.

    Что же, давайте его скачаем. Для этого перейдите по ссылке brackets.io и нажмите кнопку download. При первом запуске вы увидите 2 файла, на примере которых можно поразбираться с редактором. Чтобы запустить функцию живого редактирования, нажмите на кнопку с молнией в правом верхнем углу редактора. У вас откроется браузер. Если вы будете изменять содержимое страницы, то будете видеть моментальные изменения в браузере.

    Вы можете также задавать css стили прямо в html файле. Например, создайте параграф и дайте ему какой-нибудь класс. Теперь нажмите ctrl+e (или cmd+e. если у вас Mac OS) и у вас откроется снизу окошко, где вы можете нажать кнопку New Rule и добавить css правило для данного элемента. При редактировании css. вы также будете видеть все изменения в браузере мгновенно.

    В css. если вы поставите курсор в какое-то обозначение цвета(#efefef, например) и нажмете ctrl+e (cmd+e ), то увидите палитру, где сможете выбрать нужный вам цвет и все также мгновенно видеть результат в браузере.

    Также, brackets подсказывает url адреса при подключении файлов, css стили и прочее, так что вам не придется писать это все вручную. Вообще, в brackets очень много всяких мелких фишек, которые очень удобны. Описывать их все нет смысла. Если вы будете пользоваться редактором, то обязательно их все увидите.

    Конечно же, для brackets написаны плагины. Чтобы их установить, нажмите на фигурку лего в правом верхнем углу редактора. Вы увидите большой список всех возможных плагинов. Также, вы можете воспользоваться поиском, чтобы найти нужный. Например, введем в поиск emmet и нажмем кнопку install. Все, плагин установлен и готов к работе.

    Итак, подводя итог, я хочу сказать, что это правда очень хороший и удобный редактор, но лично я пока что не стал бы его использовать как основной, потому что в нем нет нужных мне вещей, которые есть в Sublime Text и он пока что недостаточно быстро работает. Однако, чтобы сверстать какую-нибудь страничку, я буду использовать именно этот редактор, т.к. для этих целей он подходит идеально, а Live Coding (живое редактирование) очень в этом помогает.

    Что же, на этом все, спасибо за внимание и до встречи!

    Adobe Brackets – функциональный редактор исходного кода

    NeroHelp. info Adobe Brackets – функциональный редактор исходного кода


    Фирма Adobe Systems создала уникальную программу Brackets. Предлагаемый пакет является универсальным редактором традиционного исходного кода, ориентированным на веб-дизайнеров и программистов. Приложение Brackets разработано с применением специальных веб-механизмов, среди которых HTML и javascript. Следовательно, любой специалист, способный создавать различные веб-страницы, сможет эффективно пользоваться и этим компактным редактором.

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

    В продукте Brackets реализован уникальный интерфейс с компактным навигационным меню на боковой панели, помогающим оперативно переключаться между последними обработанными объектами. Благодаря интегрированному меню, профессионал сможет спокойно открывать персональный каталог проектов и анализировать в нем все файлы.


    К особенностям решения Brackets относится поддержка двух специальных функций, в числе которых «Live Preview» и «Quick Edit». Известно, что в любом традиционном редакторе кода для изменения стиля отдельных HTML-элементов нужно искать подходящую таблицу стилей и требуемые классы, производить обработку и сохранять результаты, после чего возвращаться к исходному файлу. А вот Brackets способен редактировать клиентские таблицы стилей в исходном HTML-документе. Для выполнения подобной операции достаточно щелкнуть мышью по HTML-элементу и воспользоваться в отобразившемся контекстном меню встроенной опцией «Quick Edit».

    Также механизм «Quick Edit» самостоятельно извлекает особый CSS-класс, добавляемый к HTML-элементу, из отдельного файла текущей таблицы стилей и показывает его внутри строки для удобства обработки специалистом. А по окончании редактирования понадобится выйти из режима «Quick Edit» нажатием кнопки «Escape».


    Вас интересует вся доступная информация по теме: Москва. Продам запчасти - запчасти шевроле. В таком случае, Вам следует прямо сейчас посетить сайт www.opelzip.ru!

    Рейтинг статьи

    Brackets: Новаторский проект текстового редактора от Adobe

    Brackets: Новаторский проект текстового редактора от Adobe

    В отличие от Apple, Adobe, кажется, любит обнародовать свои разработки ещё на проектном этапе их внедрения. Это и хорошо, и плохо. Пользователю любопытно заглянуть "на кухню" Adobe. Правда, жаль тратить время на освоение проекта, который впоследствии порой так и не реализуется, а просто бесследно исчезает. Столь же малоприятно опробовать в работе раннюю бета-версию какого бы то ни было программного продукта. Допускать пользователей к работе с едва функционирующей модификацией вашего ресурса рискованно - можно отбить у них всякий интерес к окончательному варианту.


    Как бы то ни было, Adobe часто предлагает публике свои лишь готовящиеся к запуску разработки, а последний пока пример таковой - текстовый редактор под названием Brackets. По заверениям представителей Adobe, это приложение будет открытым, инновационным, позволяющим целенаправленно решать конкретные задачи и расширяемым. Оправдает ли Brackets столь высокие ожидания? Читайте дальше, и узнаете.

    Что такое Brackets?


    Домашняя страница проекта Brackets преподносит нам данное приложение как "редактор кодовой основы с открытым исходным кодом, сконструированный с помощью веб-средств для веб-среды". Имеется в виду способ его построения средствами HTML, CSS и javascript, а значит, и его максимальная податливость к расширению и модификации. Здорово, тем более, что исходный код его 100 %-но открытый.

    Удачный ход в плане пи-ара

    Открытый исходный код Brackets - особенность весьма примечательная. Не припомню, чтобы корпорация Adobe когда-либо вообще всерьёз тратила время и силы на разработку бесплатных приложений с открытым исходным кодом. Похоже, мы наблюдаем историческое событие, интересно, каковы будут его последствия?

    Я, однозначно, одобряю этот шаг Adobe и такие проекты в целом. Нельзя отрицать, что в последнее время корпорация сильно упала в глазах веб-разработчиков.

    Проект Brackets сам по себе уже является достойным ответом на эти упрёки. Если чем и можно расположить к себе веб-дизайнерское сообщество, так именно шагом навстречу ему с неким гостинцем, с которым всем интересно повозиться и внутрь которого можно заглянуть.

    Кроме того, Brackets - проект, (наконец-то!) специально предназначенный программистам, не WYSIWYG-полуфабрикат, рассчитанный на полное вытеснение программирования из процесса веб-проектирования. Кому, как не Adobe, разрабатывать текстовые редакторы в качестве отраслевых стандартов - так нет же, возглавляет их список продукция вовсе не с "Adobe-конвейера": Sublime Text, Textmate, Coda, Espresso; все эти названия гораздо более на слуху, чем Adobe.

    "Стряпайте" программы общими усилиями

    Поскольку Brackets - проект с открытым исходным кодом, его текущее размещение на Git Hub вполне объяснимо. То есть, любой вооружённый знанием CSS, HTML и javascript мастер может подключиться к проекту, внеся в его развитие свою лепту. Adobe, вообще-то, даже делает упор на коллективный способ реализации данного проекта. Если вы заметите в нём некие недочёты, смело исправляйте их!


    При желании лично опробовать Brackets в деле откройте страницу проекта, найдите раздел скачивания и позаимствуйте оттуда .zip-файл. Будьте готовы к тому, что ресурс представляет собой нечто не вполне привычное, ведь приложение ещё очень "сырое" и совсем не предназначено для использования в обычном режиме.


    Скачав .zip, откройте его, и увидите целый массив файлов. Само приложение хранится в папке “bin” ("корзина"), а зачем же там всё прочее?


    Остальные файлы как раз и содержат исходные коды. Поскольку данное приложение сконструировано средствами HTML, CSS и javascript, оно не является "родным" своей программной среде, оно лишь снабжено "родной" ей "обёрткой" для облегчения ему доступа к локально сохраняемым файлам.

    Имея прямой доступ ко всем исходным данным, вы можете сразу же открывать нужные файлы и вносить в них изменения. Запросто!


    Работа с Brackets

    Открыв приложение Brackets, вы сразу заметите, что Adobe очень старается уйти от своей привычной "панельной" модели интерфейса - загромождённой иконками, значками инструментальных меню, списками опций и т. п. Явно видя во всей этой всячине "архитектурные излишества", попросту затрудняющие веб-проектирование, разработчики корпорации предпочли строгий двухстолбцовый интерфейс, показанный ниже.


    Как видите, данный сервис смотрится довольно браво, а его пользовательский интерфейс сильно напоминает столь знаменитый интерфейс Лорена Брихтера (Loren Brichter) с тёмной боковой панелью и светлым центром. Опции меню пока доступны через окно приложения, но это временное неудобство, оно будет устранено в дальнейшем.

    Функция синтаксического выделения настроена и запущена, окно просмотра файлов слева вполне симпатичное, только, что же тут новаторского?

    Беглое радктирование (Quick Edit)

    Представители Adobe уверяют, что у них масса идей по превращению Brackets в действительно новаторский текстовый редактор. С учётом того, что данный сегмент рынка уже в течение нескольких лет испытывает настоящий инновационный голод (одним Sublime Text 2 сыт не будешь), радоваться определённо есть чему.

    К сожалению, степень новизны проекта такова, что в данный момент его и сравнить почти не с чем. Всё же, пару нюансов рассмотреть стоит, первый из них - Quick Edit.

    Скажем, просматриваете вы вашу HTML-кодировку, и вам вдруг срочно требуется внести некую CSS-правку. В любом другом текстовом редакторе вам бы пришлось открывать для этого CSS-файл. Brackets же позволяет вам обойтись наведением курсора на класс и нажатием клавиш Command+E для вызова функции Quick Edit.


    Как видите, HTML-кодировка раздвигается, являя взору скрытый CSS-уровень. Справа отображаются CSS-правила, задающие свойства выбранного вами класса. Выбирайте нужное простым кликом по нему и редактируйте текст слева, обновляя тем самым данные вашего .css-файла.

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

    Предварительный просмотр текущей правки (Live Preview)

    Ещё одно ценное новшество - возможность "примерять" ваш HTML-документ на браузер. Окно предварительного просмотра результатов текущей правки документа в вашем браузере открывается кликом по значку молнии в правом верхнем углу.


    В этом окне будут отображаться все последующие изменения - внося правку в CSS-структуру страницы, вы сможете на ходу наблюдать результаты её применения. В кнопке "Обновить" вообще нет необходимости.

    На данный момент опция работает только для Chrome и позволяет править только CSS. Если вы решите править непосредственно разметку, то вам придётся обновлять страницу вручную. Повторяю, эти неудобства нам, видимо, терпеть недолго.

    Давать оценку Brackets на данном этапе явно рановато, однако, разработчики Adobe вынесли сервис на суд общественности, так что, прилюдно обсудить его достоинства, по-моему, вполне уместно.

    В своём нынешнем виде Brackets совершенно не годится для повседневного использования. Сервис "зависает", сбоит, ведёт себя непредсказуемо; все прелести недоработанной бета-версии налицо. Далее, порадовать пользователя ему особо нечем, разве что, опцией Quick Edit. Даже стандартные функции, без которых немыслим профессиональный редактор, всё ещё в процессе добавления: переключение в режим разделённого экрана, возможность многократного выделения фрагментов и т. д.

    При всём при том, текущее состояние проекта - не главное, гораздо важнее его будущее. У Brackets есть все шансы превратиться в нечто грандиозное, если его доведут до ума настоящие умельцы.

    Sublime Text продемонстрировал нам, насколько расширяют возможности обычного текстового редактора податливость к адаптации и богатство модульной архитектуры. Brackets продолжает и развивает эту традицию. Если Adobe не забросит этот проект и хотя бы пару лет будет заниматься им достаточно плотно, то мы получим шикарный текстовый редактор.

    Увы, но скептик внутри меня сильнее оптимиста. Корпорация Adobe взяла моду с помпой начинать проекты, поднимать вокруг них шумиху, а потом бросать их на полпути ради новых, более прибыльных и перспективных. Постигнет ли та же участь Brackets? Трудно сказать.

    Подведём итоги: отрадно видеть, что подход Adobe к реализации проекта, рассчитанного на веб-разработчиков, выбран с учётом интересов этих самых веб-разработчиков, и я надеюсь, корпорация данный проект не загубит.

    Обнаружили ошибку или мёртвую ссылку?
    Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
    В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.

    Нужна органическая вечная ссылка из данной статьи? Постовой?
    Подробности здесь

    Вам понравился материал? Поблагодарить легко!
    Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

    2009—2014 © CoolWebmasters.Com - онлайн-журнал для профессиональных веб-дизайнеров и разработчиков. Все права защищены.
    Наш онлайн-журнал предоставляет самую свежую и актуальную информацию для профессиональных веб-дизайнеров и разработчиков в виде переводов статей и новостей, полученных с зарубежных информационных ресурсов. Дизайн и разработка сайта - лаборатория D.L.E. Templates.Com

    Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на наш сайт!

    Мы сами вдохновляемся материалами, которые предлагаем вам на обозрение, будь то интересные руководства или полезные и впечатляющие подборки (дизайнов, шаблонов, сниппетов и т.д.), и мы всегда сохраняем ссылки на источники, и сообщаем авторов изображений, использованных в подборках или руководствах. Зачастую, ссылка на источник не ведёт напрямую к автору шедевра, но мы ведь не волшебники, чтобы угадывать, кто является автором.

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

    Обзор открытой IDE Adobe Brackets

    Обзор открытой IDE Adobe Brackets


    С момента первого обзора среды (этот обзор был опубликован более чем год назад) IDE Brackets превратилась из просто многообещающего прототипа во вполне полноценный инструмент для разработки web-приложений. Недавно также был опубликован пост. в котором вскользь упоминалась эта среда, но сам текст и комментарии были так скупы на описание проекта, что я посчитал полезным рассказать сообществу о возможностях этой IDE более подробно.

    Немного информации о том, что из себя представляет IDE Brackets. Среда разрабатывается на web-платформе (HTML, CSS и JavaScript) для web-программистов с использованием Chromium Embedded Framework (CEF) компанией Adobe. В основе Brackets лежат такие проекты, как CodeMirror, jQuery, require.js, Bootstrap, Node.js. Исходные коды распространяются под open source лицензией MIT. Основная цель проекта — упрощение процесса web-разработки. Работа над IDE идёт по методологии scrum (спринтами по 2.5 недели). Среда вполне стабильна — сами разработчики IDE Brackets стали использовать её в своей повседневной работе уже достаточно давно. Скачать среду можно отсюда .

    Основные моменты: среда стала доступна для Linux, появилась поддержка Node.js, реализовано интеллектуальное автодополнение кода для HTML, CSS, JavaScript, сообщество создало более сотни полезных плагинов, плюс в разработке находится продвинутая система для упрощения создания макетов с отзывчивым дизайном, которая уже успела произвести WOW-эффект на тех, кто её видел.

    (под катом скриншоты

    Интеллектуальное автодополнение кода

    Благодаря новому API автодополнение работает везде: HTML, CSS, JavaScript (в том числе и для jQuery).

    HTML:

    CSS:

    JavaScript (jQuery):

    Inline-редактирование кода

    Одна из основных идей IDE — сокращение числа перемещений между файлами в рамках одного проекта — воплощается в жизнь с помощью, так называемого, Inline-редактирования, которое позволяет работать с контекстно-зависимыми частями других файлов, не покидая своё текущее местоположение в проекте. Вызывается горячей клавишей (Ctrl+E для PC / Cmd+E для Mac OS). Разработчики также добавляют новые фишки, использующие эту идею, например, «Inline Color Editor», «Inline Bezier Tool».

    Inline-редактирование CSS кода

    Inline-редактирование можно вызывать для нескольких элементов одновременно. Если к элементу применяется несколько стилей, между ними можно перемещаться выбрав соответствующий элемент из списка слева, или с помощью горячих клавиш Alt+^, Alt+v.

    Быстрый доступ к объявлению функции JavaScript:

    На данный момент работает с ощутимыми задержками, иногда не может найти объявление функции/метода.

    Inline Color Editor:

    Inline Bezier Tool:

    Инструмент визуализации кривых Безье в CSS transitions. Находится в стадии активной разработки .

    Быстрый доступ к документации (Quick Docs)

    На самом деле не такая уж и новая функция, но очень полезная и немного пересекается с предыдущей. Отображение справки по CSS-элементам непосредственно во время работы с кодом (Ctrl+K для PC / Cmd+K для Mac OS). Справочная система основана на базе материалов с webplatform.org .

    Управление плагинами

    За прошедшее время у IDE появился человеческий интерфейс для управления плагинами, которым разработчики очень гордятся, и, действительно, им очень удобно пользоваться:

    Стоит сказать, что на данный момент уже доступно более 120 дополнений. и их количество растёт. Вид IDE с дополнительными плагинами:

    Живой предпросмотр (Live Preview) на базе Node.js

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

    Особенность «живого предпросмотра» в том, что при редактировании CSS-файлов результаты отображаются сразу же после внесения изменений, при редактировании HTML и JavaScript — только после сохранения («живой предпросмотр» для HTML-файлов будет доступен со следующей версии. для JavaScript уже есть плагин. реализующий Live Preview). Также при редактировании HTML в Brackets в браузере подсвечивается соответствующий редактируемый элемент:

    Локализации

    Среда разработки доступна на 17 языках, в том числе на русском, японском, немецком, испанском, норвежском, чешском, польском языках. Поддержка русского языка не на самом высоком уровне, тем не менее работать можно. Самое большое недоразумение связано с отсутствием в семействе шрифтов Adobe Source кириллицы, поэтому используется текущий системный шрифт, что немного ломает общее восприятие программы. Конечно, это всё лечится сменой шрифта SourceCodePro, на тот где есть поддержка кириллицы, но для этого надо немного поработать руками.

    Изменение шрифта исходного кода

    Моё решение не блещет элегантностью, так что если кто-то придумает лучший способ, пожалуйста, поделитесь.
    Идея очень тупа — просто заменить файлы шрифтов, на тот, где есть кириллица. В Mac OS X и Linux я выбрал шрифт DejaVuSansMono.ttf (скачать который можно здесь ), в Windows 7 — consolas.ttf (поставляется вместе с операционной системой). Затем я просто заменил этим шрифтом, два файла в директории ресурсов Brackets: SourceCodePro-Medium.ttf и SourceCodePro-Regular.ttf, предварительно переименовав шрифт, которым я заменял существующие шрифты от Adobe.

    Пути, где располагаются файлы шрифтов, в разных операционных системах:

    • Linux. /opt/brackets/www/styles/fonts/SourceCodePro/
    • Mac OS X. /Applications/Brackets Sprint 29.app/Contents/www/styles/fonts/SourceCodePro/
    • Windows. C:Program Files (x86)Brackets Sprint 28wwwstylesfontsSourceCodePro
    Responsive Design Tool

    В мае этого года Lee Brimelow, рассказал в своём блоге о многообещающем плагине (пока недоступен для пользователей) для упрощения работы над отзывчивым дизайном. Принцип, которого заключается в создании визуальной базы для работы с media queries CSS3. В общем, как говорят, лучше один раз увидеть, чем сто раз услышать:

    Как было сказано выше, плагин пока находится где-то в закромах автора. На предложение разместить проект на Github'е, он ответил. что Responsive Design Tool не будет распространяться в виде плагина, а будет внедрён непосредственно в Brackets, поэтому надо ждать официального выхода.

    Поддержка Linux

    На данный момент Linux-версия Brackets находится даже не в стадии альфа-версии, как говорят сами разработчики это своего рода «супер ранний предпросмотр», потому что ещё не вся базовая функциональность реализована/работает так как надо. Тем не менее текущую Linux-версию можно использовать для работы (с некоторыми ограничениями).

    Ограничения Linux-версии и решение проблемы с запуском

    Известно много проблем в версии текущей версии для Linux, самые существенные:

    • долгий запуск программы;
    • не работает подсветка в режиме живого предпросмотра;
    • расширения могут быть установлены только вручную в
    /.Brackets/extensions/user;
  • невозможно сохранить файлы, которые были созданы в среде (обходной путь — создавать файлы вне среды и перебрасывать их в среду с помощью мыши).
  • Также на некоторых системах может возникать проблема с запуском программы из-за неверной ссылки на libudev.so.0. В этом случае надо просто сделать символическую ссылку с libudev.so.1 на libudev.so.0. Более подробное решение проблемы можно найти здесь.

    Ссылки Итоги

    Да, по возможностям и количеству плагинов, IDE Brackets на данный момент всё ещё уступает другим зрелым средам и редакторам, но тем не менее она уже сейчас может стать для web-разработчика полноценным инструментом, предоставив некоторые уникальные возможности. Недостатки, конечно, есть, например, отсутствует понятный механизм настройки IDE, не самая быстрая скорость загрузки приложения и работы определённых функций (особенно inline-редактирования JavaScript). В любом случае сам факт того, что абсолютно любой разработчик, знакомый с web-программированием, может подключиться к разработке Brackets и воплотить в жизнь свои потрясающие идеи, делает эту среду особенной.

    P.S. Если вы нашли ошибку или неточность в тексте прошу сообщить мне через личные сообщения.

    Обзор открытой IDE Adobe Brackets - Cайт - У Крайнего

    19 августа 2013 в 04:27

    Обзор открытой IDE Adobe Brackets


    С момента первого обзора среды (этот обзор был опубликован более чем год назад) IDE Brackets превратилась из просто многообещающего прототипа во вполне полноценный инструмент для разработки web-приложений. Недавно также был опубликован пост. в котором вскользь упоминалась эта среда, но сам текст и комментарии были так скупы на описание проекта, что я посчитал полезным рассказать сообществу о возможностях этой IDE более подробно.

    Немного информации о том, что из себя представляет IDE Brackets. Среда разрабатывается на web-платформе (HTML, CSS и JavaScript) для web-программистов с использованием Chromium Embedded Framework (CEF) компанией Adobe. В основе Brackets лежат такие проекты, как CodeMirror, jQuery, require.js, Bootstrap, Node.js. Исходные коды распространяются под open source лицензией MIT. Основная цель проекта — упрощение процесса web-разработки. Работа над IDE идёт по методологии scrum (спринтами по 2.5 недели). Среда вполне стабильна — сами разработчики IDE Brackets стали использовать её в своей повседневной работе уже достаточно давно. Скачать среду можно отсюда .

    Основные моменты: среда стала доступна для Linux, появилась поддержка Node.js, реализовано интеллектуальное автодополнение кода для HTML, CSS, JavaScript, сообщество создало более сотни полезных плагинов, плюс в разработке находится продвинутая система для упрощения создания макетов с отзывчивым дизайном, которая уже успела произвести WOW-эффект на тех, кто её видел.

    (под катом скриншоты

    Интеллектуальное автодополнение кода


    Благодаря новому API автодополнение работает везде: HTML, CSS, JavaScript (в том числе и для jQuery).

    HTML:


    CSS:

    JavaScript (jQuery):


    Inline-редактирование кода


    Одна из основных идей IDE — сокращение числа перемещений между файлами в рамках одного проекта — воплощается в жизнь с помощью, так называемого, Inline-редактирования, которое позволяет работать с контекстно-зависимыми частями других файлов, не покидая своё текущее местоположение в проекте. Вызывается горячей клавишей (Ctrl+E для PC / Cmd+E для Mac OS). Разработчики также добавляют новые фишки, использующие эту идею, например, «Inline Color Editor», «Inline Bezier Tool».

    Inline-редактирование CSS кода


    Inline-редактирование можно вызывать для нескольких элементов одновременно. Если к элементу применяется несколько стилей, между ними можно перемещаться выбрав соответствующий элемент из списка справа, или с помощью горячих клавиш Alt+^, Alt+v.

    Быстрый доступ к объявлению функции JavaScript:


    На данный момент работает с ощутимыми задержками, иногда не может найти объявление функции/метода.

    Inline Color Editor:


    Inline Bezier Tool:


    Инструмент визуализации кривых Безье, используемых в качестве временной функции в CSS transitions. Находится в стадии активной разработки .

    Быстрый доступ к документации (Quick Docs)


    На самом деле не такая уж и новая функция, но очень полезная и немного пересекается с предыдущей. Отображение справки по CSS-элементам непосредственно во время работы с кодом (Ctrl+K для PC / Cmd+K для Mac OS). Справочная система основана на базе материалов с webplatform.org .

    Быстрый доступ к файлам проекта (Quick Open)


    При нажатии Ctrl/Cmd-Shift-O всплывает приятная панель быстрого перехода к файлам проекта. Вводим начало имени необходимого файла — получаем результат:

    Управление плагинами


    За прошедшее время у IDE появился человеческий интерфейс для управления плагинами, которым разработчики очень гордятся, и, действительно, им очень удобно пользоваться:

    Стоит сказать, что на данный момент уже доступно более 120 дополнений. среди которых можно найти Emmet. средства интеграции c Git. мини-карту кода а-ля Sublime Text и многие другие. Также стоит отметить, что количество доступных плагинов стабильно растёт. Вид IDE с дополнительными плагинами:

    Живой предпросмотр (Live Preview) на базе Node.js


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

    Особенность «живого предпросмотра» в том, что при редактировании CSS-файлов результаты отображаются сразу же после внесения изменений, при редактировании HTML и JavaScript — только после сохранения («живой предпросмотр» для HTML-файлов будет доступен со следующей версии. для JavaScript уже есть плагин. реализующий Live Preview). Также при редактировании HTML в Brackets в браузере подсвечивается соответствующий редактируемый элемент:

    Локализации


    Среда разработки доступна на 17 языках, в том числе на русском, японском, немецком, испанском, норвежском, чешском, польском языках. Поддержка русского языка не на самом высоком уровне, тем не менее работать можно. Самое большое недоразумение связано с отсутствием в семействе шрифтов Adobe Source кириллицы, поэтому используется текущий системный шрифт, что немного ломает общее восприятие программы. Конечно, это всё лечится сменой шрифта SourceCodePro, на тот, где есть поддержка кириллицы, но для этого надо немного поработать руками.

    Изменение шрифта исходного кода

    Моё решение не блещет элегантностью, так что если кто-то придумает лучший способ, пожалуйста, поделитесь.
    Идея очень тупа — просто заменить файлы шрифтов, на тот, где есть кириллица. В Mac OS X и Linux я выбрал шрифт DejaVuSansMono.ttf (скачать который можно здесь ), в Windows 7 — consolas.ttf (поставляется вместе с операционной системой). Затем я просто заменил этим шрифтом, два файла в директории ресурсов Brackets: SourceCodePro-Medium.ttf и SourceCodePro-Regular.ttf, предварительно переименовав шрифт, которым я заменял существующие шрифты от Adobe.

    Пути, где располагаются файлы шрифтов, в разных операционных системах:
    • Linux. /opt/brackets/www/styles/fonts/SourceCodePro/
    • Mac OS X. /Applications/Brackets\ Sprint\ 29.app/Contents/www/styles/fonts/SourceCodePro/
    • Windows. C:\Program Files (x86)\Brackets Sprint 28\www\styles\fonts\SourceCodePro
    Responsive Design Tool


    В мае этого года Lee Brimelow, рассказал в своём блоге о многообещающем плагине (пока недоступен для пользователей) для упрощения работы над отзывчивым дизайном. Принцип этого плагина заключается в создании визуальной базы для работы с media queries CSS3. В общем, как говорят, лучше один раз увидеть, чем сто раз услышать:

    Как было сказано выше, плагин пока находится где-то в закромах автора. На предложение разместить проект на Github'е, он ответил. что Responsive Design Tool не будет распространяться в виде плагина, а будет внедрён непосредственно в Brackets, поэтому надо ждать официального выхода.

    Поддержка Linux


    На данный момент Linux-версия Brackets находится даже не в стадии альфа-версии, как говорят сами разработчики это своего рода «супер ранний предпросмотр», потому что ещё не вся базовая функциональность реализована/работает так как надо. Тем не менее текущую Linux-версию можно использовать для работы (с некоторыми ограничениями).

    Ограничения Linux-версии и решение проблемы с запуском

    Известно много проблем в версии текущей версии для Linux, самые существенные:
    • долгий запуск программы;
    • не работает подсветка в режиме живого предпросмотра;
    • расширения могут быть установлены только вручную в
    /.Brackets/extensions/user;
  • невозможно сохранить файлы, которые были созданы в среде (обходной путь — создавать файлы вне среды и перебрасывать их в среду с помощью мыши).
  • Также на некоторых системах может возникать проблема с запуском программы из-за неверной ссылки на libudev.so.0. В этом случае надо просто сделать символическую ссылку с libudev.so.1 на libudev.so.0. Более подробное решение проблемы можно найти здесь .

    Итоги


    Да, по возможностям и количеству плагинов, IDE Brackets на данный момент всё ещё уступает другим зрелым средам и редакторам, но тем не менее она уже сейчас может стать для web-разработчика полноценным инструментом, предоставив некоторые уникальные возможности. Недостатки, конечно, есть, например, отсутствует понятный механизм настройки IDE, не самая быстрая скорость загрузки приложения и работы определённых функций (особенно inline-редактирования JavaScript). В любом случае сам факт того, что абсолютно любой разработчик, знакомый с web-программированием, может подключиться к разработке Brackets и воплотить в жизнь свои потрясающие идеи, делает эту среду особенной.

    Ссылки

    P.S. Если вы нашли ошибку или неточность в тексте, прошу сообщить мне через личные сообщения.