Guidelines! Sorry guys you have to!

The slides of the small talk about code style guides and why use them. The speech was held at "Milano Front End Meetup" on January 2016.

Transcript

1. GUIDELINES Sorry guys, you have to! MILANO FRONT END MEETUP - 26/01/2016 Now full-cats powered!
2. 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 nickname MakhBeth - - Twitter GitHub LinkedIn
3. Let's start MEOW
4. Before we start... A question
5. Do you ever work alone? WRONG
6. You will never work alone
7. 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 document in a project’s life, describing how and why code should be written. Hugo Giraudel
8. Basically you have to choice if write something like that v a r n a m e d = f u n c t i o n n a m e d ( ) { r e t u r n t r u e ; } ; or: v a r n a m e d = f u n c t i o n n a m e d ( ) { r e t u r n t r u e } ;
9. It's not only AESTHETIC (Also but not only)
10. A strong code design is more readable! / * i n a f i l e f a r f a r a w a y * / @ m i x i n v i s u a l l y - h i d d e n { b o r d e r : 0 ; c l i p : r e c t ( 0 0 0 0 ) ; h e i g h t : 1 p x ; w i d t h : 1 p x ; m a r g i n : - 1 p x ; o v e r f l o w : h i d d e n ; p a d d i n g : 0 ; p o s i t i o n : a b s o l u t e ; } / * s o m e w h e r e i n y o u r c o d e * / . p i p p o { @ i n c l u d e v i s u a l l y - h i d d e n ( ) ; } . p l u t o { @ i n c l u d e v i s u a l l y - h i d d e n ; }
11. A real example: Airbnb / / b a d - u n n e c e s s a r y f u n c t i o n c a l l f u n c t i o n ( ) { v a r n a m e = g e t N a m e ( ) ; i f ( ! a r g u m e n t s . l e n g t h ) { r e t u r n f a l s e ; } t h i s . s e t F i r s t N a m e ( n a m e ) ; r e t u r n t r u e ; } / / g o o d f u n c t i o n ( ) { v a r n a m e ; i f ( ! a r g u m e n t s . l e n g t h ) { r e t u r n f a l s e ; } n a m e = g e t N a m e ( ) ; t h i s . s e t F i r s t N a m e ( n a m e ) ; r e t u r n t r u e ; }
12. So, why a guideline? Let's see, with some cat examples! Taken from 's Harry Roberts CSS Guidelines
13. build and maintain products for a reasonable length of time;
14. have developers of differing abilities and specialties;
15. have a number of different developers working on a product at any given time;
16. on-board new staff regularly;
17. have a number of codebases that developers dip in and out of.
18. Ok, you convinced me... ... but NOW?
19. DO. OR DO NOT. THERE IS NO TRY. Platone
20. Yeah, but how about the cost?
21. You don't have to start from scratch! Airbnb styleguide CSS TRICKS Sass Guidelines Google Styleguide
22. Let's see something real! Sass Guidelines
23. Next step? Why not setup a Linter?
24. What is a linter? The linter is the cat, the baby is a lazy programmer!
25. Questions?