0
82
2019-09-20

Тренажер и курс по работе с Emmet от epixx.github.io

В данной статье я предлагаю Вам ознакомиться с отличным тренажером по работе с Emmet от epixx.github.io, плюс в общем рассмотрим что из себя представляем Emmet и как с ним работать.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Emmet это плагин для многих популярных текстовых редакторов, который значительно улучшает рабочий процесс HTML и CSS.

В основном, большинство текстовых редакторов позволяют вам хранить и повторно использовать часто используемые фрагменты кода, так называемыми «фрагментами». Хотя фрагменты кода являются хорошим способом повысить производительность, все реализации имеют общие побочные эфекты: сначала нужно определить фрагмент, но нельзя расширять его во время выполнения.

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

Тренажер для работы с Emmet от epixx.github.io

Перейти и потренироваться https://epixx.github.io/emmet/

Основная цель данной статьи познакомить Вас с отличным сервисом, который поможет Вам повысить Ваш скил при работе с Emmeт снипетами (фрагментами кода).

Другие обучающие проекты для работы с Emmet

Есть также много других фантастических обучающих программ онлайн. Большинство фокусируется на использовании Emmet в контексте веб-дизайна и разработк. Вот несколько из лучших:

Вы не знаете что такое Emmet?

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

Emmet доступен для различных текстовых редакторов и встроен прямо в Litmus Builder. Популярный среди веб-дизайнеров, Emmet также популярен среди небольшого числа разработчиков макетов для электронной почты, особенно европейцев и маркетологов, которые пишут электронные письма с нуля. Например, 11% маркетологов в Европе и Великобритании и 13% тех, кто кодирует электронные письма с нуля, используют Emmet, согласно исследованию состояния рабочих процессов в электронной почте в 2018 году от litmus.com .

Использование плагина Emmet остается нишей

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

Использование Emmet

Самый простой способ понять Эммет - это посмотреть на пример. Допустим, вам нужна таблица из трех строк, каждая из которых содержит ячейку таблицы с изображением над абзацем текста и ссылкой.

Наша желаемая структура.

Выше наша желаемая структура.

Вместо того, чтобы вручную вводить - или копировать и вставлять - каждую строку, ячейку таблицы, изображение, абзац и тег ссылки, вы можете сократить это до одной строки и позволить Эммету выполнить большую часть работы за вас.

table>tr*3>td>img+p+a

После нажатия кнопки TAB, чтобы вызвать Emmet, одна строка кода выше раскрывается в полный HTML.

<table>
  <tr>
    <td>
      <img src="" alt="" />
      <p></p>
      <a href=""></a>
    </td>
  </tr>
  <tr>
    <td>
      <img src="" alt="" />
      <p></p>
      <a href=""></a>
    </td>
  </tr>
  <tr>
    <td>
      <img src="" alt="" />
      <p></p>
      <a href=""></a>
    </td>
  </tr>
</table>

Эта строка кода выглядит пугающей, но как только вы познакомитесь с синтаксисом Эммета, она станет второй натурой. Давайте разберемся с этим.

Строка начинается с элемента таблицы, который сообщает Эммету, что первым раскрываемым элементом является таблица HTML. Используя дочерний селектор (>) и оператор умножения (*), мы сообщаем Emmet включить три строки таблицы в основную таблицу.

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

Для дизайнеров электронной почты, которые полагаются на атрибуты HTML для обеспечения согласованности между различными приложениями электронной почты, вы даже можете включить атрибуты, которые Emmet затем будет использовать в своем расширенном коде. Просто поместите ваши атрибуты и их значения в квадратные скобки, разделенные пробелами. Например, если мы хотим включить в таблицу cellpadding и cellspacing, мы бы написали:

table[cellpadding=0 cellspacing=0]

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