Start the build of a website

last modified: 01 June 2015

Introduction

I know it has been done before, and it will be done in the future, but I like to take you on a tour building my new website. The site will gradually grow and when I do a (major) update, the former versions will be kept available so you can check back on what changed and why.

I start with a simple but proven layout:

  • Header
  • Nav
  • Main
    • Article
    • Aside
  • Footer

I will also keep track of time. It'll give me an insight in my work process and probably will come in handy when I have to estimate client work in the future.

My weapons of choice

Let's start with some basic choices:

  • CMS - Always Composite C1
  • Style pre-processor - Used to do 'less' but of late 'sass' is my new love (thanks to my friend Thijs Busser);
  • Javascript framework - Vanilla is the only valid choice

CMS = Composite C1

I use Composite C1 for years now and I'm a certified developer. I love C1 because it's a developer centered CMS based on the Microsoft stack. I code in .Net (c# mostly) since the early beta (late 2000) and my favorite development environment is Visual Studio. As C1 is open source I can download the full solution and extend and/or change it to my liking, which I do a lot (more on that later).

The only downside of using C1, if you could call it that, is that your host needs to be Windows/IIS based and in most cases that's a little more expensive. The pre-processor implementation in C1 requires node.js; you need more access rights than some hosts will allow. Although that can be worked around by building your styles locally and upload them to your host. i.e. do not edit styles in the console.
Fortunately I have a dedicated server at my disposal that gives me a lot of freedom to experiment and host unlimited versions of this site.

Style pre-processor = Sass

These days a style pre-processor should be part of the tool belt of any front-end developer. It gives you the ability to structure your style sheet(s) and if you implement it modular its easy to maintain. You can combine the individual files and compress for a release build. With C1 you can have both the less and sass pre-processors (using node.js) as part of your development process. C1 keeps track of changes in your files, so when you modify your styles (either in the console of in visual studio), refresh your browser and the styles are applied immediately.

I used to do 'less' but in a recent client project I used sass and found that easier to work with. I implement my styles modular the same way as is explained on the pattern lab website. It took me a some time to get used to but while working with it, specially on this (website) project it was easy to use and a joy to update on.

Javascript framework = Vanilla

There are loads of JavaScript frameworks available that all offer advantages but all have their drawbacks (size being one of them). When you choose one your often stuck with it; not many frameworks play nice together. I do not want to limit myself to a certain development path (script wise), so since a couple of years I only use vanilla JavaScript. I like to understand exactly what is going on and, more important, like the ability to optimize/improve/modify JavaScript to my liking. That's a lot easier in vanilla as I do not have to dig into the framework syntax. Vanilla JavaScript is by far the most extendable and portable scripting solution out there.

Fortunately vanilla is a trend and many solutions for challenges that might arise when building a website are available without the dependency on a specific framework. I like the fact that I have to dig into the problem and the JavaScript solution to use. Through that I get a better understanding of the language. At least I have to make a conscious decision on what to do and will most likely not fall in the 'there is a plugin for that' trap.

What's next

The first part is done. Next I'll be working on:

  • Implement speed and SEO improvements through Composite C1
  • Typography - implement typeplate
  • Design - it is still a little bland
  • Images - related to the former point
  • Search - I've built a great solution for C1 using Lucene
  • Weekly reading list - I read a lot of feeds, like to share the interesting ones with you (curated)
  • More about the server side of things
  • The Intel XDK - a great solution for building Html/Css/JavaScript based mobile apps
  • What I've done for and with Composite C1
published on: 11 September 2014