 All right Should we try to start on time just for once? Would be a good idea. All right. If people want to come in there still a little bit of seats around So this might gonna be a little bit of tempo might gonna take 60 minutes if anybody have questions And as we go along just jump up to the mic and yell or just yell from your seat They're like hey, what did you mean there a lot of these are new concepts a new Thinkings that we've been doing for the last X amount of years that you might not Know used to so there might gonna be some new kinds of gonna be like little but why are you doing it like that? anyways It is now 11 o'clock, and I'm ready to start. I'm so happy that Dries warmed you all up for my keynote So that's always nice I've been all relaxed this morning and was drinking coffee and saw all of these Wonderful slides and wishes people had for the front end and how apparently the front end doesn't matter in Drupal I might Gonna comment on that at some point during these slides and now that I'm in the US I also know that people have a tendency to say oh he has a bad language. I cannot help that I'm a dane. We don't even have the word pleased in our language So that's how it is and yes if anybody have following the TV shows Vikings It is pretty much spot-on That's just how we are today a very peaceful people until we get pissed the fuck up hence the keynote. All right, so let's go This thing called so this is me more than DK actually It's wonderful to be in New Orleans because being a dane called more than there's two places in the US They can say my name one place is up in in Minnesota Apparently they know how to pronounce more than the rest of the world here. It's more ton because apparently I'm assault I do think you should all sprinkling a little bit of more ton on everything But that's a whole nother thing but in this beautiful part of the world We do have another king, which is more than Anderson the most scoring player in the NFL How he is not in the Hall of Fame is a scandal. I'm just gonna put it out like that Anyways, if you don't know who I am. I'm the one who says badass mofo on my name tag, okay So I want a small job called geek right out of Copenhagen. I do have a ton of my stickers with me I also do work for a company called tag one consulting we building big big big complicated websites with a bunch of really good nerds I used to be the angry theme in this magazine called the Drupal watchdog And I'm also classy maintainer, which is one of our core new themes Basically, if you want to ask me or anything go with a modern DK Drupal twig is gonna be our hashtag for anything to just put out stuff on Twitter. That's kind of our main communication stuff and DC no la as well So the DK is for diff killer by the way, just so you know, that's how it's been for the last many years I just launched my website finally on Drupal 8 and it's kind of broken in multiple different browsers But doesn't matter. It's finally up again. Yes I sat in Atlanta and I pushed the code right as I was walking in on the flight And what was the first response from people not good to see a website of more than awesome You put SVG files in line into a link. No, it's broken in my browser. Is this button supposed to look like that? Thank you for that. By the way, anyways Drupal trick is where you're gonna put it in So for the last three or four years, I know that's actually a lie for the last ten years I've been in the Drupal world for the last Nine years and three hundred and sixty days. I've been bitching and moaning about what was wrong in the front end of Drupal I've been actually in this industry for 20 years this year, which is kind of scary. Anybody here who's 20 years old Dude you act like you're 13. That's not being 20 years old Anyways, I've gotten one question when I've traveled the world This is kind of just some of the places I've been out speaking about this thing And I got one question all the time around this whole like Drupal 8 things like how am I gonna do it? Right, it's not about Can I do it this way or that way or this way or that way? No, it's like I just want to do it right and my first answer that was well, you know You can just do it this way or that way like hey Can you just give me one way of doing these things and then I'm gonna figure out the best of them and For once in my life. I got a little bit nervous because I was like, you know I have a whole room here front end as we have jubilee's fairly large system Everybody actually asking me this question. Why are you asking me about it? I don't know I mean or more than you kind of should know because you've been here for how many years how many years if you're doing that Who else should know I was looking around the room and no John Albin who is just in here He ran away because I can allow it Drupal 7. That was my fault to relate. That's your fault more than I'm like damn it so, you know, I Kind of have to take some of this responsibility on but before we dive into that we need to do one thing We just need to take one step back four years ago 2012 that was when we finally said, okay We really need to fix this seeming system This is in Munich you see can see John you can see me can see Jen Lampton and in Munich four years ago We had a small little discussion Nine hours at the whiteboard where I defended everybody who wanted to argue against not changing the theme system Happened there, but there was one session that Jen did where she talked about we need a designer friendly theme system That is the thing. We're trying to build. We're not trying to build adjacent parts or all kinds of other things We're trying to build the theme system that is easy for normal people to use or my kind of people You know the designers those who like to do pretty stuff Because at that point we were not even speaking to this group We're just a nerding out which kind of got into be an issue So we created a bunch of different principles first us and rule 8 will start from nothing nothing our base point We don't start with a fuck ton of different classes a markup or perspective Start with nothing and build on top of that Built on real use cases if 80% of people is doing this way How about we just solve their problem instead of trying to solve every problem in the world? Provide tools so we can find stuff make it visible so you can actually see your templates Consistency in everything and last but not least don't dumb it down because Believe it or not front-enders are not our theme us or designers of what we call us off It's not complete idiots some are but it's not like a status of like you work in the front end Oh, you play with crayons. I better like give you this little field You can play with it because you cannot figure this stuff out I mean it is also put the stuff out to these six million different devices, right? That's kind of what we do. So anyways the thing is you need a website So you need you actually need the sign you need content you need code you need devops you need all these things to run Good, how's that gonna come out? Well, here's the thing if there's no theme you cannot get anything out of it It's not gonna be able to show anywhere Another thing is that the theme should be pretty by default. How do we build these things? Because if we have no theme, this is what we have this is Jason This is the stuff to within Pretty much put out if we didn't put it through a theme actually. This is pretty Jason. This is troubles Jason Here we go So when I hear doing a keynote that like 20% things we should have like one of the lowest things is having better tools for the front end This is dribble without a front end It is that's the whole thing you want to build a better UX experience How are you gonna build that with HTML and CSS and JavaScript at the end of the day? That is what we put out if we don't have the right tools if we cannot control this from the ground of every fucking little inch We're gonna control it. We cannot build these things So it doesn't matter that somebody sitting in sales somewhere dreaming about us building better experiences if we don't have the tools for them Maybe we have a little light in the dark. What do you think that is? small little thing coming out Drupal 8 tweak that is our light in the darkness. That is the thing. We're gonna build all these things on Because fundamental this is about controls control of mark up and CSS It is not about the numbers of diffs or classes. We put into it. It's about controlling every little thing of it It's not a hundred percent control. It's a hundred and one percent control and it's not a request or I wish it's how it's gonna be Okay, any questions? Nobody have the nuts to stand up and say, well, I really think you should All right, so let's build this the right way. Let's start about this forget Drupal 7 Can you can you feel it just forget about it? Because it looks like this So let's do this How does that feel how does that feel Drupal 7 is now our blood? so Let's start where we should start and our base team our basic building block that we are building on It's pretty simple base theme stable. This is the lowest level you can get Here's how we built you will call so up there you have you have called you have stable you have classy Drupal core and stable if we look at that then we have to trip themes and then you have your own themes Right, that's kind of our whole family of themes. We have By the way, I have all of my slides already. They are already online I'm gonna push the URL to it that very last and you cannot guess the URL so I stopped trying to do that So you don't have to go panning more like a term I even got to get all this data in anyways stable stable is this wonderful thing It's a complete clone of Drupal core. So all of course templates are now in the theme called stable stable is You know a replica of jubilee, which means that we can begin to fix stuff in jubilee because believe it or not When we came up with jubilee like four or five months ago. It was not perfectly done I mean, we might gonna find it a little issue or two back in jubilee seven country We could not change anything so Well, let's say here. This is if you go into two links that HTML twig You're gonna figure out there's actually a hard-coded inline class in there that of course We cannot have because it can mess with your version of the inline class. So probably in 8.2. We're gonna remove that if you're not using So if you look at your theme, you got you got the inline class and now make it blue crap So if I don't use stable and we patch it we remove it from jubilee core What's gonna happen now your stuff is gonna be away So don't rely on core on anything rely on stable or rely on classy The difference between core and stable and classy is basically this is what stable puts out a wrapper and the data. That's it classy puts out a bunch of classes for you So you have some default it's kind of like our way of figuring out how we can do this. So classy is our Stable is our way of protecting ourselves against all the things we did not fix back When we came out with you will call so you can do whatever you want to do with your themes If you go base theme falls as you can do we're just gonna get to recall elements in I Promise you we will break your themes because we will fix whatever goes on to recall So just don't do that now you have been warned So we're not gonna see anybody whine in the issue like why is my stuff broken? I will base team falls you always have a base team You have always had a base team back in the days. It was just called triple seven or two will six Now use stable or use classy if you want to have classes in use that so I'm Documentation for that and I wrote a little article on it for on my brand new spanking websites So I'm talking about code separation a lot So so why is that well because you know we want to have the theme to be in control of the markup and CSS That's always been a thing and the way we're doing that is Basically every time we come into a template what you first gonna have this is where we define all of our classes We define the variable put in a little classes now you can merge them around you can build whatever you want to do And then we have the html that is separated down again, and you can drill into the data and grab the data out Because no html and CSS is is One thing you should always do is always put it inside of your template. Don't put anything in a variable Don't put any no don't put a class in your pre-process always put a variable provide the variable for your template your future You will help you out with that and this fine gentleman down here. He put a question to me yesterday It's like yo, and what if I want to theme my stuff based on the note ID? My answer to that is of course. No, don't do that. You are wrong. We also all know we're gonna cowboy things So let's just start up by cowboying this example So my cowboy element here is I need to have this hot rocking cowboy class merge into my body And it's gonna put in this image of the trick cowboy What you do that is that you go into a pre process and the pre process are going a taste on the note So such vanilla vanilla is the theme name Pre-process is the pre process and html is my html template. So this is where I'm gonna send it I didn't go in I test on the note go my drew ball road watch get permit to get that note If there is a note create a new variable I call it knit an ID note ID and get me the note ID fair enough Now my note ID is ready for my template So this is just to sum it up So what I'm doing now inside of my template. I say set body classes. That's an array within twig I test if there's a note ID that's equal in this Instance hundred and fifty eight note ID and then I have now a class that is hot walking cowboy Which in my example when I was just doing this code. It's just yankin and this was a hot pink background It's basically we can do these if-else's inside of twig that we can do all over begin to build your classes that way That's when you begin to have the absolute control of it. So basically it goes, you know Set some level of a variable test on something. Oh, are you gonna get the cowboy? Are you gonna get nada? That's the two variation of it. Um, and that's how let's just go back one step That's how if every time you look into these predefined classes This area said if you think in that way, you now have to control of what actually goes on in your theme so The other thing that we have in Drupal in Drupal 8 is that everything is a template in Drupal 7 used to be functions Now we took all the functions we ripped them out and we killed them and killing all the functions was a good thing As is so good. I had to take a picture that they we removed the last function and that is actually the commit comment That says die theme functions die No, so in Drupal 8 now out the box you have at least 135 different template files That's a ton of files. How many have actually worked with with Drupal 8 so far? Okay, who has not who's like, what are you even talking about? Okay, I hope you can follow else. Just ask questions later on There's a session on Friday as well. That's it gotta be like more fundamentals This is kind of a here's a crazy new idea So if I have 135 different templates my life is gonna be missable if they're all in one one file So I got to be two different ways you can organize this either you can go like the Normal the way we designed the system up first. That was like going. Here's your here's my templates This is classy inside of class. You have them grouped in these different groups So one for layouts one for the blocks one for all the views one for content one for edit one for fields Navigation elements data sets forms and so forth. So every element is like grouped by what it does That's all fine until at some point you have a Ton of files because you want to know fix every little piece of markup So it's basically like it's it's thought this way that you have these different elements You can call them in you have different variation of them and file names And you're gonna end up with this This is kind of the different templates that you can use you can use inside your theme You can call them and drop them in fair enough. This gives you a lot of variations And you can we still have we have one big library file we call in our CSS files and go go it that way And and that's all good The problem can be that at some point and you're gonna get a little bit tired of this because you know You go in and you look at the node and this node is now where so I feel that okay My field is over my field folder and so forth. So I was reading up on all this component based Front-end stuff and I wonder what that is because I was beginning to put all my stuff into one folder Here's my note. Let me put everything in my note into my folder. Here's my navigation Everything into the navigation beginning to group stuff that way. I ran into some really fun air quotes For the mic issues around that and that's one of some things we're gonna look at So my whole idea is I have base templates these base templates show off me The like basic elements of how a thing comes out as you can see there is let's see here There's a container. There's a field and there's a paragraph. That's like base basic templates that we're gonna put out then And if you look through it That's all my base stuff Then I have another folder called components and if you look at some of these that I have like a Folder called comment another one called footer the one called header. I have a hero of a logo I've missed it's a navigation node teaser powered by Drupal. So now I'm not building it within the idea of what Drupal does It's more like what is what does this do on my page? Hey, this is my navigation Just take me all of my navigation files put it one place Because then when I have to work with it later on I don't have to go into my image folder and figure out What did we call those images? You know when you look at your image folder after three years on the project It has like all this crap in and you have no idea where it came from like should we just delete it like Let's try and your site just explodes in possible ways because you have no idea where it comes It's probably gonna be just as bad in six to eight months, but right now it feels really good anyway, so the next folder I'm working on is called layouts and Anybody here use smacks at the turn only yes, can you spot a pattern on how I built my templates? Yep, exactly. It's kind of the same thinking of smacks. You have a base. You have these elements You have these layouts have these components I don't have themes inside of my theme because the meta got too high there I was trying to figure out some fun way, but it missed and then in my CSS file CSS folder I still have a CSS folder, but that's only for the base in the layout like the basic elements Then I take all of my CSS all of my image files all of my elements I need for different component and I put that all into one folder Just gonna warn you the first time you have a CSS file right next to a template file right next to your SVG file It feels like you're doing something wrong But I also kind of like to do that because I'm a bad boy something no God yeah, it's too early for that. Sorry for that. Anyways, let's go back to the point So here's my my folder. It's like templates components note inside of note I had no day similar to trick I feel dash note dash fool field node bar and so forth Then I have like the library file I then call in and I inject my CSS and my JavaScript files in now everything here is encapsulate enlist little folder Here's all of my note stuff. Um the problem is now that if I just put my note Note folder and I have a field template drop that field template in Things get stupid. I might have misused the whole day to try to figure out why something didn't all right Until I learned by looking at my source that fields get overridden based on the field name Your field name needs to be very unique when you do this Which is a good example of showing you how you can add new theme suggestions Because how do will does it it goes look through your folders as a template slash? ABCDFG Which template do I hit first the first one I hit I take that done and I move on Which means that in this example, you know, I have my template slash says set No, it's similar to trick, but it's the template that is in the a folder that's going to get ridden How I can do that is kind of our whole specificity inside of our templates So I give it a more specific name as we can see in a template suggestions That's going to be hidden in so I begin to do this patterns that instead So the idea is that on your file name You're gonna get these long long file name each file name It's going to be each part of the file name is going to be separated with three underscores Because one underscore can be in the side of a name like a field name That will be every space in the field name will be an underscore. So we need two underscores between between the identifier one underscores and one underscore for the name and then three underscores between each So you're going to separate them up So you're going to end up with like something like field the name of the field bundle the name of the Bond type the name of the type these names are going to be long Here's the beautiful thing it makes sense when you look at them and you can act you can see that all the way The way you do this is you can using this thing the hook theme suggestion hook alter so many hooks What we do here is basically this I have my vanilla is my first that's my team name theme suggestions the fields and now On my field you can see the really dirty trick. I do where I do above is vanilla theme suggestions I put that in as a theme suggestion name the reason I do that is now when I look at my source code I can actually figure out what goes on. I'm not the brightest person on earth And when I have 25 different template suggestions, it's kind of nice to have that in and then I begin to group them up So I get them as specific as possible So we end up with something like this you can see how specific I can go in and find each template because the templates Do not care where they live So this is my way of like securing that I do not overwrite my own stuff a Bundle bundle is the content type But by the machine name you will call it bundle and I'm not and I was like what should I call this? Should I call it content? I'm like, I think I'm just gonna use the name bundle and yes I also get confused what there's a clever dain down there that has an answer for this It's the entity type as a jubile front end. I really don't care See now he's for the camera. I have an angry dain looking at people like I I've been here for 10 years. What do I know? God damn it. Okay moving fast on. This was the first troll you get a sticker So you have the theme name and then you have the hooks the hooks over There's like the name of like the field the page the HTML that way and that's how you can grab it now I can begin to modify it. It's really really simple, but it ends up with this This is my my code widget I built my own code viewer so I can like post code on my blog and it gets like pretty color-coded with prism So I thought hey, let's do a matter Let me show how to build a code viewer and show the code for the code viewer So this is my whole widget and you can see I have my code CSS file the CSS file in the same folder I'm so excited because now I can find my CSS that's specific only for this thing. Then I have code SVG holy shit SVG files because SVD is the shit It's awesome, and you know what I'm gonna do with this file. We're gonna include it directly into the template So you're gonna have no HTTP request. Mmm built directly into twig. It's sweet Then I have some other icons because I was fooling around have paragraph that's code I'm using the paragraph module to build this paragraph module is the bomb by the way It's it's kind of saved my life multiple times and then I have these prism and prism is is the color coding view a thing that does some magic JavaScript stuff and I just jump in so Here's my code widget. My code pages is pretty simple. It has a field name, you know a final name It has a language my code is on and then it has the code and and basically what what it does is this it Call a code to my little code snippet so I can now push little code snippets out on my web blog and they are pretty and viewable So what it does is let's take a look at this if you want to play As you can see the markup here is What's that? Let's see ooh SVG in line. Mmm Doesn't that just make you feel good? Am I the only one who's crazy excited about SVG? There's like one thumbs up like in a year. You're gonna be crazy excited about SVG We can do all kinds of crazy stuff with it. It's amazing. Anyways, this is by the way Drupal It's not a security issue. We're gonna talk about that later This is my own file put in to get pushed up on my server. This is by the way Drupal markup Just out the box. Nothing else. This is like basic stuff This is might gonna be a little bit of a change if you used to work in Drupal 7 anyways back to this So we have all these different files. How do we build this? Well, here's the first. Is that too dark? Can you still see it? I hope so Because all the code examples have written like this. It could be like really fun Anyways, so the thing we're gonna do here is we're gonna start start by from the template instead of defining a library I call in from anywhere else where the pre-process and stop I do it all from my template file That's the whole idea everything you do in your theme you do that from your trick file If I want to call in a library and the library is where we define our CSS and JavaScript The reason for that is that modules also do that so that this is the way you will inject No, you will add in CSS and JavaScript is to your files The thing is when you begin to call them on each file This begin to be really really sweet because why would I call in CSS if it's not needed on a specific like if I have a Something for a form. Why would I add that to all of my CSS? There could be a reason for that I know but here I call in this library and Down here. I do an inline SVG thing. I actually include the SVG directly So I can still edit my SVG files from my edit from my whatever graphic program I do I just asked a trick to include it Inside of my library comes up here So out of my library I have a library called code snippet and that is defined two CSS files my code CSS and my prism CSS and a JavaScript File that is also in there and they all is in my same folder. So I do not now have to jump around between different folders It's all right there Yes And then if you want to look at the whole like the including so what I'm doing here I'm doing the include and then specifically on the whole path down to wherever my SVG file is and now what Trick is doing is taking that SVG file. You can do this with an HTML file as well You can even go go deeper down with include and you can actually take You can do your footer with regions inside of the HTML template You can take that put that into an include file as well and drop it somewhere else where you want to drop it You can like pass variables into include files and stuff includes are pretty awesome. It feels like To me like very old-school PHP 3 the first time I did an include file. That was just This is cool. I can organize my stuff. Yeah, I can see all the old people like yeah Yeah, all you new fancy JavaScript people. You're like, why is this so far? Anyways, so here's my SVG file. Mmm. I can even go in and hand edit it That's like when you begin to do this. It is pretty amazing And another thing I'm doing in this example just to show this off. It's like normally when we include a field You would include that whole field and that would then be like call to another template If you just want to get the data out without the attribute while all that whistle and bang in this example I just need the I need the exact language because prism uses this language Variable to figure out how it would color code stuff. So if it CSS file is a YAML file if it's a PHP file or an HTML file So I only need the raw value. I don't need anything else with that I could do content dot field underscore code underscore language at my field Take the first out of the array and then just give me the markup then it will only give me that data There's probably somebody who's gonna say that is something something but we can get this data out Right now anything else you want to put out if there's multiple values and so forth We cannot get them out this way and we cannot get them out with attributes and so forth on it So you can have accessibility issues around this. So it's not always do it this way I kind of like it with it's just like a field name or something like that I need where I don't need to like reuse Our markup components How good are we on time right now? I only have an hour. Good So people kind of following this whole concept of like rethinking like hey My template still live in my template folder, but I organize everything inside of like separate elements Good thing is I have one more example and then we can see like I'm not even gonna do live coding We do questions and so forth, but it's people like following this whole concept It kind of makes sense, right? That's the that's this is actually one of the beauties around Drupal 8 Which I begin to really enjoy by building it is you get these idea in your head and because everything is a This is back to the whole visibility thing We want to build systems that are usually that's easy for us to use and especially of this thing That is easy for me to debug in six years or four years Oh, you know in my example 20 minutes after I've written a line of code I cannot remember what I did because I moved on to somewhere else So this is kind of the idea sport All right, so one of the things the number one question I've gotten besides of how am I doing this and this is people hunting me down on Twitter and Facebook and all kinds of other Plays like more than how do I how do I add a class into my menu links? How do I do this with menu links because menus are kind of essential for a website right? We kind of use them to navigate around but when you look at them They are kind of pain in the ass to do anything with it's just have that link thing and you can't do anything with it And I begin to joke around with SVG and so in my head. I was like wait a minute if I can do all this in trick I wonder if I can put in an SVG file as my link. How do I do that and not break to? Exactly. There's one person here and the front will go like Do you think you think this is gonna be fucking awesome what I'm gonna show now, okay? So this started out as a holy quest like three weeks ago because Drupal does things also based on security so suddenly now we have the front end diverse as the security team That is always a nice fight, right? So what I wanted to do is I want to put in SVG files inside of my links And I want to still have a link to be active when you click on it It needs to get these is active class is active is added by JavaScript by Drupal I do not know why something about speed or something something. That's how Drupal's menu work So I started out by rewriting Drupal's menus completely That was a good idea right because now I've hard-coded markup inside of my template and I cannot move my elements around And then we begin to play around with it 36 hours ago We fixed this issue and this is gonna be a little bit advanced, but it's so fucking cool So let's see here what we're doing it is so this is my website by the way And yes, it may be gonna be broken on some sites I've not had the time to fix all these things because we wanted to inject SVG inside of links and not break Drupal So let's see what this does So here's my menu and you know you can put a mouse over and it put stuff out And I can you this is just to prove that this is not hard-coded There's nothing as good as like giving an example with just hard-coded everything be like well This is how you maybe can do it in three years So what I'm doing now is I'm actually doing this kind of crazy thing because I want to be able to like give my My icons a name and then put them in so I put in a fancy title and something And I do this pipe I do a pipe and then I put in a name and now we can save it And I've moved it around and let's see Let's see if it actually works Ta-da. All right, so I've not broken the menus. I'm still using the menus as they go along Let's take next little example. So let's look at the markup. What's happening in here? Here's my link Alight tag in it damn I'm using a use file. This is even sexier SVG stuff So now my file for all of my icons is up on the server and they're now cast This makes all the devop boys like ooh, thank you for not adding 6,000 SVG files So yes, here's my one file and now can we use it all over my site So we like let's see Here we go So what's going on here up there is my is active class is still and you can see the link is pink Because I thought that would be a good I always use hot pink as my test color for anything It's the best color ever and why because it makes my themes fancy So I have is active class up on it. I have an SVG in line directly inside of the link And even better. I have a pure CSS tool chip So now I need to add data attributes in I need to add some custom classes in and I need to inject and SVG file using use not even just injecting just with an include because if you do an include directly and you do not have the file and Trick like can't find the file it will it will terminate that template that calls it So suddenly my menu disappeared. I was like what happened. Oh, I cannot figure out how to spell my own things I'm an idiot because rocket. Oh, sometimes it's hard for me to figure that out. Anyways, so let's go over and see We have menu icons those bad boys. These are the icons. They're cutely looked even better Here's the file for them as you can see there's an ID outside of each of them So here's how it's gonna go Here's my data that comes out my description. I'm gonna use my description and put in an identifier on it So my identifier is here. I'm just doing a pipe on it because normally Everybody in Google will be like if you want to add like an icon to a stuff You should really create a module and put it into a module and put it up to Google cause or other people can use it Oh, thank you But I'm on a fucking deadline and I'm sitting in an airport and I'm about to push this stuff And how many hours is gonna take me to figure out how to write Google aid code push that stuff up where? Understanding how object-orientated coding works when I just want to take a fucking path Pipe that shit and put it in and get done with my life, right? So that's what I'm gonna do if somebody go like you cannot do that like I Can't oh, what are you gonna do? You're gonna like stop me publishing my site Anyways, so here we go the idea is I I take this like after the pipe And I then use my menu SVG file and I can use that as an ID So now I can begin to like put in a name and then we'll find that name and it'll put out that icon Exactly one person got it. I've been a little bit excited about this the last three days and kind of like We can do this stuff. We can do this stuff. So here it is. So here I called rocket and you got rocket down there So we're gonna call that part in of the file So how we're gonna do that? Well, it's simple. You know, we split it up. We take the ID we Know we call it an SVG file We create the marker we sneaks that into tweak because we had to sneak it in because security Somebody thinks that SVG files by default are insecure even if I put them up on my own server It's in my own git repository and that's where it comes. I'm still like, no, that's a security issue That was the first the first reaction I got on this when I put the code out I thought I would get like the front-enders of the world go like This is sweet. No SVG files is a security issue Like thank you for that. Thank you for killing my mojo on it So here's the here's the whole file on it. It's a little bit complicated, but This is where it's at. So we start up here. We split up our variables that create three new variables and one of those variables I will create the whole markup part that takes all this stuff and put in the name and put in the Elements that I put inside of my link then inside of my link now I do an inline template We create a trick template inside of the template Yes, I didn't get it at first either like what the fuck is this lorry and lorry is like he's finished You're like you don't even understand But we have a trick template inside of a trick template now we can begin to pass in whatever we want So sorry security guys, but I found a loophole and here's one of the things. This is how we work, you know Why do we work this way because I have an end result the end result is the layout There's the sign of this my client do not care about all of these other issues I don't get paid unless I get this stuff in I do know that if we break it all down And the security and stuff the server burns well then we're gonna have a whole not the issue But if the first thing I imagine when I go into jubal is well jubal can't do these things I'm probably gonna leave jubal again. I mean how many front-enders have been happy in jubal 7. Let me get a raise of hands Yes, exactly and why because we could not do what we wanted to do So it doesn't matter all these things doesn't matter your first experience with jubal 7 is this smack in the face And it's some kind of technical description of why you cannot do this like Fuck that Pretty pleased with sugar on top. Give me my fucking code. Let me do my job Yes, I have six million different browsers out there. I need to fix so sorry for the rant But we're doing in line template and then down here we do a render and then we add in all of these special classes and They that stopped it's gonna come up bigger. So first of all, here's my split I do a variable set description. I take item original links get description Then I do this trick function split and then I search for the pattern. I want to split on I search for two spaces and a pipe Fair enough. Then I take the link title. That's description dot zero That's the first part of the pipe and then description dot one. That's my icon ID Yeah spit as a trick function So every time you do a pipe on something you can do crazy stuff with it. It's basic. Here's my variable name pipe Make awesome and pretty that's kind of like and then you can pass and you can pass all kinds of stuff into every pretty much FEP It's P function. You can actually pipe in here. You can do like make this make this variable uppercase remove Not sure if you can actually do regular expressions on it, but I'm oh, yeah, okay We can actually do regular expressions on it. So we can like go go Yeah, some people can this particular day not here cannot I Have I actually the first thing I built in jubil 4.5 4.7 sorry to get menus menu link no menu images images into me That was way back when we did like sliding doors and stuff anybody remember those good days Yeah, image images directly into the menu good times now. We're kind of back now It's just these sexy SVG files to do that in jubil 4.7. I had to do a regular expression on the on the whole menu structure Yes, we come far away anyways So here's my icon name right rocket and take that so this is basically what we do We just take this thing and now I can begin to pass in beta my end user can pass in data I can pass the stuff in without writing these things. Yes. I know other end user cannot figure this out Well, if I explain it to him and the end user in this case is me So I will put up a little stick it note back on back home on my computer More than remember the first pipe is your icon because apparently I cannot remember that right anyways here go to the next one The SVG icon so I have my my my Span with a class on Have SVG viewbox to show how big it's gonna be and then I got to use link and Link x link href and then the path to my whole To my SVG file this I simplified because the file name is so long that you couldn't see it But if you grab my code, it's all up on github by the way I kind of need to remove the icons because I think they're licensing But we can go to that later and then I take my SVG icon ID and I use that and then I just print out my title clean and sweet All right, let's and Here we go. So and then my SVG is gonna use so this SVG file calling that in does that make sense? By the way, you have an SVG file has all these IDs and then with using use I can like pipe in and call it directly It doesn't work on IE of course because that's how life is there is a there's a JavaScript Library that can fix that and this is just on my side. I was kind of you know what I don't fucking care I'm just gonna rock this stuff and this is all if somebody goes like well Why don't you just put it in with like clean CSS that is not the whole issue here The issue is I can inject SVG directly into my menus. That makes me happy And then inside of my in my template So what I'm doing here this is where it gets tricky right you can see I do a variable set menu link I do type inline template and then inside the template that has my SVG icon the SVG icon We just created and then I do a context of the SVG icon and now I'm gonna get it in Whoo, here's in the next step. This is the link link menu link pound render pound render now takes This menu link and renders that through Google's normal way of doing it So we'll just inject all of this stuff into it Then I have my item that URL which is just the URL for whatever we're gonna go this like menu stuff And then the next thing is inside of the variable. You can see I have a curly bracket there to class Colon and then I put in the classes I need what So I will come to that because security They basically We don't in front and we don't call it cock blogging. We call it code blogging and that was kind of what happened Gonna come to that in just a second So here, you know, I put in the specific class I want to put in so if you want to put specific classes into your menu as a link just hey I just wouldn't need this class on this menu. That's how I got to do it The next thing I'm doing I'm doing data dash balloon. I put in my link title Balloon if you go and search for balloon that CSS balloon is like this sweet little CSS library That just adds balloon to your two links and stuff it if it has the data that's balloon It will take that data and put it into that little balloon you saw on my menus came out black and then also do the Position for it and tells it should go down. I Would prefer though to do it this way instead just doing like set a variable pass in markup and push it in The problem is that we have a white list for what we accept through markup and SVG is not one of them The reason for that is like if you upload if you have SVG uploaded, that's like a gaping security hole It's kind of like saying hey just upload your JavaScript to a site We're just gonna execute it because what kind of dumb things could you do? So yes, there is a security issue I'm not gonna like not accept that but here it is on my own server. It's me who created the file It's hard-coded in line. This is not a security anymore I mean even that I did get this one from the security and then the answer as always is no And this is to one of the other points in a when we do these kind of things By the way, did that all all that crazy shit that they did that made any kind of sense Kind of the good thing is you can take it you can feel and you can play around with it And that's kind of the thing that we really should begin to do in this triple world I do all these crazy things as we want to do them Because you know the basic the thing I did you know take a description split it out I move it around play around with it and figure out how to get it in the big hurdle here was like I could not just do regular double stuff to it I needed to create an inline template so jubilee didn't even know what kind of Mike I found this basically a whole how to inject stuff That's kind of bad. We need to create these tools. So that's kind of the One of the things that I think we really need to work around to figure out how to do it better So I see the theme system as our system That is how we as front-enders can begin to build stuff to think stuff and and make it work So we need to figure out find these things so we don't constantly block ourselves so As the last thing let's It's all about the future. This is like just crazy examples of what you can do to me adding Injecting stuff into the links and controlling the links and figure out what goes on to them has been like kind of a Little bit of a holy grail quest for me actually for almost 10 years I'm so sad. I could not find the site I built 10 years ago with the regular expressions on the menu Because back then why would I use you know that whole github kind of thingy because you know my code works the first time and stuff Yeah, I'm the kind of developer who you know, I Meshia once and I caught 25 times It's not always a good thing. Yes, there's people here have been working with me like yes, we know Here's the thing. I saw the I saw some of the trees note this morning and I saw hey we want to have preprocesses into core and I was sitting over in the green room I think it was a good thing that I was it was only me and Davina a German developer in the room that was there because the Level of cursing that came out of my mouth came up to whole new levels. Here's the reason for it four years ago We had seriously talks about pushing can anybody remember 960 grid system? All right, how would that be if that was forced down your throat in jubilee? That would be fun right because that was future proof because the things we write right now is future proof for ever for ever ever No, they're not. I mean, I've been a big fan of preprocesses for years I don't use preprocesses anymore. Why not because I figured out I don't need them because I don't build websites for I6 anymore I Built Google sites in jubilee where I can control my classes I can build my stuff in another way if we begin to inject every kind of new Kool-Aid come that comes in We are beginning to make some seriously dumb mistakes what we need to do in our futures We need to clear everything out so we can build whatever the thing is that we want to build on top of it Not the other way around not putting new stuff in the funny thing is I put it in as a comment here to trees It says how about we also put nine nine sixty years into code now. We are added. I might as a little bit Is it called snark? Yes, it's Sasha this kind of company is so here comes Nathan Smith the author of nine sixty He goes like what no, it's so old responsibility. Sure. This is a joke, right? We talked back and thought he got like okay pound small core Small core was a thing we had up six or seven years ago The whole idea is like making Google as small as possible out of the box so we can build on top of it That's kind of what we want to do in the front end And that's been like the the whole concept of this So I can say just now that I will use every inch of my body to make sure that absolutely No element of coolates get into the front end. I will battle it. I will burn it down I will find my axe and yes, I have an axe I will find a Viking ship and we will go to fucking town wherever it needs to be removed from Because every time we put these things in how many use underscore, you know underscore we put into jubilee core Sweet now we have that to move around Contact module wonderful thing to move around the discussion board. Hey, do we still have votes? Anyways, we cannot put whatever new coolate in into core as we need to do it because then we need to maintain it Drupal 7 was said to be what a two-year release cycle. Drupal 7 came out January 2011 My watch don't have years on it, but I'm pretty sure it's five or six years ago Drupal 8 is gonna be around for a long time We are not just gonna put whatever you think right now is the solution for everything the front end constantly changes That's the only thing we know. We also know we do not know what kind of browsers We are gonna theme this stuff for so we also need to be able to change that so every time Every time we put in any idea of this is how you're gonna do it. We are gonna fail So if you want to build whatever this end user experience is gonna be and you think you can just ignore the front end Here's your Jason feet work with that and With that and that like kind of bitchy comment on it No, it's more like hey, we need to think above this thing I know that as an end user you hope to get these easy solutions if we can't build them It's also gonna build these things at the end of the day and if you give me like this chunk of markup I can't build anything on it. So that was my first 45 minutes of France. Can we do 45 more? No Here's the thing it has been an enjoyment Three four years this is this is actually a couple of years ago. This is Jen Lampton. Is she in the room? Jen is here somewhere you find her go and hawk. She's like one of the initial takers This is the day we got we got twig into core. She was very happy I had a session and a bad camp that he has called the angry themeer Which was an full 60 minute full-on rant that yelled at everybody in the room by Drupal 7 sucked ass And what we needed to change I went from being the angry steamer to the Grown-ass man walking toward my room and had to like take a detour because I had a little tear in my eye Yes, sensible Viking This is the group that I've been working on this so far a bunch of these people we need more people We need more people to come and help us out All of this stuff we've been building has been it's very much uphill constantly I don't feel that the front end gets the respect in our community that we should get I get fucking pissed off when I see these kind of surveys coming out And it's like at the end of the day It's also have to build the stuff and you're not giving me the tools for it I know that maybe people thought that I've been there. I Don't hate developers. I love my developers. I love the fact what they're building I hate that I cannot build the beautiful product that we should build for them And that's the thing we need to change and we can only do that by getting more people in So come and join our little army. This is me and Joel on our weekly tweak Thursday meetings. We do We do a Skype call where we sit and discuss where we're gonna be where we're gonna be at how things are going around We have done another thing which I got a lot of flag for You know that how everybody else in the world they're using RSC as the like the main Communication channel because RSC is just ace, right? If you are developing with like 10 20 years on your back, you know RSC is just the shit Here's the thing we tried then I wonder if these designers in front and people is using this thing called slack Well, there maybe is let's set up a slack channel. I got a little bit of slack For it Yeah, I've been I've been having that in my head for a week right here Anyways, we set up the slack channel. We got a little bit of shit for it because it this is outside the normal jubilee Well, this is a commercial product that does this. I really don't care This is about us as front-enders having a place where we can communicate So this is our slack channel you jump in on this a dribble Double trick that slack that he woke up calm you go in there and you just put in your credentials and you go There's like 10 20 different rooms This is where we keep the majority of all the discussions. They're like hey, can you help me up with this? We are still using IRC. We still have that channel. We have not abandoned that We just know that by default there's a ton of special new people coming in that uses slack instead So let's not ignore that as a fact else IRC is the place. We're also hanging out We did plan this night to do like a front-end meet-up kind of thing somewhere But as usual I do we can't like fixing anything and I got I Might have used a week of my life to figure out how to inject SVG icon to do for go to a jubilee So we kind of is cancelling that thing But find find me I will help you pointing out to the right people doing especially doing lunch And and let's talk because This front and we're finally at a place where we can actually build it the way we want to build it and to me that's very exciting But we need more people to come in and help out because it's else I mean at some point you get a little bit tired of working uphill uphill uphill all the time So with that and ten minutes left any questions All right, so no questions, which is I mean I There was a question see I'm so happy you asked me that question First of all use Twitter is a thing. I personally use a lot use pound Drupal trick to like yell stuff out Questions comments feedback, please send them to me if this does not make sense Whatever it was how you feel about it. I'm more than DK the happy themeer as you can hear. I'm all happy. That's right My slides is on tiny you all dot-com Theming dash d8 dash no, uh, this is this whole slide set is up there. The video is not up there I am gonna publish all of this code on my brand new blog when I got it to work in all the browser because now I have time For that I'm gonna post that hopefully during this conference I'm gonna keep on posting more and more of these things case a lot of this is new thinking and At this point as as cuts are our core commit has said that more than you do know that you're kind of like our idea Man is kind of out of my brain stuff comes on which is kind of terrifying because you know only my head I mean we need more people to come in and help out and think discuss these things Play around with them especially when you have the discussions on Friday doing code sprints Really want to see you all there coming in and helping out and helping out is also just sitting down and discussing Where do we want to push this? What are our wishes? What do we work with right now? How can we change these things all of these things is important? Coming up to me cuts are Joel whoever else have been active in this and actually commenting on these things means a lot to us Cuz a lot of this coding is done at very late night Hours very much alone just you in front of a laptop and figure out actually means something means something to us So pretty please come with some feedback to it Couple of more links. I have here is the theme guide the standard for CSS smacks and the trick documentation There's coming out a new bunch of also of tools to use Which I unfortunately didn't have time to because I got ranted up in three C's keynote Which I did not put in So this is the same slide Anyways, and with that and actually as far as I can see seven minutes left Five minutes left Any last minute questions? The inline templates Okay, so the idea on the inline template is basically you create and you can render that template so you can you can put other You can kind of like It's kind of having one similar having another template then you whatever comes into that template you can then like Work around that that's why I did that whole horrible hack by putting all the the SVG things in so it begins to become a And inline template it's That didn't make sense. Maybe I don't even understand it, but I made it work Sorry for that other questions So what do you do around the administration team one of the things we really have not worked on on jubilee? Yes is forms Forms is kind of tricky to work with and I'm sorry for that But we only had that much time we chose to fix the fields first forms is definitely then It's in forms and component-based theming was a new concept Vim Lears and especially John Albin have been working on It's coming is that one of the big things we're expecting to see soon I personally have forms as my number one goal to fix so we can begin to rebuild the end user experience So so the question is what do I think about contrived based teams? So back in Google 7 you will also download a contrived module to fix stuff. The thing is in Google 7 We needed to have all these base themes to clean out all the stuff that came out of Drupal I created one John Albin. I created one. There's like a whole ton of them Base theme in Drupal 8 is a complete other thing because they do not need to clean out a Base theme like bootstrap is just going to do bootstrap thing The themes and what I hope to see is we're actually going to get pretty themes So instead of they just leak. Here's how I modify all my markup. It's going to be Here is my pretty pretty ice cream theme that looks pretty on all these browsers and has this design So we can actually go back and have design themes. That's my secret little dream Which I know a lot of people would really like because hey I want to have my can I get my side to look pretty really fast and just get going and That's kind of a thing we can finally begin to do And the other thing is when you start your theme basically what I normally do I just take like stable or classy. I clone that whole folder. I move it over I renamed the few files that need to be renamed done and then I go to town on it That's kind of the my normal workflow. So I don't even think about there's a base theme I just think about like here's all my template files because that is the kind of number one thing in Drupal 8 It's everything is a file and there's a fuck ton of them No matter what you do and if you don't organize them in some way you're gonna be like This is an issue It was kind of the joke was like when we killed the last theme function I was like so in about six months everybody gonna hate me because we have the 200 template files and what are you gonna do with them? Hopefully this is an inspiration of how you can rethink it. It's kind of Pre-thinking the whole component thing. I don't even know if this is a component I called it a component because that was the name in my head. So maybe we need to give it another name I don't know know where this gonna go on. I hope this was oh, yes No, so here's the thing Yeah, I Have I have no idea how people who you I don't so here's the thing I don't hate sad I just figured out that my life got easier without using grunt and gulp and all of these 200 other tools I was like hey, I just write my trick file and my CSS and I'm I'm done. Hey, I'm happy I don't have a grunt build that suddenly that gets destroyed because some Some developer rates quit somewhere and remove his repositories and then suddenly nothing works anymore and note world Yes, that was a cheap cheap stab at note. I know but hey What can I do? No, I do think that all the things that sass and preprocess have done over the years is amazing It has pushed the way we're thinking CSS and push the way what we can do It's the reason we're gonna get variables into the browser now We actually have them Firefox. I've had them for a year CSS variables is available now at last chrome Which is fucking amazing It's not available yet and safari we're waiting for that It's gonna come at some point and that's like one of the reason I'm like hey I don't think I'm gonna use sass in a year. Maybe you are built at your own way That's the thing we can do in jubilee now You can build your stuff as you want if you think this is like hey more. This is too complicated I'm gonna build all my sass things this way or that way. I'm gonna do it in another way go and do that I know that John Albin on Thursday has his new version of his sin theme Which is he's doing things. I don't even understand what he's doing He's also rethinking the whole thing and that's the thing we can do now We can rethink the way we are building our stuff and as we do that we can build actually an amazing front end And it's still this media call kind of like I don't like to work in the front end I want to have it to be a wonderful experience for all of us so Did that answer the question or did I just begin to rant? Yeah You kind of care Yeah, yeah, no, it's gonna be a complete mess. Sorry sass fanboys. I showed you a technique where I am superior. Oh My oh, this is all we call it right. Oh, man. I'm I'm not trying to remove sass. I'm just saying that I live a simpler life now. It's kind of like Yeah, I've used sass for years. I think it was wonderful But here's the thing I begin to drink old-fashioned right like old-fashioned is the best drink in the world You got a glass you got a big fucking rock You got bourbon got a little bit of sugar a little bit of bitter and then you know orange peel And if you're really fancy a cherry, bam When old-fashioned came back when they really begin to start up back and I think it's 1920 One of the reason they the bartenders begin to make them again was they were so tired of making these bigger and bigger And bigger and bigger cocktails so they kind of want to like go back to just do the simple clean Like drink that just works out And that's kind of my the thing. I'm on right now. I'm kind of like let me go back to the roots fun enough the CSS framework. I'm writing right now. It's called old-fashioned. I call my technique get this You know how it's modern when you use sass. This is post-modern front-end And I know yesterday at a bar there are some guys even coming up with a hashtag for it So if something suddenly explodes, and I'm in the middle of it some some of this is kind of dumb It's yeah, it is but it's just rethinking some of these ways and we can do that in jubilee. That's the beauty of it Like hey, let me do it this way. Let me do it that way do that. Yeah, pomo was the word As pomo I can't remember It's gonna come out. All right more questions or shall I let y'all go there Maybe No, so so the libraries what the libraries do is that they you can like built them in and they should be aggregated based on base or theme or Like lay out that whole smacks way. They should be aggregated that way There is gonna be issues with this I know by default because that was not how we thought the system from the ground up And the reason I'm doing these things is also to figure out like how can we build these things the best way because front-enders will Constantly come up with news ideas to fix stuff and we need to figure out how we could do in the best way without breaking Drupal and making our devout boys and girls angry at us because then they're gonna be like no I'm not gonna publish that I'm gonna be like well we kind of Then then you have this whole yelling thing and I kind of I actually just want to be happy right and just when I Walk down the street. You don't have to find a developer and threaten him with my axe No, but they they do get aggregated and they do get compiled and that is this whole thing that Drupal does for us So as soon as you go to CSS aggregation JSF crazy and cases it out for you So and the the whole thing about adding all the the files definitely you add a library for them each time So if you rebuild them you will if you have like a form CSS file every time I put in the form template I call my form library and I put that in you will doesn't care if it calls it 6,000 times because it's already there. That's kind of the whole idea behind the libraries And if you have a module that says hey if you use that That library you can then do something else with it or your theme can even do that as well David Hernandez wrote a blog article about it Block article and article about libraries and what you can do with it Yesterday afternoon As a developer who actually wrote a debugging tool to figure out which kind of libraries is available on your page So you can get control over that so we're beginning to get the tools We also need now like five six months down the road And I'm pretty sure this is like just the first time we're seeing somebody beginning to think stuff outside of the normal Drupal circle, and I know what John is doing Thursday. It's a buff. So go down and check it out Thursday afternoon, I think is I'm really excited to see what he's came up with up crazy ideas And we need to see more of these ideas So our front end becomes epic and we can build the user experience for our content editors All right with that little rant and actually going over time. So I'm keeping my own tradition. I will now let you set You free come and fight the front end with me. It's fun Kind of