Lightning talks

This video is from Wagtail Space US 2018 in Philadelphia, Pennsylvania, USA.

1:27:32
Published June 21, 2018
124 views

Summary

Rana argues that a frequently updated CMS helps communities share their own stories, and shows how a yacht club uses Django and Wagtail to manage event pages and assemble its annual yearbook from different kinds of content. Bill describes practical challenges in moving Oxfam America’s site from Mezzanine to Wagtail, including migration conflicts, AWS configuration, asset imports, StreamField behavior, and WordPress content migration. Tim demonstrates a Wagtail starter-page redesign and a Wagtail-based system for managing recovery meetings, explaining how the Meeting Guide app makes meeting information easier to find; he also speaks openly about recovery and stigma. Pat presents proposed improvements to Wagtail’s upgrade documentation and walks through a Wagtail 2.0 upgrade, including a workaround for migration-related test failures.

Key takeaways

  • A well-maintained CMS can give community members a place to publish stories, practical information, and creative work.
  • A Wagtail site can combine database-driven information and edited pages to produce a substantial annual book.
  • Teams migrating to Wagtail may need to plan for concurrent migration conflicts, AWS security settings, asset identifiers, StreamField details, and legacy content imports.
  • Tim’s open-source meeting directory connects local recovery-group data to a mobile app, helping people find nearby meetings.
  • Clear upgrade guidance matters: Pat consolidated scattered Wagtail 2.0 instructions and demonstrated a migration workaround for failing tests.

Summarised automatically from the transcript.

Transcript

12,779 words · auto-generated Show

Automatically transcribed, so expect mistakes in names and technical terms.

0:01

Speaker 1: Well how's everybody doing today? Everybody had a little bit of ice cream? Thank you. Oh, no problem. So hi, uh my name is Rana. Um I have been very chatty with a lot of you this weekend, uh but I'd like to introduce myself uh again anyway. Um I'm one of the organizers here at Lifetail space. Thank you, Tim, for um inviting me to join in organizing. And I am also the founder of the organization Yellow Punk that I'm currently working on integrating black tail into. So my background actually of past life, I was a journalist. So content is very important to me. Quality content management systems are very important to me. I

0:47

Speaker 1: initially When I started working with content management systems, the first blog I ever had was on movable type. And that was my very first blog that was hosted on a server that was not on say LiveJournal or Zega. So going back before Movable Type, the first website I ever built was actually to bring a community together. I used to play a lot of uh computer games. I was a big into RPGs and I played Baldur's Gate too I was a part of a gaming clan that I had put together and we needed a place where we could all hang out and build a community and share tips.

1:32

Speaker 1: and talk about our characters. Um so I built a website that was iframes and uh PHP BBB forms. It was message board. It was not really that elaborate. It was very hideous. Pretty sure there was a mouse for L in there somewhere. But to me, building a website means building a community. I think that's really important. And that's something I really see a lot of in in Mocktail. And that's why I think it's a great solution for my website. So fast forward to um to today. We have built a community that

2:18

Speaker 1: Was reacting to a kind of a very negative sentiment last year. Well, it's been around the negative sentiment has been around for a while, but I last year it was very amplified um by changing political climate, um a negative sentiment against Middle Eastern North African individuals. Um we decided we needed to create a space for individuals to gather. and display the creative works that they've been working on and kind of shed a different light on a population that has been painted as violent. And is scary. It's a part of redefining the narrative in a way that makes sense to us and not someone defining it on our behalf. Huge believer in defining your own narrative because if you don't define your own narrative, someone else

3:07

Speaker 1: we'll define it for you. So this is a way of of um making things right. So If you have a community in real life that is you know composed of people from say all over the country and some um some you know um um different countries as well, it's very important to have a strong presence, a voice for individuals to express themselves, and that's where a strong CMS comes from into play. That's why we plan on having a very strong blog for individuals to do guest posts to highlight people's works, to create a meeting place for people to learn about what everyone's working on, a place also to share

3:52

Speaker 1: opinions, and a place to share guides , solutions. to different problems, a place to educate a community. And that is why I think a CMS is so important to building a community. Nobody really wants to visit a website that is not really updated that often. Updates are what bring uh users back. And in our case, we don't really have users, we have community members. Thank

4:30

Speaker 2: you, guys. Can you wire me up or is it obvious how to do it? So

4:48

Speaker 3: laptop, bam, bam, bam. Do you have a does anyone have a display port to HDMI dongle handy? Here we are. Oh, it looks like it's quite a bit.

5:15

Speaker 4: Oh that's n yeah that's the GMI. Oh nice. Oh this is USB C. Yeah.

5:19

Speaker 2: Uh this might have USB. It's your

5:24

Speaker 4: I think I've got a

5:27

Speaker 5: mini display fall like what? Yeah, mini display. So 2015.

5:34

Speaker 2: I can go into that one if I have to, but

5:38

Speaker 6: I've actually got another one connected to the colour.

5:47

Speaker 5: Yeah, yeah, I'll be back in like you know, three days.

6:07

Speaker 3: Hopefully that'll just work.

6:08

Speaker 2: This this will be on there, which is on there.

6:10

Speaker 3: Yeah Hope so.

6:11

Speaker 2: And these complaints about making it bigger?

6:16

Speaker 3: So it's just mirrored.

6:19

Speaker 2: So if I make this Bigger.

6:22

Speaker 3: So if you look behind you, yeah, there you go. Perfect.

6:27

Speaker 2: How about that?

6:29

Speaker 3: All right, take it away.

6:30

Speaker 2: I'm uh this is the uh I'm 73 years old, but this is back to third grade show and tell. My uh talk is called Yearbook Show and Tell This is the website www. fbyc. net. You might want to go to it because it's sort of part of my demo. I'm the volunteer website for this thing. It's got 300 family members, all in a Postgres member database. We have about a hundred events per year. Each event needs its own web page. And each event has at least has event registration. So you have people signing up to do the events We've developed our website over the last 20 years. And last year we finally converted the last bit away from ZOA. And we are now 100% on Django

7:17

Speaker 2: and been using Wagtail as our CMS for the last year. Like all yacht clubs, like all clubs, we publish a yearbook every year. In olden days it was edited on Microsoft Word, with about ten different editors, myriad track change edits. Some pages like the membership roster where access database reports. We made a commitment a few years ago to get it all online. We now make changes online to the membership records. We add events to the database. We add Wagtail pages of each event, and event managers edit those web pages in Wagtail. So if you go to the website, This is the homepage. And these are the stories that we post. And these are the events over here on the right-hand

8:02

Speaker 2: side. Um so the event page is here. They're here a hundred events for um for 2018. Here are the event chairs. This is where you sign up to this this and then each event has its event pages. So if you click on opening day, here's the wagtail, this the part on the Well the words are is wagtail content. The thing at the top, the menu, and the thing at the left is all Django stuff. We we keep our yearbook. So so at the end of the at the end of the year once a year in January we produce this thing. It's a 179-page book.

8:48

Speaker 2: And the entire book is one wagtail webpage. This was the show-and-tell part I thought might be interesting to you all. So the way it the way it works is this this page here describes the details. I'm not going to take you through it, but the thing is taken into parts like the Donna does the offices and board page. Table of contents is done by her I do the website, mobile app. The database does the Yacht Register View. The database does those things. And so you have pages in here. Like um let's see, I think I'm supposed to go here and that so that's the schedule of events that's in the yearbook. And that's different than this page. This page has our events, but it's got links and it's got

9:34

Speaker 2: Format doesn't work for a printed book. So this is a Django page. This is a page that ends up in the year in the yearbook. Same with this page here. This is the who's in charge of what event. So on this page, you've got the chairs, the names of the people, and that fourth column, the charge of the event. And this page here shows Who they are. Okay. So the whole yearbook is this page right here. So it starts out with the committee chairs, it starts out with the table of contents. Table of contents , phone numbers of people ,

10:21

Speaker 2: membership roster, yacht register. And finally back here we get to the events. Here's an event right there. And there's the remember I showed you the list of the chairs. That's the chairs fit right in. So how does that work? And now I'm off my bo on this thing. So on on yearbook complete, if we go into our board only page, because we don't have this available to the public, we've got yearbook work. And the this is the 2018 year book we're talking about. So here are the parts of the book. And if we if we alphabetize this page right here It will it will

11:06

Speaker 2: the first the second page you recall was the table of contents. That's a book page. The phone numbers is a management page. The yacht register is a yacht register page. The membership officer is a membership page. Event list page, I showed you that. Chair list page, I showed you offshore duty assignments. That's this page right here is is is a um is a page in the book. So in order to in order to show you how this works, I don't want to mess up my real thing. So I made a temporary one for us. And so if you go to the website over here where it says search in the top right-hand corner, type in the word Philly, P-H-I-L-L-Y, Philly.

11:56

Speaker 2: P P H I L O Y P H I L L L. There it is. And so now, Wagtail Space, page number one. That's the that's got that I want that to be my page one of my yearbook. Okay? So I've already done the yearbook with about five pages right here. And if we look at the if we look at the yearbook, it looks like this. Here's and here is Where 's page one?

12:41

Speaker 2: Page one is right there. It's in the wrong place. Okay. So and it's also 2018. So if I go to um That'd be this page right here. If I alphabetize right here, I don't know what I don't know what the ordering of the child pages. So now page one 's in the wrong place. So I can drag page one up here and put it in the front And let's put the junior chairs in next, because that's a chair list page. And junior events. So now if I say this, I'm not nice and wrong. wrong place. Well I can't see the thing. How do I get off the screen? Minus, minus, minus, minus.

13:29

Speaker 4: I think it auto-says when you reorder.

13:32

Speaker 2: You think it does? Yeah. Plus, plus plus. So now if I come over here and do this guy, page one is is now first. Okay? And so you can do that if you have enough energy and time, dragging 80 or 100 pages around like that. And I and and I thought I would show you all the code since you've learned I know a lot about code So if I come to this page and if I add, I want to add a new page, add a new child page, and I want to hit take this is these are the kind of page sites we have, which I think are a very small kind of list Compared to a big Wagtail site, I don't know. I need a content page

14:19

Speaker 2: I want a book page. I want a book page which which which will be the code. And I want to choose It's in the home right here somewhere. Wagtail space code is this page. And so if I say publish there. And if I put this like that , code's gonna be at the bottom. So if I refresh, and let's change one more thing of this while we add it, I'm gonna put um I want to edit the this page. How do I edit the yearbook? I'm going to edit right here. And I'm going to change the year to 2017. The yearbook page has a year capability.

15:06

Speaker 2: So now if I come over here, this was 2018. If I refresh it The yearbook show and tells at the top. The junior chairs is is 2017 now. The events of 2017. These things are all 2017 events. And there's the code at the bottom. And what I did was the models. Is that interesting to your class, your book page? I don't know. Done by my Russian program. Using Slack to talk to him on how to make it happen. So it's takes a while.

15:50

Speaker 6: Very cool.

15:51

Speaker 2: Very nice. We

16:01

Speaker 5: have our back. I think I'm a monster.

16:05

Speaker 4: Yep. With Tim on deck. Great. Thank you for watching.

16:35

Speaker 2: Okay. Whoa. What is this resolution? Um Bill Torc

16:45

Speaker 5: is resolution. It's defaulting to something Crazy? Hang on.

16:53

Speaker 3: Let's kill that. Smart and go to HDMI. See how that does. Huh. Much better. Okay.

17:11

Speaker 5: I'm built

17:12

Speaker 2: for what

17:13

Speaker 3: I think is

17:13

Speaker 5: the same. It's a full three resolution

17:17

Speaker 6: it'll do.

17:20

Speaker 5: It's on left corner I got a setting. over the settings and uh resolutions like adding device etc or something. Just my hands. I wanted to do that. Just change that.

17:54

Speaker 3: There we go.

17:55

Speaker 6: Yeah, is it even on the best one? See if I can put some

18:07

Speaker 3: Yank. There we go. Is that a little better?

18:12

Speaker 5: Much better, thank you, Tim. So I'm Bill Torcasso. I'm here from Boston. I work for Oxfam America and I got the boot in a bar fight Okay, so Oxfam America is part of Oxfam 19 country organizations. We're an anti-poverty humanitarian relief organization. We work in 90 countries. What you're looking at here is based partly on mezzanine and partly on a homegrown uh CMS. We are converting to Wagtail and

18:58

Speaker 5: this is my list of thoughts about Wagtail. Everything is going great. Wagtail is terrific. But we're maybe four months into it, and these are the kind of problems I'm running into. So if anybody can solve them after you've heard the list Let me know. We're a small team, three and a half people, a front-end engineer, myself a back-end engineer, a web content specialist, maybe somebody who understands That's stuff I don't understand. And the front-end engineer and I are working simultaneously on creating our stream blocks. And migrations are always a problem for us because we're always simultaneously adding a

19:43

Speaker 5: livestock high. And we get migration conflicts all the time. It's a real pain. If anybody knows how to solve this problem, you know. We're also converting from our commercial ISP into on web services and elastic beanstalk. And I thought this was going to be, you know, the golden era because BeanStock runs itself and I wouldn't get any calls at 3 Yeah. But it turns out it's very difficult to use without some expertise. We need S3 buckets, we need RDS servers. we need elastic beanstalk instances. And if you use the wizards to create those things, then you get into a situation like this.

20:31

Speaker 5: I will be at home with my laptop working normally, creating, say, an RDS instance, and it's great. It works fine. I come into the office the next morning. and it doesn't work. The reason is that the Amazon Wizards always make very narrow security groups and the ISP I use at home is different than the ISP I use in the office. And so without realizing it, I have locked myself out of the instance I made last night. So that's It took us a long time to sort through what those are. We have lots of assets. We have publications, we have a lot of photos.

21:16

Speaker 5: from our teams in the field. We need to import them from our existing code base into Wagtail. I'm thinking of adding a UUID to each of our assets because trying to keep track by the primary key, which is correct in one system and not correct in another. So I'm thinking of putting on any universal identifier and just tracking all of our assets that way. In working with the stream blocks, the stream field , I don't understand the rules about what you can and cannot do to access a value object. There's uh on a page you can declare someone

22:01

Speaker 5: something with an ad property decorator and it would be great. You do that in a screen block class and you declare a property decorator and it's just not known. I understand that there's something about stream block struct value classes versus my class, but puzzling through that has taken a little bit of work. Um we got some code from Torchbox to unify internal and external URLs. We have a number of sites, five or six. And our search results, I mentioned this yesterday, have to go, have to include results across all of our sites. And so as our editors are creating new stories, new content,

22:47

Speaker 5: They need to be able to insert links that are either internal to a page chooser or external to a regular URL block. So we have this thing called a link block to unify the two of those and it's working out pretty well but there's difficulties about is it required or is it not required And does that propagate out properly through nested, you know, when a link block is nested in a different strush block within our pages. Again, I'm looking for answers to all of these problems. And lastly, we have a lot of content in WordPress. I was talking with David about

23:34

Speaker 5: Extracting from WordPress. I have a it's a hard problem because the models don't match. But I worked on a data warehouse problem. once where we use this technique, standard technique called extract, transform, and load. And my thought on WordPress is to write fairly generic extractor that will write the the fields into a Mongo database with a prefix that says this is the word perfect field. And then transform in place, writing the new fields with a prefix of WAG, WAG underscore. So that transform is specific to the particular arc. And then the load just travels through.

24:21

Speaker 5: It knows the look for fields that are labeled flag and pull them out to the right of the device. So these are the things that are challenges , and that's pretty much all I have to say. Any questions? That's good luck.

24:58

Speaker 3: I'm gonna try to sneak two subjects in to see if we can actually get this. Because I do talk fast, as you've probably all noticed There we go. All right. So Dan and I have been working on a little something. As you've probably all done at some point in your life, you type Wagtail start and the project name. And then you've brought up your run server and the first thing you have seen is a welcome to your Wagtail site in H1 without much. uh without much else. With also some help from our lovely people working on accessibility, we also picked out some colors and we have done this. So if I do Wagtail Start

25:44

Speaker 3: W S. And oh, you don't, darn. There we go. Wagtail start W S. It's created me a Wagtail project called WS. Success, WS has been created. I'm going to go into the WS for Wagtail Sprint Directory and uh run my initial migrations And then I'm going to fire up my run server. What we're almost uh what we're almost done with after working on this, actually I'm gonna have to do localhost. is a new Wagtail start page.

26:30

Speaker 3: So a couple things we still have to do here is uh we want to dynamically figure out what version of Wagtail there is so we can point to the proper release notes for the current version, proper documentation, figure out what tutorial we actually want to point to. But there's also a link to the admin interface there. It reminds you to create a super user first, but we'll take you right into your Wagtail site interface. I did not build the uh CSS components because that's a giant pain in the butt, but that's a topic for another lightning talk. about how to be able to start developing without building building the front end assets, which I think we wasted about 10 man hours in here on today. So I love you Torchbox, but we've got to come up with something better. All day long?

27:17

Speaker 3: Gotta be able to contribute without building the front end assets if you're not working on the front end. So that that was a big takeaway from today as well. The other thing I wanted to talk about, and I'll I'll I'll show this to you. Is uh so this is my GitHub. And you can see down here that I've been fairly active in the past year. And I was pretty active last year. And I was pretty active the year before that, but I was working a lot on a a private repository site for Wharton. I I still do work there, but I was working very intensely on a project that I couldn't contribute anything from work from. And then in 2015 I was pretty active. You can see here this this period right here is when I reopened my World of Warcraft account.

28:09

Speaker 3: So yeah, that's that's sort of a hidden indicator it happened. But if you look here in May, you'll see that you know before that there weren't many contributions. And 2014 not much, and 2013 not much. So, what happened here in May? I got sober. So I am in recovery. Um I'm an alcoholic addict in recovery. I've uh Thanks. I've spoken about it a lot Um over the years I've been pretty open about it because, you know, I've got the one disease on the planet where I lie to myself and believe my own bullshit So that's something I need to keep in check and being honest about it, rigorous honesty is a very important part to me. On my way here this morning on my bike ride, I went to a meeting.

28:55

Speaker 3: Um, you know, the cure for my disease is It's not really that bad. I get to spend an hour sit an hour a day hanging out with a bunch of my best friends talking about my favorite topic. And my biggest problem, me. It's not the worst thing in the world, hanging out with another bunch of crazy people just like myself. And as you've seen, since coming into recovery. You know, GitHub graphs can show you a lot of things. But uh, you know, I I I love how it outlines just how much more productive and how much more involved in our community I have been since getting sober Because this is a big problem in IT and something that I think we need to be more open and honest about because there's a stigma around this disease like I've never seen before. If you think about if somebody um is diagnosed with cancer, everybody rallies around them

29:42

Speaker 3: And immediately it says, oh yeah, you got this. And that that's exactly how it should be. But for years and years and years with recovery, it gets swept under the rug. It's the dirty little secret of the family. It's oh this stays in our house. What happens in this house stays in this house. It's not something that's ever talked about. And I think it is something we have to talk about open and honestly. Because recovery has been life-changing for me. It's been absolutely wonderful. A lot of people here. uh in this room knew me before and after. And I think most would agree that uh this version of Tim is uh is a little bit better than uh than the previous. So how did this tie into Wagtail? It actually does So while I was in rehab, that month before you saw that green period start, they gave us out these little printed booklets of local recovery meetings.

30:30

Speaker 3: And uh my first thought was, you know, why the hell isn't there an app for this? Why isn't there an app for this? What millennial is ever going to look at this? And little did I know I was kind of sealing my own fake, because soon after getting out of rehab, I hooked up with the folks running the Philadelphia AA meeting site. They were just doing a redesign. And they figured out pretty quickly that I was an IT guy and I immediately got roped in with one of my best friends now, Mike, into doing the regional Philly AA site. And we ended up meeting up with a guy in San Jose. Where we started Meeting Guide. Now, Meeting Guide is an Android and iPhone app that goes to a WordPress plugin that we developed for San Jose and Philly initially That actually does a pretty good job.

31:15

Speaker 3: So if I come to the current version of the WordPress site, you'll see if I come to meetings, there are 1,760 meetings a week in the Philadelphia area. So we when we first launched Meeting Guide, it covered the Philadelphia area and San Jose. So if you take a look here, it's Friday. Here are all the meetings for today. If I switch this to any time, you know, I can come to evening and see what's coming up in the filly area in the evening. All the same data that is in this WordPress site. automatically feeds an API that goes to a central location that feeds the apps. So the apps update once a day from the actual data at the API endpoints. And we started with just Philadelphia and San Jose. In the year and a half since we've launched this, 150 other metropolitan areas have joined in. So we've got coverage across all of Europe. We've got HANA

32:00

Speaker 3: we've got Hawaii now. I love bringing up the Hawaii meeting list on the Meeting Guide app. And if you want to install the Meeting Guide app. Even if you're not an alcoholic or an addict, it's a good thing to have on you because you never know when somebody's going to need to find a meetup. So right here you'll see I can bring it up and it's going to look, it's Friday, it's right around me, and it's going to show me all the meetings in the area So what I've been doing, since many people here come from a WordPress background and have seen the mess it turns into, this is our WordPress dashboard. So if you take a look here. This is what happens when you run WordPress. This is what happens when you run WordPress. I have no idea what the hell to do to update this website and I helped write it.

32:48

Speaker 3: So if I come into I don't know if it's under pages or posts or somewhere, but Divi 's installed here, which is a whole different level of hell for me. I I don't like slagging other technologies. It just doesn't work for me. So if I come here, I click on this, I think. And within here I click the use the Divi Builder something. It freezes the browser. Use the visual builder maybe, but you you get the point. If I can't figure this out, how the heck are the uh non-technically inclined people, volunteers in the local inner group office gonna be able to get anything done I'm still waiting for this editor. This is a decent machine on a high-speed internet connection.

33:36

Speaker 3: Okay, there we go. Um I think I can do something here, sort of Okay, good, I have a cursor. I can do something here. But as you can see, this is um this is not an ideal way uh to maintain a site. So I decided it was time to bring Wagtail into the house to improve the experience of the people in the office. Because right now we also have all the meetings in the Philadelphia area in an access database that I have a daily cron job that pulls, they go from access to MySQL. I pull them in from MySQL, process them into the right format, and insert them directly into the WordPress database. This is not a good situation to be in. So I've started a Wagtail app, which is going to be pip installable and open source for any recovery group that wants to move over to Wagtail and Django that performs the same API service

34:26

Speaker 3: and meeting listing that the WordPress plugin is, so we'll have a choice. And uh I've gotten the beta of that up here, which is a little bit cleaner. So you can see I've only got a couple of the meetings imported now for testing But it's basically got the equivalent of a Google search. Thank you to David Tables here. So you can search for any field. So if I put in a zip code, if I could type, you'll see that comes up. If I put in Mill Road. You'll see that result comes up. If I put in Bucks for Bucks County, you'll see all the ones in Bucks County come up. If I want to find open meetings, I can put in open. If I want to find closed meetings, I can put in closed, I can put in Sunday I can put in Monday. There are none there because it's only Sundays. Wheelchair for accessibility. So you'll see this gives a pretty powerful search for people right on the front page.

35:13

Speaker 3: We are working on making it fully responsive. It's not quite yet there with the data tables. But the big advantage here is you saw that dashboard. Here is the Wagtail dashboard equivalent. So what this gives our office now is a very straightforward interface to use. So if you come to pages, you can either go to the content of the site or look at the locations that we've imported So if you look at locations, it'll show you the locations and then you can drill down to meetings. So I've actually imported all the meetings, but when I'm working, um On that first interface we saw, I've only got 10 results being returned, so it's super quick while I'm working on the responsive tables of the interface. Um the search is also implemented. So if I search for uh Let's look at Ridden House.

35:58

Speaker 3: So there's Holy Trinity, Church of the Holy Trinity, 1904 Walnut. That's the one right on Ridden House Square at the corner in 19th and Walnut. You'll see here that that is actually a location page that we've built. If we drill down, you can see all the meetings at the location. So sunrise semester meets a couple times a week. That's how many recovery meetings there are a week at 19th and Walnut. So if we go into Sunrise Semester, you'll see that we've actually got, you can say what group it's affiliated with, the day of the week, the start time, the end time, and what type of meeting it is. And uh if you ever want to check out a Different kind of AA meeting. Oh, I don't have it imported yet, but I have a secular Sunday meeting called Progressive Not Perfection where we actually alternate chairs between men and women every other month and within our group conscience say that people who do not adhere

36:47

Speaker 3: to binary gender can share any month they want. We do things a little differently than a lot of the more traditional AA meetings and follow a completely secular format. So it's been a it's been a lot of fun to put together. And uh it's a challenging project, but you know, this kind of thing is really, I do feel it is saving lives. Because you know what millennial is ever going to look at one of those printed out books? So before I finish, I'll just give you a quick look, thanks to Ryan, at the actual meeting guide here. Let's see if this works Hooray! So this is the actual meeting guide at that gets fed with either the WordPress or the Wagtail data. So if I flip my current location over to Hawaii. Let's all get really jealous and uh see what's going on in Hawaii.

37:35

Speaker 3: You'll see, oh, here we are in Hawaii. And uh it's always kind of fun when I'm travel to actually use an app that I've written So you'll you'll see in here uh where have I been recently? I haven't been to Hawaii, but checking out meetings in Vermont, Miami. So if we go up to Vermont you'll see, oh gee, location not participating. But it gives you all the information on how to get in touch with that inner group, their website, and slowly but surely we've been trying to get more and more locations in So like I said, we're up over 150 now across the world. We have all of Europe. Friends of mine were going to India and we checked it out. There are actually four cities in India that are now in. So it's been a pretty rewarding project to be a part of. So uh thanks a lot for giving me a couple minutes and uh I hope this showed you a little something uh

38:22

Speaker 3: something interesting today and another way that Wagtail is helping to do good. Thanks.

38:36

Speaker 4: That's just the app written in.

38:37

Speaker 3: Oh, is that sorry?

38:38

Speaker 4: The app? What's the app written in?

38:40

Speaker 3: Uh the app I would have to check with Josh R. I only wrote the data layer. I think it's actually uh iPhone native and swept in Android and Java. Okay. He actually went data. Uh next up was PEC, Wagtail Q. 0 upgrade. Is

38:58

Speaker 7: it either gonna swell or really badly?

39:10

Speaker 3: I'm reading for well

39:11

Speaker 4: But I'm curious if you really happy. One of these works.

39:35

Speaker 8: Does that work? Oh yay! Yay! Something actually worked Alright, let me make my viewer a little bit bigger. Is this is this on? Can folks hear me? Okay, cool. So my name is Pat and I work with the Federal Election Commission. So that is a government agency. We have nothing really to do with elections. Elections used to be part of us the whole voting part used to be part of us a while ago and then that sort of like split off. So you basically do campaign finance uh data and uh disclosure. And then also enforce campaign finance. So if you're interested in looking for like how much federal candidates raised,

40:22

Speaker 8: things like that, you can search that through our website. So I'm just going to give you a little tour real quick. If you go to our site, fec. gov, and then just go to campaign finance data, explore all data, you'll see a bunch of things like you can look up committees or candidates. And there's a little auto-suggest that comes up and you can go direct to their page and see all this stuff. So if you're interested, you can come check us out. You can also look up individual contributors. So I like to say, you know, if you're interested in looking for like a celebrity like George Clooney. or somebody uh who has contributed, you could do that uh via our website as well. Um and then also we're always continually trying to like improve our site.

41:08

Speaker 8: Um so This is a new feature that we implemented is our little feedback drawer. So if you're interested in signing up for helping us do user testing for our site, we would really appreciate it. We're always looking for people um especially people who don't know anything about us to sort of test us out um and and uh see how things go. And um we're also remote too so like um Excuse me, I have a little cold. We're also remote too, so like you can um we can do things through Google Hangouts or video screen share for those user tests as well Great. Um so the whole upgrade portion. Um I was looking at the Wagtail website and right now like the upgrade portion of the docs is really within the um

41:54

Speaker 8: release notes. Um and it's kind of scattered, right? Like you have your you have the Wagtail upgrade, upgrading Wagtail like release notes, which gives you a good sort of like list of all the versions and the deprecation policy and the upgrade process and things like that. But it kind of skips some stuff that they also include in like other release notes. So if you look at like version 2. 0 You'll notice like some other release notes and things like that. So basically like during this run, I was trying to consolidate everything into like one 's like stream streamlined web page that would tell you like what are the steps that you might go through to try to upgrade uh your Wagtail uh to Wagtail 2. 0 So I put in a pull request.

42:40

Speaker 8: My pull request is right here to the Wygtail site. I did a fork off of Will 's branch there. And I was also working with Michael too and created this pull request and essentially this is the new uh page that I came up with. It's just a new like upgrade page which has most of the same things that were in those release notes, but I tried to sort of keep them in one spot um a little bit more streamlined. Let me make that bigger. So we have like the upgrade requirements up at the top. Then the upgrade process, and you can sort of like read through the upgrade process. and what you can do to upgrade. Also, I put up here too a Wagtail 2.

43:25

Speaker 8: 0 note that if you are upgrading the Wagtail 2. 0, there is an update script. Which I did not know about when I initially tried to upgrade. And I'm literally in Sublime writing regex to see how I can, you know, change all the module names, which was really annoying. And then I found this update script after the fact. But the good thing is that the update script actually works because after I ran all my redex , I wiped that all away and then ran this and it worked great. So let's see what else. This this section's kind of new. This is the upgrading directly to Y-Tail 2. So the docs kind of say like you should try to upgrade version by version. Um which is a good idea. You should still try to do that locally to make sure you can do version by version.

44:12

Speaker 8: There's no like weird errors or things in your application that might pop up. But if you wanted to upgrade directly to Wagtail 2, it's it's not as painful. Um and I try to like document it so um you all can sort of get an idea. And I'm actually going to try that to do that here locally by following these locally upgrade environment steps here. So, who here uh has squashed their migrations You all are the good people. You all have squashier migrations. We have not. And that's when you end up with something that looks like this. We've got 101 migrations and we found it very difficult. Like we tried to squash a bunch of times, we're not able to successfully.

45:02

Speaker 8: So that's where you kind of end up with just this this big slew of migrations which uh kind of blocked us in upgrading a little bit. And we had a little bit of a workaround to try to to fix that, especially when you're running tests. Like the tests start from a blank database, so you're just trying to run the migrations from a blank database. And if those dependencies aren't actually there, it's going to error out. So I'll let you know how we sort of went through that hurdle. So first up here says upgrade version of Wagtail to B2. So that is already in our requirements file. I might have checked out a new version, so it might not be. So I'm gonna go to my requirements and I'm going to upgrade us to version two

45:53

Speaker 8: And I'm just gonna do 2. 0. 1. Um that's just one of the patch versions that that's there. And then I'm gonna go ahead and do a pip install Oh, I gotta be in my Python environment first. And I use uh PyM for my Python environment. Okay, so that's gonna go through all of my requirements. Run through everything Oh, you know what? I forgot. I gotta upgrade Django too. These are not compatible versions of Django. I think it was 1. 11.

46:38

Speaker 8: One three. Let me install it again. Alright, so now if I do a pip freeze, that'll tell me what I have installed so far. So I've got my Wagtail 2 installed, and then I've got um Django 1. 11. 13. So I've upgraded. I neglected to say that within the documentation that you should also update your Django 2 to the version that is compatible. And then this upgrade or sorry, YTEL update module paths, you can just run that

47:26

Speaker 8: against your repo. And that will go ahead and update all of your module paths, which is super helpful So that just updated all of those migrations, which you know you don't have to do by hand. And then after that, you can run your migrations against your database. Yep, I gotta be inside of FBC. Okay, so this wag this basically upgrades all of the Wagtail application um migrations, uh which is great for like your your database is already

48:11

Speaker 8: uh migrated all of your home applications. So you don't have to do it again. This migration is just for the updated 2. 0 sort of migrations. uh that just ran. But you'll see the failure in the test. And if you run tests inside of your deployment, um your test uh will probably fail, which um mine did. So if I try to run the test You'll notice that it will fail any minute. Yeah, there. So it's complaining about this like you're looking at this and you're like what is going on? And it's like complaining about this Wagtail Core page draft title thing. So a weird workaround that I did for that was I actually looked in my migrations and stuck that dependency

49:01

Speaker 8: within the um Initial migration. Uh, I don't know if that's like the way to go, but that's the way that I did it to sort of get around the hurdle of the test. So essentially to do that you do PanaChap Pi show migrations to see what kind of migrations that you have. And I'm looking for Wagtail Core because that's what it bombed on. Wagtail Core here And then I'm looking for the migration that it bombed on, which is this draft title thing. So if I go back into my migrations , Which are right here, and I go to my initial, so go ahead and run it first. I replace this dependency with the one that it failed on, and then run my uh update or my test again.

49:47

Speaker 8: Um and that actually passes the test. Um or it should pass the test. Okay, so that ran all my tests and it completed just fine. So um the issue that we were having is we could deploy it just fine if I disable the test But you kind of want your test to pass before you deploy it, right? So in order to sort of deploy it, I put this into the documentation here that For deployment, you should what I think you should do is you should create one branch that disables your tests.

50:37

Speaker 8: the at least the migration portion of your test. And then basically go ahead and deploy it so it can run all of your migrations into your database. And then after that, create another branch that re-enables the test again and then deploy that. All of your tests will pass. You'll never have to do this again unless Vikil has another breaking change. uh which changes a bunch of the app names. So like that's essentially what we had to go through to like upgrade. It was really painful trying to figure it out because there are so many dependencies upon dependencies But hopefully like documenting it here sort of like shows you all that it's possible if you come through you know those issues. I don't know if you all have come through those issues uh try and upgrade yourselves, but

51:22

Speaker 8: Yeah, I was hoping that would help. Are there uh any questions? Nope. Yes. Yes, we did. Actually, YTL 2. 0 comes with draft um draft tail. And draft tail is actually pretty awesome. I have it here on my This is our feature site and it has the upgraded version on here. And the cool thing about it is it has these nifty concepts of folders now. Um which, you know, a parent page essentially is a folder. You've got the whole edit pencil right next to it, which is really nice. Um You can go to each of the pages pretty easily and sort of go through things.

52:09

Speaker 8: If you look at, let me go to an actual content page Uh so if I edit this page here and I chose one with an HTML block. Sorry. about that. Um you find one without an HTML block. Maybe this one. Oh you know what? Um I think I think something happened to our configuration where it updated itself. Let me try let me try one more thing. Sorry, am I taking up too much time? I'm taking up too much time? No? Let me try let me try something real quick.

52:58

Speaker 8: Let me try going to my local admin and see if that actually has it in there. If it doesn't, then Let me try to add something. Nope, sorry, that portion is complete uh completely broken right now because I built this from uh from the beginning. But yeah, the the draft. js is actually really nice. But it's really complicated to code anything in. I'm a a real beginner at React

53:44

Speaker 8: and I had to take Wagtail's example of their stock example uh to create a new glossary item um for the FEC. And that was like modifying four files. It's Python code, React code. all of that to create a simple functionality of like putting in a class and a data term and sticking that onto the page. So um Yeah, I was the one that was advocating for the whole edit HTML thing. I know it's kind of taboo, but like it just makes life so much easier. Like if you didn't have to actually create new tools within the editor for your you know content folks to be able to do like it's just that much more easier so Yeah. But anyways, um yeah, that's it.

54:40

Speaker 4: Next up, World

55:09

Speaker 8: All right, I can work with this. Um, I don't have a whole lot. Certainly not any massive demos, but I wanted to show a couple of things. First of all, with the

55:21

Speaker 6: documentation sprinting project. Pat did her upgrading document. And I took what Lacey talked about yesterday and wouldn't it be great if like programmatic manipulation of of pages and revisions was documented and tried to do that.

55:40

Speaker 8: I didn't hit all of the things that she talked about and posted here

55:45

Speaker 6: because at least the way I organizing them in my mind for the specific story that she is telling it makes sense for the way I think about it it doesn't so that might be please comment on the pull request if you think that it's crazy the way that it's organized, but what I tried to do

56:09

Speaker 8: is um go through kind of the process of creating new pages.

56:15

Speaker 6: starting with the fact that we have to manipulate both pages and page revisions if we're going to do anything programmatically. Using the blog example, more or less exactly what she talked about, the bit that she talked about, you know, if you need to backdate as you're importing old content and needing to save revisions before you save the page.

56:39

Speaker 5: It also got me thinking about something that I know we have occasionally struggled with. We have

56:46

Speaker 6: a reasonably

56:47

Speaker 5: a reasonable number of page types in Ragtail at CFPB. And

56:52

Speaker 6: we occasionally get the schema wrong and or it's not quite what what we originally

57:01

Speaker 8: want isn't quite what we want when content editors actually start entering content. So we have to change our page model

57:08

Speaker 6: schemas. So doing that is interesting if you have a lot of pages that might have draft revisions or old revisions that someone might want to go back and look at, pull into something. So I also wrote a bit here about if you're migrating pages and revision. If you're doing like you can do a schema migration and that's great.

57:34

Speaker 5: If you need to get to the point where you're doing a Django data migration on pages, it's helpful to know that you should I'm sure who's done a data migration on Wagtail pages before? Have you migrated, have you modified revisions at the same time?

57:57

Speaker 8: Sort of. Yeah.

58:01

Speaker 5: Yeah. So you don't have to. Like there's nothing that will cause an immediate error if you don't. But if someone has like draft pages that aren't Like you can get into a weird state where there are revisions that don't match your new schema, especially if you're changing things massively. So I've tried to document here the fact that you will need to modify the revisions. And The way that we do that is to load the revision. content.

58:35

Speaker 6: json, modify the field, and then dump it back to JSON. save it. And then kind of how to do that in your data migration. And there are typos of plenty and grammatical errors and everything else like this that Andy has already uh spotted for me that I will be fixing. But this is a pull request on Wagtail for that. I also briefly wanted to show off something else that we've created at CFPB that we created kind of after Andy started putting his talk through our approval process uh which is wagtail tree model admin so who's created model admin

59:20

Speaker 6: uh wagtail model admin

59:22

Speaker 5: interfaces for Django models anybody So

59:26

Speaker 6: it's great because you can expose things that aren't CMS-shaped in the same interface for content editors, for whoever needs to edit them. Which we've done a few times now for, again, content that's not really CMS-shaped that you might want to tie into WideCal pages and that sort of thing.

59:45

Speaker 8: We encountered a need for doing that with content that is very

59:50

Speaker 6: hierarchical. So we have a model that is clearly apparent of another model, which is clearly a parent of another model, and so on. It actually goes down four levels. And I don't have a demo of this and I don't I probably shouldn't show the thing we're working on, but it's open source, you can check out CFGov Refresh and

1:00:12

Speaker 8: it's regulations 3k under there if you're curious but

1:00:17

Speaker 6: basically what tree model admin does is it uses model admin to i'll show a gif because because that's seemed to be the best way to explain it, to create that relationship. So these are the in one of the Wagtail test cases, the fixtures are uh authors and books. So this is reusing that. And it basically

1:00:44

Speaker 2: demo might be easier. Again, I don't this is the Unit test, this is the talks environment that I am in right now, and hopefully it works. Or not?

1:01:02

Speaker 7: Is it already there?

1:01:05

Speaker 8: Oh it might have been you're right. Yeah. Right now we're still paying. Alright, well let's try this.

1:01:14

Speaker 5: Is it res like because it's responsive because of the resolution maybe it's like a bug? It could

1:01:19

Speaker 2: it could be actually. I don't know.

1:01:22

Speaker 5: This is I mean this shows you what is responsive and isn't. So you can't tell from here. So this is your normal model admin URL. And if I want to look at JRL JRR Tolkien 's books.

1:01:38

Speaker 6: I can click on the same kind of tree navigation UI that you have in the Wagtail Page Explorer I have breadcrumb navigation back to the parent, but this is all using just filters on the model admin. URL structure that it already has. So basically I can look at books

1:02:07

Speaker 5: just like you can just like if you go like if you register the model admin and you can go to that and then books and you see the full list of books. But then you could also filter filter by author, which model admin also gives you if anyone explores the documentation. But long story short, this is, I think, a neat little library for things where if you need it.

1:02:32

Speaker 8: If you have models that are shaped like that, then this is something that will be really nice. And if you're not sure if it helps, it won't at all. So That 's a good side.

1:02:52

Speaker 4: Danielle? I do not.

1:03:10

Speaker 8: Yes, I do. Yes. Is it showing the same oh no it's not.

1:03:28

Speaker 7: Yes, good. Okay. Already? Yeah. So as well. Just introduce and get started. Okay, great. Um hi everybody, I'm Erin Malini. I've been a developer for 15 years. Um I work for myself as a consultant. My current clients include Cactus Group, if you're familiar with them. And also Wharton Computing. I know Danielle through the tech community, but today was our first opportunity to work together and it was really fun. My first Django project was in 2015. I was learning Django and Wagtail at the same time same time. So anyway, it it was really awesome because uh I ran into an issue and

1:04:14

Speaker 7: uh reached out on Twitter and the wagtail handle, which was actually Tom at the time, like commented back to me and really helped me out. It really like um helped me to join the Django community and the Wagtail community and I just I really loved it. It was a really great experience. I bet there are other experiences in here. Similar to that one. So today I got to work with Danielle. I was excited because for me, deployments can be really painful.

1:04:42

Speaker 8: And so after seeing his talk yesterday, I wanted to learn more about how to use Divio's control panel.

1:04:49

Speaker 1: So I got to do that today. So that was really fun. Oh.

1:04:54

Speaker 2: I think you had enough from me yesterday, so I won't repeat it. I'm Daniela, so you probably recognize me or you haven't forgotten me by now. And this was uh really nice because um as I said I've been uh kind of of champion for Wagtail at DVO. And now we've got another member of the community actually who has been working on some really interesting stuff. That's going to benefit anybody who wants to use well it's actually going to benefit anybody who uses the demo as well, isn't it? So it's going to benefit anybody who uses Wagtail. So I think we should just show what we're going to show.

1:05:32

Speaker 7: So I'm on the dashboard here, or I'm on the Divio control page. Um, and I'm going to dive into a project that we have here. And so this is a Divio project that we have built. Um, and I want to see what it looks like live, so I'm gonna click there And this is the Wagtail Bakery demo. So we just spun this up really quickly. Actually, when we found out we still had a half an hour to do our lightning talk, we were able to spin this up. So I'm gonna go to the admin and do you notice anything maybe not quite right here?

1:06:11

Speaker 2: What's wrong with this project? It's on Wedhill 2.

1:06:15

Speaker 7: Yes.

1:06:17

Speaker 2: Yeah, as long as one way.

1:06:19

Speaker 7: Yeah. Um so my next step is going to be.

1:06:23

Speaker 2: Um your next step is going to be

1:06:25

Speaker 7: I think I'm

1:06:26

Speaker 2: um

1:06:27

Speaker 7: gonna run it locally, right?

1:06:29

Speaker 2: Well why don't you go to the add-ons on the control panel

1:06:32

Speaker 7: Okay. So I'm in the control panel, I'm in my Whitel Space Baker US project here. And I'm gonna go through and update these add -ons so that I get up to the correct updated version of Wagtail. So I'm gonna start with that add-on. So I went to my project, I went into add-ons And if it wasn't selected, I would select installed so that I could drill down into the add-ons that are currently part of this project. And I'm going to go ahead and configure the Wagtail add-on And as you can see, it's um we're using the same version here as Wagtail 200, so we're gonna update that So we're going to change the version.

1:07:19

Speaker 7: You'll see 2. 1 is actually not listed here. It's still in beta, but that's okay. We'll still use it. We're going to update it. Yeah. Updates. Okay. And then it brought me back to my add-on screen and I'm going to drill back down into installed. We also need to update our version of Django. So I'm going to go ahead and do that too. Change version. So let's go right on to two L updates

1:08:06

Speaker 2: And while Erin's doing the next part, she's got two more. Um she's got the Aldrin add-ons application and the Aldrin SSO. Um I should explain the name Aldrin. It was just the old name for um uh DVO Cloud and just don't make the mistake of make giving something a name that you might ever change because it will live on in your code base forever. So alternate add-ons is the framework that makes all of this uh possible and uh Aldrin SSO is is our single sign-on system that makes it possible for people to log in with a click once they're logged in. Yes

1:08:42

Speaker 4: , right

1:08:44

Speaker 2: Yeah.

1:08:45

Speaker 7: Okay. And that's the same thing.

1:08:46

Speaker 2: So um Erin has to update those other ones as well because in order to be themselves compatible with Django 2.

1:08:56

Speaker 7: Right.

1:08:57

Speaker 4: Do you manage the version numbers there? The the the add-on version number with the

1:09:03

Speaker 2: at the moment we don't actually have a very nice way of um keeping those things in synchronization And we would like to do that, but not necessarily through version numbers, but it's it's a bit fiddly at the moment. Yeah.

1:09:16

Speaker 7: Okay, so now that we have all our add-ons updated We can go ahead and deploy.

1:09:23

Speaker 2: Do you want to share the commits that you've just

1:09:26

Speaker 7: created? Oh, in here.

1:09:29

Speaker 2: Yes.

1:09:29

Speaker 7: Yes. Yes. So actually let me slow that down a bit. So I went into my dashboard. And you can see my test server now has some updates. It says core commits not deployed yet, because we haven't deployed these. So if I click show It just shows them here in um reverse order. So got all of these versions updated here. I got all four of them. This is a nice reminder that I remembered to do all four. And then I'm gonna hit deploy. And this is actually really, really fast.

1:10:01

Speaker 2: Yep, starting. We didn't set up the project locally though, did we? No. No, we didn't. Yeah. So this is now actually rebuilding the container on the live site for the uh the project. So it's actually applying those upgrades on the test server. Um maybe this would be a good moment to switch to the local development.

1:10:31

Speaker 7: Yeah, yeah. So I got set up today to do this, and it's actually pretty simple to pull down this code locally. If you go into your local development, it's the second command there. Give you a project setup and then the name of your project there. So I can go ahead and paste that command, set up my project. And this takes a little time?

1:10:57

Speaker 2: It's got to download all the um Docker layers and and then and then build them. So we can leave this running. But probably the other one that we were looking at, um this was Oh that was just s getting started here. So the other one um in the dashboard should have should be um

1:11:19

Speaker 7: Did I go away from it while it was running? Oh, there it is. Okay, good. Looks like it was successful. All commits have been deployed. So now if we go back and look at the site. And go to the admin. We no longer get that warning message because we've updated, which is great.

1:11:41

Speaker 2: Um when when Erin says we've updated it, do you want to go to GitHub?

1:11:49

Speaker 7: So there was one there was one um add-on that actually had it had to be updated today. The others were already all up to date, but the this is the Aldrin Wagtail add-on. This one had some Incompatibilities with Django 2. 0, so that's this uh settings.

1:12:10

Speaker 2: Oh yeah. Text logic

1:12:11

Speaker 7: for sure. It had some incompatibilities with Django 2. 0, so we sort of worked through those and updated those. It's that middleware line there. And also this line here. So once I updated these two lines, it was then compatible with um Django 2. 0 and then I also updated the version of Wagtail in here.

1:12:35

Speaker 2: So Um this uh add-on, Aldrin Wagtail, is it's just a kind of wrapper that itself installs the appropriate version of Wagtail or whatever software you want. So Erin's work, if you scroll up, was to do things like um Mm if you go further I think the most interesting that's okay so this part here this is where the add-on knows that This middleware needs to be in a in um a wagtail project so it will uh extend the setting. So it will auto-configure. It was reasonably easy to do.

1:13:15

Speaker 7: It was. It was um the error messages were Pretty much told us what we needed to fix.

1:13:21

Speaker 2: Yeah. Um and so that was a big step going up to Django 2. 0 compatibility, but for the next additional Wagtail Which will be 2. 0. 2 or something, you'll probably just have to update the changelog and

1:13:38

Speaker 7: and the version.

1:13:39

Speaker 2: Um yeah, and the version and and and that will and that will be it. Uh yes yes and yes it will. And and also if you go to the anonymous demo now So the the demo the anonymous demo I showed yesterday, the one that launches instantly, that will also incorp be updated to white tail um 2. 0 no sorry, 2. 1. 0. Yeah. Um once all the demos that are are in the pool have been recycled. So I think uh the ones right now might still be on on on this version but soon it's g everyone's going to have a um there you are so they'll do that and they'll be on the very latest version

1:14:25

Speaker 2: Of Agtail. So I I think Erin is going to be the uh uh Wagtails ambassador on DVO Cloud or something like that. So

1:14:32

Speaker 7: I'm excited. The local build is done. I could

1:14:48

Speaker 2: Yeah, was there something that you

1:14:50

Speaker 7: I mean we can run it but that's about then

1:14:52

Speaker 2: that's yeah we would um

1:14:54

Speaker 4: yeah

1:14:54

Speaker 2: I think we s showed everything.

1:14:56

Speaker 7: Thank you. Thank you.

1:14:58

Speaker 4: Next up we have uh Michael. Sorry

1:15:03

Speaker 2: I'm calling that

1:15:13

Speaker 4: And then we have to find somewhere where we can hang out outside.

1:15:16

Speaker 3: Yeah, I'll be very quick. Can we All right, so Some of you might remember from my talk yesterday that we had to write this, I don't know how to make that bigger, sorry, but we had to write this squirrely code to kind of get image URLs to work in our API. And then we do this weird thing where we add like a property and that's how we get the

1:15:56

Speaker 8: Yeah, I don't I don't know how to do that with the with this particular thing. I'm guessing that doesn't work. Um I can zoom in on the web portion of my demo though. But basically just there's a there's some wonky code that that I was trying to fix and I was gonna actually document how to do that when I was working with Pat and Will. But then I was like, why am I not just fixing this problem? So I put a PR up that there's now a download URL in the image API. So this works whether so this is my uh my actual website for work and we're using CloudFront so it works like that and then I set up a brand new site that's not using AWS

1:16:45

Speaker 8: and that returns the media path properly as well. So yeah, and there it is in like a context of a page. And there's the PF PRF uh oh and I did Yes, thank you, Tom.

1:17:03

Speaker 3: I did uh actually do a little documentation updating as well. I I put in that this now is part of that Um yeah, that's all. hook up for this Is there a hookup on here for a MacBook Air?

1:17:42

Speaker 6: Um Tim, I need your adapter. Uh

1:17:50

Speaker 4: USB C or V G

1:17:51

Speaker 6: uh V T either yeah V T I guess. All my HD Yeah. This

1:18:13

Speaker 8: is showing Okay, let's see if I can get this zoomed in.

1:18:26

Speaker 6: All right. So I'm here from the folks who are working on the accessibility piece of things today at the sprint. My name is Matsaki Reed. I'm from the CFPB like several other people who are here today. I think we've got a squad of five people here.

1:18:41

Speaker 8: We've all been working really hard at our government agency on accessibility and trying to improve our pages, our sites, our products on it.

1:18:50

Speaker 6: And so some of us came here and said, hey, we see that there's a tag on the Wagtail repo about it. We hear that they're going to be looking at accessibility things. Let's see if we can try and see if we can contribute back to Wagtail about that. So we have here the issues that were already up on the

1:19:10

Speaker 8: site about that on GitHub about that including one particular one that I started looking at. I know a few of the other folks started looking at other things as well.

1:19:19

Speaker 6: But this one was about color combinations in the admin not validating against WCAG A. For folks who don't know that, this is talking about the web content accessibility guidelines that are supposed to be basic and being used. across the entire industry internationally

1:19:36

Speaker 8: in order to comply with um how people use the site. It doesn't matter if they're blind, if they're low vision, if they're hearing impaired, if they have dyslexia, if they are epileptic, all of those can

1:19:48

Speaker 6: components or all get built into these guidelines that are here in order to try and make the web more useful for people no matter sort of where they stand. It's also something that comes up for us as a government agency because it's something that we try to adhere to. It's also part of something called Section 508 guidelines. I think the woman from Colombia mentioned yesterday that we are legally required in order to adhere to.

1:20:11

Speaker 8: So there's a bunch of things that are going on in here

1:20:14

Speaker 6: where there's color combinations not validating. things like the white text on teal is less readable to the point that it might be unreadable for some people. So there's certain rules around the like contrast ratios that we can go ahead and put in place to make sure that things are more useful for people across the board.

1:20:34

Speaker 8: And so that's one of the things I wanted to look at.

1:20:36

Speaker 6: There's a lot of things in this issue.

1:20:37

Speaker 8: I figured that I can just tackle a few basic things. to start with.

1:20:42

Speaker 6: So here is my copy of the admin. The resolution is really off on this right now. I wish I could fix it. Where this is the way that the admin is basically when you go ahead and set up your new site right now with Wagnum Wagtail 2. 0. And it's pretty hard to read, even if it was at a normal resolution. It was kind of hard for me to see the light on the teal that's there. And it's that sort of wagtail teal is there. I've already done that. Do I have to do it some more? Oh okay. Let me do it on the I'll do it on every tab, every time I get to a new tab. Okay. So this is kind of like the default that I have on there. It's hard to read the white on the teal. It's hard to also read the teal on sort of that like light gray

1:21:29

Speaker 6: vibe like panel place that's here. And I went through one of the things that we've used at the CFPB as we've gone through and started like really auditing our sites for accessibility is a web extension called WAVE. And bear with me while I make it big enough for you to read it. It's basically a web extension that you can run in either Chrome or Firefox on any web page you have, whether it's something that's out in production somewhere or if it's on your local host on your own computer. So you can check things before you actually push them out to check and see how compliant it is for these general guidelines. And here's the example of just where it is on the Chrome site. You just go ahead, you add it to Chrome, and then you have it in your browser.

1:22:16

Speaker 6: And so if I go back to the dashboard and I have this extension here And I click on it and open it, it says right now, based on my dashboard that I have here, where I have four pages, basically, that I have one error on the page, so a straight up error saying that you're failing across. And there's also 19 contrast errors. And right now for the purposes of this, I'm really interested in the contrast errors. So I'm going to go to the contrast tab and start clicking around to see some of the things they have there. They have things in the sidebar and the side panel. And then they have stuff here like up here, the Welcome to My Site, Wagtail CMS. The white on the teal, yep, it's not accessible. It is failing across the board for every single thing that you can fail when it comes to color contrast.

1:23:04

Speaker 6: So um it says right now that it's the ratio is two point five eight. I believe the ratio is supposed to be five. 4. 5. I can't remember if that's the exact number then, but it's basically that. You can go through, you can click and see the different things that are in place for these various things. So I started digging into this. And I actually ended up sub talking to a bunch of people here about the actual issue that I released. I know there was a PR that someone had tried to submit. But it was changing a bunch of colors in the brand palette and so people were nervous about that because it's changing like the basic feelings of white tail. But at the same time, when I look at what we're doing to CFPB and I look at what our color contrast things are right now

1:23:50

Speaker 6: for our site that we have Based on like a page that has 50 different um page like page items on it, so it's all that many different links, we're coming back with every single page having 370 different contrast errors. That's something where it's like if you're trying to get your software out so people can actually really use it, go ahead and let's take a look at how to fix it. So over the course of this morning I went through and I was looking at the Wagtail style guide, went ahead and installed that app in. I will note I am a UX designer, um used to be a front-end developer. I don't really develop now at all. So this is the first time I touched anything Python at all in 2018. I guess I'm here at Wagtail, so I have to touch a little bit of Python in order to install the app into my settings.

1:24:38

Speaker 6: Went and explored that, talked with some people on Slack. Thank you to Tim. and Tom for being very helpful and giving me some insight into the reasons why I should be considering various things as I'm looking at the PR. Thank you also to the other folks who are working with me on the example accessibility group um Rachel and Naomi and also Kat and Scott for this as well. And we started going through and I'm gonna see if I can Load right now. You can see that right now it says that of all these things there are set 19 different errors that are basically coming up on this page. I'm gonna disable that. I'm gonna go to my terminal which again I can't see very well

1:25:24

Speaker 6: and I'm gonna switch to the Uh branch I had where I've gone through and submitted a bunch of new things in order to make some slight changes. And then I'll redo the run server to pull this back up. I'll do a refresh. So this is the way the site currently looks right now if you ever pull up anything in Wagtail 2. 1 And did it not? Hard refresh. These are the suggested changes that I've gone through to the site.

1:26:10

Speaker 6: Still feels like Wagtail. then we think. It's still using the brand colors and various things like that. It's just going a little bit darker and increasing the font sizes on some of them a little bit in order to try and bring it um into greater compliance. And now when you Run it. The contrast errors have gone down. You don't have any errors at all now in this top section, which is the really the section that I was focused on for a PR that I've put up And that PR is up right now. So you can go through and you can see it. I went through and kind of explained what was going on, like the numbers that I was trying to go for and the reasons why I was changing it, and basically just staying within the colors that already were in the palette.

1:26:59

Speaker 6: Just like shifted a little bit darker. I did have to end up going even darker at one point because there just it there wasn't any colors that were left in the palette. in there and I also changed one line to be large enough to count as large text so that we could still keep it within our same color scheme there. So uh thanks again to everyone who's been very helpful. This has been a fantastic conference for this, and this is my first contribution to Wagtail. So now it's up.

Note: We understand that names change, people change, and bodies change. We respect each individual's journey and privacy. If you have any concerns about a video or need us to remove content, please don't hesitate to contact us. We will handle your request with care and promptly address any issues.

More videos from Wagtail Space US