Coding for me is already a difficult subject. I often have a hard time remembering what some functions do, or sometimes try to solve a simple issue in my code using a difficult method. Adding the element of working as a team was both to my great benefit and to my slight detriment. Im usually not comfortable working in a team, but I am always willing to do my share, and make sure we accomplish our goals. For this post I will walk through each of the important learning curves we went through as a coding team and give some of my thoughts on the experience as a whole.
Design & Building a System
while it wasn’t our first time working on a design together, it was our first time together as an official team. It can take some time to learn what each persons strengths and weakness’s are, but in time I believe we worked it out. It all seemed to work as intended, we deliberated, condensed ideas down, and drafted pages together within Figma until we found a version that we all agreed upon. This was the easiest part in the process, making a prototype within the Figma program was something we were all familiar with, and were the most eager to do.
As for making the design system, I think we all had slightly different ideas into what should be incorporated and what would actually work across each of the pages. We managed to find everything within our pages that could be built with similar building blocks and created a library. We were also able to find others to test our solutions easily. While creating these building blocks, our system did end up changing our design, but we all felt this was for the better. We in the end made ourselves flexible to change and created something unique that solved our issue for our user.
Collaborating on a design is my favorite part of the whole experience. Its just a session of throwing out possible ideas, elaborating, testing and seeing what sticks. Usually drafting is my favorite part of any design process. Working in a team to draft just enhances the experience because we get to have interesting discussions with differing perspectives for ideas.
Sharing The Code: Github
One of the biggest challenges we faced as a team is sharing the code we were writing. When it came to coding we all were used to working as individuals. So when it came time to code we had a struggle for awhile. Even learning Github caused some grief. There would be overwrite errors, code getting lost, sections being worked on at the same time, and uploading not getting done when it should have. Our team had a hard time using the application in the beginning, sharing code was not an easy task.
Ultimately it came down to communication between us all to help resolve the issue. After going through all the grief of lost work, we learned that we couldn’t just immediately jump into coding something we wanted to change. We talked to our team, pulled code and pushed out code, and had specific tasks that we created for each before jumping right into the work. At the end we were working more like a team, and not just individuals working together on the same assignment.
Github was difficult to get used to, but in the end, it was great for sharing files with the team. I loved how easy it was to collaborate on a file together. I had no idea how we would collaborate in the beginning and the thought made me cringe. But Github alleviated my worries about everyone having the latest up to date file, and staying on top of their own work.
Learning To Read & Write
One of the issues I think I ran into the most was just how differently some of us would code from one another. When coding on the assignment I would sometimes log back into start my work and would see an odd div ID or Class name. Sometimes I wouldn’t be too sure what the selector was referring to.
Some examples of naming conventions I would run into would be: similar names with a different number (box1, box2) names that relate somewhat to the function (background box, accountbox,) or some that would relate to the name of the page it would relate to (accountheader, cameraflash). Sometimes I would have to spend some time looking at the code on different pages to figure some things out, or even alter the code temporarily to see what would change.
We also would even have css grouped with some of the wrong locations, for example: account page css grouped with the landing page css. Eventually we had to sit down together and agree on a naming convention to make sure that we wouldn’t have to spend a lot of time trying to figure out what each selector was for and searching for where it would be in our css file.
While we all did have different kinds of writing style, it was interesting to see everyones code and how we approached a problem. Looking at how each of us solved an issue helped us to see what we thought as good and incorporate it into our solutions on our pages. I did like this part a lot. There were some surprising things that I learned just by reading someone else’s few lines of code.
Final Thoughts?
When It was all said and done, I think this was a relatively good experience. We made a lot of mistakes, but we also learned a lot of new things from each other. We were all not used to working with each other, but from this I believe that we came out more experienced and prepared for a situation like this when it happens again. To summarize we learned:
1) How to better draft and create a design system
2) How to share code, and best practices to keep the code safe
3) How to adapt our code writing style for the group
4) How to share and accomplish coding tasks
It was a little bit of a struggle, but I wouldn’t trade this experience working with this group. Our product came out mostly as planned despite the hiccups along the way. You can check out the result of our first team coding product at the link provided below.
http://josephwyman.pairserver.com/Mercado/Mercado%20Code/postings.html