index.old.html

<!DOCTYPE html>

<!--
  Presentation about Coffee Script

  based on the Google HTML5 slide template

  Author: Moritz Grauel, moritz.grauel@akquinet.de

  URL: http://code.google.com/p/html5slides/
-->

<html>
<head>
    <title>Why coffee is good for developers</title>

    <meta charset='utf-8'>
    <script src='jquery.min.js'></script>
    <script src='slides.js'></script>
    <script src='liveCode.js'></script>
    <script src='coffee-script.js'></script>
</head>

<body style='display: none'>

<section class='slides layout-regular template-akquinet'>

<!-- Your slides (<article>s) go here. Delete or comment out the
slides below. -->

<article class="fill">
    <h1>
        Why coffee is good for developers
    </h1>

    <p>
        Moritz Grauel
        <br>
        November 29, 2011
    </p>

    <div class="img" style="background: url('images/coffee 2.jpg') -30px -50px">
    </div>
</article>

<!--COFFEE TEASER-->
<article class="fill">
    <h3 class="contrastBox">Agenda</h3>
    <ul class="build">
        <li class="contrastBox">Interesting facts about coffee</li>
        <li class="contrastBox">Popular brewing methods</li>
        <li class="contrastBox">Effects on humans and developers</li>
    </ul>
    <div class="img" style="background: url('images/coffee 1.jpg') -30px -50px">
    </div>
</article>

<article class="fill">
    <img src="images/coffee%204.jpg" width="700" height="475"/>

    <div class='source contrastBox'>
        Source: <a href="http://theoatmeal.com/comics/coffee">The Oatmeal</a>
    </div>
</article>

<article>
    <img class="centered" src="images/coffee%205.png" width="698" height="249" style="margin-top: 20%;"/>

    <div class='source contrastBox'>
        Source: <a href="http://theoatmeal.com/comics/coffee">The Oatmeal</a>
    </div>
</article>

<article>
    <h2>Brewing Methods</h2>
</article>

<article>
    <img class="centered" src="images/coffee%206.png" width="698" height="213" style="margin-top: 20%;"/>

    <div class='source contrastBox'>
        Source: <a href="http://theoatmeal.com/comics/coffee">The Oatmeal</a>
    </div>
</article>

<article>
    <img class="centered protected" src="images/coffee%207.png" width="696" height="511"/>
    <!-- for demo of dev-tools -->
    <script type="text/javascript">
        guard = function(event) {
            alert('Download forbidden');
            return false;
        };
        $('.protected').on('click rightclick contextmenu dragstart', guard);
    </script>
    <div class='source contrastBox'>
        Source: <a href="http://theoatmeal.com/comics/coffee">The Oatmeal</a>
    </div>
</article>

<article>
    <h2>Effects on developers</h2>
</article>

<article class="fill">
    <img src="images/coffee%208.png" width="699" height="287">

    <div class='source contrastBox'>
        Source: <a href="http://theoatmeal.com/comics/coffee">The Oatmeal</a>
    </div>
</article>

<!--WHY NOT JS-->

<article class="build">
    <h3>...and while you are on that Caffeine High</h3>

    <h2>
        You realise that Client Side Scripting sucks.
    </h2>
</article>

<article>
    <p class="centered">Modern web applications require code to be executed on the client.</p>
</article>

<article>
    <p class="centered">Your only option:</p>

    <div class="build">
        <p class="centered">Javascript</p>
    </div>
</article>

<article>
    <p class="centered">Javascript sucks...</p>

    <div class="build">
        <p class="centered">...big time!</p>
    </div>
</article>

<article>
    <h2>3 Reasons</h2>
</article>

<article>
    <p class="centered">The DOM-API</p>
    <ul class="build">
        <li>underspecified</li>
        <li>browser incompatibilities</li>
        <li>braindead</li>
    </ul>
</article>

<article>
    <h2>There is a fix!</h2>
</article>

<article>
    <p class="centered">Use <a href="http://jquery.com/">jQuery</a>

    <p>
    <ul class="build">
        <li>fun to use</li>
        <li>incredibly widespread</li>
        <li>use it!</li>
        <li>now!</li>
    </ul>
</article>

<article>
    <h2>Second reason:</h2>
</article>

<article>
    <div class="build">
        <p class="centered">Everyone knows JS</p>

        <p class="centered">No one learns JS</p>

        <p class="centered">Learn your damn tools!</p>
    </div>
</article>

<article>
    <h2>Third reason:</h2>
</article>

<article>
    <div class="build">
        <p class="centered">Javascript as a language...</p>

        <p class="centered">...sucks.</p>
    </div>
</article>

<article>
    <h2>Let me show you what I mean...</h2>
</article>

<!--JS WTFs-->

<article class="fill">
    <img src="images/wtfperminute.jpg" width="500" height="453">
</article>

<article>
    <h3>Equals is easy, right?</h3>

    <div id="wtfEquals_embed"></div>
    <pre id="wtfEquals_src" contenteditable="true" class="prettyprint">
&lt;script type="text/javascript">
    if (1 == '1') alert("WTF?!");
&lt;/script></pre>

    <button class="refresh" onclick="return refreshLiveCoding(event, 'wtfEquals')" onkeydown="return onKeyDown(event)">
        Execute
    </button>
    <script type="text/javascript">
        manageLiveCoding('wtfEquals')
    </script>
</article>

<article>
    <h3>It's math!</h3>

    <div id="wtfMath_embed"></div>
    <pre id="wtfMath_src" contenteditable="true" class="prettyprint">
&lt;script type="text/javascript">
    if (Math.min() > Math.max()) alert('WTF?!');
&lt;/script></pre>

    <button class="refresh" onclick="return refreshLiveCoding(event, 'wtfMath')" onkeydown="return onKeyDown(event)">
        Execute
    </button>
    <script type="text/javascript">
        manageLiveCoding('wtfMath')
    </script>
</article>

<article>
    <h3>But it is a number?!</h3>

    <div id="wtfNumber_embed"></div>
    <pre id="wtfNumber_src" contenteditable="true" class="prettyprint">
&lt;script type="text/javascript">
    alert('My favorite number is: ' + 9999999999999999);
&lt;/script></pre>

    <button class="refresh" onclick="return refreshLiveCoding(event, 'wtfNumber')" onkeydown="return onKeyDown(event)">
        Execute
    </button>
    <script type="text/javascript">
        manageLiveCoding('wtfNumber')
    </script>
</article>

<article>
    <h3>Identity Crisis?</h3>

    <div id="wtfIdent_embed"></div>
    <pre id="wtfIdent_src" contenteditable="true" class="prettyprint">
&lt;script type="text/javascript">
    var foo    = [0];
    alert("I am myself: " + (foo == foo) + "\n" +
        "I am not myself: " + (foo == !foo));
&lt;/script></pre>

    <button class="refresh" onclick="return refreshLiveCoding(event, 'wtfIdent')" onkeydown="return onKeyDown(event)">
        Execute
    </button>
    <script type="text/javascript">
        manageLiveCoding('wtfIdent')
    </script>
</article>

<article>
    <h3>Hello Scope</h3>

    <div id="wtfHello_embed"></div>
    <pre id="wtfHello_src" contenteditable="true" class="prettyprint">
&lt;script type="text/javascript">
    function hello(nameParam) {
        greeting = 'Hello ' + nameParam;
        return greeting;
    }
    alert('1st: ' + hello('World'));
    alert('2nd: ' + greeting);
&lt;/script></pre>

    <button class="refresh" onclick="return refreshLiveCoding(event, 'wtfHello')" onkeydown="return onKeyDown(event)">
        Execute
    </button>
    <script type="text/javascript">
        manageLiveCoding('wtfHello')
    </script>
</article>

<!--<article>
    <h3>It's a question of personal style</h3>

    <div id="wtfBrace_embed"></div>
    <pre id="wtfBrace_src" contenteditable="true" class="prettyprint">
&lt;script type="text/javascript">
    findBestDev = function() {
        return // I like my braces on the next line
        {
            name: 'Moritz'
        };
    };
    var bestDev = findBestDev();
    alert('Best Developer: ' + bestDev.name);
&lt;/script></pre>

    <button class="refresh" onclick="return refreshLiveCoding(event, 'wtfBrace')" onkeydown="return onKeyDown(event)">
        Execute
    </button>
    <script type="text/javascript">
        manageLiveCoding('wtfBrace')
    </script>
</article>-->

<article>
    <h3>Now you are just fu**ing with me...</h3>

    <div id="wtfArray_embed"></div>
    <pre id="wtfArray_src" contenteditable="true" class="prettyprint">
&lt;script type="text/javascript">
    if (new Array([],null,undefined,null) == ",,," ) {
        alert('WTF?!');
    }
&lt;/script></pre>

    <button class="refresh" onclick="return refreshLiveCoding(event, 'wtfArray')" onkeydown="return onKeyDown(event)">
        Execute
    </button>
    <script type="text/javascript">
        manageLiveCoding('wtfArray')
    </script>
</article>

<article>
    <h3>I could go on and on and on...</h3>

    <div class="build">

        <p>Javascript is a language full of surprises.</p>

        <p>
            Many more at <a href="http://wtfjs.com/">wtfjs.com</a>
        </p>
    </div>
</article>

<!--COFFEE-->

<article>
    <h3>Are there any alternatives?</h3>

    <div class="build">
        <p style="margin-top: 10%;">
            <img class="centered" src="images/alternatives.png" width="437" height="104"/>
        </p>

        <p>Uhh...</p>

        <p>no.</p>

        <p>...</p>

        <p>wait!</p>
    </div>
</article>

<article id="hello-coffeescript-slide">
    <style>
        #hello-coffeescript-slide h1, #hello-coffeescript-slide a {
            color: #191932 !important;
            text-decoration: none;
            font-size: 102px;
        }

        #hello-coffeescript-slide h1 img {
            margin-top: -30px;
        }
    </style>
    <h1><a href="http://jashkenas.github.com/coffee-script/"><img src="images/coffeescript_logo.png"
                                                                  style="align: center;"> CoffeeScript</a></h1>
</article>

<article>
    <h3>What is CoffeeScript</h3>
    <ul>
        <li>Javascript without the fail</li>
        <li>cleaner syntax</li>
        <li>far less bloat</li>
    </ul>
    <ul class="build">
        <li>compiles to Javascript</li>
    </ul>
</article>

<article>
    <h2>Wait! What? I though Javascript is the problem!</h2>
</article>

<article class="fill">
    <h2 class="contrastBox">Javascript has good parts</h2>
    <img src="images/javascript-the-good-parts-the-definitive-guide.jpg" width="600" height="450">

    <div class='source contrastBox'>
        Source: <a href="http://img.anongallery.org/img/2/0/javascript-the-good-parts-the-definitive-guide.jpg">Anongallery</a>
    </div>
</article>

<article>
    <ul class="build">
        <li>Coffee sticks to the good part</li>
        <li>Coffee generates readable, pretty-printed Javascript</li>
        <li>Coffee generats <a href="http://www.javascriptlint.com/">JSLint</a> compliant Javascript</li>
        <li>Coffee gets rid of many WTFs</li>
        <li>Interoperable with nearly all existing JS libraries (jQuery, Node, etc...)</li>
    </ul>
</article>

<article>
    <h3>Coffee Hello World</h3>

    <pre id="helloCoffee_embed" contenteditable="false" class="prettyprint">// Generated Javascript:</pre>
    <pre id="helloCoffee_src" contenteditable="true" class="prettyprint">
&lt;script type="text/coffeescript">
    if 1 == '1' then alert 'WTF?!' else alert ':-)'
&lt;/script></pre>

    <button class="refresh" onclick="return refreshLiveCoffee(event, 'helloCoffee')"
            onkeydown="return onKeyDown(event)">
        Generate
    </button>
    <button class="refresh" onclick="return executeLiveCoffee(event, 'helloCoffee')"
            onkeydown="return onKeyDown(event)">
        Execute
    </button>
    <script type="text/javascript">
        manageLiveCoding('helloCoffee')
    </script>
</article>

<article>
    <h3>One caveat...</h3>

    <div class="build">
        <p class="centered">significant whitespace instead of braces</p>
        <img src="images/why.jpg" width="360" height="270" class="centered"/>
    </div>
</article>

<article>
    <h3>Coffee Methods</h3>

    <pre id="scopeCoffee_embed" contenteditable="false" class="prettyprint">// Generated Javascript:</pre>
    <pre id="scopeCoffee_src" contenteditable="true" class="prettyprint">
&lt;script type="text/coffeescript">
    hello = (name) ->
        greeting = "Hello #{name}"
    alert hello 'World'
&lt;/script></pre>

    <button class="refresh" onclick="return refreshLiveCoffee(event, 'scopeCoffee')"
            onkeydown="return onKeyDown(event)">
        Generate
    </button>
    <button class="refresh" onclick="return executeLiveCoffee(event, 'scopeCoffee')"
            onkeydown="return onKeyDown(event)">
        Execute
    </button>
    <script type="text/javascript">
        manageLiveCoding('scopeCoffee')
    </script>
</article>

<article>
    <h3>Coffee Object Model</h3>

    <pre id="objectiveCoffee_embed" contenteditable="false" class="prettyprint">// Generated Javascript:</pre>
    <pre id="objectiveCoffee_src" contenteditable="true" class="prettyprint">
&lt;script type="text/coffeescript">
    class Developer
        constructor: (@name, @favoriteBrewStyle) ->

        brew: ->
            alert "Brewing #{@favoriteBrewStyle}"
    mo = new Developer "Moritz", "Espresso"
&lt;/script></pre>

    <button class="refresh" onclick="return refreshLiveCoffee(event, 'objectiveCoffee')"
            onkeydown="return onKeyDown(event)">
        Generate
    </button>
    <button class="refresh" onclick="return executeLiveCoffee(event, 'objectiveCoffee')"
            onkeydown="return onKeyDown(event)">
        Execute
    </button>
    <script type="text/javascript">
        manageLiveCoding('objectiveCoffee')
    </script>
</article>

<article>
    <h3>Coffee Goodies - while/until returns an array</h3>

    <pre id="goodies1_embed" contenteditable="false" class="prettyprint">// Generated Javascript:</pre>
    <pre id="goodies1_src" contenteditable="true" class="prettyprint">
&lt;script type="text/coffeescript">
    count = 0
    addicted = until count > 5
        count++
        "Drinking Coffee #{count}"
&lt;/script></pre>

    <button class="refresh" onclick="return refreshLiveCoffee(event, 'goodies1')" onkeydown="return onKeyDown(event)">
        Generate
    </button>
    <button class="refresh" onclick="return executeLiveCoffee(event, 'goodies1')" onkeydown="return onKeyDown(event)">
        Execute
    </button>
    <p>
        <code>["Drinking Coffee 1", "Drinking Coffee 2", "Drinking Coffee 3", "Drinking Coffee 4", "Drinking Coffee 5",
            "Drinking Coffee 6"]</code>
    </p>
    <script type="text/javascript">
        manageLiveCoding('goodies1')
    </script>
</article>

<article>
    <h3>Coffee Goodies - the ?</h3>

    <pre id="goodies2_embed" contenteditable="false" class="prettyprint">// Generated Javascript:</pre>
    <pre id="goodies2_src" contenteditable="true" class="prettyprint">
&lt;script type="text/coffeescript">
    if foo?
        alert "Foo: #{foo.toUpperCase()}"
&lt;/script></pre>

    <button class="refresh" onclick="return refreshLiveCoffee(event, 'goodies2')" onkeydown="return onKeyDown(event)">
        Generate
    </button>
    <button class="refresh" onclick="return executeLiveCoffee(event, 'goodies2')" onkeydown="return onKeyDown(event)">
        Execute
    </button>
    <script type="text/javascript">
        manageLiveCoding('goodies2')
    </script>
</article>

<article>
    <h3>Coffee Goodies - List comprehension</h3>

    <pre id="goodies3_embed" contenteditable="false" class="prettyprint">// Generated Javascript:</pre>
    <pre id="goodies3_src" contenteditable="true" class="prettyprint">
&lt;script type="text/coffeescript">
    list = [1 .. 10]
    evenDoubled = (item * 2 for item in list when (item % 2 == 0))
    alert(evenDoubled)
&lt;/script></pre>

    <button class="refresh" onclick="return refreshLiveCoffee(event, 'goodies3')" onkeydown="return onKeyDown(event)">
        Generate
    </button>
    <button class="refresh" onclick="return executeLiveCoffee(event, 'goodies3')" onkeydown="return onKeyDown(event)">
        Execute
    </button>
    <script type="text/javascript">
        manageLiveCoding('goodies3')
    </script>
</article>

<article>
    <h3>More sugar?</h3>

    <ul class="build">
        <li>default values for function arguments</li>
        <li><code>if / unless</code> can be used as postfix</li>
        <li>syntax for map-iteratrion (<code>for key, value of map</code>)</li>
        <li>aliases for more readable code (<code>not/!, is/==, and/&&</code>)</li>
        <li>matched array assignments (enables multiple return from methods)</li>
        <li>support for splats (varargs)</li>
    </ul>
</article>

<article>
    <ul class="build">
        <li>Serverside compilation</li>
        <li><a href="https://github.com/talios/coffee-maven-plugin">Maven Plugin</a> available</li>
        <li>Clientside (not recommended at the moment)</li>
    </ul>
    <h2>Ok. But how do I use it?</h2>
</article>

<article>
    <div class="build">
        <p>
            Just go back to regular Javascript
        </p>

        <p>
            Use CoffeeScript output as a basis
        </p>
    </div>

    <h2>And if you don't like it anymore...</h2>
</article>

<article id="goodbye-coffeescript-slide">
    <style>
        #goodbye-coffeescript-slide h1, #goodbye-coffeescript-slide a {
            color: #191932 !important;
            text-decoration: none;
            font-size: 102px;
        }

        #goodbye-coffeescript-slide h1 img {
            margin-top: -30px;
        }
    </style>
    <h1><a target="_blank" href="http://jashkenas.github.com/coffee-script/"><img src="images/coffeescript_logo.png"
                                                                                  style="align: center;">
        CoffeeScript</a></h1>

    <h2>Thank you...</h2>
</article>

</section>

</body>
</html>