Human rights, and Bar Charts.
Only a few short weeks ago, I entered the final stretch of my Lambda School journey by beginning what they call labs. If you aren’t familiar with the school, the best way to describe it is a trade-school type of business. However, instead of learning mechanic work or plumbing, we learn how to code! Now Labs is the final part of the curriculum that students participate in. In Labs, students get some hands-on practice really applying their skills over the course of a few short weeks.
In my case, I had the pleasure of working on a project called “Human Rights First”; a website that allows users to see visual representations of over-policing and recorded uses of force by police. To do this, the site displays a map of the united states, and has visual nodes and clusters of reported uses of force. There was also a line-chart, which is where my team spent a lot of our time sprucing up. To be frank with you, I was less than excited to be going into such a project. Imposter syndrome was real near the beginning, but thankfully my team felt the same way so I wasn’t alone in that struggle. Despite the fear, we knew we were in the last stretch and continued to march on. This started with the simple process of deciding what we could add to enhance the user experience.
It turns out it wasn’t that simple.
When thinking about how a user might interact with a product, you get to play pretend and think of all the stuff you would like to do. Maybe you want to share reported instances to social media? Maybe you want to submit your own report? How do we go about authenticating that? Require an associated article! Okay, now what technology can we use to make sure that the article field was filled in with an actual link?
Oh wait, what if they just submit a URL that isn’t associated with the report? Maybe allow users to report submissions that are false or do not have an associated article?
Wait a minute, why would a user be worried about how to authenticate a URL? I somehow went from thinking like a user to thinking like a dev again! But that’s not a bad thing, far from it! It was a healthy back and forth of question and answer, and it was pretty much that process that let us focus in on facets of the project we wanted to work on.
For this Trello card above, you can see the breakdown of our plan to tackle ‘implementing a filter feature for the graph’. You’ll see some tech jargon, but it boils down to this: The graph can only hide and show data, we need to add more ways to change how the data appears. It’s this process of pretending to be a user, to naturally formulating a strategy of how to get there that makes the difference in planning out projects.
Technically, I contributed.
No really I did contribute! On the technical side of things I coded a lot of functionality for the additions we planned to make for the project. Specifically, I worked a lot on helping to deliver a new filter function for our planned bar-chart. At the time, the line graph only allowed a user to hide or show certain data sets, as mentioned above. We wanted to make it so a user could change some other things, specifically the time range for the data. So with that in mind, I knew I had some groundwork to do.
Firstly, I knew I was going to have to at the very least create a form layout on the graph page that would, you know, let the user input data.
How I went about accomplishing that specific task was to utilize a styling library that already existed in the project called Ant-design. In that library they have various tools which we utilized all over our project, but here specifically I implemented a Select feature which essentially acts as a dropdown for various preset options. There are some other lines here which may not make sense, such as that ‘onChange’ code block. But that came in handy regarding the next thing I had to build: Global State
Global State, can essentially be explained as this: Imagine you’re at Thanksgiving dinner, and you want some more green beans. You’re not really in arms reach for the green bean bowl though, so you ask someone at the table to pass it over to you. Without Global State, you encounter something called prop drilling, where state (green beans) has to be passed from one person to another one by one until it reaches it’s destination. So the beans goes from your cousin, to your other cousin, to your mom, to your aunt, to your uncle, to yet another cousin, then finally to you. Wouldn’t it be a lot nicer if say, your mom or aunt could just grab the bowl and pass it to you? Of course it would! That’s what global state aims to achieve, predictable, easy to access state management. But what does green beans and global state have to do with filtering a graph?
Truth is, the green beans were just a metaphor. But the global state side of things is very important! Thankfully, the project came with the Redux (global state management tool) already hooked up and ready to use, we just had to create the specifics.
Again, some tech jargon, but essentially what’s going on here is this: we have an initialState object, that holds the default range of months the graph can display. By utilizing actions and user input, we can update this monthRange list within our initialState to display a different range of months. This is accomplished by a bit more detailed work within the filter component itself, but that’s the main idea. For a clearer flow of logic, imagine it like this: Graph displays initialState > User inputs and submits a new month range > InitialState gets updated based on that input > Graph displays initialState (which has just been updated)
Some other challenges we faced was trying to understand how we wanted to classify our data, how to submit a user report, where to submit that report, how to go from a line graph to a stacked bar chart, etc. Working through those challenges and trying to just get that piece above behaving properly wasn’t an easy task. But I’m grateful I had a group that really stuck our nose to the grindstone and kept pushing. Was our final product ideal? No, it was far from where I think the potential alludes. But I’m proud of the work we put out, and the grit we displayed when encountering these challenges.
Drumroll, please…
So after all this work, all the time and effort we put in, surely we were bound to have an exceptional project!
Well, kind of.
Don’t get me wrong, we did put in a lot of work! And for what it’s worth, in my unseasoned developer eyes, this seems like a pretty decent contribution to the project! However, I realize that there was definitely more to be done, and hopefully whoever takes on this project next will fully realize the vision we were going for. I’m speaking kind of vaguely here, so let me break down what exactly we built:
- Converted the spaghetti line graph into a stacked bar chart
- Added a new filter specific to changing the parameters for said bar chart
- Implemented Redux global state management for said filter (Not fully functional however)
- Created a new tab that housed a user submission from for reporting instances of police use of force.
- Again implemented Redux for taking that input and sending it to the data science database. (Also not fully functional)
Going into labs, I hadn’t personally touched Web Dev for months. This attributed to a sense of imposter syndrome, which ultimately may have stinted my motivation to start building on this project. Had I been brave enough to take the leap, I would have had maybe a few days more to hammer out some of this functionality. But knowing what I know now, I’m positive moving forward my skills will only become more refined, and I won’t be limited by my fear again.
Moving forward, the future looks bright for this project. With all the creativity and new approaches each Labs group will bring to the table, I believe this will shape up to be an amazing tool. Perhaps someone will build upon our submission form? Or perhaps they will flesh out our graph filter? Who knows! To implement them, they’d need to understand Redux and figure out how to pass user input to and from components, which won’t be too bad, provided they’re willing to refresh on those concepts.
All in all, Labs was nothing short of helpful. I got real hands on practice working in groups, got to truly become a master of git with the numerous pushes, pulls and merges I had to do. And most importantly, I got good feedback from not only my partners, but even my Team Project Lead, who nudged me in the direction of being more of a leader in the group dynamic. Whereas before I was more reserved, cautious, and ultimately uncertain of how I was going to ever make it through labs. This project will be a memorable one for certain, and has already helped my career by showing me what it’s like to work in a group space with deadlines. Not to mention introducing me to the process of learning new technology on the fly, and making sure my group is on the same page.
With that, I think I can safely end my Labs journey here. And for the most part, my Lambda journey (the bulk of it anyways) ends here as well. My future is wide open now with possibilities, and I hope that I can do myself justice by pursuing this career in which I’ve worked so long and hard for. Thank you team F, and thank you Lambda.
