Zen Coding v0.7

    Вчера вышла новая версия набора скриптов для сверхскоростной верстки под названием Zen Coding.

    Коротко о главном:
    1. Text nodes, полноправные участники аббревиатур

      {sample text}
      {item number $ ${nl}}*5
      p>{Click }+a{here}+{ to continue}

    2. Улучшенный механизм оборачивания в аббревиатуру (с предпросмотром в Eclipse). Посмотреть можно в демке, попробуйте обернуть (Ctrl+Shift+A) текст следующими аббревиатурами:

      ul>li*>a{Click at $#}
      span[title=$#]{Element’s title is $#}*
      ul>li*>span{$#}+{ }+a[title=$#]{$#}

      При оборачивании набранных текстом списков можно указать ключ |t, чтобы сбросить маркеры
    3. Размножение групп элементов

      dl>(dt+dd)*4

    4. Новые действия:
      • Increment/decrement number – изменяет число под курсором на 1, 10 или 0.1.
      • Evaluate Math Expression – выполняет простые математические выражения вроде 50/2+10 под курсором
      • Select Next/Previous Item – быстро выбирает следующий/предыдущий элемент в HTML (имя открывающего тега, полный атрибут, имя атрибута) и CSS (правило, полное свойство, значение свойства).
      • Reflect CSS Value – позволяет быстро вставить значение CSS-свойства и его аналогов с вендорными префиксами:

        -webkit-border-radius: 10px;
        -moz-border-radius: 5px;
        border-radius: 5px;

      • Encode/decode image to data:URI — быстро преобразовывает картинку в data:URL и обратно, в src или url()
    5. Multiple tabstops (Aptana/Eclipse, Espresso, TextMate, Komodo Edit) — перемещение по значениям свойства при помощи Tab, работает аналогично TextMate. Для демонстрации попробуйте развернуть в
      • CSS: bsha, brad+bsha
      • HTML: link:css*3
    6. Еще важные апдейты:
      • Update image size теперь работает и в CSS.
      • Аббревиатуры типа select>option*4 (т. е. блочные элементы внутри инлайновых) теперь разворачиваются корректно.
      • С восклицательным знаком аббревиатура CSS-свойства получает приписку !important:

        pos:a! → position:absolute !important;

      • Аббревиатуры и сниппеты с двоеточием для ускорения можно набирать и с дефисом (pos:a → pos-a).
      • Новый фильтр |s для вывода в одну строку.
    7. Множество закрытых багов (см. Google Code Issues).
    8. И еще кое-что по мелочи.
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 69
    • 0
      Что тут скажешь. Zen Coding хорош.
      • +2
        А я хочу на вход — картинку с изображением сайта, на выход — HTML+CSS. Как думаете, стоит пробовать писать такое? Мысли есть…
        • +4
          Пробовать всегда стоит.
          • 0
            Можно попробовать с каким-нибудь векторным форматом, наверное, проще будет, чем растр распознавать. Хотя все-равно оочень непростая задача. Имхо не стоит свеч, статические сайты все равно дешево стоят нынче и популярность у них все меньше, а для динамических придется сгенерированную кашу приводить в порядок.
            • +1
              что вы там фантазируете, Photoshop + Slices → экспорт в HTML = профит :)
              • 0
                Не силен в фотошопе, но сдается мне Slices предполагает, что картинка как-то подготовлена к экспорту? А вообще конечно от задач зависит, можно и одним img обойтись )
        • +1
          Очень хорошо, вот только для gedit нет официальной сборки, а сторонние где-то запаздывают.
          • 0
            Да, придется подождать прежде чем смогу заценить…
            • 0
              Угу, еще с хоткеями беда, лично мне сложно переключаться с привычных для Aptana хоткеев на «непривычные» в gedit…
            • +3
              написал автору плагина для netbeans хоть бы он не забил на него — x
            • 0
              Спасибо большое!!!
              у меня только один вопрос)
              Zen Coding for Dreamweaver v.0.7.2
              • 0
                от
                Zen Coding for Notepad++ v0.7

                чем то отличаются? (кроме разных программ)
                • +1
                  функционал должна быть один и тот же, разве что реализация может не поддерживать что-нибудь из-за ограничений редактора. для NPP, насколько я помню, поддерживается все, Dreavweaver не пользую, к сожалению.
                  • +2
                    В DW на самом деле чуть устаревшая версия: автор плагина раньше времени накатил апдейт движка, там может кое-что не работать/глючить.
                • +4
                  Турбо-разработка с Zen Coding. Ребята, спасибо, что не забрасываете проект.
                  • 0
                    можно ли включить в репозиторий плагин для Vim www.vim.org/scripts/script.php?script_id=2981 и abbreviations для SciTE bitbucket.org/fiskus/scite-zen-coding/src?
                    • 0
                      вопрос надо направить автору, либо спросить сразу на Google Code. я лишь проповедую :)
                      • 0
                        Сам плагин для Vim я не могу вставить в официальный репозиторий, потому что там полностью своя реализация ядра Zen Coding (но ссылка на плагин есть на главной странице проекта), поэтому некоторые вещи там либо не работают, либо совсем не так (по словам очевидцев). Я всё жду, когда кто-нибудь возьмёт оригинальный ZC и по документации напишет нормальный плагин (я, к сожалению, с Vim совсем не знаком и не смогу сделать его оптимально).

                        По поводу SciTE: могу добавить вас коммитером в проект, будете поддерживать аббревиатуры в актуальном состоянии
                      • +1
                        Для PhpStorm еще было бы не плохо.
                        • +1
                          а разве там не встроено уже?
                          • +1
                            вводиш правило, жмеш таб, ..., профит! :)
                            • +2
                              В PhpStorm/IDEA полностью своя реализация Zen Coding, так что ждать возможно придётся долго. Можно попробовать скооперироваться с ребятами из JetBrains и сделать плагин на основе версии для Eclipse.
                              • +1
                                Было бы, конечно, очень здорово, если ZC появился для шторма в виде постоянно обновляющегося плагина.
                                Сергей, вы уже пытались как-то контактировать с ребятами из JetBrains?
                                • +1
                                  Ещё нет, но, наверно, стоит написать им. Я пока хочу пару месяцев отдохнуть от ZC (этот релиз активно делался последние полгода), заняться другими проектами, поэтому в данной ситуации я бы с радостью выступил в качестве консультанта, а не автора плагина.
                            • +2
                              Если бы не эта новость не узнал бы что мой PhpStorm умеет Zen Coding из коробки. спасибо
                              • 0
                                Geany! Geany! Ну пожалуйста, сделайте кто-нибудь наконец! Gedit — это просто ад.
                              • 0
                                В PhpStorm Zen Codingа 0.7 наверное еще нету, если он только-только вышел.
                                • 0
                                  Как я жил без этого! :)
                                  • 0
                                    Ждём для VIM.
                                  • +1
                                    Сергей, мы любим вас (NOT GAY)! После XV и ZenCoding еще не задумывались сделать свой редактор с блсо сниппетами и подсветкой?
                                    • +3
                                      Спасибо :)
                                      Насчёт своего редактора — особо не задумывался, потому что хороших редакторов полно и заново изобретать велосипед нет желания.

                                      Но есть планы и большое желание скрестить Zen Coding и Content Assist for <textarea> и сделать удобный редактор для CMS с code complete для обычных текстовых полей: без подсветки, но зато очень быстрый. А подсветку при желании можно сделать на любом из существующих решений (CodeMirror, Bespin/Skywriter).
                                      • 0
                                        Яростно плюсую!
                                    • 0
                                      круто, появилось несколько фич, которых не хватало
                                      • +1
                                        Парни, вы реально крутые… Я разучился писать код полностью.
                                        • 0
                                          Кстати, есть HAML и SASS — haml-lang.com/ sass-lang.com/
                                          • 0
                                            это бесполезно)
                                            • 0
                                              В зенкодинге есть фильтр для HAML, так что можно раскрывать аббревиатуры в его синтаксисе.
                                              Да даже одиночные теги раскрывать удобнее чем писать их с символом процента — сочетание CMD+E удобнее нажимать чем Shift+5.
                                            • –1
                                              Кто-нибудь под VS2010 это заставил работать?
                                              • 0
                                                Некорректно работает в Espresso Reflect Value

                                                Было
                                                -webkit-border-radius: 20px;
                                                -moz-border-radius: 15px;
                                                -ms-border-radius: 15px;
                                                border-radius: 15px;


                                                После вызова становится
                                                -webkit-border-radius: 20px20px;
                                                -ms-border-radius: 20px;
                                                border-radius: 20px;
                                                -moz-border-radius: ;

                                                Последняя строчка почему-то переносится вверху
                                                • 0
                                                  Да, действительно, почему-то проглядел это.
                                                  PS: о багах лучше писать в Issues.
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                    • 0
                                                      Судя по примерам из первых 2-х пунктов, больше на программирование похоже, чем на верстку.
                                                      • +1
                                                        рано или поздно наступает момент, когда отлично знаешь, какой код ты напишешь в следующие 10 секунд, и IDE (даже с автокомплитом) за твоим полетом мысли уже не успевает. с Zen Coding, при условии четкой картинки кода в голове, появляется возможность это ограничение обойти. привыкнув за неделю, уже не можешь работать как прежде. это как пересесть с i7 обратно на 286
                                                        • 0
                                                          Я пока что не нахожу полезности в зен-кодинге, несмотря на то, что верстаю не один год.
                                                      • 0
                                                        спасибо за Zen Coding! вот думаю… может сделать свежий плагин под EmEditor? а то версия 0.6b сильно отстает по возможностям.
                                                        • 0
                                                          На странице загрузки из свежих файлов только «Zen Coding for *». А где можно взять «чистый» тарбол, без заточки на определённый редактор? Хочу попробовать написать свой плагин.
                                                        • 0
                                                          Чего я не понимаю так это почему HTML Zen разворачивает ul>li в <ul><li></li></ul> вместо того чтобы развернуть это в
                                                          <ul>
                                                            <li></li>
                                                          </ul>

                                                          • 0
                                                            возможно, потому что всего один дочерний элемент
                                                            • 0
                                                              Нет, от кол-ва элементов это не зависит, у меня все в одну строчку.
                                                            • 0
                                                              В каком редакторе так происходит?
                                                              • 0
                                                                Visual Studio
                                                                • 0
                                                                  Для VS неписан неофициальный плагин (может даже неофициальная реализация, где-то видел такую), поэтому, к сожалению, ничем не могу помочь.
                                                                  • 0
                                                                    Я просто пытаюсь понять, встроено ли форматирование HTML (т.е. разбиение на строки) в движок HTML Zen (т.е. файлы *.py), или же форматирование является ответственностью того, кто этот движок использует.
                                                                    • 0
                                                                      Всё встроено в сам Zen Coding. От автора плагина, по сути, требуется только реализовать интерфейс взаимодействия с редактором.

                                                                      Посмотреть, как работает оригинальный Zen Coding, можно на тестовой странице: zen-coding.ru/codemirror/
                                                            • 0
                                                              Супер! Спасибо
                                                              • 0
                                                                Это праздник какой-то! Теперь я могу, как настоящий волшебник создать полностью всю html разметку одной строкой и потом превратить ее в полноценную страницу!
                                                                Вот моя волшебная строка:
                                                                html:xt>(div.header>(h1.logo>(a[href=#]>{Progress}+span{ }))+(div.access>ul>li*3>a[href=#]{access$})+(div.menu>ul>li*7>a[href=#]{menu$}))+(div.wrapper>(div.infimg>img[src="/img/img1.png"])+(div.container>(div.content>(h2{Lorem Ipsum}+p{Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ipsum purus, molestie sed sodales sit amet, condimentum eget metus. Praesent rhoncus consequat sapien dictum tincidunt. Vestibulum eget mi risus, ut auctor nisi. Donec sollicitudin massa ultricies quam consequat ultricies. Nulla commodo tincidunt consectetur. Sed scelerisque justo a lectus vulputate posuere.}))+(div.side>h4{Overview}+ul>li*5>a[href=#]{over$})))+div.footer>(ul.footmenu>li*3>a[href=#])+a[href=#].copy


                                                                Единственное, что там не хватает, так это возможности вставить link:css. Может стоит включить тег подключения стиля внутри аббревиатур html:xt и html:xs?
                                                                • +1
                                                                  От того, что вы напишете сайт в одну строчку, вы не станете быстрее. Да, нажатий на клавиатуру сделаете меньше, но потратите больше времени на то, чтобы сначала продумать всю структуру в голове, мысленно «схлопнуть» её в аббревиатуру, запомнить её целиком, а после разворачивания ещё дважды проверить, соответствует ли результат вашим ожиданиям.

                                                                  Гораздо эффективнее писать и разворачивать короткие аббревиатуры в нужных местах.
                                                                  • 0
                                                                    да я это сам прекрасно понимаю. Это скорее спортивный интерес — как на олимпиаде :)
                                                                • 0
                                                                  Нашел баг — при попытке закомментировать блок правил в css вставляются html вид комментариев
                                                                  <!-- Comment -->


                                                                  p.s. Редактор Coda
                                                                  • 0
                                                                    а не, это я ошибся — просто забыл переключить тип синтаксиса в редакторе
                                                                  • 0
                                                                    Подскажите, что за переменная 'my_zen_settings'? Она позволяет задавать свои аббревиатуры? Можно ли свои аббревиатуры хранить и подключать внешним файлом?

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