Minimum Viable Product - Part 1 - The Ingredients
Welcome to the Minimum Viable Product mini-series!
Today I launched my new blog (yey me!) and during the process of building this blog I decided that a mini-series of 'How I made it' might be useful to newcomers and mid-level Umbracians. Advanced Umbracians will likely point out alternative ways to do things, but this blog series will attempt to show how quickly you get a website to market. Advanced items will be saved for another day. At this point I don't know if this will be a 4-part or 10-part series, we will find out together :)
Part one (this article) will cover requirements, design considerations and overall architecting. No code in this first article. Subsequent parts will cover specific implementations of third-party packages, hosting configurations and other items specific to building a blog with Umbraco. There are some pre-built packages like Articulate that can speed things up even faster if you want to build a blog. However, since I wanted complete control over every aspect, I decided to roll my own. A major benefit of building an Umbraco site from scratch is the amount that I learn each and every time I do it. So if you just want to build a blog, I recommend using Articulate. If you want to gain insight on how I build Umbraco sites, please continue on.
I'm assuming at this point you've probably made one or two sites in Umbraco. I'm also confident that you as a reader can use Visual Studio and have the ability to install Nuget packages. If I've assumed too much, you may want to freshen up on some topics from Learn Umbraco 7. If you're an Umbraco veteran, you'll probably want to visit xkcd or something else to pass the time instead.
When I thought of starting my own blog, I seriously considered using WordPress. It would have been way faster (maybe a day or two of effort) and I could have jumped right into writing. I ultimately decided against it mainly due to the fact that I am a .NET web developer and the thought of tweaking PHP templates made me feel a bit squeamish. The following is a list of features I felt were 'must-haves' and you may have a different opinion. Features that I felt weren't essential will appear on the `backlog` for future inclusion.
- Articles - What's a blog without articles? Though obvious, this is essentially the core of the site. This will be the reason for driving traffic to my site.
- Responsive design - I've used both Foundation and Bootstrap, both have their advantages. Either way the site has to look good on mobile.
- Search - I'd like to think I will write so many articles that this is essential. This originally appeared on the backlog as any new blog site is content lean. When I started designing the home page, I decided that I didn't want any more than a few articles to appear. So finding content will quickly become a problem.
- Tags - People like finding things by taxonomy. I wanted to be able to tag articles and have people find them by these tags. I decided to use the built-in Umbraco Tag API/property types to pull this off.
- Code highlighting - I knew I would be posting code, so code highlighting/formatting was a must (personal preference).
- Video embedding - I'll be doing plenty of screenshares over the next few days/months and I'll want to be able to drop in a video easily.
- Block quotes - I want to be able to really emphasize some text.
- Error pages - Boring but required.
- Contact - Send messages to Slack when a form is submitted. I love Slack and so should you.
- Hosting - SSL is a requirement along with cloud hosting. We will use an inexpensive SSL cert along with Azure.
- Marketing - Let the world know that I can fill some manpower needs.
The backlog will be a list of features I decided aren't essential today, but would be nice to have at some point. These features have been deferred for now:
- Hosting media in Azure Blob Storage - While not difficult, it's a 'nice to have' right now. Converting this over will require me to pay back some technical debt, but who knows if I'll ever need to do this for a simple blog.
- User/member login - Right now I don't have a need for users (clients) to login so we'll skip for now.
- Comments - I'm torn on whether allowing commenting on blogs are a good idea or not. If I go with comments at some point, it'll likely be via Disqus to avoid the issues will self-hosting comments.
- Social media feeds - These keep the site fresh as long as I actually use them. I didn't feel like this was needed for launch so it's on the backlog.
- Related Content - Something on the right hand side of a blog that is related to the article.
I use the 80/20 rule as guidance on delivering product. Getting a product to market with the minimum viable (robust) features (80%) is more important than delaying a product until edge cases get addressed (20%).
Third-Parties to the Rescue!
If I wrote my own blog mechanism from scratch like I did before content management systems, I'd still be working on just the CRUD operations and be able to go live in a few months. Since I've evolved to trust and leverage CMS's, I can get my blog in front of eyeballs faster. Because I'm using Umbraco, it makes sense then to also tap into third-party Umbraco packages to implement functionality even faster. What follows is a list of third-party libraries that will save us a ton of time while implementing our feature list:
I use Nuget for all of my dependencies when possible and will use these packages:
- Umbraco CMS 7.3.4 by Umbraco - Our CMS of choice, hard to go any other route.
- Core Property Value Converters by Jeavon Leopold - This is an essential library when it comes to extracting content from Umbraco and inserting them into our views.
- PagedList.Mvc by Troy Goode - A tried and true non-Umbraco specific pagination library for .NET MVC.
- Archetype by me and many more! - We will use this to insert modules into our blog. While we could have used the built-in Grid editor Nested Content, Archetype is still our workhorse for the job.
- Diplo Log Viewer by Dan Booth - Since we'll be hosting on Azure, this will come in handy when trying to view logging information.
- G42.UmbracoGrease by me - This is a utility library that I both test experimental functionality and use to bootstrap an Umbraco site quicker than I normally would.
- Bootstrap 3 - I chose Bootstrap 3 as the responsive framework to handle the frontend.
- jQuery Parallax - A dash of parallax never hurt anyone (though I'm sure many will disagree).
- IconPicker - by Sunnefa Lind
- jQuery - If I have to explain this one, stop reading now.
Ok, so now we have our plan and ingredients for building a blog. We've identified the feature requirements and the third-party functionality that we will be including to help us get our product to market. The next task ahead of us is to sketch out the organizational structure of our site.