bwd

reddit.com/r/Beginningwebdev blog

Sep 9, 2013

Blog Team -- Sprint 1 -- Design Sprint

The blog team, consisting of two front end developers (Reddit users jbeardles and mcstripes) and one back end developer (Reddit user jhouns), is currently through the first week of our first sprint. My wife is also giving us a hand by pitching in and helping out with some of the Project Management work. This sprint is focused on establishing design goals and setting up methods of communication. We've also discussed our tech stacks and what languages/frameworks we are going to use. Here's where we are so far:

Communication

Communication is a very important part of working together with a team of developers, no matter how big or small. We face a unique challenge in the fact that jhouns lives in the UK, so finding time to meet via video chat has proved challenging so far. However, we were able to meet via Skype on 9/2/2013 to kick off our sprint. We are also using Google Hangouts and Trello (more on that later) for non-video chat communication.

We will be updating this blog as well as the subreddit as often as we can to keep everyone in the loop as to the progress we are making as well as to answer any questions that anyone has! Once we get the blog that we are building up and running we'll migrate the posts over to it and begin using that as the primary method of communication for the community.

Tech Stack

At this point we have solidified our tech stack. I'll briefly go over what we are using and offer a little explanation as to why we chose to use the technologies that we did :)

Project Management

SCRUM

We decided to use SCRUM methodology for managing our project because, quite frankly, it is the methodology that I have the most experience with. I feel that it really lends it self well to collaboration and helps to give a clear vision of the goals for a particular sprint. We've also decided to stick with 2 week sprints to make sure that we have a deliverable product or iteration on a product on a regular basis.

Trello

Trello is a free project management tool that allows you to set up and customize a SCRUM board. This has proven to be an invaluable tool for us not only for keeping track of tasks but also for communication. Trello allows you to set up individual cards to tasks and developers can have open conversations about each topic on the card. It also allows you to assign tasks to certain team members as well as add different custom labels for easy visual tracking.

For anyone wanting to try their hand at SCRUM, or even for seasoned veterans, I cannot rate this tool enough. One more shout out -- if you are not interested in SCRUM but want to give Kanban a try, Kanbanize looks to be a similarly fantastic tool for setting up and managing a Kanban board.

Balsamiq

Balsamiq is a tool for creating mockups and wireframes, recommend by jhouns. It has allowed us to create multiple mockups for the blog pages and comment/add to each others designs. This tool has allowed us to quickly move forward on a unified design vision for the project.

Version Control

Git and Github

While there are several good options available for version control, we felt that Git is what we wanted to use. We all had experience with Git and wanted to improve our comfortability with it. Git is especially powerful because your repo is created and housed locally on your machine -- you can make as many changes as you want, undo as many changes as you want, branch until your heart is content -- and you don't have to push it to the remote repo until everything is exactly how you want it! This will allow us to work independently while keeping a Master branch that has the most updated version of the project. We will be housing the repo remotely at Github.

Front End Technologies

HTML5 and CSS

While these choices may seem obvious, there are a few specific aspects of each that we will be leveraging. Specifically, for HTML5 we will be working to implement the 'history.pushState' API for seamless navigation. We will also be trying to create as much of the page using CSS as possible, trying to use the fewest amount of images possible to keep page performance high. We will be implementing graceful degredation, where necessary, to support older browserd (IE8, for example).

Javascript and jQuery

Again, obvious choices. But, we will be working to make sure that our code is as organized and maintanable as possible. Where applicable, we will create plugins so that our code can be used on other sites/projects in the future.

Bootstrap 3

Twitter's Bootstrap 3 framework was built with a mobile-first goal, making it easy to create mobile-friendly, response sites and web apps. For this reason we are going to use Bootstrap wherever possible to create a clean site with common designs throughout. Where necessary, we will be overwriting the Bootstrap css to customize the site to our specifications.

Mustache.js

Mustache.js is a logic-less front-end templating lanuage that keeps allows us to create html fragments and store commonly used strings and elements in a view layer, away from the DOM. At the time of this writing, we are not sure how much we are going to be using Mustache, but we want to use it as much as possible to get a feel for the syntax, how the language is used, and generally how to best implement a front end templating language.

I have spent a good amount of time this week diving in to the Mustache docs and have successfully set up, what I believe, is a clean and reusable implementation. I will be publishing a tutorial on the way that I have set up Mustache for this project later on this week.

Grunt.js

The use of Grunt is a lofty goal for this project as I don't believe any of us have any experience with it. Grunt is a front end build tool and, while I admittedly know very little about how to set up a Gruntfile or how to best implement Grunt, I do know that it is very powerful, and, if used correctly, can greatly improve project performance. As we work our way through the project, if we find the right time to use Grunt we absolutely will. We will also create a tutorial to help others get going with this powerful tool.

Back End Technologies

  • PHP
PHP

We decided to use PHP for this project because we wanted to focus on the collaboration part of the project. jhouns is most comfortable with PHP and, in order to make sure that we remain focused, we agreed to stick with it. However, if at any point during the project we decide that we want to use a framework or a different technology, we will make the switch! That's the beauty of this community :)

Wrap-Up

That just about does it! If we add/change any of these technologies we will be sure to post about it explaining why and explaining any how we implemented the switch. As always, if you have any questions please email us or, even better, join us!

-Beardles

Sep 9, 2013

Welcome to Beginning Web Development Blog

Welcome to the Beginning Web Development Blog! We are a group of new(ish) developers who have banded together via Reddit to hone in our skills, collaborate on projects, and build a community of budding developers while creating awesome web apps to bolster our portfolios.

This blog will chronicle our progress as we work together on various projects -- discussing tech stacks, any roadblocks we encounter and how we solve them, any new and exciting techniques/technologies we learn, and generally anything else that we encounter along the way.

If you are interested in joining our community, please join the subreddit and don't be afrain to participate! Most of us have little to no professional experience, so we are all here to learn together. If you have any questions, feel free to email us.

-Beardles