For my Google Summer of Code 2019 project for The Processing Foundation, I worked with Cassie Tarakajian to create a search bar for the p5.js Web Editor. You can search within your own sketches and other user’s sketches.
Before this project, I had never been involved with open source or programmed outside of a classroom setting. I began the summer learning best contribution practices, how the web editor is structured, and why it was organized that way. Afterwards, I was introduced to Git, React, and Sass. I worked with two issues (#989, #1109) to learn how to make visual and functional changes within the web editor. The first issue had a design that led to questions about its intention and implementation within the code, and was put on hold for further discussion. Although it was unable to be resolved, I learned that implementing design through code was not always straightforward; frequent communication between the programmer and designer is very pivotal to the process.
I created a portfolio site with pop-up modals to understand React components and how data is being passed between them. I also made a mock search bar that searched within a list of Hearthstone cards. I first created one with only React and then re-made it using Redux and Reselect. Assembling these examples was extremely helpful in learning these libraries and repeating the same process for the web editor.
I used designs uploaded to Zeplin as visual guides for how the search bar would appear in its neutral and active state. I ran into some questions involving other aspects of the designs, which showed the search icon as a toggle for hiding and viewing the search bar. I was also unsure as to whether a search button would also be necessary as the results would be presented live. I turned to some resources on best practices for a search bar to finalize decisions, which advised providing prominent access, a search button, and a magnifying-glass icon.
The search bar, placed within the modal that displays a list of the user’s sketches, has a search icon that serves as a search button, a text input area, and clear button. The color scheme of the buttons and border are dependent on the theme.
The search bar is live, which means that the sketchlist is filtered as the user types. To prevent the list from getting filtered after every keystroke, this filter function was throttled, or arranged to happen periodically after every set time frame. The search icon button will also call the filtering to happen if pressed. If the user wishes to clear their query, the clear button will reset it to an empty string. The search query also gets refreshed whenever the sketch list overlay is re-opened.
I deeply express my gratitude to the Processing foundation for giving me such a wonderful opportunity and to my mentor, Cassie Tarakajian, for her education, patience, and support!