Draw a Crowd
CC Attribution - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this
Martin, Brittany
Contextual Camouflage is an open-source gallery art installation built in RoR that guides visitors to anonymously report mental health disorders that affect themselves or their relationships. After users submit a disorder, they have the option to include anecdotes and demographic data for intervention researchers. The data is molded into an interactive real-time display using ActionCable. Come see how code can double as art and an educational tool.
 Hello everyone. We have made it halfway through his Rails comps, so that's really exciting. I want to personally thank you for attending my talk today, Draw Crowd, the contextual camouflage story. Today I'm going to 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, Elsief 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 OK. If that seems cheesy, then you're going to have to deal with it. The last thing that I want to tell you about myself is that I am one of the 5x5 Ruby on Rails podcast co-hosts. It's a real thrill where I'm getting to interview my Ruby heroes and actually Ben Shippy 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 guests. 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 kind of tricked you guys because we're actually going to be putting our arts mocks on and we're going to be getting into class. We're going to be going through three different levels and learning how contextual camouflage works and how we want to bring it more into the community. So Art 100, Art History. Contextual camouflage was created at Steel City Code Fest 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 Code Fest 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 Code Fest, I knew that I needed 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 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 3-5% of violent acts can actually be attributed to mental health. And in 2013, the U.S. 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 is 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 going to know the motivations that are driving them and then we weren't going to build an application that was going to suit their needs. We started off with a survey and got some really great responses and from that, our UI UX team built a series of personas that I'm going to 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 going to 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 up 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 going to 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. John wants to be able to bring his friends a 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. 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 going to 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. 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. As we had these user personas, we were then able to start working on some high res mockups. This is the landing page for contextual camouflage. On the right hand side, you're going to see a map. This map is going to 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 going to 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 going to 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 the hackathon. You might be hasty or if you're code just to get something deployed out there. So we started over. We narrowed down this 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 going to move on to Art 200 digital media. But first, a love story. This is my husband Jeff and yes, he is reading a sports omnic from Back to the Future at our wedding. He is an 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 want to tell you today. As I mentioned, I'm very much a back end 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 going to be doing Steel City CodeFest 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 going to get into the nitty-gritty tack 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 going to 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 a 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 can 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 the 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, implemented an SSL certificate to make sure that we have a clear communication between the browser and the website. And then also, the user is not able to submit to the application unless they're actually geo-located to the installation itself. We have a certain radius around the installation and so they can't be across the country in trying to send fake data to us. It really has to be someone who is 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 want to 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. It's actually one of my favorite things to do when I spin up a new Rails application. In this case, as we were designing the database schema, we really needed to decide what object was going to 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 had a correct connection to everything. 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 want to get it out to technical and non-technical folks alike. 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 want to make it very clear that contextual camouflage is not a hosted sass. 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 going to 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 going to be auto-rotated on the resource page and then you're going to share your demographic data. As soon as you submit that submission, you're going to see it's going to 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 want to 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 want to give it some more animation and make it more interactive for the art installation. Okay, so we have graduated from R200 and we are going to move on to our final level, R300. And this is where we really learn how we can mold hardware, technology, and the real world. So I'm going to give you a little bit of background on the cultural district and the Pittsburgh Cultural Trust. So the Pittsburgh Cultural Trust is a non-profit's art store in the J.S. soon 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 approached 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 non-profit 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 the 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 going to 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 going to be doing during the gallery crawl is we have found storytellers that every 15 minutes will 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 continue 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 want to produce really thorough documentation, both technical and non-technical. We want to 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 Pis and ship the amount of 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 going to affect people in your life and that you're really excited about because that tenacity is what's going to get you working on it on your free time. So she's going to 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 going to 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 want to 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.
 Hello everyone. We have made it halfway through his Rails comps, so that's really exciting.  I want to personally thank you for attending my talk today, Draw Crowd, the contextual camouflage  story. Today I'm going to 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, Elsief 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 OK. If that seems cheesy, then you're  going to have to deal with it. The last thing that I want to tell you about myself is that  I am one of the 5x5 Ruby on Rails podcast co-hosts. It's a real thrill where I'm getting  to interview my Ruby heroes and actually Ben Shippy 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 guests. 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 kind of tricked you guys because we're actually going  to be putting our arts mocks on and we're going to be getting into class. We're going  to be going through three different levels and learning how contextual camouflage works  and how we want to bring it more into the community. So Art 100, Art History. Contextual  camouflage was created at Steel City Code Fest 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 Code Fest 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 Code Fest, I knew that I needed 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 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 3-5% of violent acts can actually be attributed to mental health. And in 2013, the  U.S. 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 is 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 going to know the motivations  that are driving them and then we weren't going to build an application that was going  to suit their needs. We started off with a survey and got some really great responses  and from that, our UI UX team built a series of personas that I'm going to 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 going to 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 up 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 going to 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. John wants to be able to bring his friends  a 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. 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 going  to 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. 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. As we had these user personas, we were then able to start working on some high  res mockups. This is the landing page for contextual camouflage. On the right hand side,  you're going to see a map. This map is going to 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 going to 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 going to 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 the hackathon. You might be hasty or if you're  code just to get something deployed out there. So we started over. We narrowed down this  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 going  to move on to Art 200 digital media. But first, a love story. This is my husband Jeff and  yes, he is reading a sports omnic from Back to the Future at our wedding. He is an 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 want to tell you today. As I mentioned, I'm very much  a back end 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 going to be doing Steel City CodeFest 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 going to get into the nitty-gritty  tack 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  going to 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 a 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 can 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 the 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, implemented an SSL certificate to make sure that we have  a clear communication between the browser and the website. And then also, the user  is not able to submit to the application unless they're actually geo-located to the installation  itself. We have a certain radius around the installation and so they can't be across the  country in trying to send fake data to us. It really has to be someone who is 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 want to 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. It's actually one  of my favorite things to do when I spin up a new Rails application. In this case, as  we were designing the database schema, we really needed to decide what object was going  to 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 had a correct connection to everything.  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 want to get it out to technical and non-technical  folks alike. 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 want to make it very clear that  contextual camouflage is not a hosted sass. 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 going to 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 going to be auto-rotated on the resource  page and then you're going to share your demographic data. As soon as you submit that submission,  you're going to see it's going to 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 want to 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 want to  give it some more animation and make it more interactive for the art installation.  Okay, so we have graduated from R200 and we are going to move on to our final level,  R300. And this is where we really learn how we can mold hardware, technology, and the  real world. So I'm going to give you a little bit of background on the cultural district  and the Pittsburgh Cultural Trust. So the Pittsburgh Cultural Trust is a non-profit's  art store in the J.S. soon 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 approached 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 non-profit 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 the 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 going to 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 going to be  doing during the gallery crawl is we have found storytellers that every 15 minutes will  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 continue 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 want to produce really thorough documentation, both technical and  non-technical. We want to 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 Pis and ship the  amount of 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 going to affect  people in your life and that you're really excited about because that tenacity is what's  going to get you working on it on your free time. So she's going to 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 going to 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 want to 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.
Draw_a_Crowd_0_155.png Draw_a_Crowd_156_287.png Draw_a_Crowd_288_1751.png Draw_a_Crowd_1752_2099.png Draw_a_Crowd_2100_2747.png Draw_a_Crowd_2748_4019.png Draw_a_Crowd_4020_4679.png Draw_a_Crowd_4680_5087.png Draw_a_Crowd_5088_5339.png Draw_a_Crowd_5340_6719.png Draw_a_Crowd_6720_7475.png Draw_a_Crowd_7476_8399.png Draw_a_Crowd_8400_9155.png Draw_a_Crowd_9156_9839.png Draw_a_Crowd_9840_10355.png Draw_a_Crowd_10356_11135.png Draw_a_Crowd_11136_11675.png Draw_a_Crowd_11676_12131.png Draw_a_Crowd_12132_12575.png Draw_a_Crowd_12576_14027.png Draw_a_Crowd_14028_15179.png Draw_a_Crowd_15180_15887.png Draw_a_Crowd_15888_16019.png Draw_a_Crowd_16020_16583.png Draw_a_Crowd_16584_16955.png Draw_a_Crowd_16956_18011.png Draw_a_Crowd_18012_18407.png Draw_a_Crowd_18408_18575.png Draw_a_Crowd_18576_18887.png Draw_a_Crowd_18888_19091.png Draw_a_Crowd_19092_21071.png Draw_a_Crowd_21072_21683.png Draw_a_Crowd_21684_22931.png Draw_a_Crowd_22932_23483.png Draw_a_Crowd_23484_24227.png Draw_a_Crowd_24228_25679.png Draw_a_Crowd_25680_27791.png Draw_a_Crowd_27792_28799.png Draw_a_Crowd_28800_29639.png Draw_a_Crowd_29640_31259.png Draw_a_Crowd_31260_32219.png Draw_a_Crowd_32220_32531.png Draw_a_Crowd_32532_34055.png Draw_a_Crowd_34056_34895.png Draw_a_Crowd_34896_37703.png Draw_a_Crowd_37704_38963.png Draw_a_Crowd_38964_39827.png Draw_a_Crowd_39828_42515.png Draw_a_Crowd_42516_43391.png Draw_a_Crowd_43392_43523.png Draw_a_Crowd_43524_43571.png Draw_a_Crowd_43572_43639.png