Is it good to enforce a CSS code style guide?

The goal

Have SCSS stylesheets that look as if there written by 1 developer while working in a team.

Is this even an issue to begin with?

Frontend developers tend to be strict on the way they write CSS/JS but that’s not the main reason. Having organized and clean code is key for fast iterations. Everyone wants to be Agile these days.

If all the files look the same it’s easy to read and easy to pick up again in the future should the project require more phases.

How did we do it?

All recent projects at TBSCG have a build process (Grunt) to compile SCSS, JS, HTML, etc. So we simply included a linter task in that process.

We created a rules file to specify what want we wanted to enforce. Things like:

  • HEX color codes should be in variables. And even better, all in 1 file.
  • Spaces between brackets and class names.
  • Break lines between rules.
  • No !important anywhere 😎
  • Leading zero ( .5 vs 0.5 )
  • Order of the properties (did you know ordering the properties generates smaller gziped files than unordered?)

We only add this linter task to the dev build, so it will never crash in production should we commit a file with errors.
However, with the dev task Grunt will stop as we configured this to be errors not warnings.

Alright, I know what you must be thinking. In some cases hacks might be necessary (we all know how pesky CSS can be), there is a special markup to bypass the enforced rules. It should be used in very special cases. Otherwise the linter makes no sense.


Because code speaks better than me. Here are some examples of what I mean.

The following code fails to comply with the linter rules. Thankfully Atom knows that and highlights the problems even before I run my Grunt task, so I can fix them as I go.


When running the Grunt task (in case your IDE does not warn you). Here’s the output:

SpaceBeforeBrace: Opening curly brace `{` should be preceded by one space

PropertySortOrder: Properties should be ordered bottom, display, position, width, z-index

DuplicateProperty: Property `bottom` already defined on line 4

SpaceBeforeBrace: Opening curly brace `{` should be preceded by one space

DeclarationOrder: Expected item on line 14 to appear before line 12. Rule sets should be ordered as follows: `@extends`, `@includes` without `@content`, properties, `@includes` with `@content`, nested rule sets

Now here’s the code fixed to pass the linter. Looks better, doesn’t it?


Using it in a real project

Everything is great and all but can this be used in a real project? Does it make sense? Is it productive?

I won’t deny there’s a learning curve for those developers who are used to write code without any strict code style. I truly believe this is good in the long run. Once you get used to the rules, you’ll use them as you type.
The IDE is also important, you need to install the proper plugins to detect the linter config file, so it warns you without the need to run Grunt. In our case Grunt is our second line of defense. Your own editor should be the first to let you know.

Here’s the opinion of Artur Spulnik a Web Developer at TBSCG who worked with me on this real experiment:

Thanks to these principles code was much easier to read and maintain. I had to summon all my knowledge about the alphabet to correctly queue all definitions. There was a lot of pain in the beginning with operators order, and those wild spaces (or lack of them). But with practice comes success and I felt boost of productivity. Especially in terms of teamwork.

Have you ever written code this way? If you haven’t, will you give it a try?

Can we have cleaner HTML with Bootstrap?

The other day a colleague consulted me about CSS frameworks:

The client doesn’t want to pollute the HTML with those Bootstrap classes

I understand. If you ever used Bootstrap you know each HTML element might have 3, 4 or more classes. For columns, colors, custom styles…

Can we use custom classes with Bootstrap features?

Yes! You can have clean HTML. Only adding your own more-semantic classes while using the power of bootstrap buttons, grid and all its other features.

I’ve created an example achieving the same result one with core Bootstrap Classes and the other with Custom Classes. Stick with me until the end for the conclusions.


HTML with Custom Classes

The code below might be more readable, you can understand what the element does or contains.

<section class="container">
 <div class="twitter-widget">

 <div class="twitter-header">
 <div class="twitter-header-content">
 <h2>My Twitter Widget</h2>
 <!-- /.twitter-header -->

 <div class="twitter-actions">
 <div class="twitter-buttons">
 <!-- /.twitter-buttons -->
 <a href="#" class="twitter-button"><i class="fa fa-twitter"></i> Tweet this</a>
 <!-- /.twitter-actions -->

 <div class="twitter-content">
 <p class="twitter-content-image">
 <img src="" alt="" class="img-responsive" />
 <p class="twitter-content-text">
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br><br>

 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br><br>

 It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 <!-- /.twitter-content -->

SCSS with custom Classes

Here’s all the SCSS you have to write to make your classes behave like Bootstrap components. It’s not pretty.

@import "../vendor/bootstrap-3.3.6/bootstrap/_mixins";
@import "../vendor/bootstrap-3.3.6/bootstrap/_buttons";

.twitter-header {
 @include make-row;

.twitter-header-content {
 @include make-xs-column(12);

.twitter-content {
 background: $brand-primary;
 color: white;

 @include make-row;

.twitter-content-image {
 @include make-xs-column(12);
 @include make-sm-column(6);
 @include make-md-column(3);

.twitter-content {
 margin-top: 1.5rem;

.twitter-content-text {
 @include make-xs-column(12);
 @include make-sm-column(6);
 @include make-md-column(9);

.twitter-actions {
 @include make-row;

.twitter-buttons {
 @include make-xs-column(12);
 @include make-sm-column(3);
 @include make-md-column(2);

.twitter-button {
 @extend .btn;
 @extend .btn-primary;
 @extend .btn-block;


HTML with Bootstrap Classes

Now I’m going to use all core classes and 1 custom.

If you’re comfortable with Bootstrap you’ll identify them and know what’s going on without having to look at the rendered page.

<section class="container">
 <div class="row">
 <div class="col-xs-12">
 <h2>My Twitter Widget</h2>
 <!-- .col-xs-12 -->
 <!-- .row -->

 <div class="row">
 <div class="col-xs-12 col-sm-3 col-md-2">
 <a href="#" class="btn btn-primary btn-block"><i class="fa fa-twitter"></i> Tweet this</a>

 <div class="row bg-primary margin-top-1-5">
 <p class="col-xs-12 col-sm-6 col-md-3 margin-top-1-5">
 <img src="" alt="" class="img-responsive" />
 <p class="col-xs-12 col-sm-6 col-md-9 margin-top-1-5">
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br><br>

 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br><br>

 It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 <!-- .row -->

It could be worse than the example above, I’ll give you that. We could have even more classes and “polluted” HTML. However, by using the core classes in my example I just had to write a single CSS class!

SCSS using Bootstrap Classes in HTML

I needed a custom margin on some elements, so I created a generic class for it.

.margin-top-1-5 {
 margin-top: 1.5rem;



The client shouldn’t care about the HTML

That’s our job, we as developers, can find the middle ground where the HTML is readable while keeping the CSS as performant as possible.

From the developer point of view

It’s a hassle for Frontend and Backend developers. If they’re already familiar with the core Bootstrap classes they can create components without any new CSS.

On the other hand, if you only use custom classes you’ll need someone to create all the new component custom classes, add it to the CSS pack and then build the HTML for it.

CSS footprint

It’s obviously heavier to have all those styles for each component. Here’s the result of my testing:

  • 309kb with this custom component using Bootstrap includes.
  • 289kb using Bootstrap Classes.

How much weight would we add with 10 or 20 custom components?

Your team needs Slack

You just don’t know it yet

At the Barcelona office we adopted Slack as our team communication tool for a couple of months now.

I understand changing the way your team communicate with each other is not easy. New interface, new options… in this case, the small burden comes with lots of features.

At the time of this writing all conversations for the Barcelona team happen in Slack except for calls, we still use Lync for audio, video or screen sharing.

Edit: Slack now has Calls! We’ve already tried and it works nicely. For the free accounts you can do 1 on 1 calls. For channel/group calls you need to have a paid account.


So, why is it so good?

Here are my top reason why we love it so much:

It’s free and it works everywhere

You heard me, the cheapest plan is free and it gives you enough freedom to keep it that way. If you need more, you can always upgrade. Here the pricing plans.

You can use it in your browser (with push notifications), install a desktop app or have it on your mobile too. Cross platform is key.


You don’t have to be online

As a user you can write in a channel even if you’re the only one online. Your team has gone home already but want to send them a message for them to see tomorrow morning? Leave a message, they’ll catch up the next day when they open up Slack.

Oh, it will also send email notifications mentions you haven’t yet seen.


Persistent chat history

The great thing about slack is the persistency of the public and private chats. The messages from yesterday, or from last week are there for you to check. The free accounts have a limited message archiving (10,000 messages).

Yes, you have this feature too in Skype groups but can users of your team freely join that group? That takes us to the next feature…

General chat rooms

You can create open/public channels for everybody in your team to participate.

Imagine a new hire starts in your team, once you give him his account he’ll have access to the entire chat history. This person can now catch up to previous conversations and get up to speed without you having to send him old project emails or hard to find documentation about it.


Project chat rooms

You can also create private chat rooms, invite only conversations that could spin around certain project, for example. The team members involved would have a place of discussions and information sharing.
New designs are available? Just drag and drop the PSD’s in there.
New ticket in JIRA? It will show up there.
No more sending emails with all the team members in CC, email chains are awful to read, email signatures take more space than the actual reply, the attachment might get lost… It’s truly horrible.


Slack can be integrated with third parties

JIRA? Confluence? SVN? Git?

Imagine you would receive slack mentions when a new JIRA ticket has been raised. Or when someone has pushed code to the trunk.
Many integrations are possible, check out the Slack App Directory (it includes integrations made by third parties too).

Bots, where fun (and productivity) begins

Slack comes with a @slackbot that can help you out.

  • Reminders: you can create reminders that will be shown at certain time. Either for you, for a team member or for the whole channel.
    For instance, you could tell @slackbot to remember to the #General channel: “Meeting in 10 minutes!” at certain time.
  • Tasks: used in the same way as reminders you can set tasks for someone else. For instance @Guillem could tell @slackbot to create a task for @Ricard “Post this article in our Website”. Then once @Ricard marks that task as done @Guillem will get a notification.
  • RSS Publication: you can set RSS Feeds to be published in channels automatically.

@Slackbot is also your personal notepad. You’ll always have a private chat with the bot, there you can write notes to yourself, upload files… It can be searched, shared and reminded to you in the future.

You can even program your own bots (or @slackbot). We have created Bender a robot that generates memes and makes fun of you. Adding little fun to boring Mondays can create a better work environments!


Other great features

  • Edit sent messages: written too fast and sent a typo? Edit your previous message (we actually set up a time limit for message editing, otherwise someone could edit past conversations and alter the meaning of it)
  • Send code snippets: this is great. How many times you tried to send a piece of code via Lync and failed? Slack comes with a snippets feature (you can choose the code language)


  • Create posts: need to write something longer? Write a blog post inside Slack!
    You can even create a public URL to share it outside of Slack.
    This post can obviously be shared with anyone inside your Team.
    Need collaboration? You could allow the members of your team to edit the post.


  • Share any media: When you share a URL either for a website, an image or a video, Slack will inline a preview.



Slack API

Since at TBSCG we’re developers we should integrate all our tools into Slack. With the Slack API we can hook up our existing services and publish update to selected channels.

More on the Slack API here.


It’s free. Try it, don’t wait and have fun working.

What could your company do?

Say you have different branches, each one could have their own private rooms. Aside from general company-wide open rooms.
You could also let the users create their own private channels. For projects, for certain technologies, teams (Frontend, Backend, Systems, HR, Managers, Design…)

The possibilities are pretty much endless.

Did you know about Slack? Have you used it?


Killing the natives apps, for good

I know it’s a bold statement but let me show you what I’m talking about, you’ll be amazed.

Developers call them Progressive Web App because:

  • Progressive: It should work for every user, regardless of browser choice (we’ll see about that). The idea should be that all browsers will catch up, eventually.
  • Responsive: Hello? 2016 is calling. Although it’s a must nowadays some customers still don’t get it.
  • Connectivity independent: Offline websites? You got it.
  • App-like: the user will have the same feeling as in a native app.
  • Safe: HTTPS only.
  • Discoverable: Search engines will know this are webapps, we’ll make sure of that by using a valid W3C manifest.
  • Push Notifications: that’s right, this is killer.
  • Installable: The user will be able to “install” this on their homescreen via a browser UI, they’ll launch it like a native app.
  • Linkable: just share the webapp URL and you’re done. No more searching inside App stores.

Don’t want to read? Watch this instead

This 30 minutes video will dive into Progressive Web Apps, check it out if you prefer to hear if from Google Developers.

First of all, Add To Home Screen

Chrome has a built-in UI for adding your webapp to the homescreen of your device (in the example below, an Android phone). It’s great because a consistent UI for this action will be more friendly to users.

More on the criteria to enable it here. (HTTPS, manifest…)



Theme Color

Very easy, great impact. Everybody (including myself for newer projects) are adding a simple meta value to change the browser color.

More information on Theme Color here.


Launch Style

Need your webapp to be fullwidth? Like a native app? No problemo amigo.

More information on Launch Style.


Splash Screen

This is actually pretty awesome. You can create a “loading” screen that will show immediately. User Experience (UX) couldn’t be more awesome, for being a website!

More information on Splash Screen.

On the example below you can see a solid background color. In fact, you can also show a centered icon and the web app name under it (set by the web app manifest file).


Push Notifications

I had some doubts myself about this. Here’s some clarifications I’ve found:

The service works even if an app or extension isn’t currently running. For example, calendar updates could be pushed to users even when their calendar app isn’t open.

From Google CloudMessaging.

Because I’m skeptical I’ve run a little test:

  • Opened in Chrome on my Android phone:
  • Accepted to receive push notifications.
  • Closed Chrome, meaning shutting down the application.
  • Running the provided command from my computer terminal to trigger the push notification.

Awesomeness happened. Chrome showed a notification to my Android, even without being open or running.

As you can imagine, we depend on the browser adaption of Service Workers. In Android, for instance, only Chrome, Firefox (44) and Opera have support.
Next time someone tells you Safari or Microsoft Edge are “modern” browsers punch them in the face.

Blame also Apple’s iOS (iPhone), at the time of this writing Chrome for iOS does not have the freedom to use Service Workers. So, it’s the phone operating system that prevents us from moving forward. No surprise there knowing how many millions of dollars Apples makes from its App Store.



At this point I hope I’ve awaken a feeling of curiosity for progressive web apps. I feel like the web is the future of mobile. Not just me but big names such as Google. Native web apps are a pain in the butt, why would you need to learn other languages and technologies to build for Android, Apple, Windows Phones…?

If you already know how to build websites, the learning curve should be way shorter than learning how to code for iOS, for instance.

Eliminating the friction between the user and the service you provide is key for better engagement. One website to rule them all, no matter in what platform or screen size your user is in. No more getting out of space in your phone due heavy apps.

The web, and the future of it, is fascinating!

Want even more?

Creating a UI for just modern browsers

TBSCG was Platinum sponsor for the HP Engage conference

My first question after being asked to build a demo site for the HP Engage conference was:

– Does it need to work on Internet Explorer?

Now imagine my reaction when they said: only with modern browsers.

With IE out of the scope I started researching what UI elements could we use to give this site a boost. I think we could’ve gone farther if we had more time, even so I’m very happy with the result.

Drag and Drop

Yes, we could’ve added a boring “add to cart” button but since we had no browser restrictions using a Drag and Drop UI for adding products to the cart felt right. Not only works on Desktop but on touch devices as well (mobile and tablet).



Speed was a key factor for this UI, we wanted the page reloads down to the minimum so we used Ajax for all the server calls (add to cart, remove from cart…).

Because of that we required a way of letting the user know what happened, was the action successful? Was there an error occurred?

For that we built a simple notification system, a few lines of CSS and even fewer lines of JavaScript.


CSS Spinners

When a user interacts with the cart and other elements of the page he needs visual feedback. We’ve created this neat CSS spinner to let him know something is going on.

In ancient times developers used to include GIF animations. No more.


Offcanvas Cart

Because we can and because it’s cool we’ve added an off-canvas cart. When you click on the icon the cart will show up sliding from the right. It’s fast and it does not require any server call or page reload.


Sweet input fields transitions

So when you focus on the form input fields you’ll get a neat transition. It uses CSS3 transforms to create this visual effect:

input transitions

Additionally to all this the usual suspects, responsive all the way from mobile to desktop with a couple of breakpoints, custom font icons…

From what I heard, the demo was a success.

Templating HTML in Frontend Development

Building static HTML’s it’s fun (yes, it is) but it can become a boring copy & paste task sometimes. That’s why today I want to introduce a template engine for HTML.

What do I want to achieve?

  • Write less HTML.
  • Faster HTML maintenance and bug fixing.
  • Better experience when working with 2 or more developers on HTML’s.
  • Faster prototyping, faster delivery.

jinja template engine


There are many template engines out there. The one I chose, based on who uses it, is Jinja.

Since we’re not going to use the full potential of the template engine I don’t think it matters much which one you pick, as long as it has a grunt plugin.

Jinja2 is a full featured template engine for Python. It has full unicode support, an optional integrated sandboxed execution environment, widely used and BSD licensed.

More information and documentation on its website:


The feature that got me into using this is the include. You already know how this work.

It’s a must in order to follow the DRY rule: don’t repeat yourself.

{% include "includes/_head.html" %}

... specific page content ...

{% include "includes/_footer.html" %}

Before using templates if I had to change an item on the menu component, a class or a tag that was used in all pages, well… I had to do it manually for all pages. Maybe for some cases I could do a “find & replace”. But in any case, still a hassle.
Now I just edit the template file and all the pages are recompiled instantly with the new change.


We can also set variables:

{% set pageTitle = "Home" -%}

Then use it on our templates as so:

<title>{{ pageTitle }}</title>

I use this mostly for the page meta title. I set the variable before including the _head.html template so that it will inherit the value. It allows me to have just 1 file for the head HTML but at the same time customized for each page.


A grid view of images? A list of products?

For all those cases we can use a loop. This will allow us to just write the item/component once. The maintenance will be really easy afterwards.
Imagine using the old way and having a component repeated 20 times in the same page.

You need to change a class? Need to add new markup to the component?

If you’re using a loop, just change it once.

{% for _ in range(0, 10) -%}
 <div class="card">

 <img src="" alt=""> 
 <a href="#">
 <h1>Title Link</h1>
 Some Text
 <a href="#">Button</a>

 <!-- .card -->
{% endfor -%}

With the code above we’ll repeat the card component 10 times. This is a real time saver when I have to modify the component in any way.

Loops with Arrays

Things can get very interesting. Say you want to create a menu or a component but with unique text for each item.

We can use the for statement and loop through an array

 {% for item in [
   ["Title 1", "red"],
   ["Title 2", "blue"],
   ["Title 3", "green"],
   ["Title 4", "yellow"]
   <li class="{{ item[1] }}">{{ item[0] }}</li>
  {% endfor -%}

It will be rendered in:

  <li class="red">Title 1</li>
  <li class="blue">Title 2</li>
  <li class="green">Title 3</li>
  <li class="yellow">Title 4</li>

Although this is a very simple example the component we want to repeat could be very complex, markup wise.


None of these awesomeness would make any sense if we weren’t able to build the HTML on each file save.

Using a grunt task we can watch over the source HTML files and compile them. It’s really fast so no development delay.

Check out grunt-jinja for more information.

Folder structure

Pretty straight forward:

  • /html/
  • /html-source/includes/_head.html
  • /html-source/includes/_footer.html
  • /html-source/homepage.html
  • /html-source/product.html
  • /html-source/login.html

It can be anything since you’re free customize the jinja grunt task to fit your project.

What does this mean for the Backend Developer?

Nothing. Nada. Nic. You will still have a folder called html for the compiled files.

Just remember, if you need to change the static HTML’s you will have to update the html–source folder and run the grunt task. Otherwise bad things will happen.


Additionally to all this, since we’re splitting up the files we can easily have multiple developers working on HTML’s without stepping in each other toes.
One can work on the _head.html file, while the other on the homepage.html file. Both will be able to commit their code and do changes without having to merge. Pretty sweet.

I believe using this templating engine will boost your productivity while the impact on your workflow will be minimal. I’ve already used it on a real project and it has greatly improved my delivery and bug fixing times.

Your thoughts?

Chrome DevTools: not just for Developers

First question: what browser do you normally use when surfing the web?

If you said Internet Explorer you can close this tab right now, shutdown your computer and cry in shame.

Jokes aside, you’ll get the best possible web experience using Firefox or Chrome, period.

I’m a Chrome fan myself but it’s well known it sometimes drains battery life or uses too much RAM/CPU. In its defense they’re working very hard every version to fix this major issues. Furthermore, in the latest Chrome 45 the memory consumption has been reduced by an average 10%.

I use Google Chrome on a daily basis to render my HTML slices and debug any web page, it is my first choice. Why? The Chrome DevTools.

All hail the Chrome DevTools

Chrome’s built-in authoring and debugging tool.

If you’re a developer you already know what I’m talking about. If you’re a power user you might have heard about it or even seen it.

Basically it’s a tool that allows us to do magic inside our browser. We can see the source code, see how long takes to load a page, what scripts is it using… It has a lot of goodies. Honestly, there’s options I’ve barely used or never seen.

I would like to do a quick introduction to some of the tools I use when working on projects to speed up development. Some of this tips can be used even if you’re not a developer. A Delivery or Project Manager can make use of them to do their jobs.

Emulate Mobile or Tablet

On of the things you might want to do is see how a website is displayed on a mobile device. If you don’t have a real device with you, you can use the DevTools Device Mode.

If comes with a set of predefined devices that not only will resize the screen to the device size but will also change the User Agent to actually trick the site into thinking you’re using the real device.

Even more, you can also emulate how a website would load on a 3G or 4G network.

Live change any HTML

You might want to try a different heading text real quick without having to log in to your CMS and actually doing the changes.

Use the DevTools to do the changes live:


Pick any color

Long gone are the days when we had to use a browser extension or Photoshop to pick colors from a website.

The DevTools will help you identify and change element colors with ease. Apply live changes to the site without exiting your browser.

Just select an element with a color, click on the color box and hover anywhere:

Hover or Focus states

Some CSS effects are only visible when we hover our mouse or click on an element. For instance a menu or a dropdown.

With the DevTools you can select an element, go to the pin and mark the “hover” state, it will simulate a mouse hover for you.

Page size by type

Speed and page size matters. Now more than ever with everybody browsing through a mobile device.
It’s a good selling point and practise to check your website footprint.

To do that open the DevTools, go to Network, make sure the Filters are turned on and then filter by type.
You can see how much Kb’s of CSS, JavaScript or images, among others, is your site loading.


Unminify the Minified

A little extra for the developers out there who might not know this trick.

Open the DevTools, click on a the CSS or JavaScript and then look for the {} icon on the bottom left. It will unminify the content for you.

Your thoughts

Have you already used the DevTools before? Will you use it from now on?

The Future of Icons is SVG

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

At this point I’m sure you have heard about font icons. You know, these icons everybody uses nowadays for social networks or just about anything a designer can think of.


On our website we use them too, they’re great. Lightweight, easily customizable with CSS and specially retina ready. They will look good on any device.


They have some issues

Font Icons are not all that great. The styling can be tricky in some situations, they depend on styles such as:

font-size, line-height, vertical-align, letter-spacing, word-spacing

Also, in some cases they might look different depending on the client browser. As the font icons are treated as text.

Let’s kick it up a notch

On the scale of cool-web-tricks regarding graphics we have the following:

  1. Images: stay away from me.
  2. Font Icons: we’ve had a good time.
  3. SVG Icons: hello, gorgeous!

Some font icon packs already include an SVG version of the font that will be served to compatible browsers. That’s not what I want to introduce today though, I’d like to show you a more manual control over those SVG’s. Simply throwing a bunch of fonts into the project is not how the cool kids do it.

Take a look at what’s possible:


More love from SVG’s

Regarding accessibility SVG support you can use title and desc tags:

<svg xmlns=>
 <desc>Large red circle with a black border</desc>
 <circle cy="60" r="55" stroke="black" stroke-width="2" fill="red" />

Also, the compression by gzipping SVG’s is better than compressing fonts. However, SVG’s tend to be bigger. You’ll have to take decisions when using large set of icons, it will depend on the project and requirements.

Hang on to something, here comes your first SVG

Because I don’t want to go easy on you we’ll start with a big fat SVG:

<svg version="1.1" xmlns="" xmlns:xlink="" x="0px" y="0px" xml:space="preserve" 
 width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;">

 <path class="first" d="M50.077,98.919l-2.78-1.024c0.219-2.027,0.147-4.093-0.234-6.146l2.684-1.237c1.677-0.771,2.412-2.765,1.639-4.441
 l1.297-3.515C52.695,101.488,51.807,99.56,50.077,98.919z M31.669,107.662c-1.754,0.809-3.615,1.216-5.533,1.216

 <path class="second" d="M83.179,108.5l-1.547-0.569c0.123-1.129,0.082-2.28-0.131-3.423l1.494-0.689c0.935-0.428,1.344-1.538,0.913-2.473
 C84.636,109.932,84.141,108.856,83.179,108.5z M72.929,113.37c-0.977,0.448-2.012,0.677-3.08,0.677

 <path class="third" d="M118.269,49.597l-4.673-1.725c0.369-3.407,0.248-6.882-0.393-10.337l4.514-2.077c2.816-1.294,4.052-4.647,2.754-7.468
 l2.184-5.911C122.671,53.914,121.178,50.67,118.269,49.597z M87.322,64.294c-2.95,1.357-6.078,2.046-9.301,2.046

Ok now, don’t be scared, it won’t bite you. This code could be inline in the HTML or on a separate .svg file.

This SVG was probably generated with a desktop software, Illustrator or something similar. Although, if you need how they work you could code basic forms by hand.

If you take a deeper look you’ll see each path has a class. We’ll use them to style it like so:

.first {
 fill: green;

 fill: red;

.third {
 fill: blue;

With SVG you can even use stroke-width and stroke to style the border of each element:

 stroke: #c0392b;
 stroke-width: 2px;



Final thoughts

There is no SVG support in IE8 and in some old Android browsers. If needed, detect the browser and create a fallback.
In the other hand, if you need old browsers and you don’t actually need the extra customization SVG has to offer, stick with font icons. Once your clients drop IE8 from their requirements, you can do the upgrade.

Did you know about SVG icons? Are you using them already?


Why your project needs up to date HTML slices

Ok, here’s the situation: you’ve started your project, currently your team has frontend developers and backend developers. Everyone is happy and doing their parts.

As frontend developer I can tell you that the fastest way to slice or prototype pages is working with plain HTML files. It allows you to work with your (S)CSS and JavaScript files without any issues of caching, server-side compiling, etc. It just works.

What happens when the pages are ready for implementation?

You guessed it, it goes to the hands of the backend developers who will do their magic: create the components for choose your favourite CMS here.
At this point we’re still happy, everything is working just fine and the project will be delivered on time.

First iteration

A couple of days have passed and some JIRA tickets have been raised: we need to fix something in the frontend.

No problem, the frontend developer will open up the HTML files and do the proper edits.

Iteration two hundred seventy six

At some point between revision 1 and revision 276 someone updated the backend CMS component and not the HTML static file. Probably the change was simple enough, there was no need to involve any frontend dev.
That is actually fine! It’s way cheaper, project-wise, and faster to develop.

Now, be careful, that decision might cause a lot of trouble in the future, when new major features will need to be added. An out of date slices will force us to download source files from production. We all know those files can be messy, with random ID’s everywhere, extra empty divs, inline styles, uncommented code…

So, what’ the proper way of applying frontend changes?



I would add that in case of a JavaScript change, even if we’re using Grunt or similar you might be able to do the change yourself. The issue might be that not everybody has it installed locally. Although I would certainly recommend it 😉

Also, if the project has enough budget to have a frontend developer on board, the above workflow is useless. Just send everything to the frontend dev.


Try finding balance!

This best practices should not be a burden, if you get used to it I think you’ll get real benefits. If someone is capable of changing a component’s markup, is also capable of editing plain HTML files.

You should always keep your static HTML files up to date. Not with content changes but markup. I’m not saying it’s easy or cheap but it’s the right way to iterate. Not all projects will have the budget or client will to maintain this code standards. We, as professional, need to advice and convince our clients this is mandatory. In the end, it will probably save them money.

I hope now you have better insight of how you can be more productive and have a better future-proof code in your projects.

Have something to add? Leave a comment down below.

Save yourself some time: Automating tasks in Frontend Development

Working on a frontend project you probably have dealt with CSS and JavaScript files. How do you handle those? Do you minimize them? Do you combine them?

I’m sure you’re aware of the benefits of minifying assets. You can save a lot of Kb’s from your CSS and JavaScript files. Nowadays performance matters, it really does. With more and more mobile users every day, your site should be lightweight.

How do we minify and/or combine assets before moving your site to production?

First of all, here’s a thought about folder structure for your project:


I’d recommend using a folder structure similar to this one. Grunt does not force you to any specific folder structure, you’ll have the freedom to set the output folders on each task.

You’ll be doing all your work in the source folder. Your files will be commented, uncompressed and separated into components. It’s a good practice to breakdown your CSS into different files, it will help you and your team keep the code organized. Great for collaboration.

What’s with the dist folder?

The dist folder will eventually have all the processed files, perhaps a single CSS file (merged from 10 separate CSS components).

Bear in mind though:

Combining all CSS/JavaScript into 1 file is not a synonym for optimal performance.


Grunt.js to the rescue

Let me quote what’s on the Grunt website:

In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes.

Doing everything I’ve been chattering about is possible with Grunt. Why’s so great?

  • Speed: all the tasks will be done for you, either every time you edit a file or whenever you run the terminal command.
  • Working with a team: the whole team will have the same file structure, you’ll share the configuration file so everybody will generate the same production files.
  • It’s what the cool kids are using.

How does it work? I think it’s best for you to take a few minutes and jump to the Get Started tutorial from their site.

Done reading? Cool, let’s continue.

Remember the dist folder I mentioned earlier? On most of the Grunt tasks you’ll set up is an output folder.

/* Grunt Config File */

concat: {
 css_main: {
 src: ['source/css/components/*.css'],
 dest: 'dist/css/project-main.css'

NOTE: the concat task is part of the Concat Grunt Plugin. You must install it and configure it before using the concat task.

You’ll set it to this new dist folder so all your processed, compressed code will be located there (in the case above we’re merging all our files into one and saving it as project-main.css ).
When it comes to production we don’t want to upload our source CSS/JS files.

Watch for file changes.

That’s probably my favourite feature of all. By using the Grunt Watch Plugin you can simply run the grunt task on your terminal and watch over the changed files (please notice you’ll need some extra configuration in your Grunt config file before actually making this work, refer to the plugin’s site):


This will keep an open task in your terminal that will wait for any file change. Every Time you edit a SCSS or JavaScript file, Grunt will re-run. What’s great is that it will not run the whole thing.
Say all tasks (merge, compress, minify, move…) take up to 30 seconds. With the grunt watch it will just compile the affected files. Meaning it might only take 5 seconds.

I don’t like the Grunt logo, are there any alternatives?

Yes, check out Gulp.js

There’s plenty of blog posts out there breaking down a comparison side by side. It’s your job to decide what’s best for you and your team.

From what I’ve read both are more than capable of delivering your needs.

gulp grunt

Final thoughts

I know what you think, do I have to learn yet another tool?

I felt the same way the first time I read about Grunt.js At that time I was using a desktop application for compiling SASS, running JSLint, minifying… and that’s great, until there’s two developers working on the same project.

It can get complicated, some Grunt configuration files can easily have 300 lines. However, once you start reading and looking into it you’ll see it’s less painful than how it looks.

In my previous article I was trying to convince you to start coding your CSS using a CSS Preprocessor (SASS). With Grunt you can process all that files, merge them and move them to the dist folder without even thinking about it.

Did you know about Grunt? Are you already using it?