 He's not gonna put in how he's coded, because it sucks so much. Speaker, on this thing, are the dogs still standing on there? Do you want to know where this one is? Oh, can you? Can you close the door up there so we don't get denuded? Silence and don't be my voice, this is gonna be good. Okay, so, let's get this rolling. We're going to talk to a late theme today at all the fun and good things have been coming to Google since 2017 down to late. This is me, this is my Christmas dinner. I have some of the company called Eat Well. I have called my shelf-stakers with me this week. There's a book that we can do even with that. I normally work with Tecmon to solve things, and I'm also known as the Angry Themer. I do think about changing my name to the Happy Themer. Well, it doesn't have to seem like rock and roll spirit to it, so I'm keeping that. The Angry Themer is a problem I have in Google, about theming and doing good stuff. And I'm also a fancy maintainer, but we're gonna talk about that a little later. This is my personal handle that I think we should follow if you want to know the truth about everything that's good in life, which means people theming. We're moving this into a really, really bad 80s metal, and me coming with my six-year-old brother. So, I'm also, by the way, this is my new name, Life in Decay. Well, people thought that that Decay was actually standing for the Themer. It's actually the dip killer, which has been my mission for the last several years in there. And Google is to remove every dip I could find into the core and rip it out. And it happens if you play this, I'm extremely proud about it. I only showed it about two years. If you have comments on this as well, use the hashtag Google Trick, which has been the hashtag that us in the Google front-end group have been using for the last couple of years. We're still thinking about renaming it to something else. And if so, if anybody have a better name for Google Trick, like Google's front-end, or Google's e-mail, or Google's something else, please let us know because we're too dumb to figure it out ourselves. We have had an op-ron reaching meetings for the last month. So it's clear that we don't have the intelligence to fix that. Anyways, because of that, use Google Trick. So, Chris, exactly, I can take them on later on. And, by the way, if you have questions, come from here afterwards and ask them, or I'm going to be down in the registration booth at 4. And just think with core maintenance in a customer, 4-ish, we're going to stand down there and help out. Because in the Google Console, we can talk up to evening at 4. I can talk about that 24-7. All day and at night at some bar somewhere. Let me just go back to this thing called the Stockholm Syndrome. Was it the thing that the Google community had been under for a project years ago? Stockholm Syndrome is nothing to do with the Swedish or IKEA. Stockholm Syndrome is all about what happens when you have been captured and you suddenly go from being feeling that you've been trapped by a capture to sympathize with them, which was happened in Google 7. Because, you know, Google 7 lined up like this, suddenly turned out to be a good thing in a lot of people's minds. This was okay. You know, the divisions that we had was a feature, because you have all the classes that you can use. What else would you want to do? There were 5,000 lines of PHP, 7.8 code was perfectly okay. There's no reason to remove that, because now you can fix everything. And the classroom, you know, having a ton of classes on each element was also perfectly okay, because now you could identify it. Nobody stood up and asked the question, is this actually the thing we want? Or until at some point someone was a little bit angry about it and we figured out that we need to fix this and that we can fix it and do away. What we actually did was we removed the old theme engine and we put in this new theme engine called TRIP, which basically means that the theme functions are now there, completely there. They are actually just there. Back in November 2015, we got the last commitment where we actually removed the last theme function. So now everything is a template file instead of a function. Basically everything is template files. So in about a year, when you've been doing like three or four or two great themes, you're going to hit me and Cartoon and Diary and the rest of the TRIP team because before you had just one big file that's kind of consistent, now instead you have 200 files instead and you're going to be like, why did you create this monster? Well, let's fix that in about two years. Until then, this is how it is. Because the whole idea is that one of the themes is the control of everything that is the markup in the CSS. That's kind of where we're at. And the reason for that is, well, the reason for that is basically that this is what we're doing in the team. We make this stuff that the back end comes with, make it pretty. So before we kind of move on from this, we need to do a little exercise. And that is ongoing peer-to-peer simple. And there's only one way of doing that. We all close your eyes. I can see you all, so you need to close your eyes. And I'll think about all the good things you did in CSS. All the things that made so much sense. All the things that will not haunt you in the night. Can you feel it? Can you feel the good things you did in the themes? Good. Now, open up your eyes. Never again. It is done. All right, so that's what we're doing to TRIP and TRIP. And what that actually is. Well, TRIP is a modern, I love this word modern, because modern just means that it's kind of newish. So in about three years when you do it in December, it's like, no, it's really old and boring now. We want something new. We want to have no CSS or something like that. It's blah, blah, blah, blah, blah, blah, blah. Well, right now it's modern. It's built by disability guys. And it's used by other systems. We're not doing our own thing. We can actually use TRIP in other systems. This is pretty sweet. And it's easy to learn. How easy is it to learn? Well, here's what you need to learn. Up here, this is available. This is how to do a comment. And this is all kind of the functionalities. And that's it. It's pretty much everything you need. This is the syntax you're going to work with. So another thing you can do, like, up here we had that back in 2007 days, how are you going to go into a variable? Or do you now have to use these dots instead? So you can, like, go into a variable. Some places you need to do it like this with the hashtag, but all of that you can read in the document later on. When you want to do something fancy to a variable, you want to do it like this. So you put in this pipe, and then you have a function that can do something to this variable, and then you can pass in different parameters to it. And that's it. So let's say I want to shape my username, and I want to make it uppercase. They bang uppercase. Come on. As you can see, this is not uppercase. It's only uppercase. And this is just me being an idiot, but I did my slides. That's still a lot of difference. But that's all good. This is the principle behind that. We even have translate built into it. So up here, I have my home city, Copenhagen, and with the pipe and the T, that was translated. Now, this is a string that's translatable, which, you know, gate or, and the group which we need to have for. You can even do that with all the functions that we have. This is the function instead. But trans, and then you can put in all of your data values and everything, and then you can translate that. So now also the way we invite in translatable elements is the way you can see what you're looking at. We also got another level of kind of control. So if I want to test on something, it's pretty much like reading English. If the person is to hold the key, you know, if you lay it else, it's not an awesome wiring. It's just the basic if else commands. Another thing you can do inside of your template file is to create a variable as you need it. And we're going to come back to that a little bit later and we're going to support a lot of how we're putting classes. But basically what we do is you use a command called set. Set some variable name and give it a value. And the reason for this is that now inside of the template you can begin to put in logic. And I now know because English developers in the room they're going to be like, logic in the template, we can't have that. Because the themeer is not well enough to handle that. Well, sorry guys, we can. And we're going to use that. We're going to use Joe how he can use that. But basically it's straight and from the straight it goes into PSP and it gets all kinds of magic stuff. Larry Darfield can explain to you what that he does and then it goes to the side. So treat is not slow. The reason for that is like all the templates get compiled just like so we don't get any panic on that. All right. So let's start on looking at a base theme. So when you're going to go for a base side how are we going to do that? Well basically there's a different kind of theme to do. I want to look at it. So first of all we're going to do a call. And I think Google said, you know, Google call gave you everything. And right off the bat, all these mail, all this stuff has got classes and stuff. And you can do stuff with it. Now on Google 8, we're going to do the same thing. Google 8 is going to give you the same amount of data and stuff but we're going to pass all that through this new theme called Classy. And Classy is where all your classes are defined. So if you want to change anything on that that's where you're going to do that. And that's where we're going to create all this. But this also means that you can actually walk around this if you don't like what Google does out of the box or around what we've done. So things in Google 8 is basically built up like this. So we have call out here. Then we have this theme called stable. Then we have Classy. And then that's 7 and 5. What stable is, stable is actually a copy of Google 8 call. So what we can do now is the stable is this is this main Google 8 call, 8.0 call. What we can do now on Google calls is that we can begin to develop that on 8.1, 8.7, 8.3. We can begin to do pretty new functionality that's stable in Classy or always stay the same. So we won't destroy any of the things that we work on when we line these views. They're just going to stay the same amount at the same time from now. So if you're relying on that, but Google call can still improve. And this is a huge change compared to how it used to be in Google 7 where we couldn't do anything about it. And then you have 7 and 5. Which, by the way, is going to be their own special charge. So we'll go through this then. All right, so what do stable do? Stable do this, nothing. Just give you a couple of tips. Maybe a session tag. No classes unless they're extremely necessary for Google. Then they're going to have a .js as previous one. Classy is going to have all the fancy stuff that you maybe like, maybe don't like. But now there's things that you can work on. Because one of the things we like doing this process in Google 8 was that up to 25% of themas want to have to complete nothing to work out from. They just want to build everything to the stress. That is what they want to do. But about 75% really like basic markup and basic classes that just open up your Google site and have something to thema and put out some CSS and make that deadline a bit. So that's why we have classy there. So class is where the old markup is. Seventh and body or based things as you come with is now based on being internal. And internal means that we can basically Google 8 will do to a new version of it both seventh and body will be able to change. So if you want to do a base theme your theme want to be based on seventh and body. Please do a copy of seventh and body put that into your own theme folder and then do a base theme on that. Because else seventh and body will change during the next couple of years. So we can actually make it better. So we don't explosion in time as we've been in Google 7. Because in Google 7 we never in a sport year period, we couldn't make body responsible. Why? Because people were relying on it. We can do that now. So we're kind of trying to set up a base theme in a way that we know that we already failed. So make sure that we can actually move around. So basically it's when you're starting your theme you go like, okay, how's my base theme going to be? I'm going to use stable I'm going to use classic. That all depends on how kind of your style you want. You can also just go like, you know what? Okay, I'm just going to write my complete own. That's going to rock it. I'm going to be able to direct it into Google Core and I'm going to have the base theme false. Which means that you're going to get this stuff to come directly to Google Core and we do not know what that's going to be. And when you come mining in about two years because something changed that's going to be your own headache. So just so you all know that. But it's there so you can build that. I'm going to be one of the dumb folks who's going to do that. But that's a whole other thing. So basically, just remember there's a stable. It's where like, this is the stable too big. You can close one up, rely on that. Don't rely on that. But that's where the problem is. It's going to be classic. It's your basic class as Google Seven was. And then seven and body. Just use them. Don't use them as your base theme. If you want to use them as your base theme cover them into your own folder and work from there. That way you're not going to get headache later on. All right. Bang. So another thing when Google Exemplates as you're going to see here is like when you get into them and do it on this file, this is our page theme. Things have been reorganized a lot. But all good. Jumped in there. Let's just try to define how we can do your base theme. So a base theme is basically you have your theme folder. You put in your info file, then your demo file. You rename it. Then you create your own page. That's going to be that. Okay. They will all. By the way, we have MSC already. I'm here. Lewis is here as well, but he's not the seventh maintainer anymore. So we're going to do this. But we actually have three or four like core maintainers at the conference. And we have a core committer as well. So if you're really interested in figuring out what's going on, it's actually a pretty good spot to figure that out. You have to put it in the room. So let's set up a new theme because that's going to be a little more. So where do we live now? Well, actually what you see is going to live is now in your info, a slash eaves, slash a remain. Compared to it back in Google seven times, where you have to put in the size, slash, slash, whatever. Now it has just gone directly without anybody laughing at you. And I know this is like, this is a big step. I know it sounds strange, but if you've never worked with Google before, this would like to make a logical sense, but this is actually, or to me this makes a lot of sense. So you have this, your themes or have your models directly out of the room. You just drop in here. Your theme is going to have a bunch of concrete files that you need to understand the kind of ease to get actually. First of all is the info file. Your info file is where you have the theme configuration and where you call in some of the elements of some CSS and some javas. So basically you have your basic info up here. Yeah, libraries are going to come to life in a second. And then you have like commands to remove CSS that might not come from a module somewhere. And then you have that power defined in different reasons. So in this one, this is actually the style sheet removes the command we have inside the info file. And inside of that you can then go and say, hey, this is a style sheet coming somewhere from a module that you include. You want to remove that. This is where you can remove them one by one. There's not building a kill switch yet. We have been talking about it. So you can actually just do a command and just like remove that thing through the portal. Yes. But it requires a little bit of review before we do that. But this is the way you're going to remove the CSS file that comes from somewhere that you don't want to have because maybe it's interfering with you somehow. And by the way, before you go like you're not seeing those, I do have all the slides online. There's going to be a link at the very last. So you can get all this info as well. And the idea is it's a new thing to play, at least in the gaming perspective. So a library is made just where you add your CSS and JavaScript. And the reason that we're using libraries is that modules is using them as well. I mean, I don't want to use it the same way. And libraries work like this. So I have my info file and I call in my library from the info file. I say, OK, use this library. And inside of this library you can have CSS and JavaScript. The idea behind this is say you built a slider. You want to build that into your theme. You basically just define that in and then you can call these files. So you only can call in that library when you have to need it. So you can separate the stuff up. And how you do this, well, here's my library. I'm calling in, up here, libraries. Ufosil is my, Ufosil is very much as much of my info files as you can get. It's a big tree that we add. Anyways, global. And here's my name for global. And here I define it. This is my version of it. Here's my CSS. Here's my CSS theme file. Here I call in my style. Here's my CSS. Here's my JavaScript. And here's dependencies down here. All right. If you look at this in that delay a little bit more. So nothing A4. Nothing C4. That's my JavaScript. And this is dependency. This one is interesting. This is a dependency that tells me, okay, theme. Now if I form this library, now you should use jfile. That means if you don't have to have jfile inside of your theme and you don't define this, you're missing 32 kilos of awesome JavaScript. But if you don't use jfile, you don't have to add it. So we're actually separating jfile away from the theme. You can do an issue. Actually, one of all, hey, I want to use jfile instead of two or instead of one for eight. You can just jump that in. Inside of libraries, we can do another thing as well. We can do override with other libraries. And we can remove other libraries that's coming in. So if you want to define library somewhere and your theme want to do something with it, it's saying the message is or some kind of layout or the kind of whatever it could be. You can actually do a theme, explain to people directly, don't do this. And the reason we're putting all these things in is we don't all have people to run about inside of PHP files, try to figure out how to do this. So as you may know, it is all kind of impossible for the themeer to work with this. CSS is going to open up a little bit different. We're using SNAP's terminology. If you know what SNAP is, no, okay. SNAP is a very good code about it, done by a creative group, have a name for it. Basically, it's an idea of how to organize your CSS. And the way you're doing it, you have three components. And base is a folder where you have all the default classes for body tag, for a div, for a thing, for whatever it could be, all of these things. Then you have layouts. Layout is kind of like where you define all of how your layout takes a design to know how your columns is. Then you have a component. The component could be a striper, or it could be an article at comments. So all these things you define into the little box. Then you have state. A state would be if a menu is active, if it's active, it's not active, or it could be, and then you have theme. Theme would be different colors, different elements. The whole idea is to separate your CSS files up into simple little elements. And that makes it way easier further down the road. So you have to figure out what's going on. I'm going to put the link to that later on. It's one of the core principles we're building our CSS on. So that's the basic CSS. There were great points because I showed the response to websites. What do you do now from your file? We have a great points file. And inside of that you define you have to see this. The problem is this is a screenshot. Anyway, the PDF sport when you download is really sweet and it's also documented. The idea is inside of the file you define your big points. You define different sizes for it. And those big points you can use now inside of your the modules inside of the site. So that's how it is. So we don't have you report, we define that in a theme and that's actually a really sweet theme because now your theme defines your image sizes for that theme which in my mind makes a lot of sense so we don't have to separate it's built into your theme. If you go into panic mode right now why don't you remove all this awesome stuff to do with PSP or we haven't removed the file PSP template is still there it's just called about theme so you can still go in and build and do all such crazy things in PSP as you want to or one of our dreams is to make the system as easy as possible for people to work with and don't have to constantly jump in and having to work in a PSP layer because jumping from constructing the CSS objects to jumping into PSP and going from design to PSP constantly is kind of a mindset that fall out for people so we really want to make sure that that doesn't happen. So let's say you want to add or do something to it you can still do that I know that long way how do you talk to speakers that's not a really good talk no not just going to talk tomorrow about it at the same time here right same room no not just having a talk tomorrow way more about what we have to do like programming stuff and just like to make stuff clear so a new tube is going to kind of blow your mind to so you're going to change your settings a little bit and the reason you're going to change the setting is that now we can begin to figure out what actually goes on is like 2.18 and you want to download develop and the reason you want to download develop is what develop gives you a lot of opportunities a lot of the things you can do and develop also get kids hit so what you're going to do is if you use draw to and just draw to enable kids there's a hole like right down here draw a hole and just there's a hole how to get all this stuff up you can also just download develop but that's not the section next thing you want to do disable css-cast jubilee comes with css-cast enable from the get go which drives me personally patch it because every time I start a new site I throw in my theme I reload my page and nothing happens well because the css is enabled so just disable that and let's look at the dv button how that works so I'm in my services spot with that now inside my service spot what I'm going to do here is I'm going to change my css to false that's the css to be enabled and you'll see the normal page this is like google 8 out of the box I was told by Americans that this man is so bad that everybody should know it's a terrible game and a lot of us hate it anyways the point here is that it puts out something called I don't want to have that in my theme so how do I do that well what you can do and how you will call how we think class is we have three kind of levels of it we have essential classes essential classes something you yourself and it needs to do something it can happen it's visible as a class we do to test to stop it's visible so we can make accessibility work it could be a problem then you have modules modules can add class too they can be available attributes you can add class and this is what the back name is module does add class and it goes class and class includes all kinds of other stuff that they want to put in this also comes so this is all all about shame of all the classes coming in so to remove them instead of doing add class you attribute stuff remove and it's out I didn't even go further and say so that is the whole so attributes remove this class label back voila the thing when we talk about class one thing you don't want to remove is and every time you write anything with CSS class for something create these previews and the reason for this is first of all so you can remember what you did six months ago second of all you're also telling everybody else this is used by JavaScript how is this used by JavaScript you should not use this for adding any colors anything else this is purely to have the JavaScript to be able to identify something and if you want to have so this is JS dashboard that's meant for JavaScript and then if you want to just get the same name for it now it's also an essential to you for the as you do in these classes clean class as I said is cleaning up the class making sure that whatever name you put in it the variable comes out consistent it's actually useful so attributes you can remove a class you can add a class you can even set up attributes and here I'm actually adding an ID to an element so you can go right ID to add a class rush so now from your team you can control all these wonderful attributes so I picked the field attributes actually in particular so we can do something with them so I hope you remember this I was talking about a little bit before this is our field how we built this we always want to make sure that people can work with whatever without so this is this is how we built out people's basic class and stuff so that field small fields always have field class they have a field item on it as well you see here behind the label and this is how class you built it so and this is just this is how you when you're looking at looking at a field why does this build up this way more because a field field on the school a field on the school on the school item so kind of a decent class to me changing a field item from doing the same thing this is where I thought I should be building up so this is like war theory on it so a little bit on a little demo of how to try to do this on a field so I'm going to expect this and this is my basic markup coming out you know I don't need these things I don't need to realise them I'm just going to add a few classes on it so you can see here I'm changing them to an honourable this is that millennial there's also just a demo that I'm actually not completely lying alright so now we have the honour on this instead and here's here's the one of the good things when you record your videos and you kind of crop it the wrong way this is still my my epic failure I'm doing stuff further up you're going to see that in a second just keeping stuff up there for me I'm removing this field so the classes don't even the classes in there alright so now I have to completely make it back up there are a lot of groups without destroying it so let's add some classes into it and you could call that stuff so to add classes I should add jobs so as she says I need to add in the library and the library works like this so basically the library is just a way of adding in a bunch of CSS and adding in the job should and maybe ensure that you know move it around I'm adding in a file here called Barcelona to my library and inside of my fields what I'm doing now is I'm actually doing inside of here doing an attached library Barcelona and this field so if I have one specific template that needs this specific CSS but only when that's loaded I can actually just call that directly from my e-files I don't have to do that I'm going to pre-process for somewhere else so Barcelona is now so it's adding in classes as you can see I've done some really advanced CSS here I have my a line with something gray on it I have a first and the last I have a color red I have a color yellow and this is what illustrates the purpose of it of course so here I first do a set policy I do a fancy little thing I do a cycle through it so what the cycle would mean that it you would kind of impart in it just go like a little struggle so if I want to do an e-class I can add it here as you can see I'm just going to add in my colors as I have the yellow, the yellow, the red and I do it on a loop index so these are like small little tricks you can do to it to help you work on it the next thing I'm doing here I'm saying okay I'm in the first loop add in this color if I'm on the last loop add in the last class so if you need e-classes based on where you are this is kind of way of iterating on each of these elements so or even better here is if I'm on the third element of this list and I want to give it a specific color I can do that just by simple counts alright so let's say I want to change some stuff also here when I'm adding the specific elements so when I'm on the third element I actually want to add in the new model it shouldn't be the same thing what I'm doing here is you see the loop in this loop the index is actually where you count so that's just just to count on it I can pretty much do whatever I want to with it so first of all I have my else command else down here in the bottom but that tells me like if the first part is not if it's not 8 just do what you've done always but else let's do something else this is a change everything on it let's do it each one instead and write something and yes this is just an example just to see what we can do but sometimes it's personal so 2 blades coming up when it's ready and this is what you can do now to make the inside of it something without having to ask 2 blade anything for it at all and the car thread nuts no excitement at all none none for whatsoever so I gave this talk back in a back camp in San Francisco and I said okay why is nobody going crazy about this dancing on the table and I was once just saying but as do I as you could but more than this just makes sense and I was kind of like oh and this is the way I figured it out that I was handed down by the Stockholm syndrome that I've been for so many years it's so excited that I could do this directly out of the champagne without having to like walk around and reconfiguring all kinds of stuff it was just working as I want to make it work so the secret holy grail is that you do a full loop inside of your field you have four items and items you count on the length of the element if it's the first loop you want to do something last loop if it's a certain number you got to count into it this is the second element of my loop or you can do a reverse count so I want to have the third last element of this whole list of stuff and it should be I have to spark a pony car you can add that or I just have my people if you have this full loop in you can do whatever you want with your mind you want to add in CSS stuff there it has library the name library just call that in so now from your template file you can control all the elements that you want pretty cool okay cool this will be useful okay okay cool good another cool thing we're putting is a trick block it's not a block it's a trick block well the idea behind the trick block is let's say you have this piece of template inside of the piece of template you want to be able to change elements around anyone got a timer alright oh shit I'm almost out of time okay so the piece of template let's say that you want to put something in on the front page how can you do that or with a trick block we can do that a trick block is the way you define the block inside of the template and inside of the template now you can inject all the templates it's like super powerful templates which work like this let me show you a pretty sample of this a little video I did a long time ago so here's my my page what I'm doing here is let's see I'm defining my block first I'm calling it a trick block so that we don't get confused with trick blocks we did have to discuss if we should rename it to something else acting trick will should be named blocks to boxes or something else but we figured out that would be like a six year thought-finding issue queue I'm just calling this a trick block instead and also makes sense so if you go into my trick up I mean chasing in the ass what a block is this will make sense to you so here I'm making a block that's called lonely case awesome and what it did have is just half a green glass on it so let's look at this page bang here's the trick block this is the other block that's living inside of the template and if you go and look at it see here it is here's the sneaky pump I'll show you how to overwrite this well if you do that I'm going to create a new file now page fonts and inside of this page so I'm doing the exact command and extend cells trick system that hey this page is an extension to a specific point I'm coming over my whole template or my template by block here and I'm going to put some fancy text into it and I'm going to change the class to blue so we can see it's working so I'm going to so then extend and then you need to hold this as my C name slash template for the template this and say it's not the truth and we change that to a shortcut there's a shortcut for it now we can talk about that anyway now if they use my system page on this page I'm not a page anymore I'm a trick block I'm extending somewhere else so let me do a read on this ooh sexy and now I have my page so you don't need to have eight different page templates anymore if you just want to put in like a specific panel on the front page or something else you have the exact same markup all over you can just put in these little blocks and it doesn't only work on a page you can do that you can even do a straight block on a block template and then you have another block template it can go completely in lots of that I wouldn't recommend it because your brain is going to burn out actually but this is how a straight block works so basically I want to add a hero element on my page and I can extend on that page you know and be done with it that's how it works and you can do it on the field whatever you want alright few last things so another thing we put in which I think is really awesome is new screenshots so screenshots can now actually take a field type so if you want to put a field type inside of a screenshot you can do that so you can actually have a real good page looking like this you can also do something like that actually would make sense like three different ways of how your team looks and different browsers or whatever but when I figured this out by coincidence because somebody put it in actually and I was like and I had it if finally yes I can I am an evil human being and it was a great thing to figure that out another thing like menus and pages page development for every female in the world is the most weird thing when you are looking at the site for your developers and they go like yes I want to have this really really awesome page and then she would look like this and you are just going to look into that you are trying to explain to your project manager why this will take you three work days because pages in Google 7 was how to put it not so good to see that is the polite version of it menus was a pain in the ass as well so this is a menu how to and menus just one template file it's no more three functions and four different templates just one file but all of them yes it's a little bit complicated but you can actually see what goes on the menu.html the page that was like every fun for everybody I know it has a lot of markup in we maybe should fix this and make on one if we can still get it in there is two weeks about three weeks something like that anyways your page just does one big file one of the principles we really try to push into Google 8 but we would rather have all the data presented directly into the theme so you can work with it and instead of trying to hide it away because there was this concept way back for many years in the world of Google that developers shouldn't be exposed to all these advanced elements and kind of the world of themes was like where did these just get all the stuff so I can make it work in these 25,000 different devices and screen sizes and stuff so we changed that as well if you want to dig into this you're like how and where do you start I started a project called vanilla and vanilla is my learn all the things theme of course that's the most important thing but it's on Google projects vanilla I of course have not yet put anything up there but it's more than vanilla we can actually also download my new theme from my own website but all the code is in there and it's just a different template where I'm trying to figure out how to make stuff work because another thing to say that so now when we just came up with Google later we were also excited but a lot of the stuff we put into Google came in one by one we never got the chance to check these steps back and looking at the whole system in our whole how stuff actually works so we constantly finding these things that it's not making sense also because the group of people who did that was at the end of the day very small group 10 to 20 people so you don't know what in the picture so what we really hope to see when you guys begin to work with Google later is actually giving us feedback to how it works and how stuff works out also by the way I haven't talked about all these little snippets I showed you they're all in there as well just in a big part so it's different so I can remember them as well so for those of you guys who actually didn't listen obviously there were whole points that happened in Dubai IE IE IE678 is not supported by Dubai by the way Microsoft dropped support by IE89 and 10 two months ago so that's one of the good things we came up with Microsoft that used to be a GML5 it says smack and pain paste we used modern practices we moved all the I.D.s and the 7th theme is responsive we have several I.D. speakers we chill 90% of the business because all the stuff we get on the field day-to-day dependency we move that as well state-of-the-art is doing now so you can build each way you want to theme your stuff so they can just build on them and as the last thing I actually want to anybody here working through it can you stand up and you can stream your products and make the last two three years officially seven years for me so I love you guys a lot thank you also if you are excited by this you should actually join us as you can see this is me this is Joel I'm in Copenhagen he's over in Canada all of the other sides but this is how we work scratching our head every first day we have a meeting you can either just listen then and just see what we're talking about this week and this will be everything from what we want to do what's working what's not working who's going to which conference where are we going to go where are we going to go it's five o'clock Copenhagen since the European time I think it's 11 o'clock here because five hours 22 it's 10 because I can't count I just fixed that so at 10 o'clock Thursday nights here in Mumbai join us on the the weekend trip or you can just listen in in the room the room for like 10 people and then we also have the trip channel a sea channel where we are having discussions or just join the also join the docs and that is where we try to hand these up because one thing we've got all this stuff into the call that's not enough we want to keep on improving and as you saw us as one of the first things as a show we've got that Google and we can work on through a coal mark a mark film as it comes out through a dust up and we have two scenes that are making sure that we can do all this stuff because staple has separated that up and that's why we have to stay with people there so and we really need feedback is it 9.30? it's 9.30 I use pieces the world is big and I'm a small little man I don't understand alright let me just change this again yeah there's a state in the US it's only more like summer time anyways come and join us if by the way by any chance you should be in Europe in May you should actually come and join us at the Funding United Conference the Funding United has been a thing we've done for like five years that is a content only conference developers are very well known we would like more speakers at them and laugh at them because that's what they have been doing to us for years oh yeah it's payback time no it's a very focused funded discussion this is actually three years ago four years ago and after that now it's actually where we can start all this having the tickets already sold out we have refining pretty awesome speakers so it's everything funded based on our group so there's also going to be a lot of talk about SPG and so forth so think about showing that I do not know yet if we're going to video or podcast somehow I hope that we can do that because it's kind of a European only event at this point but we are thinking about figuring that out somehow but we need to find a video camera and how to do that but we're going to fill that out questions use Twitter use Google trick throw questions at us we get safely excited mad excited when people go like oh I'm using this and how does it actually work because we have been in the trenches for three years and just working around with it and don't know how people even get to this so use that and questions and comments and feedback please fill them at me at my that's kind of my primary place where communicate to stuff out and try to get stuff working and yes I've used my last three years of my life to get this stuff done I used pretty much since 2007 I think when I came into Google the first time they said they were called nah I didn't clean this mark up in six months and eight years later I was still like how do we do this stuff so every time my ego gets too big and I think I'm the most awesome dude in the world I kind of look back on my very first Google account I was like okay maybe you're an idiot and need to listen to other people and that's one of the great things about being a good community because eight years ago I was the only one who identified myself as a designer because I've been in this business now for 20 years 20 years how many of you is there any 20 years old in this room yeah you're not 20 years old you did rock concert before I was even born yeah yeah now it's just crazy for me to figure out there's actually people at sessions I'm giving that was home before I did my first mark up that's that's kind of freaking me out I was getting a little bit of gray hair and like because I don't know that what's happened there alright so anyways with all that my name is Morten D. K. I am actually the happy theme and thank you all for attending my session and thank you for making me welcome to the show by the way here's the slides to the business back 10-15 it's the same slide set