Code like a #FashionVictim

Beautiful code with CoffeeScript, Jade, LESS

Transcript

1. Code like a
   #FashionVictim
   Beautiful code with
   CoffeeScript, Jade, LESS
   Atelier technique #3 18 avril 2014
   

   View Slide

2. Hello
   David Nowinsky
   @davinov
   

   View Slide

3. Browers are like old trees...
   

   View Slide

4. Browers are like old trees...
   New things
   HTML5
   CSS3
   Old roots
   JavaScript HTML
   CSS
   

   View Slide

5. HTML, JavaScript & CSS
   are cool
   

   View Slide

6. HTML, JavaScript & CSS
   are cool but...
   

   View Slide

7. HTML, JavaScript & CSS
   are cool but...
   #FashionPolice
   

   View Slide

8. fs.readdir(source, function(err, files) {
   if (err) {
   console. log('Error finding files: ' + err)
   } else {
   files.forEach(function(filename, fileIndex) {
   console. log(filename)
   gm(source + filename).size( function(err, values) {
   if (err) {
   console. log('Error identifying file size: ' + err)
   } else {
   console. log(filename + ' : ' + values)
   aspect = (values.width / values.height)
   widths. forEach(function(width, widthIndex) {
   height = Math.round(width / aspect)
   console. log('resizing ' + filename + 'to ' + height + 'x' + height)
   this.resize(width, height).write(destination + 'w' + width + '_' + filename, function(err) {
   if (err) console. log('Error writing file: ' + err)
   })
   }.bind( this))
   }
   })
   })
   }
   })
   HTML, JavaScript & CSS
   are cool but...
   #WTF
   

   View Slide

9. HTML, JavaScript & CSS
   are cool but...
   #PleaseDont
   

   View Slide

10. This is beautiful code
    def complex_function (a, b, c):
    if not a:
    return None # Raising an exception might be better
    if not b:
    return None # Raising an exception might be better
    if not x:
    # Some Plan-B computation of x
    return x # One single exit point
    short
    clean
    use indentation
    

    View Slide

11. But bowsers don’t run it
    :-(
    

    View Slide

12. Welcome your saviors
    

    View Slide

13. JavaScript without the mess
    

    View Slide

14. HTML clean and readable
    

    View Slide

15. What CSS should be
    

    View Slide

16. Make up with the browser
    ? ?
    

    View Slide

17. Make up with the browser
    or or
    

    View Slide

18. Real life examples
    

    View Slide

19. Merci
    David Nowinsky
    @davinov
    Code like a
    #FashionVictim
    

    View Slide