Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 588 lines (573 sloc) 18.041 kb
496b0c2 Caolan McMahon Initial commit
authored
1 <html>
2 <head>
3 <title>Nimble</title>
4 <link href="http://fonts.googleapis.com/css?family=Neuton:regular,italic" rel="stylesheet" type="text/css" >
5 <link rel="stylesheet" href="site/ir_black.min.css">
6 <style>
7 body {
8 font-size: 14px;
9 font-family: Helvetica, Arial, 'Free-Sans', sans-serif;
10 padding: 1.618em;
11 background-image: url(site/bg.png);
12 line-height: 1.436;
13 }
14 pre code {
15 font-family: 'Monospace', monospace !important;
16 }
17 h1 {
18 font-family: 'Neuton', serif;
19 font-size: 4.236em;
20 font-style: italic;
21 font-weight: 700;
22 text-shadow: 0px 1px 0px #ffffff;
23 filter: dropshadow(color=#ffffff,offX=0,offY=1);
24 text-decoration: none;
25 text-transform: none;
26 letter-spacing: -0.05em;
27 word-spacing: 0em;
28 line-height: 1.2;
29 margin: 0.3em;
30 padding: 0;
31 display: inline;
32 }
33 h2 {
34 font-size: 1.618em;
35 font-weight: bold;
36 margin: 0.426em 0 0.618em 0;
37 padding: 0;
38 }
39 p {
40 padding: 0;
41 margin: 1em 0 1.618em 0;
42 }
43 .download {
44 text-shadow: -1px -1px 2px white;
45 filter: dropshadow(color=#ffffff,offX=0,offY=1);
46 }
47 .size {
48 color: #666;
49 }
50 .section {
51 float: left;
52 padding: 14px 37px 9px 23px;
53 background-color: white;
54 border: 1px solid #999;
55 margin: 1em 1.618em;
56 width: 840px;
57 border-radius: 5px;
58 -moz-border-radius: 5px;
59 box-shadow: 1px 1px 3px #bbb;
60 position: relative;
61 overflow: hidden;
62 }
63 .code {
64 border-radius: 0px;
65 -moz-border-radius: 0px;
66 }
67 .example,
68 .description,
69 .result {
70 float: left;
71 width: 390px;
72 padding: 14px 37px 9px 23px;
73 position: relative;
74 left: 450px;
75 display: block;
76 }
77 .example {
78 padding: 14px 37px 0px 23px;
79 margin-bottom: -5px;
80 }
81 .description,
82 .result {
83 color: black;
84 }
85 .example {
86 color: white;
87 }
88 .result h2 {
89 text-shadow: 0px 1px 0px #ffffff;
90 }
91 .result {
92 display: none;
93 }
94 .show_result .result {
95 display: block;
96 }
97 .show_result .description {
98 display: none;
99 }
100 .example pre code {
101 padding: 0 0 0 1px;
102 margin: 1em 0 1em 0;
103 }
104 .result pre code {
105 background-color: transparent;
106 color: black;
107 padding: 0 0 0 1px;
108 margin: 1em 0 1.618em 0;
109 }
110 .clear {
111 clear: left;
112 height: 1.618em;
113 }
114 .button {
115 margin-right: 0.324em;
116 text-decoration: none;
117 color: black;
118 background: #BBBBBB;
119 border: 1px solid #666;
120 border-radius: 5px;
121 -moz-border-radius: 5px;
122 display: inline;
123 padding: 0.5em 1.5em;
124 cursor: pointer;
125 text-shadow: 0px 1px 0px #DDDDDD;
126 background-image: -webkit-gradient(
127 linear,
128 left bottom,
129 left top,
130 color-stop(0, #999999),
131 color-stop(0.5, #DDDDDD)
132 );
133 background-image: -moz-linear-gradient(
134 center bottom,
135 #999999 0%,
136 #DDDDDD 50%
137 );
138 }
139 .button:hover {
140 background: #999999;
141 text-shadow: none;
142 }
143 .button:active {
144 position: relative;
145 top: 1px;
146 }
147 .downloadbtn {
148 background: #222222;
149 text-shadow: 0px 1px 0px #444444;
150 background-image: -webkit-gradient(
151 linear,
152 left bottom,
153 left top,
154 color-stop(0, #000000),
155 color-stop(0.5, #444444)
156 );
157 background-image: -moz-linear-gradient(
158 center bottom,
159 #000000 0%,
160 #444444 50%
161 );
162 color: white;
163 }
164 .downloadbtn:hover {
165 background: black;
166 }
167 .runbtn {
168 background: #DBF3C8;
169 text-shadow: 0px 1px 0px #DBF3C8;
170 background-image: -webkit-gradient(
171 linear,
172 left bottom,
173 left top,
174 color-stop(0, #5DA966),
175 color-stop(0.5, #DBF3C8)
176 );
177 background-image: -moz-linear-gradient(
178 center bottom,
179 #5DA966 0%,
180 #DBF3C8 50%
181 );
182 }
183 .runbtn:hover {
184 background: #5DA966;
185 text-shadow: none;
186 }
187 .leftbg {
188 float: left;
189 width: 900px;
190 position: relative;
191 right: 450px;
192 background: black;
193 border-top-left-radius: 3px;
194 border-bottom-left-radius: 3px;
195 }
196 .rightbg {
197 margin: -14px -37px -9px -23px;
198 float: left;
199 width: 900px;
200 background: white;
201 border-top-right-radius: 3px;
202 border-bottom-right-radius: 3px;
203 }
204 .show_result .rightbg {
205 background: #DBF3C8;
206 }
207 #footer {
208 clear: left;
209 margin-bottom: 2.618em;
210 padding: 14px 37px 9px 23px;
211 }
212 .code {
213 margin-bottom: 0.618em;
214 }
215 #sizegraph {
216 overflow: hidden;
217 }
218 #sizegraph img {
219 margin-left: -2px;
220 margin-bottom: -1px;
221 }
222 </style>
223 <!--[if IE]>
224 <style>
225 .section {
226 width: 900px;
227 }
228 .example,
229 .description,
230 .result {
231 width: 450px;
232 }
233 </style>
234 <![endif]-->
235 </head>
236 <body>
237 <h1>Nimble</h1>
238 <span class="download">
239 <strong>Download: </strong>
240 <a href="https://github.com/caolan/nimble/raw/master/nimble.js">Development</a> | <a href="https://github.com/caolan/nimble/raw/master/nimble.min.js">Production</a>
29e1311 Caolan McMahon update minified build and filesize info in index.html
authored
241 <span class="size">(829 bytes, minified and gzipped)</span>
496b0c2 Caolan McMahon Initial commit
authored
242 </span>
243 <a href="https://github.com/caolan/nimble"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://d3nwyuy0nl342s.cloudfront.net/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>
244
245 <div class="section" id="intro">
246 <p>
247 Functional flow-control for JavaScript, that is <strong>lightweight</strong>
248 and portable. Runs on <strong>Node.js</strong> and
249 <strong>cross-browser</strong>, providing a small set of powerful tools,
250 supporting <strong>sync and async</strong> JavaScript.
251 Combines the most useful features of the <a href="http://documentcloud.github.com/underscore/">underscore</a> and
252 <a href="https://github.com/caolan/async">async</a> libraries with a simple API and a vastly reduced filesize.
253 </p>
254 <p><a href="https://github.com/caolan/nimble">Nimble on GitHub</a> | <a href="http://twitter.com/caolan">Me on Twitter</a></p>
255 </div>
256
257 <div class="section code">
258 <div class="rightbg">
259 <div class="leftbg">
260 <div class="example">
261 <h2>Map</h2>
262 <pre><code class="javascript">_.map([1, 2, 3], function (val) {
263 return val * 2;
264 });</code></pre>
265 </div>
266 <div class="description">
267 <p>
268 Map creates a new array by iterating over a list and applying a
269 transformation to each member.
270 </p>
271 <a href="#" class="runbtn button">Run code</a>
272 </div>
273 <div class="result">
274 <h2>Result</h2>
275 <pre><code class="no-highlight"></code></pre>
276 <a href="#" class="clearbtn button">Clear result</a>
277 </div>
278 <div class="clear"></div>
279 </div>
280 </div>
281 </div>
282
283 <div class="section code">
284 <div class="rightbg">
285 <div class="leftbg">
286 <div class="example">
287 <h2>Map objects</h2>
288 <pre><code class="javascript">_.map({a:1, b:2, c:3}, function (val, key) {
289 return key + '=' + val;
290 });</code></pre>
291 </div>
292 <div class="description">
293 <p>
294 Nimble's map function can also iterate over the properties of an
295 object.
296 </p>
297 <a href="#" class="runbtn button">Run code</a>
298 </div>
299 <div class="result">
300 <h2>Result</h2>
301 <pre><code class="no-highlight"></code></pre>
302 <a href="#" class="clearbtn button">Clear result</a>
303 </div>
304 <div class="clear"></div>
305 </div>
306 </div>
307 </div>
308
309 <div class="section code">
310 <div class="rightbg">
311 <div class="leftbg">
312 <div class="example">
313 <h2>Async map</h2>
314 <pre><code class="javascript">_.map([1, 2, 3], function (val, callback) {
315 callback(null, val * 2);
316 },
317 function (err, result) {
318 console.log(result);
319 });</code></pre>
320 </div>
321 <div class="description">
322 <p>
323 By adding a callback, you can perform asynchronous
324 operations, like AJAX requests or Node.js methods.
325 </p>
326 <p>
327 Like in Node.js, the first argument of the callback is an optional
328 error.
329 </p>
330 <a href="#" class="runbtn button">Run code</a>
331 </div>
332 <div class="result">
333 <h2>Result</h2>
334 <pre><code class="no-highlight"></code></pre>
335 <a href="#" class="clearbtn button">Clear result</a>
336 </div>
337 <div class="clear"></div>
338 </div>
339 </div>
340 </div>
341
342 <div class="section code">
343 <div class="rightbg">
344 <div class="leftbg">
345 <div class="example">
346 <h2>Filter</h2>
347 <pre><code class="javascript">_.filter([1, 2, 3], function (val) {
348 return val % 2;
349 });
350 </code></pre>
351 </div>
352 <div class="description">
353 <p>
354 Filter creates a new list containing only the values for which the
355 function returns true. Here, we return the remainder of each value
356 when divided by two.
357 </p>
358 <p>
359 Like map, filter can also accept objects and use callbacks for
360 async operations.
361 </p>
362 <a href="#" class="runbtn button">Run code</a>
363 </div>
364 <div class="result">
365 <h2>Result</h2>
366 <pre><code class="no-highlight"></code></pre>
367 <a href="#" class="clearbtn button">Clear result</a>
368 </div>
369 <div class="clear"></div>
370 </div>
371 </div>
372 </div>
373
374 <div class="section code">
375 <div class="rightbg">
376 <div class="leftbg">
377 <div class="example">
378 <h2>Reduce</h2>
379 <pre><code class="javascript">_.reduce([1, 2, 3], function (memo, val) {
380 return memo + val;
381 }, 0);
382 </code></pre>
383 </div>
384 <div class="description">
385 <p>
386 Reduce returns a single value by calling the function on each item,
387 passing in the previous result and the current item's value.
388 </p>
389 <p>
390 Reduce can also accept objects and use callbacks for async operations.
391 A start value is passed in as the 3rd argument.
392 </p>
393 <a href="#" class="runbtn button">Run code</a>
394 </div>
395 <div class="result">
396 <h2>Result</h2>
397 <pre><code class="no-highlight"></code></pre>
398 <a href="#" class="clearbtn button">Clear result</a>
399 </div>
400 <div class="clear"></div>
401 </div>
402 </div>
403 </div>
404
405 <div class="section code">
406 <div class="rightbg">
407 <div class="leftbg">
408 <div class="example">
409 <h2>Each</h2>
410 <pre><code class="javascript">_.each([1, 2, 3], function (val) {
411 console.log(val);
5558da8 Caolan McMahon remove initial value argument from each example
authored
412 });
496b0c2 Caolan McMahon Initial commit
authored
413 </code></pre>
414 </div>
415 <div class="description">
416 <p>
417 If you just want to iterate over a list or object, you can use
418 each. Again, each can use callbacks for performing async operations.
419 </p>
420 <a href="#" class="runbtn button">Run code</a>
421 </div>
422 <div class="result">
423 <h2>Result</h2>
424 <pre><code class="no-highlight"></code></pre>
425 <a href="#" class="clearbtn button">Clear result</a>
426 </div>
427 <div class="clear"></div>
428 </div>
429 </div>
430 </div>
431
432 <div class="section code">
433 <div class="rightbg">
434 <div class="leftbg">
435 <div class="example">
436 <h2>Parallel</h2>
437 <pre><code class="javascript">_.parallel([
438 function (callback) {
439 setTimeout(function () {
440 console.log('one');
441 callback();
442 }, 25);
443 },
444 function (callback) {
445 setTimeout(function () {
446 console.log('two');
447 callback();
448 }, 0);
449 }
450 ]);
451 </code></pre>
452 </div>
453 <div class="description">
454 <p>
455 Nimble also contains some useful flow control functions.
456 Parallel will run a list of async functions all at the
457 same time.
458 </p>
459 <p>
460 You can also add a final callback to use once all functions
461 have completed as the second argument to _.parallel.
462 </p>
463 <a href="#" class="runbtn button">Run code</a>
464 </div>
465 <div class="result">
466 <h2>Result</h2>
467 <pre><code class="no-highlight"></code></pre>
468 <a href="#" class="clearbtn button">Clear result</a>
469 </div>
470 <div class="clear"></div>
471 </div>
472 </div>
473 </div>
474
475 <div class="section code">
476 <div class="rightbg">
477 <div class="leftbg">
478 <div class="example">
479 <h2>Series</h2>
480 <pre><code class="javascript">_.series([
481 function (callback) {
482 setTimeout(function () {
483 console.log('one');
484 callback();
485 }, 25);
486 },
487 function (callback) {
488 setTimeout(function () {
489 console.log('two');
490 callback();
491 }, 0);
492 }
493 ]);
494 </code></pre>
495 </div>
496 <div class="description">
497 <p>
498 Series works similarly to parallel, only it runs each function only
499 once the previous has finished.
500 </p>
501 <p>
502 Again, you can add a final callback to use once all functions
503 have completed.
504 </p>
505 <a href="#" class="runbtn button">Run code</a>
506 </div>
507 <div class="result">
508 <h2>Result</h2>
509 <pre><code class="no-highlight"></code></pre>
510 <a href="#" class="clearbtn button">Clear result</a>
511 </div>
512 <div class="clear"></div>
513 </div>
514 </div>
515 </div>
516
517 <div class="section">
518 <h2>Nimble is small</h2>
519 <div id="sizegraph">
29e1311 Caolan McMahon update minified build and filesize info in index.html
authored
520 <img src="https://chart.googleapis.com/chart?cht=bhs&chs=790x140&chd=t:3321,829|1859,0&chds=0,120&chco=4d89f9|00B88A,c6d9fd&chbh=60&chds=0,5500&chm=tunderscore,000000,0,0,16|tasync,000000,1,0,16|tnimble,000000,0,1,16" />
496b0c2 Caolan McMahon Initial commit
authored
521 </div>
522 <p>
523 By adding only the most frequently used features, and designing the code
524 with minification and gzip compression in mind, Nimble is able to fit into
29e1311 Caolan McMahon update minified build and filesize info in index.html
authored
525 a tiny 829 bytes. Previously, I was including both underscore.js and
496b0c2 Caolan McMahon Initial commit
authored
526 async.js, which adds up to over 5kb.
527 </p>
528 </div>
529
530 <div id="footer">
531 <a href="https://github.com/caolan/nimble/raw/master/nimble.min.js" class="button downloadbtn">Download Now</a>
532 <a href="https://github.com/caolan/nimble" class="button">Watch on GitHub</a>
533 <a href="http://twitter.com/caolan" class="button">Follow me on Twitter</a>
534 </div>
535
536 <script src="nimble.js"></script>
537 <script src="site/json2.min.js"></script>
538 <script src="site/jquery-1.5.1.min.js"></script>
539 <script>
540 $('.code').each(function () {
541 var src = $('.example pre code', this).text();
542 var container = this;
543 $('.runbtn', this).click(function (ev) {
544 ev.preventDefault();
545 var _console = window.console;
546 var console = {
547 log: function (msg) {
548 if (_console) _console.log(msg);
549 msgstr = JSON.stringify(msg);
550 $('.result pre code', container).text(
551 $('.result pre code', container).text() + msgstr + '\n'
552 );
553 }
554 };
555 var result = eval(src);
556 if (result !== undefined) {
557 console.log(result);
558 }
559 $(container).addClass('show_result');
560 return false;
561 });
562 $('.clearbtn', this).click(function (ev) {
563 ev.preventDefault();
564 $('.result pre code', container).text('');
565 $(container).removeClass('show_result');
566 return false;
567 });
568 });
569 </script>
570 <script src="site/highlight.min.js"></script>
571 <script>
572 hljs.initHighlighting();
573 </script>
574
1054d7d Caolan McMahon add analytics to site
authored
575 <script type="text/javascript">
576 var _gaq = _gaq || [];
577 _gaq.push(['_setAccount', 'UA-19896313-1']);
578 _gaq.push(['_trackPageview']);
579 (function() {
580 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
581 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
582 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
583 })();
584 </script>
585
496b0c2 Caolan McMahon Initial commit
authored
586 </body>
587 </html>
Something went wrong with that request. Please try again.