Notes from the Dev | Episode 3 | Using Emmet for Email Coding with Shannon Crabill

We’ve got another great tool for email coders to explore in this new episode of Notes from the Dev: Video edition. It’s called Emmet, and it could help you shave a ton of time of off the HTML email development process.

Emmet is a plugin you can use with a variety of HTML editors. In this episode, Shannon Crabill of United Healthcare (UHC) shows us how to works with Adobe Dreamweaver.

Watch her walk us through it in the video below. You can also check out the show notes on our blog for more information. And don’t forget to subscribe on YouTube for more Notes from the Dev!

Megan [00:00:00] Hi. I’m Megan Boshuyzen. And you’re watching Notes from the Dev: Video Edition. Hi. Welcome to today’s episode of Notes from the Dev. I’m Megan. And with me today is Shannon Crabill, senior email developer from United Health Care. Today, Shannon is going to blow our minds. It’s going to be so awesome. And she’s going to talk to us about how she saves precious, precious email developing time by using Emmet and Dreamweaver shortcuts. I’m so excited for this. Shortcuts are awesome. So, Shannon, why don’t we cue up the screen and why don’t you show us some awesome, awesome Emmet things?

Shannon Crabill [00:00:53] Sure. So if you don’t have the snippets panel in your Dreamweaver window already, you can get there by navigating to Window. And then at the very bottom are these snippets in there. A little panel should pop up or there’s a shortcut for it, which I believe is Shift F9 to get that panel open or closed.

Shannon Crabill [00:01:13] For those who don’t know, Emmet is essentially like shorthand for writing code. Similar to how you might write shorthand for CSS, but you can use it for other types of code. I use it mainly for HTML since that’s what emails are built off of, and what I love is that and I didn’t realize until recently, it’s pretty much baked into Dreamweaver. So, I’ll just start with some examples of how Emmet works is a lot of it is typing and then hitting Tab and then it’ll expand to create a whole  HTML tag. So a quick example is a <p> tag. I just hit p and then tab and then I have the whole tag ready to go. It’s pretty cool. It even does things like you can get a whole HTML document, Exclamation. Tab. Look at all that. All that code already started just for you. Pretty neat. And it can get more complex, which I think this is where the fun part is. And I use this quite often is you can do a asterisk or a star for multiplying a tag instead of one <p> tag. I could do three. So it’s p little multiplication sign, and three, and then tab. And I have three paragraph tags. That’s pretty neat. I use that a lot for if I’m doing like a lot of disclosures or disclaimers, I just need a bunch of paragraph packs. Start them aoff like that and just fill them in.

Shannon Crabill [00:02:28] They could also use Emmet to fill in, create the HTML element, and then fill it in with the content. And you would do that with the curly braces. So, as quick example, let’s do an H2 tag with a title and then Tab. And there we go.

Megan [00:02:43] That’s so cool!

Shannon Crabill [00:02:44] It is really cool, and it gets even better. So you can do the same thing with attributes. So, let’s do an image tag know, square brackets. Let’s go with alt text. Hi, Mom. Tab out. There we go. And you can just chain that for multiple attributes. That’s pretty neat. And to keep going, blow your mind a little bit more is you can do child elements all in one go as opposed to doing them individually. So with this example here, I would want this is creating an unordered list and then three list items within that list. So the ol, the greater than symbol, li and we’ll do three of them just because, and then Tab. And then similar things… So elements that are next to each other but not nested within each other. Little plus sign in there. This one’s a little bit complex. So let’s do H2 and then a p, and I want an unordered list and then a list item, and then three of those. I think that matches what I previewed. Boom. Got like most of an email already done right here.

Shannon Crabill [00:03:53] And to keep going a little bit more is you could also add your classes, and your IDs by just appending your HTML element tag, a dot for your classes, a pound sign for your IDs, and I guess you could do multiples too. And then there you go. So, to show you all. Boop. Cool Very cool. And then since this is emails, just now you can do a table really quickly. Table starts it off as well. Actually, that’s wrong. That doesn’t work. Table is one of the tags where it’s table plus and that gives you the whole table itself. To add to that a little bit, we usually add a lot of attributes to our table tag that that representation. So padding spacing for zero out couple rows and a couple cells and this will create a very nice. Pretty much starter email right there. And of course I can fill stuff in as needed, but you’re sort of seeing where like you could shave like little bits of time off of creating like simple elements, then adding to it as needed.

Shannon Crabill [00:05:01] So, I use this for I use Emmet a lot just for creating like those basic elements with the paragraph tags with items, that sort of thing. But where sort of to expand on that, I also learned that Dreamweaver has snippets.And this sounds obvious, but it’s been , I’ve been using Dreamweaver for forever and did not realize it had snippets. Snippets are just chunks of code or HTML or even text that you can save and then reference whenever you need it. So I use it for things like brand colors, or like link filing, or like whole buttons. And then I can add add to that as a go. If you don’t have snippet panel handy, it’s just Windows. And then snippets down here at the bottom. There are a lot of pre-filled ones you may not necessarily need, but they might be handy. You can also reate your own. I’ll do that in a second.

Shannon Crabill [00:05:52] Actually, let’s let’s do that right now. So, as an example… So we know that. I do p. That’s how it works with Emmett. I wanted to create my own version., I could do p, and let’s add some style. Color red and then actually description. Closing and ending tags. And there we go. So if I wanted to have some text. And highlight it. I can select it for my panel here. P tag. And I’ve got my styling done. That’s also pretty neat for paragraph tags. I might have to go to the filing that I want to reference and I have to take over and over again and snippets are good for that.

Shannon Crabill [00:06:42] And then to go a level further, you can assign trigger keys to your snippet. It’s sort of like those snippetss we had for Emmet. So, using this one as an example again. I can assign a triggers key. So, it would be whatever that key is. Or it can be more than one character, and then Tab, and it will expand to whatever code I’ve done. And for some reason it’s like to overwrite my stuff, but. I want a before and after. And I’ll just do para, just so I can note the paragraph tag.  And with my custom styling, para, Tab. There we go. So that’s a really tiny example. But I’ve used different things like filing for superscript tags, filing for links, that sort of thing, or anything special that you just want to have to type over and over again. And I can’t think of what else to share.

Shannon Crabill [00:07:36] Oh, I pulled this example from one of the recent Notes from the Dev emails where you had code snippets and then some style code for it. So, knowing what we know about Emmet, if I did just pre, it would expand to this. I could also type all of this out in the hit Tab, and it would create the styling that I want. But it’s really a good idea to see something like this and put it in a snippet so that I can reuse it. And a note I want to have about snippets is that for the trigger keys, they have to be unique and they can actually overwrite anything like the Emmet tag. So, like I talked about previously doing pre and then Tab with it would do this. But if I created a snippet that did that, So it’s pre, pre, wrap selection. If you do. Okay. And now my pre tag should expand to do something like this, which I just created. That’s pretty handy.

Shannon Crabill [00:08:39] And I think that’s the bulk of it. I have some bonuses that you all my I’m pretty cool along the same line. I did learn that you can just do Shift forward slash and it will start a comment tag. So that’s for if you’re just writing comments in your code. You can also do lorem ipsum right in here There’s a paragraph or so. You can also do lorem ipsum with a set number of words. So, lorem and 13 will give me 13 random words, which I think is pretty helpful for filling in all those cool tags you just created using your Emmet extension and your snippet. I think that’s all I have for today.

Megan [00:09:13] This is so awesome. Thank you. My mind is, like, blown by the curly brackets. And, like, the straight brackets. That’s a part of Emmet I never knew. And now I’m going to play around with it and make development just that much quicker, which is really awesome. And another thing I noticed is that Emmet is essentially a plugin. So it’s available in a lot of different HTML editors. So if you’re not using it, definitely still try it out in your editor.  And those shortcuts that you showed us are also available generally in other editors. So this just, you know, works outside of Dreamweaver too, which I think is really awesome that we can take this and then like bring it into our own editors that we may use.

Shannon Crabill [00:09:57] Exactly.

Megan [00:09:58] So, yeah. So this was really, really amazing. I loved learning about Emmett. It’s just so cool to me. I have nothing else besides that, except it’s cool. So, audience, that’s what we have for you today. Thank you so much for watching this episode and I hope you come back for more. Shannon, where can we find you online?

Shannon Crabill [00:10:22] You probably just find me on Twitter. @Shannon_Crabill on Twitter.com.

Megan [00:10:27] Awesome. Well, thank you again for coming on. And we will see everyone next time.

Shannon Crabill [00:10:34] Thanks for having me

Megan [00:10:37] Bye!