Ramping up the Django admin

Hello. Right. So I'm gonna talk about uh ramping up the Django admin, if you like. Just some new stuff we can add that helps everyone. Um so let's get started. Uh this is me. Uh so a few years ago I think I started the Django accessibility team. Um at the beginning it was just me and Tebow who uh Hopefully is here or arriving in the next few seconds. Um who knows. Uh and then we quickly expanded and added uh Sarah here. Um other than that, I've also been a jungle contributor since like twenty fifteen or so. I'm not really sure. Um

I added stuff about database collations, uh the the little navigation sidebar in the admin, that was me. Um a few things like that. I'm also doing stuff uh in the Uh admin like cleaning up CSS, mostly breaking things and then fixing them again. Um that was uh Jungle No. Navigator in the I th I I think it was was it session two or was it technically session one? Okay. Session zero didn't count. Um So yeah, I also been a coach in Django Ghost for a few times and uh my work life I'm head of engineering at a company called Carbon Equity where we Use the power of capitalism to uh fix the climate, we think.

Um Okay, so let's uh Guess there at it. So this um this actually is the corner of the street that I live on. Uh It's Amsterdam, so there's bikes everywhere and a little uh ramp with a disabled logo on it You might uh have something like this. In America they call them cut curves or curb cuts or something. I'm not really Sure, but um I would just call it a ramp. So instead of calling this the curb cut effect, I wanna kind of I wanna sell it up a bit and call it ramping up, you know? We're making things cooler.

Um so The idea of the curb cut effect is essentially accessibility improvements also make the everything better for everyone, right? It's not just Uh people with a wheelchair that can use this. Uh people that are like unloading guts with a trolley or something also use this. I use this uh every day to park my bike a little bit faster. I think that might be illegal but uh nobody has stopped me yet. And this you know this saves me time. Uh this slide is from I think a lightning talk in Heidelberg, uh DjangoCon Europe. uh from the stenographers. Um and this is uh another example of uh accessibility feature that uh

helps everyone Like okay if you're if you're deaf then sure listening to this talk is gonna be difficult but also if you just don't understand my very bad uh mumbly British accent is probably also super helpful for you. And these uh captions or some other captions will end up on YouTube So if you're like on the train you want to watch uh this talk you can just put on the closed captions and uh look away. You don't have to remember to take your headphones or anything. It's um yeah, it's just nice We also have some other examples. So when you cross the road, you press the button, or hopefully you don't have to, but sometimes you still do.

Uh you're waiting there, there's like a red light, then you walk turn over, you're talking to your friends, you're not really paying attention to the lights, but luckily it goes beep, beep, beep, beep, beep So y you know you can go over the roads, right? Sometimes when y I I'm in a place that doesn't have these BP traffic lights, I see people like they're so engrossed talking to their friend next to them, they miss like two or three cycles of the light and they just never cross the road. Uh another example is like taking the lift, right? Uh I I I wouldn't wanna like cast dispersions on people, but I would guess that most of the people using the lift to come up uh to the third floor, don't really have uh disabilities. I I would ch assume that they just don't want to take like

a three flight walk up the stairs every time, which is fair because Neither do I. Um and then yeah in tech like obviously if you have big text especially if it's on a sign or something, like that's easier to read from further away. Uh we also have things like voice recognition. So if you think about it, everyone is kind of temporarily disabled. at some point. Like if you're riding your bike, you could use your phone like this. You probably shouldn't. Just use your phone and your bike. But you could also just say Hey, insert name of AI.

I won't say any names to stop everyone's uh phones from going haywire, but You can just ask the computer to navigate you somewhere or whatever. Don't have to take your hands off the controls A little bit safer. Um and yeah, so we also have alternative formats. So I mentioned captions. Um I mentioned uh Yeah, voice recognition, but it's also the other way around where you can read out some text, which is also useful if you want to keep your hands free. You're you're cooking a recipe or something, your your hands are in the dough, you just want like to read off like like a recipe or even just a Wikipedia article or something while you're going.

Uh if you're really lucky The people that have put this together will have had real people record uh the text, so it sounds nice, but even just having uh text to speech is still still pretty nice Um and I kind of put all text at the end here because it's kind of the only thing that most web developers know about. So even this is useful, right? If your image doesn't load, you've got crappy internet, you can just uh you at least have some idea what the image is trying to tell you, right? It's nice, it's nice to have. So we're gonna talk about the admin. Um

yeah, I think the the last talk demonstrated quite nicely the You don't have to have this kind of extremist view that some people have, where if you ever give the Django admin to a non-developer Y all your data is like it's gone, right? That's that's not really the case. I don't know if I go quite so extreme in the other direction to your end users using it, but you like most companies I've worked at certainly have the admin system available for internal but non-technical users to work with. So in my view, I mean we just heard uh from one site, they have like four hundred and fifty thousand was it, uh users.

And if you scale that up to all the jungle deployments, maybe not everyone has 450k users in the admin, but you know, we're probably talking about millions of users using the admin. So the more we can improve it the more uh the more beautiful it is for everyone, the more productive it is for everyone. People can do their work faster. And well, increasing productivity is cool. If we know anything from data, it's that when you increase productivity, you the the the effect of that is that you also increase standard of living for everyone Right? So this is like you might think ah it's just accessibility, I just have a ticket box. But you're not just like making lives better of like five percent of people, it's like a hundred percent of people

So I think that we should focus on that. And now we get to the tricky part. Where I'm gonna attempt to show something I've uh been working on a bit. What have we got here? Okay. Now Bear with me a sec. I think I just need to Remember how to do this. Ah yeah. That's what I want. That 's almost what I want.

This is what I want. Yeah. So I hope this is readable because it's not the greatest uh resolution, but we'll see what we can do Um I also have something called Keycaster on, so hopefully when I press buttons you can see them. So that's nice. So this is uh the admin site, we all know it. Some of us love it Um but I made a few little changes. If you press uh question mark key, I'll get a little dialogue Probably that's illegible, but

um basically it tells you the keyboard shorter cuts that I've added. Uh one of them is showing you this dialogue And then here we have uh going to the site index, which is a combination. You press G, then you press I, then you will get to the site index, but we're already there And you can also go to a change page by pressing G followed by L. And then you can get to uh anything regardless what page you're on, which is okay, but we can do a bit better. Let's have a look at this um this change list. Let's say we want to delete some of these objects.

What do we have to do? Well, if we're a keyboard user, which is gonna be faster We're gonna be pressing tap a bit. Gotta get past the uh sidebar here. Oh, now we're in the search. Uh now we're in the date hierarchy. Let's see let me just go for all these euros, sorry, it's be uh it's be a little little bit of time. Uh right. No not yet. Actually uh this is all of them. I don't really want all at least the ordering for the headers. Ah, now finally I can press space and select this. So now I press tab and just do the next one, right? Ah. The it's the link to the to the page. Well show you the next one, right? Uh I I've used list editable so I can edit these fields now. That's that's a bit annoying isn't it?

So now not only that but so is this and it's also has a date in it so it's got today and the day picker It's uh kind of annoying, right? It's like one, two, three, four, five, six. And then I want this one, one, two, three, four, five, six. Not this one, one, two, three, five Yeah this one, right? Well it'd be easier if we could just use the Vim keys and X to just go through these and pick whichever ones we wanted. It's a bit faster, right? And then we can just press A to go directly to the actions, delete everything, press enter. And then uh we've got a similar problem here though, right? So now we've got a tab through. Let's say that you remember actually that the skip link is here. You can at least bypass the navigation. This is something nice we added a couple of years ago. Um

but now I have to go through all of these, make sure I really want to delete all these things. But actually I don't want to. So I just, you know where is it? I don't need to ramble, I can just press Alt and then and go back. Usually. Yeah, okay. Not perfect yet. Um Yeah, I'm back to help. Yeah, and each page is overridden, so it has just the shortcuts. The global shortcuts you can use anywhere, and also the shortcuts uh for this changeless page. So it's It's a little bit slick if you ask me, but you probably shouldn't ask me because I wrote it.

Um yeah, I think that is most of what I have implemented. There's one more thing I'd really love to add. It'll take a little bit of work, but it's possible. I think we could have a G followed by C maybe for a change view. And you do that, you get a little drop-down of every model, select the model, then you get in a little um typey filtrable input, and then Well, you can just type whatever's in the search fields for your admin and then narrow down to a single object to go to the changelist page, the change view page. From anywhere in the in the admin. You don't even have to be

on the list page, you don't have to be anywhere. You can be anywhere you want. So that's what I've been working on for the past couple of weeks. I think it was six or so hours in total. Now I have to do the hop back to my slides, which will uh Actually, while I'm here there's one more thing I want to show. And I don't need keycaster for this, which means I can turn you off, but it also means I can make it full screen so this is actually visible. Where we can go with this if we really wanted to is uh let's go somewhere else. Let's go to one of mine. Right? I was connected to the Wi Fi earlier, I promise.

I am connected to the Wi-Fi Let me use my phone. It'll work. Okay, maybe there's just no internet anymore. That's disappointing. But if you've ever used GitHub, actually if you if you've got your laptop with you now, just go to GitHub, hit Command K. Um you've got a command pilot you can search for pull requests from wherever you are. So if you're on a completely different repo, you can just You can just um probably hit backspace a few times, type in DJ, you'll get to Django because it remembers where you've been. Get to DJ again to get into the repo, it'll remember where you've been

And then you can hit a hash and then just type whatever you want in and it'll like order those pull requests by like how recently you looked at them or something. I don't know. It does something magic and it always knows exactly what I want. Um let me see if I can go back. The camera 's the wrong way around. Yeah, this one. That's where it was. Okay.

So not too many technical difficulties. Except you can see my uh speaker notes because I don't think I mirrored it properly. But I don't need these, so I won't worry about it Uh yeah, so like I mentioned, this was something I put together in a few hours. Um There are bugs. The main problem, I think, is that it can't exist as a third-party package really. What I've done is I've overridden the footer block in the base template because it doesn't get used for anything. But if any site uses it, and they probably do, then it's just gonna break everything. The only way to really get around this I think is to re-implement the entire base template for the admin. Which for obvious reasons I don't wanna keep up to date.

So this needs to be brought into call and there is an accepted ticket for it. So in theory we're good. But I think nobody's really decided uh what we should put in. And that's what I'm trying to throw together today is like maybe this or something like this. I don't know, but Um yeah, so at the moment as well everything is just kind of uh Well basically you just go to the change list template for example Override it, put in a block with the um extra shortcuts you want in like HTML form so you can see it in the in the help model

And then you also have to write like an extra JS file that actually handles the shortcuts. So it's possible we can have declarative shortcuts for some items. So for example, if you want to just say uh on this uh button if you press this keyboard shortcut then it will just click the button right that's something we can do decoratively we can just put a data class on the uh button attributes or the on the anchor attribute whatever anchor element whatever it happens to be and then Yeah, we don't have to we could probably generate the text for the help model Everything just works maybe. Of course uh for the Vim keys on

changelists, for doing some of the fanciest navigation stuff, probably always gonna need something manual there. Um yeah, adding more short codes like the one I mentioned would be super nice. Um there are exactly zero tests, um as you might expect. There's probably a lot more to do, and then yeah, I hope we can get this ported to call. And luckily in Two days. Or one day. I don't know. The day after tomorrow. We have two days of sprints. So if anyone wants to help me with this, please say I want to help you with this. And we'll see what we can do in two days.

I'm imagining that's not enough to Get us all the way, but we can get somewhere. Maybe a draft PR, maybe at least here's what we want. Here's how we can get there. And if the sprints don't make it, then the repo is at the QR code. Please do with it what you will, and we'll try to get it uh into some kind of mergeable state. Um yeah, like I wanted to show you from GitHub, we could also extend this eventually into a command palette where we can do all kinds of cool stuff just from a little thing that appears. It all nice help everywhere, very swish. Uh another thing I'd really like to do.

So I mentioned earlier that I put together the navigation uh sidebar. I was always a bit unhappy with the compromise that I made. It doesn't show up on the index page. Or the app index page. Because people were like, ah, you know, that's redundant, we got the same thing in two places. I agree. We should get rid of it in the main content and just have the sidebar everywhere. We should Not let people turn off the sidebars, they currently can. Or at least if they want to, they have to override a template or something, not just changing something in the admin. I think that was another mistake to make it even possible to disable it without overriding a template or something. Now I'm pretty sure the fellows are gonna say, no, that's backwards incompatible, but

we'll we'll find a way. We'll do it Um if we can do that, then we can use the homepage for something really cool. Metrics. Everyone that uses the admin is like, ah, I want some metrics on the on the page. I don't mean uses the admin like me, I mean uses the admin like the people I work with that aren't technical. Like the the people In other teams, like they wanna know what's happening. They don't wanna well they do wanna ask me what the numbers are, but I don't wanna go and remember how to use SQL and do aggregates. I don't I don't remember how to aggregate things. So it would be nice if we can just build something and they can just go, ah, there it is.

Right? Leave a little space for the user, use your imagination, put things together. Another nice thing might be to have user documentation to the admin. Not for us, we already have that, but for the people that use the admin. Right. I don't know exactly what this looks like. This is a difficult problem I think, 'cause everyone uses the admin for different things. But most companies I've worked at, they've had like documentation. Here's how you do this, right? Well, maybe we can do something to help people at least build something that is like here's how you add a whatever object, right? Um

and other ideas I'm always interested in hearing So this was the accessibility team until a short time ago. We have some uh Some people in the room, I hope. More than one. But this uh we took this in uh Fosdam in Brussels a few months ago. We got together. Uh And since then we have such a big team now That I couldn't fit it on just one half of the slide. I had to use the whole slide now and I had to spend like

ten minutes trying to figure out how to add text in uh Mac preview It wasn't very fun, but I got there in the end. I hope I didn't like typo anyone's name here because I don't think I did Um so I think we have some of our team at the front. Maybe you can uh Wave a bit if you want to. No? We're shy today? Okay. Uh T-Bo looked at my slides this morning and he said, look, you can't do an accessibility talk. And not mention the web

content accessibility guidelines. So I said, okay, fine. So uh here's a picture of uh the original three, plus uh our good friend Sage who sadly couldn't make it here today. Uh Um attempting to spell W C A G. I don't know how well it worked. This was in the social at DjangoCon last year. Um I don't think we were really supposed to be standing there But nobody told us not to, so we think it's good. Um finally this is This is me again. Um I'm not on any social media, I find it like super toxic in every possible way. So I'm just on GitHub. Uh my personal website is there.

I also run the Django Discord. Um so if you haven't joined that you should have And do so like now. It's easy to find on the community page. Just go there, press some buttons. Uh we also have some stickers like this one Looks pretty nice. We got two more designs. So come and ask someone and we give you some stickers. That's it. That's all I got.