Анонс 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

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



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

    Приятного кодинга!
    Поделиться публикацией
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 78
    • +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? Поправьте, если я не прав, а разве продукты Адоба сами не умееют выдавать вёрстку?
                    • Насколько я знаю, тот же самый фотошоп это делать не умеет. Но они довольно давно разрабатывают 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 все-таки не устраивает. Он очень хорош сам по себе, но когда начинаешь обвешивать его плагинами — получается какой-то малопонятный и плохо сбалансированный комбайн. Тут и там торчат острые углы, которые требуют напильника.
                                                              • 0
                                                                image

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