Notes from the Dev: Using Emmet for Faster HTML Email Coding

How many keystrokes do you think you make when you code up a new email? Probably a lot. What if you could cut all that typing down drastically and develop campaigns faster than ever?

That’s exactly what the  can do for you. And in this episode of Notes from the Dev: Video Edition,  introduces us to the way it works.

Shannon develops emails for United Health Care. As you can probably imagine, UHC is a high-volume sender. That means Shannon’s got her work cut out for her, and saving time is a big deal.

Of course, we could all use a little extra time on our hands. So, let’s dive into the latest episode and find out how Emmet can make HTML email development more efficient. Watch the video below, check out the show notes for more information, and don’t forget to . You can also read the full transcription of this episode.

What is Emmet?

No, it’s not about Emmet from the LEGO Movie, but this is still pretty special. In fact, you might even say “everything is awesome.”

Emmet is a set of free, open-source plugins that work with a variety of text editors. By the way, it used to be known as Zen Coding, but it got a rebrand. While it’s typically presented as a web development solution, plenty of email developers use Emmet to simplify and speed up their processes.

Emmet is written in pure JavaScript, and it works across platforms, including  Vatican City Business Email List web browsers, Node.js, Microsoft WSH, and Mozilla Rhino.

In our video, Shannon Crabill uses it with Adobe Dreamweaver. But Emmet can also be used with other popular editors. That includes which is my email editor of choice.

B2B Email List

How does Emmet work?

Emmet is built on the use of r shortcuts, which are special expressions that get parsed and transformed into blocks of code.

Shannon gave us a simple example to start things out: Type a “p”, hit the Tab key, and Emmet automatically creates an open and closed paragraph tag <p> </p>. To add a child element to the abbreviation for a larger code block, you just use the > symbol (right-angled bracket).

Cool coding tricks with Emmet

Obviously, coding with Emmet can get a lot more complex than  UAE Cell Number those basic examples. Shannon took things up a notch by showing us a few other capabilities.

You can quickly add multiple HTML tags at once. Just use the star or asterisk symbol along with the abbreviation followed by the number and it will multiply the tag that many times.

Leave a comment

Your email address will not be published. Required fields are marked *