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 subscribe to our YouTube channel. You can also read the full transcription of this episode. What is Emmet? Emmet from LEGO movie laughing 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.
How to create a high-performance email
By the way, it used to be known as Zen Coding, but it got a Benin Email List 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 BH Lists JavaScript, and it works across platforms, including 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 Parcel, which is my email editor of choice. How does Emmet work? Emmet is built on the use of abbreviations or shortcuts, which are special expressions that get parsed and transformed into blocks of code.
How to analyze and test emails
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). For example, typing body>table>td>tr and hitting Tab would generate: <body> <table> <td> <tr></tr> </td> </table> </body> There are tons of useful shortcuts in Emmet. Just type an exclamation point (!) and hit Tab to get the code for your HTML doctype. If you want to quickly code elements that are close to each other but not nested within each other, you can just use a plus sign (+).
