Emmet brackets как пользоваться: Brackets и Emmet

Содержание

Brackets — обзор редактора кода

Привет дорогие друзья. На носу у нас Новый Год. Скоро ко всем в гости придет пьяный (тьфу-тьфу-тьфу…) Дед Мороз и будет дарить подарки и дышать перегаром. Вот и я решил не отставать (не в плане перегара) и сделать вам пару приятных сюрпризов перед праздниками. Потому как после, всем будет не до моих уроков. Как, впрочем, и мне.

Сегодня я собираюсь «угостить» Вас хорошим видеокурсом по очередной программе для разработки сайтов. Речь пойдет о редакторе Brackets. Для тех, кому влом читать мою скучную писанину — можете перемотать страничку вниз и приступить к просмотру. Все уроки выложены на нашем канале Master-CSS.

Предыстория Brackets

Для начала о названии и логотипе. Brackets переводится как [кавычки]. Именно их мы видим на логотипе. Недавно я у себя тоже логотип сменил. Он более наглядный, а главное сразу отражает суть нашего сайта, как ресурса о создании сайтов. То же самое и здесь — идеально отражает суть редактора кода, как мне кажется.

Adobe Brackets, да да вы не ослышались — эту программу представляет очень известная в наших кругах компания Adobe. Именно с их легкой подачи приступили к разработке сего софта. Однако сначала он был известен под названием Edge Code. Так что если вас спросят, знайте — это одно и тоже.

Я наблюдал за его развитием с самого зарождения. Вначале было море… глюков. Редактор почти всегда начинал тупить после установки нескольких плагинов, а в некоторых моментах вообще зависал и переставал работать. В общем, в тот момент он прожил у меня на компьютере недели две. И когда я стал замечать, что при работе с ним постоянно хочу «ляснуть кулачищем» по клавиатуре — снес от греха подальше.

Чем мне приглянулся Brackets?

Те, кто следят за моей рассылкой, знают, что пару месяцев назад мы выкладывали видеокурс по SublimeText 3. И могут не понять, какого лешего я вообще обратил внимание на эту недоработанную программу, если есть такая замечательная альтернатива? А вот почему:

Первая ассоциация, которая у меня была при открытии софта — блин, да это же русский Sublime! Программа поддерживает множество языков, и вы можете легко скачать Brackets на русском прямо с оффсайта. И она невероятно напоминает SublimeText.

Второе, удобство работы. Конечно, на тот момент всё убивали глюки. Но ведь программа была еще на стадии тестирования и разработки. И косяки я просто не учитывал. Потому что дизайн там красивее и продуманнее, особенно для новичков. Есть кнопки, менюшки и другие плюшки юзабилити. Вроде и минимализм остался, и в то же время удобно до чертиков.

Третье, оригинальные идеи, которых я не встречал в SublimeText, да и других редакторах. Интерактивный просмотр и подсветка элементов при верстке, быстрое редактирование, подсказки цвета, встроенная система справок, и многое другое. Особенно меня интересовала парочка плагинов. Об этом я расскажу в конце статьи, в разделе — «Плюшки редактора Brackets».

В-четвертых, он полностью бесплатен и есть русская версия и свободно скачивается с официального сайта brackets.io. Как мне кажется, Adobe специально все это замутила, чтобы вытеснить с рынка SublimeText. Уж очень он стал популярный.

Так же есть русская версия скачать можно по ссылке: Brackets скачать русскую версию

В-пятых, всего остального тоже навалом

— Здесь и мультиплатформенность. Можно спокойно «спионерить» Brackets как для Windows, так и для других ОС. От части это благодаря тому, что редактор разработан на HTML, CSS и JS. А они работают везде.

— И множество различных плагинов и расширений. Которые позволяют полностью настроить Brackets под свои нужды.

— И куча тем оформления всевозможных цветов и тонов. На любой вкус, так сказать.

Вот такие пироги. И всю эту бочку меда портили лишь глюки, которые не давали работать в своё удовольствие.

И вот, наконец-таки появился свет в конце туннеля — я дождался заветного релиза версии 1.0. Быстренько скачав Brackets на свой компьютер и погоняв его вдоль и поперек пару дней, понял: различие между старой и новой версией, как между небом и землей.

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

Обучение, как у нас принято, начинается с самого нуля. Вначале мы скачиваем и устанавливаем программу. Затем разбираем настройки Brackets и знакомимся с его интерфейсом.

После начинаем устанавливать и разбирать по очереди расширения и плагины Brackets, которые мне понравились больше всего за время работы. Поверьте, этому редактору есть чем вас удивить. Вы останетесь довольны.

Встречайте, смотрите и применяйте…

Смотреть урок на YouTube

(ребята, спасибо Вам большое за интерес, и за то, что не забывайте ставить лайки и подписываетесь на наш канал. Я вас обожаю! )

Я планировал записать маленький обзор из пары уроков, а в итоге получилось вот это чудовище

Список уроков по Brackets

Brackets – настройки и фишки

Установка редактора
Исправляем проблему русского шрифта
Интерфейс редактора
Базовая настройка Brackets
Split — разделение экрана
Боковая панель
Live Preview — интерактивный просмотр
Быстрый просмотр
Inline Editors для HTML — быстрое редактирование
Inline Editors для CSS — быстрое редактиврование
Быстрая документация CSS

Brackets – плагины и расширения

Темы оформления
Brackets Icons — иконки в редакторе
Overscroll – перемотка ниже кода
Special Charecters — таблица спецсимволов
Brackets CSS Color Preview — быстрый просмотр цветов
ColorHints — быстрый выбор цвета
Brackets Color Palette — выбор цвета с картинки
Indent Guides — ориентация во вложенности кода
CodeFolding — сворачивание кода
Documets Toolbar — горизонтальная панель открытых файлов

Emmet — быстрый набор HTML и CSS
CssFier — бысрая вставка селекторов в CSS
Minifier — сжатие CSS и JS файлов
JS Beautifier — форматируем код
Autoprefixer — автоматические префиксы
Extract for Brackets (Preview) — Часть 1
Extract for Brackets (Preview) — Часть 2
eqFTP — клиент прямо в редакторе
QuickFormTool — быстрая вставка форм
SVG Font — просмотр SVG файлов
Brackets Snippets (by zaggino) – сниппеты
Response for Brackets — адаптивный дизайн

А сейчас, как и обещал. ..

Плюшки редактора Brackets

В начале давайте пробежимся по плюсам самой программы, а затем затронем «особенные» расширения и плагины, от которых я просто балдею.

Интерактивный просмотр (Live Preview)

Первое, что стоит отметить, это функцию Интерактивного Просмотра, или, как многие её называют — живой просмотр. Благодаря ей вы можете наблюдать за изменениями сайта, прямо во время верстки страницы. Обратите внимание, что для работы требуется браузер Google Chrome. Именно в нем открывается ваш сайт и показываются все изменения.

Знаю, знаю, сейчас вы скажите — то же самое есть и в SublimeText! Однако прошу учесть тот факт, что там для этого надо выполнять каждый раз довольно таки не простые «танцы с бубном» , прежде чем все начнет работать. А здесь у нас все из коробки. Как поется в одной песне: Нажми на кнопку, получишь результат.

На данный момент интерактивный просмотр работает в HTML и CSS файлах. А вот при редактировании javascript — придется сохранятся.

Быстрое редактирование (inline editors)

Очень удобная штука. Суть в том, что вы можете править CSS и JS прямо из HTML документа. Не переключаясь между файлами. Поверьте, времени экономится просто огромное количество. А про удобство и комфорт работы вообще молчу. Все можно делать из одного файла.

Вы просто выбираете нужный тег, жмете CMDCTRL+E и у вас открывается специальное окно. В котором можно внести стили для этого селектора. При этом можно редактировать, как уже существующие стили, так и завести новые. Там же доступно переключение между CSS файлами, если у вас их несколько.

В любом случае — рекомендую погонять. Останетесь довольны.

Быстрый просмотр

Позволяет просматривать цвета, которые используются в коде. Если в других приложениях надо открывать какую-нибудь программу или запустить плагин, чтобы узнать какой цвет используется. То здесь просто наведите курсор мыши на нужный код цвета, и Brackets сразу покажет вам его.

А в самом видеокурсе, мы еще установим парочку интересных браузеров, которые значительно расширят и облегчат работу с цветом. В общем — сами все увидите.

Быстрые подсказки.

Эта фишка мне всегда нравилась в Dreamweaver. Не знаю, как сейчас, но когда-то давно она в нем присутствовала.

Если вы хотите подключить какой-то файл, стили, скрипты, картинки — не важно. Brackets автоматически подскажет вам не только путь, но и имя файла. Очень удобно!

Плагины и расширения Brackets (самые самые):

Я затрону здесь только самые интересные с моей точки зрения. В скобочках я буду указывать номер урока, в котором мы рассматриваем данный плагин. В самом курсе разбирается еще куча интересных и полезных штук. Смотрите его!

Brackets Emmet (22)

Начну именно с него, поскольку, скорее всего, вы и так слышали о нем еще из курса по SublimeText.

Этот плагин позволяет быстро набирать HTML и CSS. По факту, если научиться им грамотно пользоваться, то ваша писанина ускориться раз этак в 10. Это расширение из разряда «Must Have», которое должно стоять в каждом редакторе.

Extract for Brackets (Preview) (27, 28)

Вот это расширение мне понравилось больше всего в редакторе. Позволяет верстать прямо из PSD макета. То есть, в программу Photoshop залазить уже не надо.

Подключаемся к плагину, закачиваем свой PSD на сервер Adobe Creative Cloud, и наш редактор начинает извлекать все стили и графику из PSD макета.

Это нельзя описать словами, можно только увидеть и понять всю масштабность задумки. Реально КРУТО!

Response for Brackets (33)

Позволяет ваять адаптивность сайта из окна редактора Brackets. Говоря другими словами, адаптивный дизайн у вас в кармане.

Все сделано стильно и удобно. При включении создает отдельный файл стилей, куда записываются все изменения. По окончании работы его надо просто подключить к файлам сайта.

Но есть один момент, куда ж без него родимого . Расширение еще разрабатывается, и работает, скажем так, не совсем стабильно. Однако его дорабатывают, обновляют и в скором времени все будет ТИП-ТОП.

Баги и глюки редактора Brackets.

Напишу просто свое мнение за время работы. Так как я в нем уже наковырялся, и кое-что могу сказать определенно.

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

Таких мало, но все же. Всегда придерживайтесь такой схемы: Поставили плагин — погоняли на редакторе — если все работает, ставим следующий.

Потому что иногда человек поставит кучу плагинов и потом поди угадай, который ломает работу Brackets.

Во-вторых — как только установите программу, в ней будет проблема с русским шрифтом. Смотреться он будет «страшновато». Все дело в шрифте по умолчанию, который ставится после установки. Достаточно просто поменять шрифт текста и все будет окей. Как это делать — смотрим урок №2.

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

даю 3 совета:

Ставьте Brackets не на системный диск
Установите Nodejs
Пробуйте запускать от имени администратора

Здесь, наверное, все, что я хотел сказать. Если найдете какие-нибудь интересные плагины, или наоборот плагины, которые портят работу — пишите в комментариях. По одним запишу новые видео, а другие занесем в черный список, что бы люди не обжигались.

Спасибо за внимание, жду ваших отзывов в комментариях.

PS: реально, задолбался писать эту статью. Проверил уже три раза — глаза на лоб лезут . Если найдете баги, очепятки, или неправду — пишите, поправлю.

PSS: надеюсь, обзор вам понравился

Emmet | andron13

Emmet и HTML #

Emmet — это слово, которое первоначально означало муравей. Это то самое маленькое насекомое, способное переносить груз в 50 раз больше собственного веса. Это слово также похоже на “emit”, что, по сути, и делает Emmet, когда расширяет аббревиатуры.

То есть emmet набор сокращений и горячих клавиш, которые помогают в повседневной работе фронтендеру.

Появился Emmet в 2008-м году под названием Zen Coding. Zen Coding ускорял написание кода HTML, XML, XSL, а также код на некоторых других языках. Автор проекта Вадим Макеев.

На данный момент Emmet интегрирован во многие популярные редакторы кода изначально. На август 2021 года плагин работал в Visual Studio Code, во всех продуктах JetBrains(например WebStorm) и Brackets.

Не думаю, что надо тратить время и текст на то “как настроить мой редактор”. Просто воспользуйтесь одним из перечисленных выше. Начинающим не нужно усложнять свою жизнь больше, чем она и так есть.

Давайте начнём с азов.

Мы создаём пустой html-файл. И в нём надо написать как минимум доктайп, кодировку, язык, тайтл и само тело страницы. Что-то вроде вот этого.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
</body>
</html>

Всё это не надо заучивать и запоминать в 2021-м году. Да 25 лет назад разработчик веб-страниц должен был писать по шпаргалкам или запомнить наизусть.

Нам не надо учить многое или сбивать наши пальчики в кровь. На пустой странице нам достаточно написать восклицательный знак ! и сразу за ним нажать на Tab. В некоторых редакторах надо нажать Enter. В некоторых сработают обе клавиши. Обычно всё это можно в настройках изменить. В JetBrains продуктах по умолчанию срабатывает

Tab. В Visual Studio Code срабатывают обе кнопки.

Кнопки Tab и Enter на клавиатуре

Если вы всё правильно сделали, то у вас должен появится примерно тот же код, который и у меня вверху. От редактора к редактору, от версии к версии могут быть небольшие несоответствия. Это не столь важно на стадии изучения HTML и плагина Emmet.

Emmet может очень многое и в рамках статьи я покажу многие его возможности. Но эта статья не заменит оригинального сайта emmet.io с документацией.

В работе постоянно нужен контент. Без статей, текста, предложений и заголовков сайт сделать сложновато. Можно копировать уже из имеющегося контента. Заготовить текст, который отвечает всем правилам и копировать и вставлять его по мере надобности. Но, зная горячии клавиши всё это не нужно.

Веб-верстальщики (люди, которые делают веб-страницы) пользуются рыбой, специальным, чаще всего сгенерированным текстом. Такой текст для латинского алфавита называют

lorem ipsum.

Если мы введём в редакторе lorem и нажмём таб, то нам сгенерируется небольшой абзац текста, начинающийся с Lorem ipsum dolor sit amet, consectetur adipisicing elit. Если вы увидите на рабочей странице такой текст, то вероятно вебмастер забыл удалить дев-версию проекта.

И так, мы вводим lorem + tab и получаем:

<!--lorem-->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi aperiam aut dolorum eius error expedita, fugiat
ipsam iste maiores modi natus, nostrum quaerat quibusdam quisquam quos sequi vero voluptatibus?

В этом абзаце вверху 30 слов. lorem10 даст нам рыбу из 10 слов. Рыба

это термин для текста-заглушки.

<!--lorem10-->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, saepe.

Соответственно lorem150 даст нам огромный абзац из 150 слов. Хотя в html, пожалуй, правильнее говорить параграф. Ведь html-элемент отвечающий за абзац называется именно так и обозначается буквой p. И если мы хотим один абзац с рыбой, то вводим p>lorem.

<!--p>lorem-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Adipisci error facere magnam maiores optio sed tenetur,
  unde! Autem consequuntur eius esse iure laborum optio quisquam? Ab harum numquam optio? At?</p>

p*5>lorem сгенерирует 5 абзацев с рыбой. Дословно мы можем прочитать так. Сделай параграф пять раз и в нём лорем.

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

p.announce создаёт параграф с классом announce.

<!--p.announce-->
<p></p>

div.announce создаст див с классом announce

<!--div.announce-->
<div></div>

Div можно не писать вообще, так как этот элемент используют часто, то по умолчанию и emmet установил его. И тогда мы можем использовать . announce

<!--.announce-->
<div></div>

Кстати именно это и является одной из причин злоупотреблений дивом и как результат плохой вёрстки в 2021-м году. Лень верстальщиков и невероятно удобный emmet, который помогает писать быстро.

Но вернёмся к сокращениям. Мы можем установить и ID для элемента:
h4#title

<!--h4#title-->
<h4></h4>

Можно и айди, и класс, и даже два класса. h5#block-title.green.right

<!--h5#block-title.green.right-->
<h5></h5>

А что если нам надо сделать 5 блоков с пронумерованными стилями и/или ID. Для этого мы можем использовать переменную $.

<!--  p#block$.item$*3-->
<p></p>
<p></p>
<p></p>

Мы можем задавать и свой текст:

<!--p>{Свой текст}-->
<p>Свой текст</p>

Можем работать с изменяющимся текстом

<!--p#block$.  item$*3>{Мой текст и переменная № $}-->
<p>Мой текст и переменная № 1</p>
<p>Мой текст и переменная № 2</p>
<p>Мой текст и переменная № 3</p>

Заметка на полях #

Прошу заметить, что для начинающих изучать HTML emmet чаще всего не даёт прибавки в скорости, по очень многим причинам:

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

Скорее надо просто постепенно, ежедневно заниматься изучением и закреплением нового.

Домашнее задание #

Посмотрите что получится, если ввести:

#header
.title
.class
form#search.wide
ul>li
ul>li>a{текст}
ul>li*3
ul>li. bq
div>(header>ul>li*2>a)+footer>p
p[title=“Hello world”]
h$[title=item$]{Header $}*3
td[rowspan=2 colspan=3 title]
[a=‘value1’ b=“value2”]
a{Click me}
p>{Click }+a{here}+{ to continue}
.wrapper>h2{My Text}+p*3>lorem5
nav.header__menu>ul>li.header__menu-item$*6>{link-item $$}
ul.gallery>li*20>img[src=“img/img-filename-$$.jpg”]
div.answer.soft#soft-skills-$${HERE}*20>h4+p*2

Полезные ссылки #

Официальная документация emmet
Шпаргалка

Emmet Кодирование HTML для более быстрой разработки электронной почты

Разработка электронной почты 9 августа 2022 г.

Как вы думаете, сколько раз вы нажимаете клавиши, когда пишете новое электронное письмо? Наверное много. Что, если бы вы могли резко сократить количество печатных текстов и разрабатывать кампании быстрее, чем когда-либо?

Это именно то, что может сделать для вас набор инструментов Emmet. И в этом выпуске Notes from the Dev: Video Edition Шеннон Крэбилл знакомит нас с тем, как это работает.

Шеннон разрабатывает электронные письма для United Health Care. Как вы, наверное, понимаете, UHC — это отправитель больших объемов. Это означает, что у Шеннон много работы, а экономия времени имеет большое значение.

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

Что такое Эммет?

Нет, это не про Эммета из LEGO Movie, но это все равно что-то особенное. На самом деле, можно даже сказать «все круто».

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

Emmet написан на чистом JavaScript и работает на разных платформах, включая веб-браузеры, Node.js, Microsoft WSH и Mozilla Rhino.

В нашем видео Шеннон Крэбилл использует его с Adobe Dreamweaver. Но Emmet можно использовать и с другими популярными редакторами. Это включает в себя Parcel, который является моим любимым редактором электронной почты.

Как работает Эммет?

Emmet построен на использовании аббревиатур или ярлыков, которые представляют собой специальные выражения, которые анализируются и преобразуются в блоки кода.

Шеннон дал нам простой пример для начала: введите «p», нажмите клавишу Tab, и Эммет автоматически создаст тег открытого и закрытого абзаца

. Чтобы добавить дочерний элемент к аббревиатуре более крупного блока кода, вы просто используете символ > (прямоугольная скобка).
Например, если ввести body>table>td>tr и нажать Tab, получится:
<таблица> <тд> <тр>
В Emmet есть масса полезных ярлыков. Просто введите восклицательный знак (!) и нажмите Tab, чтобы получить код для вашего HTML-документа. Если вы хотите быстро закодировать элементы, расположенные близко друг к другу, но не вложенные друг в друга, вы можете просто использовать знак плюс (+). Ввод h3+p+ol>li превратится в:

<ол>

Ознакомьтесь с подробным списком аббревиатур Emmet из официальной документации плагина.
Крутые трюки с программированием с Эмметом
Очевидно, программирование с Эмметом может стать намного сложнее, чем эти простые примеры. Шеннон поднялся на ступеньку выше, продемонстрировав нам несколько других возможностей.
Можно быстро добавить сразу несколько тегов HTML . Просто используйте символ звезды или звездочки вместе с аббревиатурой, за которой следует число, и это умножит тег во много раз.
Например, p*3 создаст три тега абзаца подряд. Набрав ul>li*3 и нажав Tab, вы получите неупорядоченный маркированный список с тремя элементами:

Шеннон говорит, что это помогает ей, когда ей нужно добавить несколько абзацев, чтобы включить текст отказа от ответственности в электронные письма UHC. Но этот удобный трюк можно использовать во многих ситуациях, например, в электронных новостях с повторяющимися блоками кода.
Использование фигурных скобок в Emmet позволяет добавлять содержимое в теги HTML по мере написания кода. Шеннон показала нам, как она быстро использовала h3{title} для создания
title
. Это может не показаться огромной экономией времени, но это девять нажатий клавиш вместо 14. Это будет складываться, и чем лучше вы научитесь использовать Emmet, тем эффективнее вы станете.
Вы также можете использовать квадратные скобки для добавления таких атрибутов, как альтернативный текст для ваших изображений. Далее Шеннон показал нам, как добавлять классы и идентификаторы с помощью ярлыков Emmet. Есть даже ярлык для добавления текста-заполнителя lorem ipsum с помощью Emmet.
Использование фрагментов кода с Emmet и Dreamweaver
Именно здесь Emmet действительно может помочь вам писать код быстрее и эффективнее. Помимо стандартных сокращений, вы можете создавать ярлыки для повторно используемых фрагментов кода в своих электронных письмах. Если вы используете редактор, поддерживающий библиотеки фрагментов (как это делают Dreamweaver и Parcel), вы можете настроить взаимодействие с Emmet в соответствии со своим брендом и предпочтениями в кодировании.
После создания многократно используемого фрагмента вы можете назначить триггерную клавишу на этот многоразовый код, чтобы вы могли очень быстро вставить его в свою электронную почту. Шеннон отметил, что вы, вероятно, захотите создать уникальные триггерные клавиши для своих фрагментов, потому что в противном случае вы перезапишете аббревиатуру Emmet в Dreamweaver.
У Шеннон есть многократно используемые фрагменты, которые помогают ей легко включать такие вещи, как фирменные цвета и стиль ссылок. Но вы можете сделать это практически для всего, что не хотите вводить снова и снова.
Получить больше информации об Эммете и Шеннон
Хотите узнать больше об этом инструменте? Вот несколько замечательных ресурсов:
Документация Emmet: Подробная информация об этом инструменте разработки с открытым исходным кодом.
Площадка Emmet в CodeSandbox: возитесь с аббревиатурами Emmet на игровой площадке от разработчика Джозефа Шамбрука.
Получите больше советов по Эммету от разработчика Фатимы Амзил на Medium.
Большое спасибо Шеннон Крэбилл за то, что она нашла время поделиться с нами своими знаниями и помочь нам найти новые способы выполнять нашу работу быстрее. Вы можете посетить ее веб-сайт или связаться с ней в Твиттере по адресу @Shannon_Crabill. Шеннон также публиковала статьи в блоге Email on Acid, и вы услышите от нее, а также от других экспертов по электронной почте на нашем вебинаре по запросу, Оптимизация работы с электронной почтой от начала до конца .
Создан для загруженных групп электронной почты
Вашей команде нужна платформа для подготовки электронной почты, которая масштабируется по мере роста вашей компании и увеличения объема работы. Электронная почта в Acid позволяет вам управлять проектами и разрешениями во время совместной работы на протяжении всего процесса перед развертыванием. Узнайте, почему так много известных брендов доверяют Email on Acid в обеспечении безупречной электронной почты. Откройте для себя наши корпоративные решения .
Получить пользовательскую демонстрацию
Автор: Меган Бошуйзен
Меган — графический дизайнер, ставший разработчиком электронной почты, которая работала над всеми аспектами электронного маркетинга. Она считает, что хорошие электронные письма для добрых дел меняют мир к лучшему. В настоящее время Меган работает разработчиком электронной почты в Sinch Email. Посетите ее веб-сайт и узнайте больше на megbosh.com.
Автор: Megan Boshuyzen
Меган — графический дизайнер, ставший разработчиком электронной почты, которая работала над всеми аспектами электронного маркетинга. Она считает, что хорошие электронные письма для добрых дел меняют мир к лучшему. В настоящее время Меган работает разработчиком электронной почты в Sinch Email. Посетите ее веб-сайт и узнайте больше на megbosh.com.
20 лучших расширений Brackets для разработчиков интерфейсов
Разработчики часто ищут различные текстовые редакторы, чтобы внедрить их в свой рабочий процесс, и ранее мы рассмотрели, какие расширения могут быть адаптированы для пользователей VS Code, Sublime и Атом. Сегодня мы обратим внимание на расширения Brackets.
Brackets — один из менее известных текстовых редакторов, но его пользователи весьма увлечены его простотой использования и адаптируемостью. Услышав о Brackets от Киарана Оглесби, основателя Oglesby Media, я решил попробовать его на себе и посмотрите, как он сравнивается с моим обычным редактором VS Code. Для полного опыта я даже решил написать эту статью в Brackets и использовал ее в некоторых недавних проектах по настройке тем, чтобы понять, как это работает в практическом контексте кодирования.
В этой статье я выделил свои лучшие расширения Brackets, которые помогут разработчикам, работающим над темами и приложениями Shopify, оптимизировать свой рабочий процесс и получить максимальную отдачу от этого небольшого, но мощного редактора. Я также включил некоторые из моих любимых тем для настройки цветовой схемы пользовательского интерфейса, чтобы еще больше персонализировать работу.
Краткое введение в Brackets
Brackets создан Adobe, поэтому ожидается, что этот редактор должен быть визуально привлекательным и иметь интуитивно понятный пользовательский интерфейс. Как отмечает Киаран: «Скобки легкие и очень простые в использовании, а это означает, что я обычно могу выполнить работу быстрее. Я также предпочитаю пользовательский интерфейс. Для меня это проще для глаз».
Киаран также считает, что Brackets помогает в некоторых тематических проектах Shopify. «Я немного настраиваю тему здесь и там с помощью Brackets. В основном это включает в себя изменение дизайна верхних и нижних колонтитулов, настройку страниц продуктов или создание шаблонов страниц с разделами».
Поскольку он очень легкий, это означает, что многие функции, которые вы можете найти в более продвинутых редакторах, таких как VS Code, не являются частью основного предложения. Здесь на помощь приходит библиотека расширений, которая позволяет вам расширить базовую функциональность Brackets в соответствии с вашими требованиями, а также персонализировать рабочий процесс, чтобы он соответствовал вашему стилю.
Learning Liquid: Начало работы с темами Shopify
Получите это бесплатное руководство и узнайте практические советы, приемы и методы, чтобы начать изменять, разрабатывать и создавать темы Shopify.
Указав свой адрес электронной почты, мы также будем отправлять вам маркетинговые сообщения, связанные с Shopify. Вы можете отказаться от подписки в любое время. Примечание: руководство не будет доставлено по электронной почте на основе ролей, например, info@, developer@ и т. д.
Наши виртуальные винтики работают.

Обратите внимание, что он может занимать
до 15 минут, чтобы наше электронное письмо
дошло до вашего почтового ящика.
Как установить расширения Brackets
Найти и установить расширения в Brackets относительно легко. Кнопка блокировки на боковой панели откроет диспетчер расширений, где вы сможете искать доступные расширения, включать или отключать установленные расширения и даже устанавливать их из URL-адреса или zip-файла.
Вы также можете выполнять поиск по популярности, что является отличным способом быстро узнать, какие из наиболее популярных расширений используются сообществом Brackets. Каждая из записей ссылается на репозиторий GitHub, где вы можете узнать немного больше о расширении, что часто полезно для любого необходимого устранения неполадок.
После установки расширения вам может потребоваться перезагрузить Brackets, чтобы оно вступило в силу, что можно легко сделать с помощью сочетания клавиш CMD + R или CTRL + R . Многие расширения представят свои собственные сочетания клавиш и параметры меню, поэтому не забудьте обратить внимание на дополнения, которые вы видите в верхнем меню.
20 лучших расширений и тем для Brackets
Вот мой выбор 20 лучших расширений и тем для Brackets.
1. Жидкая подсветка синтаксиса
Liquid Syntax Highlighter — потенциально самое полезное расширение для разработчиков Shopify, работающих с файлами тем. Как и следовало ожидать, это расширение применяет привлекательную цветовую схему к объектам и тегам Liquid, что упрощает работу с файлами Liquid. Это важный инструмент, который можно использовать при работе с Theme Kit для локального редактирования файлов темы.
2. Автосохранение файлов при размытии окна
Легко отвлечься от проекта кодирования, когда вам нужно проверить электронную почту или ответить на сообщение Slack. Расширение Autosave Files on Window Blur снижает вероятность потери каких-либо изменений файлов во время этих поездок, запуская сохранение любых открытых файлов всякий раз, когда вы выходите из редактора Brackets или щелкаете в другом окне.
Вам также может понравиться: 20 лучших расширений кода Visual Studio для разработчиков интерфейсов.
3. Emmet
Emmet — это бесценный набор фрагментов кода и ярлыков, используемый разработчиками интерфейсов в различных редакторах. Emmet помогает быстрее настраивать HTML и CSS с помощью фрагментов и позволяет пользователям легко и быстро выполнять ряд различных задач с помощью интуитивно понятных ярлыков. Настоятельно рекомендуется!
4. Щелчок правой кнопкой мыши расширен
Библиотека расширений Brackets часто включает некоторые базовые функции, отсутствующие в основной программе, такие как возможность доступа к параметрам вырезания, копирования и вставки с помощью щелчка правой кнопкой мыши. Для тех, кто не использует сочетания клавиш, Right Click Extended будет долгожданным дополнением. Это также подчеркивает находчивость сообщества разработчиков Brackets: если что-то, что вам нужно, отсутствует в Brackets, скорее всего, есть расширение для решения этой проблемы.
5. Дезинфицирующее средство белого цвета
Поддержание чистоты кода с помощью логического использования отступов является ключевым моментом не только при работе над совместными проектами, но и для поддержания собственного здравомыслия, особенно при работе с большими файлами тем с множеством вложенных элементов. White Space Sanitizer обрезает конечные пробелы и обеспечивает дополнительную новую строку в конце каждого файла. Это расширение также отлично работает в сочетании с Show Whitespace, чтобы помочь вам создать управляемое визуальное представление вашего кода.
6. Скобки Git
Современному текстовому редактору потребуется надежная интеграция с Git, если он будет полезен разработчикам, и расширение Brackets Git не разочарует. Чтобы Brackets Git работал, вам необходимо установить Git на свой компьютер, и после установки у вас будет простой способ зафиксировать и создать PR для репозиториев Git.
7. Предварительный просмотр уценки
Предварительный просмотр уценки — невероятно полезный инструмент, если вы работаете с файлами уценки и хотите видеть предварительный просмотр своей страницы в реальном времени во время редактирования файлов. По мере ввода и добавления различных синтаксисов вы сможете просматривать, как они будут отображаться на странице, что позволяет очень легко обнаружить любые проблемы, прежде чем публиковать что-либо в Интернете.
8. ES Lint
Это расширение предварительно установлено вместе с Brackets. Но стоит обратить внимание на его способность статически анализировать ваш код, чтобы быстро находить проблемы, а также делать автоматические исправления.
9. Любой шаблон
Это расширение позволяет создавать собственную библиотеку шаблонов кода, которые можно использовать в качестве отправной точки при работе над тематическим проектом. Инструмент Any Template особенно полезен для разработчиков, которые используют альтернативные шаблоны для коллекций или страниц продуктов. Кроме того, вы можете создавать базовые шаблоны файлов разделов для различных компонентов темы, таких как избранные продукты или избранные сообщения в блогах.
10. Can I Use
Расширение Brackets Can I Use соединяется с Caniuse и позволяет разработчикам проверять, поддерживается ли конкретная функция или элемент различными браузерами и устройствами. Просто выделите элемент своего кода, используйте ярлык, чтобы открыть расширение, и инструмент автоматически отобразит информацию с caniuse. com. Это особенно полезно для гарантии того, что настройки вашей темы будут работать должным образом в различных браузерах, которые покупатели используют для просмотра магазинов Shopify.
11. Beautify
Еще одно расширение, существующее в различных текстовых редакторах. Beautify форматирует открытые файлы HTML, CSS и JavaScript, чтобы гарантировать правильность форматирования. Brackets Beautify можно запустить вручную для всего файла или для выбранного кода с помощью кнопки на панели инструментов.
Вам также может понравиться: 25 лучших плагинов Sublime Text для разработчиков интерфейсов.
12. Свертывание кода
Возможность выборочного скрытия и отображения кода, известная как свертывание кода, на самом деле включена через расширение Brackets по умолчанию. Это позволяет разработчикам, работающим с большими файлами, сосредоточиться только на тех разделах кода, с которыми они работают, путем скрытия или свертывания ненужных частей кода.
13. Lorem Ipsum
Любимый текст-заполнитель Lorem Ipsum можно получить с помощью этого расширения, которое позволяет быстро и легко вставлять образец текста в файл. Вы также можете добавить параметры к команде lorem и указать перенос, длину предложения, гиперссылки и многое другое.
14. Табуляция в пробел
Сделайте отступы немного проще и согласованнее с помощью функции «Вкладка в пробел», которая преобразует отступ на основе табуляции в отступ на основе пробела или наоборот. Независимо от ваших предпочтений для вкладок или пробелов, это расширение поможет вам.
15. Курсор скобок
Курсор скобок открывает ряд различных настроек курсора, включая переключение курсора в блочный стиль и настройку его цвета, чтобы сделать его более заметным. Это мелочи жизни!
Теперь, если вы проводите много времени в текстовом редакторе, важно, чтобы цветовая схема облегчала чтение. Различные темы для Brackets позволяют применять определенные цвета к пользовательскому интерфейсу, что не только улучшает читабельность и удобство использования, но и добавляет изюминку и индивидуальность вашему рабочему процессу.
Темы можно искать и устанавливать из тех же установщиков расширений, перейдя на вкладку Шаблоны . После установки вы можете применить эти новые темы, выбрав Просмотр в верхнем меню и щелкнув Темы , что откроет окно Настройки тем .
16. Тема 808
Цветовая схема темы 808 навеяна культовой драм-машиной Roland TR-808, включающей четыре основных цвета в минималистском формате.
Вам также может понравиться: 21 лучший пакет Atom для разработчиков интерфейсов.
17. Mystique
Тема Mystique, которая очень приятна для глаз, собиралась на протяжении многих лет пользователем Brackets и имеет светлые тона.
18. Рубиновый синий
Рубиновый синий — это яркий стиль, который перекликается с видеоиграми прошлого и придает редактору ощущение ретро.
19. Star Platinum
Тема Star Platinum, вдохновленная японской мангой, является одной из самых простых для чтения и моей любимой темой.