Skip to content

Mad stylin' #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
juliocesar wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Mad stylin' #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5683315
reset, new TOC styles, fancy!
juliocesar Jun 24, 2011
5242b8e
chapter 2, <code> and stuff
juliocesar Jun 24, 2011
c4244a1
I forget
juliocesar Jun 24, 2011
09eba23
ok! ported all pages across
juliocesar Jun 25, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 55 additions & 55 deletions coffeescript/01_introduction.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>The Little Book on CoffeeScript - Introduction</title>
<link rel="stylesheet" href="site/site.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="site/highlight.css" type="text/css" charset="utf-8">
<script src="site/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="site/highlight.js" type="text/javascript" charset="utf-8"></script>
<script src="site/coffee-script.js" type="text/javascript" charset="utf-8"></script>
<script src="site/preview.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
hljs.initHighlightingOnLoad();
</script>
</head>
<body>
<div id="container">
<header>
<h1><a href="index.html">The Little Book on CoffeeScript</a></h1>
</header>

<div id="content">
<div class="back"><a href="index.html">&laquo; Back to all chapters</a></div>
<head>
<meta charset=utf-8>
<title>The Little Book on CoffeeScript - Introduction</title>
<link rel="stylesheet" href="site/site.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="site/highlight.css" type="text/css" charset="utf-8">
<script type="text/javascript" src="http://use.typekit.com/wgs0gxl.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<section id="book" class="chapter">
<h1>
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30px" height="15px" viewBox="0 0 100 61.67" enable-background="new 0 0 100 61.67" xml:space="preserve">
<path d="M100,51.058H0C0.007,58.293,5.523,61.65,9.963,61.67h80.076C95.335,61.65,99.976,57.486,100,51.058L100,51.058z"/>
<path d="M80.998,0H21.331v39.144c0.009,5.316,4.587,9.521,9.531,9.531h38.71c5.58-0.011,9.387-4.704,9.368-9.531v-3.247
c11.047-0.009,19.062-8.303,19.058-17.974C98.002,8.08,90.145-0.007,80.998,0z M78.94,28.427V7.364h2.058
c7.568-0.012,9.996,7.146,9.96,10.614C90.965,23.577,86.818,28.948,78.94,28.427z"/>
</svg>
<a href="index.html">The Little Book on CoffeeScript</a>
</h1>
<section id="content">
<h1>What is CoffeeScript?</h1>
<p><a href="http://coffeescript.org">CoffeeScript</a> is a little language that compiles down to JavaScript. The syntax is inspired by Ruby and Python, and implements many features from those two languages. This book is designed to help you learn CoffeeScript, understand best practices and start building awesome client side applications. The book is little, only five chapters, but that's rather apt as CoffeeScript is a little language too.</p>

<p>This book is completely open source, and was written by <a href="http://alexmaccaw.co.uk">Alex MacCaw</a> (or <a href="http://twitter.com/maccman">@maccman</a>) with great contributions from <a href="https://github.com/dxgriffiths">David Griffiths</a>, <a href="http://github.com/satyr">Satoshi Murakami</a>, and <a href="https://github.com/jashkenas">Jeremy Ashkenas</a>.</p>

<h1>What is CoffeeScript?</h1>
<p>If you have any errata or suggestions, please don't hesitate to open a ticket on the book's <a href="https://github.com/arcturo/library">GitHub page</a>. Readers may also be interested in <a href="http://oreilly.com/catalog/9781449307530/">JavaScript Web Applications by O'Reilly</a>, a book that explores rich JavaScript applications and moving state to the client side.</p>

<p><a href="http://coffeescript.org">CoffeeScript</a> is a little language that compiles down to JavaScript. The syntax is inspired by Ruby and Python, and implements many features from those two languages. This book is designed to help you learn CoffeeScript, understand best practices and start building awesome client side applications. The book is little, only five chapters, but that's rather apt as CoffeeScript is a little language too.</p>
<p>So let's dive right into it; why is CoffeeScript better than writing pure JavaScript? Well for a start, there's less code to write - CoffeeScript is very succinct, and takes white-space into account. In my experience this reduces code by a third to a half of the original pure JavaScript. In addition, CoffeeScript has some neat features, such as array comprehensions, prototype aliases and classes that further reduce the amount of typing you need to do.</p>

<p>This book is completely open source, and was written by <a href="http://alexmaccaw.co.uk">Alex MacCaw</a> (or <a href="http://twitter.com/maccman">@maccman</a>) with great contributions from <a href="https://github.com/dxgriffiths">David Griffiths</a>, <a href="http://github.com/satyr">Satoshi Murakami</a>, and <a href="https://github.com/jashkenas">Jeremy Ashkenas</a>.</p>
<p>More importantly though, JavaScript has a lot of <a href="http://bonsaiden.github.com/JavaScript-Garden/">skeletons in its closet</a> which can often trip up inexperienced developers. CoffeeScript neatly sidesteps these, by only exposing a curated selection of JavaScript features, fixing many of the language's oddities.</p>

<p>If you have any errata or suggestions, please don't hesitate to open a ticket on the book's <a href="https://github.com/arcturo/library">GitHub page</a>. Readers may also be interested in <a href="http://oreilly.com/catalog/9781449307530/">JavaScript Web Applications by O'Reilly</a>, a book that explores rich JavaScript applications and moving state to the client side.</p>
<p>CoffeeScript is <em>not</em> a superset of JavaScript, so although you can use external JavaScript libraries from inside CoffeeScript, you'll get syntax errors if you compile JavaScript as-is, without converting it. The compiler converts CoffeeScript code into its counterpart JavaScript, there's no interpretation at runtime.</p>

<p>So let's dive right into it; why is CoffeeScript better than writing pure JavaScript? Well for a start, there's less code to write - CoffeeScript is very succinct, and takes white-space into account. In my experience this reduces code by a third to a half of the original pure JavaScript. In addition, CoffeeScript has some neat features, such as array comprehensions, prototype aliases and classes that further reduce the amount of typing you need to do.</p>
<p>First to get some common fallacies out the way. You will need to know JavaScript in order to write CoffeeScript, as runtime errors require JavaScript knowledge. However, having said that, runtime errors are usually pretty obvious, and so far I haven't found mapping JavaScript back to CoffeeScript to be an issue. The second problem I've often heard associated with CoffeeScript is speed; i.e. the code produced by the CoffeeScript compiler would run slower than it's equivalent written in pure JavaScript. In practice though, it turns out this isn't a problem either. CoffeeScript tends to run as fast, or faster than hand-written JavaScript.</p>

<p>More importantly though, JavaScript has a lot of <a href="http://bonsaiden.github.com/JavaScript-Garden/">skeletons in its closet</a> which can often trip up inexperienced developers. CoffeeScript neatly sidesteps these, by only exposing a curated selection of JavaScript features, fixing many of the language's oddities.</p>
<p>What are the disadvantages of using CoffeeScript? Well, it introduces another compile step between you and your JavaScript. CoffeeScript tries to mitigate the issue as best it can by producing clean and readable JavaScript, and with its server integrations which automate compilation. The other disadvantage, as with any new language, is the fact that the community is still small at this point, and you'll have a hard time finding fellow collaborators who already know the language. CoffeeScript is quickly gaining momentum though, and its IRC list is well staffed; any questions you have are usually answered promptly.</p>

<p>CoffeeScript is <em>not</em> a superset of JavaScript, so although you can use external JavaScript libraries from inside CoffeeScript, you'll get syntax errors if you compile JavaScript as-is, without converting it. The compiler converts CoffeeScript code into its counterpart JavaScript, there's no interpretation at runtime.</p>
<p>CoffeeScript is not limited to the browser, and can be used to great effect in server side JavaScript implementations, such as <a href="http://nodejs.org/">Node.js</a>. Additionally, CoffeeScript is getting much wider use and integration, such as being a default in Rails 3.1. Now is definitely the time to jump on the CoffeeScript train. The time you invest in learning about the language now will be repaid by major time savings later.</p>

<p>First to get some common fallacies out the way. You will need to know JavaScript in order to write CoffeeScript, as runtime errors require JavaScript knowledge. However, having said that, runtime errors are usually pretty obvious, and so far I haven't found mapping JavaScript back to CoffeeScript to be an issue. The second problem I've often heard associated with CoffeeScript is speed; i.e. the code produced by the CoffeeScript compiler would run slower than it's equivalent written in pure JavaScript. In practice though, it turns out this isn't a problem either. CoffeeScript tends to run as fast, or faster than hand-written JavaScript.</p>
<h2>Initial setup</h2>

<p>What are the disadvantages of using CoffeeScript? Well, it introduces another compile step between you and your JavaScript. CoffeeScript tries to mitigate the issue as best it can by producing clean and readable JavaScript, and with its server integrations which automate compilation. The other disadvantage, as with any new language, is the fact that the community is still small at this point, and you'll have a hard time finding fellow collaborators who already know the language. CoffeeScript is quickly gaining momentum though, and its IRC list is well staffed; any questions you have are usually answered promptly.</p>
<p>One of the easiest ways to initially play around with the library is to use it right inside the browser. Navigate to <a href="http://coffeescript.org">http://coffeescript.org</a> and click on the <em>Try CoffeeScript</em> tab. The site uses a browser version of the CoffeeScript compiler, converting any CoffeeScript typed inside the left panel, to JavaScript in the right panel.</p>

<p>CoffeeScript is not limited to the browser, and can be used to great effect in server side JavaScript implementations, such as <a href="http://nodejs.org/">Node.js</a>. Additionally, CoffeeScript is getting much wider use and integration, such as being a default in Rails 3.1. Now is definitely the time to jump on the CoffeeScript train. The time you invest in learning about the language now will be repaid by major time savings later.</p>
<p>In fact you can use browser-based compiler yourself, by including <a href="http://jashkenas.github.com/coffee-script/extras/coffee-script.js">this script</a> in a page, marking up any CoffeeScript script tags with the correct <code>type</code>.</p>

<h2>Initial setup</h2>

<p>One of the easiest ways to initially play around with the library is to use it right inside the browser. Navigate to <a href="http://coffeescript.org">http://coffeescript.org</a> and click on the <em>Try CoffeeScript</em> tab. The site uses a browser version of the CoffeeScript compiler, converting any CoffeeScript typed inside the left panel, to JavaScript in the right panel.</p>

<p>In fact you can use browser-based compiler yourself, by including <a href="http://jashkenas.github.com/coffee-script/extras/coffee-script.js">this script</a> in a page, marking up any CoffeeScript script tags with the correct <code>type</code>.</p>

<pre><code>&lt;script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
<pre><code>&lt;script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
&lt;script type="text/coffeescript"&gt;
# Some CoffeeScript
&lt;/script&gt;
</code></pre>

<p>Obviously, in production, you don't want to be interpreting CoffeeScript at runtime, as it'll slow thing up for your clients, so CoffeeScript offers a <a href="http://nodejs.org">Node.js</a> compiler to pre-process CoffeeScript files.</p>
# Some CoffeeScript
&lt;/script&gt;</code></pre>

<p>To install it, first make sure you have a working copy of the latest stable version of <a href="http://nodejs.org">Node.js</a>, and <a href="http://npmjs.org/">npm</a> (the Node Package Manager). You can then install CoffeeScript with npm:</p>
<p>Obviously, in production, you don't want to be interpreting CoffeeScript at runtime, as it'll slow thing up for your clients, so CoffeeScript offers a <a href="http://nodejs.org">Node.js</a> compiler to pre-process CoffeeScript files.</p>

<pre><code>npm install coffee-script
</code></pre>
<p>To install it, first make sure you have a working copy of the latest stable version of <a href="http://nodejs.org">Node.js</a>, and <a href="http://npmjs.org/">npm</a> (the Node Package Manager). You can then install CoffeeScript with npm:</p>

<p>This will give you a <code>coffee</code> executable. If you execute it without any command line options, it'll give you the CoffeeScript console, which you can use to quickly execute CoffeeScript statements. To pre-process files, pass the <code>--compile</code> option.</p>
<pre><code>npm install coffee-script</code></pre>

<pre><code>coffee --compile my-script.coffee
</code></pre>
<p>This will give you a <code>coffee</code> executable. If you execute it without any command line options, it'll give you the CoffeeScript console, which you can use to quickly execute CoffeeScript statements. To pre-process files, pass the <code>--compile</code> option.</p>

<p>If <code>--output</code> is not specified, CoffeeScript will write to a JavaScript file with the same name, in this case <code>my-script.js</code>. This will overwrite any existing files, so be careful you're not overwriting any JavaScript files unintentionally. For a full list of the command line options available, pass <code>--help</code>.</p>
<pre><code>coffee --compile my-script.coffee</code></pre>

<p>As you can see above, the default extension of CoffeeScript files is <code>.coffee</code>. Amongst other things, this will allow text editors like <a href="http://macromates.com/">TextMate</a> to work out which language the file contains, giving it the appropriate syntax highlighting. By default, TextMate doesn't include support for CoffeeScript, but you can easily install the <a href="https://github.com/jashkenas/coffee-script-tmbundle">bundle to do so</a>.</p>
<p>If <code>--output</code> is not specified, CoffeeScript will write to a JavaScript file with the same name, in this case <code>my-script.js</code>. This will overwrite any existing files, so be careful you're not overwriting any JavaScript files unintentionally. For a full list of the command line options available, pass <code>--help</code>.</p>

<p>If all this compilation seems like a bit of an inconvenience and bother, that's because it is. We'll be getting onto ways to solve this by automatically compiling CoffeeScript files when they're first requested, but first lets take a look at the languages's syntax.</p>
<p>As you can see above, the default extension of CoffeeScript files is <code>.coffee</code>. Amongst other things, this will allow text editors like <a href="http://macromates.com/">TextMate</a> to work out which language the file contains, giving it the appropriate syntax highlighting. By default, TextMate doesn't include support for CoffeeScript, but you can easily install the <a href="https://github.com/jashkenas/coffee-script-tmbundle">bundle to do so</a>.</p>

</div>
</div>
</body>
<p>If all this compilation seems like a bit of an inconvenience and bother, that's because it is. We'll be getting onto ways to solve this by automatically compiling CoffeeScript files when they're first requested, but first lets take a look at the languages's syntax.</p>
</section>
</section>
<script src="site/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="site/highlight.js" type="text/javascript" charset="utf-8"></script>
<script src="site/coffee-script.js" type="text/javascript" charset="utf-8"></script>
<script src="site/preview.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
hljs.initHighlightingOnLoad();
</script>
</body>
</html>
Loading