0,0
рейтинг
4 ноября 2014 в 21:23

Разработка → Анонс Brackets 1.0 и Extract for Brackets (Preview версия)

image

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

Сегодня, спустя почти 3 года, в течение которых участвовало 245 контрибьюторов, наконец вышла версия 1.0 — способ объявить миру, что Brackets готов. Несмотря на то, что выпуск имеет версию 1.0, разработчики относятся к нему как и к любому другому релизу. Новые продолжат выпускаться так же часто как и сейчас — каждые 3-4 недели.

Встречайте Extract for Brackets (preview)


Отдельно заслуживает внимания плагин Extract for Brackets, который наконец доступен для публичного тестирования, предназначенный упростить верстку веб-сайтов.

Так выглядит окно плагина: открытый .psd-файл и боковая панель со слоями. Очень похоже на окно Photoshopa.

image

Полноценной работы со слоями еще нет, пока только самый минимум: показать/скрыть.

Перейдем к вкусностям.

1. Щелкнув на элемент можно узнать его размеры в пикселях/процентах, а так же координаты на странице.
Показать
image

2. Чтобы определить расстояние между элементами, достаточно выбрать первый элемент и с зажатым шифтом щелкнуть по второму.
Показать
image

3. Работать с градиентами и изображениями теперь одно удовольствие. Просто кликаем на изображение и начинаем писать css-свойство background. В выпадающем меню плагин предложит несколько вариантов: вставить в виде кода как градиент (если это градиент) или же сохранить как картинку.
Показать
image

Некоторые из возможностей можно еще посмотреть тут:



Скачать можно на оффициальном сайте.

Приятного кодинга!
Yuri Yakovlev @twentyfivesymbolsusername
карма
9,0
рейтинг 0,0
Front-end developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (77)

  • +6
    Я джва года ждал этот релиз :)
    • +1
      Это — больше декларативный релиз.
  • 0
    У кого-нибудь выходит работать с большими PSD файлами (больше 30мб) в Extract? У меня пропадает большинство слоев (в списке слоев они есть, но их не видно), пришлось разбивать элементы по разным файлам.
    • +1
      Возможно, что-то специфическое на слоях или слоев много, так как я спокойно работал с макетами ~50Мб.
      • 0
        у меня свежескачанный brackets почему-то выдает ошибку Files larger then 16 MB cannot be opened in Brackets
        • 0
          Это если открывать файлы самим редактором brackets, он не может редактировать файлы такого размера. Extract спокойно открывает. Видимо Вы не скачали Extract, или я чего-то не понял :)
    • 0
      У меня такая же проблема. загружаю psd в 16mb на превью все ок, но как загрузиться полностью так большенство слоев становятся прозрачными. Хотя в списке слоев они отображаются.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Нажмите F12 (инструменты разработчика), там в Console посмотрите, нету ли каких либо ошибок, т.к у меня все кнопки отображаются.
      • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      С кнопками проблем нет, проверял на 8 винде.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Отпишитесь потом… удалось ли пофиксить, а то интересно (:
  • +1
    Спасибо за хорошую новость! ))
  • +1
    А что с раширениями, типа Emmet, Hayaku и прочими, для упрощения написания html и css? Если нет, то это сомнительное упрощение верстки.
    Единственное, что пока нравится — это работа с градиентами, но есть подобные расширения для Photoshop.
  • 0
    Я правильно понимаю, что киллер-фича этого инструмента это получение верстки из .psd? Поправьте, если я не прав, а разве продукты Адоба сами не умееют выдавать вёрстку?
    • 0
      Насколько я знаю, тот же самый фотошоп это делать не умеет. Но они довольно давно разрабатывают Project Parfait, который плавно перетек в плагин, который мы наблюдаем сегодня.
    • 0
      Brackets — opensource, Edge CC — тот же Brackets с плюшками от Adobe
    • 0
      Киллер фича это скорее всего целый набор инструментов для продуктивной разработки фронтэнд (на что и берет курс Brackets) — инлайн редакторы (colorpicker, linear background, спрайты, css анимация и тд, в этом ключе будет дальнейшая разработка) livepreview, psd extract, десятки полезных расширений о которых если и говорить то в отдельной статье и так далее.
      • 0
        Анимации из PSD?!
        И про LivePreview, это уже есть давно в других редакторах, но работает оно только в связке с хромом (и возможно с некоторыми другими WebKit браузерами), так что революции здесь никакой нет.
        Считаю, сюда подойдет стандартный слоган WordPress сайтов: Just another editor.
        • 0
          Про анимацию я имел в виду редактор для временной функции, кривая безье.



          Быстро подобрать цвет, настроить анимацию, выбрать картинку из спрайта, настроить градиенты, сгенерировать css и картинки из psd файла в один клик (время на верстку из psd уменьшается в 2 раза), посмотреть документацию по свойству и тд — все это делает Brackets удобным инструментом для frontend разработки, не прибегая к сторонним ресурсам и не тратя лишнее время.

          Каждый выбирает то что ему ближе и понятней в управлении, у каждого разные задачи и потребности. Ваше право считать ровно так насколько вам это необходимо и что-то доказывать не имеет никакого смысла. Чем больше разных инструментов тем только лучше.
          • 0
            Хм, действительно, с анимацией интересное решение, нужно будет опробовать.
          • 0
            Погодите, а
            выбрать картинку из спрайта

            По-моему, во время разработки удобнее работать с отдельными картинками и на этапе публикации собирать их в спрайт. А по данному пункту выглядит, будто все наоборот.
            • 0
              По-моему вы не работаете с чужими проектами и спрайтами в css, соответственно вам это не интересно. Если в вашем или чужом проекте вы поменяете или добавите в файл спрайта пару картинок то с помощью редактора будет очень легко взять позицию картинки и не прибегать к сторонним лишним действиям.
              • 0
                Так зачем что-то самому клеить?! Я добавлю нужное изображение-иконку, как отдельный графический файл в CSS, а на этапе деплоймента укажу, что он должен входить в спрайт и все это сделается автоматически, без вылавливания размеров и позиций этой иконки в спрайте. В результате у меня останутся спрайты, что и были, и к ним добавится новая иконка.
                • 0
                  Сергей, кто как клеит спрайты и использует ли их вообще личное дело каждого, к тому же я отметил что готовые спрайты попадаются и в чужих проектах.

                  Для примера. Я скачал скрипт mp3 плеера, вся навигация кнопок идет спрайтом, хочется заменить пару иконок и добавить новые в конец. Не проблема, и делается это очень быстро в фотошопе. Вот для того чтобы добавить в css новые иконки из этого спрайта мне и поможет инлайн редактор спрайтов, ctrl+e и вуаля, еще одна секунда. Мне не нужно будет считать «руками» офсеты вне редактора.
  • 0
    Что за магическая возможность дебага страницы через хром?! Выходит мы все переворачиваем: пишем код в браузере и смотрим результат в редакторе. Или я чего-то не понимаю?
    • 0
      Это функция Live Preview.
      • 0
        Нет, я не об этом. Про LiveStyle, LiveReload и LivePreview я в курсе.

        Я несколько перепутал. Попробуйте в редакторе нажать F12 и у вас откроется панель разработчика в хроме, с помощью которой редактируется внешний вид редактора… Зачем?!
        • –1
          Похоже не баг, потому что в сокращениях указано.
          • 0
            Как я понял, это для отладки самого редактора и настройки темы.
            Штука полезная для тех, кто темы делает, но несколько сбивает с толку. В Sublime такой плюшки нет и это вызывает некоторые трудности в написании темы, точнее даже не в написании, а отладке.
            • +1
              Brackets это html/js решение в оболочке CEF3, простыми словами тот же браузер Хром в котором мы открываем страницы. Поэтому здесь так же есть Devtools. Это remote debug, хромовский протокол. Когда у вас открыт Brackets зайдите localhost:9234/ и вы увидите список активных окон. Это нужно разработчикам для отладки расширений и хакинга редактора, так же когда вы используете Devtools в вашем родном браузере при разработке сайтов. Devtools есть и в редакторе Atom, который тоже посмотрен под CEF3.

  • +3
    Когда же в родном шрифте Source Code Pro появится поддержка русских букв?
    image
    • 0
      А в brackets нельзя добавить fall-back шрифт?
    • +1
      А по-моему так даже круче — сразу видно за километр где случайно поставил русскую «с» вместо английской
    • +2
      Где-то в комментах читал, что готовят новую версию шрифта с нормальной кириллицей. Обещали выкатить до конца этого года, но в целом, релиз шрифта никак не зависит от команды Брекетса.

      Пользуюсь ПТ моно, мне норм
    • 0
      Посмотрите пока на шрифт Pragmata, неплохой моноширинник с поддержкой кириллицы.
  • 0
    Для Linux .rpm нет, только .deb?
    • 0
      Можно ведь собрать из исходников.
  • +1
    Только вот использовать ее как замену, скажем, Eclipse или Netbeans не получится — слишком уж я привык ко всяким там быстрым переходам к объявлению функций и т.д. Впрочем, если я не нашел нужного плагина — ткните, пожалуйста.
    • +1
      Ctrl+E работает и с фунциями, вы не об этом?

      • +1
        Вот это да! Вот спасибо! И Brackets получает второй шанс.
        • 0
          Мда… рано возрадовался. С PHP у меня такой трюк не проходит… впрочем, эту проблему частично можно нивелировать с помощью «Быстро открыть» — Ctrl+Shift+O… Если все файлы по PSR разложены и точно известно, какой файл нужен. Однако навигации по коду тоже не помешало бы, а ее у меня найти тоже не получилось. Ну, чтобы видеть все дерево файла — структуру объектов, методов и т.д.
          • 0
            Если вы работаете с php то советую поставить данное расширение. brackets.dnbard.com/extension/php-sig.php-smarthints
            Человек работает над лучшей поддержкой php в редакторе, так же поищите в менеджере расширений по слову php, там есть еще плагины. Хочу отметить что Brackets в первую очередь текстовый редактор (а не среда разработки ide) для frontend разработки, об этом говорит сама команда. Лучшая поддержка php в большей степени зависит от комьюнити. Дальнейшее направление редактора как и прежде будет в сторону вебдизайна.
          • 0
            The state of PHP in Brackets, Andrew MacKenzie (автор расширения php-sig.php-smarthints)

            https://groups.google.com/forum..
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              Вангую, вы коханщик )))
              На самом деле, та же ситуация и с go. Python пока в ней не крутил — процентов на 80 уверен, что там пока тоже будет не очень. Но надежда есть.

              И потом — лично я ищу IDE из соображений, чтобы она нормально держалась с одновременно работающими Outlook и Oracle SQL developer. Если совместно с последним запустить Eclipse или Netbeans, то будет страх и слезы. Что уж только не перепробовал… А Brackets, хоть и используют довольно странную с моей точки зрения архитектуру (с моей точки зрения, подчеркну), но держались нормально… даже почти не лагало…
              • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Немного новостей.

    — Ведется разработка LivePreview в любом браузере. Следить, внимательно читать и пробывать тут
    — Как вы знаете дальше будет курс на инлайн редакторы. К примеру, если вы работаете не просто с беграундом но и с градиентами то вас наверняка заинтересует плагин «Inline Gradient Editor», можно поставить через менеджер расширений. А чуть попозже мы увидим редактор для спрайтов — вы нажимаете Ctrl+E и выбираете область с картинкой из спрайта, значение position подставляется автоматом.

  • 0
    Я ждал этого обновления!
  • +4
    Может, написать статью «Brackets для сомневающихся», где описать, почему кроме него другие веб-редакторы не нужны (исскусство заголовка, а не повод для холивара)? Ведь я сам долго сомневался, стоит ли связываться, и не остановиться ли на Atom, Eclipse, NetBeans или чём-то подобном.
    • 0
      Я бы почитал, а пока особой пользы в Brackets не вижу.
      • +4
        Договорились, в выходные тогда постараюсь написать. Примерный план статьи:
        1. Поддерживаемые типы форматов, удобства, подсветка синтаксиса
        2. Базовая настройка
        3. Плагины, рекомендуемые к установке (grunt, less, beautify и т.п.)
        4. Сравнение с NetBeans, WebStorm, Eclipse и Sublime (основной упор на то, что хорошее сочетание цена/качество)

        Если нужно осветить ещё какие-то аспекты, пишите в комментариях.
        • 0
          Сравнивать среды разработки IDE и текстовый редактор заточенный под frontend разработку будет не правильно, но попробуйте.

          Недавно был обзор текстовых редакторов для кода
          xakep.ru/texteditor-for-coding/
          • 0
            В представленном списке Sublime тоже не ide и, как я считаю, прямой конкурент Brackets. На это сравнение будет интересно посмотреть.
            • 0
              Не понял вас, там как раз и идет сравнение текстовых редакторов и это правильно. Прямой конкурент не Sublime а скорей всего такой же Open Source редактор Atom, построенный по той же технологии что и Brackets.
              • 0
                А причем здесь технология на которой построен редактор? Вы их сравнивайте по функциональному назначению. Просто использовать его из-за того, что он сделан внутри так или иначе никто не будет. Программы оценивают по качеству реализации задуманного.
                По факту, Brackets — текстовый редактор с поддержкой расширений (основное направление — верстка);
                Sublime — так же текстовый редактор с поддержкой расширений (основное направление четко выразить не смогу, но уклон в его разработке — скорость работы программы);
                Notepadd++ — еще один текстовый редактор с раширениями.

                У них в целом одно предназначение, вот их и интересно сравнивать.
                А технология реализации — это выбор разработчиков, и во многом от этого выбора многое и зависит.
      • 0
        Написал статью, отказавшись от сравнения с другими редакторами и IDE. Пусть каждый сам решает, надо оно ему или нет: habrahabr.ru/post/242623/
  • 0
    PSD-плагин сыроват конечно, тормозит, большой PSD-файл открыл криво, кириллицу из psd копирует как декодированные html-символы о_О
  • 0
    Все бы ничего, если бы не скорость. Тем не менее, очень надеюсь на положительное развитие проекта и некоторую часть фронтовых задач уже сейчас решаю в брэкетах.
  • 0
    Проект только развивается, движется в правильном направлении.
    Уже как пару месяцев стою на перепутье — не знаю на чем остановится.
    Sublime или Brackets.

    Вроде все более менее одинаково настроил, но вот чего действительно мне не хватает временами в brackets — plain tasks =)
    • 0
      Пользуюсь этими ToDo в Brackets, достойная альтернатива Plain Tasks.
      Можно как в отдельном файле вести списки, так и внутри файлов исходников (в комментариях).
      • 0
        Видел данный плагин, почему то он меня не вдохновил.
  • 0
    Много раз открывал brackets, но в этот раз решил присмотреться повнимательнее, и щелкнуло =)
    Выглядит очень свежо и на удивление интуитивно.
    Плагины ставить еще проще и приятнее в ST.
    Да и радует что тут идет постоянное развитие, в отличии от вышеупомянутого.

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

    Очень рад что прочитал эту новость, теперь жду не дождусь завтрашнего утра что-бы испробовать его в бою))
    • 0
      Вы считаете, что ST не развивается?! Вы далеко ошибаетесь по этому поводу, и по скорости развития, думаю, ST все же обгоняет Brackets. Киллер-фича последнего — плагин Extract. Без него это очередной неочень быстрый редактор сделаный с помощью движка Chrome.
      • 0
        Да это не киллер-фича. Сам проект давно существовал онлайн (https://projectparfait.adobe.com а ныне в составе adobe cloud), парсить css из psd можно было из браузера путем копирования в буфер. Extract добавили и в Dreamweaver.

        Мне например нравятся инлайн редакторы (быстрый переход к обьявленным функциям, быстрое редактирование css тега html под курсором и тд) в Sublime это есть? Режим LivePreview c обновлением кода без сохранения, В Sublime из коробки без шаманства это есть? Идет разработка LivePreview во всех браузерах, а так же опциональной встроенной live панели. Мне нравится быстрая документация по Ctrl+K. И так далее. У Brackets есть свои фишки заточенные под frontend разработку, это же очевидно. Open Source & Free, возможность добавлять новый функционал и участвовать в развитии проекта.

        Факт того что редактор по своей сути web приложение на js/nodejs/html в оболочке CEF3 (как например так же набирающий популярность редактор Atom от Github, который так же стартовал в 2011 году) дает возможность без изучения дополнительных языков (например питона для Sublime) развивать редактор новыми расширениями, например для live разработки адаптивного дизайна:



        Brackets тормозит на больших файлах, в остальном не вижу никаких тормозов и проблем в использовании. Оптимизация дело времени и терпения.
        .
        Сергей, а в чем быстрота развития Sublime? Будующее за Open Source и оно уже наступило, давайте не будем лукавить.

        Brackets не был бы «очередным неочень быстрым редактором» если бы не 16 место Most Starred на gtihub, а предпоследнюю 0.44 версию только за первую неделю скачало более 50k, в общем сложности более 140k людей. Впрочем, спорить дело неблагодарное, но вы заставляете что-то вам противопоставлять. Если вам не нужны определенные функции и workflow то это не значит что это не нужно другим.
        • 0
          Кстати, забыл добавить, у Brackets стабильные релизы каждые 3-4 недели. То есть каждый новый релиз (каждый месяц) это исправление багов и новые функции. Здесь же совершенно не ясно каким образом Sublime развивается быстрее.
          • 0
            Релизы ради релизов? Зачем Sublime что-то еще постоянно релизить, если они уже сделали то, что изначально заявили? Как мне кажется, вы путаете мягкое с теплым, и то, что аж сам LivePreview есть в редакторе из коробки, совершенно ни о чем не говорит.

            Дальнейшие споры вести, я считаю, бесполезно. Никому из нас не удастся переубедить другого, так что останемся при своих мнениях.
            • 0
              Сергей, я с вам и не спорил, это именно вы пытаетесь доказать что редактор никакой, медленный и в котором как бы «нет смысла». Я вообще спорить не люблю, только факты. Свою личную позицию почему я перешел с Sublime на Brackets я озвучил, работа стала более продуктивной и так считаю не только я. К слову, на Sublime я работал 2 года и прекрасно знаю его плюсы и минусы, и до сих пор пользуюсь для иных задач.
      • 0
        Возможно я что-то упускаю, но не вижу активного развития на страничке релизов www.sublimetext.com/3
        Чем-то напоминает историю TextMate.

        На мой взгляд, Brackets смотрится более перспективно.

        Выглядит довольно просто и лаконично, ничего лишнего.
        В тоже время плагины смотрятся куда богаче, от расширения для git я просто в восторге.
        Идея extract'а хороша, всегда хотел при верстке не переключаться из окошка редактора и не делать кучу механических действий по копированию стилей, сохранению изображений…
        То что brackets веб приложение, это отдельная радость, открыл консоль, увидел на знакомом языке все конфликты и ошибки. Да и расширения уверен будут писаться более активно, благодаря самим же пользователям.

        • 0
          Dev'ки тут www.sublimetext.com/3dev. Но в любом случае Сергей лукавил про быстрее, Brackets ведь имеет стабильные релизы каждые 3-4недели с новыми функциями и исправлениями. Open Source, Free, знакомая htmj/js среда для разработки собственных расширений.
        • 0
  • +1
    По непонятному стечению обстоятельств только сгодня впервые узнал об этом проекте.
    Выглядит очень интересно и многообещающе, потому как Sublime все-таки не устраивает. Он очень хорош сам по себе, но когда начинаешь обвешивать его плагинами — получается какой-то малопонятный и плохо сбалансированный комбайн. Тут и там торчат острые углы, которые требуют напильника.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.