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?  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.  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


Compass, guiding safe migration. Easier in our team to access a large number of migrants in distress and to be inclusive of all. We strive to break barriers and bridge gaps through the usage of spoken and non-spoken communication languages because we ensure the accessibility and inclusivity to everyone in need.


How are we going? Oh, how's your day been so far? Good. Oh amazing. That's nice. Cool. So this is a casual session today So yes, this is a big room and you're all spread out a bit if you want to participate and ask some questions You can move your seats closer to the front Or not just stay where you are Up to you This is the provocatively titled why Drupal why now session For those of you who weren't here this morning. I'm Dave Sparks the chair of Drupal South and a long-time Drupal at it we have here a wonderful panel of people from all walks of life coming here to talk about Drupal. I have some casual questions for them about their Relationship with Drupal what they like and what they don't like and we will be inviting questions from the audience as well It is a panel discussion so we have some Hentel microphones And I'll pass them along ask you guys to introduce yourselves Very briefly one or two sentences who you are what you do and your relationship with Drupal Hello, I'm Nicole Ritchie. I work from AZIO. I'm the client services lead and I have worked On the delivery side with Drupal for a long time. I used to work at catalysts. I've been in the Community a lot of you may know me. I've been around for the last maybe eight nine years Hi, everyone. My name is Josh. Why he I started my career in Drupal in 2007 at catalyst today. I work for Acquia and we're going up 10 years in January Hey guys, thanks for coming along to the session. I'm Dallas Ramsden I am a chief marketing officer of x equals and I've grown into that position from being a Developer of Drupal for about 10 years and it was when I realized the power of Data for creating personalized digital experiences is what kind of pushed me in the direction of marketing. Thank you Hi, my name is Marjorie Tong Wei. I work for annex, which is a Canberra based company So I've been involved with Drupal for just over 10 years now. I'm just developing I started off just doing plain normal Drupal man in 2017. I sort of switched over doing sort of govcms Sites mostly Hi, Alastair Neil. I'm the technical product owner for govcms, which is out of the Department of Finance in Australia Been going steady with Drupal for since about 2016 First started building govcms sites ironically at the time Yeah, and transitioned running teams running sites to well running product Thanks team and I'm gonna join you at the seats now my first question and looking for a volunteer to answer this one first is Positives about Drupal. Where do you think Drupal shines? What's your favorite type of work to do with Drupal? I'll start. I've got a microphone The big one for me and a big one I tell potential customers is flexibility There's more than one way to skin a cat with Drupal and I can say that I have two cats I don't skin my cats. I skin my Drupal sites. I Think the fact that you can get in there. You can change it to what you need. You can meld it You can mold it. That is a great thing Some of the challenges but that is then finding people who can do that I guess my favorite site sites to build would just be Just a non-decoupled site. I prefer just using Drupal as it is not doing sort of fancy stuff with it. I like Yeah similar to use like I like that you can do the same thing in 10 different ways and just as you progress throughout your career You can start off doing it sort of a simple way then you figure out better ways or more fancy ways of doing stuff So yeah, that's probably my favorite thing. It's just flexible. Well, thanks Yeah, so my my favorite element of Drupal is again, it's like I've alluded to earlier it's it's it's a it's an ability to work and model the data that you need when you need it and part of Part of the thing where I first was really Expanding my mind and the power of Drupal is I was in a in a position with Awkward I got to I got to train engineering teams of Awkward's partners Awkward's customers and and it was during a very Transformative phase of Drupal was going from Drupal 7 into Drupal 8 and I was getting to train people Drupal 8 and So I got to I got to work with a lot of individuals and and experience Their empowerment of using Drupal and then so and then they're you know the developer experience Was empowered and their team was empowered and that empowers the business but then interesting thing kind of happened is is COVID happened and so and I also happened to move from the US to to New Zealand here and Due to time differences and whatnot. I wasn't I was no longer It wasn't easy for me to continue in in-person training I'm sorry and COVID happened and then so I switched to a completely on-demand Learning experience powered powered by Drupal and that's what that's why I really got to see how Drupal is good at at creating learning digital experiences and powering those experiences of Drupal and so whether you're talking about a customer journey You know where you have to map these waypoints and the data to back up to make sure that they actually are progressing on along that journey or you know the ticketing experience or the You know educational. I think Drupal has a really awesome Is well suited to transform the digital experience of learning and that's that's what excites me about Drupal That's that's one of the reasons why I continue to to be a champion of Drupal. Thank you. I think Open source is a really big Character for for Drupal and a big reason to use it as a CMS You know and at aquee we compete with a lot of proprietary CMS vendors And so that open source license and the There is a way of saying, you know, you don't need to be paying massive amounts of money for a software license to be able to use Something that's free, you know, and all that capability is free and it all comes from a community of people That have you know, they they care about that, you know that CMS being produced in a particular way and so I really like that as well You know, you don't have a necessarily product managers. That's it At the top of an organization trying to envision What's the features that we need to be providing? I mean there's a little bit of that in the community But really it's like a duocracy right if you're willing to put the time in to create the feature fix the bug Produce the patch engage with the community you can get that change in there And so there's this huge empowerment to be able to have the CMS that you want for zero cost and the freedom to create the things And add the things to it for you know, and you're not sort of stuck behind You know trying to create support requests and get things prioritized to a roadmap and all of those those parts of it And so they creates from that, you know a lot of freedom and flexibility obviously ownership as well But there's also an entire community of people that are behind that and wanting you to build things in the right way and and Trying to solve things at a global scale, right? Like how do we implement standards and how do we do security so that when someone builds a form for example, you know Cross-site request forgery is just Solved it's a part of the framework You don't have to think about that as a developer because it's built into this to the framework if you're using it that way And there's so many other You know places where the CMS does that we just kind of take for granted a little bit and then finally, you know there's a lot of new CMS is today, especially built on language like in JavaScript and There's a real value to a CMS that has matured over time You know, I think it wasn't only six months ago that the Alt tag was added to the image attribute and the react system Now that was something we like felt like we'd be solved before 2010 You know and they're only just doing that into 2022. So there's you know, that maturity is not under the understated as well And that's what makes You know Drupal a really suitable CMS for those enterprise applications Oh, and for me, it's the community That's I feel like all you guys you don't just go to work You're not a number that goes to work and cooks a recipe just following on from Matias's talk this morning It's the passion that I see it's it's you guys coming to the conference giving talks about all the amazing projects all the problems you've solved You're adding to every recipe. You're not just taking it cooking it It's definitely the passion that I see in each one of you and that's what Gives me the passion to go to work every day Nice, thank you. I guess, you know, we're we're at a Drupal conference. This is a Drupal audience They're familiar with Drupal. They're no Drupal. They hopefully love Drupal But you know to be honest Drupal's over 20 years old We've all been doing it for a long time.  What keeps you fresh Josh? So I don't do a whole lot of development with Drupal these days and do it You know sort of Advantagiously and so I'm kind of more like you know like the next time I go to work on a Drupal site I'm like, oh, it's I see it's moved the major version. I need to upgrade and oh Compose a hell and I'll just blow it away and start over or something like that So I kind of learned, you know through these snapshots of how far it's kind of moved There was a question again. I've got what keeps you fresh bro. Oh, it gives me fresh for Drupal That's a real weird question So I didn't tell you that So I think about I think it's a really good question in the sense that Drupal being mature is Can sometimes get stuck in some of the ways that we have done things in the web and They have just the ways that we've always done it And so we kind of recreate the wheel in the way that it's always been done Whereas, you know new CMS's can think about things Fresh like, you know, how do people want to do it today? And so a good example of that might be something like content type creation She watched a number of demos today where you know, we were looking at content type creation or something of the sort And it's actually a very Slow and painful experience compared to some of the ways of data modeling and other CMS's today But it's the way that we've always done it and like there's been a little conversation on how we kind of move on to something else And it's been a bit of a challenge But I think that also is you know the space for opportunity for Drupal And that's what you kind of go back to the point about being fresh is we can actually Take time to think about some of those things and ask some of those questions and have the community discussion And we're not sort of stuck yet to go back to my first point about being open We can you know have that freedom to continue to change So I think more broadly Obviously, I've been excited by web for a long time. There's always a lot of stuff that's happening There's always changed even if it's not Drupal Doing a sense 98 so a lot of things have changed. I don't use notepad too much anymore. Thankfully But I think because of well, it's my current position and also that I know that I like to solve problems Is I've got a bunch of customers that have problems that they wanted solve So is that based off my experience is that based off? Say limitations in my platform Or what other things are out there that could help move those things forward? I think the fact that I'm thrown into a position to help facilitate something like that keeps me fresh Just happens to be wrapped in that Drupal space where a lot of creative things are happening Nice. Thank you. I got a jump for question for March there. I enjoyed you talk this morning about Getting a site done and dusted in three weeks On a six-week timeline. So is that do you often take that long to do a website? Wow No, I wouldn't normally do it in three weeks So even the six weeks it was definitely doable in six weeks But yeah, I guess the things that caused it to be three works three weeks weren't sort of a bit out of my control so yes I guess I love the fact that you can sort of build things quickly when you need to if assuming everything else around you was working Yeah, I guess Drupal does have a Reputation for doing big projects large-scale content long development time I Don't imagine you would have had a vast number of hours inside that three weeks to be doing Hard dev and coding so you must be able to work and put things together With site building and theming. Yeah. Yeah, definitely And we tried to reuse as many components as possible So we weren't like every time there's like some theming stuff was done We'd build it once and just make sure it would fit all purposes possibly could I Mean within the gov cms community you guys have been working with a distribution for a long time relatively long time I guess With the maturity of the Drupal product and the maturity of that distribution are you seeing lead times Speed up come down. You don't want to say yes to that you you want more time You're still thinking Look when Obviously, I've got visibility of when things are getting provisioned on our platform and then obviously the delivery point I'd say those who are already in the system already have the background with Drupal I think they're getting better return times For those that are new to the process It's the same old. Hey, I still need to feel like I know what I'm doing. Can we get the right people on board? All of those and of course also there's a scale thing there as well Of course larger sites will always take a larger amounts of time and of course the amount of resources you've got about available Existing customers are improving in my mind. I For other ones a bit of a mixed bag depending on that skill set Nice. Thank you for that Dallas Of course, thanks. So this is back to what keeps yeah, I mean, I guess you've worked across a number of different areas Yeah, I've worked with it with different end user groups and in different roles within the Drupal ecosystem So, you know, what keeps you fresh and looking so so young and spry despite your experience I mean things that keep me awake at night are like what what how can we push the envelope of? again coming back to digital experience like I had a recent No, I don't know if it's an epiphany, but it was it was the finding mode of my life where like I had accidentally Purchased my 17 month old kid a Happy Meal and in that Happy Meal was a Like a toy kit thing that you It's augmented reality of The just dance game.  How can we how can we expand like this is where the internet is going? Right? We like I would encourage all of us to think about what's the next evolution past the website, right? Like the website is certainly needed and definitely is needed But what it well, how can how are how are you know kids that are reading? You know augmented really Happy Meals in five ten years time, right? Like they're well, how can we Power that and Drupal is built for the internet of tomorrow because of its data modeling and so anyway So that's just some random thoughts and that keeps me keeps me awake in it Nice. Thank you. Nicole. You've been away from from the commercial coal face for a wee while working on a different project Coming back Any thoughts or reflections on where Drupal has come to in that time that you were away from it on the day today? I guess sort of for me coming back from maternity leave and and trying to get up to speed again because so much has changed even in the hosting space and It's really interesting Maybe two or three years ago when we were talking to customers. We had lots of Customers asking us are you doing Lara well? Are you supporting? different CMSs and I feel like just recently all the Enquirers we're having everyone's going back or being drawn back to Drupal And it's really nice and for me having worked on the delivery side That's what I love about Drupal because it's not just a website build. It's not just a Cheap and cheerful website. It is I've worked on a on a big project with tourism New Zealand where it was really drilling into We were building a bit big platform. There was lots of data. There was a big thing for them was security It was just a complexity and seeing how powerful Drupal is to What you can can drive with Drupal is really amazing nice, I guess I've been working with Drupal for about 15 years and I Genuinely feel like you know is a maturity with the product and a maturity with our developer team and our audience and our clients understand so much more than they did 10 or 15 years ago our clients are upskilling our clients are you know aggressive and ambitious and they want digital experiences and You know we're at this moment of change where Drupal 10 is out We're talking about the the Internet of tomorrow the Drupal of the future Are any of you have anything special or you know a either you're looking forward to from the next few releases of Drupal or Be something that's on your wish list that you really want to see a challenge You want to throw out to the community to to bring you some magic? so one thing that I think has a huge amount of potential and I don't know that it's quite realized yet is Drupal's recipes initiative So that initiative I think was kind of born out of replacing the install profile issue Install profiles, you know give you a way to pre-define how you install Drupal come with like a Drupal distribution of sorts But there's a lot of problems with that like you know the way that you ship updates and the dependency that it had on installation profiles Created a lot of lock-in for people who used a install profile of a particular type see a lot of not he's nodding like you brother so Install recipes are really cool because there would be ways of essentially shipping two main things one is Config and two would be dependency like composer files or things sounds a little bit like a module, right? But you would be able to do this for your config across multiple modules So you can kind of say this is how you would configure this collection of modules together To create this type of feature right so you can think about features if you're a Drupal 7 Person so that kind of thing then becomes shippable and then deployable. I think at the moment They're thinking about the point that through code like Drupal's always done But the other kind of big thought that I don't think we've yet kind of explored is like you know I'll say this before we've always done things always, you know, we do things where we've always done them Well back in like 2002 or wherever we started building Drupal. It was like the the way that you would do Extensibility was through distribution of code in modules And so that's what where the module system came from today But if you think about how extensibility works in a sass Platform today, like if you're using Slack or if you're using zoom and you want to turn on an app You don't download code. In fact, it's a huge security risk because you give all these other companies that are producing those integrations You don't want to deploy their code on your servers But that is still the way that Drupal fundamentally works today And so I think what is really potentially powerful about this recipes initiative is that we could deploy them because they're just Declarations, they're just YAML files and JSON content We could actually be deploying those over at the cloud over HTTP and not have to deploy them through the file system And if we have the underlying PHP so Drupal core or framework that can run those recipes Then we can have those features installed without the need for adding additional code. I think there's still you know the need to also then create a Cloud-like Extensibility framework just like these sass companies have that allow Drupal to become extensible in that way, but you know before we kind of get there I think this is where recipes could potentially go and be quite an exciting thing for our future Thanks. Um, so again, I think Josh made a Comment, you know, we've done things that were the way we've always have and I said to me If we do want to get new innovation like new thinking into into the Drupal Ecosystem here. We have to make it easy. We need to make it easier for people new to Drupal to get into Drupal And so what recipes certainly our way could be a way to do that Another way that I would really like to see is how can we improve the documentation of Drupal because that's one of the biggest Barriers to learning Drupal is it's there's so many different versions, you know, there's so many different ways of doing things that are just no longer applicable and it's it's really hard and discouraging for Learner and people that are trying to learn to become experts in Drupal is really really challenging and So what I would like to see is how can we how can we make it easier for for new thinking and new people to bring in and Cross-pollinate their ideas and although there's been this has been a wonderful Conference because there's so many, you know innovative ideas that are coming out of this and it's because of the cross-pollination And so so anyway, I would like to see Drupal documentation or ways that people can learn Drupal to be to be improved I'd echo that. Yeah Documentation is important documentation is hard to keep on top of Probably having some I don't know better version controls around those sort of things But the big one for me is also just that perception a lot of the conversations I have with people who are thinking about CMS and of course Drupal underneath is It sounds very hard or that sounds very technical for a lot of the things that people are doing. It's not If you're just doing those sort of more basic or simpler sites as module saying earlier It's a bit of familiarity. A lot of people want to see the UI behind the scenes It's relatively simple in my mind granted. I've been looking at it for a long time now But it's otherwise a CMS for people in that space. It can be a lot more But that perception and understanding of what it is is far off from where it should be Yeah, I guess from my my personal perspective, you know, I'm not a developer. I don't come from a dev background I'm a I'm a content person. I like publishing stuff on the internet, you know Websites they'll catch on I reckon And I think that that The Drupal editorial experience, you know the admin experience Getting content up online is Can be easy and I say that after working with it for 15 years But for people coming in you it can be a little bit Intimidating and not quite as much fun as it could be So I think that's that's probably my big work on you know documentation guides making things easy And bringing a bit of joy back into it, you know, I am I got button-holded a barbecue a few weeks months ago Now I guess it wasn't raining. So it must have been maybe a year ago And so I said, what do you do and I say I make websites He's like, oh, I've got a website. I need to replace some hand-built hand-built HTML he'd had for 12 years and so He didn't have any money He did he did give me a beer and so I was like, okay, I set him off to a Sass product a non-Drupal product. I won't say the name because I promised I wouldn't swear at this conference, but And we helped him on board him into that and it was just a really different experience to eat someone else's dog food you know and and and see how they do it and It was really easy It was really easy to do horrible horrible things it was really easy to make a terrible terrible web page and It was it was really sobering to view source and see what that output was and See just how slow a six-page brochure site could be so, you know As I think there's an opportunity for Drupal to bring that power and that speed net deployment, you know with a fun Experience that that civilians the barbecue goers can can can get engaged with We've got about two minutes left. So Any last remarks from anyone that would ask the question why Drupal why now Look, I think Josh said it earlier open source big thing about it if there is an issue Someone's usually already found it or you can report it. It is visible somewhere. It can be worked on It's frustrating that things land in roadmaps and you know if a Q3 2030 but At least if it's open source, you can see the issue you can track it You can help it you can push it along that alone means you've got more control in my mind Go in the last minute. We have left any questions from anyone. Oh, yeah So the question is what do we think about Dries's keynote statement Drupal is for ambitious site builders. Oh Well, are you looking at me to answer that one quickly? So, you know, we've always been site builder focused as a as a company That's kind of been driven by the people we've had on the team And by you know my love of publishing stuff on the internet with with ignorance of code So I think that the the power of site building has always been Drupal super power and I think that it should continue to be so I Think when you think about the Drupal community the majority especially the majority of people that contribute to Drupal core They're probably wouldn't associate themselves as site builders might start as a site border. Yeah, it's true. I Think site building There's a lot of like low-code CMS build, you know around today and so that space I think is quite competitive and a term ambitious might not be a Accurate enough word to capture the people that really fit into the Drupal space that might become contributors Which are really coders is what we're really saying like people coders who don't want to write coders of the people that we want Target right because there are people who are site builders that don't know how to code But in Drupal, it's sort of like if you're a developer It's really easy to build a site without having to write a line of code And then when you need to you can and that's pretty awesome too. So like you get example. I built a Maintain a Drupal site and I wanted to do Jira integration and there was a module for it But I looked at it and it didn't have the style of integration or the way I wanted to set it up in there and I was like, you know what? There's a there's a composer framework for Jira PHP So I just composed a require that custom module and you know the bespoke form and I could integrate it really clearly Somebody might set me on the risk for writing something custom to summit contribute. I didn't contribute to it. That's true but The point being right was that like I can get most of the functionality I needed when I wanted it and in the moment that I couldn't I was very easy for me to Adopt a development and be able to do that which is not true for people who are typical low-code site builders Or an associate in a SAS based hosting platform. Yeah there's site builder have a Term that resonates with the wider Industry right rather than just Drupal because it has a specific one I think so although I think the the term site might be too limiting Because content hosting I think is much broader than a website, you know So it's more like experience builder or just a low-code developer One of those words probably more better. I think I think we're out of time people I will Let you go There's a short break now before we head into the the next award session so if you know you want to ask us questions or have some discussion amongst yourselves around this issue, I think it's a Within the Drupal South Committee Within the conference speakers. It's a it's a conversation. We often have about how do we advocate for Drupal more? How do we get people to experience the the joy and the power that we do from Drupal? So thanks for your time Thanks for sharing your thoughts