Kale with Friends

This week’s post is unlike any others.  Instead of an individual work, I started working with four other people as a group.  For next 6 weeks or so, we will be working together to create a quality web service using the technologies and software development techniques we learned over the past two months.

Our application, codenamed ‘Kale with Friends‘, provides online community space for local farmers and consumers.  It is a social networking space filled with local events, recipes, showcases, meal planner, and so on.

Division of Labor

We decided to create 8 mockup pages that would essentially be our core of the website.  Each of us created two mockup pages totaling to eight pages.  I was responsible for the Local and Meal Planner pages.  On the Local page, I utilized Google Places API to show events/places nearby.  On the Meal Planner page, I inserted a screenshot of Google Calendar as a placeholder as mockup.  Google CalDAV/Calendar API implementation wasn’t so straight forward which will require me a bit of tinkering to get it to work in the future.

Development Coordination

Our team met up physically to discuss our plans and for brainstorming session.  We agreed on core features and UI to base our work off of.  After the meet, we created a GitHub repository to collaborate our work.  Our main method of communication is through exchanging emails.

Group Experience Thus Far

So far, this is the best group I’ve had for a project.  Everyone did their part in timely manner.  We were able to create a functional (albeit partial) mockup in the course of four days.  If we could keep up with this, I believe that we will create an excellent web service before mid-May.

Possible Improvements

With the current spring break, we are unable to meet up physically to discuss more about the project.  This could lead to inconsistencies within the website.  We need to refine our design and apply it throughout the entire website for consistency.  And maybe we could design the website so that it is more visually modern (ie. metro UI, Spotify-like UI, etc etc).

 

Web UI Design Basics

Web development is an alien subject to me.  I had very minimal prior experience with any web related coding.  The most I did was for MySpace back in 2007 for simple text editing.  I didn’t really grasped the concept of HTML back then.  Which might be why I prefer embedded programming over web development to this day.

I never thought I would revisit HTML (or any web development subject, for that matter).  Ever since the introduction of HTML 5 standard, I got interested in web development.  Now here I am, learning HTML and CSS for a software engineering class I’m currently taking.

WOD 1: Browser History 1

The first WOD was straight forward, even when I am completely new to the web development.  We created a simple webpage containing the history of various web browsers such as Internet Explorer, Firefox, and Chrome.  The first iteration took me about 21 minutes which isn’t a stellar time but I was able to finish it before the DNF time.  Second iteration took me about 16 minutes because I had Google’d less for other online resources.  Through this, I got acquainted with basic editing using HTML for a web page.

WOD 2: Browser History 2

The second WOD was completely foreign to me as I have never encountered CSS before.  I had to refer to a lot of different online resources to get an idea for CSS.  This WOD particularly took longer than other ones.  The first three tries, I DNF’d.  I just was not familiar with syntax and some ideas behind HTML and CSS integration.  On the fourth try, without referring to other references, I was able to to complete the second WOD little under 15 minute mark.

WOD 3: Browser History 3

The third WOD was a little familiar to me thanks to the second WOD that I completed four times.  But by no means it was easier to complete.  This third WOD did not provide a clear instruction (for a person who is completely new to this).  So it came down to a lot of reference to Google and trial and error until something worked, without breaking the page.  I have learned about different ways to create navigation bars.  However, I wouldn’t be able to code one if I was asked to do so right now.  I need more practice to get familiarized with HTML and CSS.  It took me about 17 minutes 30 seconds on my second try.

Conclusion

This week’s WODs were interesting to do.  Every aspect of it were completely new to me.  Some were challenging without clear cut instructions but that is what search engines are for, I guess.  This was a good learning experience for me as I was interested in developing websites for some of my side projects.  HTML and CSS were easy to learn.  Organizing and making sense out of all the syntax (wall of texts, literally) was a bit challenging for me.