My deep-dive into website development

Robin van Breukelen

Robin van Breukelen

Published: 12 May, 2014

Recently, I was tasked with creating the new MoreApp website. The last time I had done any web development was back in the days that <font color=”red”> was an acceptable way to do styling and DHTML was still a thing. Needless to say: I don’t do a lot of web development and don’t know much about it. This had to change, so I took a deep dive into modern-day web development. With this blog I want to share some of my experiences and hopefully bring someone like me up to speed.

Thankfully, I had some colleagues around me that know a LOT more about this sort of thing, so I could borrow some of their knowledge on the matter. Of course I haven’t been totally blind to the subject, so I knew that this part of development has evolved. It is no longer simply some HTML and some CSS that you throw together; instead mature and proven tools for packaging and building websites are available. And that is where I started.

How do you set up the tooling that will help you build your website? I asked around, did some Googling and found two main tools that a lot of people seem to use: Grunt and Gulp. Looking at their website and the examples, there are a few differences between them, but the most fundamental is the fact that Grunt is task-oriented. A task is defined and can be run. Whereas Gulp is stream-oriented, the source code flows through different streams, which take the input of the previous stream and do their operation. Much like how many Linux applications work.

An example Grunt file:

grunt.initConfig({
less: {
dist: {
files: [{
cwd: 'app/styles',
src: '**/*.css',
dest: '../.tmp/styles',
expand: true,
ext: '.css'
}]
}
},
autoprefixer: {
options: ['last 1 version'],
dist: {
files: [{
expand: true,
cwd: '.tmp/styles',
src: '{,*/}*.css',
dest: 'dist/styles'
}]
}
},
watch: {
styles: {
files: ['app/styles/{,*/}*.less’],
tasks: ['less:dist', 'autoprefixer:dist']
}
}
});
grunt.registerTask('default', ['styles', 'watch']);

Exactly the same thing in Gulp:

gulp.task('less', function () {
gulp.src('app/styles/**/*.less')
.pipe(less())
.pipe(autoprefixer('last 1 version'))
.pipe(gulp.dest('dist/css));
});
gulp.task('default', function() {
gulp.run(‘less’);
gulp.watch('app/styles/**/*.less’, function() {
gulp.run(‘less’);
});
});

The buildfiles are fairly straightforward; they watch the folder with the CSS and parse it using LESS (which is another thing I had to learn, by the way. More on that later!), prefix the files and copy them to a directory.

I ended up choosing Gulp, it’s a lot less verbose and chaining commands (using pipe()) is very powerful and gives you great control.

So with the build tool all set up, I was ready to move on to the next thing: CSS. These days it is very common to use a pre-processor for your CSS, this allows you to re-use common elements (colors, size etc.). The main options you have here are: SASS and LESS. Following my colleagues’ advice, I went with LESS. I took a quick look at the both of them and since I’m already no CSS-hero, the LESS syntax was most appealing to me. But in the end, I think both are good options.

Right, the build was set-up and I was ready to start making things pretty. But wait; there’s more! Since you can’t get away with stuff like this anymore:

best-viewed-in

I wanted to be able to develop for multiple browsers in the fastest way possible. BrowserSync to the rescue! Check out the comprehensive blog about BrowserSync here. All I had to do was add the following to my Gulp file:

gulp.task('browser-sync', function () {
browserSync.init(["./dist/css/*.css", "./dist/css/**/*.css", "*.html"], {
server: {
baseDir: './'
},
notify: false
})
});

And I was able to live reload the website and whenever I scrolled in one browser, the others scrolled along. This made it very easy to test things in multiple browsers.

Final piece of the puzzle was responsiveness. Nowadays, chances are that your website will be viewed on some type of mobile device, and you need to cope with it, one way or another. Now if you’re really good with CSS (we already established that I am not among those people) you wouldn’t need this part, but for those not so fluent in CSS (like me) it really helps to use some form of CSS framework. There are a great number of options to choose from, such as: Bootstrap, Foundation, Skeleton, Compass, etc. I chose Pure CSS, simply because I had used it somewhere else and I could easily understand how things worked.

So, in summary, the following tools fit together really nicely for quick and (relatively) easy web development:

+ Gulp
+ Less
+ BrowserSync
+ PureCSS

The tools still don’t take the sting away from having to cope with the differences between browsers and device, but shortening the development cycle definitely made a huge difference.

Did you enjoy reading?

Share this blog with your audience!