1. Static websites, you say?

    I’m listening…

    If you haven’t heard already, CMS is the perfect tool for you to take control of your website without knowing how to code. Now, how neat is that?

    It’s understandable if having this statement come from a developer may throw you off, but let me just explain myself. Developing a CMS and using a CMS are two entirely different things. Developers do the difficult part of developing the CMS while you, as the user of the CMS, do your part of maintaining and managing it. Having cleared this up, I would like to draw your attention to reconsidering the use of a CMS. Until recently I was convinced that there is no other tool that is able to provide the opportunity of managing content like a CMS does. How naive I was! This is why I would like to take this opportunity to enlighten you on my thoughts.

    I am going to assume that you are already familiar with what a CMS is. With that assumption let’s jump straight to static site generator. I am sure you are keen to know what this excitement is about.

    A static website usually implies that your website will not change in content and appearance. At least not without manual modification of the programming files and uploading it to the server. Advantages of static websites include the minimal risk that is involvement in security. It also does not need a significant amount of effort to host a static website. This is important when wanting to achieve minimal load time.

    However, this approach makes it difficult to manage your website. It requires a considerable amount of maintenance time and effort. But static site generators help cut the disadvantages of working with static websites.

    Let’s talk a little bit more about static websites. This involves having a fundamental understanding of how websites work. Perhaps the figure below will be useful to you.

    Figure 1, a diagram of how websites are hosted:

    The server always outputs whatever it reads from the files that are uploading. Whenever it is necessary to make changes to a file, it requires a modification of the related file as per the change request. Once that’s done, the file needs to be re-uploaded to the server. There are tools that automatically upload changes to your server with minimal interaction.

    To avoid all of this complexity, using a CMS becomes the obvious solution – and why the heck not? I must admit, I’m starting to enjoy creating diagrams so I’ll throw another one in.

    Figure 1.1, a diagram of how dynamic websites work:

    That got a lot more complicated quite fast, did it not? If you haven’t been paying close attention, you may have missed an important point. In this approach, we are relying on having a stable connection not only to a server but most likely to a database as well. Do I have your attention now? Good. A common problem with dynamic websites (Fig 1.1) is the risk of experiencing a lot of downtime. Without this connection, we will be unable to retrieve the content. As a result, the website will fail to load as it will be unable to generate the content. Another common problem is the issue with having a server big enough to host a powerful website. If your website has a considerable amount of concurrent visitors, the server may overload and fail. Not so pretty any more now, is it?

    To be able to keep things as simple as possible, let’s stick to the basics then, shall we? Yep, back to static websites. We already took care of the risk involved in the uploading process, so let’s tackle another one. How do we maintain an up-to-date static website? Unfortunately, this still requires the modification of the files. The solution to this was the use of markdown language.

    Before we get started, I’d just like for you to get acquainted with a few technological skills. You will need this to be able to make the best out of static site generators. Now, I know it may sound rather unappealing, but I assure you that it’s worth investing your time in it.

    A markup language defines the structure and data of the website’s content. Without any styling, you will have a plain website, but with real content. Throw in a style language and you have a beautiful website with real content! If you want to be even more creative, you will add a dynamic programming language.

    Now you have a beautiful and interactive website with real content! Mind-blowing with what little you can do! As mentioned before, static site generators force you to get technical. I know, I know, its not something you ought to have to do. Well, it might just surprise you at how easy it has become to code.

    Besides, if it was really that difficult, I wouldn’t be about to give you some lessons on markup language.There are three types of markup languages; HTML, XML and XHTML. Honestly though, you only need to familiarise yourself with HTML. Once you are familiar with it, you should forget about it and learn what really applies to you.

    <h1>Hello, World!</h1>

    The above code block defines a HTML heading. The tags <h1></h1> state this. It tells the browser that the words “Hello, World!” are part of a heading. This does not mean anything until you start differentiating between the elements used. Follow the above code block with a paragraph like so.

    <p>How are we doing?</p>

    This time, the tags wrap the text in a paragraph. With this information we can manipulate the content of the website. Once you have finished absorbing that information, you can lock it away. The idea behind static site generator is to make it easier for non-programmers to use HTML and sometimes even CSS. As the name already implies, a static site generator takes static files and generators the content of your website.

    Here is an example of what you might need to work with:


    title: Hello, World!


    That was a lot more straightforward, you must admit. Depending on the static site generator that one uses, the markup may vary. In the above example, as the static site generator user, you only need to worry about changing the text after ‘title’. Of course, you require to have an understanding what is affected by this change.

    Generally, that’s the kind of coding you should expect to read and write. After writing your code the… let me repeat that, after writing your code the automated deployment tool will take care of the rest.

    Are you with me so far? The ease of using a static site generator lies in finding the perfect one that meets your needs. A lot like searching for the perfect CMS. It is always important to do your homework first. The style of markup language and the extent to which you can make changes to your website depend on the static site generator. On top of that, it is necessary to set up the deployment tool separately.

    However, let me take you to a different world of having a website. It is crucial to have a website that is attractive to your users. Who wouldn’t like to have a selection of websites they enjoy visiting on a regular basis. The way the website looks and behaves has an influence on the joy it brings.

    How about creating an interactive website that will make your website come to live? Oh boy, now you are talking! I cannot wait to introduce you to my newest friend JavaScript. I’m sure that next time, I’ll have the opportunity to do just that!

    Author: Marfat Abdullahi.

  2. Managing your tasks with Grunt and gulp

    They’re the latest craze, there’s not doubt about it. Everyone’s using them and chances are, if you’re a web developer, you know what they’re on about. Or do you?

    Actually, maybe you’re not too sure. Or maybe you’ve been wondering how or why you should use them?

    Before I delve into it let me wear my philosopher’s hat for a moment and share a thought with you: What is the real motor for progress? In my opinion it’s our ability to simplify complex tasks and free up time that can be spent building upon previous advances – or simply letting our ingenuity run wild.

    I’ll let you digest that for a second or two before I ask you, have you ever wished days were longer so that you could get more stuff done? Maybe you keep finding yourself having to use some redundant process and wishing that it were better streamlined so that it became less cumbersome or altogether hidden?

    Enter Grunt and gulp [thunderclap].

    When you’re developing an application, running a deployment, optimising images… aren’t there a million things you’d rather be doing than copy/pasting files or repeating the same actions over and over? Task managers allow us not just to streamline these processes but to do a lot more, as we’re about to see.

    I’m sure you already know this, but, in case you’ve been hiding behind a rock for the last few years, large scale (and not so large) applications nowadays are increasingly built on top of Node.js and you want to have it installed in your machine to use Grunt or gulp. And there is also an ever-increasing number of tasks to run even for really small changes to your code base; so it was really only a matter of time for someone to come up with some sort of task manager, and that’s just what Grunt and gulp are.

    There’s a heated debate about which one of the two is better, but as we’re about to see, they both have their advantages and limitations, and, ultimately, it’s up to us developers to choose the one that suits our project or coding style best. In this post I am going to focus mostly on Grunt but I will also touch upon gulp.


    One of the best selling points for Grunt.js is the huge community behind it and the plethora of plugins available. As of 3rd of October 2014 there are 3,642 plugins that you can use; and these are just the ones that are officially tagged as Grunt plugins. There may be many, many more.

    Numbers this big can become a bit meaningless because they can make you lose perspective. When will you ever need to use even a tenth of that? In any case, this goes to show how vast Grunt is and how many things it’s capable of doing. It is pretty safe to say that if you can think of it, Grunt can do it. And if there isn’t a plugin already there that does what you want then you can write your own and contribute it to the community ;)

    Let’s see now how to use Grunt:

    The first thing you’re going to want to do is install Grunt in your machine. We’ll use npm (the package manager for Node) to do that and also to add all of the different tasks we’ll be using in our projects.

    First things first, type in your terminal:

    npm install grunt-cli -g

    This will install Grunt’s CLI globally in your system (that’s what the ‐g is for) so that it can be called from any location.

    The two files that any project using Grunt must have in the root folder are package.json and Gruntfile.js. The first one is the file that tells npm what dependencies your project has, and the latter is where the magic happens.

    In order to create the first, run in a terminal npm init and follow the steps which will generate the package.json file. (You may choose to give the information it asks now or fill it in after you create it with your preferred text editor.)

    As this file is basically a list of settings and dependencies that your project has, we need to include Grunt and every other module that we want to install. To do that, run the command:

    npm install grunt --save-dev

    Tip: the --save-dev is what tells Node to add the package as a dependency for the project.

    If you get to work in a project that already has a package.json all you need to do to ensure you have the same dependencies with the correct versions as everyone else is run the commandnpm install. Node will take care of the rest. This command must also be run by all your team whenever there is a change to the package.json file.

    Creating a Gruntfile is actually quite simple. All you need to do is write a wrapper function as follows:

      module.exports = function(grunt) {
          pkg: grunt.file.readJSON(’package.json’),
          // Tasks and subtasks are defined from here on

    Once we have our package.json and our Gruntfile.js, let’s start installing modules and registering tasks. Installing tasks is as easy as running, as we saw before:

      npm install <name of the task> -—save-dev

    When you start looking for tasks, it might be useful for you to know that tasks prefixed with grunt-contrib- have been developed by the grunt team, so you can be pretty sure that they are well maintained and ‘reliable by default’. This doesn’t mean that the ones that don’t have it are not trustworthy by any means. Much as this prefix is a quality-assurance stamp you should definitely check other ones out too.

    Each and every Grunt task is documented in its own page or git repo where you will find the necessary documentation on how to make them do what you want.

    A very powerful feature of Grunt is that you can split your tasks into subtasks, allowing you to run a particular task on different files or group of files. Let’s have a look at a quick example using the grunt-contrib-concat task. Here’s our Gruntfile:

      module.exports = function(grunt) { 
        // Project configuration. 
          pkg: grunt.file.readJSON('package.json'), 
          concat: { 
            js: { 
              options: { 
                banner: 'Combined JS file *\n’ // which you can make more dynamic (using <%= … %> syntax) 
              files: [ 
                {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'}, 
                {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'}, 
            css: { 
              options: { 
                banner: 'Combined CSS file *\n’ 
              files: [ 
                {src: ['src/bb.css', 'src/bbb.css'], dest: 'dest/b.css'}, 
                {src: ['src/bb1.css', 'src/bbb1.css'], dest: 'dest/b1.css'}, 

    If we were to run the ’js’ substask it would only concatenate the Javascript files. If you run the ’css’ one it would have the same result with the CSS files, but if we were to run just ‘concat’, it would run both subtasks.

    So how do we actually run a Grunt task?

    Before the above task can be run, it needs to be ‘loaded’ within the Gruntfile and default tasks need to be defined. Let’s see the code:

      module.exports = function(grunt) { 
        // Project configuration. 
          pkg: grunt.file.readJSON('package.json'), 
          concat: { 
            js: { 
              // we’re going to add a comment (banner) at the top of the destination file to specify what the file is 
              options: { 
              banner: 'Combined JS file *\n’ // you can make the banner more dynamic using ruby-like syntax (<%= blablabla %>) 
              files: [ 
                {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'}, 
                {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'}, 
            css: { 
              options: { 
                banner: 'Combined CSS file *\n’ 
              files: [ 
                {src: ['src/bb.css', 'src/bbb.css'], dest: 'dest/b.css'}, 
                {src: ['src/bb1.css', 'src/bbb1.css'], dest: 'dest/b1.css'}, 
        // Registered tasks. 
        // Default tasks. 
        grunt.registerTask('default', ['concat']); 

    Now we have the task configured, loaded and registered, and we have defined what calling our tasks will do. Typing grunt or grunt default in our terminal would run the task ‘concat’; but if we run grunt css we would only run the ‘css’ subtask from the ‘concat’ main task. You’re more than likely to end up with a number of tasks – each one potentially having its own set of subtasks – so it’s totally up to you to define which tasks are run; there is no limit to the amount of tasks that you can add to the array.

    One thing to bear in mind is that the tasks will be run in the same order you specify them in the array, so if there are any interdependencies you need to make sure they are listed in the right order.

    Pretty simple, isn’t it? That’s the magic of Grunt: you specify a particular configuration for your files, set the tasks to be run, and you can forget about it.

    Here are some of my recommended tasks:

    • grunt-rev: Busts your caches. It makes sure your assets are dumped from the cache by prefixing them with a hash that changes every time you run the task, forcing the browser to reload them.
    • grunt-contrib-concat: As we have seen, it looks at some files and concatenates them.
    • grunt-contrib-copy: Copies files and folders from A to B.
    • grunt-contrib-cssmin: Minifies your CSS files.
    • grunt-contrib-sass: Compiles your Sass files into CSS. Perfect in conjunction with ‘grunt-contrib-watch (below). It also allows you to minify the output, which is pretty neat.
    • grunt-scss-lint: Lints your SCSS files and flags up mistakes and warnings.
    • grunt-contrib-jshint: Validates Javascript files.
    • grunt-contrib-uglify: Minifies Javascript files.
    • grunt-githooks: Allows you to run specific tasks triggered by git commits or other hooks; very useful to prevent bad code to be committed.
    • grunt-contrib-watch: Watches for changes on specific files and runs tasks accordingly. This task is a bit special in the sense that it sits in the background and keeps watch until you tell it to stop; even if you have tasks that stop the process when an error is thrown (e.g. linting tasks). Having ‘watch’ still running means that I can go to my problem file, correct the errors, save them and it will pick up the change and re-run the tasks automatically. Nifty!
    • grunt-svg2png: Rasterizes SVGs to PNGs using PhantomJS
    • grunt-remove-logging: Removes all the instances of console.log() from your .js files.

    And remember, you can always write plain Javascript in your Gruntfile if you need to!


    And then we have gulp, a task manager that came about slightly later but certainly an admirable contender that is picking up users real quick.

    Much in the same fashion as Grunt, gulp can be installed using npm:

      npm install -g gulp

    This will install gulp globally in your system giving you access to its CLI. We then need to install it into our project as a dependency using exactly the same command you’ve seen a few times now:

      npm install gulp –-save-dev

    The way gulp runs is very similar to Grunt in many ways: you need a gulpfile.js (notice the lowercase) in your root folder where you define your tasks, concatenate tasks in various ways, etc. For many a developer the more method-ical approach that gulp takes which we’re about to see is more intuitive. In gulp we define a chain of actions piping the outcome of an operation on to the next one. It’s that simple. Let’s have a look at a very simplified example using the ’sass’ task:

      gulp.task('sass', function() {
        return gulp.src('src/styles/main.scss')
          .pipe(sass({ style: 'compressed' }))

    As you can see we are just applying the pipe() method to whatever is output from the previous step, commencing in this case by grabbing the file that we want ’sassyfied’ and finishing defining the destination file.

    This example may not make it too obvious, but by streaming and piping tasks in this fashion we get to save resources because we don’t create temporary files. This is actually what happens behind the scenes with Grunt so we can potentially shave off some milliseconds by using gulp. Also, another good point is that it looks clean; Grunt’s configuration could become a bit cumbersome if you need to define many tasks and options.

    As with Grunt, we can make use of a huge number of plugins that the community maintains (about 780 at the moment) and to which you can also contribute. These will most likely cover all your necessities for the foreseeable future.

    I also find the way we load these plugins to be slightly simpler when compared with Grunt: define them as variables and you’re good to go:

      var gulp = require('gulp'),
          sass = require('gulp-ruby-sass'),
          minifycss = require('gulp-minify-css'),
          jshint = require('gulp-jshint'),
          uglify = require('gulp-uglify'),
          imagemin = require('gulp-imagemin'),
          concat = require('gulp-concat'),
          livereload = require('gulp-livereload');

    If this seems like an awful lot of code for you (are you serious?!) you might be interested on gulp-load-plugins.

    In terms of downsides, I believe that its coding style, which at times could require some experience with Node.js, may put off some less JS-savvy people. Some people may find the more limited number of plugins a downside, but if you are one of them I challenge you to find a project where you’d need a plugin that cannot be found amongst the 780. (If you do, please let me know, I’m genuinely interested.)

    A really cool online tool for trying out your gulp skills or to easily build a gulpfile.js that you can then use in your project is gulpFiction, a visual editor for gulp.

    There isn’t much more about it, really. You can find all the intricacies of configuring the different tasks in the tasks’ respective git repos (or npm pages). As both Grunt and gulp are built with the same principles in mind, much of what we’ve said about Grunt applies to gulp too.


    In this post we have been looking mostly at how Grunt and gulp work and commented on a few similarities and differences between them. Hopefully I’ve managed to grab your interest enough that you’ll want to try one (or both) out.

    A word of warning, though: use with care! Task managers are highly addictive. Once you start unveiling their potential you might even start using them to streamline processes outside of your development projects; managing files in your computer, filtering emails, generating document templates… Their potential is vast, so I’ll leave it to you to judge when you might be overdoing it ;)

    Author: Yago de la Torre.

  3. Is CMS the future of the web?

    If not, why not?

    If you’re not familiar with the word “CMS” then it’s high time you make room in your busy schedule and see what all the fuss is about. I doubt that you’re someone who, after endlessly surfing the web and ended up reading this article, has no interested in what  a CMS is. So, because I value your time, I will sum up what a CMS is.

    CMS stands for “content management system”. This is the word that should be the first thing you think of if you, for instance, want the ability to manage the content of your website without any real difficulties. It is important to determine whether a CMS is necessary though, so make sure you do your homework first. As the capabilities of websites have grown over time, we have reached an era of mass customization. With the ever-growing industry of technology and the power of the media, websites are now expected to be constantly up to date. Take a website based on the fashion industry. We expect them to be up to date with the latest trends, so how are these websites and their content managed? One word: CMS. Okay, so you’re not into fashion? How about a website that showcases your latest art collection? CMS. Not a fan of art either? Then how about having your own blog to state what you DO like? You guessed it: CMS. These are the kind of websites that benefit from what a CMS has to offer. A CMS not only stores your content, but it’s also a tool used to manipulate the content of your website. But don’t start announcing that you’re in need of a CMS when you don’t actually need one. Because a CMS is pretty heavy stuff, it requires… well… a system.

    What this means is that we need to get a database involved. This in turn means depending on a stable network to ensure that your website’s downtime is minimal. Not to mention the required amount of time to develop, as well as manage, your website.

    A breakdown then? Okay, I will do this by taking the example of where you want to run a blog of some sort. I’m pretty confident that almost everybody would like to share their thoughts for everyone to see. This is simply the core foundation on which social media exists.

    Unfortunately, no one likes limitations. Yes, I am talking to you, Twitter! A CMS offers the ability to store any, if not all, of your website’s content somewhere, usually in a database. This means that you have access to the information that your website processes with the help of server-side scripting. Hmm, I guess this is where I recommend for you to look into server-side scripting. Let’s try to skip that; server-side scripting goes beyond the ability to control the behaviour of a browser. It talks to the server. In other words, this allows you to control the the output on the website dynamically. Pretty neat, huh? If you truly did not find that neat, then you ought to make sure you understand the potential of server-side scripting. So… this is where you run off to look into it.

    Let’s go back to databases for a brief moment, as this is the pillar that a CMS stands on. Compare a database with a storage vault, one that contains all the information that we have explicitly extracted from the website, and we can manipulate it with the use of CMS. Let’s say that you’ve finished writing your first blog post. All you have to do is click on the submit button and voila! Your website publishes your first post. Behind the scenes, a task is executed which takes the content of your post, and stores it in the vault. The task may also include to update the website accordingly by publishing the new post straightaway. Oops, but we all make mistakes! What if you found a typo after rereading the post once it’s published? Or worse, you realize that the post was badly constructed! This is when CMS is your hero.

    So how does a CMS work its magic? There are severals ways to allow you to access the CMS. Remember how I said that a CMS is a system? This may have led you to assume that it’s a program you have to download or something silly like that. This is not the case though. The CMS is just a different side of your website. You log in by the means of how your CMS is set up and you are able to view, edit and perhaps even delete your post(s). The most common way to access a CMS is by visiting a special URL that directs the visitor to the website’s CMS. For example, a website with the URL mywebsite.com can have a special URL, mywebsite.com/cms where a login prompt protects this URL. Once logged in, you are directed to the CMS side of your website. In love yet?

    Mind you, “love” is a strong word. After all, a CMS is far from perfect. If you have direct access to the content of your website, it means that others can try to gain access to your content as well. With access to your CMS, the potential attacker can change your content. It is very important to think about the risks involved in having a CMS. On top of that, a CMS dynamically generates the web pages. If you have a high number of concurrent users, the server may risk slowing down to keep up with the heavy traffic. In the worst case scenario, the server will stop responding and lead to your website being inaccessible.

    Thinking about such risks is inefficient when talking about running a blog that is, for instance, all about you. Attackers will not be able to do much to your website besides change your posts or delete them. So let’s think about what is really relevant to you in this case. Think outside the box for a minute. Your blog posts are likely to contain how you feel. You may go through a period of time where you feel a certain way. Why not base the theme of your website on the content of your blog posts! This, naturally, refers to a change in the visual aspect of your website over time. On one hand you can go and fetch a developer to implement this change. On the other hand, however, you can run to your CMS. Where you click a button here, choose a colour there and ta-da! Just like that your website looks different.

    If you are not in love with the idea of CMS yet, then you clearly are not thinking outside of the box, as advised. That’s not to say that a CMS will be the solution to all your problems. It’s certainly not a piece of cake to develop, that’s for sure. Depending on the requirements of the CMS, developing the website can be a challenge. Don’t forget that it’s necessary to consider security issues that may be involved. And even after having your website developed and ready to go live, there is the issue of actually populating the website. I mean, what is the point of having a blog that doesn’t publish posts on a regular basis? In conclusion, you have to take into account the considerable amount of time it takes to both develop and maintain a CMS.

    However, choosing the best CMS is a whole different story. One we should examine another time. Finding the most suitable CMS for your website lies in the clear-cut requirements of your website. Yep, I am talking about the most valuable documentation of the requirements for your website. If you, unfortunately, do not have the documentations mentioned, then you are moving too fast in life. Take a huge step back and reconsider whether you actually need a website. Everything else will simply fall into place as your website comes to live. Speaking of making a website come to life, however, I hope that you’ve been paying attention to both the advantages and disadvantages of using a CMS. You should have made, at the very least, a mental note of the them. This especially counts for the disadvantages. There are many other reasons for not using a CMS than those mentioned in this article. It is, therefore, important to ask yourself how to work around these drawbacks. In fact, I may just have the answer for you; you ought to go back to the basics. Listen up, my friend, I am talking about going all the way back, back to your plain, old, simple static website. Taking this simple static website and turning it into a powerful tool: a static site generator!

    Now that’s a topic that’s worth giving a deeper thought. One I will gladly share my own thoughts on, once I have collected them, of course.

    Author: Marfat Abdullahi.

  4. Developer? Make me a website!

    How predictable…

    The number of times I’ve heard this after telling someone what I do for a living is exactly the same as the number of people I’ve told. So you want a website? And you assumed that this would trigger the developer within me. I would run to my corner, head glued to the screen, and type away like a maniac. Within a matter of hours, if not minutes, I will produce your beautiful website; because that’s my job as a web developer, right? Read this entire article and then tell me that you want a website. If that’s still the case, it’s an opportunity that I (and indeed perhaps other developers out there) won’t pass up, my friend.

    It’s crucial to take baby steps if you want to avoid wasting a considerable amount of time and effort. Mine and yours. Whatever you do, don’t skip the first step of identifying the requirements of your website. Not only that, but you must note them down too. I cannot stress enough the significance of documenting everything there is to document. This isn’t to say that you’ll need to end up with a book thicker than the Chinese dictionary. (I did just say not to waste time, didn’t I?) It’s not about quantity but quality; thus defining the key points will be more than enough. Okay. Perhaps I should be more direct. I wouldn’t seek to discourage you this early in the article from wanting a website.

    Base your document on these four questions.

    1. Why do you want a website?

    2. Who is your target audience?

    3. How will your audience be able to interact with your website?

    4. What will your audience be able to gain from your website?

    Your answers don’t have to detail everything to the pixel. You may end up changing your mind as you answer the questions. And we’ll end up having to keep revisiting the previous questions. Remember that time is of the essence. To make things even more clear, here is a rule: the answer to each question must not be longer than one sentence. I am not going to go in-depth of the construction of these questions.

    Someone once said to me: “You can’t build a house without building its foundation first.”

    Let’s process this further to help you understand what I mean. The first question allows me to understand the purpose of your website. If, for example, you only want to get a message across and nothing more, you can take advantage of having a simple, static HTML website. And why does that benefit you, you ask? Well, it wouldn’t take a great deal of time to develop it, for one. Keeping things simple will also decrease the downtime of your website. And lessen the risk of user experience issues cropping up. Now, let’s say that the message you want to get across concerns your skills and talents, which you want to share with the world. As we all know, a person learns new things on a daily basis. Thus your skills will grow and your website should reflect this. The simple, static website we were talking about earlier, will not be the best approach. The reason is that it will need a great deal of code maintenance, which can be tedious.

    For websites requiring regular changes, having a static website is not advised. Of course there is always the option of learning how to tweak the code. Then you don’t have to hire a developer on a continuous basis. But it’s not something to go into lightly. After all, one little missing comma can easily break your website.

    So, what do I recommend instead? How about a website that benefits from server-side scripting? If that sounds a bit technical let me explain: server-side scripting is a web server technology in which we, as users, can send a request to the web server. The process uses scripts to generate dynamic web pages. There is a lot more information on the internet about server-side scripting. Go ahead and take a minute to look into it, I’ll be waiting at the beginning of the next paragraph.

    You didn’t even bother looking into that, did you? And there you were thinking about learning how to code to build a static website… I’m not judging. Let’s just quietly move on.

    The second question is to make sure that you have your website built in such a way that it’s suitable to your target audience. Developing your website is not directly related here; I know that the website will reflect badly on you, and not me, if your target audience isn’t considered. But it would be sacrilege for me to support the existence of such catastrophic websites. It’s called constructive criticism. (Look THAT up.)

    Let me give you an example. Say you want to target a younger audience. What you might hear from me is that you shouldn’t add too many complex features; this might cause confusion for your young audience. To sum it up: I encourage straightforwardness and minimal interactions when targeting a younger audience.

    The third question relates to the task of developing your website, and doesn’t relate to how it should look or behave. Let’s simplify this. Imagine the following scenario: you have the attention of your audience and they are busy loving being on your website. Your goal, no matter what the purpose of the website may be, is to keep the attention of your audience. This can be, perhaps, achieved by engaging them. For example, if your audience can be seen as viewers, the website can function with minimal user action. This would mean that you are leaning towards the development of a non-interactive website.

    Perhaps you prefer for your visitors to interact with you and each other? (My, my, aren’t we adventurous!) Now we’re getting somewhere! In that case, we need to work with more than what a standalone website has to offer. That’s right, I am talking about getting databases involved. This takes us back to server-side scripting. What? Doesn’t this ring a bell? Well, you should have looked into it earlier, when I suggested it. A basic understanding of these things will save you a great deal of time and money.

    Well, look at that. We’re almost finished with the four questions. That wasn’t so bad, was it?

    If your answer to the last question is to keep your users up to date with your thoughts, findings or collection of information. Then we’re talking about fun, fun, fun! My response will be a mere whisper of the one most beautiful word in web development: CMS.

    What is this you ask? CMS is currently my favourite web application. It stands for Content Management System. The words kind of say it all; CMS is a system that helps you manage your content. Alright, all joking aside, CMS is something I would recommend to anyone and everyone. Okay, not to everyone; everyone who needs content regularly updated. Simply because it will ROCK YOUR WORLD.

    And there you have it! Your ticket to an amazing website. It’s now time to explore the many opportunities of making it come alive.


    Author: Marfat Abdullahi.

  5. The Shopify e-commerce platform: why and how to use it

    Last week we had the privilege of attending one of the few workshops that Keir Whitaker delivered on how to use Shopify. You might recognise his name if you’ve ever listened to The Back to Front Show podcasts. Or if you know of – or indeed have read – Insites: The Book, which he co-wrote with Elliot Jay Stocks, formerly his partner at Viewport Industries. He’s also a regular attendee of one of the best web-related events I’ve ever had the chance to attend, MK Geek Night; a free event taking place every three months which attracts many of the better-known designers/developers from across the country and beyond.

    What is Shopify?
    Shopify is an e-commerce platform for the creation of online stores. Founded 8 years ago in Ottawa, Canada, it’s become the platform of choice of more than 100,000 active stores, and now employs about 420 people. Last year Shopify doubled its gross merchandise volume (or GMV) reaching $1.5bn.

    Why use Shopify?
    To answer that question we first need to think about the world of e-commerce. Traditionally, e-commerce platforms have not been particularly pretty. Their focus has been, and some would say rightfully so, the functionality of getting you through the process of choosing a product and paying for it online. There are loads of examples of really bad e-commerce sites; like arngren.net, where the clutter is such that you can’t even find any products you might be looking for. Why anyone would use this site, other than to show how bad it is, I have no idea.

    One of Shopify’s unique selling points (USPs) is that it puts you in control of the design of your e-commerce platform, allowing you to choose among hundreds of well-crafted templates – or create your own, and make it fully responsive for the modern era.

    It’s a completely ‘theme-based’ hosted commerce platform, meaning you don’t have to install anything on your machine. It has no dependencies or requirements (except for the need to have at least one layout defined) so, for the coders among you, you don’t need to install any javascript libraries or use any particular framework; and you can go ahead and write really bad code, if that rocks your boat, knowing that it won’t complain. (Although the rest of the world might.) Shopify also uses Liquid as the templating language, which is really easy to use and also degrades gracefully. It looks a bit like this:

    <ul id=”products”>

         {% for product in products %}


              <h2>{{ product.title }}</h2>

              Only {{ product.price | format_as_money }}

              <p>{{ product.description | prettyprint | truncate: 200 }}</p>


         {% endfor %}


    The double curly brackets are the key to outputting data. As you can see from these examples, you can manipulate data with all sorts of filters using the pipe (‘|’) character:

    {{ product.title | up case }}

         {{ ‘logo.png’ | asset_url | img_tag: ‘Site Logo’ }}

         {{ ‘capitalize me’ | capitalize }}

         {{ article.published_at | date:”%a, %b, %d, %y }}

         {{ ‘style.css’ | asset_url | stylesheet_tag }}

    It also uses dot syntax, which is a very simple way of specifying parameters for variables:

    {% if product.available %}

    Show Add to cart button here

    {% else %}

    Display message —not available

    {% endif %}

    A theme is basically built using HTML, CSS, JS and Liquid; though you could potentially do it all using just Liquid, generating markup or dynamically creating JavaScript or CSS files. You can also use Sass – check out Shopify Timber – though you can’t use @import, which means you can’t rely on helpers like Compass or Bourbon. Instead, there’s a Sass Mixins section that provides some of what you might be looking for in these helpers.

    When you work with many products, things can easily get complicated. Shopify tries to simplify your product-management, allowing you to have ‘variants’ of your product (think different sizes, colours, etc.) This is very helpful when it comes to tracking products, or in situations when you might want to apply a discount to a particular product. It also makes it a breeze to create collections and filter them by type or tags, which helps you relate products too. You can even set your own criteria so that new products which follow that criteria get automatically added to collections.

    Shopify’s User Interface was revamped very recently. The new one might remind you a bit of the WordPress admin interface, with the left column being your ‘toolbox’ where you can find all the features you need. (You can even build a blog with it…) There are also apps that extend the functionality of your shop by integrating with shipping providers, loyalty programmes, SEO, etc. All nicely bundled up in its own dedicated app store.

    But these aren’t the only selling points that Shopify has to offer. For example, Shopify does all the transaction handling for you, and since last year, it “allows merchants to accept payments with VISA, MasterCard and AMEX credit cards without requiring a third party payment gateway” (from Wikipedia). And if you’re a designer you can even take fake payments to demonstrate functionality for a client, which is pretty nifty, in my opinion. You may also choose to join the Partner Programme and become a maker of Shopify shops; or even define yourself as an Expert in whatever field, so that clients might come looking for you. (A little bird tells me that there is a huge niche for Shopify photographers.) Many custom theme builds are going for $10-20k and there are even some theme designers making more than $100k, which doesn’t sound too bad to me at all.

    Some example stores include A Book Apart, United Pixel Workers, Whipping Post, Pure Fix Cycles, Hiut Denim, and 8 Faces.

    I must say, I went to the workshop only half-convinced about using Shopify as an e-commerce platform. But, having learnt more about what it has to offer, whether you’re a designer interested in ecommerce or you have a product to sell, Shopify is probably one of your best options to create a modern shop for the modern era.

    Author: Yago de la Torre.

  6. CSS Frameworks

    Why they’re worth using – and building


    What I mean by a “framework”

    What exactly makes a framework a framework? What’s the difference between a style library, a framework and a general CSS library? Lots of different names and terms are put about. For me, a “CSS library” covers all as a more generic term. A “style guide” or a “design framework” is more like a bootstrap with a UI layer on top and more specific stylings. A “framework” is something in the background giving your project that robustness and foundation. This is where Inuit and similar libraries come in.

    Why you need a framework

    If, like me, you’re constantly moving from one project to the next, you need tools in place to get started quickly. The last thing you want is to have to start at the beginning every time, writing out the simple classes you need for grids, etc. – or even just resetting the CSS. Most people have a tendency to copy and paste from one project to another. At best this can be messy, and at worst dangerous. If you do this, I assume you spend a lot of time later deleting or overwriting stuff that didn’t need importing. A framework gives you a solid foundation to build from. And you can easily customise for each use, choosing just those areas you need.

    Give your projects structure

    All too often in projects, as the time goes on and the pressure to deliver is applied, we find ourselves faced with the idea of quick fixes. This can be seen by the many projects we come across where developers in a rush have placed CSS at the bottom of a file to overwrite something on top, applying random classes – always with the notion of coming back on a rainy day and neaten it all up.

    Having a good foundation gives you the ability to just add that extra class to an element that’s already defined and has the styling you need. You can also move into a workflow where there are separate style sheets for the new objects. You may even wish to create a naming practice for your classes and apply throughout.

    Make it your own

    Your base framework may not be built by you; but that doesn’t mean you can’t extend it for your own personal needs. There is always a point where you have to create the same objects over and over again for each project. So why not change the framework to use those objects? Or, furthermore, extend so that you can turn those objects on and off depending whether they’re relevant to that project? Even if you start with the best framework in the world, you’ll want to make it your own. The possibilities are endless.

    Inuit – An OOCSS framework

    Recently our framework of choice has been inuit.css by csswizardry. (You can find Inuit on github here.) Inuit is a great choice for a framework and a solid foundation to build from. Below I’ll go through a few great features of Inuit. (Most, but not all, shared by other great frameworks.) I thought it’d be best to show you how some of the features of this library have benefited us.

    Use more classes and less CSS

    The immediate difference between Inuit.css and other libraries out there is its use of classes. Inuit’s classes are based on BEM methodology. This can, for your average developer like myself, take some time to get your mind around. If you are really intrigued by this point I advise you to read this great post by Nicolas Gallagher.

    There are a great deal of libraries out there that have vast areas of mixins for font sizes and animations. But these generally all use things like Sass @extend to pull that into your classes. The real key with Inuit is that everything is pre-built in to object-oriented classes. Bootstrap also uses classes, but Inuit’s are not styled. With Inuit you can build out most of the structure of your project without writing one line of custom code.      

    Start with a good responsive grid system

    When starting a build, most of us will start with a HTML structure. And we’ll want to get this right first time. Having to constantly restructure is a nightmare – especially after you’ve applied CSS to that structure. Inuit, like other great libraries out there, has built in a grid system, allowing us to quickly structure out our HTML. But Inuit doesn’t stop there; it also has built-in responsive breakpoints. This means we can target break points easily and quickly.

    Often we find that with responsive sites as soon as you reduce the viewport size the layout and structure will change. So, to counteract this effect, Inuit has the idea of taking the foundation grid system and names spacing it with its media queries.   

    To explain what I mean, imagine you have a grid with three columns. On a desktop this looks great. But then you get down to tablet size and you want two columns wide and the third column to be full-width underneath. Easy: turn on responsive grid system. Now you can apply the “one-third” class and next to it place “portable—one-half” class. When you resize down to tablet all of a sudden the “portable—one-half” will overwrite the “one-third” class. Then you can structure your HTML document for all viewports and once again you have not written one line of Sass!

    Having the ability to target breakpoints with classes and quickly structure in all breakpoints decreases development time massively. You can see your app come together fast, and build for all devices at once.

    Have a custom UI layer

    Inuit does not have a design layer. I personally hate the idea that nearly all Bootstrap sites look the same; having a design layer can easily make you lazy and stop you putting that personal brand on what you’re building. Like Bootstrap, Inuit has all those custom objects built in (like buttons and beautons) but with no design on top. Having no design layer allows you to put your client’s custom branding over the top. I can quickly build out custom styles in object-oriented classes and apply them to my elements.

    Use Sass

    CSS extension languages like Sass give us the ability to do so much more with our CSS. They speed up development and give us the features we need to keep clean, maintainable code in our framework.

    Variables may seem like simple things, but do not underestimate that ability to get you off the ground fast. With most projects you start with a design; that design will contain font sizes, colours and a whole array of set things throughout. Wouldn’t it be great if when you loaded that framework into your project you could go and update a “variables” files? In this file you could quickly lay out all those things.

    Resetting the CSS

    Most developers start their projects with a base layer of CSS. This CSS will most probably be a reset. To get all browsers more or less on the same wavelength, Inuit has normalize built in. Generally, reset libraries do very dissimilar things. Having a CSS-reset is a great idea and can quickly stop you hitting those simple and common cross-browser issues. There’s no need to stick with normalize; you can change it for any CSS-reset. (Or maybe just put in your own.)

    The downside?

    I know what you’re thinking: “Here we go, you’ve built us up to disappoint us.”

    Not really! The only foreseeable downside with a framework is its size. But there are ways around this. Bootstrap’s approach is to let you download a custom build of their library with only the things you need.

    Inuit’s approach (something that you should definitely build in if you extend a framework) is to have a place where you turn those objects and features on or off as required. This gives you the easy ability to go “Oh no, I forgot this!” and just turn it on later. None of the code you’ve chosen to turn off will be compiled and you will have just what you need.    


    At the top of this article I tried to explain what I considered a CSS framework to be. Frameworks are something we should all be using, and all be collaborating on. Just because we have the ability to start from scratch, doesn’t mean we should. We’d be better off spending our time building the cool stuff on top of our projects that sets them apart from the rest; not tirelessly chipping away resetting CSS or building umpteen grid systems.

    A framework should be a major part of your build setup along with grunt files and JavaScript libraries. Done right, it can be an amazing tool to get you off the ground; I’m sure if you needed jQuery for your project, you wouldn’t set about writing it for yourself.

    I’m sure most developers have some kind of CSS out there they place in every project. So take that time and build it into a robust framework that can benefit you – and others.

    Author: Matthew Fowles

  7. <h1>Learn to code</h1>


    <p>Some online tools that will help you improve your developing skills</p>

    If you work with developers day-to-day and sometimes struggle with the jargon, or if you’ve decided to take the plunge and become a dev yourself, these tools should be of interest…



    My favourite tool is Treehouse. Treehouse is an online non-stop growing education platform. Its main teaching approach takes the form of video tutorials in which a group of distinguish professional developers cover a wide range of content: web development, programming using different languages, iOS or Android development, and lately even business or soft skills.

    All the courses start from beginner levels and increase as you progress. Videos are alternated with questions and objectives in which you need to prove what you’ve learnt in order to access further content. They have recently developed a workspace where you can practice in-browser, so programs or text editors are no longer needed. Content is being added weekly too, so the library never stops growing.

    Another positive is that due to the points system for completing courses it’s really easy to follow your progress – or indeed your colleagues’. Learning can became a little competitive. (See? Coding is fun!)

    The main advantage of Treehouse is that they use videos; visual learning is more effective than reading for many.

    The only downside is that it’s not free; but such a great learning platform well deserves paying a membership. And there are a few free courses where you can try before you buy.



    A free alternative to Treehouse (although the content covered isn’t so wide and its courses are purely focused on web development), Codecademy uses a totally different approach. Instead of explaining the concepts by using videos it uses a “learn by practising” methodology.

    The screen is divided into three sections: the main one is a text editor in which you write the code for solving the different problems they suggest to you; on the left is the theory and instructions for each exercise; and on the right side of the screen you can preview the results of the code you have just written using the text editor.

    It also has a points-and-badges program which rewards your perseverance while learning, tracking the days you’ve coded and the days on which you’ve obtained the most points. You’re not going to create a competition with your colleagues, but there is no better rival for learning than yourself.

    Codecademy doesn’t cover as much as Treehouse but would definitely be a preferred tool for those who find it easier and more enjoyable to “learn by doing” – actually coding instead of reading or watching videos.

    And last but not least,


    Code School

    Code School. Another “learn by doing” online teaching platform, it’s not for free but there are some free courses available.

    In Code School there are two ways to improve your learning: following a path, or choosing the courses you’re interested in and (literally!) charting your own course. All the courses are grouped on five paths: Ruby, JavaScript, HTML/CSS, iOS and Electives.

    The approach here is a mixture of the other two tools’, using videos for explaining the theory but also providing plenty of code challenges you can complete directly in the browser as well.

    Code School has the funniest interface of all them; all the videos start with a song and they try to make you feel like you’re playing a game each time you start a course, mixing videos with an interactive console and writing code into your browser, etc.

    I’d like to go deeper, but as yet I’ve just tried the free version. All I can say is that, as far as I’ve used it, I have the feeling Code School starts from the basics (maybe even too basic for some people) but also has the videos and challenges with the biggest game-component of all the platforms, which I find to be very enjoyable and conducive to learning.

    Becoming an expert

    If all this new knowledge has stirred up feelings of determination inside you and you’d like to get more involved with the developing community, the next step is to visit two absolutely essential sites: Github and Stack Overflow. Then you can start sharing and learning from other colleagues online.

    GitHub is the world’s largest open-source online community. It’s based on personal repositories published online where everybody is able to collaborate on the improvement of the code.There are also forums and wikis where you can find the answers to your problems or keep up-to-date on your coding skills.

    Stack Overflow is not an online repository as such, but it’s a huge community online that works on a question-and-answer basis – making it the best place for getting trustworthy information.

    Other links to keep in mind, as they may be a great help at some point, are:

    1. CSS-Tricks, great for making your sites look pretty using the best CSS.

    2. HTML5 Doctor, an online resource for knowing everything about HTML5.

    3. Can I Use, a site that’ll help get your code working properly in the browsers you need.

    Learning web development is now available to everyone.

    What are you waiting for?

    Author: Ana Cuesta Biel.

  8. The Internet’s Lost Colours

    A short interlude into why Facebook is blue, why I never know if my football team has lost or won, and how a simple tool is going to save your client thousands of pounds.

    Growing up I never realised that I had a colour vision deficiency. Diagnosed with Deuteranomalous when I was very young, it didn’t limit me in any way; I just didn’t notice. In all honesty, I had forgotten about it until now.

    A few days ago, during our daily team banter, one of our technical directors mentioned a free simulator visual deficiency tool called Color Oracle. The tool simulates in real-time how people with a colour vision deficiency see. I was fascinated mainly because I vaguely remembered that I might be colourblind.

    I took an online test called Ishihara (I recommend you try it out, it only takes a few minutes). Within minutes it confirmed my forgotten truth – I am colour blind. Staring at test plate after test plate, I couldn’t see the numbers, with my colleagues looking on perplexed and with interest.

    At Cohaesus we get to implement the carefully crafted designs and UX of many leading agencies but I am not sure colour-blindness gets the consideration it deserves.

    We all know that building highly accessible websites is best practice, but how many designs are tested using tools such as Color Oracle? Not many is my guess.

    A good example of missed testing is from the BBC – somewhat surprising given their reputation for championing accessibility.


    Above: Normal colour vision


    Above: Deuteranopia vision via Color Oracle

    The table is quite clear and I can read all the information easily. The problem occurs for me when I view the last 10 games played by each team. I cannot clearly view the difference between the colours red and green used in the table. The indicator icons used are way too small, resulting in low contrast for someone with a colour vision deficiency like mine.

    Another example that affects me when visiting websites is in selecting colours with colour-picking tools (e.g., personalising the design on Twitter). Did I really want the colour I selected, or select the colour I wanted?

    Online forms can also affect me when incorrect or incomplete fields display errors using red or green text. The impact of ignoring color deficiencies starts to ramp up in these scenarios.

    Now you might be thinking “What’s the problem? After all, it’s only a few people.” But actually, the numbers may surprise you. Colour Blindness is very common globally, with 1 in 12 males and 1 in 200 females being affected. According to Colour Blind Awareness, almost 2.7 million people in Britain (4.5% of the total population) are colourblind; of which the majority are males. Apply this to the recently released figures for Q4 2013 by Office of National Statistics, which show 87% (approximately 44.3 million) of the UK’s adult population use the internet, and that’s roughly 2 million internet-users who are colourblind in the UK – all of whom will face difficulties when visiting websites.

    What’s the cost?

    Assuming you have some type of funnel, arbitrarily your abandonment figure is 60%. Up to 4.5% of that could be due to issues with the experience related to color blindness. Assuming 10,000 visitors start the funnel, that is approximately 270 lost conversions!  

    Now this is some napkin maths. But for a few minutes of extra effort integrated into your design and build process, you could potentially recover a significant amount of revenue for your client. Obviously, your mileage will vary.

    The fix?

    Simply add a tool like the Color Oracle into your standard usability testing. If you are a project manager/producer, add it into the UAT testing too, just to make sure. Most fixes are pretty simple to implement and better done before go live.

    Oh, and why is Facebook blue? It turns out that Mark Zuckerberg is colour-blind.

    Author: Deepak Ark.

  9. Yikes! We entered the Sport Relief London Mile!!

    We are really excited to announce that part of the Cohaesus UK team will be participating in the Sport Relief 2014 event on Sunday 23rd March at Queen Elizabeth Olympic Park. Sport Relief is the biggest fundraising event in the UK designed to bring the entire nation together to participate and raise funds for people who aren’t as lucky as us both in the UK and other parts of the world.

    Our team will take part in the running event called ‘The London Mile’. Given the options of running 1, 3, or 6 miles, we all must be crazy as every team member has chosen to run the longest run of 6 miles! Our target is to raise £1,000.

    We all know it isn’t as easy as it sounds, so preparations are well underway to ensure the event is completed by everyone. We are really looking forward to the run and knowing that we can contribute to make someone’s life a little better.

    Please do sponsor us, via our Cohaesus team mile page: http://my.sportrelief.com/sponsor/cohaesus

  10. Which Web-Design Trends Will Rule 2014?


    There are many elements to a great design. A sure-fire way to make your site look clean, contemporary and up-to-date is to jump on the bandwagon and copy a trend that’s being used by the top brands.

    In this article, we’ll take a look at web-design trends that are likely to dominate 2014. They may not all be entirely new, but they are all highly likely to reach mass-usage this year.

    And if you think we’ve missed out any key trends, please feel free to leave your tips in the comments below.

    Flat Design

    Flat design has been around for a while. In fact, Dieter Rams’ designs since the ‘70s follow many of the same principles. Said principles have been in use in digital for the last few years, with Windows 8 as the stand-out example.

    However, it really didn’t reach trend status until apple released iOS 7; now a significant proportion of the PSDs we’re sent by our clients have dropped the drop shadows and gradients.

    Flat design is non-flashy; the text is concise and to the point; the buttons and links are clear and noticeable. This more minimalist approach can help users easily find what they’re looking for. Making websites user-friendly should be on top of every company’s agenda, and flat design, when used well, can go some way to meeting these requirements.


    We delivered many responsive site-designs throughout 2013, and the tools and methods to build them have matured in a short space of time.

    It’s difficult to say that this is a ‘trend’ in a way (or limit its influence to one year) as it such an important development. Retailer John Lewis recently reported that over a third of their web traffic on Christmas day 2013 was from mobile and tablet devices.

    That said, it’ll still be one of the most important factors being considered in site design in 2014. We’d even go so far as to say that any site built in 2014 that doesn’t consider mobile (which means at least some responsive too) is a failure.

    Video backgrounds

    With more powerful web-browsing devices and faster internet speeds, online video is inevitably becoming more important. This is moving beyond an embedded YouTube player on a page, and seeing video being more deeply embedded into the site experience.

    This trend probably isn’t suitable to serve all types of projects, but we still reckon it’ll be huge in 2014. The Variousways website is a perfect example to showcase what can be achieved with this: http://www.variousways.com/

    Richer content

    Users have higher expectations from websites they visit nowadays. Providing richer content experience will be vital in 2014 to ensure companies can engage well with the audience and continue to attract a high volume of traffic.

    A combination of audio, video and animations along with many other digital elements ‘richer content’ allows web designers to provide visitors with an extraordinary experience. The Kennedy and Oswald website provides a great example of the richer content experience: http://kennedyandoswald.com/


    Author: Deepak Ark.