What's New in Front End Web Development?

Our Senior Web Developer, Bryan Kerr shares some tips and talks us through the changes in Front End Web Development.

Front-end web development is traditionally known as a discipline that sits somewhere between user interface design and back-end web development. Its origins and core fundamentals (in their purest form) are based around a love of three main areas, which include HTML, CSS and JavaScript.

These core principles, amongst others, have always underpinned front end web dev. However, in recent years the coming of responsive web design and mobile applications have introduced a sizable increase in the roles and responsibilities of front-end web developers. This makes finding handy tools and leaner processes more important than ever.

So, what’s new?

One of the biggest challenges is keeping up-to-date with the tidal wave of new, relevant and exciting tools and ways of working. Creating or adopting a process, which is suited to you, can add huge value to your project and really get the most out of a developer’s time.

I’ve chosen to share some tools and processes that have become absolute staples in my working life and generally made me a lot of more productive! These include rapid prototyping tools, developing with pre-processors, working with a JavaScript task runner and browser testing using virtual machines.

Prototyping tools

It has become increasingly common for front-end developers to work more closely with designers, when establishing a suitable approach for a particular interaction. An example of this is when working on an application or site navigation, where the ideas, limitations and opportunities can be explored during rapid prototyping. The most useful tool I have discovered recently for this purpose has been CodePen. This allows me to present ideas openly and welcome collaborate input.

Developing with pre-processors

CSS as a language can become extremely verbose when working on medium to large-scale projects. For this reason amongst others, CSS pre-processors were introduced and offer development features such as syntax nesting, mixins, variables and operational functions.

In addition, pre-processors that support CSS source maps, let you live-edit your files in the ‘Sources’ panel within the chrome developer tools and view the results without having to leave or refresh the page.

Ignore the war between SASS and LESS enthusiasts. If you haven’t already made the transition to using to using a CSS pre-processor – do it. I highly recommend it.

Grunt

When developing a project, you will likely have repetitive tasks to do as part of your workflow. Examples of these tasks may include compiling pre-processed CSS, combining scripts, minifying scripts, concatenating files or using JSHint, to name a few.

This is where a simple Grunt automation can run in the background and reduce the load and burden of repetitive tasks. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with minimum effort.

Grunt and its respective plugins are installed and managed via the Node.js package manager. Useful packages I have found include, minification, CSS compilation, connect, watch and uglify. If you develop using Google Chrome (which you should), it is also possible to install the live reload extension and update files using the watch plugin.

Browser and device testing using virtual machines

With the introduction of responsive web design and application development, couple with the massive assortment of devices the game as really changed with regards to browser testing – and become significantly more complicated.

With the introduction of responsive web design and application development, coupled with the plethora of available devices, the game appears to have changed – or at least become more complicated in relation to browser testing.

Finding an efficient and cost effective way of testing your project over multiple browsers and operating systems has become a real challenge in modern web development.

BrowserStack lets you test your project using hundreds of virtual machines, which cover desktop and mobile browsers over many operating systems. In addition, many of these machines have pre-installed developer tools, which can come in handy when debugging a particular feature.

By Bryan Kerr, Senior Web Developer