 We have made it halfway through his Rails comp, so that's really exciting. I wanna personally thank you for attending my talk today, Draw Crowd, the contextual camouflage story. Today I'm gonna be detailing how we took a hackathon project and turned it into an interactive art installation focused on mental health education. My name is Brittany Martin and I'm a first time Rails comp speaker, so thank you for coming. I'm currently the lead web developer for the Pittsburgh Cultural Trust, a performing arts nonprofit based here in Pittsburgh, Pennsylvania, so I had a really great commute to this conference. Now, I love my job at the Cultural Trust for three reasons. First, every day I get to write Ruby on Rails and combine that with my love of e-commerce. Second, my wonderful coworker actually went through all of the sponsor booths, got the stamps and actually gave me her socks so that I don't have to. And then third, both of my bosses are sitting in the audience right now, so really love my job. So, we're theater people, so we wanted to introduce you to the city and make you feel as welcome as possible, so this is currently displaying down the street in the theater district, welcoming you guys to Pittsburgh. When I'm not programming, my alter ego is Norma Skates, a play on Psycho's famous mother Norma Bates. I play in referee Roller Derby for the Pittsburgh East Roller Villains. Roughly a year and a half ago, I stepped onto the rink with several other women having absolutely no idea what I was doing. I couldn't skate forward, let alone hit into someone. Little did I know that Roller Derby in programming would become the pillars of my self-confidence. So much so that I actually have a dream of playing a Roller Derby bout of just all rubious, so I decided to go ahead and create some names that you were welcome to steal. Rack Metalware, Elsiff Chaos, Unholy Hash, Merge Conflict, it's a personal favorite of mine, it was actually almost really my Roller Derby name, and then Brutal Bullion, so feel free to steal, and you all have to have a dream, kids. I often do not share the reasoning behind my Roller Derby number because it's 200, but you are my people. The reason that my Roller Derby number is 200 is that when I get hit and get back up, I am status code okay. If that seems cheesy, then you're gonna have to deal with it. The last thing that I wanna tell you about myself is that I am one of the five by five Ruby on Rails podcast co-hosts. It's a real thrill ride getting to interview my Ruby heroes and actually Ben Shippey will have his episode published later today and he's speaking after me, so I definitely recommend you check out that episode. Whether or not you listen to the show or not, I would love to get feedback from you because I'm always looking for interesting topics and guess, but we are here to talk about contextual camouflage. Contextual camouflage is an open source Ruby on Rails application that prompts users to share their experience about mental health, whether or not it affects themselves or their relationships. Now, I've kinda tricked you guys because we're actually gonna be putting our arts mocks on and we're gonna be getting into class. We're gonna be going through three different levels and learning how contextual camouflage works and how we wanna bring it more into the community. So art 100, art history. Contextual camouflage was created at Steel City CodeFest 2017 based here in Pittsburgh, Pennsylvania. It is a city-wide week-long code sprint that has teams of participants partner with government agencies and nonprofits that have an idea. What I really love about CodeFest is because it's a week-long, you really get to ship a very stable MVP. You get to spend a lot of time with your nonprofit partner and they actually provide mentors along the way so that you really make sure that you're building something solid. Now, when I knew that I wanted to participate in Steel City CodeFest, I knew that I need to assemble the Avengers and two of them are actually in this room today. So we had three Ruby developers, two front-end developers and two UI UX designers. Now, as a former product manager, I ended up taking lead on creating tickets and assigning them. When it came to choosing our nonprofit partner, it became really clear that we wanted to work with McCoy Creative. McCoy Creative, helmed by Jason McCoy, is a creative agency based in Pittsburgh, Pennsylvania. Jason had a clear vision on what he wanted contextual camouflage to be. He was very responsive throughout the week, so if we had any questions or needed feedback from him, he was ready to go. And then Jason is incredibly tech savvy. He had a great vision about what he wanted to build and he had a great vision on how we could scale it up to as many locations as possible. It was also important to us as a team that we were tackling an issue at Steel City Code Fest that actually mattered to the team and we agreed unanimously that mental health truly mattered to us. Now, one in five Americans currently suffer from a mental health condition. Around 44% of adults and around 20% of kids and adolescents are not seeking the treatment that they need. Only three to 5% of violent acts can actually be attributed to mental health. And in 2013, the US spent $201 billion on mental health conditions, making it the costliest medical condition in the country. I also have a personal experience with mental health. This is my brother, Tyler, who's autistic. Growing up, it was difficult for us as a family and for Tyler because externally, he seemed the same as everyone else, but we knew that something was always a little bit different with him. Once he was diagnosed with autism, it really helped us to be able to treat him the correct way and be able to really empower him to be a great member in society. So as we decided to choose this project, I really was keeping Tyler in mind. So as good developers, you know, you want to code right away, but before we did, before we really started opening those terminals and getting to it, we knew that we needed to get to know our users. Without knowing our users, we were not gonna know the motivations that are driving them and then we weren't gonna build an application that was gonna suit their needs. We started off with a survey and got some really great responses and from that, our UIUX team built a series of personas that I'm gonna go over right now. Meet Brooke. Brooke suffers from anxiety and she's not seeking any treatment at the moment. She was really excited about going to college because it was gonna be a chance for her to start anew. Now that she's in college, her grades are slipping because she's not seeking any treatment and she feels that she can't really be herself in front of her friends. Contextual camouflage can be a solution for her to not feel alone. As I mentioned, this is Jason McCoy. He's the head of McCoy Creative. He's both a graphic illustrator and a designer. His goal of the project is that he is the original one who came with the idea of contextual camouflage but he needed to find developers in order to make it come to life. His job, his goals are basically to get contextual camouflage out there to the public so that he can iterate on it and that he is also partnered with researchers where he wants to send anonymous user data to be able to justify grants in the future. This is Michael. This is a neighbor who lives in the installation of where it's installed. Michael really loves his community and understands that mental health is important but he just doesn't know how to help and he's not really aware of what's going on. He's gonna look to contextual camouflage as a meeting ground of being able to see the people that need help and to be able to help himself. This is John. John actually has a loved one who suffers from depression and his loved one has a hard time feeling alone and whatnot and so John wants to be able to bring his friend to contextual camouflage so that he can prove to him that he is absolutely not alone in this world. This is Pam. This is the researcher that I mentioned that works with Jason and so she's very interested in getting involved with contextual camouflage because she works at a university and she wants to be able to justify grants. By using that anonymous data, she's gonna be able to prove that there is a real need for it in the locality that she's built and then lastly, this is the most difficult user for us to build and something that's definitely been addressed a lot in this conference. This is Brandon. He's from a small town where mental health was just not a thing that was spoken about. His entire goal in this project is to basically ruin the experience for others. So as we were building the application, we had to put in safety and security checks and make sure that Brandon's meddling was kept to a minimum. So as we had these user personas, we were then able to start working on some high-res mockups. So this is the landing page for contextual camouflage. On the right-hand side, you're gonna see a map. This map is gonna be a real detailed view of the locality that the installation is installed in and then the camouflage pieces are the actual people that are submitting their experience with a certain mental condition and it shows up in real time on the map. On the left-hand side, you're gonna see a key of those conditions and then the prompt to tell the user to share their story. Another part of contextual camouflage is these resource pages. These are individual pages about the condition and when the users go to submit their experience with mental health, they're gonna be able to be prompted to share an anonymous user story. Those are tied then to these conditions and are put on a continuous slider so that users can both see the medical information and then hear the real stories of the people in their area. So we reached the end of Steel City Code Fest. We've been fighting through this for a week long and we felt that we had a solid MVP, a great team and a fantastic partner. So Jonah, did we win? No, we did not win. But the important thing here is that we really believed in what we were doing and that we wanted to move forward with it. So on to version two, we decided to archive the original project, which is typically what you do outside of a hackathon. You might be hasty with your code just to get something deployed out there. So we started over. We narrowed down the team to the members that really could have the time to focus on this. We decided to set a new technical vision for how we wanted to instrument the app and then we wanted to set a real timeline. We actually set a date of when we wanted to have this application out in production and have people using it. So we've graduated from Art 100 and we're gonna move on to Art 200 digital media. But first, a love story. This is my husband, Jeff. And yes, he is reading a sports omnac from Back to the Future at our wedding. He is a independent filmmaker and along the ways he picked up UI and graphic design skills. Throughout version one and two, Jeff was really handy in giving us mockups and assets that we needed. But this is not the love story that I wanna tell you today. As I mentioned, I'm very much a backend developer. I breathe database schemas, APIs, and deployments. And so for me, I really needed to have a partner that I could rely and trust on. And that's where Danielle Greaves comes into play. Danielle is my DLP. She is my developer life partner. She is amazing with HTML, CSS, and JavaScript. So Danielle is the front end developer at the Pittsburgh Cultural Trust. She is my partner day to day and we have a very unique relationship. Because I write mostly in Ruby, she writes mostly in JavaScript, we still review each other's code and we really try to understand how each other are implementing features. One thing that we really try to do as we're building features and making sure that it's easy for each other to be able to implement the other side of a feature. So we really have a great relationship and I knew that when I was gonna be doing Steel City Code Fest that Danielle was a must. This is actually a hidden camera that I have at the office. This is pretty much how Danielle and I work. She's the guy in the orange tank top. So she is sending up a branch to me on GitHub and then I'm the dog who's pulling it down and making sure that it gets deployed. So we're gonna get into the nitty-gritty tech of how contextual camouflage works. For us, we had a lot of technical goals going into this. We wanted to use products that we were in our original wheelhouse, but we wanted to stretch the boundaries a little bit. We wanted to use things and make sure that we weren't duplicating code, but we wanted the opportunity for contextual camouflage to be a playground for us. We wanted to try out libraries that we want to use in our day-to-day lives but haven't had a chance. So for us, it was very obvious that we were gonna build this application in Ruby on Rails since that's what I love so much. It's currently built in Ruby 2.5 and Rails 5.2. I was quite proud of the Rails 5.2 until it got released two weeks ago, so that's no longer as bleeding edge, but I feel pretty good about it. The reason that we wanted to make sure that we were on the bleeding edge with these versions is that we wanted to be able to contribute back. So if we used the gem and it wasn't ready for these versions, we wanted to be able to open issues on those projects and contribute back to the community. A very important part of contextual camouflage is creating an installation that is geolocated to a locality. When a user submits their geolocated coordinates, we then use that to match them to the installation that they're currently at. So in this case, we use Geocoder, which is a very proven Ruby geographic library. Originally, we went with IP addresses because it was very easy to implement, but we quickly discovered that IP addresses can be wrong, can be changed, it couldn't indicate that a user is across the city when they're really not. So we ended up refactoring the application before we went live to use the HTML5 geolocation API. While it's very accurate, it's scarily accurate, it can be really slow to load, and we have a solution for that in the pipeline. We knew that we needed to have a really beautiful interactive map for contextual camouflage that showed in real time the locality that the installation was installed in, so we decided to go with leaflet. If you haven't used leaflet before, I highly recommend it. It basically has every feature that a developer could need in a mapping library. Weighing in about 38 kilobytes of JavaScript, it was very simple for us to implement. So this is a feature of contextual camouflage that we are extremely excited about, and that was implementing Action Cable in production. It was a huge win for us. If you're not familiar, Action Cable is a service that integrates WebSockets with the rest of your application. It allows for real-time features to be written in Ruby, and it's pretty much in the same style and form as you would anticipate. It's a full-stack offering that basically allows a client-side JavaScript framework to interact with a Ruby framework. So this really proves that Brittany and Danielle can work well together. For us, this means that when the users submit their camouflage piece onto the map, the map is continuously polling, looking for new information so that when you're looking at that art installation, the contextual camouflage piece just appears magically onto the map. No hard refresh is needed. When it came to the style vision, Danielle was very familiar with using Bootstrap, but we wanted to push the design a little bit more, and so we decided to implement the style of contextual camouflage using Materialize, which is based on the material designed by Google. It was as easy to implement as Bootstrap, but ended up being much closer to the style vision that contextual camouflage had set out. Now, as I mentioned, McCoy and both researchers have a need to be able to access this data, and so we wanted to use a very proven administration system to be able to keep and lock up that data. So we went with Rails Admin, which is incredibly easy to implement. If you ever need to set up an administrative interface, I highly recommend this gem. Now, for us, we needed to put an authentication layer in front of it. We didn't want just anybody getting this data, and so we used the very proven device framework. Speaking of security, we wanted to make sure that contextual camouflage was a safe place for users and data. As I mentioned, we really wanted to prevent trolling on this application, so we don't allow users to double submit anything on the site. So we cookie the users. After they submit their first time, we remember that cookie for 24 hours, so if they continue to submit, it just basically won't get saved. To them, it will look like it was successful, but to us, we're keeping our data clean. Now, we also, thanks to Let's Encrypt, I implemented an SSL certificate to make sure that we have secure communication between the browser and the website, and then also, the user is not able to submit to the application unless they're actually geolocated to the installation itself. We have a certain radius around the installation, and so they can't be across the country and trying to send fake data to us. It really has to be someone who's near that location. In terms of project management, I had never used GitHub Projects, which is a fairly new feature at GitHub. This basically gives you a free Trello-like experience that's tied to the repository that you're using. We're using GitHub in order to host the code, and we thought that projects wouldn't be an easy thing for us to be able to use. I really liked it because we had a project board for the version one of the project, and then we were able to archive that and then start over with project two. What's cool about this, too, is as we onboard new contributors, we wanna be able to invite them on to the project board. They won't need an invite, but they can see all the available issues and be able to sign them to themselves. I don't know about you, but I really like designing database schema, and it's actually one of my favorite things to do when I spin up a new Rails application. So in this case, as we were designing the database schema, we really needed to decide what object was gonna be the one that we were most concerned about. In this case, submission really ended up being the object that we really wanted to make sure it had a correct connection to everything. So in this case, you can see that submission is in the middle, and then all submissions are tied to an installation. In order for those submissions to be valid, they need to be geolocated to that installation, and the installation needs to be active. Underneath the submission is that optional anecdote data that a user can supply, and then that optional demographic data that they can supply for the researchers. Really made a clean database schema, and should be easy for people to understand. In terms of hosting, while I am an AWS certified developer, I decided to go with Heroku for the hosting. Our goal for this project is we wanna get it out to technical and non-technical folks alike. And so it was important for us to be able to add a button into the readme and have users just be able to deploy the project to Heroku. I wanna make it very clear that contextual camouflage is not a hosted SaaS. The idea behind the project is that you're able to deploy your own version of contextual camouflage and own the data that you collect. So for us, Heroku was really simple. It's gonna be able to help us auto-scale when we have a lot of traffic, but otherwise just working with Heroku was quite nice. So we have shipped the production version of the site. You can see here it's prompting the user to share their geolocation data. You get the prompt of whether or not it's you or yourself who is affected by a condition. You choose the condition from a list of bullets. This is where you can share that optional story that's gonna be auto-rotated on the resource page, and then you're gonna share your demographic data. As soon as you submit that submission, you're gonna see it's gonna auto-scroll up to the map where that camouflage piece now appears. So we have some future plans for contextual camouflage in terms of tech goals. As Eileen codes and Tenderlove worked on for Rails 5.2 was HTTP early hints. So early hints is a new HTTP status code that allows your application to send links to assets you would like to load early. As I mentioned, the geolocation JavaScript library can be slow to load, and so our goal is to be able to preload that library as soon as the user hits the site. And another feature that we're excited to do, so currently, Action Cable is continuously pulling on the back end to be able to produce those camouflage pieces onto that map. But we wanna produce something like a juicy effect. So we want users to get really excited when they hit submit and then they see their camouflage piece appear. And so we wanna give it some more animation and make it more interactive for the art installation. Okay, so we have graduated from Art 200 and we are gonna move on to our final level, Art 300. And this is where we really learn how we can mold hardware, technology, and the real world. So I'm gonna give you a little bit of background on the cultural district and the Pittsburgh Cultural Trust. So the Pittsburgh Cultural Trust is a non-profits arts organization that both Danielle and I work for. It was formed in 1984 to promote economic and cultural development in downtown Pittsburgh. Now, the cultural district is more than just a loose collection of theaters. It's a 14 square block area and it's a destination for theater goers, art lovers, shoppers, foodies, and more. This diversity is made possible by the numerous businesses that call the district home. So not only owning and operating theaters, the Cultural Trust also does several free festivals a year. So for us, this was a golden opportunity for us. We already worked for an arts, performing arts organization. What connections could we make? How could we bring our art installation to life in our town? And so for us, Danielle and I approach the Cultural Trust about making our installation real and this ended up being a really interesting challenge for us. Danielle and I are used to being able to write code and deploy a feature pretty much autonomously with our department. But in this case, we ended up having to interact with a lot of different departments within our nonprofit that we've never interacted with before. Finance, real estate, event planning, and we learned that they all have different forms of communication. It was almost like learning a different programming language for every single department that we needed to interact with. So we approached them months ago about being able to put this installation in and it really took a lot of grit and ambition in order to bring it to life. But we can't thank the Cultural Trust enough for helping us. So I'm proud to say that contextual camouflage is now a gallery installation in the Cultural District and it's running from April 16th to April 29th. It is no coincidence that RailsConf is during this installation date because we wanted to make sure that it was live when the conference was here. And so we installed the installation on Monday and we're super excited about it. You can see here that it is a frontward-facing installation. It's got window clings surrounding a 75-inch monitor that shows that interactive map. We have a key of the conditions on the right-hand side. It's available 24-7 and it's located right in front of a bus stop. We're really hoping that what will happen is that users will be waiting for the bus, they'll turn to look at it and then they'll start interacting with it. And we really encourage you that you visit us today. So I called in some favors and I got rid of the snow. So this is definitely a good day to go. You can see here on this map the convention center is on the top right. It's only a seven-minute walk. You just basically need to make two turns and you will see it right on the street. So please visit us today and definitely let me know what you think. And if you're interested in visiting with Danielle and I, afterwards come talk to us. The trust marketing team also did me a huge favor and they actually wrote a really wonderful blog post for people that are visiting Pittsburgh. It details food, drink, why are weather so crazy. So I definitely recommend that if you're interested in getting away from the conference for a little bit and you want to visit our installation, definitely check out this blog post too because you can really make a fun walking tour out of it. Now at the very end of the installation timeline is gonna be the Trust Gallery Crawl. So after running for two weeks, contextual camouflage will be part of the Trust Spring Gallery Crawl. The crawl is a free quarterly multi-venue showcase of downtown's dynamic art and entertainment scene. Hundreds up to thousands of people come downtown. So we're banking on getting the majority of our data from this actual event. It's exciting for us. Danielle, Jason and I will be decked out in camouflage and we'll be standing in front of the installation, getting users real feedback and probably using GitHub projects to file issues as we talk to users. And a big part of that gallery crawl experience is that we want to make sure that our users feel comfortable in sharing their information. And so what we're gonna be doing during the gallery crawl is we have found storytellers that every 15 minutes we'll be standing in front of the installation telling their story. From this, we really hope to build a great sense of community. So for the future of contextual camouflage, we're hoping to roll it out to new locations. We have had several cities reach out to us asking when they can roll it out for themselves. We've actually had people from other countries ask how they can do it. So we're really excited about getting it out there and we're continuing to work on it. We're also interested in onboarding contributors to it. So as we get all those issues from the gallery crawl we'll be excited to bring new people in. I think this is actually a really excellent project for junior developers to get involved in because the app, as of now, is pretty simple and is definitely something that Danielle and I would love to guide people on. And then also we wanna produce really thorough documentation, both technical and non-technical. We wanna make it very easy for technical users to get onboarded into the application and start working on it. And on the flip side, we want non-technical users to feel comfortable with deploying it and getting it live in their city. We're really lucky that we're working with McCoy Creative because he's really thinking about sustainability. A huge conversation that's going on in our community is the idea of sustainable open source. What do we need to do to get there? And we want contextual camouflage to be sustainable. While the software itself is free there's a lot of costs that go into running the application and including we want to eventually load the application onto raspberry pies and ship them out to cities. So in that vein, Jason's been having a lot of communications with different profit sources so that we can locate grants in order to fund the project further. So these are the takeaways that I want you to think about as you leave this talk. Pick projects that matter. We all have a limited amount of time in our lives. So make sure that when you locate a side project, do a hackathon, really pick a project that is gonna affect people in your life and that you're really excited about because that tenacity is what's gonna get you working on it on your free time. So she's gonna blush over this but find your Danielle. Find your developer life partner. It makes things so much easier when you have someone who's really passionate about what you're working on that you can bounce ideas off of and someone that you just know is gonna dive into any kind of crazy scheme that you come up with. Third, identify your advantages. As I noted, the trust really was a golden opportunity for us to get contextual camouflage off the ground and we are lucky but I want to implore you to think about the advantages that you have in your life and be able to use those to push your open source projects forward. And last, make sure to bring digital into the real world. It can be really easy as developers to only think about digital, only think about websites and mobile but think about how you can bring things into a world where people might not be as tech savvy. And so I implore you to think about that as well. If you're interested in getting involved with contextual camouflage and I will definitely tweet this out, this is the link to the GitHub repository. You can visit contextual camouflage now or you can definitely come speak to us. We'll be available afterwards and you can reach us on Twitter as well. The last note that I wanna leave you with is a note about imposter syndrome. I have no formal education and mental health. I'm also not an avid open source contributor. I've spent a lot of my development career mentoring junior developers as opposed to working on open source contributions. So when it came to the idea of building a mental health open source project I felt really intimidated. But I'll tell you what, seeing the art installation that Danielle and I made to be published on the production websites that we work on day to day and be seen as an exhibit as artists is just an absolute thrill and something that I would never take away. So you can do this too. You can build something like this and you can speak about it. And so I have absolute faith in all of you. I cannot thank the Pittsburgh Cultural Trust enough, McCoy Creative, Danielle, Ryan, everyone. Thank you so much and thank you for coming to my talk today.