GUIDELINESSorry guys, you have to!

MILANO FRONT END MEETUP - 26/01/2016 Now full-cats powered!

About me

I'm Davide Di Pumpo and I'm a front-end developer. I love graphic novel, competitive videogames and cats.

You can find me on the internet with the nicknameMakhBeth - - Twitter GitHub LinkedIn

Let's startMEOW

Before we start...

A question

Do you ever work alone?

WRONG

You will never work alone

What is a guideline?(a.k.a. code styleguide)

A styleguide is not just a pleasing document to read,picturing an ideal state for your code. It is a key documentin a project’s life, describing how and why code should be

written.

Hugo Giraudel

Basically you have to choice if write something like that

var named = function named() { return true; };

or:

var named = function named() {return true};

It's not onlyAESTHETIC

(Also but not only)

A strong code design is more readable!

/* in a file far far away */ @mixin visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; }

/* somewhere in your code */ .pippo { @include visually-hidden(); }

.pluto { @include visually-hidden; }

A real example: Airbnb

// bad - unnecessary function call function() { var name = getName(); if (!arguments.length) { return false; } this.setFirstName(name); return true; }

// good function() { var name; if (!arguments.length) { return false; } name = getName(); this.setFirstName(name); return true; }

So, why a guideline?Let's see, with some cat examples!

Taken from 's Harry Roberts CSS Guidelines

build and maintain products for areasonable length of time;

have developers of differingabilities and specialties;

have a number of differentdevelopers working on a productat any given time;

on-board new staff regularly;

have a number of codebases thatdevelopers dip in and out of.

Ok, you convinced me...

... but NOW?

DO. OR DO NOT.

THERE IS NO TRY.Platone

Yeah, but howabout the

cost?

You don't have to start from scratch!Airbnb styleguideCSS TRICKSSass GuidelinesGoogle Styleguide

Let's see something real!

SassGuidelines

Next step?Why not setup a Linter?

What is a linter?

The linter is the cat, the baby is a lazy programmer!

Questions?