guidelines! sorry guys you have to!
TRANSCRIPT
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
Next step?Why not setup a Linter?
What is a linter?
The linter is the cat, the baby is a lazy programmer!
Questions?