199 lines
8.3 KiB
HTML
199 lines
8.3 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
|
|
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||
|
|
<title>Guard & the Modern Rails App in 5 Minutes</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="./css/reset.css" type="text/css"/>
|
||
|
|
<link rel="stylesheet" href="./css/showoff.css" type="text/css"/>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/jquery.cycle.all.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/jquery-print.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/jquery.batchImageLoad.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="./js/jquery.doubletap-0.1.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="./js/fg.menu.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/showoff.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/jTypeWriter.js"> </script>
|
||
|
|
<script type="text/javascript" src="./js/sh_main.min.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/core.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/showoffcore.js"></script>
|
||
|
|
|
||
|
|
<link type="text/css" href="./css/fg.menu.css" media="screen" rel="stylesheet" />
|
||
|
|
<link type="text/css" href="./css/theme/ui.all.css" media="screen" rel="stylesheet" />
|
||
|
|
<link type="text/css" href="./css/sh_style.css" rel="stylesheet" >
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function(){
|
||
|
|
setupPreso(false, './');
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
|
||
|
|
<a tabindex="0" href="#search-engines" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="navmenu"><span class="ui-icon ui-icon-triangle-1-s"></span>slides</a>
|
||
|
|
<div id="navigation" class="hidden"></div>
|
||
|
|
|
||
|
|
<div id="help">
|
||
|
|
<table>
|
||
|
|
<tr><td class="key">space, →</td><td>next slide</td></tr>
|
||
|
|
<tr><td class="key">←</td><td>previous slide</td></tr>
|
||
|
|
<tr><td class="key">d</td><td>debug mode</td></tr>
|
||
|
|
<tr><td class="key">## <ret></td><td>go to slide #</td></tr>
|
||
|
|
<tr><td class="key">c</td><td>table of contents (vi)</td></tr>
|
||
|
|
<tr><td class="key">f</td><td>toggle footer</td></tr>
|
||
|
|
<tr><td class="key">r</td><td>reload slides</td></tr>
|
||
|
|
<tr><td class="key">z</td><td>toggle help (this)</td></tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="buttonNav">
|
||
|
|
<input type="submit" onClick="prevStep();" value="prev"/>
|
||
|
|
<input type="submit" onClick="nextStep();" value="next"/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="preso">loading presentation...</div>
|
||
|
|
<div id="footer">
|
||
|
|
<span id="slideInfo"></span>
|
||
|
|
<span id="debugInfo"></span>
|
||
|
|
<span id="notesInfo"></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="slides" class="offscreen" style="display:none;">
|
||
|
|
<div class="slide" data-transition="none"><div class="content" ref="one/01_slide/1">
|
||
|
|
<h1>Guard and the Modern Rails App</h1>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content" ref="one/01_slide/2">
|
||
|
|
<h2>in 5 minutes</h2>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content" ref="one/01_slide/3">
|
||
|
|
<h1>Guard?</h1>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content center" ref="one/01_slide/4">
|
||
|
|
<p><img src="file:///Users/john/Projects/guard-modern-rails-app/one/images/shell-commands.png" width="776" height="445" alt="Shell Commands"/></p>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content center" ref="one/01_slide/5">
|
||
|
|
<p><img src="file:///Users/john/Projects/guard-modern-rails-app/one/images/reload-button.png" width="450" height="248" alt="Reload Button"/></p>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content center" ref="one/01_slide/6">
|
||
|
|
<p><img src="file:///Users/john/Projects/guard-modern-rails-app/one/images/pocket-watch-cyberslayer.jpg" width="500" height="333" alt="Pocket Watch by Cyberslayer"/>
|
||
|
|
<a href="http://www.flickr.com/photos/cyberslayer/870683349/">Pocket Watch by Cyberslayer</a></p>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content center" ref="one/01_slide/7">
|
||
|
|
<p><img src="file:///Users/john/Projects/guard-modern-rails-app/one/images/wrist-brace-lesleyhyphenanne.jpg" width="375" height="500" alt="Wrist Brace by lesleyhyphenanne"/>
|
||
|
|
<a href="http://www.flickr.com/photos/lesleyhyphenanne/2878429259/">Wrist Brace by lesleyhyphenanne</a></p>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content" ref="one/01_slide/8">
|
||
|
|
<h1>Get it?</h1>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content smaller" ref="one/01_slide/9">
|
||
|
|
<pre class="sh_sh"><code>gem install guard</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content smaller" ref="one/01_slide/10">
|
||
|
|
<pre class="sh_sh"><code>gem install guard-annotate guard-bundler guard-chef \
|
||
|
|
guard-coffeedripper guard-coffeescript guard-compass \
|
||
|
|
guard-cucumber guard-delayed guard-ego guard-gimli \
|
||
|
|
guard-haml guard-jammit guard-jasmine-headless-webkit \
|
||
|
|
guard-jstd guard-koans guard-krl guard-less guard-livereload \
|
||
|
|
guard-markdown guard-middleman guard-migrate guard-minitest \
|
||
|
|
guard-mozrepl guard-nanoc guard-passenger guard-pow \
|
||
|
|
guard-prove guard-pusher guard-rails guard-rspec guard-sass \
|
||
|
|
guard-shell guard-soca guard-spork guard-sprockets \
|
||
|
|
guard-stendhal guard-test guard-uglify guard-webrick </code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="one/01_slide/11">
|
||
|
|
<h1>Guards for...</h1>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li>Restarting servers</li>
|
||
|
|
<li>Compiling files</li>
|
||
|
|
<li>Testing things</li>
|
||
|
|
<li>Whatever you feel like automating</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content" ref="one/01_slide/12">
|
||
|
|
<h1>Guard and the Modern Rails App</h1>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content" ref="one/01_slide/13">
|
||
|
|
<h1>A Modern Rails App</h1>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content" ref="one/01_slide/14">
|
||
|
|
<h1>Rails 3.0.x</h1>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content" ref="one/01_slide/15">
|
||
|
|
<h2>I will touch on Rails 3.1, but since it's not out yet, and that asset pipeline makes what should be easy things much more difficult, I'm saving it for the end.</h2>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content bullets incremental" ref="one/01_slide/16">
|
||
|
|
<h1>This app uses:</h1>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li>CoffeeScript -> JS</li>
|
||
|
|
<li>SCSS + Compass -> CSS</li>
|
||
|
|
<li>Jasmine Headless WebKit -> JS testing</li>
|
||
|
|
<li>A web browser</li>
|
||
|
|
<li>RSpec -> Ruby testing</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content" ref="one/01_slide/17">
|
||
|
|
<h1>OMG RSPEC FLAME WARS ON</h1>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content center" ref="one/01_slide/18">
|
||
|
|
<p><img src="file:///Users/john/Projects/guard-modern-rails-app/one/images/flamewar.gif" width="400" height="300" alt="lol flame war"/></p>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content bullets incrementa;" ref="one/01_slide/19">
|
||
|
|
<h1>We want it to:</h1>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content" ref="one/01_slide/20">
|
||
|
|
<h1>How?</h1>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content smaller" ref="one/01_slide/21">
|
||
|
|
<pre class="sh_sh"><code>cd ~/my-cool-project</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content smaller" ref="one/01_slide/22">
|
||
|
|
<pre class="sh_sh"><code>cd ~/my-cool-project
|
||
|
|
guard init</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content smaller" ref="one/01_slide/23">
|
||
|
|
<pre class="sh_sh"><code>cd ~/my-cool-project
|
||
|
|
guard init
|
||
|
|
guard init rspec</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content smaller" ref="one/01_slide/24">
|
||
|
|
<pre class="sh_sh"><code>cd ~/my-cool-project
|
||
|
|
guard init
|
||
|
|
guard init rspec
|
||
|
|
guard init rails
|
||
|
|
guard init coffeescript
|
||
|
|
guard init bundler
|
||
|
|
guard init compass
|
||
|
|
guard init jasmine-headless-webkit
|
||
|
|
guard init mozrepl</code></pre>
|
||
|
|
</div>
|
||
|
|
</div><div class="slide" data-transition="none"><div class="content smaller" ref="one/01_slide/25">
|
||
|
|
<pre class="sh_sh"><code>cd ~/my-cool-project
|
||
|
|
guard init
|
||
|
|
guard init rspec
|
||
|
|
guard init rails
|
||
|
|
guard init coffeescript
|
||
|
|
guard init bundler
|
||
|
|
guard init compass
|
||
|
|
guard init jasmine-headless-webkit
|
||
|
|
guard init livereload</code></pre>
|
||
|
|
</div>
|
||
|
|
</div></div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|