guidelines! sorry guys you have to!
TRANSCRIPT
![Page 1: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/1.jpg)
GUIDELINESSorry guys, you have to!
MILANO FRONT END MEETUP - 26/01/2016 Now full-cats powered!
![Page 2: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/2.jpg)
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
![Page 3: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/3.jpg)
Let's startMEOW
![Page 4: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/4.jpg)
Before we start...
A question
![Page 5: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/5.jpg)
Do you ever work alone?
WRONG
![Page 6: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/6.jpg)
You will never work alone
![Page 7: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/7.jpg)
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
![Page 8: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/8.jpg)
Basically you have to choice if write something like that
var named = function named() { return true; };
or:
var named = function named() {return true};
![Page 9: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/9.jpg)
It's not onlyAESTHETIC
(Also but not only)
![Page 10: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/10.jpg)
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; }
![Page 11: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/11.jpg)
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; }
![Page 12: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/12.jpg)
So, why a guideline?Let's see, with some cat examples!
Taken from 's Harry Roberts CSS Guidelines
![Page 13: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/13.jpg)
build and maintain products for areasonable length of time;
![Page 14: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/14.jpg)
have developers of differingabilities and specialties;
![Page 15: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/15.jpg)
have a number of differentdevelopers working on a productat any given time;
![Page 16: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/16.jpg)
on-board new staff regularly;
![Page 17: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/17.jpg)
have a number of codebases thatdevelopers dip in and out of.
![Page 18: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/18.jpg)
Ok, you convinced me...
... but NOW?
![Page 19: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/19.jpg)
DO. OR DO NOT.
THERE IS NO TRY.Platone
![Page 20: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/20.jpg)
Yeah, but howabout the
cost?
![Page 21: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/21.jpg)
You don't have to start from scratch!Airbnb styleguideCSS TRICKSSass GuidelinesGoogle Styleguide
![Page 23: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/23.jpg)
Next step?Why not setup a Linter?
![Page 24: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/24.jpg)
What is a linter?
The linter is the cat, the baby is a lazy programmer!
![Page 25: Guidelines! sorry guys you have to!](https://reader034.vdocuments.site/reader034/viewer/2022042706/5871aab81a28abda6a8b5699/html5/thumbnails/25.jpg)
Questions?