 First of all, thank you all for coming. I had just heard That the inventor of triggers may be showing up here, which makes me absolutely freaking nervous But that's another thing because you're gonna see how I'm gonna butcher his beautiful language Fabian are you here? He's not here. No, no Fabian. Good Secret he's secretly hiding So the trick lap I Wanted to call it fuck it ship it, but we've got to call it and trick it ship it instead That was a little bit more appropriate and we're gonna run a simple thing that first we're gonna talk about theme stuff from the front end Then we're gonna have some some nerdy stuff called called trigger fire a demo of that Then we're gonna talk about how you as developers can create new wonderful trick files as far as themas and Then we're gonna have Q&A all the time. That means when when we're saying something like hey, what's that? Just raise your hand and shout it and we're gonna figure it out if you want to be a little bit more polite You can also use the Drupal trick tag and just push it there because Jen is gonna keep an eye on it and also if you have questions if you can go up to the mic That's even more helpful than we don't have to repeat it Unless shouting even that's this is the first part of this will be based on front end. It's basically gonna mean shouting a lot Okay, so this is I Many years ago when I still was hopeful and young and happy and had a lot of air This is my whole name Morten birch Hyde at Jorgensen It's very long. So if I just cut it down to this, this is my original thing Morten birch see that are It's very easy to miss bill And apparently I got a kind of an and a thing in this community that I was being a little bit of a front-end bitch Because I was bitching and moaning a lot. Why was it bitching and moaning a lot? Well, basically cause well It was not everything that we did right the right way. So I have to begin to figure out this This kind of a new way of developing I call it anchor driven developments That's basically you get so pissed off about something that you think is so wrong that you want to change it You can either sit down in the corner and bitch and moan about it or you can begin to create something about it That's actually how we ended up having front-end united having design camps or front-end camps There was specific only to front-end developers not back-end developers not good old-school developers as we have them always at them Do but people who know HTML and CSS javascript want to do something about that those people who don't care about your database queries because caching That thing we don't care. I care about beautiful markup care about beautiful CSS That's the whole thing that was done with pure fucking anger and they worked out pretty good. Why was I angry because of this? This is how a durable variable usually look when we put them through at the areas of doom That does not make me happy. So my my answer to peace be template as many has been this It was never built for us. It has never been built for us. It's never been built for a front-end developer It's a tool that might gonna be good if you are a developer, but it's a pain in the ass to use So instead of having that we're gonna add some little bit of a French elegance to this This whole thing so we have your PSP thing and we have this French elegance thing, which is a trick But first of all, I want to have us all to just say hi to Jen who's sitting right there This is her last year. I do a bad camp. I have been angry for years. I think Jen have been the same I'm a grown-ass man. I don't cry when code get committed. I had a session five minutes after this I had to take a walk all around the campus to try to get my own kind of blood down first because this day at this point And at bad camp which is in San Francisco that same morning. I had the opportunity to sit down and talk with Dries during breakfast and I He was dumb enough to sit down on my table that morning I talked directly at him for 45 minutes explained to him how important it was to get this into Dupal core Getting trick into the core and he was like, yeah, I'm listening to you. He did not say anything 15 minutes later We're standing watching trees commit this shit to call me pretty much went. I Love you all kind of way as you can see here. This is how it looks when you get really really happy And that is why later tonight. We're gonna drink Jen Lamptons Jen Lampton is a drink That's is one part Malibu and one part cranberry juice. It tastes like p. It's been template But it looks like trick, okay So Another thing I'm gonna talk about about this whole trick is it's beginning to create Angie's talking about the developer experience I've always been told that front-end developers are not developers well fair enough If developers have a developer experience on Dupal, well, we're gonna create a front-end experience And why we're gonna create that well because those principles that we built on now we don't more build on the whole thing of Just give the theme of that variable and he's gonna be happy fuck. No We're gonna have the the idea behind everything now in the front-end is we start from nothing So nothing in the marker when the CSS that not necessary is gonna be there We're gonna have that clear we're gonna build on use cases use cases for the 80% not from every goddamn case That might gonna be invented by someone because then we're gonna make a tool that nobody want to use be it's be template Gonna provide the right tools so you can actually find yourself having it right now. We're using Figure out what kind of variables does on a page? It's it's a pain in the ass provide those tools for front-end developers So we can find the stuff No visibility you all know this is shell comes right Okay, good. I was testing on the Americans though like who's that like damn it good I'm in Europe visibility to a be able to find what is out in that template How many here likes to theme menus? For those who's not in the room there's absolutely nobody raising their hands Why is menu such a pain in the ass because it's just one menu tag? That's it that menu variable that pumps out all this data you cannot grab it You cannot do anything with it's kind of grabbing out in thin air by having visibility in our theme lands that we can find the variables We can begin to work with them Consistency use the same name If it's a title, how about we call it a title if it's content. We could call it content Don't use title label whatever whatever that's the same naming. This is a lot of this Kind of one of the things we need to work around with finding the right names Don't dumb it down. I know all developers things that front-end devs are absolute idiots who cannot understand a simple for loop How many here who's doing front-end development knows how you do a for loop? How many don't? There was one developer down there trying to be a smartass. I know you So that's the whole thing we can actually add all this logic the front-end logic We can add that to our templates so we can stop by having you the I look into a note you have that submitted by a person and you have that string of HTML You can't do stuff with it. Why is it that way? Well to make it easy for the theme But that was what I was told seven years ago. That's not easy. That's dumping crap into my beautiful themes stop that So one of the base things we got the last about a year and a half We've been discussing these things again and again again What is it that we're gonna build it on and the whole thing is first we're gonna have a double core aka stock That's gonna be our base. We walk out from that will be as clean as possible That means minimal markup minimum CSS classes minimum everything then you can have your know Different as I call it more brilliant to talk about them as CSS framework So we have two well-known series frameworks here. We have good old body over here by beginning to have If you bring to build your base theme as a CSS framework instead We don't have to reinvent the wheel by having to recall as clean as possible It's gonna be so easy to add that classes and markup that that specific framework needs then on top of that You can begin begin all your your themes Example themes are another thing. I'm just gonna roll into here One of the issues we happen we do how many I do to recall eight work push stuff into core Okay, see that's one of the issues because yeah Joel did Raise your hand a little bit One of the thing is getting stuff into cause a pain in the ass every time you have to push anything in it's gonna be a Pain so what we're gonna do instead having we have gonna have stuck I'm gonna have body and go we're gonna have an example theme. We need to find a good name for that That's why we're gonna go out and drink Jen Lamptons tonight The idea behind that is we have the project Module called example module and that is providing all of the little things that you need if you're a developer Who does a module how about we had a theme and contribute that had all of the stuff that? Themers needed and we didn't have to discuss that with the rest of the developer community I know it sounds like it's kind of crazy, right? We figure out what we want and then we built it and we argue about that without arguing with the back-end developers Yeah Dream markup is none of the other thing we're trying to build and the idea behind dream markup is that a lot Of us are markup nerds and CSS nerds. We know what we want The thing is WebTik told me that a year and a half ago at a shooting range with a shotgun in her hand She looked at me and said but more than we don't know what you want. Tell us what you want I'm like, okay. Nobody ever told you that grabbing everything into four diffs is a good idea No, we kind of thought you front in this one of that Like have you ever heard anybody who wanted to have four diffs with three classes on each I haven't but nobody told you The developer community how to do it. So that's another issue Apparently, I've been the only asshole who have been shouting about this But every time I go out and talk with people especially front-enders, they're like, holy crap. Why can't we just remove this markup? Another thing the reason I curse this much is because I do front-end because there's no rules here It's just frustrating. So let's see if we can fix that So that's all about this whole front-end experience. We were talking about what it should be called TX or FX I think FX is is pretty cool. How do you do front-end you make all you make the stuff being beautiful? So and of all that that's the kind of hippie bullshit we're building on here to get your theme up in morning How many did see see Fabian session today? He talked a lot about the technical stuff. So instead what I'm trying to do now I'm gonna show you how I was kind of started building a Google 8 team two weeks ago And that was fun actually and we're not gonna see anything pretty here We're only gonna see pretty markup and that's gonna even better. So First of all if you're on GitHub, you can jump in and you can grab my theme. It's called Yggdrasil And if you don't know what Yggdrasil is I'm a dain. That means I got Viking roots Yggdrasil is a tiny little three Nobody from the northern countries here when I say it's a tiny little three what what is Yggdrasil? The three of life exactly that is where everything good comes on. This is the foundation of everything So we're not talking about a little trick anymore. We're talking about the three of life I mean just as well like pump it up a little bit and if you have got a gear we can also got Yggdrasil Or how did you pronounce it? Jen doesn't want to pronounce it as she saw the name this month Yggdrasil it's not that hard. It's it's hard as a gear anyways The first thing you want to do when you start up your new theme is you want to go down into your settings file Why do you want to go into settings file? Very very simple. This can people see this all the way back? No Crap Okay, this says setting three debug true What that will make is this This is theme debugging stuff. Let's just get that up a little bit higher boom When you've done that every time you run anything you watch that markup This is what you're gonna get theme debug called theme note file name suggestion note article note three Know your front page blah blah blah all of this stuff all of the files that you normally should go hunt for as Now in all you will call thing. I Personally is very very glad that They figured this out. It had been a feature in the mothership theme for years This one by the way, it is horrible code it, but there's just a way to try it out So it's these two two things settings trick debug true settings trick auto reload true But as Fabian over here shouted at me yesterday There's no need for that one because that one makes it all go so in your settings file Go search for trick and open that up And we're gonna look at a little bit of our info file and it's called a yaml file now and the big change in this is Well, it's actually not that big This is our basic of a theme layer. She's gonna tell this is the name it was ill. It's a theme Description is trick is true bullets love. It's it was ill packets is cool and it's 8.x. That's how to find your new theme The next level you're gonna see and here's here's one of the beautiful things Up here, we have the style sheets style sheet definition We have one we have a style sheet all started print and oops. What's this style shit sheets remove What do you think that means? We can remove jubles bullshit CSS without hacking call or as The the method I called F. O. A. D. I've learned when I wrote an article for the jubel watch stock last year I was not I should not call it fuck off and die. So I call it I'm find object and disable So so what that actually does is so right here? We have User icons that CSS I Don't want to have that in my team. I mean, I'm a grown-ass man. I know how to write my CSS So do will pretty please stop doing that. So start sheet remove system that theme CSS go away user icons CSS go away User icons is up here reload the page boom done away. It's no more dirty dirty hack It's built in apparently somebody of the developers listens all things They're just tired of hearing me bitching and moaning about stuff At this point, I don't think so I found this by coincidence or accidents by reading commit locks I know that the magic module right now in jubel 7 does that I'm pretty sure if If we push a little bit for that we could do that actually the best thing could be if you could just clean it all up But wild cards would be a beautiful. Yeah, actually sub not only submit a patch because that's always the usual answer Submit a bug about it. Hey wild cards in style sheets That's your task for today. Do you know how to create an issue? No So on Friday, what's happening on Friday cuts? We're having a big sprint We try our best to welcome new contributors to Drupal core into the community and into the process You can come it's it's an all-day event. You can come whatever you want. If you're brand new and you don't have IRC or git or anything like that There's a workshop in the morning where we can get you all tooled out And even if you don't know how to create an issue because a lot of these things always just finding the error identified it and telling about it Doing that actually saves us a lot of time So we're gonna do that on Friday or right after this one So the next thing is like all the old-school regions that we used to know and love And that's just how the work if they it looks kind of exactly the same as they used to And it's the same kind of idea but now in twig. They're just gonna call them with paid start footer instead So you have a you have a footer that's defined There we go and here it is done. It's simple and it's quick and it's not so much to do about it So it's it's the complete. It's the usual way. We've always done it. It's just kind of a no brainer By the way, if you don't like twig if you think psp template is really really Useful nice to work with you don't want to grow up You can still use psp template you just Uncommon this line on the right engine psp template so you're not forced to use twig But let me quote John Albin. I Don't care if it's there. I'm never gonna touch it again. So that's That's the thing we have it there still I was I wanted to kill it off just completely because I'm angry like that But we're still gonna have it so if you're not comfortable or don't want to do all the thing with your thing You can just still use it. Anyways, you will age Where to find your templates now we talked about this thing it should be easier to find your templates I did try first off and ask for could we have one folder and you record all the templates in That got shut down because of something something something. I even know something about speed or whatever Anyways finding a template now is you go into core going to modules going to take the module views Into templates and hurray here. They are That's where I'm gonna find them and you just copy them over as we've always done But when I run into my own theme, you know, I'm a themes and by the way, look at this beautiful thing I have sites here. I have themes. I've called I have profiles of modules So we actually have our themes just out in the root where they could live That's kind of the same thing as dropping it down to a site slash all this in my mind Just makes a little bit more sense and a little bit quicker to understand And I have my I packed all my files into templates. I don't have to do that I just like that and again, I can use subfolders as I want to and you just you can organize your files the way you want and Here's the other thing by having You know having Everything to be a file now. There's actually gonna be a need to organize your files I was just gonna have this whole shit ton of fires. It's gonna be impossible for you to work around Besides of that, we're still following the old old way of doing we have an HTML to HTML to treat a mr. G Trick page region block node field. It's it's still the same way that we are kind of using the template file So it's the same thing I'm kind of just gonna run through now a bunch of these fields different files. So you can see how some of the stuff works I'm gonna start off with the HTML attributes and body attributes This is how you how your trick file is gonna look like when you open up the first time And when I saw this the first time like what the fuck is this shit cuz HTML attributes and attributes down here That's a variable where anything can come through and I got a little bit tiny bit frustrated until I figured out how this actually works. So This will just put out Old-school markup as we have it Langing direction starter class blah blah blah the same thing down the body with all of the stuff in Attributes class instead actually takes this stuff out See here. I got I've split it up HTML attributes But I'm kind of loading HTML attributes that class before that and I'm doing the same thing down here with attributes What that will happen instead is this little beauty doesn't love that much, but we got the now the classes put where we're asked for it So to begin to add new classes into a template as you want them That's been to be really really easy now We have separated the stuff. So you don't need to have to battle around this and that will create your food your bar class So this is kind of just a quick sound. This is how simple is going to be so we can even take the attributes that ID a Battle plan there was to remove all the IDs from the Google call. That's my personal goal But you can still have them if you want them So the next page is the next thing is So the question is why would you ever do that? Well, the thing is that we have learned over the years is We don't know what the front end would bring us If things will change we want to change different ways doing might you want to do this just quick and dirty because that's a thing You want to do the whole thing is yet that we can do whatever we want We can split up the elements so you will can still load the stuff They want to have in and you can separate it up and yes You will create a maintenance hell for yourself, but that's it. That's a choice. You're taking that's not a choice You will took for you. That's the whole difference Was that sufficient and there's another also another reason what you what do you want to try to achieve more of us? To play here is a more separation of presentation and business logic layer. So that means From a business logic You're just specifying what this thing is but that doesn't necessarily know you know how it will later be styled So those classes we are adding here are purely for the presentation logic And so it makes very much sense to hard code them into the template Because they will only apply to this special seam and if you had a different seam It might style it completely different but that is why classes belong in the presentation layer and not in the business logic layer Did you get that gentlemen in the front and they are not in the back in there? That's where they belong. Yes, but as a follow-up The the the point here is that what we want to make sure is that you can do it the way you want it to that Dupal doesn't demand you as a front end developer to do things in a certain way That's the whole whole kind of thing that I wouldn't ever put classes in that way But let's say you have a CSS framework that requires that that your body needs to have a certain tag Well to get to get it done quick and dirty can just add it in there quickly and get on with it Drupal core world ship with only attributes, so it's up to you to split it at the way you want to a Quick one on page HTML the trick is actually this is just we still have the old night. Is this a front? Yes, it is and the paid but header So we have the old school hard-coded variables still in and page dot HTML the trick still got all there a lot of hard-coded variables in there We actually want to remove later on, but that's a that's a whole nother thing. I'm gonna talk about later So the variables are still available. So you can do like very very quickly. Is this the front if it's the front? I'm so front if it's not well, it's not done And just back to this whole thing about the reasons it's the same exact same markup that we use in same Same way of using you just used to call down the print for the print header so forth I was just calling a page for that Just to repeat this Another template the next template would be the region HTML the trick template, which I still don't understand why we even have that I think it's it's a kind of a base on an architecture that was built around Google 6 and Google 7 It's another discussion that we're gonna take up on Friday. What kind of template files do we even need? Because if we don't change now, it will never be changed up If you don't even know about code and know what you want, but you kind of know what irritates you Please come and contribute be in our discussions because this is kind of a valuable thing We need to know else is just gonna be my fucked up brain who's gonna decide it or what I can push through Okay, down to a block a similar trick file. So if we all remember what we can do with debug It still gives us the opportunity to find figure out what kind of name of our files We're gonna need so let's say I have a menu good old-school menu But the menu is wrapped in a diff class instead have a URL I want to have a diff wrapped around my neck my my my menu. I want to have a nav So what I'm gonna do is I'm gonna do a block dash dash systems menu block a similar trick Nobody can remember that but that doesn't really matter cuz You've got the theme hook suggestions to tell you at all the times You don't need to go find that name or look for that name and be frustrated about it For the fun things of it. I still doing this attributes class This is to show this one if I want to take out the rules and put them specific in here It's it's kind of as this sub-objects you can drill into the attributes and grab the rules out of it And then print it all out and have right now the content Which then we'll react in you're gonna have a nav instead This is kind of just the basic things. It's only just to show you this is we're very close Still a hard you will seven worked But we kind of you know want to move forward with and if you even want to go One step further I still find the Having a block called a block. I kind of think it's retarded because that's a What should I use that class for that's kind of not how at least not how I write my CSS I don't care if you're a blog or your view. I care how you should look instead So if you want to remove that right now from that string because attribute classes is just a string that we Can't put out what you can do is actually using this little replace function and call the blog and say well Remove the block from my markup so you can get your markup pretty pretty pretty and To take that it's I have if I have something in a string I want to replace remove really quick instead of going and doing a pre-process adding all that stuff into a template file Then template that PSP files then later on have to work around with Triggers these kind of like small beautiful things built in with just okay. Well replace the block There's a block there. No place. It would absolutely nothing So now you're down to having whatever name is you want to to make your markup cleaner. That's the It's kind of the base thing. I'm working out for Just how much time did I use so far? We're half an hour in holy shit, sorry, I'm gonna speed up a little bit so I Be doing it with the note again It's the same thing always by having trick debug true gives you these things And this is kind of a huge when I was doing that because it was if it went so easy for me to actually find this stuff And the thing is when I also have my theme filing. I take finally you can find it very very easy We're still using the good old hide things so hide content comments hide content things does what hide used to do in the note And when you want to print it is a cold content legs of content comments So if you're still using content and was as one kind of big block This is how you're doing it. It's just exact same thing but Okay, you cover one one step step further down if I have the footer of my article And if anybody makes any jokes about the footer have to be in the footer I'm gonna find them with my HTML5 pad and beat them the footer is note the metadata of that article So I have a footer tag What I want to create I want to create my I want to make sure that this Is exactly the markup as I wanted so I can do a time at daytime note dot created time And then formate that thing as I want to do the same thing here because I want to print out 17 September 2013, but I want to make sure that my markup has the right date time I want to have the comments as a count I want to have a break line after that and then I'm gonna have my my field text This is how you write it to me. This is so Screamingly simple that it almost want to make me make me cry I Will take it like once that further down And these are some of this is by the way, this is how we're gonna translate now in the future by using the trans tech If I want to take the note the author of a note And I'm gonna use note that name if I want to wrap that in into a bunch of icons I can do that same thing With time note that created time Do what I want with it To me this is not it is does not feel dangerous to do. This is just guys. It's simply it's easy It's to work with further down here if I want to do figure out a Usual thing would be to figure out how many comments is there so you can begin to Make a little bit of what we call front-end logic It's not everything that have to be based now if that these small things will put them out there where we can find them instead And that will create you know this kind of thing. So this is the markup I want to have out when I print it out I need to figure out how to fix the white space by the way, but that's a whole nother issues I can make it really really beautiful But what I want to have when I work in the front end I want to be able to have that feeling of actually just working and writing my markup exactly as I see it Not based on anything Google gives me and then take the variable on the elements that you will give me and then put them I'll make it begin to create these elements and by the way also tells me that this is a translation of posted by so I can find that later on So Now we're kind of getting down there where it's usually is a pain point in fields So let's take for an example the tax, you know the elements of terms of the taxonomy that prints out on the page How many modules is it that would today have that does comma separation or put an icon in all kinds of different stuff But all they do these modules is they modify your markup to take your tax and do something with you So let's say I get a get an assignment from a from a client and they give me this one I want to know the amount of tax there is I want to have the first of them these commas comma separated But the second term should be in italic or some dumb shit that some designer figured out that he wanted to do and just kind of like Fuck how am I gonna do this? Oh, yeah, and by the way, it has to end with a dot Commerce in between have to end with a dot if it doesn't do that is a catastrophe because we know how designers are right? Everything that's not exactly how they said is kind of the end of the world Am I the only one who works with designers that way? Because it when I don't do front end I do design and believe me I turned off the heat on every fucking little detail. I'm a bitch because that's almost my last name So let's look at this. Oh my this looks interesting What I do here is I do a form loop for Delta item and items. This is this is just a basic loop I still not really sure what Delta does. I Don't know can you call anything else? It's it's like your counter like one two three four. Ah, see they're clever I don't know this stuff, but I can still use it without breaking anything. So Let's first look at this for Delta, okay If you're something well, give me a span with a class where I cycled through even an odd and use that Delta thing that apparently counts and Give me a count dash the number of loops we are in so I can get a count dash one count That's two count that's three class. This would be kind of basic stuff. We want to put out If you're the first loop Figure out if should I be called tags or tags or if I only have one tag I want to have the line to say one tag if I have two tags. There should be an S on it I mean English is not my first language, but having two tag is wrong, right? But two tags is right. This is where we begin to talk about having front-end logic Just this small shit, you know, you need to just fix and check out And you don't want to write a module to figure that out. I mean that's that's retarded And we there's no reason to you have to know walk down to the dungeon where all your developers are sitting and Doing evil stuff to your code and you have to ask them about it You have to beg for them and bring them coffee and stuff because else the designer go nuts. Now we can fix it ourselves So after that, well, you know, I want to if this this is the second loop if else if loop index equals 2 I want to add a special class terms dash dash underline to that item And if it's the last loop, I want to add the dot If it's not any of these things, well, just print the item With the with the camera and this gives us this kind of markup. This is not a module gentlemen who did that This is the trick file who did that very very simple. It took me about Four to five minutes to figure that out by looking at the documentation doing this and be like holy crap Then I looked at this markup I became a little bit annoyed because why do I have span tags around it? I mean, hey, I'm a grown-ass man I can minimize my markup cost less markup. It's better markup at least in my world. So I Want to have this I want to have all these combined in here, but right now. This is just an item. So how do we do that? I Am glad more than you asked that question. How do we do that? Fabian over here has not yet delivered his promise of giving me absolute drill ability So right now how you call these things called him by an item and then it's key So here I have the item the href, which is the link And I have my item the title over here, and then I have a class I create over here So that gives me this thing instead I haven't even count one even count two even count three instead So now I'm beginning to have my markup as simple as absolutely possible and The trick I actually one of the tricks I'm doing here is I'm sitting a class that I'm actually I'm defining first I'm asked it to cycle through so every time you do a loop cycle through it and give me also the count of it and set So set class and set it's kind of Predefined a variable right now right here because I need that and then just push it down and then you're gonna have you Straight up markup as I wanted to write it not that anybody else decided I should write So if I want to do some something done with this I can go that way And this is so right now what we are working on is instead of you going URL item href We're gonna go on item dot href instead So we're gonna have the same notation because one of the things that goes is not in PHP 10 bit where that whole you have an Assistant array is this an object house is actually working It's absolutely nobody excited about this. I mean come on This is the markup. We're putting out god damn it. This is This is a real file. It's a real text partner just created and I did absolutely uber control over Dubu's markup. I Was dancing in my apartment last week when I did this I was like, holy fuck finally I get this control And you're just sitting there and there's the same thing with you when you try to explain to people yesterday What we can do like don't you get it? This is theme control to the max. It is no more bullshit I'll just add one more quick thing before we go on. Yeah the one tag multiple tags For the developers in the audience you can also use the trans block and do that's like the equivalent You can do the equivalent to format plural And that way it's all translated and nice I don't even know what he says the trans tag. Ah The trans tag. Oh, yeah. Anyway, there's more that plural thing. What's that? It just makes when you actually have to translate it it makes it easier Yeah, because it might have one item, but several items One versus menu one two men Nah, sorry for that. Okay. Here's the sexy thing. Um, we all know that in Dubu land We have a block in trick land. We also have a block We are might gonna call these trick blocks, but that's only when we talk about them What It's not the same now. It's this is not the same as a block in Dubu. This is a trick block But we call it this way. What is that you ask? Well Imagine this we have a page HTML the trick thing and I know I'm gonna shift my header on certain pages Because client ask for it and I don't want to write conditional statements and stuff and just make my markup quicker And easier to work with so I say if block through in block and that's kind of where my do people understand There's a pseudo markup So this is kind of where I start my block and this is kind of where in it if you don't shout out And I want to do this when I'm on the front page. This should be pink and have stuff upon it Again we look into the theme hook suggestions her a page dash dash front Okay Then what I'm gonna do is inside of my page HTML the trick file I'm gonna say hey make me a header block and then I asked it to change me if I'm on the front page Then on on the name of this page that's dash front HTML the trick that everybody now remembers that we just got from my Debug tool. I'm gonna do an extent themes it was ill template page HTML trick. So If I'm on the page HTML trick, I'm kind of extending this so if you're here use this template So the example you all saw yesterday, but it just wrote page HTML the trick doesn't work out That caused me a couple of hours to figure that out I was I was kind of getting a his if it on Fabian a couple of days ago because of it was not working He fixed it immediately. I'm always kind of Impressed when death does that So if it's the header block, you know, call out and say I'm on the front page simple as that I'm now on a note 3 change me up on the front page boom done One template no more. We want to change elements that way. Just how I do it. It's simple as fuck So to take it up again page font You create that twig file and you can just extend that element and change it That means that we can actually take that HTML dot HTML twig file Combine that with page dot HTML twig take these two files combining with each other and remove yet another of these template files we've got so we can actually begin to make a theme there even more simple As one of the latest thing. I'm just gonna show a little trigger Trick I did with chick trick in views trying to say that five times after 2g and lambsons so What I did before with that set classes is I now I now want to take a view a view row I get them post every time they call a view and Recreate the classes it does it gives me but give them other names cause the framework I'm using requires that it doesn't have first and last class It's called them the first or the last it have autumn even and it had a count dash something That's kind of the same thing that that views today creates out So I can do the whole same thing in the theme layer instead. I don't have to rely on these things that you would put out So I have the count loop that index it just count is the amount if it's time to do a loop count one of it Even not the same thing If it's the first loop use the first as a class if the second loop use the last as account is And then actually just because I'm a front markup nerd Replace all the new lines with nothing just because I could I got irritated when I looked at my markup And that creates this boom done finish no more. No less That's how it created. That's how you reach in struggles markup out of the box without doing anything else To me, this is pretty beautiful so Again, nobody recognized how epic this is nobody Have to drag it out of them The thing about white space and I was I was looking at a lot of Jen had done I was kind of looking around and saw Jen have done a theme a couple months ago and trying to figure out They got this minus all over and figured I don't know what that is That's how to remove white space So if you have no a beat act with a food win and you kind of want to remove the white space on that side You can just do it you ask if you remove that and same thing with spaceless kind of remove all the white space I think that's pretty sweet actually. That's that's kind of the Those small little things just makes my life easy and I get a little bit happy about that Another thing we talked about translate So if you have a string goes last check time ago something We can you we can use just a t function that we call and then we translate time to time Nobody want to do this so a patch we got in three weeks ago About three weeks ago makes this possible instead. You just do trans and trans and then you Put the line in done. No more of this crap that nobody Hate this by the way, I hate it with a passion like why is it done this way? This makes sense Again that's the beauty of this it's just kind of small things. It just makes sense Question in the back they're working on it That's gonna be actually the answer to 90% of all your questions either they're working on it Or you should come to the coach been on Friday It's possible. Yeah Another thing when we were talking about this whole what we were gonna do in the theme and the front end experience is what I call divide and conquer Cause funding development in basically three different things. It's CSS There's some some HTML and We got some JavaScript. That's kind of the three different things what I don't get is why these are so integrated into each other That's kind of retarded. So things we're kind of working on now. It's actually to Us from the I do CSS and markup thing trying to figure out how we can make this also a better experience for the JavaScript Community so we don't begin to meddle things around so if you have any JavaScript notes in the room We really want to play with you to figure out how we also can make your experience better And one of the things is that we have in the new guidelines for Google aids Class naming for for CSS is we're gonna use every time we have a class That's gonna be used by JavaScript the JavaScript needs we're gonna have a JS dash Whatever it's gonna call what we're beginning to talk about now is we're using that data attributes instead So we can remove everything there is Any classes that's not used to be to to make stuff pretty with CSS It's gonna be removed So if you have classes that you use for your JavaScript Remove that out and put them in a data attribute that's again complete separation of it It's kind of a thing we're getting traction on right now The thing I hope for is getting some measurements so we can figure out at this quicker or slower And here's by the way one of the latest thing is this is our trick team by the way cutter. What are you a dev? developer Yeah, kind of so we have a developer a front-end developer very much a developer Joe front-end Steve Oliver and Honour the David Meister Developing chicks super developer. So we threw him out by the way Mark Carver it's front-end and me who is Running Thank you that so this is the whole team that is bringing you all of these goodies. What do you think we need? That was actually not the answer that was not the correct answer I mean, yeah, you can buy us some Jen Lamptons, but we need your help So we need more of you Here's the thing I've been bitching on John Orton for years for this stuff and I don't know how he did it But he sneaked out and pushed me in front of him. So apparently now I'm the escape goat That is fine with me because I have no objection of being a dictator who decides how everything is gonna be I Would really like to discuss this with a little bit with other people how we could do this front-end thing So it's kind of a thing that even that you don't know what to do how to do it You know Come in and ask the question all the dumb questions right now. Hey, how can I do this this and that? How can we rebuild this thing? It's the right way. It's it's really important We get the opinion now instead of six months after group will eight have shipped which is gonna be Too late So tomorrow we're gonna have a buff I Can't remember where we put it somewhere Look at the look at the buff schedule gonna have a buffer try to plan this a little bit more Because we're gonna be here this weekend then a bunch of us is gonna be at bad camp in about three weeks and I'm gonna be in Vienna. I'm gonna be in Oslo as well I'm gonna run Sprints of getting more people into this because this is kind of where I've been preaching this for years This is kind of the time where we have an excuse cause no Fabia and created this beautiful framework To make this work we need to go through every template every inch of tuples no markup structure How to will dust off so this is a one-in-a-chance lifetime to actually change all these things that we didn't like around the markup This is when we can actually Tell the web checks of jubilee. What is it? What is it that we want instead of coming six years later in bitching and moaning? It's simple. I mean as honestly as I see it. I've been living on jubilee for the last six years Made I'm not rich, but it made me enough to travel the world and have fun I owe this back to the developer community to be straight up honest I owe this to all our developers who's doing it this amazing thing about building this rule thing It's not my fault that you dumb to understand the beautiful front end I have to help them with that But I'm not the only one who owe this to the developer community every goddamn front in the in this room Who is making a living by jubilee owes this to back to this community? That's at least how I see it so you can either buy us Jen Lamptons Hope you're not getting too hungover or step the fuck up to the plate and common help. I'm not asking nicely anymore I'm demanding it from you actually cuz Hey, this is a community. This is what make a community great. You bring something in even though How many here doesn't even know a PHP? Good. There was one. He's probably lying How many here want to see this actually happened all over? Good We now have a coach been done Friday Beating on this drum again and again again Quick resources trick sensual apps or slash dog slash templates is Kind of where you get all the documentation get up come more than the key It's where my beautiful beautiful theme that doesn't do shit. That's pretty but the markup is so pretty So beautiful and of course another C thing we have a Drupal desk trick Which is where all the cool kids hang out come in and join just hang around be there help us know It's also a thing about actually having a communication going. So hey, how should we do this? Does this make sense? Can you look at that issue these kind of things? Oh? I wrote the buffing Thursday Quarter past two in the Azure room. I have absolutely no idea where that is, but that's where we're gonna take this this It's next we plant this by the way. It's next door No, so here's the thing we need to figure out what people actually want and even if you don't hey I can't commit to doing this code. I have no idea how to do it We still need you if you're badass developer who's tired of hearing your front-end devs bitchy and moan on a daily basis We need you to that was pretty much what got me into this The coach print what we're gonna discuss in my side is gonna be markup CSS JavaScript all the non-programmer thing all these soft things No, I had one developer sitting there today in the code room. He's like modern. Can you help me with this because I don't understand CSS How hard is it to understand CSS? You just need to know that you have every browser does it a little bit different you have a Two to three hundred different kind of things that can look at that that also does a little bit different And you just learn by heart, you know, there's no documentation for this How hard what was that so hard? I don't I still don't get it. We just Yeah, it's just like Google So That was the the kind of rundown of how the trick theme thingy works right now Any questions on that because IDs is the devil No, there's actually here's a very good reason for it when you use an ID the way that we measure So let's say you have you say your ID page You put a class in that's green the background color green I want to overwrite that later on if it's if it's an ID. I can't overwrite it with another class So I need to add something over that that is when I go in to have to add important That's when big Big CSS frameworks begin to be really really complicated to handle out So the reason to remove the ID is one thing is that the CSS is going to be easier to maintain Also, that if you have an element on a page to say a block that got an ID on it But that block gets called twice because we never know what no our Site bills is going to throw in we suddenly have two IDs on a page. That's not allowed So that's simply one of the that's the two we the thing about not allowed I'm actually not so much caring about I have it that I don't want to use important in my CSS I want to make sure my CSS get built up the right way And if you begin to look and look into the more modern ways of providing CSS BAM and smacks and begin to see how the structure and how complicated it kind of begins Begins to be when you're building really really really big frameworks That's when you figure out that IDs are suddenly the devil by the way I can announce that the page dot trick that the page dot HTML the trick file do not yet Do not have any more IDs inside of it because we sneak the fucking patch in three weeks ago And and and and check this out by the way, this is this is good. Here's the patch to Clean up HTML the HTML Trick what is this? What is it about? Well, we don't want to have all these dumb dumb dumb classes into Here's how you're gonna get a patch in Oh, yeah, actually here's the Where's my screenshots? So I created this patch what I do is I remove the from the body tag those classes There's one sidebar to sidebar side by left side by right. I have to provide this Screenshots of stock so the developers can see I have not changed anything in the layout That's what they require. Then at some point you're gonna say hey cut sir. Can you look at this for me? Then you're gonna get stuff like this blah blah blah blah blah blah blah blah That's actually web-check. Yeah, so here's the thing we're doing here is we're removing these things just Mmm And here's me bitching back at why I want to have this ready to be committed there's been ready bitch committed what six times so far and every time Somebody finds another little error and that's why we need more people inside the issue because if it's only me and cut sir and No John Lewis who's figuring this stuff out. You're gonna live with that for the rest of your jubilee life and We kind of want to figure it out before instead of after and That's kind of I know it's it's kind of signed dumb to actually do a homework the right way But that's kind of a thing we we need and I am by the way helping to get this thing into jubilee call because that will remove one of the other things of Going saying that all jubilee sites have a left and right class anyways That's just a small little things Any other questions? The the question is is like is twig like ginger for python the answer is Kind of the syntax is very very similar and I believe it was originally inspired from it I'm not sure we're I mean we didn't invent twig or anything. We're kind of new to it. We just I mean not me personally, but we basically determined that it was the best fit for Drupal and We're sort of we're the possibilities are so great that we're really only starting to learn all the possibilities And what we can do with it, so I don't know I'm sure someone's done a blog post, but we I don't have that knowledge It's anybody at all excited about that besides of me and Jen who's kind of one around in little circles I Mean cuz if I if I've been leading this battle for six years and trying to get front end death through the room and We've been using a year and a half so far to get this in and the reaction was I Would be a little bit sad All right So yesterday we got a she would take the break now or should we take the interesting quiz? So yesterday we got a really interesting question from unknown person They had a lot of Drupal seven themes and he needed to upgrade them so We went into the into the code spin yesterday and we coded a little thing that you can use forest Can you show you can you show us the thing you coded yesterday? Yeah, it wasn't a day All right, so I'm thank you for listening to me not going completely nuts over this And thank you for actually showing up I look forward to see each and one of you all of you who raised your hand It was that tiny bit excited that that come in the help And see you all on the coach print all the buff actually so Take it away Also after after our little demo here, we're gonna give you guys a break so you can walk around get a coffee whatever and Come back for more goodies Suppose you'll now you're gonna want me to switch the text to that. Is that gonna work better for people? Oh Great, I was wondering about that, but then I also wanted to have a contrast. What I have is I've got a D7 install and a D Eight install running here actually we really don't need this one that much so that's gonna be fine and then we're gonna grab this that's there just making sure everyone's there great and Let's do this This is a quick demo. My name is Forrest Mars, and I'm a New York based developer my mother number of hats I wear and I was giving some thought to a particular problem in Drupal That if everyone can't read this quote It's an all templating languages eventually evolve to become turing complete and this is essentially what it happened in with PHP templates where Anything became possible in the theme layer and you can do anything so then we rip that out and we now have twig Which is this amazing? I mean we everyone I think was in the session yesterday and people have been looking into it It's amazing so What is the problem like this sounds really great, so but there was a particular problem that I was wrestling with with my team in New York and It's can be expressed in this quote, which some of you may be familiar with That was originally used to describe using regular expressions to solve a problem and it's that Some people and face with the problems say I know I'll just use regular expressions for this Now they have to so it's the same thing some people when faced with an unruly theme layer say I know I'll just use twig for this Now you have two problems and but what are the problems, right? Well, the the first problem is simply that you have a new language to learn and what I've kind of noticed In the community is it seems like the pain is not really Learning the new language so much as unlearning the old language and everything you did learn like it's it's as if we had this investment in this kind of like Somewhat horrible system, but we were really used to it was worked for us But now I have to unlearn it, but that's only one problem There's another problem that seems to be the really pressing one And that's that if any of you have been developing for a while or working at companies in an electric while and have many clients and many installations and many sites You know that I mean if you're in February in the Amazing talk earlier today Learning twig and how to use it doesn't seem to be a big problem and You could apply this to all of the sites that you maintain that you have in seven like if you have a Huge client footprint or you're with an enterprise company that has a lot of sites Or you just really don't want to spend all of your time Converting all of those themes in drill seven to jupy late I mean you have to you know once you learn the system you still have to apply that knowledge and you're faced with the pain of upgrading all of your sites and It's just annoying right and everyone's doing the same thing right all of you are out there converting Code constructs in seven to the equivalent versions in eight and every you know We're all typing the same keystrokes right like why are we doing this? Is this a good model for open source development isn't this something that we could try to apply some kind of computational methods to and automate so This is the problems that we are wrestling with and so We've created this Little module it it was not I have to correct that it was not created yesterday It was not done in a code sprint and it was certainly not done in a couple hours Because it's a it's a it's a module that actually goes through all of your Drupal themes your existing group themes that you have installed on a Drupal 7 site and it It lexes over there doesn't that you don't really need a parser to do this kind of stuff and plus unless you're Fabian who I think like to be in the back earlier you really probably not can be ready to write one Whether it's an abstract parser or just looking at the concrete syntax But just just tokenizing all of the code in a seven template It really gets you enough to then and and if you look at the module see we have a rule set there And it's basically just one of the files in there is a long set of the rule mappings. So What I've got here is Here's a time got a d7 install running here I'm just kind of SSH into it locally and then here we have a d8 is running right alongside of it This is the alpha 3. This isn't the latest build So it's just an alpha 3 and then if I go I see that I'm I'm on my d8 install here and I've got there's d7 is just running alongside it and so here's d8 and it's got um It's got just the themes that comes in the alpha, right? We've got Bartik and seven sitting there and then over here on D7 I have a few themes Installed got Bartik basic Usually we've got a whole bunch of them So this the module is called twig a fire twig a fire. There's two sandboxes Because one kind of like gives you the high level of what has to be done to convert your themes And then one kind of was this was originally envisioned and then one is the engine that does the work automatically Right now. They're effectively just the same module. So I'm gonna consolidate them into a single namespace And so if we are in our d7 install, I just let's just run a drush PML and stop If you want to know more come back after the coffee break. Oh, we're gonna do the demo after the break perfect So so we'll actually demo it working on a theme I Did I did play around with converting mothership last night. So we'll see everyone at the coffee break. Yeah, come back for the thrilling conclusion What a cliffhanger come back in 10 minutes To 15 Are we gonna ask them Practical questions or something? Okay. Yeah, what what Okay, I think I think people have plenty of time to have gotten but gotten their coffee and got back in Not getting sidetracked on the hallway conversations So feels oddly weirdly like a television show of some cliffhanger and I was left like Will the module work will the output be creptaculous? So For those of you just joining us the recap is that we've got a Drupal 7 install here and It's got it's just vanilla Drupal 7 Running alongside vanilla 8 alpha 3 and Twigify module is pretty much like the only module installed on 7 But there's a whole bunch of themes installed. So there we go. We see that Twigify is just downloaded and enabled and Twigify currently runs as a drush extension I definitely want to get it into the UI so you can just like go to a page on your site and just click click click click And then it like outputs like there's your 8 theme and you just like put that on your you know It was an exportable and you just put it on your side of your 8 site Currently it runs as a drush command extension. So if I just were to type as simple as that this is gonna be drush Twigify It's gonna it's gonna it's going to ask me a couple questions. I'm sure there is I guess everybody can read that there is one Major downside to using Twigify to automatically convert your Drupal themes from PHP template to twig and that is you're going to have to buy some replacement Y keys for your laptops Because pretty much the process consists of for on the user side of Pressing the Y key repeatedly so So before we begin you just want to make sure you need you want to know what you're gonna call your new theme You want to know the sort you have the source theme that you want to convert Installed on your Drupal 7 site that has to be installed doesn't have to be enabled and then you want to know the Unix root path. That's the Unix root not the Windows root path to where you want the converted theme to be saved to So I don't think I actually know So but I'm going to press Y anyway First thing it does is it scans for all the themes that are installed on your site there's a Like to see if there's a feature request obviously to be able to scan your entire site and do modules to like convert all the templates and things inside of a module so I see mothership is installed here, but I'm not feeling that brave So I think what we'll do is let's go. We had a we actually had a request to do blue marine and so That was me by the way And so the first thing it says, you know, what do you want to call your new theme so we're gonna call it blue marine Ocho And sure that's quite acceptable. So so the next thing is going to do It's going to create a new theme folder for your Drupal 8 theme and create wherever wherever you want it to create it And if you don't know it's going to give you some health information to say yes So obviously we know that in Drupal 8 finally themes actually go in the themes folder like who would have thought Finally fix that and Let's see. So I'm gonna actually switch over here and just grab my current working path And just on my Drupal 8 so I just copied the working path for my Drupal 8 and then of course I'm gonna put it in the themes directory Great sense. So it's gonna ask me it's kind of misleading. It's do you want to create an info file? So what it's going to do now is it's going to create the yaml file for your theme and sure I want to do that and So it just created it just like that sound a new yaml file for my new Drupal 8 theme based on blue marine And do I want to remove the old file? So it's not removing it obviously from your 7th theme. It's just It's copied alongside of it and you don't need it So if you wanted to leave it there like take a look at and compare like what the info file old info file looks like side-by-side You can leave it there, but we don't really need to remove it So the next thing it does is it processes all the t-pills gonna look for all the t-pills are confined and it's going to iterate over them Interactively and ask you if you want to process them. And so I Think I think let's do all of you. I'll just do block boxes a typo in my code Sorry, we need to space in there so you can read it Do you want to do you want to twig if I get the comment TPL? Yes, and obviously node and page So and the next thing is it finds the functions, right? So here's all the theme functions and preprocesses and do you want to process that process that batch as those are batch process Processed and then it finds of course your template PHP and we want to convert that to the theme file which we use an 8 absolutely and Then do we want to same thing do we want to remove the template PHP? It's just corrupt so we get rid of it unless you want to look at it and and I Know what I'm gonna do is I'm gonna just run through this real quick again in case anybody missed anything Here we go takes a take a second for the fire So we're gonna done there we go and we're gonna pick blue marine again and and our new name for the theme. We're gonna call it blue Marine because I misspoke I said Ocho, but I typed eight so it's actually Ocho there we go there we go and don't need the information Definitely don't need that We go the theme so those of you that missed it the first time can see what we're doing here and We'll create the theme info file remove the old file Well, I'm gonna skip. I'm gonna skip the block templates because there's a block block ID HTML is is really not needing to just create some warnings so Box though and comment and all the good note note and page obviously and a process all the functions create our Create the theme file get rid of the template PHP and so what it's done now it did actually just took your the blue marine theme and it Alexa ran over it and all of the Little nice little tokens that it recognizes it just converted over and it packaged all that up and you know The time it takes to do this so instead of you spending an afternoon or a weekend or a couple hours or how long it takes you to convert the Theme depending on like your level of scaffolding the complexity of the theme, which is the real problem You know, it's takes you know a few minutes and you know 99 cents to replace your white key so now if we go to our Drupal 8 install there's our 7 install with all the themes and then here's our Drupal 8 alpha So we're gonna have to do first is we're gonna run over here or make a little side trip Because we do have to clear the theme registry or we're gonna get some pink output Presumably so and then after after doing that do that come back. Yeah, I'm just coming back I'm gonna refresh the page. So we had bar taken seven. So now we should have we should have a new theme here And and there we go. So we have a couple themes that are disabled there on our date site and one is blue marine ocho and in theory Remember, this is a demo We can enable and set default. I'm gonna click that right now and Let's go so many cross their fingers here, and let's see it so Comes back things look pretty good. You know errors see what let's see what the home page looks like and What we have here is the Marine running And we can I mean we can use it. I mean it's ready to go. We put you know can add a new block You know and this is a new block put that in the We can assign There we go, let's put it. Let's just put it in the footer so we can see it There we go and Oh, and behold, we should have down here everyone can see it's just low marine running on eight You know and like I said, you know go out and buy some y-keys and you do your theme conversion So so so that is that's that It's not really done. I mean there's a whole roadmap, you know, obviously there's an issue queue. I keep Meaning to apply for full project access, you know, but right now it's just in the sandbox So at some point I am actually going to like yes get get the thing promoted So you can just find it in the namespace and not have to like have the sandbox URL But it's really easy to find on Google, you know, and obviously use the Google search not the DO search So the main thing that I really want to that I really want to add here And you know, there's a lot of like cleanup stuff that makes the module nicer And so please jump on the issue queue and you know do some feature requests Obviously if you find bugs, but I really want to and we could discuss this at the bop Tomorrow is to have an API for you to be able to plug in Additional rule sets for conversions and this is going to be really important for converting base themes, right because Ultimately we want to be able to convert all derivative themes whether it's Omega or Zen or Mothership or any of them should be able to convert this easily right now Of course this doesn't work because the rule set, you know, it's not smart enough, but I am not going to write The rule the tokenized rule sets for every single theme on Google.org. Sorry but it seems to me like some a lot more sense if the base theme providers if twig if I just provides the API then base theme maintainers can then Look at the output. So what it does and so just so you know Twig if I does it's not always 100% obviously so depending on how close your theming stays to you know coding standards The better it's going to you get a little more off the rails are highly custom What's gonna happen is it's gonna run into tokens It doesn't know and so it's going to wrap those in a twig comment and hopefully in the next release It's then gonna give you a little report either through drush or on on the page when you use it And it's gonna say these are how many little bits of code we couldn't convert, you know, and They're wrapped in comment tags, so they're still in there and they're wrapped in comment tags And you get a report and think about it This is really really nice to do some kind of auditing especially if you have like a suite of sites or your company has a Lot of sites and you just don't even know like what the cost of conversion is going to be you can actually you'll be able To use this as an auditing tool so you can get a sense of oh, yeah We've got 17 things you need to convert over in this theme And we've got so many sites and get a nice report and then moreover you can look at that output And especially if you're a base theme maintainer and say well these rules are really easy You know easy to come up with for our for our particular base theme And so if we can get an API into Twigify that allows you to plug in a rule set Just adding to the rules include file just adding on to that Then we should be able to by the time Drupal 8 is released easily Have a Twigify running so that we'll be able to do full-on theme conversions for every distributed every derivative theme for base themes, so That's that's the demo And yes, I am responsible for we now have Blue Marine in Drupal 8 just to make it very clear. It's not evil developer It's just me being perverted So The trim white space operator works exactly like the PHP L trim or our trim function. So if you're putting like a Minus Then it will trim all white space before and all white space after it won't trim white space in between But if you need that you can always push your content to a filter and with that filter you can for example replace double spaces for something else and There was another question. Maybe a pot stem Paul if you can come up. I'm I'm not quite understanding It's about replacing the block class. So maybe Come up to the mic or you can come talk to us later And then the other question was about is there some kind of debug output for variables? to see like the available attributes for example KPR or DPM like from the develop module and The answer is yes, but we're working on something better twig does come with a dump function Which will dump all the variables, but it also kind of gives you a whole mess of stuff that you don't really need so We would really like to have a nice variable inspector in core But we need help to do it where we're already trying to do so much. So There's a little trick you can do at the moment As soon as you enable the trick debug equals true in your settings PHP You have this dump function available You just print dump like you would print any variable and then there's a reserve keyword Which is called underscore context Which is kind of like where every variable is stored within a trick template internally And then you can just do a pipe and pipe it through keys And then you know which variable names are available So if something like a contract module added some things to it and it's not in the documentation of your template You can have underscore context pipe keys, and then you just get the array keys. So to speak cool trick and I mean The nice thing about twig 2 is it's very extensible and flexible. So even if we Even if we're not able to get this awesome variable inspector into core It's still very very possible to do in contrib for example in the develop module. So thanks for the questions and and Send in some more you can even send them in the Drupal twig IRC How you doing Jen? Getting closer. All right So you guys can see code How is it in the back are you able to see this text or do you need a bigger? How's that bigger? Is that good? Okay All right, so how many of you are contrib module maintainers a few Have any of you started trying to upgrade your modules with your bullet yet? One okay, so you might know more than I do so if you see me doing something stupid feel free to correct me I have not actually done a lot of upgrading my modules with your bullet yet. This is the first one Stuff will probably change between you know, maybe change between this morning and now so don't take this as Law here, but you can't get my code What I've done so far this module that we're gonna do a quick run-through if updating is called on the web You can get it on dribble org if you dig deep into the version control section here There is an 8.x Section of code. So if you want to look at it later, it's there again. It's not guaranteed to be right But it's here So what I'd like to do is is go through the process of upgrading a module from Drupal 7 and Drupal 8 This is a really simple module all it does is provide a block So hopefully the module upgrade part won't be too scary What I want to focus on is how to take the theme functions that I provided in the Drupal 7 version of my module and turn Them into the twig templates that I need to provide for my Drupal 8 version of the module There's a couple of bad Practices that I adopted in Drupal 7 because I copied all the other contribute module maintainers who all did exactly the Same thing and we're gonna get the process of cleaning those up in the upgrade as well So you can see kind of the right way to do things in Drupal 8 with your twig templates Again writing code live against a system that I don't know very well that might not go very well So bear with me, but we'll see All right, so I'm gonna start off here. I've got my Drupal 7 module again All it does is provide a block the concept here is that it's got Social media icons right so Facebook Twitter whatever you want these things on your site This is one of these things where we built custom blocks over and over again for every single site And I was like there should be a module for that. So now there is So the block In the real world has a configuration form that lets you plug in your URLs to your Facebook page and your YouTube page We're skipping all that just for Brevity here, and I'm just gonna hard code so all these links will link to Google which will be fun But at least you'll get to see how this works so on my Drupal 8 site I Currently don't have the module installed yet So I'm going to go ahead and create the Drupal 8 module based on the Drupal 7 module So for starters, we have a YAML file instead of an info file All it has very similar information is the Drupal 7 info file the name of the module What type of extension it is for Drupal here? It's a module the description for the module and the version of core that it works for When I'm done with it, it'll also have other information like a configuration page, but we're not going to build that today So we'll add that later We also need to add a Module file and we won't be able to turn it on Didn't check this window Okay, so I am inside the module folder inside the folder. That's the name of my module here, which is on the web For starters, I threw all the images These are all the social media icons that were in the in the module in Drupal 7 There's through them in here and I've converted my info file. So the first thing I'm going to do is create a module file Super nerdy developer, so I don't have an IDE. I probably need to get one to work in Drupal 8. I use textmate. So I'll open that up in my text editor Module file needs to start with a PHP tag probably have a little Doc block all the good stuff, you know and love But because in Drupal 8 land in order to provide a block, I do not need to implement a hook I need to have a this module file of the PHP tag in it, but doesn't actually need to have any code in it What I need to do now is go turn it on a module that does nothing We're done Drupal 8 module excited All right, so what we're gonna do is build a plug-in, which is how you do blocks in Drupal 8 land. Oh, oh, oh Well, okay, let's go do that So in order to do that the first thing I need to do is add a directory in Here called lib and then go into lib and then inside lib I need to create a directory called Drupal and then into that we go and Then I need to make another directory called on If I can type correctly web name of my module and then into there we go and Now I make another directory Let's see that's called plug-ins Maybe singular Drupal plug-in. I think it's plural Anyone know Okay We'll try it. We'll see Then into plug-in we go and the plug-in plug-in we're making here is a block. So we make one more directory Okay, so now we're here. So now Inside this spot this folder we can create the actual plug-in we want to use so Minute sheet here So it's called on the web block Just make sure Okay, open that up and text me So now I have a Block my example. No, it's not either. All right So this is not very exciting. We'll just copy this whole thing Okay, so in here we just tell a little doc block that says what's inside it We've got a fancy class here called on the web block We've defined a name space and we're telling Drupal the things that we need to use in order to create the block not very exciting We're making a block. So we need access to the blocks. We were creating it an annotation That's what this fancy little thing is here at the top in this comment. So we need access to that And we're gonna need to translate the name of that annotation. So we need access to that information as well So we will use statements at the top you can copy this from other modules and core or read some documentation Or however you want to figure it out, whatever your module needs But what we're having here is we're finding a class here that says on the web block extends block base So we're basically taking a block and making our own version of it And so my previous module Is this is the Drupal 7 version. So we have here a hook right that has a bunch of different operations This is the view operation hook and what we have here is we're just defining an array that says here's the subject and here's the content In my module, this happened to be a helper function that had the Printed out the content and I had a Giant function that took a whole bunch of settings and printed out some information about that block Inside here, we're not going to do all the variable get set stuff because that's really different in Drupal 8 What all we basically do is is loop through a bunch of services Which we still need to do in Drupal 8 and then for each service We're going to print out a linked icon that links to wherever so we're gonna do that same thing In Drupal 8 land. We're going to have List of services. I don't know if this is the right way to do this This is just some helper function that generates the list So Here's my helper function. It's a yucky procedural function But I'm gonna throw out my module file where I'm allowed to put yucky procedural functions So just in here like this Okay, so here's my yucky procedural function and it says hey, here's the list of available services So in Drupal 7 we love arrays So I created a raise of arrays because that's all great and then all we need to do in Drupal 8 land Plop this pop the same thing in and then We're going to Get the list of available services Drupal 8 land. Here's my block. Oh Little side here. So in Drupal 8 instead of having a Hook instead we create a public function inside this class. So Let me go grab the code for that so I don't type it wrong Example bunch of other stuff I'm doing in here. We don't need to do yet So here's a public function build. This is basically a quote one to the hook block view as we had it before and I think I have a actually simpler Down here So public function Build so what I'm doing here is is hard coding a bunch of the stuff that we had settings for in Drupal 7 land like The alternate text is always gonna say find us on wherever The link is always gonna go to Google and then I have a list here of services, which I'll pull in I'm gonna start to assemble a string which in 3 million we always really hate assembling strings But we do that anyway. I've got a count and I've got a loop. So we're gonna loop over each of these services We're gonna create a list of classes, of course front-enders hate when module developers had classes And that's what we do in Drupal 7 And then we're gonna go ahead and generate some attributes in this case the title tag We're gonna attach that link and then we're gonna print The output by calling a theme function So if we look really quickly back at how this theme function thing worked in Drupal 7 land I called here One function to generate a linked image which was called a theme on the one on the web item And then after I had the on the one item linked image Then I called another theme function on the web icon and themeers love this, right? This is great And then if you actually look at the theme hook that was defined in my module There's actually a third one called theme on the web image because You always need theme functions the color of your theme functions, right? Themers love that So what I'm gonna do instead of providing three theme functions that I'll do very little Instead I'm gonna consolidate these into one thing for Drupal 8 So if we look first at what theme on the web image did in Drupal 7 It took a service like Facebook a title like find us on Facebook The preferred size of the image and then it created a bunch of variables to pass into the theme image function That really sucks right I did that it's okay. You can say it sucks Instead what we should be doing is Using the theme image function passing it a bunch of variables and giving it a suggestion so that rather than wrapping one theme Function another theme function just say if you want to override the theme image Function, but only for these icons. We're gonna view a way to do that. So in Drupal 8 I'm gonna call Let's first to define We still have a hook theme in Drupal 8 for now who knows So we're gonna drop that into the module file So this works almost exactly the same way as did in Drupal 7 this will work really familiar to most of you We've got the name of the module hook theme right inside there. We have the name of the theme functions When we've got here is called on the web item We've got the variables that you pass to it and then in even in Drupal 7 if you had provided a template You would have just added the template indicator in this theme hooker right here so we're gonna do that exact same thing in Drupal 8 and To Drive parallel between that and in Drupal 7 I'm just gonna dig a little bit deeper into what was going on in in Drupal 7 land So let's just walk through this follow it from the beginning No, no, okay, so I called this function on the web display block and In that function we looped through All of our services we built a link image by calling theme on on the web item Inside theme on the web item. We called theme on the web image Got the image added a bunch of attributes and then linked it by calling L Then once we had a linked image we called theme on the web icon in Theme on the well icon we wrapped the linked image in a span tag So all we're doing is adding a span tag around an image and that took three theme functions bad idea Okay, so how would we do that same thing in Drupal 8? We're gonna Consolidate in reverse engineer a little bit here, so we have a We're gonna start by creating a one single theme function that does all of these things And then we're gonna turn that theme function into a twig template so you can see how that works so Example Okay, so here's the theme function Okay, so here's the theme on the web item function. We're gonna start by taking the service the link It's gonna link to The title attribute We're gonna build a path based on the size that's requested again. I'm Not asking the user for the size here, so we're just gonna assume it's small We're gonna build the image tag So instead of creating our own theme function and wrapping it around theme image instead I'm gonna call a theme image with a double underscore and a Particular suggestion, so now when theme image gets called you can say For on the web if there's a specific template override or theme override don't use that instead If it's not it'll fall back nicely to just use the standard image handling So we're not doing anything special in my contribute module to Make that yucky for famous Then I'm passing in all those variables that I established earlier Which are hard to see And then I'm gonna set up some additional attributes like adding a HTML Title attribute here, and then I'm gonna link the image just by calling out passing in the attributes And then I'm gonna build the classes. This is the same theme function, and then I'm gonna wrap it in a span tag So one theme function that does all of it Okay, so there's a theme function version of that in order to get this to work Of course, we don't include the template here. Let's go Rebuild the theme registry and see the errors go away So we built the theme registry because we added a bunch of new stuff Why don't we just use the example module because we're running out of time This is the class, the process function. We also need Yay, Drupal 8 live demo Remember when I told you this wasn't a good idea? Yeah. All right. So in theory that should work. Let's skip ahead We're gonna go on to the Pre-process. Oh, I see By the way, Jen, we have till 350, I think, so Okay, take a breath. All right, we can make this work Maybe. All right By the way, if anyone has an idea, I just want to help me out and that's fine, too Yeah, that's what I was thinking, too Although Let's try that again. Putting your files in the folders is a good idea. Thinking harder than the last time That's all life, so you'll never make this mistake All right, cash just got cleared Already on the right track here. Okay. Let's go turn on a module or a block I already turned on a module Block layout on the web block. Let's see. We're gonna explicitly request Twitter and Facebook to link to Google And put it into the All right, there's a bug. Sorry. We're in alpha. No problem Do this Let's see and move this into a sidebar Let's see what happened. Ah Ha So it doesn't like missing a variable. That's right. We've got Facebook and Twitter icons and they link to Google Yeah, okay, so we got our theme function working. Glad you guys are bearing with me through all of that But theme functions as we all know are on the way out. We don't like theme functions anymore We don't like PHP code. We want fancy twig stuff so the change to make your theme function into fancy twig stuff is to Define a template file, right? I of course then need to create that template file template files in Drupal land Drupal 8 land way back up here Okay So We're gonna create a directory called templates. So everywhere you need templates You're gonna have a template directory with templates in them in here The templates are called HTML twig. They're mostly HTML So what does the template look like? You've probably seen some of them already We decided to start them with the standard PHP doc block which sounds crazy But that was actually the easiest parsing we could do and we're just gonna wrap that PHP doc block inside a twig doc block or twig comment indicator And then just as you would do in Drupal 7 land you just put all of your Normal comments in there so templates If you're a contrib maintainer you need to worry about this if you're just building your own stuff You probably don't unless there's other people on the project. You want to be nice, too All right So what we're gonna do here this just says, you know default theme implementation We're gonna have two variables the icon itself the attributes that we're gonna be printing into it And then we're specifying in particular the classes We're not gonna be adding IDs or any other data attributes just the classes But if you wanted to print them all out and add your own data attributes or whatever you could and then inside here We're gonna put a span tag. Whoa HTML Crazy not spam Inside the span tag. We're going to print the icon and Add attributes just the class Okay So there's a template again in the real world Having a template with a span tag in it is probably not like a best practice, right? That's a lot of templates for not a lot of code But this is definitely better than having three theme functions that did this exact same thing. So we're getting better In order to make this work we need to take our Theme function, right, which is how we did things when in Drupal 7 land and turn this into a pre-process function instead So we're just gonna take the whole function or actually We're just gonna rename this template pre-process One thing that's really important to remember is that you need to add an ampersand before the variables So if you're converting your own and wondering why it's not working That's super important. I forget that all the time We're going to take instead of Concatenating a string like we did here Instead we're just gonna take all of the variables We actually need and stick them into the variables array which will then enable us to print them out inside the twig template so here we have The linked image is what's gonna be our icon. So this should just be variables of icon The classes need to be in attribute And then that's all we need so we can delete this whole output line You can delete the return line like that and instead This is gonna be variables of attributes and then here Actually, it needs to be structured a little bit differently Attributes are super fancy in in Drupal 8. They're this awesome crazy classy thing that prints itself into a string Which you can look into in more details, but All you really need to know here Is that we're gonna pass in only classes and this stuff is a moving target too because we do that automatically now Yeah, so doing it not to need to cast this correct Just an array. Wow Magic like that Yeah, that's good Okay, so if you name it attributes, it'll be magical If you name it something else, it won't be okay. Got it Yeah, there's I think there's attributes title attributes and content attributes are all magical. Okay magic And then this is Is this right? Okay, so now we have a variables of icon and a variables of attributes So template preprocess and I should have defined a template this should work cross your fingers. Here we go Back to I'm creating a span tag you can do it By the way, Jen, do you have twig debug on? No, you should turn on. Okay. Oh Okay, let's see if it worked Should be exactly the same Yeah Okay, that was a lot of fanfare for something me or something. Okay, so let's go turn on twig debug So you can see what that looks like I can show you some source code And we can prove that it's twig Okay, so twig debug Here's this magic little settings thing inside my settings.php. I'm just going to uncomment it like the bug equals true Yes, I really want to overwrite that Just for fun, here all the caches again because we like clearing caches. We need a cache clear song Apparently, I just make them up. We don't have one All right, so this should also be exactly the same Eventually, I'll go fix that count error, but okay, let's look at some source code, shall we? Facebook Okay, so here we have our span tag. It's telling us here. Can you blow that up? Oh, sorry Yeah, that'll be good so you can read it too All right, so This theme debug indicator says hey The thing that comes next is being printed through a twig template. Is that still big enough? And it says the the function that was called here is theme on the web item And then it says hey, here's the output. So here's our span tag with our fancy classes Obviously, there's no count because I was throwing that error But you've got it on the web class and on the web Facebook class and on the web zero whatever it is class a link that links to Google the title attribute that says to find us on Facebook and Fancy image tag which includes all of this stuff that comes from core So like we've got RDF module turned on or I don't know where this is coming from But there's data attributes being added to the image tag I didn't need to worry about because I leveraged Drupal to get that for me It's using my image styles Or defined size here. It's not an image style Hold it correctly out of the module and it's got all the title tag on this and my span tag It took me half an hour to create on there as well Pretty exciting. Are there any questions about that? All right So in general if you're a contrib module developer and you've got a bunch of theme functions Upgrading from seven to eight is a really good chance to give you to evaluate. Do you actually need those theme functions? I had one I obviously didn't need at all It was the wrapper on the theme image function and I had two other ones that could be consolidated into one To be fair to myself I did have good reasons for putting those in when I did because it did it in the middle of the triple seven cycle and I didn't Want to break existing theme overrides people had had so I just put a wrapper a theme function around the one That was already there so that stuff wouldn't break But now triple eight time to clean slate all that so combine those into one And then once you have your single last theme function It's really easy to convert that into a twig template just by taking your theme function turning it into a pre-processed function Passing your variables into that array writing the template with the content in it that you need and pulling the stuff out of that variables array And fancy twigs and text and bringing them to page So you end up with something much prettier and easier for an ender's to work with Hopefully not without too much pain Yes question in the back so this code Is currently on Drupal.org It is a contributed module if you go to the version control tab you can grab the 8.x version Again, it still needs some work, right because it's throwing errors and stuff But the code that I demo today is all there you can grab it I'll get the other stuff upgraded to and you can you can see how that works too, but yeah, it's there Was there another question? No, no more. Okay. Thanks guys, and I think we're also supposed to do that survey thing Do you have that morning? I have something that's way more important Anyway, you're supposed to you it would be it would be nice. Yeah, you can tell us how we do so I'm really want to Especially I want to have some feedback to figure out if people actually understood what I was talking about Because I'm gonna take this slideshow kind of on the road and probably gonna do a couple of Screencast around it to make more people figure out where we are right now to get more people in But anyways, it's really really nice to get some feedback on these sessions This is the first time you can't twice out these two hours Events so figuring out if this is too long is we're way too boring You know all of these things you really appreciate the feedback So if you go into the on the Drupal.com website There's a phone we can fill out of course you forgot all about the The address to that because we're idiots and anyway way more important I just saw this tweet and I hate theming in Drupal, but now there's trick my heart is open for theming in Drupal I am happier. I Think we're not when I see those kind of things I'm I'm kind of down for one more year of battling so but I want to have you with it And Tomorrow we're gonna have to buff and the whole thing about that is actually getting figure out where where you guys want to push it Where we want to push it try to make a plan for it try to make a plan for it What things we're gonna put into call what we're gonna do and contribute figure in all of these things out That's gonna be tomorrow at the quarter past two Even more important the codes been on Friday And It's even if you have like half an hour still come by just showing your interest is actually making our machine go a little bit More when you go at three o'clock in the morning battling with that with a patch that just gonna hate you Figure it out if you're doing it right or wrong is really really important So please talk with us even if you just want to give us support or tell us that we have no completely wrong That's also good and now talk about things that would be completely wrong to do is of course Of course to go out and drink Jen Lamptons, which is actually a drink Invited by Jen Lamptons. So um today at the Carinthia bar, which is this hotel bar right over here They have Marabou Rome. I spotted that. I'm not sure if they have this evil Cranberry stuff and I'm a little bit afraid of it because I've never tasted it only smelled it and it smells awful But but Jen loves it and I always know when she's in the same past me because I could smell an awful awful coconut crab But today I want to try it and I just saw afterwards actually so later tonight and Apparently there's a beer garden like down. There's our cell This is the conference and up. There's the a big garden. They can hold hopefully a ton of people We're gonna go up there and get ourselves ridiculously drunk and celebrate that we can now do decent for loops and Decent markup in jubilee and I think you should all come and join us it's also on the On the park website on the social events. It's called something about sightseeing or something. It's um So if I want it's not me who's calling the shots and I'm glad for that Anything else last words It's a quarter past so we have to stop now I say Thank you all for coming It's it's kind of nice to see that people is interesting in this work And we look forward to see all tomorrow at the buff later at that the coach print Earlier for that for the drinking gin lamp turns over the current Japan even later for that for being dumb on a bar So thank you all for coming And I'll just add quickly Because this is a lot because it's new it would be interesting to know if you if you can give us some quick feedback What were you expecting? What did you want to get out of this? And did we do it or like if we do this again in Three months, you know, how could we do it better to to help you out because that's what ultimately what we want to do Thank you very much I I I