Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Guidelines! Sorry guys you have to!

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.

Cb5004db588b465e64062b4b914f7db7?s=128

Davide Di Pumpo

January 27, 2016
Tweet

More Decks by Davide Di Pumpo

Other Decks in Programming

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?