Emmet шпаргалка – Справочник EMMET сокращений для ускорения верстки

Содержание

Написать HTML и CSS быстрее с Emmet

Как веб-разработчик, мы всегда искали инструмент, позволяющий увеличить наш рабочий процесс и производительность. И пост сегодня предназначен для веб-разработчиков, которые часто работают с HTML и CSS, и мы собираемся взглянуть на инструмент, который позволяет нам, написать эти два основных веб-языка (много) быстрее — Emmet.Рекомендуем к прочтению: Работа с фрагментами кода в Sublime Text.

Emmet является расширение ZenCoding, который записывается чисто с JavaScript. В этой статье я буду использовать Sublime Text, Emmet также доступна для многих редакторов кода, включая TextMate, Coda, Eclipse, Notepad++, и Adobe DreamWeaver.

Установка Emmet

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

После установки, возможно, потребуется перезагрузить Sublime Text.Написание HTML с Emmet

Большинство современных редакторов, вероятно, имеют аналогичные встроенные функциональности. Например, в Sublime Text пишем просто <ul> и нажмите клавишу табуляции, она будет автоматически расширяться в полном неупорядоченный список с <li> элемента.Мы также можем написать следующее div.class назначить HTML класса в элементе.Emmet, в данном случае, расширяет эту функциональность, что позволяет нам создавать сложные структуры HTML в более упрощенном виде с сокращениями или псевдонимы, похожий на тот, в CSS. Так что, если вы уже знакомы с синтаксисом CSS, вы должны привыкнуть к нему быстро.Кроме того, Emmet документация обеспечивает массовый список сокращений, псевдонимов и целей, которые могут быть очень пугающим для новичка. Но, вот некоторые из основных вещей по крайней мере, вы должны знать.

Дочерний элемент

(Child )

Как мы уже упоминали, Emmet использует синтаксис, аналогичный CSS. В CSS мы имеем прямой селектор child, который представлен со знаком «>». В Emmet, мы используем этот оператор чтобы добавлять дочерние элементы.

Родственный элемент

Родственный элемент ссылается на элемент в том же уровне вложенности. В CSS, мы можем выбрать Родственный элемент со знаком плюс «+». Точно так же мы можем использовать его, чтобы добавить родственные элементы с Emmet.

Назначение ID или класса

Мы можем выбрать элемент и его ID атрибут с помощью знака # в CSS. С Emmet, мы используем # присвоить атрибуту ID элемента, и, как мы показали вам, прежде чем мы сможем назначить класс в HTML элемент, точно так же мы выбираем элемент класса.
Например:

Когда мы не определили элемент, как вы можете видеть выше, Emmet будет использовать <div> по умолчанию. Если мы хотим быть более конкретным, мы можем объявить тип элемента перед классом или ID имя, например, так.

Специально в классе для HTML, мы можем назначить несколько классов в одном элементе таким образом.

Назначение атрибутов

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

Умножение

Emmet также позволяет добавлять HTML элемент в конкретных цифрах с помощью звездочки (*) знак, который может быть во время заставки. В этом примере мы добавляем <h4> и <h5> под <section> элемента.

Основы документа HTML

Мы можем построить основную структуру HTML документа в Emmet. Учитывая пример базовой структуры HTML5, мы можем сделать это таким образом.

Lorem Ipsum

А вот еще, Это одно из моих любимых в
Emmet. Sublime Text приходит с ярлыка для создания фиктивных Lorem Ipsum текста. Мы просто можем написать Lorem и нажать Tab, и она будет расширяться примерно до 5 — 7 строк Lorem Ipsum.

Emmet, в данном случае, работает немного по-другому. С Emmet, мы можем определить, много слов, чтобы генерировать.
Допустим, мы хотим только 3 слова, и мы можем написать lorem3:

Использование Эммет в CSS

Можно также написать CSS с Emmet. Как и в HTML, он расширяет псевдонимы в полную собственность CSS.
Вот один пример: допустим, что мы хотим добавить padding со значением 10px, мы просто пишем р: 10 и нажмите клавишу табуляции (TAB), и он будет автоматически расширять его padding: 10px, следующим образом.

Или же, если мы хотим, чтобы скрыть элементы, мы можем сделать либо с visibility или display . С Emmet, мы можем записать эти свойства CSS таким образом.

Однако, несмотря на преимущества, когда дело доходит до CSS, я по-прежнему предпочитают использовать функцию авто-заполнения от моего редактора кода так как это просто более удобно для меня.
Плюс, запоминая этих CSS псевдонимов немного сложнее, чем для HTML, хотя, вы можете обратиться к шпаргалке псевдонимов Emmet для CSS, а также HTML здесь .Заключение
Emmet действительно блестящий инструмент, и я думаю, что это является важным инструментом для веб-разработчиков. Единственным недостатком является, пожалуй, обучение необходимо для новичков, но как только вы поймете, это может значительно повысить производительность. Вы можете написать HTML и CSS быстрее, чем когда-либо прежде.
Источник: http://hongkiat.com

Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями:
art-ucoz.ru
Про все: Emmet — полезный инструмент для создания HTML разметки. Часть 1
Emmet (ранее известный как Zen Coding) является инструментом для веб-разработки, который может значительно улучшить и облегчить работу с HTML и CSS. Эта статья посвящена возможностям Emmet, которые он предоставляет для быстрого создания разметки HTML.
Содержание
В принципе, большинство текстовых редакторов позволяют хранить и повторно использовать часто используемые фрагменты кода, называемые «сниппеты». Хотя сниппеты и являются хорошим способом повышения производительности, все их реализации имеют общие недостатки: вы должны сначала определить сниппет и вы не можете расширить их при исполнении.

Emmet выводит идею сниппетов на совершенно новый уровень: вы вводите CSS-подобные выражения, которые динамически анализируются, и получаете результат в зависимости от введённой аббревиатуры. Emmet разработан и оптимизирован для HTML/XML и CSS, но может использоваться и для языков программирования.
Вы можете скачать Emmet в виде плагина для одного из редакторов, которых поддерживается не мало:

Аббревиатуры
Аббревиатуры являются сердцем Emmet: эти специальные выражения обрабатываются во время выполнения и превращаются в структурированный блок кода, например HTML. Синтаксис аббревиатур похож на селекторы CSS, за исключением нескольких особых расширений для генерации кода. Таким образом, каждый веб-разработчик уже знает как его использовать.
Вот пример: эта аббревиатура
#page>div.logo+ul#navigation>li*5>a{Item $}
превращается в
<div id
="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<
li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
… с помощью всего одного нажатия клавиши. Во многих редакторах (например, Eclipse, Sublime Text 2, Espresso и т.д.) плагины также будут генерировать надлежащие позиции tabstop, что даст вам возможность пройти между важными местами сгенерированного кода с помощью клавиши табуляции.
Аббревиатуры оптимизированы для HTML и XML, но не ограничиваются ими, и делают утомительное написание кода разметки сверхбыстрым. Изучите синтаксис аббревиатур, чтобы раскрыть всю мощь Emmet.

Синтаксис аббревиатур
Emmet использует аналогичный CSS-селекторам синтаксис, для описания позиций внутри генерируемого дерева и атрибутов элемента.
Элементы
Вы можете использовать имена элементов, как p или div для генерации HTML-тегов. Emmet не имеет предопределенного набора доступных имен тегов, поэтому вы можете написать любое слово и превратить его в тег: сdiv → <div></div>, foo → <foo></foo> и так далее.
Операторы вложения
Вложенные операторы используются для позиционирования элементов аббревиатуры внутри генерируемого дерева: должны ли они размещаться внутри или рядом с элементом контекста.
Вложение: >
Вы можете использовать оператор > для вложения элементов друг в друга:
div>ul>li
…станет
<div>

<ul>
<li></li>
</ul>
</div>
Добавление: +
Используйте оператор + для размещения элементов рядом друг с другом на том же уровне:
div+p+bq
…выведет
<div></div>
<p></p>
<blockquote></blockquote>
На уровень вверх: ^
С оператором > вы спускаетесь по сгенерированному дереву и позиции всех родственных элементов будут определятся в отношении самого глубокого элемента:
div+div>p>span+em
…будет преобразована в
<div></div>
<div>
<p><span></span><em></em></p>
</div>
С оператором ^ вы можете подняться на один уровень вверх в дереве и изменить контекст, в котором должны отображаться следующие элементы:
div+div>p>span+em^bq
выведет …
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
Вы можете использовать столько угодно операторов ^, каждый из них будет перемещать на один уровень вверх:
div+div>p>span+em^^^bq
…будет выводить
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
Повторение: *
С оператором * вы можете определить сколько раз должен быть выведен элемент:
ul>li*5
выведет …
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Группировка: ()
Скобки используются в Emmet для группировки поддеревьев в сложные аббревиатуры:
div>(header>ul>li*2>a)+footer>p
…будет развёрнуто в
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
Если вы работаете с деревом DOM браузера, то думайте о группах как о фрагментах документа: каждая группа содержит аббревиатуру поддерево и все следующие элементы вставляются на том же уровне, в качестве первого элемента в группе.
Вы можете создавать группы внутри друг друга и объединять их с помощью оператора *:
(div>dl>(dt+dd)*3)+footer>p
…превратится
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
С группами, вы в буквальном смысле можете написать полную разметку страницы с помощью одной аббревиатуры, но пожалуйста, не делайте этого.
Операторы атрибутов
Операторы атрибутов используются для изменения атрибутов выводимых элементов. Например, в HTML и XML вы можете быстро добавить атрибут class к создаваемому элементу.
ID и CLASS
В CSS вы используете elem#id и elem.class , чтобы выбрать элементы с заданным id или атрибутом class. В Emmet вы можете использовать тот же синтаксис, чтобы добавить эти атрибуты к указанному элементу:
div#header+div.page+div#footer.class1.class2.class3
…выведет
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
Пользовательские атрибуты
Для добавления к элементу пользовательских атрибутов вы можете использовать нотацию [attr] (как в CSS):
td[title="Hello world!" colspan=3]
…выведет
<td title="Hello world!" colspan="3"></td>
Вы можете размещать внутри квадратных скобок неограниченное количество атрибутов.
Вам не обязательно указывать значения атрибутов: td[colspan title] сгенерирует <td colspan="" title=""> с табстопами внутри каждого пустого атрибута (если ваш редактор поддерживает их).
Для заключения в кавычки значений атрибутов вы можете использовать как одинарные, так и двойные кавычки.
Не надо заключать в кавычки значения, если они не содержат пробелы: td[title=hello colspan=3] будет работать.
Нумерация элементов: $
С помощью оператора * вы можете повторять элементы, но с $ их можно нумеровать. Оператор $ должен располагаться в имени элемента, имени атрибута или в значении атрибута, чтобы выводился порядковый номер повторяющихся элементов:
ul>li.item1*5
выведет …
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
Вы можете использовать несколько $ подряд, чтобы получить номер с нулями:
ul>li.item001*5
выведет …
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
Изменение начала и направления нумерации
С модификатором @ вы можете изменить направление нумерации (по возрастанию или по убыванию) и начальное значение.
Например, чтобы изменить направление, добавьте @- после $:
ul>li.item1*5
…даст результат
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
Для изменения начального значения счетчика добавьте модификатор @N:
ul>li.item3*5
…преобразуется в
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
Вы можете использовать эти модификаторы вместе:
ul>li.item3*5
…преобразуется в
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
Текст: {}
Для добавления текста в элемент используйте фигурные скобки:
a{Click me}
…выведет
Обратите внимание, что {текст} используется и обрабатывается как отдельный элемент (как div, p и др.), но имеет особое значение, когда написан сразу после элемента. Например, a{click} и a>{click} дадут одинаковый результат, но a{click}+b{here} и a>{click}+b{here} нет:
<a href="">click</a><b>here</b>

<a href="">click<b>here</b></a>
Во втором примере элемент <b> расположен внутри элемента <a>. И вот в чем разница: когда {текст} пишется сразу после элемента, то это не изменяет родительского контекста. Вот более сложный пример, показывающий, почему это важно:
p>{Click }+a{here}+{ to continue}
…даст результат
<p>Click <a href="">here</a> to continue</p>
В этом примере, чтобы написать Click here to continue внутри элемента <p>, мы четко движемся вниз по дереву, используя оператор > после p, но для элемента <a> мы его не используем, так как в нём нам нужно только слово, без изменения родительского контекста.
Для сравнения, та же самая аббревиатура, написанная без вложенного оператора >:
p{Click }+a{here}+{ to continue}
…выводит
<p>Click </p>
<a href="">here</a> to continue
Совет по форматированию аббревиатур
Когда вы ознакомитесь с синтаксисом аббревиатур Emmet, вы возможно захотите использовать некоторые элементы форматирования, чтобы сделать ваши аббревиатуры более читаемыми. Например, использовать пробелы между элементами и операторами, вроде этого:
(header > ul.nav > li*5) + footer
Но она не будет работать, потому что пробел — это символ остановки, на котором Emmet прекращает разбор аббревиатуры.
Многие пользователи ошибочно полагают, что каждая аббревиатура должна быть написана с новой строки, но они ошибаются: вы можете вводить и выполнять аббревиатуры где-угодно в тексте.
Типы элементов
в HTML- и XML-документах, при развертывании аббревиатур все их части трансформируются «на лету» в HTML/XML-теги. Но некоторые элементы, как например a или img, превращаются в элементы с предопределенными атрибутами: <a href=""></a> и <img src="" alt="" />. Откуда Emmet знает когда следует добавлять атрибуты?
Все описания элементов Emmet хранятся в файле snippets.json в следующем формате:
{
"html": {
"abbreviations": {
"a": "<a href=\"\">",
"link": "<link rel=\"stylesheet\" href=\"\" />"
...
},
"snippets": {
"cc:ie6": ""
...
}
},

"css": {
...
}
}
Как вы можете видеть, на первом уровне размещаются языки разметки, для которых определены элементы. Внутри этой секции расположены определения элементов, разделённые на две части: snippets и abbreviations.
Сниппеты
Сниппеты — это просто куски обычного кода, как и в большинстве редакторов. Вы можете напечатать здесь что угодно и оно будет выводится “как есть”, без каких-либо преобразований.
Аббревиатуры
Аббревиатуры — это на самом деле блоки с некоторыми подсказками. Emmet, в основном, используется для написания HTML/XML-тегов, объявление аббревиатуры использует XML-формат для описания элемента.
Emmet анализирует определение аббревиатуры и получает следующие данные:
имя элемента;
атрибуты по умолчанию;
порядок атрибутов;
значения по умолчанию атрибутов;
должен элемент содержать закрывающий тег или нет.
Давайте внимательнее посмотрим на объявления аббревиатур HTML на примере выше. Элемент link определяется как <link rel="stylesheet" href="" /> (двойные кавычки должны быть экранированы в JSON; или используйте одинарные кавычки). Это определение говорит, что этот тег, созданный для аббревиатуры link, должен быть назван link и должен содержать два атрибута: rel со значением по умолчанию “stylesheet” и href с пустым значением (именно в этом порядке), а также сгенерированный элемент не должен содержать закрывающий тег.
После раскрытия аббревиатуры link вы получите следующий результат в HTML:
<link rel="stylesheet" href="">
Вы можете переопределить значения атрибутов по умолчанию и добавить новые:
link[rel=prefetch title="Hello world"]
…преобразуется в
<link rel="prefetch" href="" title="Hello world">
Вы можете добавлять дочерние элементы:
link>xsl:apply-templates
…выведет
<link rel="stylesheet" href="">
<xsl:apply-templates></xsl:apply-templates>
</link>
Псевдонимы
В разделе abbreviations файла snippets.json вы можете также определять псевдонимы: сокращения для широко используемых аббревиатур. Псевдонимы могут использоваться для определения:
коротких названий для длинных имен тегов;
ссылок на часто используемые аббревиатуры.
В файле snippets.json вы можете найти следующие определения:
...
"html": {
"abbreviations": {
"bq": "blockquote",
"ol+": "ol>li"
}
}
В примере выше, при преобразование аббревиатуры bq, Emmet будет искать определение аббревиатуры blockquote. Если его не существует, он выведет просто <blockquote></blockquote>. Аббревиатура ol+ фактически даёт такой же результат как и ol>li.
Определение ol+, возможно, выглядят неоднозначно, поскольку оно содержит + в конце, который также является оператором добавления. Emmet корректно выполняет такие аббревиатуры и знак «плюс» оставлен по историческим причинам. Просто помните, что вам не нужно использовать +, чтобы создать псевдоним аббревиатуры.
Неявные имена тегов
Даже с таким мощным движком аббревиатур, который может развернуть большую HTML-конструкцию из короткой аббревиатуры, написание имен тегов может быть очень утомительным.
Во многих случаях вы можете пропускать ввод имён тегов и Emmet будет подставлять их за вас. Например, вместо div.content вы можете просто написать .content и получите <div></div>.
Как это работает
Когда вы разворачиваете аббревиатуру, Emmet пытается захватить родительский контекст, например элемента HTML, внутри которого вы выполняете аббревиатуру. Если контекст был схвачен успешно, Emmet использует его имя для решения неявных имён:
Emmet смотрит на имя родительского тега каждый раз, когда вы разворачиваете аббревиатуру с неявным именем. Вот как он разрешает имена для некоторых родительских элементов:
li для ul и ol
tr для table, tbody, thead и tfoot
td для tr
option для select и optgroup
Взгляните на некоторые эквиваленты аббревиатур с явными и неявными именами тегов:
.wrap>.content div.wrap>div.content
em>.info em>span.info
ul>.item*3 ul>li.item*3
table>#row$*4>[colspan=2] table>tr#row$*4>td[colspan=2]
Генератор “Lorem Ipsum”
Текст “Lorem ipsum” используется многими веб-разработчикам для тестирования того, как их шаблоны в формате HTML будут выглядеть с реальными данными. Часто разработчики используют услуги третьих сторон для создания текста “Lorem ipsum”, но теперь вы можете сделать это прямо в вашем редакторе. Просто выполните аббревиатуры lorem или lipsum, чтобы получить следующий сниппет:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?
lorem не просто обычный сниппет — это на самом деле генератор. Каждый раз, когда вы выполняете его, он будет генерировать 30 слов фиктивного текста, разделённого на несколько предложений.
Вы можете указать, сколько слов должно быть сгенерировано. Например, lorem100 создаст 100 слов.
Повторяющийся “Lorem ipsum”
Вы можете использовать генератор lorem внутри повторяющихся элементов, чтобы создать теги, полностью заполненные случайными предложениями. Например, аббревиатура p*4>lorem сгенерирует следующее:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
<p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
<p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p>
<p>Consequatur rerum amet fuga expedita sunt et tempora saepe? Iusto nihil explicabo perferendis quos provident delectus ducimus necessitatibus reiciendis optio tempora unde earum doloremque commodi laudantium ad nulla vel odio?</p>
dmzik.blogspot.com
Emmet — htmllab
Emmet и HTML
Emmet — плагин для быстрой верстки HTML-страниц. Записывая названия HTML-элементов мы можем их превращать в разметку гораздо быстрей, чем писать каждый тег вручную. Например, div превращается в <div></div>, а div>p в <div><p></p></div>. Начинающему разработчику на первый момент может показаться, что все запутано и не стоит возиться с набором новых обозначений. Но на практике верстальщик создаёт HTML-страницу гораздо быстрее, когда владеет этим плагином.
Emmet и HTML
Примеры из заметки можно попробовать тут, документация по плагину, шпаргалка по командам Emmet.
Базовые команды
Дочерний элемент
nav>ul>li <nav>     <ul>         <li></li>     </ul> </nav>
Соседние элементы
div+p+bq <div></div> <p></p> <blockquote></blockquote>
Группировка HTML-элементов
div>(header>ul>li*2>a)+footer>p <div>     <header>         <ul>             <li><a href=""></a></li>             <li><a href=""></a></li>         </ul>     </header>     <footer>         <p></p>     </footer> </div>
Создание сразу нескольких однотипных элементов
ul>li*5 <ul>     <li></li>     <li></li>     <li></li>     <li></li>     <li></li> </ul>
Нумерация HTML-элементов
ul>li.item$*5 <ul>     <li></li>     <li></li>     <li></li>     <li></li>     <li></li> </ul>
Работа с атрибутами класса и идентификатора
#header <div></div> .title <div></div> form#search.wide <form></form> p.class1.class2.class3 <p></p>
Думаю имеет смысл почитать оригинальную документацию, чтобы не смотреть скопированные правила 🙂 Удачной разработки!
Запись опубликована в рубрике Курсы html. Добавьте в закладки постоянную ссылку.
htmllab.ru
Ускоряем работу с Emmet, или мой первый шаг к Open Source / Habr
Не претендуя на новаторство и особую глубину рассуждений, я решил написать эту статью с двумя целями:
Рассказать о моем первом опыте в написании чего-то полезного для IT-сообщества (а конкретно — плагина для редактора Sublime Text). Возможно, это подтолкнет к созданию open-source проектов тех, кто этим еще никогда не занимался, стесняется, боится, что квалификации не хватит или что нужно обязательно писать что-то глобальное и т.п.

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

Начнем же, перекрестясь.

1. Часть первая, с рассуждениями

Ребята, мне в этом месяце стало стыдно. Не так стыдно, как бывает, когда что-то ляпнул лишнее. А прямо глобально. Я вдруг осознал себя бесполезным элементом в ИТ-индустрии. Я понял, что всю жизнь пользовался дарами open source, ничего абсолютно не предлагая сообществу от себя. Форменный паразит.
И основная причина тому в моей странной уверенности, что моих знаний недостаточно для написания чего-то полезного для других.
Чтобы вы понимали, я — верстальщик, или, как это сейчас модно-огородно, «фронтендер». Но нет, все же верстальщик. Не буду при всех заниматься самообманом. Можно сказать, что я на несколько лет застрял в этой специальности, зная обо всем остальном (языках и методах программирования, разнообразных фреймворках, базах данных и т.п.) на уровне прикладных задач и не особо системно. Но, все же, написать несложные программы я могу и, так или иначе, делаю это постоянно.
Ну так вот, возвращаясь к моей проблеме — мне стало стыдно. Известно, что это чувство у всех, не страдающих душевными болезнями, вызывает сначала грусть-тоску, а потом желание измениться. Когда я добрался до второй стадии, мне открылись невероятные для моего узкого взгляда на мир открытия.
Уже слышу ваши голоса: «Поделись же ими с нами, капитан!»
А капитану и не жалко.
ОТКРЫТИЕ ПЕРВОЕ: коллегам для упрощения работы не всегда нужно что-то революционно-глобальное, как я почему-то полагал, иногда достаточно небольшого инструмента, помогающего в узкой сфере и вполне «поднимаемого» мной. И проблем, которые можно решить такими инструментами, полным полно.
ОТКРЫТИЕ ВТОРОЕ: сделать что-то полезное для людей, выставить это на всеобщее обозрение — это нереально крутой пинок самому себе к профессиональному развитию.
Да, да, я отчетливо понимаю, что большинство из читающих этот текст людей к этим мыслям пришли еще в начале карьеры, и нового тут ничего нет. Но если хоть один из вас похож на меня и пока только склоняется к подобным выводам — значит слова не потрачены зря и я имею моральное право продолжить повествование.
А теперь, собственно, о том, каким был мой первый шаг в мире профессионального альтруизма.
2. Часть вторая, с идеями

И вот я сел за свой первый open source. Что же полезного мне написать сначала? Очередной jquery-слайдер? Или какой-нибудь свой «ни на что не похожий» bootstrap-подобный фреймворк (честно говоря, не представляю, зачем их плодят сейчас в таком количестве). Идею не хотелось высасывать из пальца.
И я подумал о том, чего не хватает сейчас лично мне. Как вы помните, я верстаю, и как многие верстальщики (если не все) использую в работе редактор Sublime Text и замечательный плагин Emmet. Он в разы облегчает написание html-разметки и css-стилей. Но, для наших нужд остановимся на его работе со стилями.
Обычно моя работа с плагином выглядит как и у большинства: когда я хочу написать какое-либо css-свойство, я пишу его Emmet-сокращение, нажимаю Tab, сокращение раскрывается в нормальное свойство, в конце перехожу на новую строку клавишей Enter. Этот процесс уже, как говорится, вошел в пальцы и, вроде бы, всех всё в нем устраивает.
Но каждый раз нажимать Tab -> Enter мне вдруг показалось излишним. Почему бы не записывать сокращения подряд, через пробел, что намного быстрее, и потом уже раскрывать их все? Может показаться, что это «экономия на спичках», однако, мой опыт показывает, что обычно свойства мы пишем не по одному, думая после каждого, а логическими группами, например за position обычно следуют left и top, значения которых мы уже знаем и можем писать их подряд без пауз, или когда мы пишем width — то уже знаем, какой будет дальше height. И таких примеров много. Так что есть хороший задел для уменьшения количества лишних телодвижений.
Сам Emmet имеет свою реализацию подобного поведения: если писать значение через знак «+» и в конце нажать на Tab — они все раскроются разом. Но постоянно тянуться до плюса, да еще с shift’ом его нажимать мне показалось неудобным, и я решил организовать нужное мне поведение отдельным плагином. Это выходило за рамки моей изначальной компетенции, плагины для Sublime пишутся на Python, с которым я знаком был достаточно поверхностно. Но, как говаривали древние, война — херня, главное — манёвры.
3. Часть третья, с результатами

Вот так выглядит теперь моя работа с использванием написанного мной плагина EmmetOneLine:

Как видите, логика Emmet сохранена, все раскрывается как надо, а лишних табов и переходов на новые строки больше нет. Лепота.
Раскрытие всех блоков я по умолчанию повесил на Ctrl+Tab, в дальнейшем думаю прикрутить проверку строки на несколько свойств и сделать раскрытие по tab, когда это доступно. Еще это будет нужно тем, кто использует Ctrl+Tab для перехода по вкладкам. (Я для этого обычно использую нечеткий поиск по документам).
Плагин был написан мной за несколько часов, ночью, в порыве вдохновения. API Sublime оказалось достаточно дружелюбным, по данной теме нашлось пару статей на хабре и несколько зарубежных материалов, дело шло быстро, благо логика намечалась не особо замороченная. К моему, должен сказать, приятному удивлению, мне хватило достаточно общего представления о Python, небольшого опыта программирования на других языках и нескольких практик из других плагинов чтобы сделать первую рабочую версию, пригодную для использования. Для целей публикации я завел себе аккаунт на GitHub, что раньше не делал, используя в рабочих проектах исключительно BitBucket. Процесс публикации плагина в Package Control так вообще оказался элементарным, достаточно было форкнуть проект package_control_channel и добавить в один json-файл информацию о плагине и дать на рассмотрение мейнтейнеру.
Теперь мой маленький плагин в сети и готов экономить вам время. А я получил интересный опыт, энергию на доработку плагина и планы по наращиванию сложности будущих открытых и не только проектов.
4. Пару слов напоследок

Подводя итог, я очень хочу пожелать тем начинающим разработчикам, кто еще никогда ничего не писал для сообщества — поступить как я и просто начать это делать. Open Source — это не всегда что-то сложное, есть потребность и в маленьких, простых решениях. Не стоит, как ваш покорный слуга, столько лет стесняться незнания каких-то вопросов, уровня английского, практических навыков и закрывать для себя этот интересный мир. Найдите интересную вам проблему и решите на том уровне, на котором можете. Люди Вас поймут и, в случае пользы проекта, поправят код и помогут советом.
За что, кстати, я был бы очень благодарен уважаемым более опытным коллегам! Буду рад любой помощи или критике по работе или описанию плагина (В том числе, касаемо ошибок в английском описании работы плагина).
За сим позвольте откланиться и пожелать всем профессионального роста!
Ссылка на плагин.
habr.com
Emmet LiveStyle — инструмент для удобной front-end разработки / Habr
На днях появился наверное самый удобный инструмент для front-end разработчиков — Emmet LiveStyle. Это плагин для двухстороннего (редактор браузер) редактирования CSS файлов, который может заметно облегчить и ускорить разработку. Восторженные отзывы по всему интернету это подтверждают (комментарии к статье Smashing Magazine и на Хабре).
Главное преимущество Emmet LiveStyle в том, что все изменения вносятся легко и интуитивно, а результат виден «на лету». Это реально ускорят процесс. Рассказывать о плюсах плагина можно долго, но лучше всего работу плагина демонстрирует ролик:
Проект находится в режиме публичной беты. Пока инструмент работает в Google Chrome, Safari и Sublime Text. В будущем планируется поддержка других браузеров.
Возможности

Результат виден сразу после внесения изменений — никаких сохранений и обновлений страниц.

Не требуется хранить файлы локально, для редактирования их можно открыт напрямую с FTP.

Кроссплатформенность.

Результат можно просматривать одновременно в нескольких окнах, все изменения будут происходить «на лету». Удобно для тестирования адаптивного дизайна.

Можно редактировать одновременно несколько сайтов, например, десктоп и мобильную версию.

Легкая установка и работа: достаточно открыть CSS-файл в редакторе и связать его с файлом стилей сайта.

Установка

Ниже описан процесс установки для Google Chrome.
Для Sublime Text 3 установить Package Control.

В Sublime Text открыть Command Palette (Ctrl+Shift+P) и выбрать Package Control: Install Package.

В списке найти и установить расширение LiveStyle.

Установить расширение для Google Chrome.

Открыть в Sublime Text CSS-файлы.

Открыть в браузере страницу для редактирования

Открыть DevTools (Ctrl+Shift+I) и во вкладке LiveStyle связать файлы стилей сайта с открытыми в Sublime Text. Для работы плагина DevTools необходимо держать открытым для каждого окна.

Автор разработки есть на хабре — chikuyonok. Подробности можно почитать на официальном сайте и в статье Smashing Magazine.
habr.com
Потомок Zen Coding — Emmet for ST2! / Sandbox / Habr

Эта статья будет полезна верстальщикам, использующим в качестве своего основного инструмента Sublime Text 2 и другим, кто хочет ускорить, улучшить и упростить себе жизнь. Речь пойдет о модификации плагина Zen Coding, а именно Emmet.

Буквально неделю назад в ленте твиттера промелькнула пара твитов об Emmet. После твита Вадима Макеева новость меня заинтересовала, т.к. я активно использую Zen Coding.
Надеюсь, что читатель знаком с Zen Coding, поэтому ближе к делу. (Линк на ZC, если последнее предположение ошибочно)
В чем, собственно, отличие от ZC?

Можно писать значения для свойств CSS прямо за аббревиатурами: p10 > padding: 10px, m0.5-10--15 > margin: 0.5em 10px -15px, w100p > width: 100%. Для целых значений автоматически подставляется px, а для значений с плавающей запятой — em.

Минус перед аббревиатурой раскроет свойство с добавлением браузерных префиксов. Например: bdrs создаст свойство border-radius, но -bdrs создаст список свойств с webkit, moz, ms и o префиксами.

Генератор градиентов: определите градиент (linear-gradient(...) или проще lg(...)) в качестве значения для любого CSS-свойства, нажмите Tab и получите список с определениями градиентов с учетом браузерных префиксов и особенностей реализации в более ранних версиях браузеров.

Неизвестные аббревиатуры не раскрываются в HTML-тэги (например, foo > <foo></foo>), а также, в CSS-коде: foo > foo: ;.

И это еще не всё!

Хорошие новости для любителей БЭМ! В Emmet добавлены фичи и для вас! Я не использую БЭМ, поэтому разбираться не стал. Подробнее о поддержке БЭМ в Emmet читайте здесь.

В Emmet присутствует генератор «рыбы» Lorem Ipsum. Для генерации можно использовать слова lorem и lipsum. Если текста мало, вы можете вручную задать количество слов в «рыбе», написав loremNN, где NN — число от 8 до ваших потребностей. Не думаю, что может понадобиться «рыба» более 1000 слов.

Неявные теги: вам больше не придется писать все теги для каких-то довольно стандартных конструкций, плагин определит их самостоятельно, полагаясь на тег-родитель. Попробуйте раскрыть эти конструкции: .header>.nav^.logo, .header>.wrap>.nav^^.logo и сразу всё поймете.

Появился новый оператор: ^. Он позволяет подняться на уровень выше при написании конструкций вида: .header>.nav^.logo или .header>.wrap>.nav^^.logo

Возможность расширения позволяет вам добавлять свои экшены и фильтры или настраивать существующие. Вы можете в файле Emmet.sublime-settings определить параметр extensions_path и Emmet будет подгружать все .js и .json файлы автоматически при запуске ST2.

Нюансы

Теперь некоторые тонкости.
Во-первых, Emmet существует только для ST2, в отличие от Zen Coding, который написан под большее количество редакторов кода.
Во-вторых, плагин еще тестируется и если найдете какие-либо баги, не стесняйтесь — отписывайтесь в issue на Гитхабе или в твиттер автору плагина.
Итог

А в остальном, Emmet просто замечателен по умолчанию, т.к. является продолжением концепции Zen Coding. Выражаю благодарность всем, кто причастен к разработке ZC и Emmet!
Если еще не пробовали, советую начать прямо сейчас! И помните, оставляя фидбэки автору плагина, вы помогаете улучшать любимый продукт!
Скачать Emmet!
habr.com
Форматирование текста с помощью плагина Emmet
Для того чтобы отформатировать текст в виде html, обычно используются теги. Причём чаще всего сначала формируют разметку документа в виде тегов, а потом внутрь них вставляют текст. Но бывает ситуации, когда текст уже есть, он хорошо отформатирован, разбит на абзацы, заголовки и другие логические части: списки, блоки с кодом и т.п.
Тогда текст проще «оборачивать» в теги.
Вот здесь как раз и понадобится плагин Emmet, который существует для нескольких текстовых редакторов кода (Notepad++, Sublime Text, Coda, NetBeans, Brackets и др.). На примере последнего мы и рассмотрим этот плагин. Кстати, подробное описание всего, что умеет Emmet, вы найдете по ссылке emmet cheat-sheat.
Установка плагина Emmet в Brackets
Все очень просто. Нужно скачать плагин с сайта, вызвать окно установщика расширений в редакторе Brackets, нажав на клавишу в виде кубика Лего, и перетащить zip-архив на кнопку Drag zip here или Установить с URL.
Или еще проще — в поле поиска справа вверху ввести «Emmet» и установить плагин, кликнув на нем.
Аббревиатуры в Emmet
Для начала необходимо запомнить несколько простых понятий и сочетаний клавиш. В Emmet существует понятие аббревиатуры, которое подразумевает некоторое сокращение для тегов в html-коде или для css-свойств.
Итак, аббревиатурой для создания базовой структуры html-документа является html:5 или просто восклицательный знак !. Чтобы Emmet преобразовал этот код в теги, нужно просто набрать ! и нажать Tab. Важно не ставить пробелы после набранного кода.
Чтобы добавить любой тег, достаточно просто написать его без скобок и нажать клавишу Tab.

div превратится в <div></div>
div превратится в <div></div>

Для того чтобы создать заголовок первого уровня с текстом внутри, нужно набрать h2{Текст заголовка} и нажать Tab.

<h2>Текст заголовка</h2>
<h2>Текст заголовка</h2>

Чтобы создать заголовок с тексом-«рыбой», которым обычно является lorem ipsum… — псевдо латинский текст, которым замещают текст в тех блоках, для которых реальный текст ещё не написан, необходимо набрать

Цифра после слова lorem указывает на количество слов из этого текста. В нашем примере это 3 слова.
Чтобы создать div с классом block, нужно набрать просто

А для абзаца с классом block обязательно указать тег p:

А код ниже превратиться в абзац, заполненный шаблонным текстом lorem ipsum.

Если вам необходимо добавить элемент div с, причем с вложенными в него 2-мя абзацами с текстом lorem ipsum, используйте такую аббревиатуру:

Оборачивание текста в теги
Но пока мы не приблизились к тому, как оборачивать существующий текст в теги.
На самом деле все просто. Для этого необходимо выделить нужный текст и нажать (внимание!) сочетание клавиш Ctrl+Shift+A.
В нижней части редактора будет выведено поле для ввода аббревиатуры. И здесь действуют те же правила. Правда, вряд ли в этом случае вам понадобится текст-рыба 🙂
Видео по теме
В видео ниже разбирается, как превратить txt-файл в html с разметкой и css-форматированием с помощью плагина Emmet. Вы можете попробовать повторить все действия, скачав txt-файл.
Просмотров: 776
html-plus.in.ua

Emmet шпаргалка – Справочник EMMET сокращений для ускорения верстки

Написать HTML и CSS быстрее с Emmet

Про все: Emmet — полезный инструмент для создания HTML разметки. Часть 1

Содержание

Аббревиатуры

Синтаксис аббревиатур

Элементы

Операторы вложения

Вложение: >

Добавление: +

На уровень вверх: ^

Повторение: *

Группировка: ()

Операторы атрибутов

ID и CLASS

Пользовательские атрибуты

Нумерация элементов: $

Изменение начала и направления нумерации

Текст: {}

Совет по форматированию аббревиатур

Типы элементов

Сниппеты

Аббревиатуры

Псевдонимы

Неявные имена тегов

Как это работает

Генератор “Lorem Ipsum”

Повторяющийся “Lorem ipsum”

Emmet — htmllab

Emmet и HTML

Базовые команды

Дочерний элемент

Соседние элементы

Группировка HTML-элементов

Создание сразу нескольких однотипных элементов

Нумерация HTML-элементов

Работа с атрибутами класса и идентификатора

Ускоряем работу с Emmet, или мой первый шаг к Open Source / Habr

1. Часть первая, с рассуждениями

2. Часть вторая, с идеями

3. Часть третья, с результатами

4. Пару слов напоследок

Emmet LiveStyle — инструмент для удобной front-end разработки / Habr

Возможности

Установка

Потомок Zen Coding — Emmet for ST2! / Sandbox / Habr

В чем, собственно, отличие от ZC?

И это еще не всё!

Нюансы

Итог

Скачать Emmet!

Форматирование текста с помощью плагина Emmet

Установка плагина Emmet в Brackets

Аббревиатуры в Emmet

Оборачивание текста в теги

Видео по теме

Добавить комментарий Отменить ответ