Planning a Side Project
So in the last post I talked about building the fair job offer calculator. Before building it, I should talk about the technologies I’m going to use. I like to use side projects to learn new stuff or cement concepts that I’m not familiar with it.
These days when I start a side project, I like to start by scoping it down to a minimum set of features to make it viable.
There’s a 3 step framework I follow I like to call the Scoping Framework.
Step 1 – Researching and Picking Technology Choices
Firstly, I like to start by researching technology choices.
Now, when I started the Fair Offer Project, I decided I wanted to do another project with AngularJS. At that time, Angular 2 was not out yet, so I had to use Angular 1.4.x. Normally, I like to follow the following 2 step framework for picking technology choices.
My Tiny Framework for Picking Technology Choices
A – Only pick one unfamiliar element at a time
What do I mean by this? It means I will try only one new technology choice in a project. For instance, in the fair job offer project, I’m going to use AngularJS (possibly React) because I’m still trying to get more familiar with it. For the backend component (if there is one), I will use Rails because I’m extremely familiar with the tooling around it.
Why only one unfamiliar element at a time?
I do this because it’s easier to avoid late nights and by controlling the number of learning variables you’re juggling, it’s easier to wrap your head around new concepts.
B – Researching
So I wanted to use AngularJS and get more familiar with front-end tooling. So I started doing preliminary research on Google to get a feel for the front end tooling out there.
Overwhelmed by choice
Here is what I see so far as a potential front-end only “tool” or “build” pack:
-
npm package manager – I came across bower and npm. Apparently, according to this post, it looks like npm is the better choice to ensure dependencies play nicely together and is what one JavaScript developer at Spotify recommends.
-
gulp – Task runner that lets you automate repetitive tasks (sass compilation, running of unit tests, browser refresh, etc.) Here is my source: http://brandonclapp.com/what-is-gulp-js-and-why-use-it/
-
webpack – Module bundler that generates static assets and splits the application into multiple chunks to load those chunks on demand. You can read more about it on quora and web design weekly.
So according to my preliminary research, there’s a lot of ways to organize your front-end code.
But since I’m trying to learn more about the front-end, I’m just going to use what appears the latest and most stable tooling (npm, gulp, and webpack).
Step 2 – Implement one feature at a time
The second step is to make a checklist and put it somewhere in an organized place. I like to use Trello.
Here’s a snapshot of the checklist I came up with:
- Setup infrastructure (https://github.com/pmachowski/production-angular-webpack-gulp)
- Allow a user to create factors that are important to them
- User can mark those factors as one-time and ongoing (all factors are assumed to be yearly costs for simplification)
- User can save each job offer
- Sum value is auto calculated
- User should be able to see top 3 (or less) offers [optional]
- User should be able to see a plot of their actual compensation (salary – expenses, both one-time and ongoing) [optional]
- User can reload each job offer
You can see the rest in the image below:
Step 3 – Set aside dedicated time
Finally, I set aside dedicated calendar time to work on this stuff. I find having a set schedule helps keep me focused and disciplined.
I wrote about the system I use to start and run my side projects in The Side Project Hustle Guide.
Summary
In scoping the fair offer project, I used the 3 step Scoping Framework to trim the feature set to build an MVP. Then I use a simple 2 step framework to pick what technologies to use.