 So I can't tell who's out there. We're good. We're going We'll take that as a yes If you can drop in the chat sometimes things like yeah, it's good So my name is Ben Morse my job is to be a developer advocate at Google where we work to make the web Faster and more beautiful easier for developers to use easier for users to use That's the idea and it was before a full-time musician You can see actually in the backdrop over here There's a little guitar to the keyboard down there. This is my This small attic music studio. That's now where I live all the time because this is what we do these days Sorry, I can't see you all in person in Austin, Texas Hopefully you're all relaxing in your homes comfortably and enjoying the sessions so far So this is a workshop version of the beginning web Development with amp course. We made three of these courses showing how to make sites using amp and I actually can do the first course We're taking out all the stuff about what amp is and the web and the philosophy behind amp And you can do this course in about an hour and a half a bit of the next course as well So this is our goal today is to talk about amp for a little bit about the web for a little bit And then to go ahead and get our hands dirty Making our first ever amp sites. I assume this is your first ever amp sites My people use amp before Do you know what amp is? Have you ever made a site with that before you can drop some comments in the chat assuming you're out there somewhere Though I can gauge your skill level we can go from there If you're feeling shy, I will just go on here with the presentation and we'll get into the workshop and we'll take it from there So it's really about the web. I mean the web is a wonderful place full of fantastic things But the idea behind the amp is to make it easier when you haven't got a great connection Which happens a fair amount of the time if you're in like a really really nice area with nice Wi-Fi You own a really nice phone. It may not be a problem Websites may all load quickly for you with some exceptions But for a lot of people a lot of the time it's not the case if you're in a more Developing country where connections are a little slower Then this often is a problem In fact the last that I saw said that actually 40% of all connections made by mobile phones worldwide are 2g So if you have a little site over 2g, it's pretty slow Even if you're in like an area with nice Wi-Fi Then you will often find yourself getting slow connections if you're traveling somewhere in a more rural area Made down grade from 4g to 3g or something else like that And also a lot of phones are not that high powered out there You've got the latest iPhone or a galaxy or pixel or whatever That's all wonderful But a lot of phones being sold these days are cheaper and pretty underpowered and these phones take a while to load up JavaScript to parse it execute things and you're very nice site with this large JS bundle May just be really janky and not reactive on someone else's phone So you get problems like this things load slowly if you have too much code too much stuff on your site You make it pages that are unresponsive because trying to scroll around The JavaScript is executing at the same time or the event listeners for a button haven't actually loaded up yet and Also a problem with the web on phones that amp tries to make better is that you'll be looking at a site You know sitting there looking at some text suddenly it jumps around Because an ad has popped in and it's playing video and what you're reading has moved down on the screen or even more Commonly an image drops in Embed of some sort drops in and things shift around on the screen making the content move around and also making the browser forced to Repaint the layout of the screen and again and again and it can be really hard to use certain sites this way I found especially these days at them home a lot I make a lot more food than I used to and recipe sites are really guilty of this lots of ads and videos And some are almost unusable This is the kind of problem amp was designed to fix amp makes it so that pages don't have these problems basically How does it do that amp is simply? Mostly what's a few different things, but really it's mostly about web components So web components that you use these before are a way of adding new functionality that gets used to HTML You have JavaScript that runs these new things HTML was pretty old has been around for a long time. It was designed to describe documents It wasn't designed to do like live functionality of websites. It was there to say, you know, this is a bold face bit of text This is a paragraph. This should be read. It wasn't there to say. This is an interactive menu This is the Twitter embed. This is the mortgage calculator Those things are not part of HTML and there's still not part of HTML even today People add JavaScript to do all these things which is fine It works great, but if you had a lot of JavaScript makes things slow So the goal web components just make these things simpler By providing you these widgets that do the functionality for you that you had to write yourself before Amp does this by adding new tags HTML Powered by its own JavaScript Conversely amp restricts the way JavaScript is written to certain kinds of places So you can't have too much of it and so your page is more guaranteed to be quick Actually, I'm giving a talk tomorrow on how do I JavaScript and amp? Please drop by it's called worker eyes JS made easy drop by and see it Anyway, so if your page follows the rules amp sets out for speed and accessibility Then there are web crawlers out there web spiders like Google's and Microsoft's that will find pages that are what we call Valet amp and stick those into an amp cache like Google's amp cache And this means that when you find these pages from search like Google search They get served from Google's servers very quickly I can even show you this because we have this ability to do this Have you seen this before? If you have then let me know in the chat here We're gonna simulate a mobile device over here and go to Google comm But you have probably gone through before at some point. I look for something kind of newsy. What was this? Let's give you newsy a class action suit against Google All right. This is a great topic. Let's see if we can find class action Google here and find news results. Look at this This is a good results because it's not about current politics or about viruses. It's about Google So notice on this carousel here of stories all of these little guys here have a little lightning bolts Can you see that in the right hand corner and those mean these are all amp pages See these things over here. You scroll down the page. There are more results like this So amp launch first for news publishers It was way for publishers to get their content in front of users more quickly and more easily This is a great example, that's example of use of all time. Oh my god, look at that. I've got a pixel tune. It's pretty good But well anyway, so all these things here are Amp articles now this is gonna change in the near future. You may have seen the Google search announced that This was before reserved for amp pages at some point really next year Once things have calmed down in the world could go lunch a thing that allows Non-amp pages that are as fast and have stable layout like app does the same chance to get in this top stories carousel Hasn't happened yet because things are a little crazy up there right now If you click on a result over here, it should live those very quickly That's pretty quick. Of course, we're on Wi-Fi here So it's not so bad, but notice I can also drag from article to article over here These things load pretty fast That's because they're amp pages and they load quickly and also because in some cases Google search has preloaded these pages in an iFrame So they appear immediately. They're an invisible iFrame. They appear right away Microsoft Bing does the same kind of thing and that's kind of some reasons to use amp. It's mostly about speed and Having a stable layout. It also can be convenient because as a developer you're using these webgoon. It's already exists You're not spending all your time finding third-party libraries to do image sliders or other kinds of things It's all there with amp So we said these things already. I didn't sell these things this amp validator and also the Google cache for example will optimize your pages in various ways. It will compress images does various things make the pages load more quickly Yeah, because we mentioned this before just said this we have this also does things make things faster I'd source that sometimes which is nice. So how does amp actually look in person? Here's amp looks in person. This is an example of amp in use So this is a YouTube component it will surprise surprise surprise embed YouTube video and notice that the way you customize its behavior is by using HTML not by using JavaScript so Layout equals responsive on top there. That is not a standard HTML attribute But a amp has its own layout system which we'll try out in a few minutes that allows you to specify How things work when the page changes size the container changes size if you say layout equals responsive It will automatically write for you with no extra work on your part It will shrink and grow the can the actual component as his container shrinks and grows. So that's kind of nice With and height are there. These are our standard HTML attributes These are there because remember the amp wants to have everything have its sides declared in advance That way things don't pop around when they load up They have a space reserved for them on the screen they pop into their spot and there you are so they want you to specify width and height in most cases and then finally the part that's accepting over here data dash video ID This is the ID of the YouTube video as you might see somewhere in URL Plug that in there and then amp will pop in a YouTube video. That's what amp looks Any questions about all this so far my very very brief intro to amp There's more to it. There's a web stories thing based on amp. There's amp in email. There's amp for ads There's a lot to it, but this is the the basics the basics. Okay, let us go on So you can make sites various different kinds of ways if you have this conference today You might be into doing all yourself writing your own JavaScript your own CSS or an HTML of everything That's totally fine as you're using a CMS It's kind of the opposite approach if you're using like WordPress for example or even more so something like Wix You don't program anything you might use plugins or drag-and-drop interfaces to move things around Amp is somewhere in between all of those things Amp you do your own CSS you're an HTML, but much less JavaScript again We love JavaScript in the amp world and written in JavaScript But your burden of JavaScript is much lower Jory YouTube thing is a module basically. It's like a module. Yeah, it's a web component. It's kind of the same idea It's just run by JavaScript and it works cross browsers by the way. It's all using current web standards So for this course over here today, we'll be using HTML Not much CSS and probably for today. No JavaScript. Go figure So let's get started. Let's get our hands dirty over here We're gonna use glitch for this. You don't have to use glitch, but it's pretty convenient because You can do online coding you can also use your own web server on your own computer and your own IDE your own editor But with glitch you can do it all in a web interface and also you can share your results of people here So as you complete the exercises you can pop the URL into the chat I can show it over here We can all look at your work and admire your handiwork. If you have problems you need to help debugging We can also have you pop your URL into the chat and we can help you debug as well So to start out over here go to this link over here glitch.com Slash tilde showy hyphen way. In fact, if you can copy this into the chat I'm gonna type it in over here. That'll help people get started. So if you can transfer this over Shannon Go there glitch.com slash tilde showy dash way Which is probably now by Shannon's magic appearing in the chat and Here's how it will look kind of like this. I think the guy from glitch was talking today. I think Anil was here and You can see that every project in glitch has a clever cute name with a few different words with hyphens in between them like showy Dash way you will see somewhere on the screen a button that says remix something might say click to remix remix this project It's different for me because I own the project for me. It says Remix this I think for you it's something different if you click that button over there You make your own copy of this project. It's a clever DJ way of saying copy this project and now modify it However, you want to so again go to glitch.com slash tilde showy hyphen way and then remix this and Like magic you'll see a new project popping up over here. Mine appears to be called absorbed magnetic haze There we go If you have problems with this, let me know if you've done this successfully Maybe say something in the chat like it worked Yeah, they've had some issues with The servers last couple of weeks once you've done this step over here. You should be all good to go Remix to edit. Thank you Yeah If it doesn't work then just try it again Thank you very much Israel for doing that So if you get in there if this works for you, you'll see a few things here on your left These are the files you can use and folders you can use for that your project We're gonna be using only one of these files today We're not using the server or the node stuff. If you just go into the public folder over here Open this up. You'll see some more things inside of there. These are all for the more advanced Course except for index.html. Click on that and we'll use this file and just this file for today Are you guys in there? Hopefully at this point You'll see a bunch of HTML a bunch of starter code a bunch of CSS At the bottom a very small amount of actual stuff that actually matters, which is the actual body of the document So using glitch you can type in your code there. You can also very handily Hit show and show the actual result of your code if you go next to the code That's fine in the window a certain advantages, which I'll discuss in a minute I'll choose in a new window. It'll then open a new tab over here where you can see This as it is so far Are we mostly good so far? We're here Assuming that you are all good and you're here Then we will go back over here and I'll show you how to find images in the assets area over here are some static things Which are all images to use the images here in your project You just click on one of these things it pops up into this lightbox experience You see this long long CDM thing over here This is a unique link to this image if you hit copy you can then use that URL in your project So again any image over here zoom in over here like we're clicking on it copy the URL and there you are That's kind of a glitch works Good question the lightning bolts. Let's talk about that. That's a really good question Amp has a few things that it does that he wants you to do for a valid amp page You don't require to valid amp isn't important to you valid amp is only useful if you want to follow amps Kind of guidelines and rules for accessibility and speed and also to be in the app cash Which actually is a pretty big advantage and catch us speed things up so making valid amp have certain advantages and One of the things I want you to do is that lightning bolt there after HTML? This is valid HTML let me bolt or the word amp also works and this just tells amp that this is an app page Some other things you'll notice over here this meta tag Carouset utf-8 amp wants that to have a standard character set more importantly over here this first JavaScript that's loaded asynchronously. This is amps runtime that runs amp itself. That's required for all amp pages and What else is over here some more things a standard of viewport tag over here? I'm gonna skip discussing this link because it's kind of complicated and notice also There's this boilerplate over here amp requires this actually will hide the page until amp loads up So I'm gonna have the page for you and make things look all nice and then notice also all the CSS here in the style amp custom tag For a valid amp it requires that all your CSS be here in line The idea being that a single load from browser of this page is all amp needs to display your entire page So there's no delays that could be caused by another request for your CSS In a bigger project you build this separately and then you copy it in and And that the bottom over here is your HTML Any other questions or comments on these things over here Before we get started one more thing that could be useful for you is the amp validator Let's see if I have skipped some slides over here. Did this we did this this over here This isn't required for the project, but it's kind of useful There is a Chrome extension you can use that detects whether the pages are valid amp or not If you can see up in my screen over here at the top where all the little extensions are I have a lot of them here There's a little lighting bolt that's in gray. This is the out validator lighting bolts It will turn green once on a valid amp page. So to get this I just tend to Google of using Chrome, you know, Chrome amp validator and then There it is Again not required for this, but it's kind of useful I'm gonna cover the link over here into the chat this very very long long link Here it is. So let me show you how this looks in real life Let's go to amp.dev which is our documentation site which my team and I work on This is made with amp. Everything here is amp. It's all valid amp And I can show you by looking in the console over here Actually, we can look in the developer tools. We can look at the elements here Let's make that a little bigger. You see over here html amp You see some things over here like amp user notification A bunch of amp you things in here amp state, which is the state variable. It's an html amp lightbox These are all amp things Notice also, this is responsive and it works on desktop or mobile equally. Well Notice also the lighting bolt over there is green, which means it's valid amp now to show this actually Not using the extension. I can also show it in the console If I instead of just saying amp.dev if I append to the end of my URL a hash development equals one And refresh the page it will then give me debug information in the console This actually is valid amp that turns out. Let's go to a non-valid amp page one of my pages This is a tutorial I made which is not valid amp It's got some errors in it And you can see this little one here and lightning bolts I think zoom will show you this pop up over here too I think You see this error over here This is because I use a relative URL Which throws an error because amp wants you to use absolute URLs because if your page is served from amp cache It may change the domain and relative URL could fail if you want a different domain If I then go to this over here and append development equals one refresh the page You'll see in the console Same error message Anyway, it's a lot of setup over there, but that's all our stuff we have to do Any questions and all those things I'm going to keep on forging along here So we said this before about amp and let's start actually doing something over here So our first component we're going to use is amp image We're going to start very very small amp replaces one or two html tags with its own tags Not for any many for valid amp you're required to use amp image instead of image This way amp can control when your image actually loads and how it loads So two things that are important about this. There's more When is that again? It will reserve space for this on the screen So it doesn't move things around when the image pops in it would just pop into its spot And not have been anything else around Also amp automatically lazy loads So if your image is somewhere down on the screen and the user hasn't scrolled up there yet It won't let up until it's actually time to be seen by the user So these things all come with amp automatically For this and various other reasons amp wants you to use amp image instead of using image So let's try this out for a minute Oh, some more components amp twitter looks like other kinds of things This we saw before And also notice this that some components require you to add during javascript A very small amount of javascript like 8k or 10k During the actual component that is so it does not let it all at once for performance reasons Anyway amp image. So our first goal is to replace the image tag in our project with amp image This is not a big project, but it's a good place to start Notice that if you are over here in your project, you will see An image tag So our goal is to replace this with amp image So You now must do this The idea is to replace it with amp image To give it a width and a height Keep the source as it is If you make it 640 by 480 It will still look nice width of 640 height of 480 If they then close your amp image tag and you're done That is our first exercise If you get confused at any point, which you might then you should look at Documentation site because it's full of documentation So let's say you're forgetting how amp image actually works You can look at the documentation site over here. You can search for amp image And there's a component up there And there's attributes you can use to customize it like the source the source set for example And there's also an example up here of amp image in action. There it is with height source And you close the tag Actually the example here is kind of better. That was a more complicated example of the fallback image. This is a good example So anyway, the first exercise you have is to add or sorry, change your image tag to amp image So I'll let you do that I would do this myself also while you're doing it My own copy of this and then we'll kind of Reconnect in about two minutes and see how we've done If you have questions about this, then please just stick them in the chat But I'll mute for the next two minutes or so Oh before I mute also if you get this and it looks good, then please post your glitch URL in the chat We can all see what you've done When you get it by the way, you'll notice that your page is now a valid amp There was an error before and now lightning bolt should be green Okay Have people got this so far If you've got this, please put your link in the chat over here If you aren't doing this If no one's doing this, let me know we can do some sort of uh Other thing instead of this workshop All right, Shannon's got something there This is the most complex word I've ever seen over here and Oh, sorry, Shannon's actually posting. Okay. It's very complex words over here Shannon emerald sabre Diascia nice This is good. This is valid amp. I see if you're coming in Also valid amp If I go to your source over here I see That looks good Amp image and it's closed All right, let's see one more over here Uh, you've chosen cheese and you've got two images here. You've Gone to a more advanced clearly advanced thing over here Uh, very good. All right. So this is successful Now notice if I go one of these things over here Let's go to mine instead of yours for a moment Actually, let me show you the solution first of all before I Go somewhere and show you something else Because you didn't get it It simply looks like this Amp image and the source height and the width and close it and you're done Here's that on a lovely slide Amp image source width and height And close it and you're done So notice though if you look at this here in a mobile simulator Like I will now It has a bit of a problem the image goes off the side of the screen The image actually is not responsive. We didn't say responsive So it's just whatever an image usually would be and it goes off the side If I go to the responsive mode here in dev tools, I can see Here it is but as the screen gets smaller it does nothing So now as the next step add to your amp image one more attribute Add that equals responsive Is that here somewhere? Yeah, add here this one extra attribute Layout equals responsive And then see if it becomes responsive I'm going to take this out of the Screen you can see and do it myself too Did that work? I will show you mine over here Here it is Look at that. It's responsive To a certain extent On screen is very very small I think our CSS makes it not actually responsive anymore But for any device you could have in the world that exists currently It is responsive And there's just amp adding things in there to make it responsive automatically Any questions so far? Let us come on here To the next stuff There are more ways you can use layout There's a fixed one there's intrinsic there's responsive We just discussed There's a variety of layouts that come with amp You can actually look at this over here. There's a nice graphic Somewhere over here one of these pages Is that the one there? There should be an example somewhere There it is So you can see some things over here Keep the height fixed but the width will go automatically There's a flexbox one Fix where nothing changes Fill where the children fill up ties of the container We just did responsive over there There's various layout kinds here for various different kinds of needs All that's just part of amp So let's go on from there You saw YouTube before Now let's do it ourselves So YouTube is a bit different because it involves I see a question over here I think of the entire screen width the responsive I'm curious to see your example over there and see what's happening If that was what we wanted it to happen or not wanted it to happen It could be that you have the CSS at a certain way The responsive thing might be unable to make things responsive So it's at a certain point Because the CSS will then hit your CSS in some way That's perhaps unpredictable Send me your link though if you can I can take a look at that too Amp YouTube is not much more complicated It's just one extra thing you have to do You're still adding your height, your width, and your layout type But then you add the ID for the video And that's it And also YouTube Amp YouTube is a component that requires its own JavaScript So you've got to also find the script tag that you use So to find that go to amp.dev and look up amp YouTube These things here all follow a certain similar formula But at first they're easy to find here on amp.dev Amp YouTube The script over here is required to make it run Add this somewhere in the head You should be good You see also examples over here in case you get confused About how this is supposed to work So the idea over here Is to add this at the bottom of your site The size will look good on your screen there for 80 by 270 This video ID will look nice But any video you want to use is fine To find a video ID on YouTube Go to YouTube Look up some sort of Talk or video or whatever you want to Oh it's Joe Biden And you'll see over here this v equals something This is the ID of the video So now go ahead and try this But add this YouTube video to your site I will do this too And look at the example that I just got sent here In the chat as well But for now add this video there Yes I'm running a workshop Have some visitors up here If you get this If you add your link to the chat I don't forget the script over here As I just did Ah someone's coming through I was looking at your responsive images over here But let me stop doing that And show some of these examples of people who are succeeding Such as Flaxen Holy Howler Sounds like it's sort of Influenced by Harry Potter Oh this never happened before I was in a workshop This is my first time getting recalled I'm very embarrassed by this experience Actually my son now loves this song And he plays it You're collaborating here He plays it actually for fun Ah thanks for a different one here at least That's interesting what I'm looking to Nice taste in videos people All right So Well done YouTube It's just that over here Again not so complicated If you chose responsive play out Then you'll get it again shrinking And growing with your container there Which is kind of handy Let me show that over here real quick My own project There it is And hopefully it will be responsive Yeah look at that The video is responsive Okay Shall we go on Any more questions I was looking at the responsive images there And I know you put a PX there in the HTML Which I never ever do I don't know if that causes anything weird to happen or not I'm looking at that now on my screen To see if the PX is there or moved Anything changes That may not change because It already is loaded up I've noticed the images there Take up the entire width of the screen I think they might actually do that As part of the responsiveness And we take up their whole container size So even if the image is very small Here I'll show this over here My impression of the responsive images Is that they take up the whole container A lot of it to them So here's your images here Here's the div that they're in Notice it's the entire screen So the images here get resized To fill the entire container I think this is working as planned So actually the width and height don't get kept If you had layout equals I think fixed It would then just use the size you provided If it's responsive though We'll try to size it along with the container So I think this is working as expected Let me go on here a little bit With the next exercise There's of course your script you need to have So finding components is also important Documentation we've seen before You can use this to find components you want to use And figure out how to actually use them This is a bit more elaborate We're going to add now an image carousel Which is also called an image slider sometimes That thing where you can show various images In a single area on the screen And swipe between images with your fingers Or click on buttons to change the images Also call it a carousel sometimes And amp has one called amp carousel That allows it to happen automatically So you look at documentation and you say Okay what does this thing do How do I use it How do I customize it Various questions like that How do I style it Let's go back to amp.dev again And look up carousel Or amp carousel You'll see here the documentation page for that There it is There's actually two versions of this one over here And you see this looks like most things in AMP It's got a script to use to make it work And here's an example Width and height as always Layout if desired And if you want Some extra things are there You can choose a type of it Type can be either slides Which means you show one slide at a time Or carousel Where you see all the slides You can have a scroll between them There is also an autoplay attribute There's a possible delay You can loop There's various things like that So customizing this You can do it with JavaScript if you want to But it's simplest to use HTML instead Which we'll do just now to customize our carousel So the carousel can contain anything it wants to Text videos Images are pretty commonly used So we'll do this example over here We're going to kind of do this sort of thing With a carousel full of images Let's go ahead over here We just discussed all of these things Here's an example As we just saw AMP carousel With usual attributes with height and so on Contains different kinds of things Which are things in the carousel And let's try it out over here So the goal is to use the documentation To see how the carousel works And add our own carousel images to our site Remember to find images in Glitch You go to your project And go to assets And click on something over here And there it is And there's the URL you can use So given all that Your assignment is to add a carousel Wherever you want to Above the video looks kind of nice Make it responsive if you want to Choose type slides So one slide appears at a time Make it so it loops back So it never stops The size of 412 by 309 will look good These images here are already kind of good for that size It listed over here But any images can work Anything in your Glitch project Or on the internet you want to use Will be fine Does that make sense? So go ahead and try this out If you have questions Try the documentation Or just ask the questions in the chat I'll do this also on my side At the same time I will now mute We already got one here You can finish mine over here first I'm getting behind you Okay, mine works Oh, you already have done this Look at this I see at least three Nice Oh, look at this, you have a fourth image Extra credit They're even lined up ABCND Very nice I see that you've made your mice now All fit into the same area Yeah, it is easy, isn't it? That's kind of the idea is that Those things that would seem complicated Are now easy And views like Next.js There's also a nice AMP integration with Next.js That makes this even easier If you make React style AMP components To make it even simpler The question about telemetry on the tags A control on the events through these tags What does that question mean? A control on the events Could you explain to me in the chat What do you mean by that question? In the meantime, these all look great We've got some pretty quick people here We're going pretty fast We can maybe go even further here I think I have two more things to do One is simple and one is more elaborate It gets into actually event handlers And those kinds of things The loop attribute Yeah, here's the solution, by the way If you didn't get it There's the AMP carousel The key is to choose type equals slides To have that one slide at another time Look Just put the word loop in there And it loops There's your images And you're all done And of course, adding the script there Will make it actually work So to find new components You can also search for these things In the AMP reference on app.dev So there's how that looks Let's look at that together for a minute AMP components You see over here all these things On the left-hand side These are all the components AMP offers By the way, because we're at OpenJS You can make more of these things You have to actually It's an open source project You have to get permission to make these things And make a proposal And go through a design process But adding components is not so hard, really The thing is that everyone can use them Out there in the world They can't just be My company's component Customized for just me That has to be a thing everyone can use everywhere But notice that various companies Have made their own components There's a bunch of Facebook things over here There's AMP just for GitHub Or Gist, if you want For GitHub There's a Hulu player All kinds of things Those things for forms For fonts There's animation things That are quite nice All kinds of options exist So I see in the chat over here To know if you're out navigating through images or not You can use analytics in AMP If that was your question You can use analytics And you can certainly send pixel out Whenever a person clicks on a button Or they change images, for example Analytics or a whole other Complex topic of their own But as with all things in AMP They're done through a component Called AMP Analytics And there's various vendors That support AMP Analytics And you can figure it with JSON If that isn't enough You can, again, add your own JavaScript It just won't be a valid AMP anymore But if your goal is to make a faster page You can still add some more JavaScript in there And do that You'll just miss out on the The edges of the cache Anyway, finding components Looking at the reference So we've seen this before There also are Oh, nice, we can mention this too Examples in here with code There's a little playground in here Let's say we're back on the AMP carousel I want to try out some possible different things There's a link over here to the playground Or you can then modify the code over here However, you'll like and see the result over here So I think this is now supposed to be responsive Typical slides If I chose loop over here Should then loop forever And autoplay was the thing too, right? Let's try autoplay Oops, spelling it right also matters Autoplay And we got the arrows appear or not There you go, it's autoplaying Question Is there an open component repository Was moderated by your team? That's a good question The AMP team wants to be involved in making new components So again, you can make an issue on GitHub People will comment on it in various ways They might not like the idea if it's going to be I think maybe breaks AMP's performance guarantees They might like it a lot But one of our big goals is to get new contributors to AMP Not always from Google And we actually have a collaborators event happening With OpenJS on Thursday and Friday You should stop by and go to them and talk to some people And see if you want to contribute to AMP I can show you that real quick On our friend GitHub The AMP project has its own account AMP HTML This is the repository over here There it is And it's full of issues as you can see About all kinds of things People want to fix something about web stories Something about AMP ads and non-AMP pages Which is also allowed I don't know why it's there Some things here are done for performance A question Do you have to do two versions of your site Desktop version and an AMP version? That is commonly done Because when AMP first came out that was required But not recommended if you can avoid it Because it means you have two versions of your site That's kind of a hassle So the goal of AMP when it first came out Was it was called accelerated mobile pages And if you were a publisher You had a desktop version of your page And an AMP mobile version of your page And they're linked together by this tag Let me show you how this actually looks In fact, it's still part of AMP today And still AMP is most commonly used Let me get my project back over here So notice I didn't mention this before This link rel equals canonical over here The way this was done was you had two different pages And use a link tag so that search engines Would know they were the same thing The AMP HTML, the AMP page Would have link equals canonical That link to the non-AMP page And non-AMP page I like rel equals AMP HTML Linking back to your AMP page So you had this desktop and mobile version together This is still commonly done But it's kind of a hassle We think now that it's better to just use AMP for everything Because it's just simpler Then maintaining two versions of the same page all the time One thing you can do if AMP doesn't work for all the pages on your site Is you can make certain pages AMP Certain pages not AMP So it's often used for like home pages For landing pages For commonly used pages For pages that are simpler And then as you get to more elaborate things Like making purchases for example Or more elaborate interactions You'll have to leave AMP behind in some way Here's an example of that Let's see if I can find this This is We can find this This is Aliexpress You know Alibaba The very very large Chinese company The big e-commerce company Let's go to their mobile site over here So this was once actually an AMP site before Let's stay here It's no longer AMP They've changed non-AMP You can see over here it's normal looking HTML and so on But if you go to click on one of these categories over here You get an AMP page So for them They wanted certain features on the homepage AMP didn't seem to provide They left AMP behind The category pages are still AMP And that's fine They'll just web pages over here So if I go to a product page It may be AMP or not AMP I don't even remember what it is now We are still AMP over here on the product pages So AMP is often used for different kinds of things Different kinds of ways It's usually easier again just to make it So it's AMP all the time If I go to this example over here Let's see if I can find one more Spontaneously here This one I just saw recently This is a French site called red And it's AMP you can see over here All the AMP stuff, Lightning, Bolt and so on And it's desktop and it's mobile It's all AMP Other pages frequently are not that way Let's go to for example Google search again And look for news articles again About maybe Whatever the soup was about pixels That was a good example Class action Google All right, let's go over there to this 95th Google page This here is an AMP page It's pretty much in the app viewer So let's take it out of the amp viewer Let's just look at the AMP version Taking out of the Google's AMP viewer Here's the AMP page You can see again in DevTools if I zoom here It has an AMP page If I go to the desktop version It probably won't be AMP anymore at all If I take out this word AMP at the end of the URL I'm betting I'll just get Yeah, non-AMP page So it looks similar It probably has more features It probably has more honestly more tracking things on it Because those are what people often have more trouble with AMP It's getting other tracking pixels and things on there But yeah So this is a page which is AMP on mobile And not AMP on desktop Anyway AngularJS You can use AngularJS But you probably wouldn't want to Because Well, you can do Angular on the server side if you want to If Angular is on the client side It's going to be a lot of JavaScript And I think Angular does AMP will do anyway Although if you have a lot of complicated interactions on your screen AMP gets a little more cumbersome at a certain point It's a good question You come to the talk tomorrow I'll be talking about JavaScript and AMP How that works We can discuss it today too if you want to It's called AMP Script It lets you actually do JavaScript and AMP Within a web worker But usually if you have a complicated front-end framework It's not a thing you use with AMP most of the time I do recommend for more complicated interactions within AMP Is to use something small like Preact Which uses very little JavaScript and has very small bundles That's the whole other topic we can discuss if you want to Limitations like animations and complex styles AMP has limitations that if you use valid AMP Then your CSS can't be over 75k So it isn't too slow So there's a CSS limit for AMP for valid AMP If the valid AMP doesn't matter to you, it doesn't matter Animations actually are really good in AMP AMP has some components like AMP animation That support really advanced animations Actually, I'll show you an example of that If I go to amp.dev over here I can see a couple of articles that people have made that have nice animations Let's see use cases This is a demo e-commerce site that I made with some friends But this over here has nice examples of animations It uses amp position observer and amp animation Which uses jump position observers to do some nice things As you scroll down on the page animations trigger Let's look at this over here So as I scroll down this page here I don't know how it looks over zoom But all kinds of cool things happen to the page Graphs appear and think they're bigger and smaller and so on and so forth AMP really encourages animations that are already CPU, not CPU intensive rather, that are hardware accelerated But you can do all kinds of cool things with AMP if you want to There she goes Mail exchange on zoom though So if you want to look at this yourself Then here's a link for that As AMP has supported on all browsers Very much so the AMP team makes sure that every browser with a market share of 1% or more That AMP works in the last two versions of the browser Flawlessly, it also works in other browsers too, but they don't guarantee perfection So it'll work on, you know, i.e. like nine for example But maybe not as nicely as on edge for example i.e. 11 to support the Firefox, Safari All the major browsers, it's a support It is not by any means a thing for Chrome or for Google products The AMP team wants to make sure that it isn't just a Google product But a thing for the whole web to use Even if a lot of Googlers do work on it So we have more questions here Do you want to do more exercises or Add some more questions so we can do both those things of course Let's go back and do one more exercise And then talk about AMP script a little bit for those who are curious about that And then we'll go If you have time to define the exercise which involves making Interactive menu using AMP events and actions So let's go back over here Let's go away from GitHub If you want to get involved then please message me, you know, privately And say hello and I'll tell you how to come by on Thursday and Friday So back over here And by example, this one's pretty easy actually This is about how to find a component So now that you're more advanced at your AMP usage I want you to find this by yourself So this is a component that just lets you add social sharing links Simply So I want you to add to the bottom of your page over here Some social sharing links Look at the docs Find the right component to do it If you use this div with a class social bar Make the size of each button 44 by 44 It will look all pretty Because our CSS we have in this project makes that possible So try that And then we'll get back to more questions That is correct AMP social share is the name of the component If you get it then let me know Does anyone have this so far? We got one And Drum roll please Die of cute mouse eating cheese Yeah, look at that Very good Of course, we'll see this video here too What is this phrase die of cute mean though? It's kind of concerning All right, that's that's cute Here's my project over here My four buttons in the bottom If you didn't get this yet It's pretty straightforward Once you get the right component I use this div class equal social bar And then for AMP social share components And the height and the width And there they were There's of course various ways to do this You can also use a link You know, an SVG image or whatever But this works nicely Here it is on the screen Any questions about that? We got one more We'll ignore the video over there It is not about a song really Just the way he dances is really Disturbing Apparently they got there and nothing was what you planned He just got there and kind of did this little dance Spontaneously And they shot this in a day And there it was There's the buttons Maybe you've even changed the CSS some to make it So they're further apart So back to questions over here How much control does AMP provide over The developers like debugging and testing and so on It provides you the same control as any other You know, JavaScript framework that exists out there It's mostly up to you You have to Debug in the usual way That you would do testing I mean, the backend belongs to you The front end is what you use AMP for So any kind of usual methods you have To get telemetry on users You know, do staging and production environments Whatever else you usually do You can still do It gets more elaborate when it comes to using More elaborate AMP components Because some of them involve storing data In AMP state variables And there's ways to find those things And see what they have And there's techniques for Getting more or less warnings or error messages Any other questions that are coming up Let's do one more exercise But first let's talk about AMP script for a few minutes AMP script, I have this talk on it tomorrow Which I can summarize for you Pretty quickly It's basically a way of using JavaScript in workers So the idea is that If you know about web workers They've been around for a long time And aren't used very much Because web workers lack access to the DOM Web workers can only talk to the main thread By passing messages back and forth It's actually good for AMP Because AMP wants to control the main thread Just once you have JavaScript that you run yourself That will then take over the main thread And maybe make things very slow So for AMP workers are a wonderful solution When you take JavaScript Let's you run this in a worker And then AMP can always disallow mutations That would block the screen in some way Or make things change too much It can't do the things that all of JavaScript does Because it's essentially simulating JavaScript's DOM API Within its own JavaScript Let me show you an example Actually, this is pretty abstract I can probably find if I look really hard over here My talk for tomorrow And show you some slides from that And show you some code Because that make it really clear, I think Let me see If I can find that for you Hold on a second I think this must be it Yeah Now that isn't it I said disappointing Let me find it real quick Because I can't actually easily show you my code Let me just pull this up over here Okay, here it comes What is the release cycle of these components? I forget they changed it recently It was every week or two And they then made it a little bit quicker So they could turn out a new version of them more quickly They have a whole series of different releases And ways that they work And there's a whole page on GitHub That describes all these things All right So, yeah, web workers So this is my talk for tomorrow Summarized in about two minutes Web workers are this thing Isn't that nice? But they only pass messages back and forth from the main thread All code runs in its own thread Workers lack the access to the DOM So AMP script makes this possible This AMP script component By giving you this thing called worker DOM Which is an open source library Wrapped in AMP script What this does is it passes messages Back and forth between the main thread And the worker So it looks kind of like this In the end, finally Use a component called AMP script And the DOM inside the AMP script over there Like this hello over here It gets passed to the worker The worker then has the stuff that simulates The parts of the DOM API So you can then in your own script over here Do normal DOM API things And modify the API Add event listeners And do things like that, as you will So there's an example over there It's just a hello world example Where you find the first H1 And add the word world to it You can even see that in action If I can find it over here So there's hello world in AMP script This example is not exciting Just adds a world to hello Let's do the one with a button here This is a lot more exciting, I promise you Hello button adds a button here Which then adds stuff to the DOM Actually, I've got over here Looks like I've got a break point set in this one You can see how there it is Magically all this stuff over here about worker DOM Actually, this is probably too small to see Let's make this bigger So all this worker DOM stuff is in here And then there's actually your drop script at the bottom And there, this document here actually Is it's not the real document But a simulation done by AMP script With all these extra things here With names like 7, 8, 9, 10 And then actual DOM methods and properties and so on And then it does the actual work over there You can find this here in this worker There's the AMP script we're looking at now So anyway, if we do this It will then actually magically If I, sorry, unpause Add these things over here Let's remove this break point Let's do this again So a basic example over there There's AMP script And then finally, if you want to use a framework Because I'm sorry, you can They're often a little bit too big to fit Within limitations that AMP provides Unless you use things like Preact Preact makes things very small So I have an example over here Using Preact Doing the same kind of thing Like Hello World And people that make worker DOM and AMP script Also contribute to Preact And know very well the API that the Preact uses To make its changes to the DOM So it's very well supported If you want to use the framework Preact is a great choice You can also use React or View or something else Just the bundles get sort of big sometimes Which may be contrary to the spirit of AMP Okay, that's AMP script in a very small nutshell If you want to try AMP script out I've got an awesome new tutorial on it That you could try Which I will now look for you For, look for, for you On amp.dev Everything seems to live AMP script If you're curious about these things Here Try this over here If you want to try this out It's kind of neat It isn't as convenient as running DOM script You know, just kind of in the rest of the world But it does this in an interesting way That makes it very, very, very performant Back to the questions here What is the adoption rate of AMP? AMP is what I adopted pretty widely They used to count the number of AMP pages out there They stopped counting at a certain point Because counting is kind of hard Like what is a page, you know What is a unique page A couple of years ago There were about 55 million domains using it And they had like 6 billion pages That's increased since then, I'm pretty sure Because more companies are using it And because also the WordPress plugin Has gotten more and more used And WordPress is a very big part of the web But a lot of major publishers use it In many countries, it depends where you are Like in the US, Western Europe Most major publishers use AMP In other countries, some places That's more used for e-commerce Like we have examples from Brazil And India and South Africa That are e-commerce sites that use AMP There's various places that use it out there If you're curious to see more examples of AMP in the world I've got some here This is a nice one from a company Called Wampo Bold That makes a lot of AMP sites This actually is an AMP PWA combination It's an e-commerce site that has a progressive web app And also AMP all together Somewhere in here, there'll be AMP I can find it I'm getting a bit tired here, clearly I'm not wayfinding things Somewhere over here Oh, hold on, that's why it's not AMP Because actually this is a paired approach This is AMP on mobile, I think Not on desktop Yeah, okay, there we are Here's the mobile version Over here, this is AMP So you see it in various places in the world Of various different kinds of uses A lot of publishers use it still A lot of paired AMP Where it's, again, an AMP page on mobile Not on desktop But it just depends where you are Whoops Let's find one for somewhere else in the world For a variety There's Price Line This one over here I think this is AMP all the time Yeah, this is AMP desktop and mobile Looks better on mobile, I think This here is, you know, TV I think it's from Mexico Also an AMP site Any other questions about all of these things Before doing our final exercise of the day? If not, let us do one final exercise Let's close some of these links over here So, okay, AMP I think some of these things before All about valid AMP We've gone over these things as part of the actual discussion We've got it so far CSS, how it works Why valid AMP is useful And now let us build a menu So a menu Sorry about these boxes that have appeared here somehow So it's not unlike things we've done before We use event handlers And you use actions that result from events in AMP For example, let's say you were using good old fashion JQuery I wanted to have a button you clicked on That took this div and hit it So you would use onClick equals the dollar sign Which I loved when it first came out And then you get the div itself By putting its selector there in quotes You can grab the element that way from the DOM I use method like hide to hide it So like button onClick, dollar sign and pound warning hide AMP is kind of like that It's not dissimilar So this is an example of the same thing in AMP If you wanted to hide a div You'd go by the divs ID And you would say button on OnAttribute equals tap colon warning.hide How this looks over here is again onAttribute is used The first thing there in quotes is tap Which is the name of the event AMP takes the click event And other kinds of events that involve touch And combines those for you into a tap event And then an ID of an element Like warning, then a dot, and an action Like hide That's how it works Oh, there it is So we'll try this ourselves now We're going to add a menu to our site With the app events and actions It's going to involve a component That makes this menu appear and disappear And then we'll use actions and events To make two buttons work One is the hamburger menu itself And two is the clothes I have to cough for a minute I'm going to mute while I cough Pardon me So embarrassing I have some water, fortunately Anyway, we'll discuss these two formally over here But we'll just use these kind of intuitively To make our menu work To have the buttons that open and close the menu Actually do something We'll use a component called AMP sidebar Whose content is hidden until it's opened up You can use various actions to open up A sidebar with a given ID Like open or toggle You can close it with the action called close That makes sense Let's look at this in the documentation for a minute here Let's look up AMP sidebar Because that'll give us what we're looking for here Not AMP script, but AMP sidebar And of course you can use AMP script to do this instead By adding JavaScript to add advanced handlers And so on and so forth AMP sidebar has a script you use over there And then it's got things you can use to customize it Like the side that comes from left or right side Attributes like this And there's an example here Probably somewhere There's an example, for example With AMP sidebar you want to have layout It goes no display Because at first when you first load it up It should be invisible You can choose the side you want it to go from And it just contains whatever it contains It's just basically a component that contains HTML Which will then appear or vanish As sidebar appears or vanishes And then for the events and actions themselves Here's some examples over here So here they have a button That actually shows the sidebar Button on equals tap sidebar That's actually the default action Sidebar.open would also work For sidebar.toggle And then to close it, you use a close event So if you're stuck, look there at the documentation for sidebar You can also look up actions and events Which discusses this in more detail I'm sure I can find it by This kind of search actions and events You see here the syntax Of an event name, colon, the DOM element Rather the ID of the DOM element And then a dot method name and so on and so forth Put this in the chat in case it's useful So that's our assignment here It's to use documentation to see how this works And then add in the header a div With the little hamburger menu that toggles the menu If you use class navbar trigger it will look nice Because our CSS does that Add the sidebar component right below the body The sidebar component works best if it's the direct child of the body Because the sidebar will add this opaque thing over the whole screen And it looks good if it's just there for the parent So I recommend adding it right below the body tag Use ID sidebar one and class sidebar It'll look nice that way Then the sidebar has nav elements Like any kind of menu might have in the world It's got an unordered list with some things in it And then you add another div that's an x button Which closes the menu when it's tapped And I will just for your uses I will actually copy in here The little characters here You can use for the buttons I'm just going to find it over here myself So here I'm going to put in the chat The hamburger menu button This is more complicated than we did before So if you get stuck Please feel free to say this in the chat Because I didn't tell you how to actually do it I just told you kind of a lot about how to do it And how to find the rest of the things you need Where's the x? Here's an x This is a nice closed x over here in your chat Does that make sense? That's hard because I can't see any of you But if you have any questions about this last exercise Please post them in the chat And while you're doing this, I will also mute myself And I will also do it I would do it myself I see here a question Where do you paste the buttons? Oh, I put the two buttons in the chat Hopefully you got those two things From Shan and I pasted a little hamburger menu Extended character and a big x If that was the question If that wasn't the question, then let me know So I will paste that here again Let me know if you get that Can I do that? Does that help? Ah, okay All right To the last thing, I'll just go to the wrong person I was pasting more links in here for the last little while I'll paste in some more links then So this was a link to the JavaScript, the Epscript tutorial This was the link to actions and events Sorry, we had a communication breakdown here On our side And here was the link also to that nice article with the cool animations What else could I have missed here back in my link pasting? Ah, now I see why I couldn't ever communicate with you Okay I'm going to paste some more things in the chat now But if you have more questions, then please let me know I see a question Can we attach HTML events on these tags? You can handle events and passes down most events to you Not all events, but most of them It doesn't pass the long hover, for example, because it doesn't work on mobile phones But the list over there is available at the actions and events site over here Actions and events page, I guess It lists various events you can use And actions you can take on those events So also various components throw their own events Like for example For inputs, say if there was a change event Carousels throw a slide change event There's things like that To add your standard HTML events and event listeners You can use Epscript to do that too If you want some encouragement here I'll show you that it can be done Because there it is As with various things in the world, AMP isn't really hard It just requires getting used to how you do things Once you do, you can make sites really quickly That's kind of the power of AMP Although your customization is limited without using Epscript You can do pretty standard interactions pretty fast after a while Is there a guide about CSS styles? CSS belongs to you completely So yeah, it's just yours, CSS Like with all HTML, all webpages That you control completely How are folks doing out there? We're running out of time We have about 10 minutes left So I can always give you some hints Or We could all have more discussion about this And all this content is available online too, by the way Because Things are available online in general If I go here I'll paste this in the chat also We did today as part of the courses This menu thing here is actually an intermediate course Because it's more advanced skill So if you go there, you'll find the menu stuff we just did And you can go beyond that to other advanced kinds of AMP things Is anyone close to having this? I see something that kind of resembles it You can show off your link Otherwise, this is what I did Oh, you've almost got it Let's give this one more This is pretty good because this is your first AMP page ever And you're making interactions That's pretty quick All right We have WindyLivelyTracker Hey Okay, that's pretty good The X is at the bottom It doesn't do anything But the menu totally appears So one of the buttons totally works So why doesn't button number two work? Shall we see what's happening over here? Ah, tap sidebar one If you do sidebar one.close or .toggle It'll probably close it You are so close to being there You've got some errors here But yeah, I guess AMP sidebar wants to have this no display layout Because that guarantees won't get shown I guess container seems to work It just throws an error message And these rule and tab index things here for accessibility Okay, you're saying it's updated now Yeah, you're a star There it is All right, congratulations One more has come in also Oh, look at this It's in the right spot even It's on the left of the Chico Cheese Bicycles There was an X Yeah, this is all good The only difference from mine I think is that I have a probably a different area Which maybe you get to CSS activated So my sidebar is under body exactly Because that's where it likes to be I think yours were all in the same places Then I have my classical sidebar The div class navbar trigger for the button over here And then the header is right below that The class header bar Class navbar trigger All those things there And what else am I missing over here? Yeah, there's the X Right, there's the X button here And there's the other button over here And I see Emeralds, Faber, Diascia Well, you get, wow How'd you get two lines in there? I've never seen this before Oh, it's an equal sign I love your solution to use an equal sign Yeah, it's like a two third hamburger menu I didn't know how you'd done two lines Equals So let's look at this on the big screen here There's again the header Inside there the div With the hamburger menu And then the magical thing On equals tap sidebar1.toggle Has seemed to have gotten there The amp sidebar is there I use side equals left I use the classical sidebar for my CSS to activate And then the div with the X in it With this tap sidebar1.toggle It could have been closed just as well And a menu content That's really about it And then of course Having the JavaScript snippet there In the head to make it all work I'm going to skip the rest of this stuff over here Because it's kind of more about amp Do you have any Other questions or comments about anything of any sorts For those who are curious Let me try to find the link Oh, I didn't I'm looking to figure this out I don't know what this is Shannon is there a way to easily figure out How to show up on Thursday Or Friday for the collaborator summit Does it require Does it require registering for that separately? Okay So it requires other registration to attend Thursday and Friday Collaborator Summit If you want to come by And look at how to contribute to AMP Then also you can message me Separately on Twitter Or on the This tribe social chat thing over here I'll be around If there aren't any further questions Thanks for trying this out It was fun for me Hopefully it was fun for you You did some amazing things And only Less than two hours Hour or three quarters Some incredible things Thanks a lot