Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Hello David Nowinsky @davinov

Slide 3

Slide 3 text

Browers are like old trees...

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

HTML, JavaScript & CSS are cool

Slide 6

Slide 6 text

HTML, JavaScript & CSS are cool but...

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

But bowsers don’t run it :-(

Slide 12

Slide 12 text

Welcome your saviors

Slide 13

Slide 13 text

JavaScript without the mess

Slide 14

Slide 14 text

HTML clean and readable

Slide 15

Slide 15 text

What CSS should be

Slide 16

Slide 16 text

Make up with the browser ? ?

Slide 17

Slide 17 text

Make up with the browser or or

Slide 18

Slide 18 text

Real life examples

Slide 19

Slide 19 text

Merci David Nowinsky @davinov Code like a #FashionVictim