%20-%20Whit.png){kind=small}
This year I worked with Bluebonnet to support La Defensa, an organization based in Los Angeles advocating against pretrial incarceration. While Bluebonnet’s fellowship teams typically support electoral candidates running on a progressive policy platform, it’s also essential to support grassroots organizations advocating for their communities beyond elections. According to La Defensa, almost half of people incarcerated in LA County jails–the largest jail population in the US–are being held pre-trial, meaning they have not been convicted of a crime. La Defensa’s work involves electing candidates, advancing reforms, building narrative, and promoting accountability in support of their mission toward pretrial decarceration.
In my fellowship experience with La Defensa and Bluebonnet, I was able to support this mission by assisting with their judge review website Rate My Judge, or RMJ. Rate My Judge is a public resource for people to provide honest reviews of their day-to-day interactions with LA County Judges and their experiences within a judge’s courtroom. By giving Los Angelenos the platform to evaluate the behavior of LA County judges, La Defensa hopes to promote transparency for what happens inside the courtroom and accountability for those judges’ actions.
Debugging Existing Components
My work involved updating and debugging La Defensa’s website alongside their previous developer. This included debugging existing components like their drop-down, shown on the right.
This entire drop-down portion of the site is one AccordionBlock component. One way to think of it is a bookshelf, where every drop down element is a book on the shelf. When clicking the arrow, you’re “opening the book” to see more information. Initially, the drop-down (referred to in our code as AccordionBlock) component would cause the site to crash.
First, I was able to make an initial patch so it at least wouldn’t crash the site. This was achieved by making the line that iterated through the array of items that was passed into the AccordionBlock check for whether the array existed in the first place.
{Array.isArray(items) && items.map((item, index) => {In broader terms, the code I added told the website to not place any “books” down if the “shelf” didn’t exist, which is what I determined was causing the website to crash. This didn’t fix the ArrayBlock, but it did stop the site from crashing. The actual fix for it ended up being related to an update issue. Rate My Judge’s content management system (CMS) Strapi–a software for La Defensa to modify content on their website and access their database without needing to code–had updated recently, and required syntax changes in order to get the component to work. Once I found where the line that needed to be updated was, the drop-down was fixed.
Creating New Components
I also created an embed component, which involved using “dangerouslySetInnerHTML”, an HTML property that sets the element's content from an external source, to display the embed code that was entered in Strapi’s rich text editor. Unfortunately, I was limited to embedding sites which provided their own embed code, like google forms. Other forms that were intended to be embedded were linked to instead, because I decided that adding them in through HTML Iframes would be difficult for people to use.
const EmbedBlock = ({ embed_code }) => {
return (
<div dangerouslySetInnerHTML={{__html: embed_code}}>
</div>
)
}
export default EmbedBlock;Pages and Navigation
Another responsibility I had was updating all the content within the website, including text changes to existing pages and adding new pages (like File a Complaint and Volunteer). I also reorganized the order of the pages in the navbar to be more intentional with the order users will see the pages in. An obstacle that came with changing the content within the pages was that Strapi’s rich text editor didn’t allow for certain characters to show up, such as white space or bullet points. The solution I chose for this was using HTML entities, like “ ” for whitespace and “•” for bullet points.
Sorting
The last update that I made–and the most important one for usability–was alphabetizing the filters users can apply to find and write reviews about certain judges. This filter is used on the site’s homepage, so making sure it was functional was essential in giving user’s a good first impression of Rate My Judge. The filters for courthouse type and courthouse (name) had to be alphabetized, and this was done by adding a sort line for each of those filters’ params sections.
params: {
filters: {
courthouse_types: {
$or: courthouseFilter.map((courthouse_type_title) => ({
title: {
$ne: courthouse_type_title,
},
})),
}
},
sort: "courthouse_name"
},Impact and Learnings
Updating and maintaining this site is important because usability is essential for community-powered platforms. Even things as simple as creating drop-downs to split up large bodies of text, reorganizing the navbar, or alphabetizing search filters can go a long way in getting people to contribute to RMJ’s reviews, read the information it provides, and access its resources. Reformatting the new content for the website makes it easier for people to read the information about ways to hold judges accountable, forms of misconduct, and filing complaints that Rate My Judge shares. Embedding forms within the site also makes it easier for users to fill them out, since they won’t have to deal with opening a new tab. Alphabetizing the lists of courthouses and types of courthouses in LA County will make looking for a judge more convenient, so they'll be more likely to leave a review for a judge or find information on an existing one.
As an undergraduate student, I learned a lot from this project about applying my technical skill set to real world problems within the Progressive space. This was my first time contributing to an already existing project, so I had to adapt to the coding practices established in the code, unlike most school assignments. Additionally, figuring out Strapi’s quirks ended up being the largest challenge in this project; while it is a robust CMS, it has no resources for developers learning how to use it outside of its own documentation and forum.
While many of Bluebonnet’s fellows come from a data science background, I hope this blog post can encourage more web developers and software engineers to become a fellow. When I first joined the cohort, I had planned on picking up some new data skills, but once I found out there was a need for web developers I saw how big an impact I could make with the technical knowledge I already had. There will always be electoral candidates and organizations that need help making their websites more modern and user-friendly.
About the Author
Adrian Castro Farías (he/him) is a Bluebonnet Data Fellow studying Computer Science at San Diego State University. He currently works as a Tech Fellow for CodePath where he helps underrepresented students in tech learn front-end web development, and an eSPAC3 Scholar at The Jacobs Institute where he helps Latinx elementary schoolers develop their spatial computational thinking skills. After graduating, he hopes to continue making user-friendly websites for good causes.
If you like what you’ve read and want to learn more, you can reach out at info@bluebonnetdata.org. Or, If you're interested in doing similar work, apply to be a Data Fellow!