So we're here to talk about amp who is we we is me and these guys I'm Matthew, and I am like a walking lullabot ad today That's my job and my socks My shirt Huh, how's that?  Oh, I'm Karen Stevenson also at lullabot long-time Drupal user And and such yeah Howdy, I'm mark drummond. I'm a front-end developer at lullabot and also lullabot enthusiast and excited to talk to you about some of the work that we've been doing and Some cool new things So things are good I just realized I didn't actually introduce myself. My name is Matthew tiffed and I work at lullabot and I work on the configuration system in Drupal 8 and And yeah, yeah Okay Down to business So we're here to talk about accelerated mobile pages. It's fast everywhere. I got to talk talk talk talk No You probably have heard about instant or not instant mobile pages accelerated mobile pages But one of the things I want to make clear from the beginning is what we're talking about here is specific to mobile amp is a way to make the Mobile experience faster because right now We think that the mobile experience and lots of other people think the mobile experience is slow and clunky and frustrating so Right now part of the reason that this happens is when we build websites we often have to make choices where Revenue decisions become more important than user experience And we have to make business decisions because we're making websites and sometimes we want those websites to generate revenue and as a result We end up with web pages that load on our phones that look good eventually But sometimes you know that experience where you're trying to click on a link or something it jumps around and you go to that other page and you start So we get frustrated but like I like to say sometimes we're not here to talk about like Feeding the hungry or you know putting shelter over the homeless. We're here to speed up the mobile web that's that's what amp does and The reason that It's important though to speed up the web is if you are talking about wanting to maximize revenue and issues like that Studies have shown that a lot of users will abandon a page that doesn't load within three seconds sometimes Well, we're a little bit more willing to wait on our mobile devices, but generally speaking The research that Facebook and Google and others have done would indicate that a lot of people will drop off after three seconds or so And I can actually as a little side say that I've kind of noticed this too once I've been working on this project is that when I view amp results now Now it seems like I'm getting used to things working really quickly and I like that and I don't want to wait around anymore and I'm noticing me be more Picky about which link I want to click, but we'll get to more of that later But the goal here with amp is to get pages that load instantly everywhere so There are a couple of other solutions out there Usually amp is compared to Facebook instant articles or Apple news I also put up native apps because these are all solutions to the problem of a slow mobile web and These particular solutions Generally are focused on one platform whether it's in Facebook's pages or on Apple Apple's news feeds and these are Different solutions, but kind of to the same problem So then in October of last year Google announced the accelerated mobile pages project So people nowadays will refer to this as Google amp and the Few months later in February We first started seeing amp. So this is very new stuff. So in case you haven't been following all of the news This has only been around since February that we've been seeing amp content in Google search results And it was just a couple weeks ago that we started seeing amp content in Google news results as well So now when you go to a Google or news.google.com and you do a search You'll see a carousel and the top 14 stories or so are there and those are gonna be amp results So this is kind of what it looks like. This is just a little gif of showing or Jeff I don't want to get into that This is a moving image thingy that shows what happens when you do a search On your phone. So it's highlighting the fact that again. This is on your mobile device And you can see these little lightning bolts below those top Things that's what I mean by carousel and if you notice if you click on these you can actually slide through the results So this is amp in action If you will and the idea here again is that it loads instantly quickly That's kind of redundant. Oh well so the difference of course though with amp is that it's an open source project and I Think this is this is kind of key and part of the reason why it's become one of the more successful or more widely adopted Solutions to this problem of a slow mobile web. So they hosted on github. All the code is open source It's a patchy to license and so you can see all the code Which again different from some of the other solutions to a mobile web like an app on your phone that you have to download and so far there's over a hundred and thirty contributors to this project and Hundreds of partners. There's a full list, but you can see that already Twitter and Vimeo and and Vine and the BBC and medium and the New York Times all of these folks have already signed up and started started getting involved with this project and As a result, I do think it's probably fair at this point This like calling a Google amp is probably not the most accurate thing. It seems like you just call it the amp project but what is amp well there are three main components to us and We made this session specifically non-technical So we're gonna try and not get too technical But to give you that some of the key parts, but I will say that there's the amp HTML is one aspect There's the run time or the JavaScript library and then You could also say the the amp cache is the third component. So let me say a few words about each of these so amp HTML is a lot like regular HTML and that it loads in a any browser it in When you have say on your Drupal site, you have nodes, we know what these are you have your content So on in the metadata of the regular page that you're already serving It has this rel amp HTML and it points to the amp page So we had so node one the amp version and Drupal at least is ends with the question mark amp And then if you're looking at the the metadata of the amp node It points back to the other one So that's kind of how search engines find your amp content is you already have your regular content already exists And you just say hey search engines. I also have an amp version so most of the tags are Regular HTML tags, but there are a number of them that have special amp versions of them So the specifics for example would be you have something like an image tag But in an amp page you have amp image the same with video audio iFrame And you end up with these somewhat funny looking amp hyphen iFrame kind of things But really they end up looking a lot similar to the regular HTML components, but they're sometimes structured a little bit differently And I could also point out that the reason that they make all of these types of choices is always speed amp prioritizes speed So when you think well, why are they why are they doing it this way the answer is almost always to make it fast? That's one of the priorities of the amp the CSS is Also on that same page that has your your site so again not getting too technical But the CSS is all in line so rather than having a separate document for your CSS and your HTML It's all in the same document And not only that there is a limit to the size of the CSS you can use 50k so you can't go crazy with your CSS and an amp and They they actually will validate pages There's again, I don't want to get too technical But the the validation happens and it says if your page if the CSS part of your page is more than 50k It won't validate an amp and it won't be found by Google search engines the The other component of amp is the JavaScript so I'll read this amp HTML documents do not include any author written JavaScript nor any third-party scripts And that's right. No JavaScript So a lot of people think this is one of the craziest things about amp is that you don't write JavaScript now some of us that don't like writing JavaScript. I kind of think this is cool, but There is JavaScript with amp, but it just all comes from the amp runtime and The reason again, why would they say no JavaScript for speed Most of the time when you have third-party JavaScript libraries, they often account for significant In the realm of speed they account for a significant reason why the page is slowly slow to load Is that we're pulling in other libraries the contents jumping around in other words the web browser when it's loading the page It doesn't know ahead of time all the things that are there But by doing it this way having all the JavaScript just in one library Once you've loaded one amp page on your phone because JavaScript is always loaded down to your device Then you out then it's there and then it also because of the way the amp each HTML and the JavaScript and CSS works It knows what to load right away and then In addition to that you have this this amp cache so Google basically provides a free CDN for people that are offering up their pages in amp and you might have heard about this part So this too very fast Google once wants the web to work fast that and they provide the cash so in that carousel that we were looking at that was The cached versions of amp pages showing up in Google search results very quickly So you also in addition to having the JavaScript already there and in small files You have you have Google caching it and then you have their CDN and They only will cash your page if it validates correctly so again if you have anything wrong with an amp page It won't validate it won't show up. It won't be in the search results and All this amounts to depending on though. There's lots of different measurements for this But we can say an average of four times faster Pinterest has Implemented this and this is the this is the number that they have used Twitter's implemented this in in parts of their app and Again because it's an open-source project people are using this differently But depending on the place depending on a number of factors sometimes you could say it's 85 percent faster Sometimes you could say it's four times faster four times faster sounds cooler. So I put that one up Other others other research suggests that it used ten times less data So that is a kind of a bonus to to the people that are consuming your websites So in addition Google won't tell us specifically about how all their SEO stuff works But we know that they prefer fast pages and amp is very fast So most people believe that this has a positive effect on SEO and it seems to be the case So just a little bit about the reaction to this is that lots of publishers are interesting and I see articles with statements like this one It's only a matter of time before amp formatting becomes synonymous with publishing content for mobile devices Remember when I read that I thought wow that is that's ambitious I Don't know if that's gonna be true I don't know if we all have to decide whether that should be true or not But that's what some that's how some people are interpreting amp and Oh That is the last slide that I have So the next part of this mark is gonna talk about specifically How we implemented this in Drupal? so Wonderful introduction there about what amp is and now the question is how can you get this working with your website? how can you take advantage of the benefits that amp has to offer and So that's what we've been working on the last few months is Coming up with a solution that will work well with Drupal and so I'm gonna talk about how to do that So how does this work? When somebody comes to your website, how do they see the amp version of the page so You have a URL and it's my awesome post and it's worth noting like this is focused on articles and blog posts and that sort of Static content this isn't about shopping carts and E-commerce and things like that maybe it will be someday But this is mostly about reading content on Your phone and having that happen in a fast way So if you come to a slightly different version of the URL With a query string and amp in it then We will go and deliver the amp version of the page so what happens behind the scenes if you're kind of familiar with some things about how Drupal works is that a Content type can have different view modes You can have a teaser and a full view mode and now we have an amp view mode that That will change the way that your page displays and then we also changed behind the scenes To a different theme and we'll talk about what happens with both of those things But that allows you to provide some different styles for how your page will look when somebody's looking at the amp version of it Cool, so how do you get that working on Drupal? How do you make that a thing? So we have three parts to this We have a module and we have a theme and we have a library and they all work together to do all the amp things that you want and So amp and amp theme are both in beta stage On Drupal.org and the amp library is available on GitHub And this is a PHP library and it is available through composer so This is the module and the theme are available and work and have been tested in our feature compatible in both Drupal 8 and Drupal 7 we are developing both of them simultaneously So whether you have an existing Drupal site or you're just getting started with Drupal 8 either way You are in good hands We do require PHP 5.5. That's a requirement for the PHP library And that's really a good thing for you to be doing anyhow because Security support has stopped for anything below PHP 5.5 So we've had some questions about that, you know, why can't I run this on a server that doesn't have PHP 5.5 and That's that's the way that this works and if you're on something lower than 5.5 Check on your hosting because there could be some security concerns with that. So Great, so how do we what are all these pieces? What about the module and the theme and the library? What do each of those things do? So the amp module is What provides the view mode? Which allows you to have special field formatters that will take the fields on your content and do some little tweaking to be able to use the amp elements and Provide some different options for how those will work There's some overall configuration that you do for the site and the amp module is what sets that up and then Some of the templates some of the theming happens within the module where we're providing some alternate templates for those new amp versions of the fields and some of the components for amp some of the amp elements are already built into the One big piece of JavaScript that gets added with the amp runtime, but some of them are optional So the module will take care of loading in there's some specific script Elements for those amp provided JS. It's on the amp CDN, but we we connect those two together and Then once you get to that query string in your amp and you're on a amp based page Then it will take care of doing the switching So what about the amp theme? Why do we need a theme and a module? Well, the theme takes care of site-wide markup So your HTML template your page template your node template things that are not the field markup generally To make some additional tweaks that are necessary Because amp is very specific about the the HTML that you need to have in order for it to be validated And so we're taking care of a lot of the different tweaks that are necessary to make that work Within an amp theme is also where you will take care of doing custom styles If you want to have a custom look for your amp pages so that it will match You know in certain ways the look of the rest of your website You will want to have a custom amp theme to do that and we'll talk about how that works a little bit and The amp library is there so that it can process text fields. So Generally, this is the body Portion of your article because there's lots of things that can go on in there a lot of times There's different embeds they get put in for for blog posts and articles There may be a Facebook widget There may be a Pinterest widget all kinds of fun and exciting things can happen inside that body field And so the PHP library will go through and it will take a look at all of that and it will find things that match up and Replace it with the amp version of that content automatically Some of the field formatters that we are providing allow you a little bit more fine-grained control over how that displays But the amp library will take care of the other parts that are not as easy to manipulate and then This is an optional step We can also do a final pass after all of the HTML for the page has rendered The library can go through and do one more check through to find if anything is invalid And if it's invalid remove it because you really want to make sure that your HTML validates or all of the cool things about amp won't happen and It all the PHP library can also provide some validation feedback if you're it can go through And remove things that are invalid and if you're trying to figure out why something isn't showing up on the amp page And you want to figure out what's going on it can provide some additional Validation where you could look at an individual page and see what's going on and and get some information that might help you Figure things out and the amp library gets pulled into Drupal With from the amp module in Drupal 8. It's pulled in with a service and in Drupal 7 It's pulled in a little bit of a different way, but that's where it's coming from Cool. So how do you get that set up? Especially like with the PHP library in the Drupal side of things. What do you do to do that? So Mentioned before the PHP library comes in through composer, which if you're using Drupal 8, you're gonna be very familiar with soon enough Composer lets you pull in packages from lots of different PHP projects and combine them together to make wonderful Drupal magic a symphony of Drupal magic, you might say All right, so Drupal 8 has a thing called the auto loader and it does some really neat stuff where you can put in your PHP class as you can Put a statement at the top that says use this class and then it will automatically get loaded You don't have to do a require statement where you specifically locate where that file is located You give it the name of it and it loads it up and that works really neat for pulling in things from multiple projects Drupal 7 does not have that so composer manager is a really good tool to make that work Composer in Drupal 8 we're kind of working on changing our recommendations for that But we're probably going to be recommending that you integrate the PHP library directly with your composer JSON file for the project as a whole Drush is also a really useful tool for getting this set up Drush is great for enabling and Installing and enabling the the theme and the module you could also use Drupal console which is a new product if you're working with Drupal 8 that's also a really great tool for for doing these things But the important thing to keep in mind is you want to get the library and the theme Installed first and then after that you want to do the module because the module has a dependency set upon those Libraries and themes being set up so once you get in installed Great, you are on your way the next thing you want to do is start configuring things and so there's a configuration page for amp and From that page it'll have a list of all of your different content types that you have on your site and you can Go to there's links to go to them to enable the mute view mode for that content type So you can pick which one you don't have to have it for all of your content types You can say I've got articles and we really just want it for that content type And that's totally fine to do so you go and enable it and then afterwards is another link that will take you to the paid But the amp view mode Configuration page so then you can decide what are the fields and formatters you can have a different order from the rest of Your pages select the amp specific formatters and get all that set up The other thing that you need to do is select an amp theme the amp theme project actually comes with two parts There's the amp base theme which sets up kind of some sensible Defaults that every single amp theme will have and then there's also the example sub theme Amp yeah, right it is actually spelled like that. I'm responsible so That is an example of how you can do sub theming so that you can set up custom styles how you can get those custom styles into the inline head section of your HTML and Then if you want to have a customized version you can make your own sub theme and so on the configuration page You want to select that you want to select which sub theme that you are using So you can create your own if you want and that will take care of doing all the markup changes You need to support your styles you can put template overrides that sort of thing you can have preprocess functions and Then once you get that done then themes have blocks You have a block layout and you're gonna want to determine which things you want which blocks you want to have show up And you might want to have a more streamlined version of your page For example, maybe you don't want to have all the sidebars Maybe you just you know you have to think about whether you really want to have a menu in there because It's likely those pages will take you to a non amp version of that page And so you kind of want to think about what's the best implementation and really focus on the fact that you want to Give people a great reading experience so that they really enjoy the content and they share it with all their friends And everybody's happy and everything's wonderful Okay, so on that note ads so ads are what you know, they're an important part of the web They help pay for a lot of important things and so you can do ads with amp and it's done in a way that pages still load quickly and so right now we have integrations set up with AdSense and Double-click which at present you're configuring on the main amp configuration page We are working on doing some integrations with existing module modules out there for Drupal for AdSense and DFP so that you can do that without having to do a lot of manual configuration and So then you can get those integrated and then place those blocks into your layout for your amp theme and Analytics you want to find out what's going on with how our people are using this and so Right now there's a couple different ways to do that there's amp pixel which is basically a tracking pixel and Right now that's on our configuration page And we're looking at working on some other ways to make some more robust support for tracking pixels that can allow you to work with multiple riders and Have multiple tracking pixels if you need them And then we're also doing some integration with Google Analytics and again right now That's on the configuration page and that might change so we can integrate directly with like the Google Analytics module for example so Once you have all of that set up you want to make sure that it works so you're going to go to a page that you have this enabled on and You can do this little funky thing right there Put that in your URL and then pull up something like Chrome DevTools and go to your console you can do this in Safari 2 and The amp tool will give you some feedback and we'll say hey this thing you need to fix this thing to be amp compatible and then you can go track that down and Find the little different things that you need to improve to make that work You could also I mentioned the amp library you can use that for feedback as well So cool Those are yay you set up amp on your website you have it available now and you've got super fast Things going on so that's really nice But I've talked to people about this we've talked to people about this and there's a few concerns We've we've heard from people and so we wanted to talk about them I think it's always fair to talk about you know the pluses and concerns people have and and some people have asked You know, why are we gonna do this? We're gonna take the effort to do this and do one more thing and It's really fast The night game of Thrones premiered I got done watching it. It was a really good episode. I'm not gonna tell you anything about it And so I wanted to read a you know some people's thoughts on it So I googled that and I I was on my phone and ooh There was a nice little amp carousel at the top and I clicked and it was it's just amazing It just pulls up instantly. It's super super super super fast I could put more supers, but it's really fast and and I read the article was great and then there was like a related article link at the bottom and I went to that and it was to the non amp version of the page and That made me sad inside Because it did not load as quickly and it was kind of jumping around and things and it was not as good a reading experience I'm still a good article, but you know that first one made me really happy and the second one made me like, you know Pretty happy. So it's it matters. It creates a good experience for people And people said well, is this only about search rank is this only about getting into a top position on the Google search page is that really something that that makes me feel uncomfortable that I'm doing all this work just for that And I think it's important Matthew pointed this out It's already being used by other things Twitter has an implementation with Twitter moments I think LinkedIn did something Pinterest is doing something Feebly so more and more services are out there that are making use of amp pages so it will be more and more useful not just for search ranking and You Matthew did a great job talking about this. So I'll just mention this really quickly in con is this an open thing and Is this we all care about the open web where Drupal people tend to care about that a lot and And and I certainly understand concerns about that. This is a separate thing. This is different I love responsive web design and and how that works but I also like this because it's solving a really tricky problem which is how do we have really super fast loading websites that also can be monetized and Because that's important too like the web exists if there's if it works in a business way and The other solutions out there to this product problem I do not think are as open Apple news and Facebook instant articles are more closed than this solution and This is something that you can contribute to there is a github page You can go file an issue. You can go write some code against this You can do a PR there is a way for you to participate in this and that you can look at the source code I feel very good about that I've also had people ask is this like m dot sites Is this is this like going back in time to that and to me? I feel that this is different than that you are not on your server sniffing out the browsers and having a list of Which browsers you're going to switch over to that's in the responsibility the people who are linking to your page They can link to the amp page or not to your amp page. You're not manually switching over I think this is a thing to do in addition to responsive web design This is an additional thing you can do to make things even faster in certain contexts And I kind of like to think about it as a souped-up version of RSS, you know RSS is your same content But it's in a different format that can be consumed in a different way and that's kind of what I think amp is kind of like and so Yeah, that's That's one of the key parts of our philosophy Philosophy is that you get to use your same content on your site You are not rewriting things for amp You are not making an alternate version of your page and saving two versions of your page You have one page and we tweak some different things about the formatting But it's ultimately the same content everywhere, which is really important and then I've also had people say Well, you could be fast without amp. You could do things without amp and still be super fast You can do things and that's true But this kind of forces the decision we talked Matthew talked about the the business forces that That sometimes lead to things we need to monetize things with ads we need to have analytics in place in order to have the business side of the web work and and That drives a lot of the decisions and this is a way to provide a Sandbox way to try out some new techniques in my opinion and and force the decision If you're going to use amp and get the benefits of it Which really has a lot of benefits then we're going to put some guardrails on and that's going to force pages to load Quickly yes, there are definitely other ways that you can do this without amp But that involves figuring out how you're going to do those those business parts of the website with While retaining that speed and that's that's challenging And along with that whether this is too prescripted to say that this is the only way you can do this This is the only way you can get into that Top search carousel. There's other ways to do it There are some discussions happening about having some standardized sets of policies in place for here's the things you need to do for For having a superfast website and getting some benefits out of that maybe similar to amp and There was some discussion Tim Cadillac wrote a post about content performance policies And he's he's been talking about that and that that discussion has kind of been evolving There's been a discussion about sandbox policies with with iframes that might also set up some strict guidelines for for how that might work And that's really great There may be some things that emerge down the road and if there's some standards then amp might be an Implementation method to follow those standards. It might be hey Here's one way that you can get set up pretty easily to follow these rigorous performance standards for web pages and And that's nice, but this is something that you can do today This is available today and you don't need to wait for six months or a year or however long it might take to come to sort of Standards consensus. This is something you can get started right now. So in my opinion, I think that this is worth Trying out. I think it is worth giving this a try and because your your customers will have a immediate benefit From doing so and because there's ads and because there's analytics that are built in this you can track how this works and and if it ends up being a very beneficial thing you see additional Engagement which I think people will see I think you'll see that people will be sharing content more they'll be looking at more articles getting more ad impressions and It will be a better experience, but you'll be able to see that in the analytics And you know what if people do that and then they decide, you know, we've got to make all of our website super fast Well, hey, that's that's a cool thing too but right now you can just get started right now and Get started with amp on Drupal and wouldn't it be neat if we could see what that would look like? I think that'd be kind of neat Karen. What about maybe just right now? You could just show us how that would look all right. All right Look on the managed tab in the upper left It was it was right before and it All right So one one thing that we did is we created a website for this So we have a page at our site at amp low about calm and what we did is we And this is all blurry because I don't have the right resolution Unfortunately And I don't know how to fix it So I'll do my best If you go to amp low what calm what we've done is we've created a website that is a collection of articles about amp and ultimately We hope that it will also be some future documentation about amp and These are amp pages as well. So for instance if I go click on an article here Can you what it was doing? Huh, right arrow right arrow, but you got to be in the text box, huh? No, I'm trying to get the resolution down Yeah, it's a Mac, sorry, this was all working when I set it up the first time sorry I Can't figure out how to get back to the place where I set really resolution Was that Man Oh, there we go. There you go. There we go What's that? That work I do anything All right Okay, so if I click on a link here now now I can finally see this so here's my regular page and as you can see I've got a I've got a theme that Basically, this is the bootstrap theme and I added in a Google font because I want to illustrate that you can do things like Google fonts Even in these amp pages So here's a regular article that I've got like go to this article and I put a question mark amp at the end of it I Now get the amp version of this article and as you can see the amp version of the article also Is taking advantage of the same Google font that I was using on my main one To illustrate the fact that that I can Pick up any aspect of that site that I want to or any aspect of the design that I want to There's a bunch of different things that I can do. Whoa There we go So we talked about the fact that you you can check and see if this thing validates by adding the pound Development equals one. So if I bring up the inspector and the council and I refresh this page and Look down in the council It's still going it's just slow There we go And you can see that it says amp validation successful if if the amp validation if anything had not validated on that page It would have showed up there So I have the ability not only to create the amp pages that I want but also to check for myself whether or not they're going to validate We've built a couple other things in here We've got something called worn fix And if I put worn fix on there, let's get this out of here. Oh And it's cached so that's why it's not coming up Everything is heavily cached What's that Yeah Okay What I should have seen at the bottom of this was Some information that told me that might whether everything in my amp page passed through the amp library So as we talked about before there are several components to this so one component of this is our amp library What our amp library is doing is basically taking the page the information that's on the page now and Running it through a library when the library is basically a big find and replace So it's it's like here's all the things that amp expects or here's all the things that amp doesn't expect Transform all the things that amp doesn't expect into things amp expects or strip them out one or the other So that's what that amp library does so if I put worn fix on the end of this and I and I Clear my cash out, which I did not get done correctly yet But if I have it my page configured that way I'll get a message at the bottom that will tell me The amp's the replacement was successful or it'll say I found some unexpected thing And I wasn't able to fix it, you know give you some information about all that What's that I could do a different article couldn't I I totally could Except that what I'm thinking is I can't remember if I set the configuration up So I want to show you the configuration So we get into the back end when you set up the amp module and both the guys referred to this We've got some amp configuration So what we've done and this is early stages on this whole amp module but so what we've done is we've done a lot of global configuration and we're kind of going through the process right now of Evaluating each one of these global things to see if there's other ways that we can do it But currently what I can do is I can identify which content types Do I want to enable for amp because you won't necessarily want all your content types to display amp So you can you can decide which ones you want so if I For instance on this one I have The article enabled I can go here to configure You can see I've got the amp view mode and in the amp view mode I have a couple of four matters that you wouldn't normally see on a on a Drupal page and that's because they're provided by the amp module So I have an amp image form matter and I have an amp text form matter and there's going to be others that are going to Show up as you know as it's the more things develop The the important thing about this is if you have an image on an amp page In the amp view mode it needs to use the amp form matter Because of the regular form matter is not going to display the image the correct way same thing with text if you have text Like a body field on an amp page you need to use the amp form matter because the otherwise There's going to be stuff in that body field that shouldn't be there And that'll keep your your amp page from validating So that's one thing that I can do Go back and when I click save it's going to bring me right back here again I can also identify what amp theme am I using so I there's a there's a Amp base theme that comes with the amp theme and that's your starting point But you can create sub theme off of it and in this case I've created a sub theme called custom amp sub theme which makes it really easy to figure out what I'm doing and Basically that custom amp sub theme is doing nothing, but adding the Google fonts to the base theme It's not really doing much else besides that If you're using Google analytics and again this we we struggled with what was the best way to get Google analytics Incorporated into this so initially you would put your Google analytics ID into this field And then the theme will take care of making sure that that analytics code gets attached to all your It's all your amp pages We've talked about Doing that in some other way like hooking it into the analytics module or taking advantage of the analytics module We've actually I think we've already done this Where if you have the Google analytics module We're just going to use the the ID from that and then hide this field and the same with the AdSense and the double-click where We're adding integration with other commonly used modules But we also have some of these defaults here if you don't want to have to add a whole module, right? So there's so this area this whole configuration area is going to be an evolving area Where we figure out which things really need to be global Configuration options and which things we can maybe hook into existing modules in one way or another And then there's this thing down at the bottom and I thought I wanted to show this because I think this is interesting So this is this is related to that amp library So that's that PHP find and replace library that we use and if you want to you can There's several things that you can turn on so power user means Do you want to run your whole page you like do you want to do a one last pass of running your whole page through that amp library to see If there's any remaining stuff on that page that doesn't belong so that's what this checkbox will do We basically do our best effort to clean up the components of the page and and your theme Hopefully has only put the things on it that belong on there But there are you know various modules could hook things in there's lots of different ways that other Things could end up on your page So this checkbox will provide that a one last pass. It's one more pass which takes just a little bit of time but it's more Gives you a little more control over whether or not your page ended up clean And then we've got two options We've got an option to add an HTML comment with some statistics on the page So like especially when you're during the process of development You can see how much is it slowing down the page like I'm doing that extra pass How much did it slow the page down to do that extra pass? Do I really need to do it? Do I really want to do it and then some debugging stuff you can send some debugging Messages to the logs and just want to know we did you know some testing with that and it is very fast It is very fast. Yeah. Yeah, the the library I don't know if people are familiar with query path the library is built on query path Which has got a Drupal history as well. So well it does a pretty good job But as any of you know, I mean the original thing was to do like rejax and Rejax is I want to assure everyone we are not doing rejax on HTML. Yeah, that is not that's not who is not involved here Yeah But in general, I mean in general sort of Architecturally speaking the module provides some configuration and field formatters and things about that nature What the library is doing is taking the body field and doing its best to convert Whatever kind of crazy stuff you want to throw in there to amp HTML. So that's kind of the basic Approach to how how your page is handled that you're we Wanted to make it as turnkey as possible so that you can install the module and not really have to do too much On this page and then just have it work with what you have once you've configured your view mode But other than that We know that people I mean we work with clients so we know that people put lots of stuff in the body field So the the library we made is a separate piece So there are already other people using that library and the idea is we're just converting HTML to amp HTML Well, let's do this with PHP in a way that others can use as well I do I just want to the last I we want to turn this over for questions But one last thing I just wanted to say is the amp low about calm We hope would be a URL that you can refer to if this is a subject that you're interested in We're we're going to try and use this as a place where we keep up with what's going on in this whole area So let's let's do open it up for questions And if you have questions you need to use the microphone so that it gets into the recording One other point I'm going to be bold and say this is we hope to have a 1.0 release of this module Within a month or so But that's that's what we're that's we're aiming towards and we will be actively developing this module for the next couple months I can say that with with certainty Hey guys, hey guys Do you have any idea how long the caches live in? Google and how to if and whether or not you can't bust them if you need to That's a good question. That's a really excellent question I have never researched that I wish I could give you an answer, but I can't sorry time we talk with them We'll we'll ask I can't try and get back in touch with you. Yeah, so first of all, thank you for for your work on this module It's terrific. Absolutely terrific. I have two questions actually one of the things I noticed on the amp page If you'd switch back over to the amp page on Is that it becomes very linear you lose your navigation at least in this exam Well, that's because I did it there ago. There's the Warren fixed man message by the way Yeah, so this is by this is deliberate at this point the amp theme has no sidebars, right? It's it is a header a body and a footer. That's it. That's all that's in it That's because most of the time these pages are showing up in mobile devices So we're keeping that super simple, but there is no priest, you know, that's not a that's not a requirement So in the theme actually I was going to show you that let's show you what the amp What's in the thing and you can see that that is just what we put in there and you can put other things in there, right? When we looked at other existing Implementations on sites that are using amp like the Washington Post I think was one example a lot of them had that kind of single column feel some of them has some related articles on the bottom And that's certainly something You could do when one of the advantages of this is a Drupal theme is it works just like every other Drupal theme You put whatever you want to in there. Okay, terrific. It's up to you my second question I have a client who has a very popular site and it's 80% mobile I'm the visitors are 80% on mobile devices. Would it make sense just to? Switch the whole thing over to amp or is that am I misunderstanding what amp is and why you would use it? At this point no Because really what no it would not make sense to do that because amp is not a replacement for responsive design It's not a replacement for your website. It's really just a different way to serve your site To right now it has a specific use case of the the Google and caching But right now we we don't have like we didn't build into the module away to detect We don't have this yet. I don't know if we will but a way to say oh this person's on a mobile device Let's show him the amp page We certainly could but that's not how it's working at this point It's more about here is a way that other providers can take your content and cash it in and use it How they want but still show your content in the way you want it to be shown So my question is related to what you just said which is on my home page How do I determine whether to add the question mark amp to a URL? Well, that's so amp the way I think about amp is more like it's a content type for the web So making a home page an amp page at this point doesn't predict even even a normal page If a visitor comes in on a mobile device, I'd like to serve Links to the articles so amp pages so the amp project the way that the amp project describes how People should set this up with their website is not with that sort of browser sniffing you it like I said It's kind of like RSS you're providing an alternate format that other things that are out there can consume And it's not necessarily your website's Responsibility to switch people over to that alternate format. It's other Services that are out there that link to articles and blog posts and that sort of thing can choose to serve that up, but that's that's not How amp the amp project describes how how you get people to there with sweat browsers switching Has there been any attempt to do you remember remember back in the old days when? RSS was the in thing There would be a little RSS icon that would appear at the top of the web browser window To indicate to the user that there's an RSS version available as there been any attempt to get browser makers to integrate that using it Yeah, this is a new thing. It's really like been out for a few months So that that's an interesting idea and that's might something that might happen down the road right now That is not remember asking that question as well when we had our meetings with Google And I think their initial idea was the only ones that would care would be the bots So this was all about getting the metadata so the bots could find it and And they didn't feel I don't think they felt like there was any reason why a user would want to pick that page But that doesn't mean It isn't worth exploring that idea the people that are working on this project So far have been shown to be very open to solving real problems that people have and that's exactly the kind of thing That I mean we could create an issue in the amp HTML project on github and say this is something we think might be good I don't know if that would be good, but I know that's not where the project is going right now Okay, and then How does amp deal with rich pages with lots of images if you have an article which you know It's multiple paragraphs plus images. How does it deal with that? They have to go through this process every every image on the page needs to comply with the amp standard So it has to be converted one way or another if you have images that are in the The content area then the amp library takes care of converting those over to amp image And if you have an image field that works right matter for that, right? Yep I think we probably need to get out of here three three more minutes So a few more questions here on your implementation you require the query string for amp Do you have any intention of making that a configuration thinking like the guardians instance? They use amp dot and I imagine that has a lot to do with SEO tracking analytics tracking things like that and You know the query string pride doesn't do quite as good of a job as separating those for the analytics team Do you have any intention on making that configurable? We've already switched it once For performance reasons to being a query string Slash amp we started out with slash which is what wordpress is using yeah, but automatic and Google one uses slash amp. So the issue is that that means creating an alias for Every single page which if you've got a large if I mean this is geared towards publishers that likely have Lots and lots of content and there's a really big performance impact from Creating and maintaining all of those aliases as part of this the the query string Smart people that really know these things Jumped in and suggested we go this route and it's been working pretty well This has to do with how Drupal works. So if we have slash amp at the end. It's a different URL So that meant that when you went to enable the content type We work with publishers who have tens of thousands of pieces of content We'd have to go and somehow configure or decide how many of those we want to make amp pages And we were creating aliases and it was just ridiculous. So by making it a Parameter it just works without having to use any aliases. So it's kind of a droopy Lee thing It also works much better with Drupal 8 and how how Drupal 8 does other related things with parameters Okay, they're there see if we did look to see what other people were doing And it's it seems to be divided in terms of whether they're doing slashes or query strings or whatever It's it's all which is sometimes involved with bootstrap and you only get 50k of CSS and so you'd have to do a very limited bootstrap build. I don't know if you could get it down to 50k So, yep, I think they've got yeah, that's good. They've got another session coming in Okay, I've been deleting the block the body element and then adding content and summary separate as Fields so does the text format of work on content block or as only works on the body It can work on any text field any text. Yeah All right. Thanks everybody. Thank you Take it one more to do anything like it Yes, there is an amp gallery element we haven't implemented it yet I'm not sure if we will or not. It's not on our list right now That's right. So there's an amp gallery element. You could maybe do something to be used to you know Sure Yeah So you want to do that with composer and composer will take Yeah It depends on how Yeah, I mean you'd have to run composer manager What you would need to do would be Right now No, this one's mine Oh based on some Because then I don't have to go through the body


If you are interested in teleprompters and in particular the Desvue T3, then this video is for you because I've got a bit of an unboxing to do. Hello and welcome to Take One Tech, my name's Alec. And in this video, we're gonna be doing an unboxing of the Desvue T3 teleprompter. So just before we go on, this is what the box looks like. And more importantly, this is what the teleprompter looks like. It's sort of plastic teleprompter that sits over the top of your camera lens, and then you can attach either an iPad or an iPhone or any other tablet or phone for that matter. But I'm actually going to do a bit of a MacGyver job and mount something else as my screen, but we'll get onto that a little bit later. So before we do get into the actual unboxing, there are a couple of reasons why people use teleprompters. All those, I suppose three actually. The first one is for teleprompting. That is what they're designed for, which is having text scrolling on the screen as a news reader would, for example, for people working in TV to be able to read text off the screen, which is in front of the camera lens so that as you're reading, it still appears that you're looking into the camera lens, because you are. And that means that you can read your script out without seeming like you're looking down at your script or looking somewhere else on the computer screen. Now for me, I don't really do that because as you may have gathered, all of these ums and urs are entirely unscripted. So I don't do any sort of scripted videos and things like that. Even for videos that I do for work-related videos that do have a sort of overall flow to them and things like that, and that may have some bullet points that I need to hit, I still don't ever sort of read off a full script. So I don't need it for that role, but a lot of people may do. So this is for you if you are one of those people. But also some people use it when they're making videos to have actually the output of the video itself be on the screen so that they're looking sort of at themself while they are making their videos, which I can see why people would do that. It means that you can obviously see what the viewer will be seeing and especially if you're doing screen sharing and things like that, then maybe it does make more sense that you want to be looking at the camera whilst also looking at the output of the screen that you're sharing. So there is that as well. But one of the major benefits of using a teleprompter is just in meetings. And we've all been doing a lot more of those of late, haven't we? Lots more Zoom meetings, teams meetings and things like that. And what you find is that you're generally looking at somebody who's looking slightly away from the camera because they're probably looking down at your picture. You're looking down at their picture. Maybe there's multiple people in the meeting. And so there's lots of meetings where it looks kind of like this. This is what people see. And they don't have that actual eye contact. There isn't people looking back out at them. And so having a teleprompter means that you can have your meeting on the teleprompter and then you can be looking at anybody in the meeting and even though your eyes may appear to be moving out slightly, you're still essentially looking into the lens of the camera. And so I think that you can't beat a bit of eye contact. And I often try and sort of fake this by just looking at the camera but then you sort of miss actually looking at the people who are in the meeting as well. So this is the primary reason for me to get one of these. So with that said, let's actually get on with it, shall we, rather than me telling you all about teleprompters because I'm guessing if you have gotten interested in this video then you know what they're for. So let me stop waffling and get into the good part which is the unboxing. So it's called the Desvue and I shall obviously leave a link in the description. It's $119 on Amazon. So I'll leave the link for that as well. And yeah, it's the Desvue T3 and this has replaced funnily enough the Desvue T2. So there's a few changes to it, namely the hood is more sort of square now whereas the T2 had a bit more of a sort of angular design to it. So let's open it up. And the first thing you do is you get your instruction manual and one side is in Chinese and the other side is in English. So we'll come to that afterwards. You've got a block, a box rather here that pulls out that says teleprompter remote. And we'll come to that a little bit later actually because that is quite interesting if you're gonna be using this as a teleprompter with your iPhone or iOS device. Next in the box we have here the actual teleprompter itself. So if I take that out, this is the size of the unit and you've got a cover over the actual glass part of it here. And then if I tilt it like this you can hopefully see how it works. You've got this slide here that is covering and basically I'll show you shortly. This just slots over the end of your camera. So we'll come to that a little bit later. So for now I'll just pop the cover back on. So it seems quite good that it does have a cover so that you don't get it all dusty. And my camera will focus for a moment. That is the sort of main body of it. But then we've also got this box and that is basically all there is in the main box. So in this little box here we have got a number of different rings. Now these are basically to fit onto different camera sizes. Now I say it's in unboxing. I have actually already unboxed it and re-boxed it. Because I did take it all out just to make sure I could see how everything all goes together. And these different rings they'll say on them this is 82 millimeter. You've got another one here for 72 millimeter and so on and lots of different size lenses that they can fit onto. And these just screw into your lens. And then the idea is that this part then, if I just remove this, this part then just simply slides onto your camera. So the camera is there. You push it up against the camera and then it slots down. And now that is fully attached to your lens. So it doesn't add a huge amount of weight actually. So it's not that heavy. A couple of other things to note about the unit itself is it's got two cold shoe attachments on it. Which is an upgrade from what was on the T2 that didn't have any cold shoe attachments. And then underneath we've also got three sort of standard screw fittings. So you can attach this to a tripod as well. And why would you do that rather than hang it off the front of your phone? Well, the fact is the front of your camera rather given away the answer there. The fact is you can also use this with a mobile phone because they do have some mounting attachments for that. So let's have a little dig in and I'll just take this lens off here for now. And let's have a little look at what else is in the box. Got a little cleaning cloth to clean the glass. And then we've got these various different foam inserts. And these are basically, I don't know if you can see, there's different cutouts, different shapes and sizes. And these are all different shapes and sizes for different camera lenses. So different camera lens arrangements. So maybe a two-up on a Samsung. You've got the sort of square shape of the iPhone and some other mobiles that maybe I'm not familiar with. And then this one has got some other phone inserts for other cameras as well. So this is basically what it is. It's a series of different sort of ways to mount on two different lenses. But then in here, we've also got these two mounts as well. Now these two mounts are for, first of all, I mentioned that you could fit a phone onto the back of it. So if you were to use this with a phone, then what you would do is you would take this off from here and then this would slip, he says. This would slip through here and you can screw it on. So this would allow you to basically attach a, I've got an old phone lying around somewhere. This one will do. You can basically, you could have a phone camera mounted to the top of it and then you've got some adjustment for position. And then obviously you would just put inside the correct foam insert there out of those ones that I just showed you wherever I've left them. And so then you would be able to use the teleprompter with your camera. And so that is why it's quite handy that it's got the actual screw attachments to attach it to a tripod on the bottom because that means you can mount your phone and the teleprompter together on a single tripod. So that is quite a good little attachment for if you want to use it with a mobile device, but I'll just take this off and hope I don't drop all the pieces all over the floor. And then I'll come back to this part because this part is where you would attach your tablet or your phone. Now, I know what you're thinking. That looks a little bit too small to attach a tablet or a tablet to at least. Well, cunningly, it flips out like that by pressing this little button. And then you've also got this one here. So it does actually extend really quite large and you could have an iPad in there. So, and it feels really sturdy actually. And it's got a little ratchet to close it. And then you've also got an attachment here if you want to attach a light or a mic or something like that on there as well. So as I say, it does really feel quite sturdy. You've got a lock to lock it in place as well if you want to stretch this out and tighten this lock. Then you can tighten this up. And then with that one flicked out like that, you can see it is sort of in place like that. So it makes it easy to actually just put this, pull this one out to drop your iPad in there. So yeah, if I unscrew that, that'll flick back in and this one will close back up. So whether you're using a phone or a tablet, it does feel quite sturdy. And this fits into this hole at the bottom here. And it's got to sort of shelf here. So it's giving a little bit of extra support in there as well. But basically you just unscrew this from here. Now, as I say, I'm going to be using a Lilliput A7 with this on the advice of Mr. Keith Pelzer. And this fits just in here. And so I've got a feeling I'm going to have to do a bit of a modification job to actually get the A7 to fit, but not to worry. I'm all up for a bit of MacGyvering to get this thing to work. Now, having said that, what I need to do as well is I think just wind this down a little bit. There we go. I was trying to screw it through there, but this will come to it in a minute. But this is adjustable so that you can adjust the height because obviously the further away from the screen, your phone or tablet or whatever it is screen you've got down here, the further away from the glass rather it is, then that will change how big it looks on the reflection of it on the glass itself. So we fit this, so we're knocking the mic stand. We fit this underneath here. It's got a little screw hole. So we screw this screw in here like this. There we go. So that is now fixed in place. And now, if I was to be using this phone that I had just down here as my actual teleprompter, then that would just slot in there like that. Now, I've just dropped something on the floor. Nevermind, I'll get that later. In fact, that's interesting. I picked the wrong phone here really because this is the smallest phone I own, which is the one that I usually use as my secondary stream deck. It's an older 5XS. So I'll grab another one. And that one actually does not fit in. It's a bit too small. So it's designed for slightly bigger phones than that. So that phone will fit into there like that. And now you're gonna say, well, what do you do for teleprompting software? Well, fortunately, the thing comes with a link to download their own software. And actually, it also comes with this remote. So if I open the remote up, the remote pairs with any iPhone, Samsung, whatever tablet. And this allows you, it's got a sort of little, it actually looks a bit more like a sort of gaming remote in many ways, because it's got a X, A, X, Y, A, B controls and almost like a little joy pad there. And then a little trigger on the end. But it pairs with your phone. And then this allows you to scroll the text. So the actual app itself, the app itself, if I just open it up. Now, there's one thing about this, by the way. You may find it, it's called the Desvue. And yet it's also, they seem to be called the best view as well. So I think they were a bit undecided in some versions of this logo. This is actually a B. It just is supposed to be read as a B and then ES. And then they've got a little cross on a V to make it best view. And in fact, the app has got this same logo, but it has, it's called best view. So I think they're undecided at the moment about their exact branding. But anyway, so the app itself comes like this and it does the flipping as well. I should have put a bit more text on this really. But there you go. Next is sort of back to front and upside down. So when you see it on there, you see it the correct way around. So the actual build quality of this, considering the price of it, which is $120, feels pretty good to me. And I think it's good that you get all of these extra attachments so that it will easily fit onto any camera. And I was considering something quite a lot larger than this. I was actually considering one of the glide gears. So the glide gear is another sort of popular one that a lot of people will talk about for teleprompters. And it is, yeah, really it's a lot bigger than this. And the other thing about that one is it is, takes a lot more sort of getting in and out of the camera so that it has a separate mount underneath it and the camera fits onto that. And then you have the hood that goes over it. Whereas this thing, what's really, really good about this is the way it just sort of slides off. So it means that when you don't actually want it on the camera, you can still leave the ring on, but then you can just simply slide it off. And the whole thing does feel very solid. And obviously, when you're not using it, there is a sort of blanking plate to stop you getting the dust on it. And then you've also got this cover on the front as well. So I think all in all, it is a very solid product, really, and I'm really pleased with it. I just can't wait to get my Lilyput A7 and get it all hooked up, which is unfortunately not coming until tomorrow, I think. But I thought, well, I'll just get this video out. Then I'll be doing a review of the Lilyput as well. And then I'll also do a video to show you exactly how I've hacked them all together. And yeah, once again, thanks to Keith Pelzer for the recommendation of this because it saved me a lot of money actually because the glide gear is significantly more expensive. And it would have been really total overkill for what I want, which at the end of the day is just to be able to maintain eye contact when I'm speaking with anybody either on a live stream or on a meeting or whatever it may be. So that is the Desvue T3. And I'm really pleased with it so far. And I shall let you know how I get on as I use it obviously. I'll give you a bit of feedback after I've been using it for a while. And yeah, look out for those other videos that will be coming up shortly as well. So I hope you have found that useful. And if you've got any sort of teleprompter questions or anything that you're doing with teleprompters or any advice, I'd love to hear it as well because I am relatively new to them. So it'd be interesting to hear other people's opinions. So do feel free to leave those in the comments down below. And while you're down there, don't forget to like and subscribe to the channel and also share it with anybody else who may find this interesting as well. I'll leave a link to the other videos as soon as I've done them in the description to this. But as I say, I've not quite made those yet. So I'll have to go back in and do it after. So in the meantime, check out some of these other videos that are coming up next. And I look forward to seeing you again soon. Have a great day.