 All right, come people in, this session is going to be not 45 minutes, it's going to be 60 minutes of nonstop back and forth of stuff, all the 21 things I've learned during Drupal and I hope we get time for questions. If we don't, let's take the questions afterwards. If I go over time, I'm sorry. Last time I did this session, it took me two hours to run through, but I also told all the drunken stories from my time in Drupal, so we're not going to do that today. This is me, Morten DK. This is actually my name tag. I just created a new company called Theme Machine. So it's not Geek Royale anymore. I still have the same badge as Logo, so no worries about that. I have stickers with me if anybody wants. So I'm the classic maintainer, which is one of the core Drupal themes, or the core Drupal theme we have right now. That's kind of what I'm doing these days. This is my new company, the Theme Machine, and yes, we have a flying toaster as our logo. If you want to follow the stuff I do, go up to my website, I'm Morten DK. Basically it's just a bunch of usual block things and stuff around Drupal theming. Or use my Twitter account, where it's just like a nonstop moment of truth about Drupal and frontend and metal and painting miniature war games, so that's a whole nother thing. So I was born back in 1973. That's the same year as AGDG got started. That's how old I am. Anybody older than this in the room? Good. Yes, there's a few great beats in the room. But I'm 42 now, so I have the answer for anything. That's a good thing. This is actually me, like 20 years ago. Yes. As you can see, my hair has lost a little bit. But my ego is the same. I do think I'm a fucking rock star. And I even got a clip on this day, so that's good. This is actually the first time I came on the internet. Netscape 2 just came out. It was in 1996. It was good times. So in 20 years, what have I learned in this industry? Well, a CMS is really hard to build. Maintaining security is a bitch. It's not easy to make pretty. And I went with Drupal. That was a clever thing, right? Actually, 10 years ago, I came into the world of Drupal back at DrupalCon in Brussels 2006. So this is kind of emotional for me to be here after being in this community for 10 years and having my geek adversary here. So that was the thing I'm happy for. But I learned one thing over the last 10 years, or the number one lesson I figured out by being in this community is that designers and developers are thinking very, very different. And then we have this thing inside of Drupal, which is called the Themas, which we do not really know if they are designers or developers. It's kind of this mix-max. But that's like the number one thing that I've learned in this community, because Drupal is basically built by engineers for developers. And then we put the designers on top of that. And that is creating some issues. Because developers, they don't really care about design. They care about the front end. If it's JavaScript, then, and I know one of them, if it's JavaScript, then it becomes development. Then it's going to be exciting. Design, not so much. And nobody seems to understand, unless you're a gamer, that actually the markup in the CSS, no matter how we look at it, it's going to be the final product. So that is going to result in this thing that a world without a theme, how does that look? This is the JavaScript world, the world without a theme. That's how it would look if we didn't have a theme. Actually, this is how it looks without a theme. There's nothing on. Without the theme, no matter what you do as a developer, no matter what you put out, there is nothing. I'm sorry to say. At the same time, we have not been putting the theme or the design as a first thing in the world of Drupal for the first, like, almost 10 years, actually the first nine years. Because last year, something really good happened. There came this small piece of hope, small little glimmer of hope in a world of darkness without a theme, Drupal twig. Why is Drupal twig that small little hope we got? Well, because we finally begin to separate our front end, our markup, our CSS. And markup and CSS is actually what we paint with. That is our design tool. We finally separated that. It was a long and hard battle. And if you don't like it, I really don't care. And I don't even know that Drupal 7 exists anymore. The thing we can do now from a front end perspective or from a design perspective is amazing. So basically, this talk about 21 things I learned on that. But the first thing first is like back in Munich in 2012, we had like the very first big discussion on how to do this. And there was a one session made by Jim Lantern. This is 2012 when we got the first commit in. That was called a design-friendly theme system. That is the number one thing we wanted to do with the twig system. It's not doing decoupling or anything else, making it a design-friendly system so our designers can help the developers looking good. So the first thing we're going to do in this session is we're going to unlearn everything. And what are we going to unlearn? You're going to unlearn everything you know about Drupal 7, right? Now close your eyes. Feel it. Because you remember this? This is Drupal 7. No more. It is gone. It is now completely gone. The days and the Stockholm syndrome we had of thinking that, you know, DeVittus is a feature. The idea of 5,000 lines in the PHP template file was totally OK to build it. That's the classroom feature. That, you know, that was a feature that we could use. You can just theme on that, also known as trying to smack colors on something you can't even control. All of that, nope. Second thing we're going to do is you're going to now understand how a twig works. So this is twig code. The first line is how we do a comment. The second one is how we do a variable. And the third thing is how we're going to do functional stuff in it. Done. You now know twig. There's nothing more to it. That's actually a beautiful thing in it. If you're a developer, you're going to be like, oh, shit, these twig files, all these template files, oh no, what am I going to do with that? Well, relax. They're all compiled into PHP. So this shit is not going to get more slow. And it's actually a feature. So all of the twig templates, all of these files, these almost 200 files we have, it's going to be compiled somewhere in that Drupal thingy, which I don't even understand or know about anything anymore. I don't have to, and that's the beauty of it. So and at the same time, what we have done, besides of, let me just get some water. At the same time, what we have done, besides moving all of these things out, is we're trying to build in modern ways of doing stuff. The problem about modern ways, by the way, is always they're going to get old at some point. The whole way that we're building these things into this smack idea, smacks is a way of organizing your CSS files. We're putting BEM in. BEM is a way of organizing your class names, your class structures, your CSS structures, as it's called. That's like the basic things. Anyways, so how do we build on this? Well, first of all, we have a base theme. That's the first thing you're going to do. Everything in Drupal has a base theme now. You don't have like anything else than that. You have one of these two themes. You're going to build up top upon, and then you're going to figure out which way you want to build your theme. So basically in Drupal code, we have stable, and we have classy. That's the two things you're going to choose between. And then you're going to have like contrived themes. That can be all kinds of different themes you can put in, and then you have your own theme. But Drupal code comes with two different themes, and there's a reason for that. Basically, stable is a clone of Drupal 8.0, all the markup, all the classes, everything that's in there. So that is a theme that you know exactly what comes out of it. And stable is the minimal version of the markup in the classes. The reason we have that, instead of just having Drupal core, we have stable is we want to be able to fix the dumb things we didn't fix before RC1. So all the things we have learned the last year, we can actually now fix because we have Drupal core over here, and we have stable here. And your theme, if you're using stable, it's going to be hitting up on stable. So we can fix stuff over here in our core, and then later on we can release new versions of it. So the stuff we're figuring out that's not working, we can actually release. That was the problem we had back in Drupal 7. You remember that when Drupal 7 just came out, and then that yellow book came out, that yellow book that was talking about like responsive sites. Anybody remember that happy moment five years ago? And then Drupal was standing like the dumb kid in school and we were like, how do we make our site responsive? Because we couldn't make Drupal core responsive because then we will break a ton of themes out there. So by having stable as like the protection layer for my own stupidity or the things we'd never got to fix, we're having that in the middle. And then, so basically the idea is to say that right now in 8.0, if you have a UL check, it's going to have an inline class on it that is hard coded all the way somewhere down in Drupal. Of course we don't want to have that. So if we remove that, we clean up the code we never got to do, we can actually do that because you're relying on the stable theme and then we can like walk around that so we can clean that up in like let's say 8.3 and then your theme is not going to break. That's basically what it is. So stable provides you the bare minimum. Just a diff or a section or an article tag and that's it. And then if there's a class it really, really needs that Drupal really needs, then it's going to be there. Else it's going to be anything. If you're using the classroom theme that's where we have all the classes and all the names and all that stuff. And that's kind of the first choice you take when you do a theme. It's basically what am I going to do? Am I going to be building my site on a bare minimum or am I going to build it on all these standard classes I have? So if you're not really into reorganizing all your CSS and we think you just want to find that class for that field and not make that red, you can totally do that. Just go with classic. It's pretty much like Drupal 7's class names were but built up on like a BEM naming. So your theme can actually choose what I want to do which way it's going to want to go. And don't be false as we call it because you can set your base theme to be false and base themes false basically means that you can just go you're going to rely directly on core. The problem is when we then fix something in core we're going to break your theme and yes we will be fixing core. There will be change another because the world evolves and Drupal 8 is not going to be 8.0. It's going to be 8.2, 8.3, 8.4. We want to be able to change that. If you want to know more about these like base themes I created a short little article explaining this stuff and on Drupal.org there's the same thing as well. By the way all of my slides here is I have a short link for it at the very end so you can download them all and so you don't have to like frankly write down. So first second thing we're going to do is we're going to talk a little bit about debugging. Basically we have a service file we have settings files down in your sites default folder and these two you're actually going to work with settings.local and your service file. Basically what you're going to do is you're going to tell it to not use pre-process because every time you do a CSS change it's not going to be there and you are going to ask for the development of the service YAML file. The reason for that is then we can actually begin to have like a more developer setup and we can actually ask Twig to debug and Twig can send out debug info and that's one of the really little beauties we have in Drupal.org because now when you look into your source code to do a view source as we always do we're actually going to get the file names and everything else that Drupal provides us as a name also provides you with the template suggestions and the pre-process so you get both of these things in there and we're even going to tell you where this template is because everything in Drupal 8 is a template file so there's always a template file somewhere there is a fuck ton of templates files by the way and that's just how the feature is it used to be functions instead that was hidden all over now we have template files and you can actually find them. If you get tired of looking at your markup that way and that is can be really really really frustrating if you use Chrome, I guess people are using Chrome go in and look for the Drupal template helper what it will do it will actually hide away all the comments and then put it into a sidebar in your interface so you can actually find them easier then you can copy the files even easier so you get this kind of interface instead so I can actually find and figure out now what template am I using where's the template living at and now copy the right template name clone that template and do that stuff it's inside of Chrome and it's pretty goddamn amazing I can't remember the address for it but Drupal template helper is going to push it out and of course you know it always gets rushed get developed that's the other module so how does this look in normal world well here's the kint variable the kint is the debugging tool we're using so if I do a kint content do a dross CR CR is the new like dross CC and then reload my page it's gonna print out the data for me so I can go in and look at the data browse around and figure it out a fair warning though there's a lot of data there's a lot of data to put out we could have a better tool that would be smaller and more easy but we don't have yet but up until then if your site begins to crash because you fire up kint and do work on a content variable because you have a big piece of content go into a PSP settings and just crank that fucker up I can't remember how much I put into mine but enough to make my Chrome pretty much make my machine go almost down sometimes we need a better tool for that but up until then kint is the way to go let it basically give me all the names I need from every element there's another module called search kint because there's so much data so you can actually go in and just search for that that's another good little tool to have with you in your toolbox good so third thing that I came to figure out was these template suggestions so everything is a template and Drew will provide template suggestions in all kinds of ways and that is kind of the hook in how you're going to work with this so in Classy, if you go into Classy and you go into templates then you're going to have another this way of organizing a template so block content, content edit, data sets and so forth they're all organized in groups because there's about 140 templates to look at so we try to put them into different basic group sets and this is for a field at a certain point these are all different suggestions I've put into it so now it can begin to be very specific of where it lives the thing of this, you can actually you don't have to put your template in a specific way you can put them wherever you want inside of a template folder so you can actually begin to group your stuff so I always talk early on where I begin to talk about you group your thing, you have your card and then you have your card CSS file and I kind of move everything into a little block of that way, you can actually do that now and that's the way I like to work because it gives me an easier way to find my stuff later on I don't care if it's a block of what it is I'm all care of what it is so if I'm working on a search field I have the block around the search field and the search field and the CSS file for the search field, all of that into one folder, you just put it down there and this is a component for actually I think this is for the yes, that is for my own no, it's a test theme, sorry anyways, the idea here is to, as you can see if you know anything about smacks I'm pretty much building them up the same way because now I have the same terminology in everything I do so I use the same way of thinking so everything, all my base elements I have some admin elements I have like base components, I have my layouts and I try to organize stuff in a way so it makes sense for me to work with not so much for a machine because we can move them around one thing though that you need to understand when you do this, that Drupal doesn't care about the path where stuff lives in it looks only for the template name which means that it's a very good idea to use very specific template names for your stuff when you begin to group in this way because in this case, let's say I have on my templates I had my set component versus my A component and my set component wanted to be the one that should take on the node HTML.trick file well, Drupal doesn't care about that it just reads from the root and just down so it actually goes alphabetical so to do that, be more specific in your templates be very sure of when you're naming what and yes, you can use very, very long template names unless you're running on a Microsoft something-something server but if you're doing that you have another set of problems, basically another thing is, which I learned a few days ago is you can only nest four folders down if you go more than that then Drupal can't find the file that only cost me an hour and a half of my sanity and restarting my server and trying to debug in all kinds of ways until I just tried to move the file out of that last folder because you're gonna have a lot of file names the system I'm working with now is having three dashes to separate each part of it and then two dashes to separate the name and the value so it kind of creates this system of naming stuff which means you get these absurd long file names but it still makes it easier for you to find them the thing, the way you can put all these theme suggestions in if you go into your .theme file which is the same thing as PHP template file used to be if you go into that and go to the hook theme suggestion and then the hook for it and alter that is where you can fix all of these names so you don't use the pre-fuss process for this you use your theme suggestion instead and that's gonna become a tool that the more D we get into Drupal that's actually where you're gonna put a lot of things because it's all based on files and as I said, you can get very, very long names but now on this one, I actually know it's a field it's in my note, it's the bundle article the view mode is the full view mode and the type is text long and that's how I really like to have that level of control oh thank you ah, god fucking dammit Chrome sorry, no, it's not sorry for this way I'm in Ireland, they can take it alright, so, let's say I'm building this one element this is my, I bought this code preview thing for my site so I could share code elements so in that folder, I would have like field paragraph, bundle code, type string, name field code, file name and so forth so everything I do here is I'm just trying to put them all into one folder so I can move them around and figure out where it is and that's become a very simple way of actually organizing your files if you just put them all in one folder and drop it down, at some point you're going to sink in because not all of our file names are actually that good because some of the file names are just, a lot of them is just translated directly from the function name they used to have in Drupal 7 which can have some funky names around so organize your stuff in folders, do that way that's actually going to make sense for you so, fields, that's like the building blocks we have in Drupal and a field built the same way as it did in Drupal 7 you have HTML, you have the page around the page then you have like regions you can put in which I hope to remove someday because I don't understand why we didn't have these and besides of the regions inside of that region then you can have like a view or a node or a block thingy and inside of that, that's where you have your fields and these fields is of course also based, you have the basing field template and so and that can then be named based on the type and so forth so you would have field image, field text, field food, field whatever, that's kind of all of the different fields and how you organize your fields and one of the other things on these fields is they also use the same like name basing so if you have a field dash image that's the only field dash image you have while all of your different like nodes and content types will use the same field and that's just like being remember that it does this because then you're not going to you're not going to break stuff later on so the field markup used to be actually the thing that created our debits is because you will nobody really we're looking back in the days of how a field should be themed it was just how do we create the same markup for everything so we looked into that it actually took us about two years to figure out why it was that way because nobody was really playing around with it so a field is basically a label and a value that's what they're in a wrapper if we look at that then we have you have a single field we have a single field with a label we have multiple values for the single field with no label and multiple values with a label that's the four different variations we have of fields we don't care what kind of data comes out of this field it could be an image it could be a content it could be a node it could be a title tag it doesn't really matter so looking at that and having four different ways of it we looked into the template and figured out okay we need we don't need the same markup for everything if there's only one value and no label why do I have like all kinds of wrapper elements around it I mean the markup should reflect the kind of data that comes out of it it should not just be one big plug of it that's kind of the engineering brain that want to have that like everything should be the same and that was what created our debits which made people like me very frustrated oh and on the same time same time we also have you know managed displays on top of it so we have a lot of things going on in this file class you know we have inline on a barb and visual hidden for these fields which you know creates yet another issue which makes the field template look big and scary but if you look at it this way instead what we're doing is we're saying if this label is hidden or then we're going to test if there's multiple or single field if there's no label we're going to test if there's a multiple single field so now we have the four instances of what are in our field what what we're going to do on every field and then we can begin to work with that and just do the if else you can even remove all these things if you know there's one field that's just a single field is never going to be changed you can remove that don't do that on your fields template do that on the specific field where you know you're never going to have multiple elements because then you can begin to build the markup that makes sense so it just says yo you're just going to have a diff wrapper around it or whatever you want to have it if there's multiple maybe you're going to have a section if you're going to have a section then you're also going to have the name for it that should be an 8 tag instead of another diff so you can begin to give your markup you can give it the script to markup that it should have and on the same time then you also have the attributes going to come with them soon because next thing here is the loops and loops is is kind of like how every time you have a piece of data especially in the field that's a loop and that loop is very easy to use you just taste on it you go for item in items and then you can test on each of these elements so you can say if it's first or it's the last or if it's number two or number four that's the loop dot index that's how we can taste on it you can also go in and taste on the values for it so every time we have a piece of data we can do that so first loop last loop dot dot dot index and we can go the opposite way so if you know your data is going to be done in a specific way we can work around that so as a little dumb example of that and of course the very last thing of it remember with the default also data is not going to be printed out so that's like the control for it so here's a short little example of that how what you can do with that so this was for last year's for demo I did last year and what I'm doing here is I'm basically testing on these things figuring out if an index is if it's number eight for it you'll print this data out but actually not only going to print the data we're actually going to change the complete markup for this and just making it the way we want to instead of having to add in CSS to override whatever we are thinking we want to have it to like print out the thing you actually want so if this is going to be the eighth piece of data then we're going to answer about when jubilee is going to come out hmm and I could put my whatever markup I want to have into it and that's another beauty when you when you look at a twig template it's basically it's just HTML it's really really easy to use it's really simple to use you don't need to be trained in it you can't just open up the file and if you understand an index a loop if you understand that concept you have an array of data on a loop and then you can like dot into it then you pretty much set for it um so less templates because in jubilee we also have 135 at least templates and that's out of the box not compared to what you put in another way of getting around this is you can actually go and say content.fieldname.zero and then print out the markup so if you have a template and you don't want to call another template to get that data in that's the way you can get that data off sometimes you really want to want to have that let's say you have a field name that has a value and you want to use that value for for a class name or a variation of a class name or something like that and you don't want to load in another template just to get that data off then just go with the dot field name dot zero dot markup markup is the same data that comes out um so if you want to this this thing this example here what I wanted to do was uh I want to grab the the code language and figure what that is so I can use that as my class so I can say, you know, um language dash yaml, language dash jss or whatever it can be um so I can get this kind of markup out instead of having to like try to guess my way in and do that um so Drupal Selectors the Selectors for CSS is I think pretty much the killer feature compared to Drupal 8 um when we compared to Drupal 7 when we're creating our templates and when we're creating our markup we also want to have complete control over the class names we have because we don't want to have Drupal to decide over our classes what we want to have instead is want to give suggestions but give you the chance to actually be able to modify them so in this example this is for the note template I have note I have note dash dash type and then I have the name for the bundle I test on if it's promoted if it's sticky if it's populist what kind of view mode is is and then I put in the class names that I need so when you open up this template the first time if you're like, you know what I don't want to have it to be called note dash dash type because that's not how we're writing our CSS you can actually change the CSS or the way you write CSS completely just go through each template file and change it as you want to and basically what you do is you're doing a set set foo and that's kind of how that's how you create a variable so set foo jubilee that would be like foo is the best that is jubilee is the best that that's how you do that so um and sorry oh speaking a lot so in this case here what I'm doing is I'm taking the note I'm doing a variation over and say note dash dash and type and then the bundle instead so you can just change it as you want to the way you like add these strings is just using the children and then you're going to get that out that's how we're going to work with them you can also put questions into it say you know something something something is this promoted use the class promoted or no promo you can change your class names to whatever you want to and here's one thing though now we have this like we have this control over our template or class names stop putting class names in to your pre-process you don't want to have them living there you want to put a variable into your templates can actually work with them the whole idea of doing this in pre-process is a strange jubilism and that's how we used to do it in jubil seven unfortunately we're still seeing that and that's kind of kind of sad to stop doing that because show you an example later on why is that as an issue so if you want to give the template a variable because you want to have that variable to be able to do something with the class well create a variables and then the template you want to have put in or the class that you want to put in and then you can print that variable out on the template and then that template can then do whatever it with with it because you don't want to force your theme or your front-end of CSS architecture to be built in a certain way you want to make this modular right I mean we want to do it right so attributes attributes is where that's kind of the next thing we like modifying the way do all the classes and we can make some some good things basically jubil seven did to put in all the classes and then you had a pre-process or template file or theme function and you kind of put all that out to blade while doing instead is like do it puts out a fuck ton of variables all these variables we can then do something with actually put it into classy inside the class you template we're then going to put it out so the control of classes is now built into a theme layer so if I want to add a class at some point you know I do set my classes do available that creates that and then I do my attributes that do at class and then I can put in the classes and this way I can now control and create my class like also remove elements and you see the pipe the field name pipe and then clean class clean class is how we make sure that the CSS name is going to be correct so no spaces and so forth and that's just how we how you pipe your data all the time so when you create a class names if you have a variable just pipe that stuff that's that's how we're going to do that if you want to remove a class you can do that as well why you want to remove class let's say that I have this site and somebody installed the module bad Canadian bad Canadian put one class in that's called nickel back I don't want to have nickel back class missing in my theme because I might have another class that you know if somebody put nickel back class in I'm going to do a display none on all the data so it's going to break something so we don't we want to remove nickel back basically how it's done is like call provides classes and module can provide classes with the attributes I do an ad class and then I have classy that could do the same well I can also do the attribute that remove and then that class name so if I do attributes that remove nickel back nickel back is gone and that way I can remove all the classes I don't want so he doesn't mess with a module that puts classes out I don't need I can remove that I can even do it better I can actually say if I have a class then I can even put another class in so move nickel back done if you're going to use JavaScript for anything and you need class names for it pretty please make sure you prefix that stuff for JS dash and then the name if you then want to do put colors and stuff of it then use the same name but without the JS prefixing because else there's no way in hell we can figure out later on what's going to happen in my one of my old themes the mother ship what happened where I broke views Ajax browsing for almost six months because I cleaned up the class names we don't want to have that kind of thing that was fun bug reports to get in trying to figure out why that wasn't wasn't working yeah clean class we talked about so attributes I have my nickel back you can even you can do a remove class you can do add class you can do even set an attribute and yes I know I did an ID here with the top on all of this stuff if you do that into a template going to give you you know a different ID of top and the class of rush and that's the control you get on the show you can modify the attributes that's powerful stuff so with that known I can now begin to pimp stuff in a whole new ways let's say I have my search field I'm going to remove these classes going to remove this attribute I'm going to set attribute to auto save and get the last 10 results auto complete is going to be on all the focus is going to be on and I'm going to put a placeholder in on it and that placeholder is going to be seek and destroy that's how it looks that you can do directly out of triple now without having to like work for four weeks to figure this shit up so and that's just this is a thing feature that's built into the latest fire browser so when I when I search for stuff I can actually get all the last last versions of whatever I search for it's not inside of chrome yet but these are like these are the this is the power we have given the theme now and personally I enjoy that a lot you can even go go the cowboy way so let's say you're going to know sometimes shit is going to be dumb this is me in Texas by the way you know what you're going to do something cowboys like you need a class when the note ID is 158 because the client demanded your hot rock and cowboy thingy when you had a note ID that way we can do this in a lot a lot of dumb ways the way to do that proper is you know you can actually do a pre process then taste on the note if it's a note then you provide the variable for it you put that ID in then you taste on that says if the note ID the end ID here is 158 or add in the hot rock and cowboy so you can do that every time and let's not put it in that would be like a way of how to modify some of these cowboy tricks that we all know we should not do but we also know we are going to do them at some point always do that in a way where you take you give a variable to your template put that template out so you have to figure out later on what goes on libraries is kind of the next thing libraries is where we define CSS and JavaScript files you don't call them in other ways that also means that a template file can define a library so we can begin to call them in and libraries is based in your info file where you kind of this is my vanilla define a library called global and then that global library is then going to be used the reason for that is I now can create different libraries and this is the same way a module does it look so let's say that I want to create my slider then I can create a slider library and put that in see here so this is how a library is defined and on the first line let's see here up sorry for that as you can see on it you have like CSS you have a global name for it CSS based then you have every everybody knows smacks in here by the way you know what smacks is oh okay not that many we need to school you guys because smacks is powerful stuff smacks is a methodology of how to modify how to organize your CSS files and what I'm doing here is on my base that is like the most like basis like forms and input fields and that kind of thing that's where you put put that in then you have layouts group all your layouts files then you have components where group all of your different components your search fields and so forth then you can have states which could be like my menus active or not active and then you have theme which is actually where you put in all of your like your colors and stuff so that's a it's a methodology to organize your CSS file and it's one of the main methodologies that we use in Drupal call. The good thing is that I know there's a conference coming up in Athens at some point where actually the dude who wrote smacks and created this whole mythology is actually going to be that's going to be exciting. That dude so when you look and when you define one field what you know one file what you can do is you can go with this this is my base foo CSS new give even give it a wait so you can like move it up and down the chain figure out where you're going to put it if you want to have an external elements you can do that as well you just call it and say this is this type is external if it's specific like media choir you can do that as well so say you have your print style see put that in then Drupal is going to take care of the rest you can even defend dependencies for example for jQuery the good thing about that is if you don't want to have these 82 kilos of love in your theme because you don't use jQuery you just don't define it and then it's not going to be used so we have removed all these elements you can also remove libraries and you can overwrite libraries so each library is kind of connected you can connect them to a file as well and then you can work work that way around so that's the way you modify yourself you don't just the anger CSS file in you connect it to a library and then you call it you have specific style sheets you want to remove you can do that as well with the style sheet removed inside of your into a file the problem with that is kind of that is deprecated it's kind of a fix around but sometimes it could be nice to have that hammer to just like remove this CSS file now even better with these libraries as soon as you understand the library is a bunch of CSS and JavaScript files well what if I only want to load in my library as long as I have a specific file I don't want to load on all of my CSS all the time what I want to do is I actually want to load in the CSS when I need that so if I don't have not loaded in my node template yet why am I loading in all of my CSS it doesn't make sense so in this example this is back to my code widgets I have my code that CSS I have prism that Jason prism that CSS then I can I can use that and then call it in as there's as a widget so you have the trick command the attached library and then use the active theme name because then when you move further around later on that's going to use the theme you're in and then call in that library in that way you're separating now you have your template files you have your library and then you have your CSS and JavaScript files and these they are going to move around so you're only going to call in your stuff as you need it and in that way I can create this code snippet library and you can see put in the things when I need them so they're not going to be called around all the time attached library is a wonderful thing SVG and inline files 14 and 22 minutes to go is it too fast by the way people like I know we can you can like download the video later on and we can like put it on slow but okay so the next thing you can do SVG files SVG to me is the sexiest stuff that comes out in many many many many years and what you can do you can now directly with twig you can inline your SVG files directly without doing anything you don't have to copy the file and paste the code you just take the SVG file save it to your theme and then inside of that theme you do include and then themes slash your theme name slash wherever wherever it is and then the SVG file and that means that this is not going to be included directly inside your inside of your theme and just prints this stuff out for me and I know yes I've not cleaned my SVG files up because I'm lazy but that also means I can just open up afterwards and actually edit in it and as a graphic nerds that is wonderful I need to open up another water just a second so the next thing I'm going to talk about here is a twig block and that is not just a block it is a twig block because we in the world of twig there's a thing called a block and we were that kind of joking about it that we should actually rename Drupal's block so we had the same name spacing as they have in the world of twig also figured out that will take us six years in the issue queue and we would never get it done so a twig block is a block inside of twig it is not a Drupal block make sense there kind of so the idea behind a block is you can take a part of your page of your template and inject another template in there so let's say you have your page template where all of your overall markup is and then on the front page you want to like add in a new element you want to add in a specific banner or a welcome to my home page yes I've been in this industry for 20 years and I remember when it was called the home page and you said welcome on your front page kind of like what Drupal does welcome to Drupal you have no content and this example what I want to do is I want to put in a Drupal hero thingy when that is there so my page template I'm going to define this block and then the name of it and then say end block now I have a place where I can inject other templates then Drupal uses the template suggestions and as you remember early on how we could completely control the template suggestions then you kind of take a template suggestion and you can use that template so what I'm doing in this the page dash dash front I'm first telling it you know what I'm extending on this template over here so instead of Drupal loading the whole page dash dash front HTML the trick as it should do normally now instead says oh I'm gonna use the existing page template but then I'm gonna inject this little part of it so I can put the Drupal 8 hero markup directly inside of this template so have a template here call that template name or like on the front page and then I can eject another template into it and you can do that with all the templates which means that you can now have only one template to have all of your markup structure in and then modify on that that can also turn into a logistical nightmare if you don't really think about it but and that's why you really want to make sure that you organize your templates because you have gonna have that many templates as you one guy nodding in his head and he's probably ended up in the whole I'm gonna do my feels and I'm gonna rename all of my feels and I cannot figure out where my markup come from trick has not only enough rope to hang you with it will do it with a big pleasure if you don't think a little bit about what you're doing so here's an example for it so my this is my front front page message welcome to my home page I was feeling old school that day and here's my my site just so you can see I'm not lying and yes this was back in a demo days where it wasn't really out yet and things were breaking a lot but in that way you can change these little pieces of how to work so you can change your template as you need pretty sweet um so 10 years ago the first site I built in Drupal were a site for the Danish metal awards as a metal award show for metalhead I built the site for them I was using Drupal for it and the first thing 10 years ago we didn't have this fancy CSS image swapping thing we used straight up JavaScript and give files to swap those stuff back and forth you remember those days wonderful right it was like simple and good doing that in Drupal would the only way of controlling this and putting your files in the right places and reorganizing the menu would require me to do regular expressions when you begin to set the designer and the theme us to do regular expressions you know the system is wrong and maybe back then I should have been thinking a little bit and actually left Drupal at that point but I got caught up in the whole community feel and people were all hating on Drupal at Drupal cons because you can't find another place in the world where we bitch and moan so much about Drupal which I also think is very refreshing um so coming up with Drupal 8 I begin to play around with how can I what can I actually do this the right way can I even put an SVG files into my menu as I need them so on my own site I begin to experiment with this the problem around SVG files is so there's that there's issues around it but let's see what it is that I want to do so what I'm doing here is I'm creating I'm using the existing fields that is inside of the site and instead of like creating a new field and a menu field and doing configuration for that what I'm doing is I'm actually using a pipe to have data I can then like separate up so I add in the title and then I said you know what use this ID which is this place is going to be rocket use that and then use that as a name inside of an SVG in line file SVG in line is kind of the same way as a good old kind of an image was called a sprite just with SVG files instead so let's see here what what's doing here it is though putting in these things let's see here so here's my link as you can see have my SVG in lines it's using an X link which is then only using one template not one template sorry one SVG files are going to have all of my icons over there and they're then defined by the ID inside of it let's see here so the thing is here's another thing about jubilee when you work with the menu this is actually a whole lesson itself jubilee menu is is not the active class gets injected somewhere by JavaScript I do not know why it took me like half a day to figure out that was how it was done so it's active it's just a class that gets set in there pretty sure that vimlias can explain to us why but that's how it is so I want to be able to add that in I want to be able to move around as jubilee does it markup not just rewrite it all and then I'm going to add in your SVG in line and do it with the use and then having like poor CSS tooltips which is using the attributes so you can actually use CSS to read tooltips directly and that means that now I have my main menu I have my one two different templates I have a CSS file a little bit of JavaScript and menu icons that's everything for my for it and this is my my icons in my sketch file and then name the right way you know as you can see on the side you'll have the side speaker webcam target eye rocket pantone code and camera these are my icons I'm going to use and this is how the SVG file looks you have all the IDs for it and then I can like reference them so I know how to do this this is markup how do we do that in jubilee first of all I make I misuse the the existing field the description and I use a pipe to separate that data up instead of creating a new field because I don't have time to create a field and figure out how to put that into the menu sometimes you just want to get stuff done see here using that icon name that icon name is then going to reference down into the menu and this is kind of pretty I would say edgy stuff because a lot of browsers doesn't understand them anymore but this is also the way like can I actually change this stuff in the menu as I want to or can't I put my rocket in when I want it so I take the description saying I split split it I take the ID I call in my SVG files I create my markup I sneak that into twig and I do that with an inline template and to get that out the reason for the inline template going to come to a second so these are all the steps I go through the first line up there set description take item original title dot get description split that take my pipe and then create my link title and my SVG icon so now I can begin to work on my data as I want to no pre-process no nothing all of this stuff is done inside of a twig file when I begin to do this I begin to feel pretty fucking badass let me just put it that way because I was like holy shit I can actually modify my data exactly as I want to and it just fits it out and the inline template so the reason for the inline template this is where it gets really complicated is so Drupal by default is it's not allowing SVG files the reason is not allowing SVG files to be uploaded directly is that security kind of thing so me as a designer is now hitting into the to the whole way of like security and I just want to create my menu as I want to create my menu instead of going the other way round so a link title splitting in that up getting the icon here's my markup that I want to print out here's the is it actually dying on me my SVG where I use use instead of separate SVG files and then I do my inline template the inline template is some sneaky shit you're creating a template that Drupal thinks is a template file but it's actually not so in that way Drupal is not able to understand that I'm putting an SVG file in so it's just going to print it out and that is how I came around and smack the security guys around which of course caused a big drama and I was called out for it to be like an evil evil human being at the same time I'm doing I creating the link so if you see here I got do set menu link put in my template so the link command doing menu link and render that stuff I have the item URL and then I put in a class and a data balloon and a data balloon position that's for a little CSS script called balloon which creates like little balloons I would prefer just to say set a variable and then use this markup and use my SVG file this way and then do link very link and then take this variable and do a render on it and then add in like the item URL but how these guys who do security guys do take security very serious which we do need to have the problem is that if we can't define an SVG file directly we're going to do tricks like this instead cause there's no way in hell that you will should decide of what kind of markup that I'm going to put in so layouts this is this is another good thing so you have the content variable inside of your note content then pipe and without that gives you control over each field so you can print out all the content and remove separate fields for it and that's the other the pipe you have a trick function that's without then you have the field name so inside of a note let's say you have content you want to have images and tags out in this side how are you going to do that now well basically just print out content you're going to have it all into into one box that's not what we want to do we want to move it out so I do content without image now my content will not print out the image then I can do content.image and print out wherever I want to in my template file the same thing with my tags could do that as well so the good thing about that is at some point you're going to add in a new field to your note you can then work around that it's just going to be printed into the content unless you're going to do another without and print that out and it doesn't matter where you're going to put that on your template you're just going to yank that in so you can put in new fields you can separate this stuff up and move that around that way here's an example for that hmm another little trick trick trick trick not trick trick damn it language is hard is how I'm like removing stuff out of jubilee I don't think it should be there or you know I know there's something I always want to overwrite don't put that in a separate folder I have my underscore remove so stuff I actually want to see removed I put in there so if I have the region template the region template I don't use I don't use that wrapper that's there so I have my I have to find my template I put it in there and then I know where it's at so yes there's the region and the reason is basically just cleaned out it doesn't have anything in it and I put my template in there so I can actually find it later on because again 135 templates at least plus whatever you put on top of it it's going to make you sink to it my cleanup folders filters and auto escape so when we have a variable in trick we can do all kinds of fancy things with it basically we have all of the PHP functions that you can call you can use them as a filter the one of the things is back to security is we have a high level of auto escape we can't just push stuff out last year we got we didn't get to blade out actually at double con because of twig and auto escape I'm kind of almost sorry for that so in this case while I was playing around with like you know I want to do uppercase on something and I know I could do uppercase with CSS instead so the CSS nerds yes I know but this is just for the example so what I wanted to do is I want to create everything into uppercase because I like uppercase and sometimes it just looks cool so I'm doing this so here's my variable here's my data how do I do that well you know I do you know I do item.content pipe upper upper is the uppercase thing well that doesn't work why doesn't it work all because of something I never even understood why it wasn't working but there's something around filters here so this is one of the things I learned so I learned to take item.content and instead get in grab the text and do an upper then it does this because everything is auto escaped then I get a little bit cranky like shit do I need to like pre-process data and move it out and how do I do this okay I'm going to do upper and then I'm going to do strip tags okay fine yes now I got all the like you know I've got all the the spaces and the returns like God fucking damaged you well here's a cool thing you can also do a replace so I got to take my data upper strip tags and replace these parts of the markup or part of the data that comes out and replace it with something else all inside of my template so now I can do this yes so it's just to remember that when you're using filters it's not always there actually using cause we have auto escape and auto escape is actually very important so we don't end up with all kinds of security things and even that we are designers or front-end developers we should actually like help out all developers would not doing cross-site scripting and all this like insecure crap that make black hats go in and no screw over on a double size we don't want to have that so but finding ways to work around this this is kind of the maybe a little bit of an extreme example but it was also fun to figure out that I could actually do this I had to do replace I can I can chain filters I can do all these things because we need security we need that thing to be built in and it should be built in by default even though I yell at them sometimes and I'm still angry that we don't have have proper SPG inline elements inside of Troubles yet and we should find a solution for it so the 20 of things I learned by accident was the screenshots so you know you have a screenshot of how your site looks but I figured out what you can do because we have the whole file name now it's not just called screenshot you can actually put a gift file in so what I can do now is I can make a big screenshots right do think that is pretty sweet that do opens up the door for us to be able to like like make little gift animations of how the theme looks and different responsive modes and so forth so it's just like one of those little things and here's the 21st 21 20 20 whatever 21st 21st yes 21st thing I learned and this is many years ago I'm out on a shooting range in Denver with WebChick this is WebChick with a machine gun that's not scary at all and what I did back then was every time I got the chance to talk with like the core developers I was trying to figure out why the fuck they were putting debits on us why did not learn understand all the needs we had as markup and CSS nerds and she told me that well you know what nobody told us what to do nobody told the developers back in Drupal 4.7 what we wanted for the front end perspective nobody told that and because we know that we're not even thinking in the same worlds you know the the right brain versus the left brain nobody told us what to do that was her answer and she actually had a shotgun in the hand at that point was kind of like sorry man but we were going to tell you so that's actually the thing that we have become better at as front enders or designers in the world of Drupal is telling the development community what we need because if we don't tell them if we don't describe it if we don't figure out what's actually the issue we're never going to get these things done it's just going to be bad because how would you how can you create something you don't even know what we want and if we then came in come in after that and it's like actually acting a little bit like spoiled brats because you know all these developers have been using so many years of building Drupal and then we begin to bitch and moan about stuff is not exactly the way we want that's not fair so we need to be vocal and we need to help out our developers to build a better system so we can make it pretty and build the things that we need so we don't end up with that Jason fire as what Drupal puts out because you know designers are a little bit different than developers just how it is but I really want if we can actually sit down and figure stuff out we can actually make stuff really powerful and we can actually build the system that we all hopefully want and create the superhero thing so we kind of need to help these guys because hey we look like this right because there's three different ways three different things we have to do we have design and inside the world of design we work in sketch and Photoshop and new pencils and that kind of thing then we have the theme the theme is CSS HTML and JavaScript stuff then we have like PHP and JavaScript and node and whatever those code guys are doing and basically over in the design we have the issue of like make the logo bigger in the theme we have like the whole browser health trying to get that stuff done and then we have over the code world just making it work of course then we also have the third part I've not talked about this time that's the DevOps guys but the only reason they are here is just to say no to us but of course communication is hard it is hard to get this stuff done I mean if it was not hard we would not be doing it right I mean that's how I look at it if it was easy anybody could do it and that's kind of like Google Cloud is kind of the elite should do that so I got two minutes and 36 seconds left one last thing you probably have seen that well I've created a new company called Theme Machine and I created a theme called Flat Earth I put out this Monday I put a pre-release for it because I want to begin to build Drupal premium themes so smaller shops or shops who want to have something that doesn't look like 7 can actually work with that and yes my logo is a toaster it's completely right so what I figure out was here's here's how it looks right now it's very much in pre-release trying to like rethink how an admin theme could look this is from a park in Berlin last week having managed feels not looking like something that's built for a bunch of nerds having something that's actually looks like something that would make you happy to work with make me happy when I touch it so what I've done I put out I put it out as a pre-release this week what I'm doing now is I'm doing a free demo of it so you can go and you can download it tinyyearall.com that's Flat Earth demo I hope for some of you guys to like throw some money at me like you can also do a buy the version but also just want to get it out right now so in about a month when I have the final release it is going to be a version where it's only going to be paid support and because we can't design these things if we don't have any kind of money for it so but up until then go in download it this is it's going to put you over to a site called gum rope is kind of a paid service kind of thing it's all free for you to download you do have to put in your like your name so I can spam you forever sell your your addresses to you know WordPress guys and that kind of thing but basically take it download it play around with it tell me what you feel about how you link what what's the idea for it let's begin to rethink how we actually looking into Drupal and Drupal 7 or Drupal 8 actually and not only having 7 as the only thing we have you want to read a little bit more of that on my blog I put in up this this post on Monday where it's at on my site more than the K well and actually one more last thing second last thing one something I kind of joked about I wanted to help trees with that theme thing what actually happened was for the next 12 months I'm going to be one thing cause I got a sponsor for the next 12 months so I can put in contrip in TPL I'm looking a lot forward to that and it's kind of a dream I got emotional over theme mother fuckers all right so if you want to help out with this thing the whole trick thing and how we're building stuff join a the Drupal trick slack the Drupal trick there's slack that heroku app could automatically get signed up we're about 400 people of us talking about these things front and united in May in Greece it's going to be goddamn amazing if you do not know smacks Jonathan snook is going to tell you all about it that's actually where it's at that's kind of one of the cornerstone we're building this stuff on so my hours done I'm more than decayed the happy theme thank you all for showing up it's pretty amazing so the last thing the slides is on tinyyearall.com 21 things Dublin the flatter demo is on the same same place we can get it Jesus Christ I just need to like do this because I've never been presenting in such a big room it's kind of crazy for me it's kind of journey actually feedback on this tiny year old 21 things feedback I do have some stickers and stuff to hand out to people some point come up talk with me for this it's home cause the next the next year I'm going to build two themes it's got to be fucking amazing good thank you all for showing up