Squad Up!
During the past month, I have had the absolute pleasure of working with a team of talented individuals on a project called StorySquad. The purpose of this application is to allow kids the opportunity to be creative while improving their reading comprehension, as well as their writing, drawing, and creativity skills. The problem is, however, how we can do that while also getting them to spend time away from their mobile devices or desktops? And the answer is to have them read from their devices and then to use good old pencil and paper to draw and write based on various prompts.
During our planning phase, we attempted to be as thorough in our understanding of the project and its specifications as possible, as well as being meticulous about not forgetting “small” tasks in our features. As a group, we were quite concerned about setting up the project in a way that made future features easier to implement, but personally, I was concerned about other things.
In looking through the engineering specifications, I found that there was quite a bit of information and I knew that it would be difficult to remember all of it. So I focused on making sure that I read through all of it a couple of times. The biggest difficulty was pouring over the large amounts of documentation for all the different libraries we needed. Generally speaking, I have no trouble going through the documentation and figuring out what parts I will need for what I’m working on, however, the sheer volume of content in the libraries was a bit mind-boggling. One thing I learned in the first month of working on this project is that while reading documentation, it’s necessary to make connections to previous learnings to effectively use whatever library one might be looking into.
Ant Design was “Bugging ” Me
Contrary to this sub-heading it wasn’t actually bugging me, I just wasn’t using it properly. And… I also just thought that heading was a joke I needed to make somewhere in here.
One of the libraries we are using is called Ant Design and I have found throughout the month that it might become my favorite styling library. Because of its customization features, it doesn’t feel like just another cookie-cutter styling library. This library works in tandem with LESS, which I also enjoy styling with over CSS because it comes with the ability to nest elements. One of the first tasks that I chose was to get the ‘theme-overrides’ set up for our application, which I thought would be a good way of getting into the libraries’ documentation and set the group up for having some of the base styling done.
In reality, what ended up happening is that I spent so much time on the Ant Design aspect that I completely forgot about LESS and how it is intended to work. So there was a file for theme overrides and then there were files for all of the styling for individual components and each of those files was accidentally affecting the styling on the features of the other team members. For example, one of my teammates was working on a parent dashboard component and got it looking absolutely beautiful, meanwhile, I was working on the child dashboard component and had it looking nice on my end as well, but as soon as those two were pushed up into our main branch our styles were being overridden by one another. And it wasn’t just the two of us since there are four people working on separate portions of the application, it was difficult to tell what elements were being overridden by which stylesheets.
Because I had started out with learning about Ant Design, I thought that it would be proper for me to take on the task of figuring out what was happening, and I found that this behavior was happening for two reasons. First, there was an issue of specificity that I hadn’t considered (by which I mean that even though we were putting our own class names onto each element we still weren’t being specific enough). Second, as mentioned before, was that we were forgetting about the basics of LESS (insofar as we forgot about the file structure, variables, and globals). Every time I tried to find an answer for why the styling was being overridden I just couldn’t find an answer that made sense, some suggested upgrading or downgrading the library, one suggested switching to plain CSS instead of LESS, and one suggested just not using Ant Design.
In all honesty, the only reason I figured this out was because I went back to the very beginning of my time learning about styling libraries (almost a year ago) and found one of the old projects I had done using the LESS library. And once I figured out the main solution, I found that discussing it with someone else helped to make me more confident that I was on the right track. I have spent the better part of the past year putting styling on the back-burner and just focusing on learning javascript, python, algorithms, basically the things that create functionality. I have been saying “we need to get this functionality working first and then we can work on the styling later.” So in essence (if you’ll forgive the shifting in generational lingo) I’ve been “sleeping on” styling for far too long, and maybe need to consider it a part of functionality instead.
Where Are They Now?
As of right now, since we have our styling mostly taken care of and set up, we are well on our way to meeting our first set of feature releases. And with the work we’ve done during the past month in looking at library documentation and planning for future features, I think that this amazing team will be able to make effective use of our tools to make something that kids can find use in. If I’m honest, as frustrating as it was that I just forgot about something that I already knew/studied, I’m hoping that I can find more of these moments because I need to figure out what gaps exist in my memory of this fast-paced year.
As a group, we’re trying to get to the point where we can work on the ‘game’ portion of the project, where kids can read the work of others and give points to them as well as reactions.
I’m particularly interested in this because feedback and seeing the creativity of others is something I believe is integral to gaining new ideas for one’s own creativity, after all.. “creativity doesn’t happen in a vacuum!” The most difficult part of this will likely be the assignment of point values and pairing up the writings with appropriate grade levels for students to give feedback on. I think this is also where we will get to work with our data science team the most, which I am particularly excited about because I have virtually no knowledge of what all is entailed.
After one more month of working on this project, I can honestly say that it was a blast. We were able to move past our 2nd release and into our 3rd release (which was the game portion). While the entire flow of the app isn’t completed, we have almost of the functionality completed and just need some fine-tuning to bring everything together. Here’s a video made about the application and what its current state is as of writing this addendum:
https://www.youtube.com/watch?v=RwdSUOyeXG0&feature=youtu.be
https://www.youtube.com/watch?v=K5k19qWKHbI&feature=youtu.be
