 Good morning everyone. Can you hear me? great So today we will talk about Jin My name is Sasha Eckenberger. I'm a senior product designer at GitLab You can find me with the handle Sasha Ecken on Drupal the Dork Twitter and everything social I'm the creator of the Jin admin theme Obviously, and I'm also one of the Drupal core Claro design maintainers We have another one in the room. I guess can you raise your hand? Thank you, Christina May your first note We are hiring at GitLab Don't tell your manager, but this is the URL to go to we have a bunch of open positions If you like us we brought some swag too, so we have t-shirts We have one pair of socks left And we have one hat left so yeah, if you have Any good questions or just you're eager to wear one of these t-shirts approach me afterwards Limited supply. All right. Let's move to the agenda. So First I will like to talk about the core update Because there was one little small piece 3 is missed during his keynote this morning. So I will address that Secondly, we'll dive into what's new in chin. So I think since my last talk a lot has changed And we will talk about that today Then we will have a brief outlook on the roadmap. So what's coming next and Last but not least if you know my presentations are key takeaways just for you to leave this session with alright Claro right it has been four years in the making I think The guy who wrote the first commit is also in the room Laurie So we have been we have come a very long way with that and I think we did great So we recently marked Clara stable as you might know We had to postpone this several times For different reasons, but to make it a very very outstanding product especially in terms of accessibility and I would like to thank everybody like the whole team every contributor who contributed towards Claro For their efforts because I think it turned out very nicely. So thank you for that and finally With like the original roadmap or original plan was to have a default in 9.0, which did not happen, obviously It's now the new default in 9.4. So we still made it a bit before like Drupal 10, which is great, too Right With that being said seven is now getting deprecated and will be removed from core But no worries if you still like to to to use seven It will still be available as a contrived theme But maybe the time has come to move either forward to use Claro or Chin You know, it's your decision what you want to use and Speaking of Chin, of course We'll talk about what's new in Chin, right? So here has passed and The usage went up 125 percent, which is pretty remarkable We have now over 21,000 installations as reported by Drupal.org and It just seems that distributions, which was a topic You know, like at Drupal Count this year really loved Chin So these are some of the distributions and DXPs which currently rocked Chin out of the box So Farmo has open social The 1x Internet DXP easy content drop solid rocket chip Local Gov and many many more Thunder and Barbase are currently adapting Chin as their new default admin theme, which is also very nice to see But the most remarkable thing which happened during that year was we made the jump from alpha to beta right because I teased that in various Presentations I gave in the past that yeah, you know, like better is just around the corner But then it didn't happen for another year. So Why was it such a hard change to go from alpha to beta because we included a ton of changes So first of all, we have fixed over a hundred thirty issues in that time period and I was just in a like three or four months time right We included that thing which I called the design facelift Which was more of a refinement of what we already had But it had some some goodies with it because we were able to reduce a lot of code Code dependency as well and just making the appearance a bit more nice than it was before So speaking of that You know This is just like the note overview as you know, we tied it up the layout a bit We reduced shadows overall. We reduced the use of different font sizes and weights And just the overall look and feel is just a bit more fine-tuned right so this led to the removal of a lot of CSS of course because reduction and We also added this I'm not sure if you can really see that on on the beamer But we added these nuances of the accent color for example In the app background. So, you know, like the app background is now Feamed in the accent color you use. So here we have the example with like the default blue and then it goes on with like this teal color Which might look more greenish on this beamer Now we have pink of course Because choice, you know, you have like a different bunch of presets, but you can also use your own color if you like, right? Custom as a customization is key for chin and always was and always will be Or a purple which goes pretty nicely with this presentation template, right? Doesn't it? and of course last but not least The glorious dark mode, right? That was a feature We have or a lot of users requested us to do for Claro and We just went the way and implemented that in chin So this also got various improvements in recent months So it's now even better than before, you know, like to use Apple terms the greatest ever Yeah Speaking of optimizations, we optimized vertex space and I think you all ask for it and we did listen Because that was always like a problem, right? Because like everything appears a bit bigger in Claro Which has an obvious reason in terms of accessibility But you always gave us the feedback that everything is more tied it up in salmon, right? Which is a which is a valid case in in some, you know, like in in some factors, but We tried to optimize the space. So why don't we compare like the two chin and Clara quickly? So you can see because we moved The bulk actions for example rounds and just tied it up the layout more We can squeeze in a lot more content than out of the box Clara a spoiler alert Clara will change in that regard too. It's just like the state how it currently is If we compare this now to salmon, you might ask well, we're not that off currently We I mean seven is still more tied it up than chin is currently But I will get to that point later in my presentation. We have something prepared for that so the facelift in a nutshell was we refined the design language of chin which You know, I got some comments on slack in recent months like well, it was always all already refined Why did it took so long to refine the design again? But that might be the obvious Thing because I'm a designer and I care about those things, right? So We simplified the layout We have a better accent color integration. We even have like if you Decide to go with dark modes, which is a user choice. So you can expose all the chin settings to your users so accent color accessibility settings like high contrast mode and so on accent color can Everything can be controlled by a user's profile But it's an opt-in so the the the option is not there by default or enabled by default But you can opt in to enable user overrides dark mode improvements and Last but not least the refactor code. I will come back to the refactor code just in a bit now so What did we do with refactoring code? Well, literally we touched like every single file in the code base So we refactored the php code. We refactored the entirety of the JavaScript codes and the CSS code as well So that was a main target point for beta one like moving from alpha to better one was like having all those things sorted out so We managed to squeeze out 81 kilobytes of JavaScript and CSS Which is quite a lot if you ask me, right? And the design if you can charge if you if you run chin does not look that different, right? So that was a huge improvement. I think your users will love it because we don't we have to ship like 81 kilobytes less to the browser But we also moved something else So we only load things which are necessary and don't get me wrong here This should have to be the default from the beginning, right? So we moved to split the code base into a more component-based focused environment and then we Basically just like ship the different modules if you have like specific modules enabled We just ship like the improvements for that if it's enabled But it was not from the beginning because chin grew quite a bit Like in the beginning it was just meant to be Your companion sub module for Clara to polyfill features We did not have the time to bring to Clara like the accent color or dark mode But yeah, two years later. It's now its own theme and it grew quite a lot So we had to do at some point like all the You know like the re-factor of the code base Automatic dark mode is a new feature which came in Quite recently in recent months so If your system follows like, you know, like dark mode, so let's say you have like You have set your time that at I don't know like at sunset or sunrise Your theme of your computer will change from light to dark mode Drupal will now follow away like follow along it will automatically switch back and forth between dark mode and light mode It's an option so you can opt in for light dark or this new auto mode, right? And this is also a setting which Which is available in the user overrides. So each and every of your user Can define if they want to go with light dark or this order mode Then we introduced the secondary toolbar to the front end That was a missing piece for a very long time that if if you don't use like the legacy Drupal toolbar But rather like the minimized vertical Horizontal one or the vertical toolbar the secondary toolbar was completely missing out in the front end, right? So that's a thing now You know this horizontal bar at the top. It's also opt-in. You can decide if you want to enable it or not for users who have used chin in the past its default it's Disabled by default so it's not opt so it's opt-in if you install chin if you have a new installation It will be enabled by default, but you can disable it It was just like the app the upgrade path that we don't you know interfere with your existing code We have new and improved icons So that's quite recently. It's just it's only available in that I worked on that like in in recent weeks So we just fine-tuned some of the icons Reduced some because they're all SVGs So I tried to reduce the code involved in those SVGs as well because we also ship them as assets, right? And then some others like reports We're a bit more refined and I opted for for a new icon there for example this was one of the biggest tasks in recent months and I Couldn't do this on my own because I'm not a right-to-left language user myself. So I'm not a native So I reached out to the community and struggled Quite a bit to find people helping out with that. But once I had like the signage of like two or three people We really managed to get this going and in I think it was with better free We have now proper support for RTL as well chin I would have loved that this would be part of alpha one But we was not possible for for you know, like multiple reasons But now like languages like Arabic like Hebrew or Farsi can also enjoy chin in the right way pun intended with right way Yeah, so thank you everybody who contributed to this specific feature Because this is also part of the accessibility right make it more accessible for For other languages. So, um, yeah, I think that's that's a very great improvement. We did Speaking of improvements I love developers and we love to make your life easier while using chin so You might be familiar with like the chin custom CSS, you know, it's a It's a way we provide Out of the box. So you can write a chin dash custom that CSS file to just make light Overrides to the chin theme. So if you have something which bothers you or does not fit your use case You can spin up that file and just do the the overrides without having to sub theme Because sub theming can be very overwhelming if you just need to do, you know, like certain small things, right? but Because it's a library. You can also extend it so you can literally just extend The chin custom CSS with your own with your own module and provide Additional JavaScript and CSS we don't Provide that in the same way as we do it with the CSS because it could be a potential security risk With doing the same thing with JavaScript But yeah, you can still opt in and provide your own overrides without having to do a sub theme You can just do it in your you know in your co-pays in a cost in a custom module or whatever you like and The next example is I know it can be overwhelming because we have I talked about that before we have so many options in chin You know, yeah, you have like a lot of freedom how you want to present it, right? You can choose accent color dark mode. We have three different toolbar options and for front-end developers This can be if you don't have a headless site If you have like a classic Drupal site This can involve a lot of code to make your Drupal toolbar work with your sticky header for example in the front-end But we have a very easy solution in chin So these five lines of codes will will solve all your fixed header problems Because the values the CSS free variables we have and by the way Mike has a excellent talk on You know CSS variables as well later today We'll just make sure that no matter which tool of our version Variant you use it will just automatically set the right offset for you simple as that speaking of variables we For whatever reason we started out with having like camel case CSS free properties or like variables And we recently moved away from that and now using like the kebab style case CSS free variables So this is a breaking change, right is a pretty significant change But because I mentioned before we love developers We're backwards compatible because we have a polyfill which automatically is like a style sheet which injects Which just does you know like all the translation? so if you have a custom module which use any of our CSS free variables or you have like a sub theme or your custom your chin custom CSS You're still good to go So at least with the free X branch and this will be shipped and just make sure that nothing breaks We have a new API for the chin edit layout I think like chin is pretty famous for its editing or editorial experience layout especially for notes and we Did not yet manage to bring that new experience to other entities, but we have now an API in place and With that API you can literally just move the meta information, you know the The things you see at the bottom of the screen With this Small hook we have so here we define the entity media edit form Just to follow along with like chin's new edit layout and boom you have the sidebar Everything is out of the way, which is meta information. You can hook into that at more stuff there if you like Which is just a great way to polyfill until we have like the proper support for it In my last presentation at Drupalcon Europe 2021 I showcase this dashboard concept Which made some waves we even had some discussions if we want to bring back like a dashboard in core at some point Which is maybe more role-based depending on you know the role you use a half because they're like different use cases and different needs And I showcase just like this one screenshot in my presentation And there was this guy called Eric Seifert Which actually really liked it and he already went away and integrated in this dashboard module So if you had to dribble the door project dashboards, you can already install a dashboard which uses Chin like this type of style chin provided in our screenshot and the best thing is It's all built on on layout builder So you have like endless possibilities of what you want to show up in that dashboard, which is pretty cool This was also a teased feature. I Used to tease quite a lot like the collapsible sidebar. So This is the note edit form as you know, and we now have a feature that you can collapse the sidebar away So Most of the time you have a lot of information in in the sidebar, which might only be relevant once or twice but the making more room for the actual content and Can can be key and now we have rolled out this feature as well So, you know, you can just like move away The sidebar and it will be the state will be stored Of course, it works on mobile too. So we have now a seamless Experience because the sidebar looks and feels the same from mobile to desktop, right? It's like a mobile first approach That said that was not enough for me because I like shortcuts. So we implemented two shortcuts So you have like option ass Windows or Linux users. It's like alt ass is a shortcut to toggle the sidebar So if you use the vertical sidebar, you can toggle that with a shortcut Obviously you can do the same with the tool with the sidebar Sorry, that's the toolbar or the sidebar Alt T or alt S So you can just use a shortcut to show and hide it if you're more of a keyboard type of user In one of our Alpha builds, I think we broke the back to side feature and nobody ever I'm not sure if nobody ever discovered it, but nobody backed about it and we did fix it and bring it back. So For people who don't know this feature It's actually if you're on an entity if you're on a node in your front end And then you you have to go to the the admin area of your Drupal site Just to adjust some settings for example, if you need to add I don't know like a menu item or something like that and then you use this back to side feature It will actually go back to the last site you visited in the front end, which is pretty handy But he was broken from the beginning it in it seems and it took us pretty remarkable time to find that and fix it but Right But the most Excited new feature and I teased it before Is layout density? So this was a highly requested feature for chin. I think for Clara as well We had a lot of discussions in the Clara team about layout density as well and It currently spoiler alert it currently only applies to table views But we're working on it that we can bring it to more elements or more modules like for example paragraphs To make use of that. So we have now dynamic spacing in chin Which is this new setting called layout density and you can choose from default to compact to narrow So it works similar if you're familiar with Gmail for example has such a feature as well So, yeah, it works in a similar way, right? so If this is like the default view you get or like the default density you can opt-in for compact or even more and the best of it is As we use CSS free variables, you can just hook in with a chin custom CSS and just if this is not narrow enough You can change it and just tweak it to your liking, right? So, why don't we compare it now? again to seven and You can see the result chin is now more dense in terms of items we can show than even seven before Pretty exciting, right? All right That's what's new a Lot of features a lot of refactoring I think they're refactoring and the redesign process took just a very long time to be honest Also, if the limited the resources we have, but that's another thing we will talk later So what's coming next what to expect next, right? So first of all is that we're ready for Drupal 10 So we are ready for Drupal 10. There's some nuances or some box. We still have to to fix But in a nutshell, we're ready for Drupal 10. We're actually the most used Admin theme I think overall theme for Drupal 10 right now. So there might be some pressure on that But it might not be the best statistics when it's not released, right? So Take that for granted another big thing is we want to get rid of jQuery and This is the meta issue for that The code has been removed in recent months We're in the state of reviewing things for almost three months now So yeah, we can use some help in functional testing because code review was already done Maybe some functional testing that's you know, some folks can just say, yeah, everything works as expected That would be very helpful because this is considered a blocking issue I'm not eager to do any releases before we do we finish that just to put out some pressure as well Speaking of pressure we want to get out like a release candidate one pretty soon I'm not sure if we will still have one better lease in between but at least the next or The release afterwards will be the RC one Again, I think as I say that I feel like a broken record because I have like this slide in every of my presentations We will also aim for the stable release soon. I promise But there's actually one more thing This we will start a 4.0 branch and Now you're asking with like, you know, a lot of features not ready still in development for Frito X Why do I talk about 4.0 now, right? And that's a simple reason because we decided that we That was also on my last Drupalcon presentation was this new vertical toolbar So this was like the the first screenshot or like the first mock-up of that So getting rid of all the flyouts we currently have which is a constraint We have from the past for the vertical navigation Just make use of the space we have and have a more streamlined navigation experience So we have like a mobile first experience a seamless experience that the mobile menu works the same as the desktop one So your editors, for example, or you as users don't have to mess around with different navigation patterns and we want to strive for the best accessibility here as well and With that being said, I think there's no better person to help us out. I'm not sure if he's in the room But he gets a shout out now The one and only Mike Herschel, right? so Yeah, round of applause So I included that slide to you know, put some pressure on his shoulders basically He is a lead developer or one of them for the Olivero theme So he did a lot of great things lately and especially when it comes to navigation and accessibility That's why I wanted to have him on board. But there's a second reason to that Because we have some undertakings to broaden up our you know, like the the talk about How the future of navigation would look like in Drupal core? Because obviously that's a thing as well for core that we might want to have some improvements well not might we we all know or we all agree that we have to change some things Especially like this this issue here in the ideas issue queue and there are a bunch more issues out there We'll literally just talk about the idea of having like a more focused menu for for content editors Because the current toolbar we have is very focused on site building and not on managing content So, yeah, we will use some insights of you know, like that feature If you can make use of some of the patterns we use for Drupal course well The chin edit layouts, we will bring that beyond notes. I teased it before You know to make or like these type of layouts more in the flow of what we have in chin for for notes To streamline the experience where like the action buttons are always accessible at the top sticky Because we currently have a lot of free flowing forums and we just want to you know Like bring them all together to make a seamless experience throughout the whole you are So in a nutshell What's important for for a for though release speaking of a release before we actually did any stable release, right great? So significantly improved the navigation is key the edit layout beyond notes We will remove all the legacy code. We have a bunch of them We still support Drupal 8 for example because we still have a lot of distribution users, for example, which are on Drupal 8 So we still maintain that we've got rid of that in a for the O branch as well Also the CSS free transformation from camel case to kebab case will be removed for for though So that will be a breaking change So that we just have a clean code base to go on right Support will still be for Drupal 910 So we will from the beginning not just only support Drupal 10 but also Drupal 9 So you have an easy upgrade path if you're not ready for Drupal 10 You can still make use of all the new exciting features for for chin for the 4.0 release right This is the way All right to wrap it up. So what are the takeaways? All right? stable release New vertical toolbar The edit layout beyond the nodes We will bring layout density enhancements as I mentioned we currently restrict that to tables Will bring that to more parts of the UI You're in full control. You can overwrite all the CSS variables involved if you if you like to We need You to at least test like the jQuery removal. So this needs functional testing and this is the meta issue again All we split it up the code base. So every single part Which uses JavaScript and chin Has its own issue which makes it a lot easier to you know to review, right? Two of them are already reviewed But we will not move on with them until all of them are tested because we have like dependencies between them and It will be pretty hard to maintain that if you don't do it like in one chunk Speaking of open issues we currently have and I think three's also it wasn't one of three slides this morning We have the issue that we have 30% of all the open issues we have in a chin issue queue are in the need review phase So we never get them to the finish line to RTBC and then into the product, right? So Developers in the room if you have an issue and you use a patch for any of the issues which are open in chin It would be awesome if you can spend the two minutes going back to the issue Market as reviewed and tested by the community just bringing back the status that oh Hey, that actually fixed my problem because that would solve my problem that we can move them forward into the product and You don't have to rely on at least one patch or you have one patch less in your code base So it's a win-win situation. I guess So yeah, we need some help there, right? Of course, yeah, of course Well contribution is all week actually Contributions rooms are open all week, but yeah Friday will be the dedicated. They may be to help us out with like those issues The issue queue and the Drupal Slack so if you have any questions Where to go where to help what to do? We have a we have a slack channel on the Drupal Slack called gin and you can reach out there to ask for if you have like some time to spare is some spare time to share Feel free to join and maybe ask where where you help could be or where you could be helpful We will always find something to do With that being said, I want to say many thanks to all our sponsors I know that's the boring part of every presentation, but it's very important for me Because I don't work in a Drupal shop anymore I have moved on beyond Drupal so My spare time is now the only time I have to Contribute to Drupal and these companies vectorial 1x Internet 3 on unique Thunder and the Dicto are the main sponsors of this project So, you know give them around, you know round of applause Because without those companies, I would not be able to do what I do for you know Both core and for chin and all the other modules. I still maintain But I also want to thank to all the individual sponsors because we have a bunch of people Individuals and smaller companies which also sponsored chin So another round of applause for them. Thank you very much If you are not a sponsor yet, and you still want to do it We have two ways to do it. You can either sponsor me through get get up or through OpenCollective These are the two ways we have a Special thanks goes out and I think I spotted one of them in the room actually. Maybe you can raise your hand Another was another applause please for folk her So these are the folks which really had a big helping hand in recent months moving on a lot of the features Helping with testing helping with actually implementing stuff because I'm still a designer which can do some code But you know some heavy lifting needs to be done by other people obviously and of course everybody else Who is not on this list is also like I'm very thankful for every single contribution towards chin if it's through code or reviews or feedback Everything is very very welcome and thank you a lot for all of that. So Well, if that being said Thank you all for listening if you have any questions, I don't have the app because it doesn't work that great for me, but You're now Free to ask questions. There's one over there. Hello. Oh, yeah Hey Sasha and I wanted to ask what were your thoughts and if there were any plans and To use Jin as a more than an admin team like a front-end thing I know it doesn't work for every kind of site like a blog site or whatever But I'm thinking more about like digital asset management Intranets and things like that So you can still have like for example like a project list with kind of the style of Jim But you need to add your own classes and massage it quite a bit So are there any plans to make it easier for users to use it in that way? No Currently not. Well, yeah, I like the idea. I and you're not you're not the first one actually Who asked me that because I was asked by some big corporations if we if I can do that for free Because they want to they would like to move their internal tools to make use of Jin for the front and back end Obviously, it's like a time constraint, right? but yeah, like maybe moving some work up more into Well, this also goes into documentation how you can use it which classes Most of the chin theme and we are still a sub theme of Clarone will always be because you know They're related to each other not only through me, but also through the code Actually if you know how the Drupal core markup works with Clarone, it's the same for for Jin So you can rely on the Drupal core markup for Jin to build something But that might not be what you're looking for I Know there's some there's there's a module or a theme Which is in the very early stages which actually tries to solve that I have to search for the name afterwards, but yeah, that there are some some Folks working towards like that go that answers your question somehow a bit Hi, I have a question about the name. Why is it called Jin and what is the story behind the name? Oh, I'm not sure if I can tell you Because I think it has been submitted as a trivia question But I'm not sure if if if it got accepted or not So you you might find it out a trivia you might never find out. No If not, you can hit me up I can you know or you can go to now This is spoiler for finding the answer for one of the trivia question if you go to one of my older presentations I will also tell you that in one of them I don't tell you which one because it would be too obvious, but we have some more minutes for questions. Oh Yeah, and don't forget about We still have merch so if you like merch you just don't leave the room. Just come here. Don't be shy Any more questions? I'm happy to answer every question. Oh, okay Wait a second now, I'm a bit afraid like I'm concerned First of all, thank you for all your great work You addressed a lot of things that have bothered me personally as a front-end developer using with using Drupal back-end for years and one of the questions that I Thought of now is we use a lot of custom modules, right? And if we want to extend the toolbars for example in the future Will that be an option to be done like easy and configurable or just true code? That's that's an excellent question. I heard that a lot and We also discussed that more for Drupal core If there's a way or we want to make it more accessible in the future that The toolbar at the sidebar actually sorry not the toolbar the sidebar is a region And you can just put whatever you want by drag and drop into that region So that's the long-term goal for Drupal core but yeah, maybe we have to fill the gap within chin to provide this functionality but Chin as a theme will not be able to solve it because it's still a theme and we already stretch the boundaries Where the theme can do quite a lot. That's also why we have the companion model that the chin toolbar It's not because we like to ship another module. It's because we need to use it to in check some of the things or to Work around some constraints There's not a bit off-topic for example if you want to have like a themed CK editor You can do that with a frontend theme. You can do that with a module, but you cannot do that with an admin theme It's restricted for whatever reason because I guess nobody did think about that The admin thing would they ever like would would do that at any point, right? But we do it for dark mode, right? So we checked styles that the CK editors also themed like dark mode So long story short Yes, we we are aware of that and we want to bring that to Drupal core, but you might take a while so yeah, if we find a way how we can implement that in chin I will be up for it because Chin is considered the bleeding edge of Clara, right? We have all the features ready and then we Look at the features prioritize them and bring them back to Clara So the the goal is that we poured a lot of the features we have today in chin into Clara But it will just take a lot of time and effort to do so. So does that answer your question? Okay There's one more question Thank you is Is CSS custom file is always in default default files folder Well by default it's in the public files folder. Yes That's obviously how to work around you know like a Lot of problems you potentially could have right because it's it's it's not in the get it's not in in get It's in get and ignore so we don't have to tackle with that So that's just like a nice workaround. But as I mentioned in the slide afterwards You can just hook into that library and just place it whatever you want, right? You can just write a custom module of like I don't like 20 30 lines of code And then you have it in get and you just basically just inject it that way So it always gets injected wherever and because we have like libraries for everything in chin now you can Also hook into the actual library where you want to attach your improvements because maybe it's not overall Maybe it's for a specific feature Then you can can do so as well. So in that regard It's like a regular theme and you can just you know extend it in every possible way Yeah, I would just not sub theme it because There are a lot of issues you can or a lot of troubles you can run into with sub themes. So Maybe don't do that Well, only with admin themes not with front-end themes. It's also because they're different. They're not the same Thank you. I don't think we have much more time. So yeah, everybody's eager for that merge, right? All right. Well, thank you again for coming. Have a great RuPaul come