 I'd actually say with the name of the session change out there or just I don't think so either. Yeah. Yeah, right It's not so John couldn't make it so I was I'm filling in for her with a different session. Unfortunately. Yeah, so Sorry Yeah, I know I'll just I'll let people know once I get started again, but Yes, so for those who have just trickled in This this session is different than the one that's on the schedule The the speaker couldn't make it so I was asked yesterday to fill in for her. So the session is different And again, I won't feel bad if you want to go catch something else But I think you might enjoy Probably get started here then Yes, so again, this is Maybe different than what what were you expected on here? The web accessibility for higher ed session is not happening because the speaker couldn't make it So I was I was asked to fill in yesterday So again, if you want to go see something else, please please go do that I got no problem with that this session is on D8 admin theme and and some of the issues that revolve around that and how how we solve those problems. So yeah, so Yeah, given the short timeline of finding about this yesterday. I Did what I could to prepare for it and Part of this I would like to have you know an open discussion about this. I think it is a it is a topic that affects Everybody honestly, you know, whether you're whether you're developers site builder your Designer your you know the actual person who's using the site consuming it content authors You know, I think that one of the areas that Drupal has Started to fall behind on is you know, how we how we author and how we do things from the admin side and You know what we're going to do about that I've taken some steps, but you know, we'll see what we'll go from there. So Just to start out. Yeah, my name is Brian Walt. I work for aquia in the solutions architecture department Been doing Drupal for 11 years been a nine nine Drupal cons. This is the third session that I'll be speaking at Some contact information on the side there if you if you wanted to get a hold of me One way or another please do reach out and collaborate on anything I'm always open looking for for more people to help solve this topic The bottom here I talk a little bit about so my role at aquia is a bit unique inside What we do in the solutions architecture, you know in presales is that I run a small engineering team that focuses on, you know Building out the the kind of the art of the possible, right? You know as we all know when you when you install Drupal, you're not seeing all that much, right? It's it's looked at as a framework in that way You've heard a lot of things that Dries is talking about to improve that and I've been been working with him on a number of those things And I've also worked on a couple initiatives myself and our team's been working on some initiatives to solve those problems as well And I think that you know, I think that there's a lot that can be done here There's a lot of area of improvement. We are making a lot of improvement in this area right now, but you know given the role that I have I spend a lot of time with Perspective customers whether they're, you know, never used Drupal in their life never even heard of it all the way down to We've been using Drupal since six, you know, we're trying to make improvements incremental stuff So I've heard a lot of feedback One of those things Is is that we're behind, right? What I've heard is that in a compete situation Where we are, you know Working to to try to convince somebody that Drupal is the best solution for them Every single customer who decides not to go a Drupal They bring up and they cite that the UX experience was a major factor for them choosing not choosing it, right? Happens all the time. I know we all hear that we all have our complaints around that and so the other thing is You know self-guided Expiration as a CMS, you know when you go in and install it It's it's not intuitive and how to do that. It's not intuitive and what you need to do or how you go about building that And that leads to abandonment, you know, I think it's it's a bit unfair, right? You know, that's what we that's what we're trying to solve is like well Hold on a second, you know, this may name what we're looking at at first But there's a lot of reasons why it's better and this is why we want to prove that But we really do need to solve that gap, right? We need to get people excited about it again. We want people to be You know looking this is a solution that's can be good for them all the way from the developer side of things Which we're very very good at all the way through the authoring side of thing, which we're which we're not great at right now so That and then and kind of weighs into the the the technical benefits, you know We can talk about that all day long But then the day if we're talking to people who are going to be using the authoring tools You know that cannot weigh that because they they have expectations because they've seen other things You know some of the the the other CMS's and web content management systems that we've competed against All of those tend to do a lot better of that out of the box, right? You know, we think about it sometimes as a framework versus out of the box CMS and and that is true But I think that there's definitely room to do both So I think one of the things that I started thinking about as well You know what there's actually a lot of kind of low-hanging fruit here, right? I think that it's not so much that the experience is bad It's just you know, they have expectations and we haven't been we haven't been keeping up with those And on top of that I think You know one of my opinion is and as I've seen this happening and as I've had conversations with with people like trees and you know The community members is you know authoring an admin UX is going to be one of the most important things to attracting new users Right, you know, they're starting to look at like what can we do very quickly? How can we spin this up and so we can start working today, but then also build out and expand this project into something That's a lot bigger, right? And so we really want to try to capture those capture that piece and try to you know Tackle that in the right way that allows people to still have the flexibility that they have with Drupal But also gives them a little bit more of an opinionated workflow, right? That things are that are looked like they all work together. We have this ecosystem. That's so amazing But the problem with it is you know oftentimes the experience of Working with multiple modules together. I'm sure a lot of you have had this problem. They don't they don't all act the same They all have different actions. They all have different ways of doing things and you know Maybe the end result is what you want but you know trying to train somebody and all those things can be can be a hard work and Not easy not easy for people to continuously want to use it And and and the first impressions matter like I said before right like that market expectations that where things are moving with all of these You know kind of simplistic CMS systems like the square spaces of the world, right? They get expectations around that and we say well, you know, there's a lot of disadvantages to tools like that But you know at the end of the day they they want that experience as well. So we want to drive towards that It's next one's pretty interesting to me is the perceived performance, right? One of the things that I'll get to a little bit later here after I talk about what I've heard from from the theme I've been working on is An outdated UI makes it feel slower, right? You feel like you're this it doesn't work as well You feel like it's clunky. You feel like there's going to be you're going to run into problems That's it's all perceived, right? It's just they have expectations around what the UI should look like how it should interact They want it to be like Like Google they want it to be like whatever tool that they're used to using on their phones We don't have that experience right now and that's something we're trying to work towards Any device, you know, I don't think anyone I Would I would venture to say there's not very many people who use their phone to do any type of task inside Drupal, right? It's just not you just can't really do it. It's too hard They're they're not built to be responsive out of the box lots of the admin modules don't have any notion of doing that the click points all That stuff is just not there But that's low-hanging fruit, right? That's that's the good news there and the consistency and simplicity I saw I say in this earlier Right with modules, you know, there's no guidelines for how you will go about doing your style guides How you go about having interaction patterns we have tools like the you know form API and things like that which helped with Consistency, but you can still build that admin UI to look any way you want you can use anything you want Which is great the problem is when you start combining different things together all the Sun doesn't work very well anymore Kind of gets into that ramp up time, too It's like why does it take so long just to set something up where I can put a piece of media on the page? And have it look the way I want it to right those are things that people expect to be able to do day one And of course you can do that and you can do that very well But it takes a long time to get it set up so that it's there and you have to do it every single project Trying to try to get away from that piece and having more of that experience Is the direction that we're trying to move here? One thing I've always said is that you know our strength is also also one of our biggest weaknesses, right? The ability to to build an architecture exactly how you want to to the project requirements that you're doing Is is very easy and in really really specific that it's a Totally different than every other CMS out there that they just simply can't do what we can do with the velocity and speed They don't even have the ability to even have those conversations in many cases It's it's an absolute strength of Drupal that I've I've thought you know since since I started Drupal You know 10 or 11 years ago But the problem with that is it doesn't extend into the UX in the digital experience It doesn't extend to that you can't think that way when you talk about UX doesn't work We you know we try to think about being open and and allow you to do what you want And that's great when you talk about architecture not great when you talk about UX and and and more importantly it shouldn't be on It shouldn't be the responsibility of the person making the site or the person using the spike to fix those problems, right? That's it doesn't make any sense. There's a lot of repeat work. It's it's confusing Every project can be different Of course you want to put your own business requirements into that when you need to but the the 90% or 95% of that should already be there And we can do that. It's just a matter of changing the way we think about it in the perspective of that I Think that that's kind of a really important area to think about when we're thinking You know next generation of Drupal next generation of applications is Do we want to have that experience be you know connected? Do we want the experience of contributed modules to work in the same way? Do we want you know the UI to be accessible from your phone? I mean that to me if we don't that we're not going to have any growth, right? That's going to be a huge piece of of keeping this project You know having the passion behind it and the people behind it that say yes This is what we want next generation. This is where we want to spend our time building projects so I Sat down I said well what can what can easily be done here, right? You know, there's a lot of things that I've been talking about with this perceived performance and the this looks old So it probably sucks kind of mentality There's a lot of ways around that and it was very it was very frustrating to me because I would try to explain that You know those things are mostly just made up in your mind, right? Yeah, I sure you may not like the way this looks but then the dates it is fast. It is accessible. It's easy to use But you know, that's not that's not good enough anymore, right? We can't think that way so I said well, okay I can I can pick off a few of these things really really quickly, right? You know modern theme style guide, right? Like having a real actual style guide What are the interaction patterns when you click a button? What are the interaction patterns when you drag and drop something? You know, how would you find content? Where does that the filters go things like that? There's a lot of things that with just some simplicity and making those always consistent across the map would would make that much easier Which goes into the next thing that decluttering right so decluttering the interface. There's you know You've probably all built a node type that has you know 54 form fields and it's like absolutely insane to go through and to actually create one the end results amazing But that piece where you're actually creating that it's really really complicated and confusing it takes a long time It's cluttered so, you know What about like so I started thinking about like okay? So what about like the little pieces in between and this is something that we do when we're talking about demonstrating Drupal is like well We have to build these kind of little glue spots in between these modules and glue spots in between themes and how we interact with things That's actually easier than I than I thought it was right There's no process for that right now It's just the bigger problem which I'll get to but I do think that that is Something that we can all be thinking about to make it easier So I said well I'm gonna create an admin theme see what happens right just let's just give this a shot And I know is and I was kind of making a simple bet That's what I'm saying. Yes, I was like I bet you that if I just make an admin theme that Utilizes the the style guide that people are used to They're gonna think that it's a lot better and a lot easier to use So I went out and did that and I said well, what's gonna be the easiest, you know Easiest proof of concept to get me in there and that was to take that was to take material design, right? I think that Everybody who has worked inside? Well anything in the web now is they're familiar with Google's products one way or another You know, they're gonna know how those interaction patterns work There's just gonna see it and it's gonna be intuitive for them So I said well, let me take that design language and make a theme with it and see what happens And the idea was I'm not gonna change any code really other than the you know styling things differently Turns out I did a little bit, but at the end it was more about You know, there's there's small low-hanging things with the designs that if we just made those look and feel How we expect them to we're going to get to a place That's going to be a lot easier to use right out of the box just with that change nothing else at all And then the mobile focus, which I've already mentioned I focused on doing that with where we're able to actually create content from your phone You're able to create content from touch devices. You're able to click buttons and without clicking five different buttons at once I'm with your finger, you know that all that stuff makes it Feel and work in a way. That's much faster simpler to use and familiar with what you're used to with all your other applications And so I call this step one point five, which was like, okay. Well, yeah, that wasn't as easy as I thought so Turns out I need to make some modules to do what I want to do You know, there's some limitations from a technical standpoint around being able to create Well being able to do certain things inside Drupal require modules There are already themes out there that do this But at the end of the day, you know, that's what you have to do So what I did is it created a support module that installs the next three modules And and you'll see when I get into the demo why I did that and what those things do But really at the end of the day if you want material admin It's you go install the theme if you want some of the extra features You can install material admin support and all that other stuff will come with it I should mention one of my goals with this too was which is one of my pet peeves Sometimes with Drupal is that there's never a time where I can just turn on a module and it and it's just kind of done You know, I mean it happens sometimes but oftentimes there's lots of Configuration you have to go into other modules and configure them so that they work well with it And I didn't want to do any of that so I was I really wanted to focus on okay You turn on this month this theme you've got a new you've got a totally new look and feel You turn on this module and it adds into a couple features automatically for you without having to do anything And for the more more or less, that's that's what it does There's a couple of little caveats here and there, but I can talk about that one when I get into the demo as well And I've got a couple of you cases here as well. So if you've heard of the distribution contenta contenta ships out of the box with material admin as its theme both front and back end which I wasn't anticipating but You know, I think that that's really gained some traction around You know why it's important to have Administration theme that works really well is when you think about a decoupled Solution like contenta is it's like well the only thing that I'm using Drupal for at this point is my ad Administration tasks. That's it. That's all I do because the front ends up, you know Some other angular react whatever it may be So we got to make sure that that's the best possible because if not there's all these other CMS is out there that are Focusing on doing just exactly that, you know contentful is one of those for example That's API only CMS. They focus on creating an administration theme and Experience there and then let you do whatever you want. So if we're going to do that, we really need to focus on You know, what's most important for those types of projects as we look forward and what's important for the future of these projects And demo framework, which is the project that I own In and showing off various different, you know, how how Drupal can be more of an out-of-the-box experience You can check it out. There's an open-source version of that I will admit that that's been a bit neglected Lately, but it does give you an idea of like what, you know What an out-of-the-box experience could be like for Drupal and this is kind of interesting in Parallel with what Dries is talking about in keynote this morning around You know, you know me and all those other things that come out of the box Why we need that why it's important? So, you know, you can kind of see what that is like maybe a first direction of that So maybe I'll just jump into Well before that if anyone have any specific questions around, you know, what I'm talking about. Does it make sense? anything like that Cool law will jump in to show you show you what I've been working on then I Guess before I go there. These are kind of the highlights where I feel like they're Areas that I tried to focus on right, you know forms Drupal's just a series of forms right at the end of the day from an authoring experience standpoint, so That was important to me navigation, you know way finding knowing where I'm at being able to say, okay I know exactly where I'm at right now And and I know where to find other stuff as well, which is more importantly rather than having to go Oh, I have to jump around to these ten different places just to get this field to work properly, right? And to your reference field maybe a good example of that Tooltips moral cleaning things up Responsive of course action buttons that are clickable from your phone action buttons that make sense in the same place in every single page Iconography that's more modern and what people are used to seeing and expect things like that So Anymore I'll kind of jump into that so First of all Yeah, this starting on the appearance page right so some of the things I've been trying to do is is say well When it makes sense to use cards, right the card model I'm going to I've started to do that in a few places like the theme page You know making it easier to see, you know that we're again back to the responsive piece of things Things things work a lot more how you would expect them to as an application, you know get more information It's all there and easy to see without being just a huge long list of a bunch of stuff, right? Another example of that which I've been working on is in the uninstall page right now, right the kind of the card model as well Trying to clean up the way we think about things and and explain things to people who have never used this before One thing I always noticed was and I was building this is I was so used to Drupal I just knew the Drupal ways and Really, that's not that's not the case for a lot of people we want to talk about expanding into new markets and expanding in Growing Drupal and keeping it the project. That's so great that we all love using, you know We've got to think about those types of things so making this card model a lot. Why can't I uninstall something? Well, it's not always obvious when you when you're doing that inside Drupal right now This is a small example, but so I said okay Well, I'm not even gonna have the ability to uninstall something. I'm gonna remove that entirely if there's dependencies that are conflicting So just making that kind of an easier thing to read and understand, you know going into here and seeing What those what those requirements are for that to be uninstalled for example? Is kind of a the direction I was going with this card model so Kind of them a little bit more of the interesting stuff now navigation again, right so this kind of navigation model where it's More familiar with the tabs that we expect to see from applications for in Actually having breadcrumbs work turned out to be not that not that easy of a task I didn't realize that they just simply didn't work in core So I had to write a lot of glue code around that so that they showed actually the page that you're on So having the navigation at trickling all the way down into you know way deep into it and showing exactly what you'd expect One of the more interesting areas is I try to focus on it was actually the content management piece of things Right, so if I go into admin content page, for example, it's still a table But you'll notice a couple of differences, right all the filters get moved into a drop-down select form here, right? Showing you exactly what's being filtered by so you know exactly what it is that you're filtering The bulk form piece is gone except you don't because you don't need to look at you Don't need to see those types of things until you've selected something You don't you can't make a bulk action unless something's been selected So you know what I've done is made it so that you know as I select things well now Now I can go ahead and make my bulk actions over here, right? You know simplifying things that this didn't I didn't do anything differently here I just moved things around to be more modern and what people expect them to see And have them be consistent across the board Again this this one down here. So this kind of fob model was another Material design language piece here create new content. So adding content. I should be able to add content from this page I shouldn't have to go through four more clicks to add content. I should be able to do it right here So having this open up and showing all my content types here And so this is this is actually a material I've been support that allows me to do this type of thing And these icons come from the one of the modules called type style which allows you to pick icons for all of your content types for all of your Workflow transition states all of those things that you would want to to use throughout your your administration theme That would help people know what you're talking about without having to have a bunch of different Names and nomenclature for them So big focus around that was there and then creating, you know an editing content right going into the operations and editing content Didn't do a whole lot of much changing here around other than you know Got just making the the vertical rhythm and those types of things more consistent to what you would expect You can you can do things again on mobile devices and be able to click things and select them correctly Things like a date and time picker. I've implemented a date and time picker. That's you know more what you would expect to be able to do You should be able to just be able to pull this open and and find the date you want and select it rather than having to Use that little like I don't know what it is the HTML thing where you flip through it Those types of things should just be available out of the box, right? And then and then kind of going in from there is like okay. Well creating contents great, but What about media? What about all of those things? What's the interaction patterns for that? How do we hook into finding? Why is it hard to find content right or find media to put on my content? So, you know with with the addition of some other modules like entity browser We've we've made that an easier thing to do. I'll go to articles example of that. I Click into it I've got kind of a more modern architecture for This loads My images are not showing up. You should be images here, but Wouldn't be demo if it didn't break at least once so You know same idea though you would get the idea. So if there are these images here, they're all broken But even when they are broken you can tell that it's easier to see exactly what what it is Everything says the same height and width you can you know scroll the window and it should work more or less Okay, as it expands down in there and you can find all that stuff again same placement for your filters They're all in the same spot and every single time that a bulk filter is applied Things like that make it a lot easier for someone to just pick it up and start using Drupal Also just like small improvements that I would expect it to be part of this is you know I shouldn't be able to scroll in the background when this is open, right? That's that's crazy Why would I ever want to scroll on the page behind this at the same time? So like locking that and having the ability to lock that Be able to click away and without having to click X things just the really small little interaction patterns that people expect to have We can put inside Drupal and have that available for people without doing much work Other areas that are kind of interesting I suppose Going into Oh, yeah, so notifications for example, right? Notifications that show up they just kind of put them wherever they want, right? They don't they're just kind of in the middle of your content It's kind of confusing So what I did is like well, you know what I can do is put those into more of a Growl style or you know, I think they call it toast with with material design. So if I flush my caches You know, I should just be able to see a flash of that message rather than having it be there And you know, you can see how this would come up in the corner here I Don't have a you know a drawer down here as well where I can go and find those notifications on that page if if you Need to see them again And there's a number of settings that come along with this too So one one idea I had with this is like well I don't want to make it so that people, you know lose some functionality or have problems with the other contrib modules So in the in the admin Appearance page. I've been trying to make it every single feature that I'm building. That's non-standard inside Drupal has has settings to Has settings to actually Turn those things on and off or or change certain things number of years in the date picker turn on and off the Table layouts for the cards you can go back to the standard Tables for that Background scroll when the dialogs open things like that you can turn all these things on and off, right? Allowing notifications just to go straight to your drawer if they're too long So you don't get those massive errors that take up your entire page when when they when they pop up PHP errors or something along those lines That's added some compatibility mode as well So there are conflicts with the way that I do select Dropdowns and things like that because it requires full replacements of those selects since I can't style those So allowing people to go back to the old style in case they're using something like select two or one of those other features that they Are the module that they would like to use as well So trying to be accessible in that way. It's what I'm trying to get at with that Then See Oh action buttons, so yeah as you saw On Like the content page here, you know all the operations get into this these drop-down ability here So you know exactly what you're looking for same is same with Dragon drop, right all the dragon drop features Have have the same styling that you would expect from like the hamburger drop and pull down with that as well The other areas that I was going to show off And maybe this is something that I kind of originally planned to do on my my mobile phone, right? But I couldn't get everything all working in the short period of time But just you know just being able to see what it's really like to have You know it on a mobile phone and having these big click points so I can go to any page I want to you know having responsive breadcrumbs so I can still see what it is without dropping to multiple lines You know navigating the site is very easy on this having having actions that Respond once you click them, right? So there's kind of that animation there that happens You can see how those notifications move down here when you're on mobile as well So you know I've tried to give you a quick idea of this There's a couple of other things that I was going to talk about that Enhanced this experience right so when I was talking about contenta for example. Well Think about that as more of a portal style More of a portal than anything at that point You know you don't have a CMS where you're going and you're seeing the site live and you go around and create content things like that So, you know small little things like similar to a wordpress that when I'm logged out You know if I go to the user the user page there, right? So you kind of have this feel of more portal where you're able to log in again has that responsive feel to it So it's easier to use from a mobile device You know solving some of those simple problems that Make it kind of a pain and feel like an old an old CMS Doesn't need to feel that way for for something so simple This point while I'm getting back logged in does anyone have kind of questions comments wondering What's out there does this make sense to people? Yeah? Yeah I have like what what specifically were you were you thinking about with that? Yeah, so Yeah, totally so for labels and stuff. I have done a fair bit with that And and also what I was getting out with the description so every all the descriptions are now inside tooltips, right? So it just takes up it removes that space and in fact Actually, I would like to move that into maybe where the labels are at It's maybe the next step with that to even give it more some more vertical ribbon there So all of those the areas where you would see just like almost a wall of content because every single field has a description You don't need to see that 95% of the time So when you do you can just roll up scroll over it, you know, you can still select inside there You can click things if there are links in there. It's accessible that way Oh One thing that would be would fall into that as well as if I oops recent. Yeah, this word So for example, if it's a multi select field, right? You know making that really easy to select those items using a click box Which you can again use your your phone to do and if I filter from that now again, I'm showing the What it is filtering by right here inside this little pill So giving you visual representation of what's happening without having to weed through a bunch of form fields It was the other piece of that so kind of that bubble up model where it shows, right? This is what's going on on this page. I can make that change by resetting it Or whatever I want to do and be back to where I was before that so all of the all of the form fields I replace with What what is part of the spec for for material design language? And I think there's only a few that that that I run into that have you know some minor issues And I think I've resolved most of those at this point Drop-downs were we're kind of the biggest pain point for that since it completely replaces the select field with list items So has to in the case where drug droopals looking for you know specific markup, which it should never be doing I've made a lot of core tickets around that It does though and so it breaks things when it's looking for a specific markup structure From a developer standpoint You know I I'm still in the early phases of figuring out how I can do this But I have moved everything to a modern architecture using gulp for my task management sass for managing variables all of that stuff I have like a color scheme guide built in that very easy to change all of these colors simply Ability to move things around like you know, maybe you want the breadcrumbs not to be there This is a little bit of an undocumented feature right now, but if I go to I Have a sub theme of this actually for our distribution But in the case here I can take my breadcrumbs and move them, you know Above the site branding save the black and now you know, we have this other style that allows These these breadcrumbs to kind of be hidden a little bit and have this you know Shadow show a little bit more and reduce them that vertical space So another another Google style that I implied is allows you to do that So I can get back to this again, but what I wanted to talk about now is You know, I did get some feedback right so there's It's had like 7,000 downloads, and I don't remember how many active sites are using it changes a fair bit And I don't know I don't really trust that system anyway, but You know some of the feedback I have gotten was that you know the mobile usability like wow I actually can't do some of these minor tasks on my phone now 9 out of 10 people that that have reported any feedback has said that exact thing right the proceed performance again Which I thought was very funny We've had a lot of prospective customers who who've never seen Drupal and they're like wow this is really fast This is you know What did you guys do to make this so much faster or sorry people who have used Drupal before like why is it so much faster? It's actually exactly the same if I change the theme. It would be exactly the same as 7 so nothing's changed at all Not a single thing And it's not it's probably actually slower because a lot of JavaScript running so You know ease of use right Expectations of where buttons are going to be expectations of how labels and Role-overs work all of those things that oftentimes in core right now You know work one way work another way depending on where you're at and the who developed it and what theme it is So, you know simplifying that and making it a single piece I'm way finding which I also found really interesting I haven't changed any of the structure of any of the pages and how you access them But most of the people who report any feedback like wow, it's a lot quicker for me to get to different pages I don't know why actually one more click oftentimes because it doesn't have that weird drop button thing that I think is the worst user experience of all time Having a button next to drop down that you can click. I don't know it's weird. So I got rid of that So, you know that that kind of stuff was was the feedback I've been getting and if I had more time to do this presentation I didn't again. I didn't know about it until yesterday My goal was to be able to You know actually do some some user testing, right? You know have people sit down and say, you know, go go complete this task And my goal with that was not only to do that with Drupal But that exact same task inside WordPress exact same task inside, you know site core any of these other CMS is out there And then have them do the exact same task in seven say what was you know, could you do it? Could you not do it? You know so on so I have a pretty good feeling on what that result is going to be But you know, I haven't gotten to do that stuff yet. So that's kind of the next phase of things Speaking of the next phase of things Step two So now that I feel like you know, I'm in an alpha stage not getting a lot of bug reports at this point Aside for some contrib modules, which I haven't figured out what to do with yet You know, how do we how do we make this a reality inside Drupal core so we can do a lot more with it, right? you know First problem was fixing some of the markup, right? There's a lot of markup weirdness inside Drupal. That's just old right, you know input submit. That's you don't nobody does that anymore Right, that's not a modern architecture for HTML 5 moving all that to buttons so that you can actually style them would be really nice old JavaScript practices I was mentioning earlier where core hides buttons that When you click a link or click a checkbox it then goes and finds that element and clicks it Getting rid of that kind of stuff so that we don't have to rely on The markup architecture and still be able to do the same function functions that we're doing today Oh, yeah, this one has been a long long task for a long time Which is the Drupal themes lack the ability to to have module dependencies, right? I think adaptive theme was was the first to kind of push this piece here because they require a module to use the theme It's like well, why can't we why can't we declare those dependencies with modules so that I can have some Consistency and force some of the things that I can't do in the theme By forcing a module to be installed with it and everything works, you know out of the box So, you know, there's a couple of pieces around that which is my next goal. I've got a lot of you know Core core issues out there that hopefully we'll get into some of the next point releases and eight which will allow us to You know get closer to moving this type of thing into into core Not thinking that we would move like material design stuff in there, you know, again That was that was an experiment for I was you know, it was the easiest thing for me to get a hold of It was easiest thing for me to know that, you know, I know people use Google I know how that that they'll have that familiarity. So it's more of the experiment around that but The concept of having this modern architecture is what I was trying to prove And so the next piece is like well, you know, what what what can we do to solve this? It's like we've gone through a lot of technical Some technical pieces here is like maybe maybe there's some way that we can package styling into MPM modules that allow, you know modules to use the styling inside their their admin theme so they don't have I don't have to You know accommodate for that for example, so things like that. I don't know what that would look like I haven't really gotten that far yet, but you know as I get into to looking at the the differences and In ways that we can start to handle having an ecosystem for a style guide and for user experience You know, we'll start to explore how we make that more robust and allow people to tap into those things that are module developers or Or theme developers, whatever it may be So, you know, that's kind of my roadmap with that, you know again Just kind of a side price turned out is just a side project that I had that, you know There was a big need It's you know, a lot of people started coming to me that I had done no promoting of this at all They just found it randomly and people started to kind of grew organically that way which gives me a really good indication that People are really seeking having something more More modern something different than than what they have and you know coming with core Yeah, so at that point that was that was a that was all that I had for my presentation Just having questions Yeah, again like in terms of installing all of this stuff I do have this slide I can put these slides up for people But it's really easy to Yeah Material admin and then there's some day additional modules in this slide as well where you can go and download those and again Everything just kind of should just work Oh, sorry, I always forget that Hey, so you touched on this a bit but in Drupal 7 if you tried to install a Alternative admin theme on your site though The whole thing would break because yeah like the modules custom usually custom modules requiring Specific issue and whatnot. Is there anything about Drupal 8 that? Makes that less of an issue like just with the way that the theme system is set up or will my whole site still be unusable I Most of your so There is still the issue of contrived modules that have complex UIs like web forms Is a good example of that right they kind of do their own thing with that My solution right now has been to to I have been supporting those contrived modules inside my theme by by you know Any of the things that are specific to that that are not standard through you know form API and how it outputs the HTML and stuff I've been I've been manually fixing those inside the theme for for a lot of the bigger modules But in general most modules that I've turned on just work there hasn't been any admin UI stuff so long as they're not writing their own Specific twig stuff that which sometimes happens more or less They they just work because of I'm expecting what that what those forms most of the time So I know what those forms you're going to be so long as you're using the form API So I haven't run into any other than the ones I fixed yet That have been problems select two was it was it was an example of one like well Actually now I have to have a compatibility mode because I can't replace these these select box They can't we can't both be replacing select boxes So I was like well accommodate for that and turn that off as a feature in the theme So that's the area that that piece specifically is is what I'm getting at with you know Phase three is like how do we go about making this easier and more accessible and following the same style and patterns? I haven't figured out that solution yet. This was just phase one and say look We can get pretty far with only doing themes, you know, what's next? I'm gonna try to figure that out and then have you also compared like the accessibility of this approach to what just what's out of the box in core so As far as I can tell the accessibility is pretty much exactly that I'll actually even maybe slightly better because The way that I've set up tab indexes or way that the material ICSS set up standard indexes for select boxes and stuff A good one place. I didn't go which is a cool spot. I think is views, right? So I didn't do a whole lot with views other than Style it, but it does it just you know, it's the small little things That will allow you to work a lot better inside of this, you know Opening this up and having that but you can see how what I was getting as it automatically selects the first box You know, I can tap through everything exactly how you'd expect, you know, everything I can do. It's just my keyboard. So Using escape things like that which actually don't work in cord work here. So I would say actually I would venture to guess It's slightly better in terms of accessibility. Awesome. Thanks. Yeah We'll have to talk forums later. So I'm the web for module maintainer Oh, yeah, I was not coming to ask a question about that Yeah, what I am seeing is we're running into in the community similar design small design patterns that we need to get into core Like the tooltips one is a big one Like I had to go and implement something because things got too complex and the card layout is a huge Like I I need the card layout for some of the information that I'm maintaining Yeah, um, but my question is more about in the getting off the island concept like you've done a proof of concept using material Admin I personally see it as completely successful Mm-hmm, and it brings up the question. Why should we build our own admin theme? Shouldn't we use something that's out there in the community? It's you know, like the material admin is working really well I guess what's the level? What's the level of effort that you had to put in to use the material admin? Is it a viable concept to kind of just use it? I mean it core can also also offer two admin themes It could offer the light core admin theme where then people could use that as a starting point But this has a much better out-of-the-box experience. Yeah. Yeah Well, how's the community that's you know, we start evaluating these like when we talked about React first few Yeah, the question is how's this community working with is it only Google supporting it right right or there's now a community Yeah, I think I think that's interesting. I think that my perspective around that is that I've run into a couple of technical blockers that I don't think you'll ever be able to do and contribute And I think that we can solve those problems in core and so, you know It could be something where it's like oh we take this and move this as an option inside core But there would still need to be some work that goes to the system inside core to allow us to do more with that You know it's getting that technical blocker stuff around dependencies and things along those lines So I'm not I'm not exactly sure but you know, I think it's more I would be curious to know what people's opinions are And you know, there's a lot of people who don't like You know, they don't like Google design, right? And that's that's fine, right? You know, there's always opinions around that stuff and again I picked it just because it was so widely accepted and so widely used Maybe we need something more Drupal specific. I don't know but I think the concepts around form stuff around tooltips Another thing I know you did with the messages the inline messages That kind of pattern needs to get into into core as well so other questions Similar and that line so it looks much better on the team, right that is currently out there Are you gonna be? Working on this continuously like they're gonna die like if we start using it I hope once like what's gonna happen with this thing, you know, I don't I think you know one one nice thing about this Being out there and contribute now is that I have gotten a number of people who've gotten involved, you know Created some some patches things like that. They're also module maintainers have come to me say Hey, I want to support some of the stuff you do in the theme in my in my in my module You know, what do I need to do to make that work better? So I think you know, we're gaining traction I'm mostly the only one working on it right now But I've had another guy that worked with me at Acquia who spent spends moments as well So I would say that you know as it grows My goal is that this will definitely be around until something gets solved inside core right or something along those lines And I would I would rather eventually not be doing this and it would just be a core thing that you know The community fully backs and supports but until then, you know, Mike my goal is they continue to support it I have a quick question for you It looks like you've done some preliminary work with this module and that that work is changing core around Do you see other? Design patterns that could come in and create a similar theme Piggyback on the work you've done and then sort of open up this Ecosystem or this fear where we can start thinking about different patterns and you know, maybe incorporating not just Material design but other other patterns and could be part of this that could be like the Drupal material design Yeah, I mean that's that's my goal is to try to get us to think more around, you know Building a real style guide and and what I think of a style guide is really What are the interaction patterns that we have right? What does an action button do? What is a drag and drop do what is You know when I click and open up a modal, how does that interact is it full screen? What you know all those types of like small details that are usually inside design specs, right? There isn't any of that right now And I think that trying to have that's a starting point is that we can we can define those patterns Clean up the the output of the HTML and then all of a sudden we start to look at like well now we can start to build other themes that are similar to this that use those guidelines and Maybe just look like bootstrap or look like something else that you like better That that is totally an option and very viable and some of the patterns I've introduced here You know probably not technically the best implementation because I'm limited to inside theme for example But what it does do is it proves that these patterns are really important And we need to think about those because I don't think there's a whole lot of that going on right now But what one other thing that I was going to point out that I forgot about was that? You know on the front end too. There's others. There's also concerns like so something that I've always disliked about about Drupal since the beginning of time is is Basically how it Just plate when you're an admin it just places like your primary links and all that stuff just you know arbitrarily on the page right so one of the things that we built was Using outside ends that the sidebar It was what called moderation toolbar, which is one of those modules I had up there is it puts all that stuff right in the here for you So it's easier to see it, you know, it's more what you would expect from from an application So this you know tells me if my my my Article is published in this case gives my information over here I can add icons using the type styles module that we have installed here change the color of those buttons things like that all Out of the box and just kind of putting all that stuff off to the side So it's not ruining the design when you're logged in Things like those kind of patterns. I feel like are ones that Would make sense to have as kind of a guide for doing these things It's called moderation sidebar Yeah And that one's standalone you don't need to use material admin for that or anything like that You can go and do that and it will just put your primary and secondary tabs over into that Hi has has any anticipation been you know developed so far around Extending this to the front end, you know a lot of these types of controls may be made available to site users who are not using the admin interface as Well, I'm thinking like you know an order form or registration form That type of thing a little bit of that with that was one of the the objectives of having to use This material admin support module is that you know you have to you have to use a module to access CSS and JavaScript on both front and back end because you you know either your front end theme or your back end themes going to control that Otherwise so putting that stuff inside your module will allow us to do that So, you know an example of that is this the sidebar, right? So extending that I haven't built a theme for the sidebar yet. That's on my my to-do list this this sidebar and I'm trying to figure out what you do with Nadbar, whether it's something else or just theming this Those are two areas I haven't gotten to yet that are like your front-end administration that you want to feel like that It's cohesive from the back-end theme as well because you know you're you're not you're an admin You're an admin whether you're on the back or front end of your site So they should all look and feel exactly the same And that's it. That's a focus of probably like, you know my next phase of things So I'm not sure about like using those patterns as part of What your site is going to be or your application is going to be I'm not sure that makes sense. I Don't know, but I guess there there are libraries, you know in core like just the typical jQuery UI ones There's some expectations around, you know, I've re-themed all that in the back end Well now what happens on the front end just looks like the old one, right? So trying to figure out ways to to consolidate those to allow us to have You know cohesive front and back-end experience and patterns are the same It's definitely something I'm looking at trying to figure out One thing I did do with that though is, you know, for example, if you're using panels I Can go in here and Again, my images are probably still broken. Oh they kind of work here, but You can see that the jQuery UI looks different But all of these items that are inside here that I can select the different, you know Images are all that using the material admin style. So that's done through that support module That just comes out of the box too. So it would do things like, you know, putting this this over here and And so on Any other questions? Yeah, I think there's a is there isn't there some method for that that they have where we all put them somewhere I'll figure that out, but I don't know I remember the past they told me to put them somewhere and I haven't heard that this year yet So I'll make them available one way or another. Yeah, I just finished them like 20 minutes before the presentation. So Anything else? Well, I hope you guys, you know, go out and give it a try give me your feedback Please, you know create issues if you run into issues with modules or anything like that or if you have ideas around What what could be next? I'm definitely open to to anyone's ideas around that You