 So, if you do have more people out in the hallway who need to learn how beautiful the world will be after 2Blade comes out, yes there is. Okay, but I'm just going to start because I'll see you guys and then we're going to get lunch. You're going to be running away. So, those of you who don't know me, my full name is Morten Birch Hyde-Ockerson, which is completely impossible for anybody outside of Denmark or Minnesota to pronounce. So what I figured out over the years is what I've been using instead as Morten DK, and DK you probably know stands for Denmark, it's not completely true. One of the secret identities I have besides being a badass motherfucker is also being the unknown diff killer, which is what DK actually stands for. And this is also maybe a little bit of my Viking heritage, where we don't use polite ways of doing stuff, especially not in Drupal, where we just go in and we pretty much take or remove what we want, at least in Drupal 8. But my last name is actually Birch, so you can actually call me son of a Birch without me getting any kind of offended. Those of you who might going to miss it because R&T is really close by each other on the keyboard, I'm perfectly fine with that. I've done that multiple times and that's always fun when you come to a conference and that's what your name tag says. Anyways, back in 2006 when Drupal 4.70 came out I was at my first Drupal con in Brussels. I thought that was six years ago because I can't count because I'm a Thema. It's actually nine years ago and what I thought at that point was, you know what, this seems system, it's going to take me six months to clean this shit up. And most he looks at me right now like, dude, you're an idiot. Most was there as well. He should have told, somebody should have told me what it actually takes. And this also is, it's been a long process for what we're up to now, nine years later and if John Alvin is in the room, no, he's not. I will say I'm very sorry, John, that I accused you for being responsible for everything that's wrong with Drupal 7, but it is your fault because at that point you were the only teamer working on Drupal 7, so we can assign blame. This also means that I now have to do a thing because Drupal 8 theming have been a lot of way of me being yelling for about five years about what was wrong actually before Drupal 7 came out. So I will claim responsibility for everything that's wrong. So you can start them all in decay blaming if you want to do that. If that's going to make you feel better, I will say just right now that my name is not on any maintainers list. So there's no actual proof of anything and you need to be able to actually handle it to see what kind of stuff I've put into core and not put into core. I'm just to put it right. Normally my sessions have a tendency to go 60 minutes. So we might not going to get time for questions. If we don't do that, treat them out with the hashtag Drupal Trick because then we can actually find them afterwards or just treat me directly and ask me. I'm also going to do another an introduction down at the tag one proof later today at 2.15. Come down there and ask me questions or hit me up at the bar or wherever you want to just if you don't get time for questions. When I'm in the States, I always know that I kind of need to say it all right away. I am sorry if I offend somebody. Today in the theming sessions, I'm starting out the session. The last session is going to be done by two Canadians. So they're going to be sorry for all the things I've said. So we can get that done. But being a dain, I'm actually not only a dain. I'm from Copenhagen and it's actually true in Danish. Please is not a word we have. I kid you not. But instead of talking about Copenhagen, I will go up a little bit north, long way from the most awesome place in the world, Copenhagen, and to a place where there's only evilness. And that is where the Swedes live. Where the Swedes live is a thing about Stockholm syndrome. Stockholm syndrome in this case is not the Swedish chef or Ikea. Stockholm syndrome is what Themers have been caught up in for years in Google 7. And what is Stockholm syndrome then? Well, that is when a Themers says, this is perfectly OK. That is when Davidis becomes to be it's a feature. That is when 5,000 lines of PHP template code is completely OK because then we can really figure out what's going on. When Klausus becomes a feature, that is yet another Stockholm syndrome. When we think this is actually the way we want to build. And for that, I say, art no fucking more. We need to stop that shit. And that's the thing we have been doing for Google 8. What we're doing here is we are introducing a new theme engine. Say hello to Twig and goodbye PHP template. Close the door behind you. Fuck off. And while we're doing this, and this is no disrespect to the developers who's busting ass for years between PHP template because here's the problem. None of us who were front-enders were in the process at this time. That was the biggest mistake we did as front-enders, not stepping up and being responsible and actually expecting good developers to do our job. That we have changed this time. Well, also we had a couple of good developers who were tired of hearing people like me, not bitching, birching and moaning. So here's the most beautiful thing we're doing in Twig. Theme functions are now dead. And what does this mean? Well, that means that everything now is in a template file instead. So now you can actually find your stuff. Actually what we're doing here is we're putting a theme in control of the markup on the CSS where it should be because that's what we do. So pretty much what we changed theming to be done in Google 8 is done by themers, for themers, and no fucking developers because I don't know any developers who thinks it's fun to debug five different kind of little fun devices like these for four weeks with CSS stuff. It's kind of nice to just do your development instead. So how does this look, this wonderful new thing? Well, Twig is actually really, really simple, so it's going to go really quick through this, and you will understand it all. This is how output get out. You have a foo with some kind of variable where you get your data out. And this is how you're on common stuff. That's how you get your data out. A beautiful thing you can do, see, this is kind of in Google 7, the first line. You try to figure out where your data comes from. And you've got undefined or zero or something else. It can be a little bit hard for us to figure out where it comes from, what we can do in Twig instead. We drill through it, so we don't care if it's an object or it's an array. You can just go through that variable and figure out what comes out. Even better, what we can do on these variables when we put them out, we can also do magic stuff with them. Do little functions. So I want to make this extra pretty. So using the pipe over here, I can kind of like manipulate my data somehow. We also have controls. So let's say the person is me, they'll buy him a drink. That's kind of like the simple controls we have in the templates. The good thing about this is we can take a lot of the small things that we used to do in a pre-process. And I kind of move that over to the templates where this could actually be. So Twig by itself doesn't change the way the themes are done or thought in Google 4, 5, 6, and 7. The biggest thing we have changed is actually the way that the markup gets generated. And for that, we have a new theme called Classy. So in Google 7, it pretty much went like this. Call spit something out. And you have the HTML, and it shares it in your class. It just comes out here. And then you can try to interfere with it. You can try to overwrite it. That we have changed now. So we have introduced a new base theme in Google called Classy. It went a little bit too fast, I saw that. So what Classy does is Google sends the data then into the theme Classy that then generates all the stuff that then sends, give you the output. That means that when you set up your new theme, this is how kind of it works now, Google sends the bars into Classy, and Classy then provides all the markups in the CSS that we have as standard. So that both 7 and body right now is then getting the data from there. So when I have my theme, and I kind of want to figure out what am I going to do here. I can either choose to say, well, you know what? I don't want to have anything of these standard classes, standard markup that Google puts out. I'm just going to ignore that. Or I'm going to say, well, you know what? I'm pretty satisfied with what Google gives me, because I don't need to change everything. It's not everybody who's like a maniac like me who likes to sit and fiddle with new class themes and structures and stuff. You just want to get your stuff done. So the thing we want to make sure is that we can do both things. So basically what you do when you start your theme out, is say, well, do I want to have Google's base markup? If I don't want to have that, I don't define a base theme, because then you don't get anything. You're just going to get a couple of empty divs, a couple of divs with data bin. And we might even going to remove all these divs. And I've heard earlier on that there's been a slide already that says you can put all the divs in Google aid that you want. I have the proof of that. And yes, you can. You can just copy those classes and put all the crap in you want. I don't care what you do in your theme. But I can get a nice little plate to work on. If you then define your base theme as being classy, you're going to get the default markup that both seven and body works on. And just to show you a really quick how it looks now. So in call, we have our themes. We have these four different themes. We have all our templates. They're all, you see, there's a lot of them, 110 templates at this point. We have grouped them up in different elements. We have all the forms in one folder. We have layout, control your page, your note. All navigation elements is as well as templates. Views is there as well, and so forth. So you actually have access to all your templates. So Classy from the get go has this ton of different folders that we're trying to put the data into and try to group them logically. If anybody want to help us out, test this, not just a bunch of us discussing it. It would be nice, but we can look at that later on. So one of the ideas behind this is by having Classy as the place where we put all our data in, what we can do then is actually future proof ourselves. Let's see we figure out in 2017 that all the stuff we done now was dumb. And the chance for that is really, really high. So in Google 8.5413, we figure out that this is like we did it wrong. So we can actually ship Google 8.5413 with a new base theme called to Classy that then has the new markup that we actually need to do something. This is just a thought example of what you can do, but this is kind of the idea. So in Google 8.5 we're going to have, we've changed the way we do in class names. We're using them as a name system. If you really hate that, what you do then is just clone all the templates, and you do your BIMSOX theme. And you can then rename everything without breaking anything. That's the idea. So the first thing you want to do when you start up a new theme is you want to be very sure that you have defined the base theme. I do think it was wonderful when we got the issues of errors in the theme layer that there was no classes or no markup to work with when you didn't define a base theme. It made me happy because that's what I want. But what we figured out is kind of an understanding issue that people need to understand that you need to define a base theme. And whoever says, I don't use a base theme, you always use the base theme. We just didn't tell you. So let's try to set up this theme here. And there's a good amount of files. First of all, themes now lives out in your root folder slash themes, which I do know is complete madness. Because why would you put your theme there where it makes logical sense? When it's so good inside slash all slash default slash something, something, something. So it's now moved out here. So let's say that I actually want to kill off my class theme. I go in here, I have a theme here called root Brazil because I have my Viking stuff going on. And I have a ton of different files. I'm going to have four configuration files that we're going to look into. So one of the things you can actually do when you start up your theme, which can be a little sneaky one, if you want to have access to all the templates, and you don't want to think about what you're about, you'll jump into Clangy, copy out all the templates. And just drop them all in your new theme. See here? And when you do that, remove Clangy as your base theme and done. Now you have complete control over your markup in Drupal. Let me just say that again. Now you have complete control over your markup in Drupal. It's way out drinking last night. I mean, this has kind of been the wet dream for me for like at least 10 years, nine years, sorry. So what we have in our theme folder here, we have CSS, images, JavaScript, our templates, and then we have these four files. And let's just run through these four files. The info file is just in Drupal 7's info file. You have your basic info where you put in your name, it's the theme, and so forth. Then you have these libraries, and we're going to come into these libraries. That's where you add JavaScript and CSS files. You have CSS files you can remove from the theme directly. So we don't use to have used evil tricks as the fuck off environment in Drupal 7. It's actually built in now as a future. And then we have the regions definition. This is your info file. So let's go through quickly the wonders of removing CSS files. Here we have all the CSS files that get loaded normally in a very, very small Drupal 8 site. You can see that I really worked on the theme right here. What you do is you go in and you add this line of beautiful codes that says style sheet remove. Style sheet remove will then, by each file you tell it directly to remove, will actually remove that file. You have to put in the whole path for it. So if you just say style sheet remove styles, for example, you would have a ton of different themes or modules that would have that CSS file. So you'd be very specific what kind of CSS files you're going to remove. And voila. Now we have only loading the CSS files we want to. So this is built in directly as a feature. There's a little thing here. You see the add class. That refers over to the classy theme. Or else you have to give it a whole long name for where it's actually living. That's simply to make sure we don't accidentally or break the stuff. Libraries got my brain to not work so well the first time. They're like, well, I don't need a library. I'm just adding CSS and JavaScript files. Well, Drupal modules in Drupal 8 use libraries to add CSS and JavaScript files. So it kind of makes sense that we use the same technology. I know I have a, I like to pick a fight with developers. I don't have to fight with them. It could be nice, like a different sunset and happy life together. So let's try to do things the same way. So a library is actually pretty simple. In your info file, you define what kind of libraries you want to add to your theme. So here I add a library called global. So over in my library's file, what I do here is I define my CSS files. If you just clear my cache here, you can see they're coming up right there. And they even have a little media query on. No worries, you're going to see that as a normal file. So what I do here is in my info file, I define my global library. I give it that same name global, a version, the CSS files, and JavaScript down here. JavaScript thing is actually pretty sweet. It's not all of us who always want to use, let's see if we want to play. Come here. Here we go. So with JavaScript, we have always had jQuery smashed into Google Core. So what if you really don't want to use jQuery, or you want to use something else, or you just want to use all JavaScript, because you're like a vanilla kind of developer. You can add or remove that. What you need to do now on Google from the Grip Go, you need to set a dependency up on jQuery that, OK, my theme, JavaScript is depending on jQuery, so I have to add that in. So if you look at my whole library file, my name, I have my CSS files. If you want to add media, queries directly, and you do it over here, you have the JavaScript files that you want to add in. And if you have dependencies on something that you need, you put that in as well there. This is how you define all your CSS files. It's just getting your mind into understanding it's called a library. And me as being a dain and all that is spelling like shit in Danish and learning to spell libraries is a pain in the ass. I would kind of like to put in a path, as you say, we call it lip instead, but that's probably going to be a bike shit for three weeks. I'm not going to do that with my life again. Another thing we have put directly into call now is like the whole responsive images. Yes, future proven something, something, boss word. The thing is, we don't have, in Google 7, there's a module that did that. It had a nice UI for it. One of the discussions we have had is like, how many nice UI do we want to have for Steamers? Or do we actually just want to have goddamn control over directly from our theme? Yes, we want to have goddamn fucking control over directly from our themes, because I'm not going to sit for a week and click, click, click, click, click and try to save a file somewhere and do that stuff. No, it's built directly into a breakpoint file that's also going to live in your theme. And it's the same kind of idea. What it does, because you have so much other to go through, it defines your elements. And then when you go and you set up your responsive themes, you can now add this in. It took me a little while to remember that use the label, because else, it's kind of going to say something else. And it waits also pretty sweet, actually. So I have my small, medium, and large, so you can kind of wait the way you want to have it, so it makes sense when you're going to set up your responsive images. Then you have the theme file. So those of you who really want to do a fuckton of preprocess, you still have that option. We did not remove that. You can still destroy your theme and drive me nuts. So that is future proven. The thing is that sometimes you want to have that control. What we didn't want to do with the theme layer in Drupal 8, we didn't want to remove all of the fine-grained control we have, but we would take 80% to 90% of the stock we did on a daily basis and put that out on the template files. Here's actually the three lines of PHP that will be in my session here today. Let's say I want to add this very specific library on my maintenance page. I can do that in a preprocess. I can attach that library. And then in my library file, I'm defining that as well. And that's how you can do that. That was all of the PHP. Let's get away from that. That's evil, what? So finding your template files in Drupal 7 was fun. There was something about guessing a class name, looking at that, go searching for that class name, wait till full moon, ask for your first form to be sacrificed, and then you might want to get the file name. It's probably going to be wrong. What we have done in Drupal 8 instead is wonderful. This is probably the sweetest things I've ever been put into Drupal. And I know that means a lot. In your service file, what you do is you go in here and you say, trick debock to true. And what trick debock to true will do is this. Here's my normal source code. Good old Drupal, right? Let's figure out what it is called. Let me just go up and clear my cache now after I set service debock to true. Dun, dun, dun, dun, dun, boom. All right. So a ton of comments came in here. So what are they doing? Well, they're actually telling us where all the data comes from. And even better, it's giving us hook suggestions for this. Exactly. So this is the thing you're going to get out now. So what does this do? Well, first of all, it gives you file name suggestions. So if you think about a theme hook suggestion in Drupal 7, it's the same thing here. You just have all the file names directly defined for you here. The real sweet thing is this little x also tells you what file is actually being used right now. And here's the real goodie thing. We even have the paths where the template comes from. So now you're not going to look like an idiot for 20 minutes because you're looking for this file. You actually know where the files come from. So if a good old true mode we had in Drupal 7 is kind of out, we are using another thing called kint instead. My installation kind of exploded while I was installing kints. So I kind of ripped this screenshot out this morning because I used an old version of Devel and an older version of Josh at the same time. And when you're working it here, that's kind of a very bad combination. And most down here, he's not here like I told you to. But what you do if you want to get data, figure out, OK, what's inside of this variable? You do a kint and then the variable name and then it will give you these kind of nice little drops of all the data. And you get all of the data. So when you want to debug sites, old default services, go in there, fix that, download Devel module, and do kint on your variables. That's how you can kind of drill into your variables and figure out what's actually there. Now with this, let's look into a little bit of layouts in our templates because we don't have layout controls at all in Jubil 8 at this point. No, you can actually just do that in your markup. Do we really want to do all of our layouts in markup as front-end developers? Yes, we do. Exactly, I'm like, yes. Somebody very deep voice over here said, yes. So here is my template, and this is my no HTML templates. Up here, I have some class stuff. We're going to come to that a little bit later on. And that is god damn sexy, by the way. Then down here, what I'm doing here is I'm kind of splitting my stuff up. The first thing I want to do is I'm kind of splitting the content and removing elements from my content. And then I can print them out on other spaces. So what without does is you have your variable and then you go without and then something. So that could be a field name. So let's say for this conceptual idea, this is my dummy for my article. I don't have my content here. I'm going to have an image here. I'm going to have my tags over here. That's how my stuff should look. Oh, thank you, Browse, for telling me that my Java is not updated. So here's the pseudo code of how the trick template would look. Content here, and then you have different variables down here. So how do we split them up? We use without. Content without and then the image. Then we can print the content image out over here. So we just move this stuff around and we can keep doing this stuff. So we also want to move the tags. We do the same thing. Do content without, image without tags. So now we'll just print out whatever is left. Here's the text. Let's say that later on, three months later in the process, we figure out we need a new field, and we're going to print that out. In Drupal 7, if you did this kind of tricks, we didn't have the without. What would happen was a developer would call you up and yell at you because why did you only print out the specific text field? Now we can kind of work the same way as a formwork. So you just add in, you remove the stuff you don't want to have out. You want to split out, and then you can move it around. So in the markup, it would look like this. Content without, links, field underscore image, field underscore tags. These are the names for the two fields in your article. And then if I want to print it out, I don't do content, but field image. Remember that dot notation thing? How you can draw in, so content.fieldname would then print out this. This is actually printing out that template, so we can grab that template later on and we can do magic stuff with that. And I also do my content field tags afterwards. That's kind of how we split everything up. So in my real template, what it would look like is up here is my field trends, label is over here, my content over here, my field image is over here. And if we put data in later on, it's not going to be an issue. So with this kind of control, we can actually now begin to build the templates that we want without destroying, kind of forgetting about new templates. So the developers can still do their stuff and you can split your stuff up and be very specific on what you want to do. So let's just look into a quick thing on the field so I can actually work on that. So now I've split up my stuff, that's all good. But what I really want to do is I want to do something like this on my tags. I want to add an icon in, and it needs to be like, if the tag name is shoe, add in the shoe, if it's iced, add in ice cream, if it's skate, add in a skateboard. Kind of the concept here. So in my note template file, what I'm doing is, I'm just doing printing my content field tags. To overwrite that, what you do is you go in and look at your source code and it goes like, here's all the templates, fair enough. I'm going to grab this template and then I'm going to do something like this. Well, I do a for loop. One of the things you're going to do all the time in Drupal 8, which is you're going to do these for loops. You're going to take your data, you loop through that, and then you grab whatever you want. And there's like different controls. You can say on the first loop and the second loop and the loop number 42, make it pink, or whatever, you can like have different control of that. What I'm doing here is I'm drilling through it. I'm skipping the item content, the UL, item content title. Item content title, again, as the title thing. So you can see here my icon's right, sneaky as fuck. And then I put in also the title here. I'm waiting for Kotza to fix these pound UL. When are you going to be done with that Kotza? Never. It's kind of an issue, because there's something with what's the technical explanation for it. Yeah, basically, so if we don't do, we can't just like, it kind of destroys a little bit. So this is kind of the way you have to drill in right now. We've been talking about this for a year and a half, but that's just how it is. Still, this is just how I separate my stuff up. So what it's actually going to end up doing for me is this kind of model. And this is all it takes. I do a for loop, give it my elements, print them out, and done. To me, this is beginning to look like how I actually want to theme my stuff. I don't have any durable stuff inside of this. And by the way, I still keep all the attributes and things. So we're going to look at that in a second when we get to the classes. And by the way, if anybody got completely lost, you know, just shout or run up to the microphone and say, Morten, can you like slow down a little bit because my mind is melting with all of this awesome. Well, speed up a little bit. Are you using that thing we call sarcasm? Oh, we don't do that where I'm come from. You have to go to Sweden to understand that. All right, so now we have figured out where our data comes from. We have our templates. We can do all this awesome stuff. One of the things that always pissed me off in Google was this idea of here's all your 54 classes wrapped into like a fuck ton of dips because you need that. What I really like is just having one class name when I need my class name. So how do we do that without breaking Google? In Google seven, you know, everything just came down. Here's your class names. You can do a preprocess. You can try to write it in template file. Maybe a theme function or do as I once did, regular expressions. Because that's a thing you want to put in your theme, by the way. That is just future proving yourself for work for the next six years. So in Google eight, what we do instead is you know, call those out all these variables. And then in classic, as I said, hey, are you a front page? Well, if you're at the front page, I can do something like, you know, actually put out these class names. Okay, let's take a look at that. So here's my notes and play file. And here up is my variable that says set classes. I set two classes on this because I need tags because I used that with my definition. And then I kind of want to have the field naming just for the fun of it. And then as you saw in my last template, then I'm printing all of this stuff out, fair enough. So up here on my nav, I do attributes.addclass and classes. The reason we do this, .attributes, is that the module still want to put data in. And maybe a module actually want to add a class name in because it needs that for some reason. Which I might have a slight opinion upon, but I'm going to keep that out for today. And who believes that? So add classes, what I do is set classes. I set my two names. And then I do in my diff or my nav or my tag, I do attributes add classes. And then what I get out is, you know, my classes. Very, very kind of simple. What we're doing this attributes thing is, let's say that we have the quick edit. Quick edit is a really sweet thing in double eight. Where you can like quickly edit your stuff. We don't want to remove that. We don't want to destroy what a module puts off. But I want to be able to like control the class names in Google. So what we can do here is by me using the attributes and then add my classes, it's going to add the classes. Also if there's existing classes coming in. And that's all good. Let's say a module can add a class. We can also remove classes. Evil module puts out, you know, a very wrong class. It's called red. We want to remove that. Well, then we go into the attributes and do remove class, red, and then we're only going to get the blue class out. So these are kind of like little controls you have in your template files. So in each of your template files, what you're actually going to see normally is like a definition of like the first three lines of all the classes that gets generated. And there you can control the classes. So let's say that you add in a CSS library from somewhere. You go to GitHub and you find this awesome new CSS library that makes everything pretty. And they're using a class name that's also you've been used by Drupal somewhere and you want to change that. You can then like begin to, you can overwrite what Drupal does out of the box really easy. So you don't have to maintain your own version of that, say, foodstrap or whatever it can be. So to sum up this in a little bit more like a simple, like graphical way, we have core will provide classes that is essential for Drupal to work like is visible, invisible or what it can be. Then we're going to have your modules can as well provide a module in. So if you want to do this with your PHP, you can still add this in. So you have a need for class. You can add it in still, we're not going to kill you. And then your theme can do the same thing, also add the classes. So all of this get printed out to become this string of classes. Let's say that I then want to remove classes. Well, then I do attributes remove from the module and that's going to remove them again. So we have to control directly on each class name from your template level. So you can go in that way and clean stuff up. And that's kind of how everything's going to how the class control works now in Drupal. A little side note on the classes as well as JavaScript. So Drupal has by many, many years used classes as a thing to do JavaScript operations on. And that's both good and bad. I for one might have destroyed views multiple times cause I just remove all the classes out of use. When you do that, it's kind of like the AJAX navigation doesn't work anymore. Oops, I had a maybe a slight amount of clients who got a little bit irritated on me because it's kind of like, and these are the things that you don't think about when you're sitting in CSS and you just wanna work. You have no idea if a class is used somewhere. So one of the things we have in our documentation now as well is we need to prefix your JavaScript with a JS dash and then the class name. Actually the thing we really wanna see is if I have a class named foo, if I wanna use that, then add that class in again. So you have JS dash foo and then you have foo. So my foo, I can style up on that. I can give it pretty colors. I can do whatever I want in my CSS. And then the JavaScript can then do what I want. It's still a process we have through. We have like seven patches, something from getting this completely, almost completely done. It is like nine years of JavaScript we're trying to clean up and separate. So it's a little bit hard, but it's one of the things where we know that this is a thing where a lot of us, we kind of miss up. By the way, in Drupal 8 now, we do have real CSS documentation, which if you go to 1-9-8-2-2-5-6 node or just search for Drupal 8 CSS documentation, you will actually see a whole documentation standard for how you should write your CSS. So we kinda can't get the same way of writing it. It's been a long discussion. It is based on BEM, if you hate BEM, well then go and hate on it, but that's how it's gonna be. So I need more water. So far people are kind of following the concepts. It's not like I'm not completely speaking over the head of people. Good, and nobody dares to say I don't understand what you're even talking about. Can you speak another accent? What is BEM? BEM is a naming standard for classes. So a class will be named in a specific way and that makes it really easy to target a single field. So we're actually using BEM as a class naming system. We're using SMACS as the standard for how a CSS files is gonna be. SMACS is kind of the standard for how, becoming a standard, especially when you build really big systems. So that's kind of the two things. But everything is documented in on CSS documentation. We've really done a huge job of getting that stuff in. So in Office CSS, gonna need to check out this cool feature. So a trick block in Drupal is one of the things that made me really excited actually, about three or four years ago when we first began to talk about changing the theme system to something else, was kind of this one of the selling points. A thing you have usually in Drupal, you're gonna end up having six or nine different of page dash something, because you have like a little thing you wanna change on that page type. A little bit of thing you wanna change over and that page type instead. And it can be kind of like frustrating. So a trick block, what it basically does is, let's say I have my page HTML trick file here and I wanna add in a variation of it. It's just gonna be a little part of it I'm gonna add in. What you can do now, you can define a block inside of your template and that block you can then change all depending on what kind of like theme hook suggestions or final name suggestions we're gonna have. So on this concept is that you have your page and then if you're on the front page and page that front get called, you can then extend on the page and then get all the data in. And I know nobody understood that. So here's a simple little example on this. I'm gonna add in another color to my front page and not on my other pages. So what I do here is in my page, I'm gonna do define a block. I'm gonna call this block modern decay is awesome because that is the truth. I'm gonna add in a class that's gonna have a color in. Let's make it green. Yes, I remembered. So this, the percentage sign is kind of like the controller signs you have inside of twig. So block and in block is kind of like how you define this reason. Okay, this I'm just gonna change out now. If I go in and look in my source code, let's try to do that. So this is now green, fair enough. I go in and inspect my elements. I go and look see, what's actually gonna be called here? Okay, page dash dash front. This is a little twig. I was going and do it like this. You copy and file name. I'll create a new file called page dash dash front, html. So what I'm doing up here, I'm doing this extents command. First, I'm gonna make sure I'm not gonna screw this up. So I'm copying this whole block. So again, I can change this now. So the whole idea here is to be able to like swap out little elements of markup inside of your templates. And you do this on all of your templates. And yes, it can create a very chaotic theme system. But that's up to you to like organize in a decent way. The extents command, what it does. This is an old demo. I pretty, we have shortcuts now, right? Because that worked this morning. So what you do is you tell the theme, which file is it that I wanna extend on. And this extension, then Twig will understand, okay, don't load the whole page. Only load this part of it, not part of the block. Just CR is the new way of doing instead of clear cache. Double seven CR is clear registry. I got it. God damn it! Cache rebuilds, which is called now, which makes sense. Anyways, as you could see here, we had, when I, let's see if I can actually go back a little bit. When I hit my front page, I get another part of markup. When I don't know my front page, I can do that. So this is kind of a way we can begin to modify our templates very simple, all kinds of different front ways. So basically, I define the block in my page, I then extend on that page, and extend this page to say, yo, if you hit this page, don't load this page, but go to the original page, which is defined here, and then load this part instead, and done. And this is how it can begin to like, move these things around. And it's basically just this block. The reason that we, on a day-to-day basis, call it a Twig block, is if we don't call it a Twig block, we know exactly what's gonna happen. Complete confusion in the world of Google. You could also try to rename blocks in Drupal and use like the next six months in that bike shed. That's not gonna happen. So that's called Twig blocks. And basically, swap out an element inside of your page. So that was quite a lot, right? Still with me? Okay, sweet. So let me just run through this quick. So class is a Drupal default markup. Remember that. If you wanna have markup in classes, set your theme, base theme, class. If you don't do anything, you're gonna get a completely naked Drupal, which I personally prefer. If you wanna find a variable, you draw into that. Libraries, you add CSS and JavaScript files. Without is a way to separate your variables completely. Attributes that add class, add classes, or you can remove classes. So that's kinda like, this is what's in Drupal 8. And that's good to say, that's quite a lot. Pretty much we changed, we put it on the head and changed everything how it was done. And a couple of other things we figured out while we were doing this is there's a couple of minor issues around different things in Drupal that we also wanna change. For example, how many here enjoys seeming a menu in Drupal 7? There's one, and he's trolling. You're not trolling? Okay, you wanna see this? This is menus in Drupal 8. It's one file that calls itself, and what you can do here is actually you can go in and test on the level. So let's say you wanna add a specific class in level two or level three. You do these loops, and then you just say, well, if menu level is three, add in green class, add in that class, whatever you wanna do, change the markup completely. That's how we're gonna do that. One of my favorite pet projects has also been killed. And this file is huge, by the way. It's also known as the devil itself. By the way, on the menus here, what we have done in the theme layer, as you can see here, you have menu, menu desk, local task, local task. Why do I have two? Task and task. As you can see, by the way, we need a little bit of help. So some of these things to clean the last template up because this is just conversions and stuff to move in. You have your breadcrumbs. You have all of these things like separated out in elements. You can actually work with them directly. My favorite hate object in Drupal has been for years, the pager. Getting the pager and figure out how to actually change that in any way that made sense. And I think at least three times, it'll be like, oh, okay, this weekend, we're gonna clean it up. And we sat down three people in Copenhagen and within six hours, we're like, fuck this shit. Let's go to the bar. Because it was simply not worth it. This, my friends, is the piece of evil also known as the pager because pagers are fucking complicated. And this is one of the old discussions we've had with the developers and themas. The developer was like, hey, do you really want to have a template this complicated? I was like, yes, I want. Why do I want that? Because then I can control this shit instead of having to sit and try to grab out like invincible things. If I want to change anything in my pager, I can do that now. I can see what comes out of it. So we all took this. We killed IE678. Because we didn't feel there was any reason to support that anymore, what I'm still hoping for on one side of my head, I kind of want to have all sorts of kill IE9. I mean, with the speed we're developing in Google 8 right now, that change is pretty high. On the other side, I also just want to get fucking hate out the door. So, but one last little thing that we actually put in, and this is like the Steve Jobs moment, right? This is the Steve Jobs moment, okay, so check this out. So you know, screenshots have always been kind of boring. Let's do screenshot 2.0. Let me do a dance.gif instead. Da, da, da, da, da, da, da, da, da, da, da, da, da, da. So if you didn't get anything else out of what Google 8 actually does, it might so much better. You got it right here. We now got animations inside of our screenshots. Which I kind of had an idea that would get the biggest approach, because yeah, I understand that in my head. It's like, ooh, we're GIF file. So, this has been kind of a journey we have been on. I've been on this task for like six years. I do kind of want to send out a ton of love to these guys. Jen Lampton, who is now, I've been joking about calling her the traitor, which I figured out in the States, I pretty much cannot do that because people think I would mend it, seriously. That's not really true. No, we have a ton of people here who've been helping out who actually been listening to me bitchy and moaning for so many years. I'm still kind of, how come they could even take this crap from me yelling and moaning and being angry about everything. I actually want to give a shout out to these people because they've been doing a tremendous work and getting this stuff done. And here's the thing, by the way, we really need, and this is where I need to figure out how to get new people in. How many have you read about the First World War? How you attacked? You're laying down the trenches and then you run over them and you run directly to a target and you just get shut down. That's how we've been doing developing TWIC for years because that's how our brain works. We need more bodies for the slaughter. I mean, since I'm the pretty much the only one still standing from three years ago, it is kind of a slaughter. It is hard, tedious work. It requires a ton of time. It requires a ton of dedication. A lot of it is not fun. A lot of these discussions take forever. Come join? No, so actually what we need here, we really, really, really need one thing. We need people to begin to build base themes and test this stuff. Download Jubilate, begin to test this, figure out how a base theme works, figure out how the template looks, figure out if the name organization, the final name organization we did inside of Classy, if that is completely fucked up or it's actually really good. I think it's really good almost because not everybody was agreeing with me so there was a compromise that's done, but we have not tested it besides the five geeks yelling at each other and an issue queue for three weeks. These things we need to get tested because here's the thing, when we released Jubilate, you know it's five and a half years since we released Jubilate 7. And I know that I said I would take all the blame. I'm not gonna take a shitstorm for the next five years because we named the file something wrong somewhere and because none of you lazy bastards didn't wanna test it before we came up with Jubilate. So actually we need, I mean I personally, our whole team really needs this help. We need fresh eyes into the theme because Jubilate is not released yet and if anybody's like why it's not released yet, well as far as I know, there's not a boss who have changed the theme system here. It's ever gotten as much as $1 for this work we've been doing. A lot of us as freelancers during our spare time or whenever there was a client who was like paying me enough money to be like oh yeah, now I can take out a month of my life again and try and to clean up the note IDs. Oh yeah, by the way, we removed all the IDs as well from Jubil call because those things, but here's the beautiful thing we don't even have to think about that anymore. If you don't like what Jubil call did, you copy class and say fuck you, Jubil, here's my classy instead. So you can overwrite these things. Last thing is there are a couple of sessions that you should really know about. If you wanna hear more of the story of how I fought the developers for years and how you actually raise an army to do these kind of things, I'm gonna be down at the Jubil, the Watchdog Lounge, like I've also did an article for the last Jubil Watchdog where I can read about all these Jubilite stuff. The thing is a lot of it is already outdated, which is a little bit sad. It got written a month and a half ago. That's just how it is. If you wanna know what actually goes on behind the screen and figure out what actually going on, we're having the Canadians team Canada is also known as we're gonna be polite for the whole session. They're gonna explain more like hook theme to trick template, how all of this stuff works. That is at 5 p.m. today at the symphony room, not the theme room, because it's symphony related or something. Anyway, that is in 4-11, where that's gonna be the last session today. All this week we're gonna be sprinting. Look, if you wanna look, figure out where we at, look for the Science Front and United, which we're using for this. It's kinda like where we're gonna sit on Friday. We will fill up, hopefully we're gonna do what we've done the last two years and pretty much take off like 30% of the screens. We need, really, really need people to download Jubilite, come in and test it, come in and taste on it, and just play around with it. If you're flying out on Thursday, you're a bad, bad, bad Jubilite person. And I know we laugh about that. I actually mean it because this is the thing we need. This is a community effort. We need you guys to come in and test, you need to come in and play around with it. So come to the sprint. For the ladies tonight, there's women in Jubil. I'm very thankful for getting the invitation. I was checking up. I'm as much alpha male as you can get out of Denmark as a Viking. So I'm not gonna be showing up, but the women in Jubil, if you're a female and you wanna hang out and like getting to that, do that. Tonight, I'm probably gonna be at the after party. Else, we're gonna be at the sprint room pretty much all week, trying to get stuff done. If you wanna get involved in this, either use Twitter, Jubil trick is the hashtag, or also, Jubil dash trick is the IRC room where we're discussing stuff. We're having bi-weekly meetings. This is my European times. As you can see, I have a meeting at every other week at one o'clock, and then every other week at one in the morning. And there's one thing that I really love when I put my daughter to bed and having like an hour and a half sleep and then getting up again, and then have an hour of discussion. This is kind of like the scars we're getting on our body. And I also do really enjoy to see David's at six in the morning New York time, being all like, I need coffee, having the discussion, because we're sitting all over the world trying to do this stuff. If you wanna yell at me somehow, this is my Twitter account, MortenDK. The slides are on Italianyearall.com slash d8theme.dcla. That's where these slides are published already because I've done this before and I know people always ask for them, be like, did you publish your slides? Feedback, I was trying to figure out where the feedback form was. It's somewhere on events that Jubil talk. I really appreciate it if you wanna give me feedback, good and bad, whatever. The what? Okay, I couldn't see that while I was testing that like five minutes before. Let me just see if you can actually find that. No, we can't. Anyways, so go in and do that, give me some feedback on this session. Also, it's interesting to figure out actually if it's good, if it's bad, this is a whole new session, I'm testing a new format and stuff, so that's been good. I actually think we do have a little bit of time for questions. Nope, anybody have questions? But like, Morten, shut the fuck up, I wanna get lunch. Oh, there's a question. Ha! Well, so what is the biggest issue right now when you're not out of college? My biggest issue is the JavaScript separation, which is not done yet, because that will mean that we're still like, hunting in on, we're still depending on what Jubil does. That's my biggest issue. I know that deaf boys have another issue, and so there's like, but that's the conceptual level, that's the real big problem. All right, yeah. What? I have a, how about you come and play with us so you can figure that out? Actually, it's one of the things we have not really hammered on yet, because it's just been getting all of the rest of this stuff done, but I can see we have a volunteer. But that's actually, that's how development works, by the way. I'm wondering. Ha! Oh, exactly, see, and here's another thing. If you got a company who actually makes money on Jubil, and you actually think that Jubil 8 is not coming out soon enough, and you're losing money, how about hiring some goddamn fucking developers to help you out? And I'm actually dead serious about that. I've been on this shit for four years, not getting as much as one fucking cent for my work, and the amount of companies who've been all like, oh, Morton, this is so good, you're gonna change all the stuff we're doing, so much better business you're coming in. Oh, thank you, how about paying me? Fuck you, pay me. And it's not so much paying me, actually paying Katza, or paying David, or paying Lawnry for all the work they're doing, also to compensate for the amount of bitching they're hearing from me on a day-to-day basis. Anyways, thank you all for coming to my session. I really enjoyed it. I hope to see you all in about three days when we're doing the Sprint or else come up, talk with us, figuring out we have a fucking ton of stuff we need to get done. We will get this done, and it will be paradise to do Jubil 8. Thank you.