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

Code like a #FashionVictim

Code like a #FashionVictim

Beautiful code with CoffeeScript, Jade, LESS

David Nowinsky

April 18, 2014
Tweet

More Decks by David Nowinsky

Other Decks in Programming

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