00:00:11
Hello everyone, we have made it halfway through RailsConf, so that's really exciting. I want to personally thank you for attending my talk today, "Draw a Crowd: The Contextual Camouflage Story."
00:00:18
Today I'm going to detail 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 RailsConf 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.
00:00:35
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 the sponsor booths, got the stamps, and even gave me her socks so that I don't have to. And third, both of my bosses are sitting in the audience right now, so I really love my job.
00:00:50
As theater people, we wanted to introduce you to the city and make you feel as welcome as possible. Currently, this display is down the street in the theater district, welcoming you to Pittsburgh. When I'm not programming, my alter ego is Norma Skates, a play on Psycho's famous mother, Norma Bates. I play as a referee for 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 and programming would become the pillars of my self-confidence.
00:01:15
So much so that I actually have a dream of playing a roller derby bout of just all Ruby-themed names. I decided to create some names that you are welcome to steal: 'Rack Metal,' 'Unholy Hash Merge Conflict'—it's a personal favorite of mine, and it was actually my roller derby name—and then 'Brutal Boolean.' So feel free to steal those! You all have to have a dream.
00:01:37
I often do not share the reason behind my roller derby number 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 five co-hosts of the 5 by 5 Ruby on Rails podcast. It's a real thrill getting to interview my Ruby heroes.
00:01:58
Actually, Ben Orenstein's episode will be 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, I would love to get feedback from you because I'm always looking for interesting topics and guests.
00:02:06
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 experiences about mental health, whether or not it affects themselves or their relationships.
00:02:14
Now I've kind of tricked you guys because we're actually going to be putting on our art smocks and we're going to be getting into class. We're going to go through three different levels and learn how contextual camouflage works and how we want to bring it more into the community.
00:02:32
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.
00:02:44
What I really love about Code Fest is that because it's a week-long event, 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 to make sure that you're building something solid.
00:03:01
I knew that I wanted to participate in Steel City Code Fest, so I knew that I needed to assemble the Avengers. Two of them are actually in this room today. We had three Ruby developers, two front-end developers, and two UI/UX designers. As a former product manager, I ended up taking the lead, creating tickets and assigning them.
00:03:21
When it came to choosing our nonprofit partner, it became really clear that we wanted to work with McCoy Creative. Helmed by Jason McCoy, it is a creative agency based in Pittsburgh, Pennsylvania. Jason had a clear vision of what he wanted contextual camouflage to be, and he was very responsive throughout the week. If we had questions or needed feedback from him, he was ready to go.
00:03:39
Jason is incredibly tech-savvy, with a great vision of what he wanted to build, and he also had a great vision of how we could scale it up to as many locations as possible. It was 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.
00:03:56
Currently, one in five Americans 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 issues. And in 2013, the U.S. spent $201 billion on mental health conditions, making it the costliest medical condition in the country.
00:04:21
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 treat him correctly and empower him to be a great member of society.
00:04:43
As we decided to choose this project, I really kept Tyler in mind. As good developers, we want to code right away, but before we did, we knew we needed to get to know our users. Without knowing our users, we wouldn't know the motivations that are driving them, and then we wouldn't build an application that suits their needs.
00:05:00
We started off with a survey and got some really great responses from that. Our UI/UX team built a series of personas that I'm going to go over right now. Meet Brooke: she suffers from anxiety and isn't seeking any treatment at the moment.
00:05:21
She was excited about going to college because it was going to be her chance to start anew. Now that she's in college, her grades are slipping because she's not seeking 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.
00:05:41
Next, we have Jason McCoy, the head of McCoy Creative. He is both a graphic illustrator and a designer. His goal for the project is to get contextual camouflage out to the public so he can iterate on it and work with researchers who want to send anonymous user data to justify grants in the future.
00:05:57
This is Michael, a neighbor living in the installation location. He loves his community and understands that mental health is important, but he doesn’t know how to help. He looks to contextual camouflage as a meeting ground to identify those who need help and to help himself.
00:06:17
This is John. He has a loved one who suffers from depression, and that person has a hard time feeling alone. John wants to bring his friend to contextual camouflage so that he can prove to him that he is absolutely not alone in this world.
00:06:37
This is Pam, a researcher working with Jason. She is interested in getting involved with contextual camouflage because she works at a university and wants to justify grants with the anonymous data collected. She can prove that there is a real need for the project in the locality she is working in.
00:06:59
Lastly, this is Brandon. He is from a small town where mental health is not spoken about. His goal in this project is to potentially ruin the experience for others. While building the application, we had to implement safety and security checks to minimize Brandon's meddling.
00:07:16
As we established these user personas, we were able to start working on some high-res mock-ups. This is the landing page for contextual camouflage. On the right-hand side, there's a map, which gives a detailed view of the locality where the installation is installed.
00:07:38
The camouflaged pieces are the actual people who are submitting their experiences with certain mental conditions and it shows up in real time on the map. On the left-hand side, there's a key for those conditions and a prompt that encourages users to share their stories.
00:07:54
Another part of contextual camouflage consists of these resource pages, which provide individual information about mental conditions. When users submit their experiences, they're prompted to share an anonymous user story that ties these submissions to the respective conditions.
00:08:14
These stories are displayed on a continuous slider, allowing users to see medical information while also hearing real stories from people in their area.
00:08:31
At the end of Steel City Code Fest, we've been working hard for a week and we felt that we had a strong MVP, a great team, and a fantastic partner. So, did we win, Jonah? No, we did not win. But the important thing here is that we truly believed in what we were doing and wanted to move forward with it.
00:08:53
For version two, we decided to archive the original project, which is typically what you do after a hackathon. Instead of hastily pushing our code out there, we started over. We narrowed down to the team members who could focus on this, set a new technical vision for the application, and established a timeline for its production.
00:09:10
We graduated from Art 100 and we're now moving on to Art 200: Digital Media. But first, let me tell you a love story. This is my husband Jeff. Yes, he is reading a sports almanac from 'Back to the Future' at our wedding! He is an independent filmmaker who, along the way, picked up UI and graphic design skills.
00:09:30
Throughout versions one and two, Jeff was very helpful in providing mock-ups and assets, but this is not the love story I want to tell you today. As I mentioned, I am very much a back-end developer. I breathe database schemas, APIs, and deployments. For me, I needed a partner I could rely on and trust, and that's where Danielle Greaves comes into play.
00:09:48
Danielle is my DLP—Developer Life Partner. She excels in HTML, CSS, and JavaScript. As the front-end developer at the Pittsburgh Cultural Trust, she is my day-to-day partner. We have a unique relationship since I write mostly in Ruby and she writes mostly in JavaScript, but we review each other's code and try to understand how we implement features.
00:10:04
We make it a priority to ensure that each other’s implementations are easy to integrate, and we have quite a great working relationship. I knew that when I was going to be doing Steel City Code Fest, Danielle was a must.
00:10:21
This hidden camera captures how Danielle and I work together. She is the one in the orange tank top, sending up a branch to me on GitHub while I am the dog pulling it down and making sure that it gets deployed.
00:10:35
Now, let’s get into the nitty-gritty of how contextual camouflage works. We had a lot of technical goals going into this project. We wanted to use products that were already within our wheelhouse but also push the boundaries a bit.
00:10:50
We wanted to make sure we weren't duplicating code while also providing an opportunity for contextual camouflage to be a playground for us. It was clear that we would build this application using Ruby on Rails, as it is a framework that I love.
00:11:06
It is currently built in Ruby 2.5 and Rails 5.2. I was quite proud of using Rails 5.2 until it was released two weeks ago, so it's no longer cutting-edge, but it still feels good.
00:11:22
The reason we wanted to be on the bleeding edge with these versions is that we wanted the opportunity to contribute back to the community. If a gem we use isn't ready for these versions, we want to be able to open issues on those projects.
00:11:39
A critical part of contextual camouflage is creating an installation that is geo-located. When a user submits their geo-located coordinates, we can match them to the installation they are currently at.
00:11:54
Initially, we went with IP addresses since it was easy to implement, but we quickly discovered that IP addresses can be inaccurate or can change. We needed a more reliable method.
00:12:13
So we refactored the application to use the HTML5 Geolocation API. Although it's very accurate—scarily accurate—even slow to load, we have a solution for that in the pipeline. We needed a really beautiful, interactive map for contextual camouflage that displayed real-time updates.
00:12:35
We decided to use Leaflet as the mapping library, which is lightweight but offers every feature a developer could need. It only weighs about 38 kilobytes of JavaScript, making it simple to implement.
00:12:53
A feature we're extremely excited about is implementing Action Cable in production. If you're not familiar, Action Cable integrates WebSockets with the rest of your application, allowing for real-time features to be built in Ruby.
00:13:09
This means that when users submit their camouflage piece, the map is constantly updating to show new information without needing a hard refresh. As for styling, Danielle was very familiar with Bootstrap, but we wanted to push the design further.
00:13:26
We decided to implement the style of contextual camouflage using Materialize, which is based on Google’s material design. It was as easy to implement as Bootstrap but closely aligned with the style vision we had.
00:13:42
McCoy and the researchers needed access to the data we collected, so we decided to use a proven administration system to manage this data effectively. We chose Rails Admin, which is incredibly easy to implement.
00:13:58
We also needed to implement an authentication layer to restrict access to this data. We used the widely recognized Devise framework to keep our application secure.
00:14:17
We wanted to ensure that contextual camouflage was a safe place for users to share their data. We prevent users from double submitting any forms on the site by using cookies.
00:14:34
After their first submission, we remember that cookie for 24 hours, so if they try to submit again, it looks like it was successful, but the data will not be recorded.
00:14:52
Additionally, thanks to Let's Encrypt, we implemented an SSL certificate to ensure secure communication between the browser and our website.
00:15:10
Furthermore, users cannot submit to the application unless they are physically located near the installation. We maintain a certain radius around it to prevent submissions from users who are too far away.
00:15:27
Regarding project management, I had never used GitHub projects until now. This offering provides a free, Trello-like experience tied to the repository we are using. Since we host code on GitHub, we thought projects would be a straightforward tool for collaboration.
00:15:44
We had a project board for version 1 of the project and could archive that once we started version 2. As we onboard new contributors, they can see all the available issues and assign them to themselves.
00:16:01
I personally enjoy designing database schemas; it's one of my favorite hobbies when I create a new Rails application. As we worked on the database schema for this project, we needed to identify which objects we were focusing on.
00:16:19
In this case, submissions were the primary object that we wanted to establish connections for. All submissions are tied to installations, and for those submissions to be valid, they need to be geo-located to the respective installation.
00:16:37
Each installation also needs to be actively running for submissions to count, and underneath the submission model, there is optional anecdote data that a user can supply, as well as demographic data for researchers.
00:16:55
In terms of hosting, while I am an AWS certified developer, I decided to go with Heroku for this project. Our goal is to make it accessible for both technical and non-technical folks alike.
00:17:12
We wanted to make it easy for users to deploy their own version of Contextual Camouflage and own the data they collect. For us, Heroku is convenient, allowing us to autoscale during high traffic while also being user-friendly.
00:17:29
We've successfully shipped the production version, where users are prompted to share their geolocation data. They can select if it's them or someone else affected by a condition.
00:17:45
Users can choose the condition from a list, share their optional story that will be auto-rotated on the resource page, and input their demographic data. Once they submit, the map auto-scrolls to their camouflage piece, which appears in real time.
00:18:02
We have future plans for contextual camouflage, including implementing HTTP early hints. This new HTTP status code allows our application to send links to assets you want loaded early.
00:18:16
As previously mentioned, the JavaScript library for geolocation can be slow to load, so our goal is to preload that library as soon as the user visits the site.
00:18:37
Currently, Action Cable is continuously polling the backend to create camouflage pieces on the map. We want to implement an engaging user experience where users feel excited when they see their contribution appear.
00:18:55
We are graduating from Art 200 and are moving on to our final level, Art 300. Here we are learning how we can mold hardware technology into the real world.
00:19:12
Let me give you a bit of background on the Pittsburgh Cultural Trust. This is a nonprofit arts organization that both Danielle and I work for. It was formed in 1984 to promote economic and cultural development in downtown Pittsburgh.
00:19:30
The Cultural District is more than just a loose collection of theaters; it spans a 14-square-block area and is 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.
00:19:49
In addition to owning and operating theaters, the Cultural Trust hosts several free festivals throughout the year. This presented us with a golden opportunity to bring our art installations to life in our town.
00:20:05
Danielle and I approached the Cultural Trust about making our installation a reality. This ended up being an interesting challenge, as we had to interact with multiple departments within our nonprofit that we had never worked with before, including finance, real estate, and event planning.
00:20:24
We soon realized that each department had its own form of communication, which felt like learning a new programming language for each interaction. After months of work, it took a lot of grit and ambition to bring our project to life.
00:20:41
I’m proud to say that Contextual Camouflage is now a gallery installation in the Cultural District, running from April 16th to April 29th. It is no coincidence that RailsConf is during this installation date—we wanted to ensure it was live during the conference.
00:20:59
We installed the installation on Monday and are very excited about it. You can see that it is a frontward-facing installation with window clings surrounding a 75-inch monitor that displays the interactive map.
00:21:16
There is a key for the conditions on the right-hand side. It is available 24/7 and is located directly in front of a bus stop. We're hoping that users will notice it while waiting for the bus, and we encourage you all to visit.
00:21:36
I pulled a few favors to clear the snow, making today a great day to go! The map shows that the convention center is in the top right corner, just a seven-minute walk away. You just need to make two turns to see it right on the street.
00:21:54
Please visit us today and let me know what you think! If you're interested in visiting with Danielle and me afterwards, come talk to us. The trust marketing team did me a huge favor by writing a wonderful blog post for visitors to Pittsburgh.
00:22:12
This post details food, drink, and events happening in the area—so I definitely recommend checking it out if you want a fun walking tour outside the conference.
00:22:32
At the end of the installation timeline, we will participate in the Trust's gallery crawl. After running for two weeks, Contextual Camouflage will be part of the trust's spring gallery crawl, showcasing downtown's vibrant art scene.
00:22:58
This event is free and draws hundreds to thousands of people downtown, and we are optimistic about gathering data from this event.
00:23:17
Danielle, Jason, and I will be decked out in camouflage, standing in front of the installation to gather real feedback from users.
00:23:29
A significant part of this experience during the gallery crawl is to make sure users feel comfortable sharing their experiences. We will have storytellers presenting every 15 minutes, sharing their experiences related to mental health.
00:23:48
From this, we hope to build a great sense of community regarding mental health and the usage of contextual camouflage.
00:24:06
We are excited about rolling it out to new locations. Several cities have reached out to us, eager to implement their versions. We have even had inquiries from other countries on how to set it up.
00:24:26
We are also interested in onboarding contributors as we gather feedback from the gallery crawl. This project is an excellent opportunity for junior developers to get involved since its structure is straightforward.
00:24:47
We intend to produce thorough documentation, both technical and non-technical, to help ease the onboarding process for contributors.
00:25:06
We're fortunate to work with McCoy Creative, who is focused on sustainability. A significant discussion in our community is about sustainable open-source projects.
00:25:24
We want contextual camouflage to be sustainable. While the software itself is free, there are costs associated with running the application, including deploying it to Raspberry Pis and shipping them to different cities.
00:25:40
In this spirit, Jason has been working on securing grants to further fund the project. These are the takeaways I want you to think about as you leave this talk.
00:25:58
First, pick projects that matter. We all have a limited amount of time in our lives, so make sure that when you choose a side project or a hackathon, you pick something that will positively impact others and that you're truly excited about.
00:26:12
Second, find your 'Danielle.' Find your developer life partner. It makes things much easier when you have someone passionate that you can collaborate with.
00:26:36
Third, identify your advantages. As I noted, the trust was a golden opportunity for us to launch Contextual Camouflage. I encourage you to consider the advantages you have, and leverage them to push your projects forward.
00:27:02
Finally, make sure to bring digital concepts into the real world. As developers, it's easy to focus exclusively on digital applications. I urge you to think about how your work can reach and affect people, especially those who might not be as tech-savvy.
00:27:27
I'd like to invite you to get involved with Contextual Camouflage. This is the link to the GitHub repository where you can explore and contribute. You can come speak to us afterward, and you can reach us on Twitter as well.
00:27:57
I want to end on a note about impostor syndrome. I have no formal education in mental health and I’m not a frequent open-source contributor; I've spent my career mentoring junior developers. When the idea of building a mental health-related open-source project surfaced, I felt intimidated.
00:28:14
But seeing the art installation that Danielle and I created published on the production sites, viewed and appreciated as artists, is an absolute thrill. You can do this too! You can create something meaningful and share it.
00:28:37
I have absolute faith in all of you. Thank you once again to the Pittsburgh Cultural Trust, McCoy Creative, Danielle, Ryan, and everyone else. Thank you for coming to my talk today!
