 Okay, we're live now, Adam. Welcome everybody to Credit for February. This is our first credit showcase in 2017. It looks like we have four presenters today. We're going to demo some of the stuff they've been working on. And just as a reminder, for those of you who are joining us, we are running a survey on credit to get a sense of, you know, how this is working for people and what sorts of things we might do to improve it in the future. Without further ado, let's get on to the demos. It looks like the DJ is online and he's going to talk about bringing responsive design to the desktop skin. That is the idea. Hello. Let me see if we can start screen sharing like this. I see your desktop. Yeah, good. Good. So let's first talk about some of my motivations in this. I've been experimenting with mobile, of course, for a long time. Many people might not know, but I was actually involved with the very first mobile skins and services that we created. But also recently, I've been using a 27 inch IMAX screen and that actually presents its own problems with using a website full screen, or at least for a large part of your screen. So I got the idea of actually trying to improve some of those things and see if I could just, without getting into all the trouble of making patches to the core already, see if I can just lay everything on top of what we currently have. And mostly I'm rather annoyed that we have all of these enhancements into mobile front end, for instance, for narrow screens. Whereas many times on the desktop, I also use a narrow screen or at least a narrow window of my screen. For instance, to stack things next to each other, etc. So this is a fairly standard article. Let's start with this one. So one of the things that I've been doing is take this screen and let's put it into a narrow view, right? For the UI, we actually already have some changes in there. Let me actually do it like this. We have some changes in the UI already. It's not well known, but actually inside our core we have some changes to Vector which resize some things. This is an addition of my own personal tools, but some very small things is that, for instance, there's normally the read tab here. I just hide it because we're already in read mode. I'm going to present the talk tab and vice versa. There we go. So now it says article. Yeah, it's not read in English Wikipedia. So I just hide the tab that's already selected. It saves a lot of space and all the rest of the UI goes basically to the bottom. It's not very nice, but we could enhance it with some JavaScript or anything. But this we'll do for now. But the more important thing is actually the content in this respect. So let's start with that. Well, first proof is actually responsive. Look at that. Isn't that beautiful? There's a few things that I'm doing here for the content. Let's select an iPhone 6. And some of this has been taken from the standard stuff that the mobile skin is doing actually. But take info boxes and tables and images. They are all forced to clear the contents surrounding them. They're all in a separate stack. They're centered. If they're narrow, I'm not sure. Oh, here's a piece of content that's narrow. So they're centered and they're all clearing their content. But some very simple, for instance, is that I'm also, if you have a white, if you have a redness screen, it's very easy to use double resolution images, which also means we can just blow them up. So this image is actually 100% white. This image is 100% white. It nicely fills out the screen width. This image is upright. But of course, if you're upright, you don't want to fill the entire width height of the screen. So there's actually a limitation on this here that it should be full width, but only up to, I think, 60% of the screen height. It's a very nice addition to make sure that an upright portrait image does not fill the entire screen and takes up all the space, the visual space of your screen. It's very simple to do, actually. At the bottom of the screen of the article, the references become single column. It's a two column, usually, but in this layout, it just becomes single column, where it is cut off somewhere there, two to single column. It's the same as the mobile skin does as well, but now on the desktop skin. This is very handy if you have two windows next to each other, for instance. Something else that you might notice is that if we go a little bit up, I actually slightly decrease the size of the font on a redness screen so that you can still read it. It's a redness, so you have a very high density, so it's still readable. You can fit a little bit more content inside that width of the screen, then. And the same works for Info Boxes, for instance, here. It's just full width, works very nicely. Oh, this is also interesting. We have a full width table here that's wider than the screen, so the same as on mobile, we just cut that off, and you see here a nice animation that shows that it's actually scrollable. So you can just scroll inside this table, and you now have a hint that this table is scrollable. I just took the first image of a four-pointed arrow that I could find, maybe you can do something nicer there with a wobbly animation or something. But it works. This is another enhancement that I made. The maintenance boxes that we have at the top of the article, they take up a lot of space, and when that's a lot of vertical space, that's not very nice. But all these boxes actually also have a short version of them, and we use them in the section when they're inserted into a section of the article. So what I'm doing here is that I'm just only showing the part that we normally would show in sections. And if you click it, it hides the rest, hides or shows the rest of the description of what's wrong with the article. Very simple, but very nice, especially for our editors as well, who are very keen on having this inside their articles. Let's go to another example. Oh, I also made some enhancements to the main page, for instance. So I'm forcing everything into full-width columns, not this problem which we normally have where this one column becomes very narrow. Now, if you just make it a little bit more narrow, then at some point it will just jump beneath it. And that works. It's not perfect, actually, because you still have some scroll bars here, but we can figure that out if we have to. One more thing, white screens. So if you have very white screen, at some point it actually becomes a bit annoying to read these articles, but I've now evicted all the right-floating thumbnails, like this one, for instance. I evict them into a special sidebar. You can see it here a bit clearer, perhaps. So now it's still inset into the article content, and now it becomes clear of it, and it actually also fills out this entire area with your image. So if the image is smaller than the 350 pixels that's on the right side, it will actually enlarge it slightly. It knows about this centered element. And this is a very enjoyable way to read it, but if the screen becomes even larger, it's also actually evicting the left-floating content into a left sidebar. And then at some point it will just start limiting. I've now made it a bit smaller. It will actually start limiting the width of the entire page. And that sort of gives you a bit more usable, a readable surface if you're on a very large screen. I'm trying to emulate. This is a very nice setup if you have one of those 27-inch IMAX. Sure, you have a lot of white space now on the left, perhaps, but at least the text becomes readable and the length of the lines becomes more useful. And most importantly, this is all just user script. It's all a user CSS file. I will link them later for you below, but basically this is everything for the vector skin and this is everything for the content. That's all the changes that I've made. And I think with so few changes and no JavaScript, it's actually quite an impressive result. And that's all that I had for today. If there are any questions, I would love to hear them, by the way, later, after the other presentations. Cool, thanks, everybody. If you have questions, please enter them into the Etherpad. Also, given that we have four presenters today, maybe we should yield a bit of time at the end and see if anybody wants to post them in IRC or perhaps during the Hangout or direct the question from the room. Cool, thanks. Next up, Steven. Random Dev locale. Hey, everyone. I hope that you can see my screen right now. Yes. So I'm going to talk a little bit about localization in the Android app. So the Android app currently supports almost, claims to support almost 300 languages. And for single-lingual or even bilingual developers, they might only see their preferred language most days. And this is a small change to try and encourage folks to see the other side of Wikipedia, which is primarily non-English, but also languages other than the one you're most familiar with. So I'm just going to quickly show. I've got the Wikipedia Android app over here. I'm going to uninstall it. And you'll notice that I have the beta flavor and the development flavor. The beta flavor has the blue icon and development has green. So I'm just going to uninstall that. And I'm going to install a new version and launch it. And if you look at the text here, you'll see that... So my primary language is English. If you look at the text here, you'll see that it's non-English. I'm afraid I don't know what the language code of MN is, but that's the current locale. And we're now using the Android app in that locale. So this is a one-time change when you install the app as a developer. We'll pick a random language and set that as your default. And if you change it, we'll respect that. But at least for that moment, we're going to force you to see a little bit of what the rest of the world sees. And actually, I'm not sure if my emulator has frozen or the app has frozen. Looks like the emulator is okay. I found another bug. I found one this morning that I wasn't aware of where a Wikipedia had been shut down and we were still using that language. So I'll have to look into this one. That's it. Thanks, everyone. Thanks. Okay. Sage, on a Wikipedia translatable training modules. Hi there. So I've spent most of my time now working on the Wikiaid dashboard which also runs the programs and events dashboard for helping new users get started on, like editing Wikipedia projects and then keeping track of what they're doing. And one of the things that is sort of one of the central features of it is, let me just find the right screen to share, is the training module system that we have. And so we have, you know, modules that someone can go through and get sort of bite-size bits of information that are tailored to, like, the way that people learn well as opposed to, like, Wiki pages where all of the examples that we have of training systems on Wiki, like, there are links everywhere and you sort of get lost easily. And so this is sort of a focused user experience where you can walk through and see, you know, how-to information about how to get started on Wikipedia. And we've had, like, really good, like, responses from the people who've used these. And so one of the things that I wanted to do was try to see if we could make this work for sort of community-built training modules. And so with the ongoing support and safety training module program as sort of the testing ground for it, I've been working on pulling in training module content from Wiki pages. And so I have that up and running now on the link that I put in the etherpad. But this is the entire, like, draft of one of these training modules from the support and safety team. And these are all defined where each slide is being pulled from the corresponding Wiki page. And so you can, you know, go here and edit this page and you could also translate it. And then your locale, you would see the translated version when you were over on the training slides. And it also has support for quiz questions. So you can set up quiz questions where you say, like, you know, have people check their knowledge and then if they pick a wrong answer, they get an explanation. If they pick a right answer, then they see the explanation for that and then they can proceed. And these are all done with, like, pulled from corresponding Wiki pages. So I just sort of adapted the template that they had for, like, doing these little self-assessment things. And all of that training content, that quiz question that you just saw is being pulled from the source of this Wiki page right here. So it's not yet sort of not quite yet ready for live primetime, but it's really close to it. And it'll sort of open the way for people to build their own trainings around whatever specific topics that they want and have, like, a nice framework for presenting that to people. That's it. Great. Thanks, Sage. Dmitri, I think you're up next. Stop line developments in the Android app. Hey, can everyone see my screen? I see it. Excellent. Right. So, hey, everyone. So you're looking at our Wikipedia Android app now, but I need to give a little preface to this. So I'm sure a lot of you are familiar with Kiwix, which is probably one of the better known ways of browsing Wikipedia fully offline. And the way that Kiwix does it is by making you download a full collection of articles. So you have it locally on your device. It's called a Zim file. And it's a single file. That's a dump of the HTML of the articles and the images that go along with the articles, too. So once you download that collection, you can just use their app to browse the contents of the collection anytime, whether you're offline or not. And the idea is to download a Zim file. That's the largest possible subset of Wikipedia that can fit comfortably on your device. So, like, for example, they have a collection of the 45,000 best or topmost articles in Wikipedia, and that's about four gigs or so. So that's like the kind of sizes we're talking about here. So I cheated a little bit here, and prior to this, I actually downloaded a Zim file, and it's on my phone right now. And here are the enhancements that I've been working on in our app related to this. So right now we're online, and I'm using the app, and they have a feed, and, you know, I can browse an article. I'm online. But then, let's go offline. I'm going to turn on airplane mode. And when I turn on airplane mode, the app detects that we're now offline. We're now browsing Wikipedia in offline mode. Please note that offline articles may not be fully up to date. And what the app is doing is it automatically detected that I've downloaded a Zim file in the background, and it is now using that Zim file as the content source for Wikipedia within the app. So what this means is, for example, if I go to search, if I click on search, we are now searching within the Zim file. And if I select an article from the search and open it up, this is opening up the content from the offline Zim file. But the key is that the app, it's kind of transparent to the app where it's getting the content from, which means that it's enjoying all of the benefits, all of the embellishments that we've made onto this presentation, like, you know, the collapsing of info boxes and searching within the page and table of contents and so on. But this is all coming from the offline file. And, of course, you can click links, and you can navigate links, but this is still all offline and all coming from this offline collection. I'm going to go back to the feed. And portions of the feed still also work. Like, you can continue reading articles that you had been reading online, but you'll just fetch them from the offline collection. So you can click something and continue reading it. And we also have the randomizer function, except it pulls a random article from the offline collection. So what this is, is basically seamless interoperability with existing offline collections that already exist. And I think all that really needs to happen to push this forward is a better user experience for initially downloading a collection for offline use, because that's really the non-obvious part. How do you get the user to download that collection in the first place? So that's something still left to work on. But for the most parts, yeah, it's come a little way, long way so far, and it's almost ready to go, except for that one crucial component of downloading the collection. I think that's all I wanted to show. Nice. Okay, let's open it up to questions. I think the DJ, you're still here. Are there any questions in the etherpad that you wanted to address, or did you want to just take it to the etherpad later? Actually already, so I answered quite a few questions in the etherpad, things that might be worth mentioning is people have been asking what is different between these changes and things that we've tried in the past sort of. And I think that one of the most important differences that I have in mind changes compared to what we've had in the past is that I've made them very explicitly limited to certain user groups. So if you have a retina screen, you get certain enhancements. If you have a very wide screen, you get certain enhancements. If you support this very new feature of CSS, you get that one specific enhancement. I think that's one of the things that is a bit different from my code. Also, something that's a bit different is that if you look at my responsive content, for instance, the sidebars are limited to just working in content space. They only work in namespace zero, article namespace. So it's, again, it's limiting it to a very small subset and that makes it easier sort of. You have to take into account fewer edge cases that might bother you. And I've given some more hints to that in the etherpad. But if there's any other question, please do ask. And I think, Sage, there might have been a question for you in the etherpad. Yes, someone asked whether it works on mobile. And the quick answer is that it's usable on mobile. Actually, like there's some issues with the rest of the site in terms of like the navigation that gets squashed and don't look right on mobile. But the training content itself actually looks pretty good and you can proceed all the way through a training on mobile. It's something that we never really prioritized because our training modules for students in the education program involved throwing them over to Wikipedia to do guided tours and have some practice actually editing and some other things that sort of involve experiences that wouldn't really work on mobile. But for just a basic training module with just images and content and that kind of thing, it is quite good on mobile in terms of the experience of going through it. And I think there was a question for Dimitri and etherpad as well. Dimitri, you want to speak to that? I'm not seeing it. Maybe my etherpad is stale, but can you ask it over there? In one control, what is downloaded somehow? Oh, okay. I saw that question in IRC. But also what I'm envisioning is that we provide a number of different types of collections of offline articles varying by size or complexity or use case. For example, the one I showed was the 45,000 best articles from Wikipedia, which probably covers 95% of most offline readers' use cases. But that's four gigs. So then we can say, well, what about the top 1,000 articles, which would probably be much less size than that. That still would cover a sizeable use case. Or we could say, how about a collection of just the text of articles with no images? I'm sure that could fit into a much smaller space. And then specialized collections like all medical articles or all articles about physics and science. So different segmentations of collections. And then I'm seeing like the design for choosing which collection to download would be just a pop-up where you either browse them or you enter a search term and browse existing collections or maybe request that a collection be created for you, some kind of community consensus on what kind of collections need to exist. Something like that. Did anybody in the office have a question? Did anybody catch anything on the Dash Office Free Node channel that should cover? I don't think so, Adam. I think everyone was just engaging on IRC or Etherpad that's in here. Okay, cool. Well, I think that's it. So I'll be sharing out a link to the video. We usually have the stuff on YouTube as well as on Commons. And a reminder for people to fill out the survey around credit. We'd love to hear your feedback. Thanks everybody for your demos and for the great questions. Have a nice rest of the day.