 Ah! I mean, hello. Yes, I'm a sara and I'm presenting on skins and stuff and things. I made a skin and I'm going to show you stuff and how to make a skin. Yes, I don't know. Is it going to show the thing or is it showing the thing? I don't actually know how this works. It's showing it now. Okay, so this. Well, actually it's not done at all. But basically, I'm going to make this out of this. So, y'all should be familiar with winter, which is Brandon Harris's thingy with interface stuff and, you know, it's very fancy, very shiny. So if anyone has any questions or comments or whatever, please interrupt me because I don't know what I'm talking about. And if you interrupt me, then it'll be less obvious that I don't know what I'm talking about because I won't be allowed to ramble as much. Yeah, good. Yes, I don't know. So, that's good. Just to break in here, winter is the skin that Brandon Harris works on in a while. It's not underactive development right now, correct? Right. It's basically a prototype that's sitting there that you can do stuff with and it has some funky module things that... I think the idea was to have a lot of them that folks would just plug in and then make it fancy. I don't really know. But the footer here was one of those. The way it's darker than everything else. And basically the two that people are probably most familiar with, I'm assuming, are going to be Vector, which is the default on Wikipedia, and MonoBook, which is the old default on Wikipedia. And there are others out there that have said two big words, right? Yeah, so Vector, everybody's seen that. It looks like Wikipedia. And MonoBook, well, it looks a lot like Vector. Oh, and John also pointed out Monerva as well, which is Monerva the default on... It's a little off the front end. Yeah, but you can apply it to desktop like with the same... This one's completely different, which is actually pretty cool. Well, it has a lot of features that you only ever actually see in mobile, which is kind of a shame, because they'd be very useful in desktop as well. But there's work on that. I'm hopeful. Anyway, yeah, so making a skin. I'm going to try to show you how to do that, maybe. Yes, I don't know. So basically, the whole thing is fairly straightforward. You just make a skin and you stare at it. Good stuff. I don't know. So what we're looking at here that you have up on the browser window... This is the prototype, basically. It's not a real... It's based on Brandon's old work. This is Brandon's thing right here. So this is basically a prototype. It's not a real skin as yet, so I'm making a skin based on it. So yeah, if you've actually got a prototype when making a skin, it makes things so much easier, incidentally. What? Just tap. Hey, my computer started responding. That was random. Sorry. Okay, so yeah, but basically, when you want to make a skin, you figure out what you want to do, and then what you do is you clone the example skin. This is a clone of the example skin. There's not much to it. It's very exemplary. I can actually show you the source and stuff. Rachel, could you switch the things? Great. You can see the other screen? Excellent. So I've cloned the example that was whatever, and it's just... This is a timeless skin. So example is just very straightforward, very basic stuff. Basically, you just copy all of that, and then what you do to make an actual skin is you just replace every instance of the word example with the name of your skin. So that becomes time. Let's just throw out the entire thing, and you just go through all the files, and you do that, and then you wind up with a skin that looks exactly like an example that you can then do stuff to make it shiny. Okay, switch back over, I guess. I don't know. Okay, so there's basically the minimum example there has four files in it, correct? So these are the four main files. There's also the common stuff. Which one is sharing? Is this one still sharing? Yeah. Okay, good. I don't know. So yeah, there's the resources, some example stuff. I put some mixes just to show what they look like. Yes, and there's also the I18N files, which you also need to change. If you just do it according to the format, it'll all keep working, and then the translate wiki people will suddenly randomly start translating it when you least expect it and confuse the hell out of you. So yeah, you do that, then you have a skin, then you basically just delete all the stuff out of the skin. So I've got the commit log or whatever of Timeless here, so I can just check out the different versions and show you. So yes. Okay, switch screens, I guess. So now there's no styles, or at least there should be no styles if it loads. And I was just like, this is your basic skin. You just have stuff on the page, and then you can move it around and style it and do whatever. And okay, so we switch back, I can show you what that actually looks like. Okay, we switch back. So this is the skin template. Well, this is actually the base template. This is problem here where we've got a skin template, which is the skin class for the skin you're making. And then you've also got the name of the skin template, which is the base template, which I do not really know how to refer to these in any sensible manner that is not horribly confusing because these names are just completely confusing. Basically, there's a bunch of class stuff and object stuff in the PHP, and it doesn't really matter. Just ignore all that, please, for your own sanity. Another question, sorry to keep breaking in here. So the thing that you're doing here, which I think is a very cool thing, if I understand it correctly, is that you've got a repository that you've checked in the timeless stuff into, and then you're showing us snapshots along the way of that repository. Is that correct? Yes. And the repository will be able to get links to this after the presentation, right? Well, if I knew how to actually link to stuff, yes. It's in Garrett and on GitHub. Okay, I'll wait for that comment. Yeah, I'm not very helpful. That's okay, but we know that it exists and you intend to publish it, so we'll figure out how to publish it after the fact. Okay, keep going. It's not available. It's not done. I only really started on Friday and most of what I did was actually yesterday, so it's not really a fully working skin as yet or anything, so don't expect too much. But yeah, and also where this one is, timeless. Example is in the same area, so if you want to make one, go there, just copy all the files out of that. That's what you do. So this here is where the actual skin stuff happens. This is what renders the page. The base template class, basically. Don't worry too much what all the stuff is. It doesn't really matter that much. You just paddle the stuff and then you can rearrange it, basically. So say you've got the search thing. It's down here in the navigation right now. You can move that to the top if you want or put it wherever. Depending on how you want to style it, basically, you just move any of this stuff around. I'll probably want to only do it like that, but yeah. So for instance, this one is the sidebar. This one's like the page tools, like edit, view, history, etc. And then this is the personal menu here, the user links. So these are all functions that are at the bottom of the things. You can actually edit them however you want. They do horrible things. It's kind of a mess, but the point is you can just move things around and then you can assign them classes. You can add in divs and whatnot wherever. So that is basically the bulk of making a skin. You just do a lot of that. And then you apply styles and stuff. One thing that really helps I found in making skins is if you set up the less. If you actually use the less, it really helps for making things consistent and whatnot. So here I've set color variables and whatnot. So here's the links are using these right here. So I just set a bunch of things. So there's the gray. There's the text in the background, a bunch of colors, because I'm going to be using red, green, and blue a lot with this. So I just set a bunch of colors and then set those up. Sorry to break it again. The less is a templating language on top of JavaScript, correct? It's CSS stuff. I don't really know. It's like a language that compiles to CSS. It gives you the same mix and variables. Can you speak louder so they can pick it up on that? Yeah, sure. It's like a language that compiles to CSS. It gives you certain things like mix-ins, variables, and that are very useful things for general consensus. CSS is a crappy language. So this here is a mix-in. It just sets some stuff. Then you just put hit-in and a thing, and then it applies these things to that thing. And then you can reuse variables anywhere. This text editor is absolutely terrible. Why am I using it? You reuse those wherever, which is probably what you want to do, because that way things are much more consistent. And I think from there I actually applied them to the forms and whatnot. That's the wrong keyboard. Then I applied them to the forms. If we switch screens to the browser, why am I on the main page? Well, anyway, you can't see any difference on the regular stuff, but if you go to the... Oh, here. Here you see this on the search. So it's actually got a styled button now, and then these are styled, and suddenly they're styling. And it's just using the colors that I set before. So these aren't actually that great of colors. They're just basically random ones I chose. But this means that they're really easy to change and fix since they're all in one place. So that's good. Why is my mouse cursor moving? Hey, Sarah, this is... I had a question. Are those buttons the search and go... Are those media wiki UI or OOJS UI buttons? One of them is. One of them isn't. So you changed... So you restyled... Basically I overwrote everything because everything is horribly inconsistent. There's no sane way to actually make an OOUI theme in a skin. That really needs to be fixed. Can we switch over to the browser's side for a second on the view? Okay, so you're talking about the go and search buttons here. Yeah, thanks. Which one of these buttons is OOJS UI, and which one is it? The search one that's actually labeled search, I think, is... No, that's just a media... I don't know what... This is media wiki UI. I guess that's not how you do it, either, is it? I don't know. I don't actually know anything about this. Does anyone know what the classes are? It looks like that's using the media wiki UI CSS classes, but it's not an OOJS UI widget. Okay. I don't really know. I just overwrote everything because it's inconsistent. So, yeah, we switch back to the... If it was OOJS UI, it would be wrapped in some container elements and stuff, and it would have a lot more classes. It's not... That one's just... There are a lot of containers here. Oh, crap, I forgot this thing is... No, Firefox. Actually, yeah, you're right, this is not many. Well, anyway. So, we switch back to the forms, the full-screen thing. Okay, so the forbes are this horrible soup that I need to open. I might as well show you all this horrible stuff. Was I just using this editor? Oh, weird. The other one started. Okay, so now we have syntax highlighting and stuff. Nice. Forbes. So, when I would have styled the forms, what I do instead of doing something same because there is basically no way of saying we'd do this is I copy everything out of gray stuff which I hacked together in a horrible soup initially. So, it has its own forms thing. Yeah, so gray stuff has its forms. I just copy all of this and change it up a bit. This is horrible. This is not the right way to do it. It just keeps getting messier and messier every time I do it because all the horrible hacks from before are there and then I notice new things look like the new UI stuff and then I add more things and I just override everything. Well, this should tell you how bad this is. It's just overwriting every single class I found. I would say don't do this but I honestly don't know of a better way to style these things so they're actually consistent. Although if you are going to do this you should actually style the progressive and primary and constructive and whatnot separately because they're for a reason. I just haven't gotten around to that yet. Yeah, anyway. Well, I guess the interesting thing is that MediaWiki UI and the MediaWiki theme in OHS UI were always considered sort of orthogonal to skins so that they really shouldn't be. Yeah, it's a valid argument and there was a thought that well, in each of the skins we ship, the buttons would be made sort of consistent with them but nobody ever offered code to do that so I think at one point there was a sample version of it where in MonoBook the buttons were, I think they were all just kind of gray but it didn't really take off as my reflection. And OHS or whatever that is, there are two themes, the MediaWiki theme and the Apex theme. The problem is Apex is for a skin that nobody actually uses and the MediaWiki one more matches winter than any skins that are actually in use and there is no way within a skin to actually define a new one which is very unfortunate because if you could you could potentially style all the forms so much more easily and not have horrible soup to catch 20 different random classes that are all different types of inputs. Seriously this is ridiculous. We've got MW-Summary, MW-Input and there's MW-Input, Input and so on. Which screen am I even sharing at the moment? You're sharing the computer, not the browser. Okay, let's switch to the browser. So for random example buttons, this one has different buttons. This skin has buttons that are completely different from the other skins. Yeah, that was random. Okay, then there's these buttons which are different. So, I don't know. Point is, we've got form styling now. It's like there's forms and that's the only thing that's styled which is really stupid but anyway. So, you're making a skid and if you're me, what you do at this point is you just stare at the unstyled thing and go, what the hell? And then you come up with some structure and stuff and yeah. The problem is though, you do need to consider your desktop and mobile interfaces at the same time when doing this because what you really want to do is have stylesheets for each and a stylesheet for common stuff so that you have the least amount of redundancy and also don't have to override the styles from the other ones in each one. Though this does cause problems in Internet Explorer 8 because it doesn't actually support media queries with sizes set and they just completely fail so you need to give it a separate stylesheet which is another problem because there's no sane way to do that so you have to manually create that stylesheet for a separate one. Even though there really should be a weighing core to just tell it that this one is the fallback for Internet Explorer and then have it render that one. That would be really nice. Let's switch back to the full computer thingy. All right, you're back. I don't know what I'm doing at this point I guess. Oh, hey, structure. Yes, that's the next commit. So, there's a structure. Maybe that was what happened. So, I need some way to diff this. So basically what I did here is I went through the base template class and rearranged it and added classes so I put containers around everything because I love containers and I love to use containers and containers are your friends. Oh, hey, the skin actually has a layout now. So, switch back to the browser. So, now there's actually structure here because I set containers for each of these things. So, this is a thing and then little stuff is a thing and then there's sidebars on both sides because this skin I decided to go with was basically a three column layout because you can see in winter there are three columns basically the navigation, the content and then content related stuff. So, I set that up here and now there's a bit of a layout. And, yeah, I guess switch back to the text editor stuff. Okay, we're back. So, yeah, these things are... I don't know if I actually have anything. So, yeah, it's broken up into header stuff, content stuff. All the content includes columns too because they're in the same hierarchy. You can do fancier things with things like flexbox but the problem is Internet Explorer doesn't support it until 11. So, you need a fallback and usually I just don't bother with that very much. You just stick to floats and whatnot and then use that to make it fancier. The flexbox, I mean. So, yeah, each thing is in its own container. Each is clearly laid out according to what they are where they are on the page. And then apply some styles. Actually, I put those in the desktop one because this is clearly desktop layout. We do not want three columns on mobile. That would be very, very bad. Yeah. That's not very much stuff. Okay, then after that, more stuff happens. Oh, hey, here's a nice commit message. It says everything is horrible. I wonder what that is. Not really, I do. I don't remember. So, I guess we can switch back to the browser and find out. All right, we're back. Oh, hey, there's a broken header thingy. Yeah, it started to act more like winter-ish. I went through a few different colors with this header. I mean, in winter you can see it's just white and whatnot, but I didn't really like that because it doesn't provide enough contrast. You can't really tell what's going on with it. So, I made it gray because I like contrast. I can see if I called that horrible. That is broken. Yes. Well, we switch back to the full screen or the computer editor. We're back. Okay, so, yeah, there's a lot more CSS in here now. You just keep accumulating CSS or less or whatever it is. You just, yeah, it piles up. The template just keeps getting longer, too. I don't really have anything to show you of interest or I don't know. Oh, wow, I spent some time styling the search. Oh, actually, this is a good thing to show because this was adding an icon vector style where it still has a label but you can't see the label, which is theoretically good for screen readers because they'll still read it, maybe. I assume they did that for a reason. I don't actually know. So, I have a few questions that are a little more general if you don't mind. I'm just wondering if going through this if you have experience with other, like skinning other kinds of sites or things and you found things that they did that would make this easier? Nope. I have looked at PHP and I have looked at WordPress and I ran screaming away. Okay. Well, not screaming. Actually, WordPress isn't that bad but the forum one is like hundreds of files everywhere that you need to go through the files and change them separately because all the template things are just in these random files it's really kind of horrible. I'm sorry. Which one were you talking about again at the hundreds of files? I think it was PHPBB. PHPBB. Okay, got it. So that was the one that you didn't like and that's the one you're describing. Yes. WordPress does some of that but nowhere near as bad so that helps but it does have separate files for header and footer which is kind of annoying if you're just making simple things. What I like with media which is you can just do whatever the hell you want. You can include as many chunks of things as you feel like basically because you just include it. So, yeah. You can really just make another class and then just call that class to do the rest of the page or something like that but it's also all in one place so if you're looking for something and you don't know where it's going to be it is so much easier just have one file and go through it assuming it doesn't get too big which they definitely can. But, yeah. Also, something that's really amazing about MediaWiki skinning is the internationalization. You can set every string to i18n thingy I didn't actually open that for some reason so basically you set every string as a thing and then it, well that's the documentation so you can set this to you set all the strings basically and then you can configure them on wiki you can change them quickly when they're all in one file so it really helps just for general use even if you're not getting your skin translated at all it's still nice to just have all the strings in one place so you can easily change them around and whatnot and, yeah, that is something I noticed that WordPress absolutely did not have and it was kind of annoying and sad and annoying. I'll see you can't just change one wiki and I promise this subject can you describe the difference between the en.json and the qqq.json so when you're making a skin you'll only ever edit two of the i18n files, the en is the English one which is basically the defaults and then the qqq is the documentation that says what they are, if you're just doing it for yourself the qqq is optional but it still helps just because that way you have documentation but what it's mainly used for is by the translator so they noted like this is a template on translate wiki that just says it's optional that you don't need to, it doesn't really add anything because it's just the skin name and then this description template then you add more and then you say that something is, well I can check out something with more stuff in it let's see so hold on, okay so, yeah Kate, seriously so yeah, see when you add more things these are the strings that show up on the wiki then when you put them in the skin what you have is so then you call them in the skin by doing this get message and then parse and then you have the message that's parsed and escaped or whatever there's documentation on how to use it exactly that I don't ever remember where it is so I always just do parse and escaped but that's probably really inspiring confidence anyway, the point is you have these strings then you just call them and echo them and then they're parsed and escaped and you can edit them on wiki it's nifty and the QQQ just says what they are for the translator so it says that the timeless talk page is that's what it is, it's just the link label and the personal menu for the talk page because I'm using a different link label than the default I don't actually know why but whatever point is, yeah so you just set them then you do documentation then you call them and magic happens and then people translate them and so that you've got languages and stuff yeah can we switch to the browser? okay so this is I think this is actually the current version of the skin so let's see I'm looking for a timeless page so this is actually an interface message for the if it loads this is an interface message for the skin so it actually shows up in the media wiki namespace you can change it wherever you feel like this is much in the broken word where the user menu doesn't show up that's not the best one to be using page action and actions let's look at page actions we can actually see that one okay no we can't what am I looking for I need something that's actually more you can see the more the more is right here that's this more yeah so yes it's really fun because you change it to ridiculous things I'm totally getting off track okay I don't know what happened there I may have broken my media wiki install never mind point is you edit this and this would change and it would say waffles and all caps yeah no I'm not saying you should do that what I am saying is you should absolutely do stupid ass things like so this is one skin I'm working on another skin I'm working on is this one how about that display message I didn't actually have a point there but you can basically set up whatever the hell it shows up in a bunch of places and it's all magical and odd and stuff and I was going to show you buttons or something yes so I was styling the search I don't know so you see this little icon in the search thing that is well that's a button it's like actually I stole the code out of so it should switch back to the full screen editor okay so that would be down here in the search thing I just going to decode out of vector and swap all the stuff around so that it's whatever so it's timeless and whatnot I don't actually know what most of this stuff is I don't really care point is the thing it does stuff and then you style it and then you have magical I'm looking at the wrong file so yeah you style it and then you do stupid stuff like that and suddenly you have magical no label that is visible that can still be read by screen readers and whatnot and you also have an icon that's a mix in there yeah basically this thing here setting the background image to an SVG if browsers support it and falling back to a PNG if they don't it's actually I might have it in here it's actually this mix in so the fallback is for internet explore and whatnot and old opera and stuff and yeah it just magically does all that nobody really cares what you do is you just call it and stuff works the other thing that the search thing did though was it also added a interface message somewhere yeah well maybe or did I not actually add that yet okay I didn't actually add that yet nevermind I did later change the placeholder text to be a specific message from the skin so they would say that it searched the number of articles on the wiki instead of just search because we've got all that space we might as well use it and it did do that in the prototype so yeah that was the search thing that was just stolen from monoblock mostly what else oh then there's just more structuring the footer actually no there's a placeholder I'll just check that out so here we change the placeholder so that it is that specifically and it's just a lot of the times in order to actually figure out how to call these functions the only real way to do it is to go into media wiki's documentation that's rendered with doxygen whatnot and just look at the functions in the class hierarchy it's kind of a mess, I don't know where it is just 5 minutes left so if there's anything that you want to show to since chef let's see do I have anything else actually that is mostly it most of what making a skin is just going around and reorganizing things and editing stuff so yeah the next ones are just more of that you're just styling it basically you're putting the things on the page and you are styling them and okay yeah I guess switching back to the browser if I can find the okay so somewhere is the I think this is it yes this is what you need to look through in order to find out how to call the functions differently so like for the search placeholder I found the search function that was actually being called which was make the search input from base template apparently and this is the rabbit hole that you don't want to fall into but there's holy crap there's a lot of API stuff okay so if you want to do fancy things with your skin there's no way to avoid looking at the PHP and if you don't know PHP you will learn PHP if you don't know classes you will learn classes because I did not know classes and now I sort of know classes but yeah so I found the base template function those things make search input so I just found this and I looked at what it actually took I think I just looked at the source so then I found that it actually took a placeholder so then I yeah I just set the placeholder I gave it a placeholder information thingy or array whatever the hell you call it I set a placeholder in the thing that actually calls the make search input within the output search function in the skin itself so that's how I change the search suggest stuff most things are pretty simple like this you just track down whatever it is you're calling and then look at what it does and if it doesn't make sense you you ask someone who knows what they're doing but some things are not so simple can we switch back to the editor yep okay some things are not so simple ah let's see okay so what I wanted to do is seriously what I wanted to do was also change how the page tools are output which there is no sane way to do that which screen am I on you are on the computer screen I can switch back to the browser do you feel it no computer is probably what I want right now actually now let's switch back to the browser okay so you can see the tools for the page are broken up into a bunch of different things it's the usual namespaces thing that you see in vector and mona book then these two are not all the ones you usually see because usually it would also have like the view source thing is an edit thing so that would normally be over here and then there are more tools which are all page tools which are broken out over here and then there's the wiki specific tools which I put over here the problem is there's no sane way to do that so switching over to the editor Rachel are we on the editor now yep we're on the editor okay so what I wound up having to do was basically just get a pile of all the tools and then manually sort them this is horrible I never do things like this except there's no better way to do this so I did this what we really need is basically well the problem here is that these are just the media wiki core tools extensions add all manner of tools the problem is extensions can't set where they want the tools to show up in this to my knowledge there is no way for an extension to say something is a user tool or a page tool or an edit tool or whatever it's just a tool that it adds to the toolbox or whatever which as you can see in the skin I got rid of the toolbox now there's just a pile of general tools they get dumped in so they don't get lost completely hopefully but that's less than ideal do we have more time no we are out of time but we have this space for longer so there's something you need to wrap up no no no I should stop are there any questions on the Hangout or on IRC oh actually there is one I did forget one thing I was curious about was the quick template implements this get and set for items but I've noticed a lot of skins they just go in and sort of dump out things from the data sort of array and I was wondering do you use get and set at all or do you just do the same thing and just if there's something in data you want you just kind of reference it yeah that is a serious problem part of the problem though is quick template only has some things base template does a lot of the dumping stuff out like you're extending base template and then there's a lot of stuff that's just plain missing we really need proper get and set functions we need abstraction for these things that's actually sane something I had to do with the categories is even though there is a get category function I don't think it's in these templates and it only so basically there's a bunch of get category links one of them is in title it gets the categories for the title one of them is in output page it gets the categories for the current page view so if you're actually viewing the page or editing it shows but otherwise it doesn't and I believe the quick template or base template whichever one of those is getting it uses the output one the problem is if you want the categories to always show up you need to use both of them because there's just no good way to do it the problem here is that yes we should be probably just using get functions they're just art get functions that do most of the needed things so I've been trying to find them and use them more if they exist but sometimes they're not where you expect them to be sometimes they're in quick template sometimes they're in base template sometimes they're in skin, sometimes they're in skin template sometimes they're in output page sometimes they're in title sometimes they're in it's a mess yeah I don't know any more questions? great thank you so much everyone stopping the broadcast thanks that was great bye