#c8isgr8

[azadroz]

MKS C8 1st Hackathon Pt 2

Recap: This was our finished Rock, Paper, Scissors App from Makersquare Week 4. Today marks the beginning of week 6, and this project feels so ancient! I’m still really proud of all the attention to detail that went into this project. Thinking back on what my teammate Chris and I accomplished, the most important thing about our project was our communication as a team. We organized ourselves efficiently (using Trello), made goals for everyday we were hacking together, and were clear about what we needed from each other. One night, I was working on how to populate the tables we were using with the correct information from our database using embedded ruby. I leaned over Chris’ shoulder, talking about how a method should be written in our database file in a pseudo-paired-programming style. At this point, it was a late night and we were both tired. Chris took her hands from the keyboard, placing them on the table, and said: “Just tell me what you need as a data structure. Then I can write a method to return it to you as an object from the DBI.” With that goal in hand, we both got back to working. Lesson: it is never helpful to micromanage your teammates. However important it is to challenge the people you are working with, you must trust them so that you both grow. Work towards a specific goal, and the stuff you’re wasting time on will naturally fall away. I loved this project. Though I didn’t do all of the back-end with Chris, I was able to write a few back-end methods for creating, storing, and sorting data as well as the majority of the front-end. The ability to switch from front to back end helps a project tremendously. I was able to communicate exactly what I needed from Chris to make our front-end work, and hack on the back-end as needed. This project was an excellent encouragement of my goal at Makersquare: becoming a front-end developer and designer, with a strong understanding of the engine under the hood.

You can also see this project on my Behance.

[azadroz]

MKS C8 First Mockathon: Part 1

Makersquare Week 4, 12PM       The ‘mockathon’ had been talked up for several days. The thought of building a complete app seemed laughably unfeasible, kind of like someone who says they’re going to work out the morning follow a past-3AM pub crawl(see 1:20). After lunch with one of my classmates, Christine Oen, I was pretty sure we’d be great partners. I’m an ENFJ  and she’s an INTJ. Chris and I balance each other well, and we intuitively knew we would get along. When I was a high school teacher with Teach for America I knew how important it was to have the right partner: teams with more diverse personalities make cooler shit. So we explicitly told people we didn’t want a third person to throw off our groove. Our goal: Make a Rock, Paper, Scissors app. We started with planning and making an ERD:

I used OmniGraffle to create our ERD. It’s an amazing app that creates diagrams, wireframes, flowcharts - anything you’d need as a developer. As Christine wrote the login/signup code, using the gem digest/sha1 to digest the passwords in our user database, I started fleshing out the design. I started with a bunch of basic images on paper - my favorite way to do mockups:

After feeling disatisfied with my vision, I went to images.google.com and searched “Rock Paper Scissors” for some inspiration. I found this beauty:

I like the simple, thick text with the contrasting line drawings of human hands of this gif. I think websites that really bring in human elements - like ovenbits' new site or Inspire, viget’s design interaction blog - are onto something great. There’s something really amazing about showing the user the connection of the people and art behind development. So I cut up and cleaned up my original design:

I started comparing sans-serif fonts on GoogleFonts for readability and sharpness. After reading Butterick’s Practical Typography  I’m convinced the most important choices a front-end developer can make are font and word choice. So even though I love Raleway I added a 0.1rem letter-spacing to it when I used it.

 I created a Style Til.es to look at the rendered colors. I chose simple colors that help underscore exactly what our app is: a simple, mildly competitive game.

white, gray, gold, black == paper, graphite, energy/gold metal scissors, black ink on paper. I started making our page in Foundation, deciding against Bootstrap after my classmate Joe sent me this video intro on Foundation  urging me to read the comment that answered the question: Is Foundation a prototyping tool? Is Bootstrap? It was helpful and convinced me to use Foundation, which at this point I’m more familiar with than Bootstrap. I started making basic outlines of the divs and form elements.

I stayed late that night before we went to the Makersquare one-year anniversary party at the Brazos office sketching hand elements we would use throughout the whole design. By this point I was completely in the design zone, thinking about how the user would flow through the website. 

All of the hands I drew for the game site were based on photos from mine and Chris’ hands. There is literally a representation of the makers on every page. Originally I had a lot of gray in the main login, but it felt bland. The energetic gold we chose brightened up the screen. I felt an immediate difference, as if all of the rods and cones in my eyeballs were suddenly firing off thousands more impulses - and thus, more energy and connection with the rendered page. I was so excited I had a hard time thinking about anything else that evening at the party!