Making for happy customers and developers with new front end practices - main image. Front end technology logos - bower, gulp, less, npm, laravel, composer, coffee cup and development machine showing code.
Published February 29th, 2016

With a steaming mug of freshly ground filter coffee on my desk, its refreshing to sit back, reflect on a particularly productive week, and enjoy this free time to dedicate to finally writing another blog post!

Its been such a long time, your probably wondering what have we been up to?! Well its certainly fair to say that we have been incredibly busy at Honeystone, with all departments working hard to achieve goals and work towards future aspirations. We are more refined and better than we have ever been – its been a great start to the year and I am looking forward to carrying this mindset forward, and having a successful 2016.

Touching on the new custom project front briefly, there has been lots of variation; keeping things interesting for everyone at Honeystone. I have recently been involved in projects for jewellers, self catering apartments, independent film makers, holiday cottages, art galleries, environmental specialists, a live screenings and film company, and most recently; training and coaching companies. Having diverse projects is fantastic, it means I can explore new and varying ideas, meet lots of great customers and indulge in using a range of platforms – which is fantastic for my continual development.

Whilst always continuing to focus on producing great websites and maintaining an excellent level of customer satisfaction, we have also been developing internally! We are particularly proud of our new CMS framework built on Laravel -which has proven itself massively with its first few custom projects this year. Definitely keep your eyes and ears peeled for more about this – some really cool and interesting things to come!

Right, lets get on to the main discussion point of this blog!

We are frequently introducing new work practices at honeystone to try and stay ahead of the fast moving world of the web. Like my last blog post; What combining Gitflow and Phabricator means to Honeystone, inspired by our latest CMS framework, in this blog I will be focussing on a selection of our latest development practices, how this has impacted the way in which we work and what this means for our customers.

Keeping it simple

KISS, 'keep it simple, stupid' - the US Navy design principle of 1960 is one which we remind ourselves of daily at Honeystone, and it's clear to see in our latest version of the CMS. Whilst I am not going to go in to any real details of the CMS (as I’m sure designated posts will be on their way soon from the team), I will be however exploring some of the front end technologies that it utilises. I have been adopting these methods recently and they really do make my work better with improved productivity, and equally, more enjoyable. The end result is fantastic too!

Composer, Bower and npm

Composer is a dependency manager for PHP, simply it allows you to declare libraries that your project depends on and it will manage them for you, by installing or updating them. Composer manages packages on a per-project basis (by default it will never install globally); they are installed in a vendor directory. Our CMS, built on the web artisans PHP framework of choice, Laravel, requires libraries to function and as such utilizes Composer, Bower and npm to make getting started a breeze.

Lets say I have reached the build phase of a project, I have my repository set up and ready to go. To kick off the build, I would begin by cloning myself a copy of the CMS in to my project repository. The composer.json file describes the dependencies of the CMS including package names and versions. To install these, I simply use the install command like so and watch the packages install!

$ composer install

Like Composer, Bower too is a package manager and has similar advantages. It helps take care of frameworks, libraries, assets and utilities and installs what is necessary to a bower_components directory. Bower is optimized for the front-end and uses a flat dependency tree. This means that only one version of each package is required and page weight can be kept to a minimum – awesome!

Like Composer, Bower has a manifest file; bower.json – and installing the necessary Bower components to allow me to work on the front end of the CMS is just as simple:

$ bower install

Npm is the default package manager for the Javascript runtime environment, Node.js. It is written entirely in Javascript and allows us to install all of the Node.js application dependencies for the CMS in the local node_modules folder. Like Composer and Bower, npm installs dependent packages and any packages that they depend on too. Yes you guessed it, installing with npm is as simple as the others:

$ npm install

Three simple commands and I am all set to start developing on the CMS! I would really recommend visiting the official websites for Composer, Bower and npm (if you haven't already) to learn how to use these fantastic tools.

Gulp

Gulp is a tool to 'automate and enhance your workflow'. Built on Node.js , Gulp is a build system that enables common tasks to be automated. I use it mainly for compiling pre-processed CSS (LESS) and minifying Javascript and images. It really is a great front end dev tool for improving speed and efficiency. With Gulp installed on the system, all the CMS requires is a gulpfile.js file where the Gulp tasks are defined, and then using the

$ gulp 

command the tasks are completed. Using the

$ gulp watch

command, watches for my changes and runs the tasks as and when necessary, it's brilliant!

Gulp is a wonderful tool, and I recommend visiting the Gulp website to read in depth about it and learn how you can start integrating it in to your workflow too.

How LESS is more

This is perhaps my favourite front end technology that I use; LESS. I don't ever want to go back to normal CSS again. LESS has definitely won me over, and there are many reasons why I love it!

LESS is a CSS pre-processor meaning that it extends CSS and allows developers to use cool features such as variables and mixins. It is a dynamic stylesheet language that is compiled to pure CSS and runs client or server side. I want to share with you a few of my favourite features of LESS, and some examples of how I have been using them in recent projects. 

Working with LESS

I want you to find this blog useful and see how LESS can work in a real life scenario (albeit simplified). I have decided to put together a little example of how you can work with LESS, which progresses as I talk about new features. Personally I find I learn well and pick up new ideas through doing - I am hoping you find this practical example of some use and that it sparks ideas for you.

In this example I will be putting together a basic sidebar and menu, showing how LESS helps us make a re-usable element that can easily be themed for new projects.

I am going to start by putting together the HTML for this; a simple sidebar that contains a logo and a flat menu. The only 'special' thing going on here is that I am using a Laravel image facade, but equally default image HTML would work the same.

 

Variables

Variables in LESS are declared using the 'at' (@) symbol and variable assignment is achieved with a colon (:). When compiled, the values of the declared variables are inserted in to the output CSS file. Using variables in LESS is a fantastic way of creating an easily changeable theme, whereby you would simply update a few variables in your LESS file and see the theme on the front end change effortlessly.  

Starting simple, I am going to create a few variables for the sidebar, one for the width and one for both the background and foreground color like so:

/* variables */

/* variables */
@max-width: 25%;

@background-color: #333333;
@foreground-color: #ffffff;

Now I can use the variables and start styling this sidebar:

/* sidebar */
#sidebar {
    display: inline-block;
    width: @max-width;
    color: @foreground-color;
    background: @background-color;
    padding: 2em;
    margin: 2em;
    }

With this basic styling and using Gulp to compile the LESS to CSS, this is what were currently looking at:

LESS example of sidebar and menu.

Nesting

In standard CSS, when working on more 'complex' designs you usually have to chain together selectors so that you can target and style specific elements. For example, continuing work on the sidebar above, I now want to begin styling the logo and the menu. Have a look how nested rules are really helping me here and how it keeps things nice and tidy, even pseudo classes look respectable in LESS! (Note: I am continuing to add and use more variables here too).

/* sidebar */
#sidebar {
    display: inline-block;
    width: @max-width;
    color: @foreground-color;
    background: @background-color;
    padding: 2em;
    margin: 2em;

    a.logo {
        display: block;
        text-align: center;
        margin-bottom: 2em;

        &:hover {
            opacity: 0.8;
        }
    }

    #primary-nav {
        padding: 0;

        li {
            display: block;
            background-color: @menu-background;
            margin: 0;
            padding: 0;

            a {
                display: block;
                overflow: hidden;
                white-space: nowrap;
                color: @menu-foreground;
                text-decoration: none;
                padding: 1em 2em;

                &:hover, &:active, &:focus {
                    color:  @menu-hover-foreground;
                    background-color: @menu-hover-background;
                }
            }

            &:nth-child(odd) {
                background-color: @menu-odd-background;
            }
        }
    }
}

For reference, here are the updated variables I am using:

@menu-background: darken(@background-color, 10%);
@menu-odd-background: darken(@menu-background, 5%);
@menu-foreground: #ffffff;
@menu-hover-background: darken(@menu-background, 10%);
@menu-hover-foreground: #ffffff;

Now we're looking much better:

LESS example of sidebar and menu.

Color functions

LESS gives us some incredibly useful color functions, available functions are:

darken()
lighten()
saturate()
desaturate()
fadein()
fadeout()
spin()

I can make use of color functions to reduce the number of variables that I use in the LESS I have written above, thus making it even easier to update the theme in the future (reduced number of variables to change). By making use of the darken() function and varying percentages, I can make it so that I now only set 1 background variable, and it automatically calculates the odd and hover backgrounds for me. Keeping the foreground and hover foreground gives greater scope in the future and allows dark and light menus to be configured with a sensible contrast ratio between foreground and backgrounds.

@background-color: #222222;

@menu-background: darken(@background-color, 10%);
@menu-odd-background: darken(@menu-background, 5%);
@menu-foreground: #ffffff;
@menu-hover-background: darken(@menu-background, 10%);
@menu-hover-foreground: #ffffff;

Looking cool:

LESS example of sidebar and menu.

Mixins + parametric mixins

Another principle we follow at Honeystone is the DRY principle, 'don't repeat yourself'. It aims to reduce repetition – and was formulated in the famous book The Pragmatic Programmer by Andy Hunt and Dave Thomas.

In CSS it is common to find that you are repeating yourself quite regularly, which really grates! Thankfully LESS steps in again and saves us with mixins. With mixins you can write a piece of CSS once as a mixin – which effectively groups CSS instructions in to a reusable class. You can then quite simply include all the properties of the mixin in to another class by including it as a property. Its comparable to variables, only this time for an entire class. Like variables you have to declare a mixin before calling it, this time with the dot '.' symbol.

Here's a CSS3 transition mixin – its such a pain in normal CSS having to repeat this! So, here's my mixin for an 'all' transition and then being applied to the menu links and the logo (this makes for really nice feedback on and off hover).

/* mixins */
.transitionAll {
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

 a.logo {
        display: block;
        text-align: center;
        margin-bottom: 2em;
        .transitionAll;

        &:hover {
            opacity: 0.8;
        }
    }

    #primary-nav {
        padding: 0;

        li {
            display: block;
            background-color: @menu-background;
            margin: 0;
            padding: 0;

            a {
                display: block;
                overflow: hidden;
                white-space: nowrap;
                color: @menu-foreground;
                text-decoration: none;
                padding: 1em 2em;
                .transitionAll;

                &:hover, &:active, &:focus {
                    color:  @menu-hover-foreground;
                    background-color: @menu-hover-background;
                    .transitionAll;
                }
            }

See how much effort has been saved – looks a lot tidier too, thumbs up!

Parametric mixins are an extension of normal mixins and they get more function like too. They accept one or more parameters (if you couldn't guess from the name!) - and as a result you have more flexibility.

In the example below I have taken my .transitionAll mixin and made it parametric like so:

.transition (@prop: all, @time: 0.2s, @ease: linear) {
    -webkit-transition: @prop @time @ease;
    -moz-transition:    @prop @time @ease;
    -o-transition:      @prop @time @ease;
    -ms-transition:     @prop @time @ease;
    transition:         @prop @time @ease;
}

I have also included two other useful parametric mixins that you may also like to use in your next project; a text shadow and box shadow mixin:

.darkTextShadow(@x: 1px, @y: 1px, @blur: 0, @alpha: 0.5) {
    text-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
.boxShadow(@arguments: 0 3px 5px #000000) {
    box-shadow: @arguments;
}

LESS example of sidebar and menu.

Imports

The last thing I want to cover quickly is imports. When writing LESS it is best practice to separate out the constituents in to separate files and import them all together. This helps keep things really tidy. Whilst it is not necessary for this small example, its important to note that if I were to do a larger scale project, I would have a LESS directory where I put all my .less files, such as menus, widgets, print, and a general layout file. As features grow so would the .less files. For example, if we were developing a new blog system, I'd have a blog.less file for it. They all get compiled in to one CSS file so it makes sense for this separation, it really helps structure the code! The imports.less would look something like this:

/* mixins */
@import 'layout';
@import 'widgets';
@import 'menus';

Theming

Now I have shown you some of my favourite LESS features, I want to show you how well thought out, structured code makes for excellent re-usability and how quickly it is to change the theme of elements.

In the examples below I am changing just one variable, a hex code. See how this equates to a sidebar background with a menu that has varying odd/even colors and an on hover color (which unfortunately you cant see). Pretty cool. Definitely not the nicest colors, but I wanted to illustrate how diverse LESS can be. Imagine a whole site built like this - easy-peasy theming!

LESS sidebar and menu blue theme.

LESS sidebar and menu green theme.

LESS sidebar and menu red theme.

LESS sidebar and menu dark theme.

LESS is hands down my current favourite front end technology that I utilise in order to enhance my workflow. I strongly believe that LESS achieves this for the whole development team too, not just me as an individual. The power of LESS is truly unveiled when it is used as a framework (like we do in our new CMS), which is achieved through well written reusable code, and as such, creates a fantastic 'system' for designers and developers alike. I hope that you might have picked up a few ideas whilst reading this post, and if your not already, I hope you are seriously considering using LESS. It's a real game changer and I'm certain you'll wonder how you ever coped without it!

LESS is open source and is available on Github so head over to get involved. I have only scratched the surface of what LESS is capable of and I would recommend having a look at the official documentation and learning more about it!

So, what does all this mean for our customers?

As you know, the world of web evolves at a ridiculously high pace and it is important that we keep on top of everything – our aim is always to provide the best services to our customers. The new practices introduced at honeystone recently are ensuring that the websites we build are faster, more user friendly, and loved by search engines and customers alike.

A very recent example (and one of the first main projects built using our new CMS framework), is the site we built for 'Aspire Education Centres, Swindon'. They came to us with a fairly common set of issues with their existing website:

  • It wasn't responsive so user experience was very poor on mobile devices.
  • The user experience on a desktop wasn't great either
  • Branding was inconsistently implemented
  • It wasn't planned with users in mind
  • Proved to be difficult to update and maintained
  • The site was slow and clunky
  • It didn't have an easy means of managing core content features, such as; blog, faqs and testimonials
  • Customers struggled to find them as contact information was poorly implemented

With the above in mind we set about planning and developing them a new website. Our planning process is one of the things we pride ourselves on as we really go the extra mile here. We plan websites from a users point of view, tackling problems and finding the best solutions. This process is lengthy but always yields results! Take a look at the Aspire Tuition website and see the results for yourself.

Our websites go through a stringent testing and quality assurance process too. One of the benchmark tools we like to use against one of the many test criteria is the Google PageSpeed Insights test. Its a great visual tool that tests the website on speed, both on mobile and desktop, but also tests user experience. This site scores incredibly, and its down to the our latest CMS framework and our new development practices:

Mobile speed – 91/100
Desktop speed – 97/100
User experience – 100/100

Google mobile PageSpeed Insights results. Shows 91/100 for speed and 100/100 for user experience.

Google mobile PageSpeed Insights results. Shows 97/100

This blog post has covered a fair bit, and only scraping the surface of the new tools that we have been using. The introduction of new front end development tools and practices at honeystone are focussing our prevailing goals; productivity and quality is at an all time high, work is both efficient and enjoyable too! We are continuing to keep ahead of the game, and produce high end, top quality well performing websites for our customers.

That's it from me for now - I'm going to have to wrap things up here, I hope you have enjoyed reading about what we have been up to at Honeystone recently and having a little taster of some of the front-end technologies I have been enjoying. Our portfolio is growing with some really exciting projects, so please check back soon to see these! You wont be disappointed!

As always it would be great to hear your thoughts or ideas on any of the above - any questions, comments, shares will all be greatly received! Thanks for taking the time to read.

I'd like to leave you with the customer feedback from Aspire Tuition, a wonderful and happy customer! 

Best wishes,
Sam.

Aspire Tuition letter of feedback to honeystone.

Sam avatar

Sam Lashenko

I'm Sam, a coffeeholic Front End Developer proud to be working at Honeystone. I am passionate about producing high quality websites and enjoy learning and playing with all things tech. I'm enthusiastic about creating awesome user experiences with the websites I build and continually strive for perfection. Outside work I'll be found down the gym, enjoying a drive or out socialising with my friends.