 Okay so after after Morton yells I'm gonna go over a few things I'm gonna go over the basics of extending twig and Drupal and show off a cool module that Palmine put together the other day and also show you some of the stuff you can do debugging in twig templates and then I'm going to pass over to Joel. And I'm gonna show you how to use twig without Drupal so that you can there's lots of fun things you can do with that and then I'm also going to show you how to hack the twig that is in Drupal and so we're going to play with the twig service. If you if you do have Drupal 8 installed and set up and everything that's great I know there's a lack of number one tables and number two power outlets so I apologize for that but a little bit out of our control but anyway if you do have Drupal 8 installed you can play along with some of the stuff so yeah. Alright let's let's roll the boat so welcome. First of all I'll just warn you all I'm Danish and Danes we do come without a filter that's a thing I've learned over many years being in the States that we talk very much direct at each other there is or what we used to when we look at Americans kind of like sugarcoat everything we're not sorry for just how we are. So if I in some way accidentally come off as an asshole you know come up afterwards to me and explain it to me why so I can like try to change my ways if you're a developer and you're just pissed off and I'm telling you you've been wrong for six years that's just too bad okay just to have these these things set up so my name is Morten Birch Heidi Erkinson the only place in the world that can say that outside of Denmark is in Minnesota which they'll have surprised me a lot but having this name also got me into like a little bit of trouble sometimes Birch is my last name if you misspell it one character that's what's gonna happen at the same time there's always also a thing that a lot of theme has been doing for years bitching bitching bitching about stuff that's not good for actually anything but it's been a kind of thing we did for a long time cause we are frustrated it's a little bit bad my nickname is Morten DK this by the way was me 20 years ago when I was young and hopeful just to take it if anybody think I put myself up about a pedestal because apparently I turned out to be the person in the Drupal world you go to if you have issues with the frontend just to make sure we all know that this is how I looked so whatever I try to be serious about there's no way I can get out of it. I have a website called Morten DK and for a long time everybody assumed that DK is standing for Denmark that is wrong it's diff killer and that is what we're doing here that's been one of my approach to Drupal's frontend for years so apparently you have all thought this is for Denmark no it's been an approach I've had for seven years I just waiting to rip out every diff I can get out and my latest success was ripping out the inner form diff you know we have a form field you have a form and you have a diff inside of that latest approach I was my very first patch I tried to get in five years ago it did not happen two weeks ago it's out yes I'm the diff killer and it only took a week which in Drupal terms means instant so if you want to follow my ramblings Morten DK is the place to do that I also want a shop called geek well that makes Copent Hagen's finest themes I do have these stickers if anybody want to look as cool as all the rest of the kids wear these you're gonna come and hit me up for them but enough of that you know let's let's look at what is actually wrong with Drupal teaming from a frontend perspective if you're deaf you can moan later to these guys but from a frontend perspective what is wrong and I've been in this field for like seven years now and I figured out by looking at it for long now many many times what's wrong well there's two things we have the what we call the business or the political correct called the rich markup because it's enhanced with extra things so you can do stuff with it I'm trying to be political correct here for those in the room the other thing is a CSS overload we have had and the CSS overload is pretty much that you get you know when you open up your Drupal 17 the first time you get 22 CSS files and you have to navigate to them from a person outside of you will that makes no sense and of course the overload of classes so you have like five classes for everything in Drupal at least then you wrap everything into three diffs because you might gonna need one of them then you add classes to them as well that creates kind of a how to put it nicely away only a system would write markup and CSS and nothing to do how you would do it yourself so that kind of made me figure out well there is like only two front end problems in Drupal there's the markup and there's the CSS that's the only two problems we have I've not yet I don't know how the JavaScript guys feel about this but that's the two problems we have there's many reasons for this and we have asked ourselves why why is it like this why are we why are we what are we doing wrong here and figure out who's to blame because we're in the Drupal worlds of course we can blame somebody you'll get blame is really good for that by the way from my perspective it's the developers because they have not given me the markup and the CSS I needed they are wrong from a developer perspective am I gonna be your dude is the theme or so wrong fair enough so now we can like stand there and point fingers at each other for a long long time and we did it can I get it like a quick hand how many here was was in Drupal back in Drupal 6 did you remember those fun times with themas yelling at you every day it was good right and there's all yes exactly yeah you always knew what you were gonna do next morning at work piss off the theme as a female like how can I fuck over my developer just for fun you know and the reason that we have this is we have this dream about one markup to rule them all we just give the theme of some markup and he can just make that thing with CSS because CSS is seeming apparently or have been in the way we develop stuff so by having one markup to rule them all we kind of locked ourselves into a system that did not work and a couple of years ago I was out of the shooting range with web chick and on our way out there I of course misused I was sitting in the same car with her and begins like yeah but why are we doing all of these things wrong and web chick told tells me at some point you know what modern nobody told us what to do okay fair enough it took me about a month because I'm a retard and a man and I do not always listen to figure out wait a minute nobody told the developers what to do so they just assumed something then threw something back at us that's kind of like waterfall the very very worst way we don't even we're not even ask people what they wanted so a couple of years ago we figure out okay if nobody told them what to do the evil developers he has a theme look at every developer's evil at this point well how about we begin to do that so you can start with the pretty please pretty please in open source do not function I'm just gonna say that's right of what that doesn't function then instead we begin on this I'm calling this for anger driven development and is basically you take all your your anger all your hatred all your why the fuck are they doing this wrong and you then try to put all that energy into like some kind of positive attitude so we created an and a name or brand organization that's called front and united and it is a coincidence it says if you it was not by purpose I know that everybody thinks that I have witnesses on it was not it's because I thought it sounded cool so we create front and united it turns out to be a front-end conference we then did in Amsterdam and in 2012 that same weekend in in San Francisco we had about 20 developers sitting so in Amsterdam we a bunch of front-enders sat down say okay what is actually wrong what are our issues with Drupal 7 what would we like to change push that stuff over to the developers in the other end of the world and then they came back actually with different suggestions actually the suggestion they came back with was twig the lucky thing was at the same conference about 250 year front-enders there's a dude giving a talk actually about twig because all of us were like no no we're not going to use another system because why would you do that PSP is fine enough we just need to change it a little bit that actually kind of created just that okay fair enough the reason we got twig in twig in is not because it's so good to use for front-ender it's because it's secure which makes all developers happy because then you cannot do database queries into the theme layer which I do not still understand how anybody does that but that's not the point the point is now we have a system that front-enders like and back-enders like we can now stop being dumb idiots and yell at each other and you let those who matters our project managers but the one thing we figured out was PSP template was a no-go we just we stopped even thinking about that anymore clear it out you know what PSP template go away you know I went to this like trick thing which is I call it like French elegance also caused the dude who wrote it he's a French dude and he is kind of elegant so it's kind of has a good good wing to it so in six seven or months later at bad camp that year what happens is that that well we're working really really hard to get it pushed into triple core at that point and the thing is you can only have you need to push it in very early on so we figure out how much is going to change and I have a little side story here that I like to also talk about about how trees run stuff so the same morning I have a session that's called the angry theme which was a rundown everything that was wrong in Drupal so the two slides I did with the two things that was wrong this was like a 45 minute rant and me just yelling at people the same morning I have trees as a keynote and I said I go get up really early I get my breakfast and trees comes over to me at the breakfast hey can I sit down with you like of course you can sit down because I'm gonna tell you how important is to get you will twig in right now and I go at 345 minutes and he sits patiently listen to me which I still don't do not know why he just left the table it's there because I will keep talking anyways but then what happens is we go back to the go into the keynote and I go over to my station and one of the guys comes running oh actually John all be like more than you need to come here right now and we get back and three is actually pushing the code in so suddenly we have this like thing we've been working on for years to change suddenly gets in and and I have a session called the angry theme about how no developer respecting the theme in community anymore blah blah blah all of this shit and I'm a grown-ass man I don't try over code commits it was a little bit hard for me to be angry and not be like a little bit emotional so I had to start my session five minutes later because I had to add a little detail around the campus where it's like figure out which kind of mindset okay and it's really hard to do an angry session slides with a smiley face up to here by the way that's really really really hard but that's actually another thing that I wanted you to all do now you all have a phone right and a Twitter account take your phone out up with your phone so Jen Lampton was running the show at this point this is a Twitter account she's not here today because she's out riding horses that is wrong but that's the things you also do besides of cracking the web or worse and I will have you all to send just a thanks to Jen for getting double trick into call this is the picture by the way of how she looked when it came in it was a very very fun little moment do that and I'm going to take a sip of water and if you want to write that we miss her you can also do that so enough of this history thing one of the things we then figure out was okay we can change the theme layer to something that's different well it does not solve our basic problems of doing theming while having a plan so that was the thing we started out with let's make a plan actually at that bad camp and we bring to say like different goals that what we want to do one of the things we don't want to do in jubilee it's having all of the what ifs what if a theme want to do this what if a theme want to do that what if what if what if what if because when you do that kind of development you never gonna get first of never gonna get things specific second of all you need to make everything overly generic so you cannot like pinpoints of things so if you started dropping that we could actually be able to you know make a theme system that's quick and works works good instead of trying to take care of a hundred percent of all the issues how about we just take care of 80% of the issues if you have the last if you're one of the people have the last 20% of the issues well if the theme system is flexible enough you can just fix that we will not we will not try to enforce that on you that's like one of the reasons that we have three days around everything and stop dumbing things down and what do we mean by dumbing down one of the things I got known the first time in in jubilee was why we have the content variable you know inside of a note TPL we have that wonderful content variable that you just just a big blob and like well the reason it's all there it's like so we can like we easily wrap it around and move it around kind well I cannot move anything inside of it no but else it's gonna be like really hot like seriously now I have to do a preprocess then I go in all that way that should not be so I stopped stop thinking that the theme is an idiot and actually say hey they do it is the development and we kind of said all these like front-end experience about stuff from nothing salt don't do not solve the problems but the right tools have visibility and consistency and all kind of like these like different things so we ran around for that for like two years and tried to build on that and then about two months ago with a survey and the survey was to figure out are we actually on the right track we got 499 answers within a week which we were pretty happy about I thought it would get 100 answers and that was it but 499 people actually wanted to answer this and and basically it told us that who we actually are as like it's we are a bunch of people who have the funding is have a long experience of building websites you also say they're old or experienced I do see myself as an experienced man just turned 40 I'm not old but it do also say that we have a lot of experienced people are used to building stuff we don't need to protect them another thing that we asked actually was no what do you what do we actually want so one of my my issues is I want to have a complete naked group coming out I want to write all the markup all the glasses everything and I thought I was epically right on that the other kind of side of that is a way you know like the same thing works which way more based on having class names and the structure and things and so what we figured out here where that well majority wanted actually to have something like out of the box they also like to be able to change it and smaller group or a little bit more okay we actually want to have a complete in a completed control of everything and then you had a very small group of like you know I don't really care which was really interesting and another thing that came out was this we asked about the cc of preprocessors how many actually using that out of 499 people 378 is using says 105 is using less then we have other and shit god damn it my screen is and we have about 80 people be like nah I don't use that so that's pretty interesting right that's about what 85 percent who's using a preprocessor and Drupal and themes to not use preprocessors right we're just putting everything out with a CSS file that's fucking dumb we are not embracing the own things we're using on a day-to-day basis why because of something something blah blah blah blah that's dumb that's how I know when I go into an issue queue and I get smacked around by developers that's how I see it like there's a yada yada yada yada like well it's done so I won't do a really quick survey how many in here uses grunt or gulp how many here are really afraid of getting to use grunt or gulp or sass or that kind of thing like two or three people fine good I'm very glad for that because that's actually a thing we're gonna do in the future we took that decision for you all yesterday just to make that clear thank you now we had a meeting a lot of us who are building belts based teams in jubal seven about how to do stuff in the future they're gonna come a plan for it later on good anyways all that modern stop talking about this and get to work what is the all the good shit around jubal eight that's so much better than jubal seven well first of all it's HTML5 yay what does that mean well it means that our markup can be into look like this this makes me happy in so many ways another thing is jubal eight will not support ie6 it will not support ie7 and it will not support ie8 yes you can do this what does that mean that means that we can begin to actually do things really really pretty we do not need to add all these classes we don't need to do all this dumb shit we can use CSS3 to build it all up in jubal eight we will also have pretty markup this by the way is can all be this man over here mr. Lewis Newman Lewis Newman Lewis Newman the prettiest dude over here has kind of been championing on this it only took what nine months to fix this yeah later on I'm gonna talk about how important is you all come in and help us out in this uq so it only took 25 seconds and a day to fix it this is when you open up a new jubal site and you do your install for the first time so what you can what you can see here is actually how nice the markup looks this is jubal install directly out of the box you can already see here what we're using some kind of smacks naming techniques at this point but also there is oh responsive the hot thing right we can say jubal eight is responsive sweet it's the the amount of classes the amount of markup that we're using now is actually built in a way as we as fundender wanted to build so check that out body class install page I do not I do know it's very confusing for us it doesn't have the html class anymore because I had no idea I was on a side does build an html no so that's kind of that's that's out of the box how it actually it works now let's see here another thing is that we're moving bad practices IDs when you open up stock now you will not be exactly IDs what are they doing there well it's so you have kind of a unique place on your page every time you know you need a note ID for every note I I don't even have words for that well I have those words for it but trying to behave we're removing all of the IDs because it's dumb and stupid and do not belong there you use IDs for other things form fields for example could have an ID for them if you need that for like some JavaScript stuff or whatever but we're not going to use that for layouts because it makes no sense and by the way it also breaks our pages we right now we have an issue actually in the note CPL where we only need somebody to write the change notice for it and then we can remove the IDs from all of the notes somebody want to help out with that come and see me because I'm really bad at writing and I'm not a programmer I'm more of a designer so we need help on that anyways removing that and you will do 7 you had like a shit ton of classes on a body tag and whatever in 2018 well first of all we have to move them a lot of them already but we're also gonna talk about what we actually need because how about we build a theming system for themers by themers that's kind of the idea for it and CSS structure the CSS structure is gonna build on kind of a medium thing between snacks and BEM how many of you was in seeing John Albin's talk so you kind of saw that this that that's the structure we're going for there's a whole documentation on CSS structure and how we're gonna do it we finally have CSS documentation in Drupal which is another good thing and CSS files names a long discussion it is have been approved even by me we had this discussion in in Sydney standing looking over the ocean that was that was nice and actually failure how to get this done namespacing as well logic in the car name files our file structures have changed a little bit because what you can do now in jubilee you can drop your theme in a folder that is in the root of your site that's called themes you know how we always open up our jubilee site seven first first time and you put your theme in that folder called themes because that made sense and then somebody at your theme at your team yelled at you because you were doing it wrong you go to sites all themes something oh god damn it now you can you can actually put it in themes and that's where it belongs exactly thank you yet you don't know you don't need to look look like an idiot on a daily basis anymore you I said don't you don't have to you can me and that's what back to one of the things about provide visibility how about we built the built a system we can actually figure out ourselves the whole file structure for modules so if you have a theme and you want to figure out oh crap I want to go right this file where do you find the template file for it well you go into modules you find your module and it's gonna have a template folder with templates in and that's where all the markup lives wait a minute all the markups if they're yes there is no functions anymore we are very sorry for that debug is another new thing and this is if you have not seen this before be ready to get your mind blown so in jubilee seven where's my template well how do you find your template well you look at the class name right because the preprocessors gave it the name so if it has a note class name it's probably the notes fair enough that makes sense if somebody told you the secret handshake about that and you can then use a week of like grabbing through your side and figure that out besides that dear developers next time you tell me to grab anything I'm gonna smack you I do find I don't know how to do grip so in tuple eight when you go into your settings file and you go and see settings trick debug true magic will happen this happens what is this let's look at that little bit closer it prints out let me just I cannot point so as you can see it says file name suggestions note articles note three note view front page no view front page page one and note HTML tweak and then it says begin output from and then my direct path down to where it lives exactly why why didn't we have that before so now when you open up your theme you said you said your debug to be true you can just point directly to the files another thing that the theme name suggestion does is like a hook suggestion so if you want to overwrite this you have your right names right here you don't have to guess them or do a theme preprocess something figuring out printing it out on the page what was the name for the theme hook suggestion that kind of way you just get the file name right there so you can actually just go in your browser right click on it copy the name out create your new file grab the file from the place and be done with it I do know as a job security thing for a lot of us it's been really nice it's been so hard to get into jubil theme but I do would like to use my time in the future to actually do front-end work instead of looking for files it is though in jubil 7 if you like this kind of thing the epic mothership do have it built in already in a really really terrible and bad way and I'm really glad to work with talented people over here who I can kind of throw an idea off and then they do it in a nice way because it's not so good yes theme functions we could actually do a whole minute of a little bit of silence for theme function because they will not exist anymore what does that mean that mean you cannot hide markup anymore from your front-end that you have to put it in a template file that you have to put into a folder called template so you can find it again all of them dead now by the way have you killed them all we like no 60 60 you still have 60 functions hidden around and we still need to kill but all of them have patches they all need markup review yeah so we need actually people again to come in and help with this but that means that you as a developer will not ever again do a theme function you have to put it in a template so you can actually find it again this is kind of way back to how do we do a system that's good for all of us and another thing that you need to kind of understand from the get-go is like the theme files are compiled and me as being a dumb front-end I don't understand what that means it's something about it creates P and P stuff and shove it over and to me it's kind of like using says it just does the stuff for me until the rest of the system that's just the only thing you should know about that actually if you want to really know about that stuff find krill and he will he will talk on you for like an hour about it I did it once mistake because he thought I was really interested and I just needed a quick end as we like it ended up like we're compiling all the files and putting in a place or if it creates PHP for us developers fine done all right by the way is killing the theme no I'm not going to yell about that because nobody does that if you see because this is how I do my sequel stuff right this is how we do every select statement in the world always just do a start to get it all that's how we have been building you know if you look at the markup here and with the classes that's how I felt for a long time we did our stuff developers want to have very specific data out which I totally get I want to have very specific classes out so we try to kind of like not do a select from star select star from users branding and logos you know we usually should be a block that is not a block anymore that is actually and it's used to be hard-coded into a template that is now a block so you can actually move that around in your layouts instead of having that hard-coded directly into a page TPL no sorry page template it's not called a TPL anymore I had like seven years of stuff I need to like remove out of my head another little good thing I'm in with CMI what you can do now is you can actually pack your theme with configuration at first I thought why would you do that and then I looked at image styles then I looked at my theme like wait a minute baby I can now build a theme with images that fits my sizes of my site and I can then just ship that that also means if you want to let's say oh views I don't like that you wrap everything in stuff well it's just a configuration so they can pack that with your theme as well it is pretty pretty powerful stuff and look into at some point we're not going to go into that today because we have so much stuff already but that's just get your mind like moving on that CMI actually gave the theme was the one thing that we needed the most I think besides of clean markup and all that so let's let's look a little bit quick into trick based again actually I think it's so easy that all of the companies who's doing training is going to be out of a job in the front end and I'm not sorry for that so if you look at basically on it no comparison between PHP template and twig have a comment and that you do these curly breakers and a and a hashtag it's just a comment that is by the way a little bit annoying because that means that the way we do erase and and what I called objects and all that like with the hashtag in oh yeah so your keys is kind of like tricks things in a comment it's a kind of noise we need to figure that out because render arrays still exist we have to deal with that so yeah we still have if you're trying to dig a little bit deeper into the the objects that you have in your in your template sometimes you have to use hashes and array key access to get at them just because they're still renderable arrays anyway so a comment is though these we call it a to walk on that's a whole day as a dain this is very confusing to say but have these brad curly brackets and our hashtag and that's a comment if you have two curly brackets that's a variable and that's what you need to know about that so in in triple we used to have your go print your variable name and then you can drill into it to go through bar something something something and then you turned on multilingual and then you got that and thing and I was all thought about what is this means I live very close to Germany so means and I was does this mean it means also meant that if I turned on multilingual on a theme it would not work that was just ace so what you do now instead again job security or rather pissed off clients yelling at you what you can do now is that you do this like dot notation in where you drill into the variable so where where we used to have drill into an array you do this time is it is it an arrow or is it like this and how is it actually defined now and in twig you have like a simple way of doing it go just with dots between is a go through bar past or find my stuff that's how you find your variables that's actually kind of sweet and there's also a dump so you can get a whole dump or and see the how it's actually structured if you want to look at doing it if else command so into both a psp template you know it looked like psp now you have instead you have these percentage sign and that's kind of how to tell this how it's how we tell twig hey you kind of a function thing you do now you do magic stuff so you go if through something and then and if it looks very similar to psp and so if you're used to doing that it's going to be that easy and we can do loops as well which is pretty nice so if you have an array with a lot of stuff in let's say the most awesome team of people ever on the earth and you want to do a loop for them you go for users in users and you just drill into that loop and go through it it's that's that's the only kind of thing you actually need to understand here the beautiful thing about the loop and what I first had to figure out like wait a minute should I just think of all about that stuff as a loop was okay how do I figure out my third or fourth loop or the first and the last and there's a loop linked you can take your loop first loop last loop index you can also like to so you can do if you're the first loop be green else be blue if you're not but sure you can do this you can do that kind of way I'm gonna show a real example of how we can actually do that and how we can defend you the sign on the same same time and set sets a variable so if you have a lot of like different things coming out to a template and you kind of want to build a variable here my example is I want to build a count was a one I use as class names you do here do a set foo and then I do the count with my loop index which just adds one each time and then I'm gonna have count one count two and so forth so it's got a small little issues that's pretty neat to work with filter is another thing so if you want to do magic stuff with your variables here I want to do an uppercase you can filter your stuff in another way to do filter is having this pipe so they have a variable and then you do a pipe on it and then you can do all kinds of stuff basically on the pipe you can do all kinds of crazy functions that I know Joel probably is gonna go apron oh further down these two boys every time I work with them all like hey you can do this pipe and then you can add a pipe you can add a power I get a little bit confused I'm not so clever but you can do all these things so here if I want to do on my my my name variable I want to do you know I want to strip up the tags and I want to make it a title so I get up an uppercase first letter that's how you would do that so like manipulating your data directly in the template is really really easy so and that that was actually all you need to know about twig there's not more to it well from from my perspective from the dude who takes the template files and just put a little bit of pretty on it and make your side look ace and I say I claim I claim it was me who built it that's what I need to know so what I begin to do was actually building a theme to figure out what all of this stuff does because if you look at the theme only from an academic side and you don't do it in partial you're gonna burn a lot of pages you're gonna do a lot of dumb things so I started this theme called eucthrasial and eucthrasial is by the way this is eucthrasial I made posters for it because I have a slight ego issue and eucthrasial is I'm out of Denmark and we actually we actually claimed America Vinland as we call it we claim that before anybody well there was some Indians who was living here at that point but besides at that we were here before Columbus and we are still a little bit pissed off about that by the way just saying so eucthrasial is in the in the Norse mythology is the biggest most badass tree you can find and if I build a theme I'm not gonna build something like a trick that can like easily break I could call it birch that's a little bit too much ego right so eucthrasial instead and adding as much Thor and Odin and Freyja and all of that stuff on top of it I have like a hundred of these posters with me so if you want one come and claim it afterwards the idea was to begin to actually play around with this and figure out what works and not works and that's been really really fun so it's all over on github right now cause I was playing with github that day anyways it's a place to actually go and go and see and play around with what how the theme structure now is in jubilee is so you can see it pretty much the same as we had in jubilee 7 you have an html.html.trick file that kind of encapsulate the whole page then you have a page html file you have a region you have a block you have a node you have a field so that you don't have to relearn it's totally the same as we used to have it when in jubilee 7 you have this was your info file you define your region style see you were probably doing some some foad and the css files to remove stuff you didn't want and don't kind of wait well in jubilee 8 it changed a little bit but as you can see it's pretty much the same it's yaml files instead right am I actually missing the yaml did I do wrong god damn it so yeah this yaml right yeah this is my new info file and what we have up here you have your name for it type it's a theme description which parody is which version is and then we go have the style sheets for all and for print and what's this one style sheets will remove how many things can you figure out what that does you have exactly so in jubilee 7 you call you told jubilee and use this css file that you're using another place and point it to my own theme and then jubilee is dumb and jubilee things that they already got that that that file in and it forgets all about because you cannot find it it's a pretty dirty way to do it what you can do in jubilee 8 instead is just to find the files you don't want to have so if I don't want to have system theme and user icons or whatever else I don't want I can just add them here and it's a style sheet remove so now we also kind of get like logic interest and two other things defining regions is the same thing you have regions you have header logo and so forth and that thing so that's just your info file if you really like pxp template and things that all of this stuff is not using functions and clean way of doing it and having themas that likes you again you can add in engine psp template so you can go you can if you have an old theme you don't want to upgrade and stuff you can still do that personally I don't understand why we're keeping it in jubilee but it's kind of one of these issues like yeah whatever it can lay over in that corner kind of like the poll module did we get pulled out in jubilee so yes finally how many years did it take eight yes foad is built-in regions on a page so when you go into a page template now and you used to do an if you variable page further thing you would print it out that way in jubilee it's really really it's even more simple you have a page further and you call it on that that name test it if is it here then you print it out then you wrap it in stuff that's how it also that's how your regions works now just remember you have page dot your region name we're still having blocks so in jubilee we had a block that looks like that and as you can see down the next example it's the same thing we're doing so a lot of these things we're used to is kind of the same has just changed a little bit so that's so the thing about these blocks is as you know let's say you have a nav navigation somewhere and jubilee as you can see here is doing it perfectly wrong and you want to change that you want to change it to another tag you want to do something with it well how do we do that so in jubilee 7 you used to write the file we're doing it the same way now in jubilee 8 how you're going to do that is let's say you look at the block html.trick file you open up you do an inspection directly from your from your view source from your browser you get your oh calling block hmm okay it's a block file name suggestion grab that file name and then you can jump in it what you then can do with that dump of your new file is actually into manipulated and the thing we talked about before with the pipe so let's say I want to I want to remove a lot of class names that comes out what I'm going to do here is I'm going to take say do a pipe replace so we have the we have the attribute class and the role in attribute role if you go up to the top line of it you can see attribute class pipe replace and I remove the block class name that's how you would on the fly just remove these things kind of like small little tweaks instead of doing it you instead of you go into a pre-process and try to grab it out you can see directly in template and you can manipulate in template that's the thing you can do all around with attributes nothing on the attributes that comes with so attributes on our markup would be class names the role if it has an ID if it has like data fields whatever it has that's all packed into the attributes and what you can do with attributes is you can separate them out so you would you would say hey if I have my attributes but I have my class in a specific place I can rip that out so in the last line down here you can see it says attribute the class so I rip out the attributes and I put them in a class the good thing about that is if I want to add in a class name really quick that would be the way I would do that so here if I want to add foo I go in and say article class or equals foo and attribute class so I separate these two and then I print out the rest of the attributes and that that would be the way you would like to manipulate these things so when you have specific needs you don't have to do a pre-process and trying to figure out where that comes you simply just spit your things out and then put your class names in where they should belong so that's kind of like the overall all thing for Francis I am I was sitting and looking like different examples of dumb stuff I have been have had to do for years for different designers and one of the things I had was like an example like this you get a comp like this and the designer tells me because you work with a company where they don't do HR they don't talk with you before anything you know you get this in its set in stone and that's just how it's going to be so in Google 7 if you have your terms and you were told to do this you would probably have to download a module or go very very deep in it on this understanding of how a lot of Google module things works and if you want to do the same thing in Google 7 and the thing I want to do is I want to do a count on all my terms that comes out I want to have a comment between each of my my terms on my and the second term needs to be green and italic I don't know why it needs to be that but that's just how it is you got that from the designer I have to follow that and the last of the terms need to have a dot in it fair enough though I do think the designers an idiot and I hate him a little bit for it I will take revenge in my source code but you know when it's set in stone you cannot do anything about it so what are you gonna do or do the usual way of doing that in Google 7 be something about trying to find a module finding a fork poking yourself in the eye a couple of times hating life down to another module ending up doing some like regular expression crap and just be like why did I use two days on this I know exactly how the markup should look it should not be a problem so the first thing I would do now to play this all day hey my markup is gonna be this yes I'm adding in the designer is an idiot class because the signers an idiot class makes the makes it green and italic so revenge have been delivered it's an important thing of being dain so what I then do is I go out take my note and say hey you know what note how about you give me all the tax so I do content dot field tax that's the that's the name for it and then I do a content without field tax so that content variable down there that's the one that's gonna print all of your data out to the note so you start out ripping it out and then you can print out your field tax wherever you want on the page so now you can begin to like move it around as you as you want to you could kind of do the same thing in Google 7 with the whole array thing from a page it was a little bit more complicated to say at least at least for me it was this to me way more simple the thing about the whole content is that you do a do a without is pretty much we just explaining to Google hey print everything else out than this and then we put out the fields and then you can take that field in place wherever you want to do that in your template in your note then what I do inside of my field dash dash field tax dot HTML because that's the template name I got from the jubil system copied that in what I do there I say okay let me figure out how to work with this it's a loop I do a full Delta item in items what that basically means is hey fire up a loop fair enough okay so every time I go through this loop I'm going to am gonna add a couple of classes into it and the reason I had these classes in because of course the client also demanded this to work on IE 8 so I cannot do it just in CSS right also could just do a count on it and use nth type which is awesome but no no I have to add in class is fair enough good so I do a set class I create a new class now I'm gonna add in I'm gonna do a cycle and I'm gonna do an odd and even on that that Delta that means that every time I go through a cycle I'm gonna get one of these two out and then I'm gonna do a count dash and then a loop index and the reason I'm gonna do that is to also get a count so I know how far down I am and then you know you print it all out fair enough as you can see in the the link has the class name I just defined with the item in and that's gonna print out odd count one even count two and so forth so now I have the markup I actually need to add these things in it's still not beautiful because I want to add in the designer isn't idiots because I want to have some payback so to do that also by the way he also want to have tax versus tag because you cannot just say there's one tax you know there's gonna be a content editor after you've there right there so to do that what I'm doing here is okay you know what when you you're the first loop how about we we just count on this length of the of the loop and then we count on the length of the how many when I have a count on my loop I know how many tax there is is that tag or tax fair enough then I can print that out like developers in the room like oh shit you just put logic into your theme yes I did get over it and so what I now want to do again of this like what we called front-end logic is like some of these like so small things it doesn't make any sense to yeah but in like it's just right in front of you they were just this to me there's no reason to feel that dirty over it so on the second of these terms coming out we know we want to have it to be green and italic you know we have a class name for what the design as an idiot how do we do that well I do an else if the loop index is on two if it's there on two but what you then gonna do well you're gonna just gonna add in that exact class as you wanted just write it in and then you're gonna have as you can see the markup down there that kind of structure instead this is me just creating the markup I want so the the whole thing will actually print out to this as you see here is the loose first wall no chasing it takes on the length on it we have our class you're gonna print it out and we have the designers an idiot on this loop index two if you had the last loop you know that thing about the the dot over here we need to add well fine if you're none of these well then print it out completely as no one with a comment between and that's how you're gonna get your markup out Drupal 7 I have no idea how I would do this besides of being really frustrated this took me about 15 minutes the first time I opened up twig and had to figure out how to do this that was without looking at documentation or anything else it was just hey how about I just try this out it's fast and intuitive and really really nice to work with and it kind of for us over here when we figured that out how easy was it we it was pretty much a party that day on our c by the way which is the place to have the und und und party all right so another new concept that we need to figure out because of course we're gonna have name scheme obscures we're gonna have a block you know good old jubil block then we're gonna have a twig block what is a twig block well well I explained it to you now so in a twig block is at a certain part of the template that you say is gonna be replaceable by other templates okay deep breath template have a section on it that can be placed by other templates fair enough what can we use that for well let's say you have the front page you have your page that's front HTML the twig file you have that one and what you want to do is you want to replace a part of it so back in Drupal 7 you would do two different pages but if you just have a little little thing you want to change on the front page you want to add a big banner that says support us or whatever and then then you would have to do two different templates two different templates between means that every now you have a maintenance problem now instead you can actually exchange that little part so you do that by defining a block and then through a theme hook suggestion doing that so again you go down and you look at your file naming which is our suggestions and you then go okay so in my page here I'm gonna do I'm gonna do a header block so that's just a name I give it I could give it whatever you want so my front page I'm gonna be okay if you're on a page fair enough if if you're on the front page you need to change something out so no header block is defined down up here is inside of my page I then from from the name I know from my theme hook suggestion I go in and say page dash dash shunt HTML create a new file so now I have two different page files one have all of my markup and another one is only gonna contain this little thing I have in my blog is then going to explain to the system you extend this template file and it seems to proceed all templates page HTML the trick fair enough if you if you detect that one anywhere well exchange my header block which I have here up here exchange that and then no explain to me I'm in the front page and as a live action there we go so live action shot of this is here I am on a very specific note 3 on my page and here I am on my front page done and simple this means the next time you're gonna open up a template no a theme and it's gonna have a lot of little changes you're not gonna have that mess by maintaining your four different pages or even better 200 different notes you can do this on an on any template you want to extend on you want to do this whole block thing do you define a block inside of that template and then you extend on it and that's a quick and easy way to work around that issue of maintaining 6000 different templates another thing we're gonna have in now in 2.8 and that is hold the whole translation thing translation in 2.7 was a little bit of a pain in the ass when you're writing it in one of the things for it was like the syntax was complicated you know this was how it looked first when we got trig in and you can see that there's a lot of room to do errors and it's not nice to do what you're gonna do in 2.8 now and hold on to your horses is you're gonna do a trans tag which I think we have which by the way I think is really funny because trans is also in Germany a music thing so and and and trans trans and and but translation is or trans is how you define data on your template that should be translatable so here if I'm you know I'm having a part of translation that needs to be translated that's just what you put into a template and be done with it so the syntax is really much cleaned up so that's actually how twig works and how it is a thing that we have figured out how long did I talk only for an hour yeah are you all dying okay so my we're gonna have a break very very soon I'm just gonna do the last like page on this and we really need more front-end heroes I am the only one who's still standing since San Francisco and that took us two years that's not how you sell sell it right wait a minute well okay let me put it this way I'm not very clever do you trust me with your front-end that's the whole thing we need more people in the issue queues we need front-enders in the issue queue why do we need that because it is our system it's not somebody else's system it's our system it is my fucking system it's your system the thing we have been doing that was the biggest mistake ever for years was not to help out our developers to actually make the best markup possible the best CSS finding all the front-end trends if you went and saw a web check session yesterday about all the new hot things that happened since grunge was a thing back in 1999 and saw that she said well she was actually really scared of getting into front-end of course because she has not seen any of the things that have happened the last 15 years a whole ton of our developers of course they don't understand that because they are doing database stuff and all of that thing I don't want to touch I just want to help out we're doing the thing I'm good at so we really need you really need to come in and help out and especially your opinion and we will actually listen I do know that sounds like lies but it's not because if you have this is kind of the whole team of us who has been like contributing within the last like activity weekly meetings and stuff that's not enough to carry on how every double page is going to work on the front-end for the next four years seriously we're powering a couple of percent of the web we actually need more people actually another thing I've been thinking about and I actually asked Joelle about a couple of days is well if you're going to have companies hiring in double people to actually do jubilee to get jubilee out how come we don't have any companies hiring that let's say one of these two freelancers we have up here today on the stage to actually help out on jubilee and all somebody throws money at it and say hey we actually have a we have money to hire somebody to help out with this because getting this whole thing working takes a lot of time if somebody knows a project manager they really want to help us out because that's another thing planning and organizing all this stuff takes forever actually during jubilee death days I flew all the way to Chicago to sit down with Kotze for four days while we had about 300 developers in second so I live in Europe I fly all the way to the other end of the world in Chicago I'll tell my Packers fans it kind of feels a little bit strange to be in that city to sit and try to plan out all the thing our developers was doing on right next to where I live that does not make any sense we need a project manager to help us out and crack the web on us one of the things why I want to have I want to have Jen home to the SUQ where she belongs and doing jubilee twig and we need that and we need we need somebody to help us out with that another thing is if you want to keep on like following our jubilee twig initiatives the hashtag jubilee twig is kind of the thing where we yell out new new exciting things the if you want to figure out what we're actually doing we are we're running a hangout each Thursday the reason it says 1 a.m. that's European time which is really shit because 1 a.m. means Thursday morning and 1 a.m. I get out of bed and sit and talk with these two fine gentlemen I am dressed I'm fully dressed at that point I'm just going to warn you no it's a it's at 4 4 p.m. Pacific Standard Time yeah it's a hangout what we sit down and talk of what we're doing this week and figuring out and talking and discussing and no are we doing it the right way the wrong way and we have a lot of this and we caught them as well so if you want to see the last three years of discussion between us you can follow them all there's some really fun fun ones from second by the way we have very young developers talking with me and concept that's that was interesting besides of that join us on IRC we are 24-7 there cuz I mean I'm in Europe and then the states and we have people all around so there's always somebody to help you out if you want to figure it out we're also using a slack app to try to keep connection ping me on that if there's a thing you can be interested in on Friday we want to coach but how many have developed for Google push code in good so many of you who's going to show up to call mentoring them because we need that I mean and you could put on your resume I'm a doable call developer how many here got a patch in ever to do call did that feel good yep it's a very specific feeling when I got my first thing in I was dancing around my living room at 3 in the morning I was trying to get hold of somebody who would appreciate my enjoyment it's Friday night I go down to a bar and I figure out there's nobody in the fucking world I can share that I've removed all the IDs out of a page there was nobody there to enjoy my moment that was very sad for me yeah no that's on Friday that the important thing about that is even if you don't know what to write a code we can actually help you start out with it even if you like hey I don't have time for that but I do have an opinion on it hey can you show me how this works if we get the word spread out and figure out it takes some times before you get into the issue cues and sometimes you get a little bit tired of it I just took like a three weeks of I need to break I'm kind of like getting myself up to getting in there again if we have more manpower more people to be in there we can actually get more done so coach been on Friday and it's actually gonna be a ton ton of fun I promise that another thing is in Copenhagen and the end of August we're gonna do the fifth front end united a YouTube called Google design camp but that sounds so unsexy front end united still have a little more punch in it gonna be a two-day camp where we're just gonna geek out only only pretty much only front enders in the room we see it as front end development so there is also gonna be a ton of JavaScript geeks and all kinds of that so it's kind of a and the focus on this is taking also new things coming so we're maybe not gonna have a grand gulp whatever pushing that in to get our front enders and you will to begin to look at the new world and what's happening if you don't want to come to my fair beautiful city I will not hit you for it where did my slide go God damn it a month before front end united in Copenhagen there's design for drill in Boston first to third of August it has more of a design feel over it I have I do have a plan on attending and hopefully getting a lot of other front enders to attend as well so we can run a couple of spring then get in the room and punch on it yeah so if you didn't hear that is he's the content chair for the conference so we bribed him to get our sessions in the good thing is they took half of these sessions is gonna be designed the other half is gonna be front end developments so that's kind of the thing we do in this room and yes he would like to see them and we should actually okay so to this any questions we did we've been monitoring the Twitters and we've got I've got about five questions here that will answer after the break so we want to give you guys a break so we've gone all just a couple minutes over so how about if you come back at five after five that's in alright thanks for sticking around or coming back everyone I'm just gonna start with me and Joel will answer a few of these questions that you guys sent in on Twitter's thanks for doing that and then we'll get into some of the live demos and fun stuff so yeah we'll get into it so Rodney asked can I use angular JS with twig templates and if yes how's how does the syntax not conflict I haven't tried this but my probably short answer that I would give is that if you're using something like angular you're probably more so using the Drupal 8 rest API and so you're probably bypassing the actual Drupal 8 theme system and just getting the data so I don't think that there would be a conflict with that to my knowledge next question is what is the L prefix on container as far as I know that stands for layout it stands for layout comes from smacks and then Shane Jeffers asked where's the CSS documentation you mentioned the quickest way I found to get to it is go to Drupal org and search for CSS architecture I'll let the Drupal com Wi-Fi sort itself out there and then Eric asked it isn't loop index equals equals to off by one for the second item this is talking about Morton's example his slide probably didn't look exactly like this but this is the rough idea if if loop index equals equals two so to my knowledge that's correct Eric was saying something about yeah it's it's it's one index not zero index so there's if you go to the twig documentation on loops it gives you all the variables that are available so by default if you do loop index it's it starts with one instead of zero so that's that's my answer on that there is index zero yes okay so yeah searching CSS architecture okay and then if you do div class equals sunny asked if you do div class attribute class and then attribute will attribute print all attributes including class which is already present present and yes it will actually to do that now you would have to do attributes and then pipe and say without class I can actually it's probably easier if I just show you that because we do we did Joel and I did a talk yesterday so I can just show you the slide that has that so this is attributes are an object in Drupal 8 theming so they know how to print themselves out so you can do you can split out the attributes and then you say attributes without class so that you don't get duplicates and this without filter is something that Drupal added to twig and in just a couple minutes I'm going to show you how you can add your own filters and functions to twig and if you've got your laptop out and you've got Drupal installed you can play with it and try and add your own stuff too and by the way this without filter works for render render arrays too so we got we got rid of show and hide so yes and actually while I've got my slides I might as well just kind of tell you who I am because you probably don't know who I am so my name is Scott Reeves I go by Kotzer on the internet I'm a developer at digital kid now we're 30 person Drupal shop in London Canada and also a silver sponsor of Drupal con I love Drupal con Drupal theme system co-maintenor and Joel is as well and Joel let you introduce yourself later unless you want to do it now okay yeah maybe we'll just do that now Drupal core mentor that's the core mentoring program is a way to kind of dip your toes in the water of of helping develop Drupal and that's that's how I got started highly recommend it I'm just kind of passing that along now and yeah hello my name is Joel Patet and I've been doing websites for a while I do front and and and back end so I kind of try to I sit in the middle somewhere and try to make designers talk to developers translation is what I do and then there's I'm also co-maintenor of the theme system and I like parolees this is a giant pierogi from Northern Alberta and I found it so I giant all right thank you and actually before we jump into it to be nice to get an idea of who you guys are so just do a very quick poll it'll take like 30 seconds so just throw up your hand if you are a site builder should be pretty much everyone okay great themeers awesome developers awesome and dev ops like to throw in some wildcards cool cool anyone who doesn't think that there are any of these okay right so what's that oh yeah yeah then you just keep your hand up the whole time that's awesome okay so and by the way if you do have any further questions you can tweet it with the Drupal twig hashtag like so and we'll just take turns monitoring them you can monitor them and yeah anyway so you can tweet questions there you can come up to the mic here but it's kind of there's only one it's way over here so Twitter is easy all right so and also you might have to bear with me got a bit of cold I'll give me one minute all right so let me just close some tabs here so anyway yeah actually just to kind of close this loop the CSS architecture this is some of the documentation and then if you go to the sidebar here there's more CSS formatting guidelines file organization all that good stuff so that's all the CSS Drupal 8 new stuff I I believe so I mean it I think it's pretty common well that that's this the stuff that I was just showing you is specifically about CSS the theme system and and how to use twig and Drupal is not fully documented yet we're still working on that yeah so okay so I threw a couple comments on this the session node for this session so if you go there it is let me see I don't know what node ideas it is looks like it's 2828 but anyway we've got super mega ultra twig without Drupal and axe and then we have the special guest appearance of twig entity in bed so if you want to follow along these are all just actually sorry the twig without Drupal is this special I don't think it's a module right raise it a module it's a file okay so it's okay so if you want to follow along grab twig without Drupal I guess just goes in its own thing put it in your root of your web root okay so yeah and then super mega ultra axe and twig entity in bed are all modules those can go in the top level of your let me show actually show this so you don't there's not normally dot idea and foo ignore those but in the top level of your d8 install there's a modules folder and that's where I've got super mega ultra and etc so I'm just gonna go through how to extend twig the the very very basics of it it's actually very similar I'm kind of happy that it's very similar to how it's done in symphony land so if you're familiar with it in symphony I'm not I've never never used symphony but if you're familiar with that it should look very similar so so I've got an info file for my module and the more important part here is this services file so this is just declaring basically the classes that are in my module so I'm declaring this is kind of giving it a machine name pointing it to where the class is giving it the full namespace and then very importantly I'm twig twaging it twig tagging it's tagging it with twig extension yeah it's not working okay and then within that class let me just close my little side panel here okay within here you you give it a name again that's kind of a machine name and then all I'm doing inside here is implementing a couple other methods get functions and get filters and what you saw if you were here earlier for Morton's talk actually how many were here for the first half okay so pretty much everyone okay great so yeah functions let me just actually uncomment some of that stuff okay so this first one here can everyone see that by the way should I blow that up a bit more okay thank you so on the first line there I've got hey Austin and then I have pipe and classify so that's a filter filters are mainly used for doing some kind of manipulation on a variable that you're outputting and you can pipe multiple ones as well so it's very cool so the first example that I did it's actually at the bottom here so this is an I classify filter so this is if you have some kind of piece of data someone in in New York camp actually kind of gave us this idea of and both these examples are in our opinion something that we could just add to Drupal core because they seem generally useful so classify what what this is doing is saying if I use the classify filter in twig hook it up to the Drupal HTML class function so the second part of this the second argument of this is just a PHP callable so it can be any procedural function or it can be a method on a class okay so all I did was I opened up the bar tick I'm just using the default bar tick theme here I opened the page dot html dot twig and I put in hey Austin and then pipe classify and by the way before I forget for some of the stuff to work smoothly I would recommend that if you're playing around with this stuff or if you're following along right now to get the settings dot local dot PHP setup so this is a sort of a more recent thing in Drupal 8 I know I use this a lot on Drupal 7 site so it's kind of nice to see that it's actually the convention is actually kind of there now so in if you go into the sites folder in your date install you should see this example dot settings dot local dot PHP and importantly it turns off the render cache this can be really frustrating if the render cache is on because you might update your node template and you don't see anything change it's because that whole rendered node is cached in the database and then a little further down we have our our pal twig debug which is amazing in my favorite thing the world so all I did was I took this example that settings dot local PHP copied it to my sites default folder and well rename it to settings dot local dot PHP I shouldn't say all I did it's a few steps then you go to your settings PHP at the very bottom ignore all this stuff at the bottom but right here this should be near the bottom of your settings PHP but they'll be commented out so this is saying if if there's settings local PHP included so just uncomment those lines and it'll be reading this one then the only other thing I did was uncomment twig debug all right so with that all said I've got just a normal Drupal 8 install here let me just actually make it a little bit smaller so it's less responsive you looking okay so I've just got a normal well yeah I refresh it there so at the top here we've got hey dash Austin so it took out you know took out the space replace it with a dash took out the exclamation point because you can't have an exclamation point in a CSS class right so pretty simple but cool in my opinion if you need to build some kind of dynamic CSS class right and then we can do a similar thing for functions oops so we might want to close these guys we might want to hook up to Drupal get path to grab some kind of asset from you know from our theme or from a module or something let's say so I hooked up get path I'm just calling it get path in twig land and then mapping it to the Drupal get path function which takes a type so it could be core profile module theme or theme engine and then it just wants the machine name so now in my twig template now that I've done that I can do get path theme Bartek and then actually let me throw this throw some pre tags around here so it's a little easier to see and now we get core themes Bartek so this is I don't know I think this is really cool because some people when they first see twig or first hear about it like especially if you're like a hardcore PHP developer I'm a back-end developer myself in my in my day job but PHP template is not a templating language but anyway it's some people see it as sort of oh you're taking all my toys away but this is to me this is a much better way of doing it you're not doing database queries in your templates because I don't know if anyone's seen those sites but I assure you they are real there are sites out there that are basically building out the whole site in the page template database queries and all so yeah so not not the best so so it's this way we can kind of pick and choose and also kind of make sure that we're providing a improved experience for people who actually live in these templates all day right so that is that and let's do move on to this next one so this is the entity in bed so oops not that one so Steve Vector Steve Purge he works at Palantir I was just talking to him a couple days ago and he he kind of came up with this idea it's sort of it's almost one of those hive mind things because Dave Reed is was actually working on something similar just not with twigs so it looks like those those two will actually come together because there's already an entity in bed module for Drupal 8 that's in that has a dev version so likely twig functionality will be added to that thanks to Steve so and I asked Steve if I could demo this because I thought it was freaking cool so what this does is Steve did a let me see if I can bring that up quick he created he basically did what I just showed you he created a twig extension called twig entity in bed and then he's got his own function here which calls all the Drupal stuff and by default it will do a block for the entity type so in practical terms you can give it the machine name of a block Drupal entity entity embed Bartek search and there is my search block that I embedded from the twig template and you can see it down here too isn't that cool and you can do that of course you can do that for any kind of entity so if I wanted to embed node one as well my little test article here I can do that too and you can specify the view mode and all this stuff so it's stuff like that makes me really excited because the user experience of that is or the theme or experience basically of that is pretty great I mean you don't have to really know the guts of it you're just saying oh hey I want to embed this thing right you don't have to click anything yeah so exciting times so that is that and I also want to show how are we on time by the way 526 okay yeah something like that I'm not sure if I've used that one but alright so and then I just gonna go through some debugging stuff so if you grab the should have mentioned this earlier but if you grab the deval module which I'm sure we're all familiar with if you grab the latest like Drupal Drupal 8 dev version of the deval module it's a bit of a mouthful it's got a kint sub module in there which is actually confusingly it's completely independent doesn't rely on deval but anyway I've gone in and well basically at like a couple months ago I added a little twig extension to this module so that the kint would be available from twig template so that you could actually have some pretty powerful debugging right from within your twig template and I got committed and everything so you can have that to play around with so yes so let's let's actually do that so kint if anyone's familiar with deval crew mo kint is basically just another version of that a different version of that so it's kind of you know an on-page debugging thing to me it's a lot more powerful than crew mo it does some pretty cool stuff let me actually get that awesome thing back up because I there's a slide in here that's pretty relevant to what we're talking about so if you if you print out sandwich cheese this is totally out of context but if you print out sandwich cheese in a twig template twig does a lot of stuff behind the scenes to try and figure out which cheese you meant so using if you kind of tie that in with the debugging tools like kint like ladybug like crew mo whatever anything that gives you these sort of tools and if you are aware of some of these conventions like the get and is you can do some pretty cool stuff like you can grab stuff from within the template pretty easily so I'm just going to kind of walk through that for a couple minutes here so in my template if I throw kint in here and if I don't give it any arguments it's just going to give me all of the variables that are available also known as the twig context so it's just threw it at the top of my page here twig context is an array and these are all my variables that I have available to my template right now and but it gets pretty cool because you could do stuff like you could look at the user for example if you say you want to do something with the user in this certain template it'll it'll show you what's on the actual object but then you'll also actually get the methods so a lot of these are those get is conventional things so you can actually grab these pretty easily using that dot syntax so I can get I can get the user's email based on it having get email I can do user dot email and there it is cool so it just just wanted to kind of tie those two things together because I think like my my knowledge of the whole object-oriented programming thing is still fairly limited even though I've been working on Drupal 8 for like the past year and a half so don't feel bad if you're still scared of object-oriented programming like I still am a little bit too so but just know that once you know some of these little tricks and stuff it's actually not so bad so yeah that's pretty much my spiel again if you have questions Drupal twig on Twitter okay right I think we still have to go through a couple more things so I have two repos you might have already clone them already the first one is twig without Drupal and that way we're gonna look at what twig can do without Drupal and so you kind of get an understanding of how it works without the whole Drupal doing stuff for you and then the second one is a little module that hacks the Drupal core twig service so that'll be fun I'm gonna try to do them on the fly so it's gonna live demo and we'll see what happens but the actual source code for all of this is actually on those things and so you can cheat and just grab them and kind of follow along that way or you can try to keep up right at the same time I'm gonna start with the the twig without Drupal and I'm going to create it into a folder called twig on my on my Drupal I'm gonna put it in Drupal but you can put it anything you can put anything like loads PHP the first thing we're gonna do is we're gonna install it if you have composer this is the easy way like I said before if you can clone it you can clone that whole thing might I'm just gonna do the regular way so so composer require a type in twig twig colon one dot star that's gonna basically launch composer and it's going to install the twig right into my actually it's gonna put it right into my root I'm gonna move the things that it creates once it's done there the Wi-Fi might be slow on this one so I might cheat a little bit here usually doesn't take too long so yeah I'm gonna cheat so I already have it completed here so I'm just gonna rename this thing I put in a folder called twig just to keep things simple and what it creates it when you do that composer it's gonna create this composer Jason this composer lock and a vendor file none of these other things get created through that so I'm gonna create an index dot PHP the index dot PHP is gonna load a bunch of I'm gonna type in some stuff I'm just gonna pretend like that's not there so we use a composer and composer comes with an auto loader and that means we don't have to do any includes so in this case we're gonna just require the vendor auto loader so the folder was called vendor and inside there's an auto loader so we can launch that and that will make sure that all the PHP classes that come with twig are loaded and then we create a file system loader from twig that there's a couple different ones the two ones that I'm not that technical I'll try to not shake the podium or something yeah I can kind of hear it too you just back off a little maybe or well all right you can still hear me okay okay so there's two types of file loaders for twig and this one is actually gonna be loading the templates and inside here all you do is you pass it where you want to store your templates so I'm gonna store my templates into a templates folder and there's a bunch of functions there's a bunch of properties you can pass to the twig environment and I kind of annotated the crap out of them but there's I just created an array so I could pass them in easily and annotate them and then there's a cache and you can tell it where the cache folder is you can also tell it I don't want to put a cache folder in there and that's gonna save the twig that's gonna save the the compiled twig templates as PHP files inside of that folder and Drupal actually does that too and it puts it inside of sites default files PHP twig so that's where it's storing it we're just storing it in nowhere or inside of a folder called cache it'll create the actual folder for you so you don't have to worry about that as long as you don't write permissions on your patchy server there's autos auto escape and I have it turned on to true at the moment in Drupal it's not on we're working on a heart and chicks has actually got it down to like about I think he's got it about 400 fails out of a thousand since the beginning of the week so that's we got to make get rid of the there's fails and it breaks head yeah until we get those fails off and you know but we might put it in broken as long as the past the test pass so yeah then there's a strict variables that just make sure that you can pass in something that doesn't exist or you can actually try to print something that doesn't exist we have this turned on in or sorry turned off in in Drupal so that if you print try to print the variable it doesn't exist it doesn't blow up at you and say that doesn't exist so we kept that off in Drupal core and then there's one for debug and that's allows us to put debug messages like dump and auto reload kind of ties into the the debug if the debug is turned on then it automatically goes on anyways but you can also turn it off and that just checks to see if the twig file changed and if so recompile it the next part we got in there is the twig environment so I just passing in that loader created at the start and then the twig options these that you passed in and I get an object called I called it twig we can call it whatever you want and they've added the debug extension to this you don't actually have to have that but that provides us with the dump function and that's on also comes inside of Drupal then I made a giant array because we're good at making arrays Drupal and and I just tried to create a bunch of links those that that structure that I created is a nested structures because I wanted to kind of demonstrate a little trick and I'm going to call them the twig object I'm going to call render and I'm going to pass it in a file called page dot twig in my templates folder and then I'm going to pass all those links to that variable and it says echo so I'm going to print it to this index page so let's just have a quick look at the template file inside this templates file I have I'm importing another twig file so you can actually import other twig files in there I'm going to take that off for a second and that hashes our comments so that's not going to do anything neutered it and I can do the same for this one so I all I'm doing is calling dump I could actually just also just print a straight up string in there if I wanted to or I can actually do the same thing there so it's like and then whatever you want in your regular HTML I'm just going to see if this is actually working so let's go to the eight in my case twig folder and how do you test is there and you have the dump from what kind of the simplified dump thing that Scott showed you the awesome kint file for this is what comes out of twig so you can actually use this one without installing develop and it kind of shows you what you're getting so these are this is my crazy array that I've passed in so those are the variables I have access to so what I did here is I just kind of I created that structure on purpose because my my menu twig is going to get back to here my menu twig has a nice little macro in it it's kind of like a function but I can call it recursively let's get that into view so this little macro I give it a name menu links and it takes in links and then it loops through all those items and then basically what your menu from what I think what your menu links theme function should actually do so what this does is just kind of checks to see if there's any links prints the url does a for loop prints the actual link in and the name of the link and it checks to see if it has a nested links class and then it also calls itself the macro itself and passes in its children and then it's recursive and recursive things don't happen too often in theming and programming but menu links seems to be the place to put them in my opinion and there you got escaped you can see the b tag is escaped and you can also see that my links are nested those variables I can actually turn off auto escape here oh sorry that's a bad example it doesn't double escape which is kind of nice I'm going to ignore that for a second because I'm probably lost myself also just for to see what's inside here there's a cache folder that's where it's saving things they actually save out these hash things but inside of them is just a php file and it's the generation of the what comes out of twig so these are actual php files when you're actually rendering twig is actually compiles to php and then it's using these files if you do not if you do not um if you do not have the caching turn on it's actually going to be storing them in memory and it's going to be generating these same classes but it's going to have them in memory and it's going to also reload them or regenerate them when you change them if you have that auto loader turned on so that's kind of that's kind of the shortened quick of how to use twig yeah sites default files in your settings or in your set in your default settings.php file there's a there's a documentation for that one it's moved into examples so sites default examples settings local php if i can remember it right yeah um yeah there's an example and a big giant dock block of how to turn off and on the debugging and to turn off i don't know if you can turn off caching sorry yeah you can turn off caching in there too yeah yeah uh it's quarter to six okay i'll try to go quick through the other one yeah i'm going to cheat again but you can see here these when the composer runs it actually just um installs the latest version of twig and it puts it in a vendors folder and just so because i put in i started in the wrong folder i think i have a vendors folder in here too maybe one right one let's go to the other one so modules they go into a modules folder um i put that axe one inside of this um inside of this complete rename that again so that's x and this one i kind of just want to show how to simplify this thing so i have a module info it just says that um i'm hacking way at twig and it's the forestry forestry package so with just this yamo file you will be able to as long as your cache is refreshed go to your drupal drupal 8 log in my secure password go to extend find some forestry turn up forestry axe there's my axe modules in my forestry package i can enable it and that's that's probably the the minimal stuff that you have to do to get the module up and running configuration saved modules packs so i also created a routing yaml inside of here um i've set up a path so the path is called chop and i've created a class with the namespace and the title is cutting down trees one to a good time and i gave us some permissions this is just like boilerplate stuff that i copied off of some other module sorry so i put a source folder in here a controller controller just allows me to print out the simplest possible thing inside of here i have an axe controller and i get a closest thing so my axe controller is just extending controller base and i have a function or a method of a method that's actually being called by that routing so this should be getting called so i just wanted to check to see okay did i do everything right here so the i usually do a sanity check because i don't know if i'm doing things right and so i do the minimalist thing that i possibly can and then i check to see if i actually did it so i'm going to return howdy austin and see what i get so i'm gonna go to chop my screen is super small but it says howdy austin there and of course i can change it to make sure yes i am indeed changing this thing and there it is just so you know if you don't see the changes it might not be your fault you might just need to clear your cache that's normal dribble things you might already know that of course but yeah it and then dribble eight it's drush if you're using drush it's drush cr instead of ccl it means cache rebuild i don't know why they make the change but yeah that's what you do so next sanity check i want to see is does a renderable array even work with this thing can i return a renderable array so i'm going to turn that one off turn this one on go over here yes beaver pine beetles and lumberjacks all things that are against twigs and yeah that's just the item list and i'm passing items to it and it prints them out in a nice little order list and that's the dirtiest example that i could do to do the cleanest and dirtiest at the same time so let's see what we can do with this thing i i was playing around and i was trying to figure out what's the the craziest thing i could do to like do something really quick but also not burden me with creating another file and when you're in twig you're also creating like these template files all the time so you're gonna be jumping back and forth between your twig file and your controller and it's like a separation layer there and i wanted to do inline templating just so i could do something quick to see if it actually works then i could actually move that stuff into a template later drupal does not do this but twig does so what i tried to do is i tried to get at the twig the twig service because it is a service and ignore that for a second again actually i'm using i'm building an array with you users just for example purposes just an array that i'm going to pass to this template so let's look at this render inline function that i've added i've passed in a template template string and a data array and then i grabbed twig service right from drupal now i actually have that twig object that i was using in the previous example and i can do things to it i can change the loader before we were actually using a template loader here we're using a string loader that string loader allows me to do inline templating um so there's a loader again there's um i'm going to get the existing loader off of the existing twig because what happens if you don't have that on there um it tries to render every after this point executes everything else in drupal tries to render with the string is like oh i can't do that so it just works so that's i'm just hacking away at this thing to get it to work we might even be able to conclude this in in drupal if you wanted to hack away at it but for now it's just this function i have so here's um i'm setting that new loader onto this thing and then i'm going to pass the template uh the string template to this render twig render function and all the variables that i want the template to use and then i grab the output from that and then i set the old loader back on just so i don't have everything break and then i'll put that so i'm going to call that there's the render in line there's my string of hello name and the um users loop and i'm escaping the user name there and then i'm doing n four and then i'm actually passing name and users variables to them and render array which i can comment that so i have a render array up here and i have the users and those variables can pass the template and they're getting used in template so if i didn't do this right let's see what happens yeah there you go first one has a link says hello y'all has a link actual in there this one actually had a tag on there but it was escaped so taggy mc taggerson has escaped and jpearch it and gloria are listed below so that way i can actually it's like okay i want to make a quick template i'm i'm trying something out this is not something you'd actually do in real world code it's just something that you're trying to get something up and and done as quick as possible you need the tools to do that this is what you do you do these sanity checks to make sure you actually do something that's actually outputting because it's really frustrating when you like turn on a page made a bunch of work and all of a sudden you don't see any changes you're like what the hell just happened so this is a way to like kind of sanity check what you're doing and also it's fun because i can hack way at the twig service and do whatever i want to it and uh yeah for fun or profit or just whatever um so yeah that's my topic how are we doing we have seven minutes left yes so i don't know if forest can your demo fit in seven minutes okay cool so if you if you came here um wanting to find out about upgrading your triple seven themes then forest is going to show off a really cool tool that will help ease that transition and if anyone has questions about what joelle was just talking about again you can use hashtag dribble twig on twitter or come bug us after this as well you can see that there's a a twigify module it doesn't i don't have a release yet because there's still some some bugs i'm still chasing all the releases and head but twigify is a module to automatically convert your dribble seven themes to dribble eight using a drush command so it's pretty self-explanatory there's some instructions right on the page you need you need drush so um and so i have a i have a dribble seven site here with all kinds of horrible errors luckily they're all gone um and there's even the color module is being used that's horrible um and then i'm right here i'm also my local host i have a dribble eight site and we go to my dribble eight themes we see that i just have um uh bar tick and uh seven and then there's also radix eight we can ignore that for now and then on my dribble seven site i have um bar tick and busy and radix and some other ones so the way this the module works is on you install it as a triple seven module and on your dribble seven site it's going to look for any themes you have installed under dribble seven and it's going to automatically convert them as best as it can over to dribble eight and then there'll be depending on how much customization is in your theme uh there will be places where it can't convert the code you can't run the conversions um in seven minutes we really have time to explain like the whole process of how it works um but it will then wrap those sections in a twig comment for you later to then go in and hand code um hand hand adjust so to run it you simply install the module so i'm going to i think it's downloaded so i'm just going to drush enable twigify can everyone read this or do i need to make it bigger i can make it bigger is is there anyone that can't read this awesome great so twigify is enabled successfully so it's really this is simple that um so now we just run it as a command here drush twigify and it's going to tells you you know what it needs and you know the name of your theme and the source path and the unix route path to the to the new one so we continue and so now it it iterates over it's just currently looking at the themes that you have installed um but the same engine can be applied to look for templates and uh theming functions inside of any module too so you can you know future versions we can point it there um and just in the interest of making sure that i you know i don't forget to mention this later so it's up at twigify and it has an issue queue and so what i really strongly encourage everyone to do is try it use it and when you see any issues report them like for example you know there's outstanding issues for you know if your theme has drupal add j s in it there's no conversion that's should be pretty straightforward to convert that over to attach but that's an issue but we can't we can't it's a you know it's a community supported project i should mention that was originally funded by elfin ventures so we want to i definitely want to thank them for originally funding it and but it's community supported now and the uh the only way that it you know it moves forward is if you report the bugs and then people you know decide they want to fix it and it's going to turn out to be much easier for people to just adjust the twigify code than for everybody to be like converting their all their themes manually so um in this case um we'll go ahead and we'll convert bar tick because i like doing that because then i can kind of compare it to where the the version of bar tick eight is um see how twigify compares to it so we know our new name for the theme so we'll just call it um next i'll use under case here bar tick austin and and then so um it's going to give us some information uh the iterates over and it finds you know where everything is and it's everyone so we have to uh we see that the current working directory here is right here so we're in a drupal seven install uh drupal d seven point two three is the version having to be using and so now if i copy into this directory to try it next to it which is my drupal eight installation and then i put this in sites all themes right that's where it goes no one's gonna no one's gonna correct me in there oh thank you okay right see i'm glad we finally fixed that right so so then we just tell that that we wanted to to write the new theme to the drupal eight director in in in the themes so um we create first thing it's going to create the uh info file and remove the old one which is actually of course a yaml file and i'm right now i'm just basically wearing out the y key right i'm just like pressing pressing y um and um i'm gonna skip over menu tree because um that's changed so gives the option of skipping that one exited with no errors hmm look at that i feel like you know what let's see if that actually did it because i i don't don't trust the item um that's ls themes everything's okay i don't take Austin yeah so um we're gonna we're out we're probably running quickly out of time um but i want to actually do this again and i'm gonna go ahead and just remove uh minus um sorry i'm just gonna remove the one that it just did and just run it again there we go um so we're gonna run Bartik again and call it Bartik Austin and there we go and yeah go truple eight themes and so this time actually i'm gonna process oh there we go okay so sorry so menu tree is the one so if i i just missed it i'm gonna process all of them but i'm gonna skip menu tree is what i'm gonna do there we go and i'll skip that one too there we go but i will create the theme file and then remove the old one so i just if if anyone has any kind of questions you know just ask me afterwards i'm just kind of racing through it instead of actually explaining each step so just like that i mean i actually just did it twice like you know in a in a minute um it's it's created a new one um so what i want to do next is i want to um drush cash rebuild on eight otherwise it's not going to it's not going to pick it up so now if i go back to my install when that comes when that comes back if you're going to find out what it's done it's taken the Drupal seven theme which whatever Drupal seven theme you picked on your Drupal seven site and converted it automatically to a Drupal eight theme and installed it into your your Drupal eight installation and so now if i go back here and i refresh and after after a cash rebuild i see that i have on here um oops the wrong one sorry there he goes on seven i see that i have a new theme here called bartik austin a dev now i happen to know um that there's a couple couple tricks in here um for example i know that if we look in um i'm going to cd over into themes into bartik austin and i'm going to kill that thing there because i happen to know that there's an instance of a Drupal add js in color and i really don't even like color much but anyway it's a great idea it's a great great idea um and then i'm going to actually open my bartik austin theme and i'm going to jump down here and i see you see there's also who here knows that Drupal add add js and add css are deprecated in Drupal seven that's really good because a lot of times when you don't know that removed in eight who knows they're deprecated in seven see that's what i'm used to used to people because we really we really were not good about getting that message out that you're supposed you're not supposed to be using them in seven to begin with like it's it's a lot of projects have a very official deprecation removal alternating right so one version things are deprecated the next version they're removed so these functions are actually deprecated in seven we were just we really didn't didn't get that word out to people so they really understood this and now they're removed in eight so it's it's gone they'll throw errors right so i'm going to just remove them here there we go and then i think i have another one here and then look at this one here that one if anyone has been working with with twig any for a while you'll see that that is that's going to be a problem too right so and these are and there's issues for for for these in the twig if i queue it's just these are things i've kind of get the time to adjust adjust the the parser in the engine so it so it writes it correctly so now just kind of manually a few two just two manual tweaks we're going to go ahead and we're going to enable the theme that twig if i just converted and it has enabled so let's go ahead and set it as our default theme and now in theory we're going to so now i have a droopy late site here that we're going to reload with the version of bar tick that was just automatically generated using a single drush command script and wearing out your y-key and see how it looks it's and it's horrible sometimes it works and sometimes it sometimes it does it it's um it's it's it's like that i have um i mean i can cheat and i have a you know i have a version here that i've copied previously and there's a couple there's just a couple little things in here so let's see if we can find if there's just one thing in here we may be able to find it and um so go to our air log and see okay so on i just missed i just missed that didn't i exactly exactly so um so i didn't oh oh you know what i needed to do right yeah um that's that was that's not what i needed to do i just needed to do that and do that and i think this is the one there we go that's the one because there is no variable get in triple eight so let's see if that is going to be just like that so um and there's issues in the twig of iq for both converting a drupal add add jas and add css to the attach functions and to be able to handle any instances of variable get and convert those over to cmi so um everyone give it a try yeah as soon as you find any bugs drop drop that in issue q and if you're interested in helping out of the twig project it will be a lot easier than everybody hand coding all the themes thanks for coming everyone thanks for sticking around