AMP for Email Workshop

Filip Stanis 0:40
Okay, so Hello, everyone, my name is Filip Stanis. And I work for AMP email team here from home in London. And I'll be doing a workshop on AMP for email, where you will hopefully learn a trick or two. And basically, I will try to explain how the dynamic features of Android will work. And please feel free to ask any questions in the process. Or if there's anything that's unclear, I'm happy to stop and re explain it or just dive into some topic deeper than what's actually in the examples I'll be giving. These have a short presentation that I will try to open right now. See if this works.

All right, this is terrifying. So once again, my name is Filip Stanis, you can reach out to me on twitter @FilipStanis after the presentation. That's the social network I check the most. But in general, it goes ask questions here on you can probably find me on LinkedIn. I also check that from time to time. So the idea behind this presentation is to give you a quick overview on the technical part, especially the dynamic part spoken for email. When I say the only part I mean am glist and form and AMP bind. Those are the three m components that are actually allowing you to put an AMP features into an email. Now, these features, these components are different things, I'll be using some combination of the three of them in this example, just so that you can get an overview of each. However, you can use them independently, and they do not necessarily need to be used together in the same way I'm using them here. Also, quick disclaimer, I'm not a designer and this inner will not good. The idea is just to demonstrate how to actually use these components, as opposed to actually making a fully fledged email in a real use case, the use case they actually have in mind. And the thing that we are going to build is a simple email that gives you a messenger today or some sort of reminder, or basically a note taking app that's built into an email, you will see the notes that you left there yourself and you'll be able to add them from inside email. Now I'm aware this is probably not the best example of something you would want to do anymore. But once again, the idea here is to give you an overview of the components and how they work, rather than to actually give you a fully fledged example. That's that's something an actual business uses. So no further ado, the actual email will look something like this. So we have the message on top, which is encrypted from the server. And you have an edit button, once you press it, the email will open this area where you can type in a new message. Once you present Submit button, the message itself will update and it will also be updated on the server. So the next time you open the same email, the message that you entered the previous time will be visible there. And as I mentioned, this is persisted on the server. And so it could be the server for the purpose of testing this. And this server is very simple. It's built in OJS. It has less than 100 lines of code. I can show you the source code of the server after but I just want to emphasise that this is not really part of the presentation and the way you build your server and the way you store data in a database will probably be different depending on your setup and your infrastructure. So the server I'll be using is just a simple one for example purposes. Finally there are there is going to be two tools that I'll be using here. The first one is the GAO playground. And the second one is the am playground. And that's really all you need to actually reproduce everything that I'll be doing here today. The reason why I use both playgrounds is because the AMP playground has a lot more features. But unfortunately, the playground can't actually send the email to your Gmail inbox. So most of the time, I will be copy pasting code between the two or specifically building my email in the playground. And then I'll be copying the code and using the Gmail playground to actually just email up. I'm probably wondering at this point, why doesn't the playground send emails through Gmail? Well, we just haven't gotten to it. So the in the future, hopefully the am playground will be able to do everything Gmail wonders, but unfortunately, that's not the case right now. So we'll have to be using booked. Okay, that's all I had when it comes to slides. So before I continue, does anyone have any questions? Is everything clear? Can you still hear me okay?

Okay. So, now, I will go to my inbox. Okay. So the first thing I will do is actually make sure the demo playground works. And, if you want, you can form this and do this yourself at the same time and just do the same things I do. And for basically, I will, I can copy paste the code that I'll be using. And then you can use the same code and try to reproduce everything that I'll be doing in this workshop. So the first thing I'll do is go to the GAO Paragons which is@gmail.gov. And historically, to this very simple editor, where on the left, I have some code, and on the right, I have a preview of how this will look quick. Now I can add something here, and it should update in real time on the right side. Finally, when I'm happy with what I have, I will press the send button, which will send this email to my Gmail inbox since the email has been sent, and here it is. And we can see this is rendering as amp because there is a lightning bolt in the top right corner. In case this is not the case, this doesn't display the code for you, you need to enable developer tools, you can do that using Gmail settings. By clicking on the gear at the top right then going to Settings, then you should find that dynamic email setting which has a checkbox first actually enable them Kima, which is which allows you to see MPLS in the first place. But then we also need to go to developer settings. And we want to check this box, which is always allow dynamic emails from amp at gmail dot depth, which is the amp, which is the AMP demo programme. We click on Save. And we can go back to the inbox and refresh the page. Now once again, I've already done this, so this wasn't really needed in my case, but in your case, in order to do testing and use the GMO printed out, you need to actually enable it in the settings. And once again, if this works correctly, you will see the memo that we just saw in the GMO playground. Okay, so is anyone actually following this? Or does that is anyone having trouble with this or Hurry, folks?

Okay, perfect. Now we're gonna go to the second playground is playground.com. Now this is pretty much the same thing. Like I said, the idea behind the two paragraphs is quite the same. You write em code on the left and you have a preview on the right. The only difference is that this playground has a lot more features. It has autocomplete. It has a lot of examples, but it cannot actually send the email to Gmail, which is unfortunate. So the first thing we do here is change the format in the top left corner to actually use AMP for email. The default format is AMP for websites, which is somewhat different, and has some more components and also has some different routes. So once we've done this, the example should change. And we should see, again, some m code on the left and an example on the right. Now the first thing I would like to try out here is just go through a few examples. And to see the examples, there isn't there is a button on top, it says untitled right now, if you click on it, you will see the list of examples that are available. And there is an example for each component. It's available in email. And there are also a few more complex examples at the bottom. So for example, I would like to try the AMP car so and this blue coat or the M cars example to the left, and I can see the preview with several different cars. On the right. All of these are explained. So you can see the difference. The differences here, for example, the first one. The first one uses slides, which means that you can see multiple images, sorry, the first one is called carousel, or the cursor type, which means you're seeing multiple images at the same time. But the second one is on the slides type as explained here, which means you only see one image at a time. Now again, this is not something that's the focus of this workshop, but I just want want you to be comfortable with the am playground and to try to make sure everything works. And just so you know that there are these really, really nice examples that you can check out. That once again, if we want to see this in detail, we can just copy the whole email, go back to the demo playground and paste in there. And then we can maybe change the subject and some intervals. No, we have the same thing that we had in the playground now in our inbox. So it's quite cool. This one, for example, automatically master slides, but the user can still go back if they want to. Okay, so now let's go check out another example that will be important in a bit, which is m quest. So this is one of the dynamic components that allows you to fetch data from a server, and then display it inside the email. Next, is unifying the template, which is how to render the data coming from a server and you define an endpoint, which is something on your server that returns some JSON data. In this case, the example it looks like this. So what we can see here is that we have this example that returns a list of items, which are actually m components. And what we have here is a template that says, actually, I will delete everything else to simplify this.

We have an AMP list, and it has a source file, which is the URL they have just shown, that has this amp components. If on your server, this can be something dynamic. For this particular example, this is always the same list of components no matter how many times we refresh it, which is very useful, for example purposes. And we have a template which explains to me how we want these, how we want this Jason to be rendered. Specifically, this is a moustache template, you can I can leave some resources to read about moustache templates, if you aren't familiar with them after this presentation. But what you need to know is that you use double curly brackets to give a field name. And then using this field name. This field name will be replaced by the AMP moustache engine with whatever was in the Jason. So in this case, we were creating you were creating a hyperlink that uses the URL field and the title field from the unblessed which are these two. And as you can see, we're actually returning an array. So by default, employees expects a list of items. And this is not necessary, you can have just one item. But what you need to know is that by default, it will display all the items in an array. So in this case, it will just it will use this same template for all four of them. And for each item is we'll put the URL here and the title here, creating this dynamic content. And once again, we can copy this to the dino playground. See how it looks. Whoops. So this is a, this is the reason why I should rehearse these presentations more. What happened here is that the euros are relative. And, of course you can't have relative. As you can see, you can have relative URLs in Gmail, meaning that these links are actually not not clickable anymore. But if I if our endpoints actually returned full links, this would be this would work the same as it does in the playground, where we can actually click the links. But the main principle is the same. Once we open the email, we will wait for a brief second until the Gmail actually fetches data from our server, and then displays it using the template that we gave it that uses moustache templates. Okay, so this was just a very brief explanation of how employees works, and how to use the two playgrounds. Does anyone have any questions or anything unclear here or anything I can explain further before we actually start building our email.

Okay, awesome. Feel free to stop me and ask questions at any time, I'm trying to look in the chat at the same time as I do this. I know that I go through some things faster than normal. So don't interrupt me. And I'm happy to explain anything that I'm unclear. So what I have here now is four different stages of building an email. And we're gonna start with stage one. Let me first reset everything. I'm just hoping and bringing up grounds. So in the first stage, we just have normal static email. I have added some CSS here. Mostly it comes from pure CSS, which is a CSS framework by Apple, it's very minimal. I think there's only a kilobyte of some default styles here. So we saw that the mail wouldn't look really ugly, but only slightly ugly. And I'll be focusing on the actual HTML, which is here. Right now, I have a section which has a header, which is saying your notes and my actual notes. As you can see, this is completely static. But what we'll be doing first is replacing this with data coming from a server. Oh, there's a question. Will Gmail make this allow dynamic email from this sender and default? I'm not sure what exactly they mean. But let's go to Settings. This enable dynamic email is default for all Gmail users and G Suite users, the developers setting is something that users would need to enable themselves for testing purposes. If you are registered, you do not actually need to do this. So registered senders would have their amp emails rendered without the user having to do anything. So this is only needed for testing purposes. Does that answer the question? Okay. So going back here, static email, there's absolutely nothing dynamic. Here. We just have a header and a main. Multiple centres for multiple centres for testing purposes know, the main reason why this decision was made is to prevent abuse. What we were worried about, and what we saw in the pilot programme, where they believe this was possible is that Sanders would tell users to enable the developer setting. The developer setting is dangerous in this sense, because then anyone could tell you, oh, just it just whitelist us in settings and enable developer settings. And this is not really a good idea. This pretty much circumvents the whole writing process. We hope to make the whitelisting process a bit easier and faster in the future. But right now, I believe the turnaround time is only a couple of days. So I hope this is no longer issue. But yeah, what you can what you can have actually is, as of recently, you can, you can whitelist the playground which is this first option and then you can have another email Since year

one, so technically you have to get the answers the question. Right, we have a schema, I will paste it in Keno.

Let's make sure that everything works. And yeah, this is a static email. So obviously, there's nothing too complicated here. But the first thing we'll do, as I said, is replace this with data that's coming from a server. So what we want to do here is replace this main field with an empty list. And the way I will do that is, first of all, there are a few. So there are a few things we need to do here. First, we need a server as I said, but they're already built the server. And the server is very simple. It's an endpoint email to a box on Twitch, where I have this server URL, get notes, which gives me the current notes for a certain user. And the user is specified using this URL parameter. Now, in a real email, you will probably want to use some kind of token or something that's not easy to actually decipher for a user. For example, you may want to have something like a long token. That means once again, this depends on how, how to start users in your database. And you actually need to hard code this into the email when you send it. So for example, we have this endpoint, which for a given user returns their notes in in the JSON format, which we will use in our list. And the way I will do this is start typing list as an HTML element. And for the search field, I will use this URL that I just use. Now, as I mentioned, by default and placed, this is a list of items, so it wants an array. However, what I've built in my server actually doesn't return the array because we only have one note. So the next thing we need to say is we have a single item, which we use the single item attributes to specify. And the final thing we need is a height. Everything in me needs to have a fixed height, or known height in advance. And in this case, we will just say height is 200. And this gives us a very amplest. Now, as you can see in the spinner, it's actually trying to fetch data from a server. Unfortunately, we didn't give it any template, so it doesn't know what to do once the data cut was data rights from the server. And to give you an idea of what we want here, we use the template tag type to be a moustache. Once again, what we want to do is use curly brackets to tell it how to how to display fields or how to turn the JSON into actual HTML here. And if we take a look at my JSON here, we use the notes field to actually store the note. So what I will do is open two curly brackets and paper notes. And as you can see here, we are actually getting this from the server now. And the only thing that we miss is the main tag, just make sure that we have the same thing we had before. And we can be guild message long. Because our message is now fully coming from the server they never

know I can copy this to do myself. As you can see, initially there's nothing here. And once the once the multimeter fetches data from the server It is my template to actually display the message inside Gmail.

Okay, any questions about this? Okay, that's practice to speed up a lot of times, I'm

not, you can't really do much. Of course, there's this depends on your server. There is a good practice that I was planning to skip. But I might as well explain here, what you can do is you can add up placeholder that display for your user before they interrupt. Get back on good safe place holder does is basically this is the content that's displayed inside an email. While Gmail is fetching data. As soon as that is fact, this is completely removed and replaced with whether your template was.

So this is certainly better than before, at least the user doesn't have whitespace, waiting for the thing to vote. Now, ideally, you'd like to like your placeholders to be as close or an approximate as you can see the actual content. What this means is, for example, if you have an image in the final year template, you may want to have an image placeholder as well. Or if you have something that you know is probably going to be the same no matter what you should have that in the placeholder, then the actual flesh of content that the user sees would be minimal. For example, if we have something in Botox,

he will probably want to have that both in the template and in the actual waste. So now we have the, we have the same facts in the placeholder as we have in the template, which means that only one part of it will actually be updated. And the less the cost is your placeholder is the final result, the last of a flash of content there will be for the user.

Okay. So moving on, the next step is so we have data coming from a server. Now, the problem is this is not very useful, because we can't actually update the data. In theory, you could, you could have a website where the user can submit data, and then this would be updating the email itself. But what we can also do here is actually allow the user to update it from the email itself. And that's what we will do here next. To do this, we will add a form. So let's first separator here and starting to form back. Similar to how I have the get notes and points to my server, I have also built one that set notes, which is pretty much the same, you specify user. And once you submit a form to this endpoint, it will update the notes for that user so that get notes will return the new notes. So when they perform, we have a few fields that we need to specify. This is very similar to HTML forms. With a few very small differences. The method is actually exactly the same as with normal HTML forms. What's different is normally they would set the action in an HTML form. In amp, we're setting the actual x HR, which means that this form is submitted using an X HR request as opposed to actual form submission. And we will put the URL this URL for my server here, which is the same except instead of guts, I will be using supplements. And moving going to be using the same user ID I used above.

And I believe this is all we need for our simple form. Now, we will be able to specify, and we need a submit button. And once the submit button is pressed, then we're submitting this form to a server, and the server will persist this in the database. So let's try this out now. the submit button. And hopefully this has been submitted to the server, we haven't actually had an indication of it. And the message hasn't been updated because well, it's only updates when the mail loads. So we'll be fixing that in a bit. But let me first refresh and see if this works. And yes, here it is. So the message that we previously submitted is not persisted on the server and when we next to the email list will actually fetch the data that we submitted in our fork. Okay, so there are a few things here that should probably fix because this is not good UI UX. We don't really know the form submission succeeded on that we need to refresh the whole thing. But before we get to that, does anyone have any questions?

Okay, I'm assuming that's a no. So um, think we would like to do first is have some indication that the form has been submitted successfully. And if we are similar to how we had this placeholder, we'll be adding this Another question we have here which is submitted. Success is similar to how placeholder is only displayed inside an empty list while the empty list is loading. If you have a div with submit success, this div is only displayed if the form has been submitted successfully.

And we will also add another big error as you may guess, is only display if the form had some sort of error when submitted.

As you can see, both of these cases you can't actually see either these days because we haven't done anything to the form yet. Once be submitted, that submit success there has been displayed letting us know that the submission was successful success. Once again, we don't really see it here because we will need to wait for the email to be refreshed. And once we do that, it's perfect is here. And let's also try this out just to make sure that everything works.

Okay, so the thing I lost is here in the list, and I will try to submit something else.

It says it's updated. Now I'm hungry to refresh easily here. So go back to my inbox and reopen the email. And the message I submitted is here coming from the server again. It is really annoying that we have to go back and then go open the URL again. So what I would like to do is refresh the list in just the unplaced, not the whole, you know, when this form is submitted. Now, there are a few different ways to do this, but the easiest way would be to use the AMP events in action system. If you've coded in JavaScript before, this is quite similar, where you can write some actions that would happen when a certain event happens. For example, we can add a refresh button. So first, we will give our list a name or an ID And now we'll add a refresh button here. Now, we will specify what happens when this button is pressed by using the on attribute. So on top we want to use Next, we want notes list, which is the name we gave it. Refresh. And now when you press the button, the list should refresh itself. So let's see if this works. Yes. So now we have a refresh button that will refresh this list after we press the submit button. And once again, let's try this in general, make sure everything works.

Refresh. So yeah, refresh button works fine. But this is still quite annoying, you have to press two buttons. And there's no real good reason to do that. When it comes to just update when the submit button. And the answer to that is we could, but if we actually, we could just move this on cause to be inside of this button. And we don't really need a refresh button

enforces some accessibility rules, meaning that something that has on tap events has to actually have the role as such a button and tabindex. So you could say to use that to actually navigate it. But actually, that's not the main problem here. The main problem here is if we refresh the list, immediately, when we press the submit button, we will refresh the list before we actually submit things to a server. So this doesn't actually work. What we would like to do is refresh the list when we know that data has already reached the server. And what we can do is instead of the tap event, what we could use on success. Refresh. Okay, so if I did this, right, we no longer need to manual refresh.

So now we're in as soon as the data reaches the server, the AMP list would also be updated. Try this email, I can respond to any questions. And the employees has been updated. So whatever we do, it's persistent on the server, but it's also getting the email immediately. In one go back to the email, we have the same notes that we had before. Okay, um, let's again, let's make a small break here and see if there are any questions or anything else I can qualify.

For someone who knows how to code, he knows the traditional way. Are there any further readings you recommend to run? And this is a tricky question. Because it depends on what kind of skill set you already have. So let me answer this in two parts. The first part is that this website has a lot of resources that will hopefully be useful if you go to college, I believe documentation gets started. And then there's an email. And there are a few articles here that are very useful. For example, this one explains actions and events. I have used the event here, which I believe is explained on this page in more detail. Yes. So the emulator documentation is the main one that's maintained by the team. If you believe there's something missing, and this is especially important, because the normally the audience, for me has been web developers and not even developers. So to be perfectly honest, we don't really know what kind of documentation is missing? Or how can we make this easier. So if you feel there's any gap, or something that's not clear, or something that's actually you already know, and or explained, please reach out to me, either using Twitter or you can go to GitHub and find the issue tracker. In general, the AMP team is very open to feedback. And they are we're basically trying to get feedback to actually understand what kind of documentation is needed. Because so far, a lot of these articles have been copied from the web documentation. And we are aware that's not good because the documentation was originally written for web developers in mind, which is quite a different audience than email developers. But, on the other hand, it's better than not having any documentation at all. So long story short, we need your feedback to actually improve.

Yes, so regarding modern html5 and CSS, yes, it supports a lot of things. Most importantly, try to make this consistent across email clients. You can see the supported CSS here in the specification. So there is a full list of CSS properties that are supported. If there's anything missing, you can file an issue on GitHub, there are some things that we can do. So in the past, we have added a few that were missing that we just didn't know, we missed, or that the security teams and Gmail and other email clients have deemed to actually be okay to enable. We're being slightly conservative here. Because if we enable too much, and then we find some issues there, it would be really hard to remove them. But in general, we are in for this as well. We would like your feedback to see what's needed and what we might have missed. Of course, assuming that there are no security or privacy issues with even that specific CSS features. Will Google Fonts be supporting the future? I can't answer that question easily. The problem with supporting fonts in general is we need a mechanism to proxy them. So we don't really have a mechanism to proxy anything other than simple JSON and images in Gmail to the best of my knowledge. Supporting Google Fonts would maybe be easier for Gmail than anything else. But as Christopher said, how would Outlook or your Yahoo or any other crime do this is an open question. And honestly, I don't think it's a good idea if you force a single CDN upon everyone. On the other hand, finding a CDN that everyone will be happy with is also difficult problems. So long story short, fonts are something we need to think about really hard, rather than being a technical issue. This has been brought up many many times in working group and I gave you is a very, very short and hopefully accurate summary of how the different Americans feel about this issue. So long story short, no custom fonts for now, if we find a good way to support this, maybe it will probably be limited to a certain subset of fonts or something like that at first, but it's on my mind, it's on our mind, and it's a difficult problem fortunately. I hope this I hope this is a good enough answer. Okay. So where are we We have a form and we have a list. And this is actually updating automatically now. So we are almost done with this simple demo in their head. Now, the final thing that I actually wanted to add here is, I would like to hide this form initially, you may not want to actually update your notes, maybe you just want to open the email and read them. And maybe you want to, you only want to edit them in some cases. So what, what I would like to do is hide this form initially, and then dynamically show the form only if the user wants to see it. And the first thing I will do is actually hide the form. So I will add a hidden attribute. And the form is not hidden by default, which is good, but we probably need to also have a mechanism to short. So we will use amp bind to do that. And if you have used something like Vue JS or react in the past, then amp bind will look very familiar. The idea is that your email has a state which is you can think of it as an object or a list of properties that it keeps in the background. And depending on the current value and the current status of these properties, the email, the different things can be hidden or different things can be displayed. And this is the summary of the summary. How am I buying works. So you can think of it as a server that lives inside an email instance.

And this is a subject for itself, so probably won't be able to explain it correctly with just this one workshop. But I would like to go to a few examples that I think exists here. In fact, the first one is probably the main thing that we can use here.

So we have a div have a div that's initially hidden using the hidden attribute.

And then we have the hidden attribute. But in these square brackets, and square brackets indicate this with an app, this is how we want you to decide if this is hidden or not by using the value here. And the value hide greeting is one that lives inside of the state.

Now, initially, this is set to true believe this might better be an hour, but it's the work so it doesn't matter.

So initially, this has no value, but we can use set state to set this value to be false. And we actually want to be false and not true, because we're saying it's hidden if it's true. So we want it to be shown. So we want it to be false. This can be a bear Twister in your head to actually figure out because you need the opposite of hidden. But in general, the The only thing you need to do is switch this to false and then amperes Okay, now I need to reevaluate if this still needs to be hidden. This depends on the value of hi greeting. And I will show you press the button, this is exactly what happens. So you can use you can use combined to change things on the page dynamically without using the server,

which is super useful for small things like hiding things, or for example, changing the colour of things.

Another thing we could do with the state is actually change the text of this div. So instead of hiding it in square brackets, and we will use is not a real attribute in HTML. But this indicates what's actually inside that div. So again, we're using square brackets. This is not the real value. I'm just telling you how to calculate what this value is. And I will use set state to actually set frequent text to

something else. So once again, state is a function that's built inside the map where you can change these variables that exist inside the state to something else. And here I'm saying I want to change this variable greeting text to be goodbye world. And here I said I want the text of this div to depend on the value of greeting text. And when I press this button, The text changes to whatever is specified there. Another thing we could do is change the class, which allows us to do all sorts of things like change the colour or whatever else for any object in the page. So instead of changing the text, we will first give the initial class of ground. Again, we're using square brackets to tell them how to how the class will change. based on the value of, let's see, class, we might want to change the class. And when the button is pressed, we'll change the class to be con wreck. And once again, we have two parts. So once we press this button, we will change the state to for the greeting class to be background red. In here, we don't amp, I want the cost of this element to depend on whatever greeting class is set to. Once again, if you press the button, we'll be changing the class and this changes the core. Okay, thank you. Now we're actually almost done. So I'm just going to add, I'm just going to incorporate what we have and bind to our existing email. So I hope this is clear about sort of how this works and bind in how it can change elements on the page without actually using a server. Any questions before we actually incorporate into our email? Is that yes, for it's clear, or Yes, I have a question. Okay. So, where were we so we we have we made our form hidden,

what we would like to do here is to remain hidden, for as long as we are not. So we have this variable that we came up with critical not editing.

And we will change this. And when this button is pressed, we will say not everything is not.

Okay, so when this button is pressed, we're changing the state, we're specifically changing this variable not editing before. And this will affect whether the form is hidden or not, because we told them, the value of hidden depends on this variable. And when we press this button, nothing happens. Because I forgot one really important thing. Each m component is to be used so far, needs to be defined at the top. So we can use some form. To submit the form, we can use employees to fetch data from the server, and we can use amp moustache as part two, I'm going to actually display data coming from a server. Now, what we forgot to do is add a bond. And the reason why I didn't have to use before is because this playground will actually automatically add components as you type, which is another reason why I prefer to use it for especially for demonstrating this. For example, if we use the L cursor, the playground will automatically add this component to the top. The reason why it doesn't actually add an bound is because m bind is kind of a special component. That's part of everything but it doesn't really have its own name. And I will just copy this from the previous example here. And they actually don't. So I will take the online component. So now we have unbind them format moustache, and twist. And now pressing the button actually works. So no, I believe this is Reducing the delivery now have everything in place for this email. And I will once again for probably the final time copy to the demo playground and send it myself. So we have these notes coming from the server, we click on edit the notes, this opens up a forum. I add some new notes, press the submit button. And it's been submitted to the server and the email itself has also been updated. If I go back to this email, again, the notes are still there. And because we're actually using the same server and point, if I go back to previous draft of this email, it will have seen notes as well, which is quite a nifty feature, in my opinion, because the previous emails now reflect the same thing that we have submitted to the server after that. If we would like to have some separate nodes, because of the way I created this endpoint, I could just replace this user ID with something else and replace a go to kitchens.

And now if I send this email, this user has independent notes. So I made this one. The notes are a bit inside of it, but they're not updated inside with the previous one.

So the user again, because of the way I created my server, the user ID that I have in my email determines which user the server is displaying notes and saving those for what would happen if the server is unavailable? Well, that's a good question. Let's try that can really make the server unavailable easily, but what I could do is make it invalid. So basically, the placeholder will stay here forever. This. So if you think about this, this means that your placeholder is really important. And if you're if your server might not work, then the placeholder is what the user will see instead, what you can also add, in this case, if the server is broken, is a fallback is a special live single display if things fail. So

as you can see, if we have a fallback, the placeholder will disappear. So the placeholder will only be visible either while the data is loading from the server, or it will be visible forever if you have no fallback. If you have a fallback, then placeholder disappears, and we're replacing this with the fallback. And the fallback could be something like basically, the fallback is something you would like your user to see even if your server doesn't work. Now, if you have no good fallback, maybe the placeholder is good as well. Again, this will depend on the specific type of human that you're building. Can you manipulate multiple states at once? So for example, question text when clicked on the button, yes, you can have any number of variable inside the state. Or you can bind multiple things to the same thing. So going back to invite first we can have two gifts, they're both bound to the same variable. And in this case, because they're both depending on greeting class, when we press the button, both of them are affected. In fact, you can have a third big, that's just displaying this class. So instead of class, we're binding to text.

So these two are actually using it for the cost, but this one is displaying this class name inside tax for some reason. If we want to have multiple variables, we could do it here.

So I separated, separated with a comma and now I'm setting both greeting cards and greeting text. And this other viewer will use greeting text. So when I press show greeting and changing the classes, and I'm also changing the text on this panel,

I want to make the data load as subtle as possible. Could I only make a part of my email dynamic? By default? Yes, with a small carrier that I'm not sure what below the fold is in an email? I mean, it will depend on the email clients. So it's slightly harder to determine them comes to websites. But yes, in fact, in the demo that was built, the only part that's dynamic is this important and how work, this part is static. And the form itself is also actually static. So it's only this small thing that's a window into our server. So any anything that's you can actually have multiple employees on a page. But the Yeah, just for the question, yes, you can definitely have only parts of the mobile. In fact, this is highly recommended. by both the empty and very simple coins, it's not really a good idea to have the whole email dynamic, precisely for the reason that you've just seen, your server might not work or something might break or who knows what might happen. So it's a good idea to only keep small bits that will enhance the user experience they lack.

Any other questions? What's the best way to interact with the Emperor email team?

Oh, this depends on which team specifically would like to interact with. So let's start with explaining the working group. The working group has members from the empty but also members from Gmail, Outlook mail.ru, and Yahoo. The easiest way to interact with the working group is either using Slack, and there's a link to sign up here, which will basically become your own. So there is a succinct sign up here. If you type in your email, you'll get an invite to the app slack. There you can find the working group and for email channel where you can basically suggest to the working group or ask questions or anything of the sort. One thing I need to emphasise is, this is not a good place to actually ask questions about the people attending the chat. We'll try to help if possible. But I just asked him not to ask technical questions in that chat, unless it's a feature request or a bug you notice. Because this adds a lot of chatter and makes it makes it harder for the teams to see different issues. If you would like to actually ask questions about Angular how to use them. I believe the best place is Stack Overflow. There are two tags. One is HTML. If you use this tech, you're asking questions about time and there is one app email. This is for questions related to an email specifically, you can actually tag vote, as you can see in this example, for example. The reason I'm saying this is because I know that folks on AMS regularly check these tags and we'll answer your questions. So in my opinion, the best place to ask technical questions would be stockwork.

members from the email industry and that committee, email concept folks but durability ESP zero experience collapsing. So actually, this we have the we we actually have added our member who is not part of an email client or or the anthem here recently is Matthew Robbins. I believe so I believe this list is not dated. So microphones. So we do have representation from someone who's probably no committee and slightly more current, we're still trying to figure out how to determine the criteria and who wouldn't be part of this working group. I don't really have information off the top of my head. So you can reach out to the working group, if you have someone you'd like to propose to be a member? Again, we haven't, we haven't really done this before. So I'm not sure what the criteria would be. But yes, we're looking for more representation, as long as we figure out what would be a fair way to have representation in the group. If you don't really need to be a member of a working group to participate, you can post issues in the GitHub or you can reach out to the working group on slack. So ideally, this should not be this should not be an important title to move this from performance forward, if that makes sense.

Okay, to be involved from a space perspective, that is something that comes up a lot in the working group. So I think about it. Please join the slack. And let us know in the working group, channel, and then we can see what we can do about this. I don't, I'm reluctant to provide information about this on the spot, because I'm not really sure what the process might be. And I'm not really the person who likes people to the group.

Okay, any other questions? How does the spam filters can content is loaded after the email is opened? This? This is a tough question. But I do have a very, very short overview. What you might have noticed in all the examples they have built is that Gmail is much slower than the playground. And this is on purpose, or sorry, on purpose, but it's a side effect of the spam filter. So if we open an email, you will see that takes like a second to actually load things. This is because Gmail is first of all proxying the data, but also Gmail is parsing the dynamic data on the server before the before it actually gets displayed inside email. I don't really know the details about how this works, but it exists and it's probably similar to the way ngl prices normally. So long story short, Gmail is aware of the dynamic content for purposes of any sort of abuse. And I believe that other you know, clients are doing similar things, but I don't actually work for any other accounts, so I can't really comment on that.

directly, welcome. Okay, so there are no more questions. Then I will add the start and the link they forgot to add here. If you would like to see the server source code, I believe I have that somewhere open

Here's the link to the source code of the server I've been using. Feel free to use yourself if you've used glitch before, there's a very easy option called remix, which allows you to copy this project and then modify the source code as you wish. What other resources server the pasta StackOverflow link and the working group link the two playgrounds that you also probably have access to feel free to reach out to me on Twitter or I'm also active on slack sometimes so if you have any other questions or follow ups, you know, I finally and I hope this was useful for everyone. Okay, I will stay for two more minutes if you have any other questions.

Thank you. I'm glad to hear that. I will also try to follow up somewhere in this email so that you can play around with it for sure probably don't invest by hand so I will do that after. Okay, thank you everyone for participating and hope to hear from you. Bye