Beyond HTMLScriptsprachen, Frameworks, Templatesprachen und                    vieles mehr                  9. Mai 2012   ...
1992
1998
2001
2002
2012
Best of Swiss Web 2012       ausser einer Seite
HTML   CSSJavaScript
Offline<!DOCTYPE HTML>                         CACHE MANIFEST<html manifest="/cache.manifest">       FALLBACK:<body>       ...
Storageif (Modernizr.localstorage) {  var foo = localStorage.getItem("key");  // ...  localStorage.setItem("key", foo);} e...
Websocketsvar sockets = new webSockets("ws://foo.example.com:8181/socket");sockets.bind("open", function (msg) {    debug(...
Datei Zugriff<ol ondragstart="dragStartHandler(event)"> <li draggable="true" data-value="fruit-apple">Apples</li> <li drag...
Semantischhttp://slides.html5rocks.com/#new-form-types
Multimedia<audio id="audio" src="sound.mp3" controls></audio><video id="video" src="movie.webm" autoplay controls></video>...
3D Graphik http://slides.html5rocks.com/#canvas-3d
Präsentation (CSS 3)
Präsentation (CSS 3)           Typographie (Webfonts)
Präsentation (CSS 3)                     Typographie (Webfonts)Rotation (2D / 3D)
http://flickr.com/photos/glennharper/49536169/
WerkzeugeThe Way of the carpenter is tobecome proficient in the use ofhis tools, first to lay his plans witha true measure a...
HTML Tools http://www.flickr.com/photos/lynnfriedman/5570720402/
HTML<div id="profile">           profile  <div class="left column">                left column    <h4>Willkommen</h4>     ...
HTML    profile         left columnh4 Willkommenp     address    = current_user.address          right columnul     li   e...
HAMLprofile  left column    h4    p address= current_user.address  right column    ul      li email= current_user.email   ...
HAML#profile profile  .left.column   left column    %h4 Willkommen     h4    %p#address= current_user.address     p addres...
http://haml-lang.com/Python, Lua, ASP.NET, .NET, PHP, PHP5, JavaScript, Perl, Scala, Java
HAML#profile profile  .left.column   left column    %h4 Willkommen     h4    %p#address= current_user.address     p addres...
Jadeprofile  left column   h4 Willkommen   p address= current_user.address  right column   ul     li email= current_user.e...
Jade#profile profile  .left.column   left column    h4 Willkommen    p address= current_user.address    p#address=  .right...
Templates http://www.flickr.com/photos/jima/460348206/
Mustache{{ }}http://mustache.github.com/
Mustache Template<h1>{{header}}</h1>{{#items}}  {{#first}}    <li><strong>{{name}}</strong></li>  {{/first}}  {{#link}}   ...
JSON Daten{    "header": "Colors",    "items": [        {"name": "red", "first": true, "url": "#Red"},        {"name": "gr...
Resultat<h1>Colors</h1><li><strong>red</strong></li><li><a href="#Green">green</a></li><li><a href="#Blue">blue</a></li
CSS Toolshttp://www.flickr.com/photos/the-meir/2201434695/
<font face="Arial Black">&nbsp;Google search, a <font color="#0000ff">new</font>service from</font><big><font face="Arial ...
Inhalt  FormVerhalten
Inhalt               Form         Verhalten
html                css       javascript
2744 Zeilen
„Besseres“ CSS
„Besseres“ CSS     SCSShttp://sass-lang.com/
„Besseres“ CSS     SCSShttp://sass-lang.com/   http://lesscss.org/
Vorteile• Modular - includes• Variablen• Berechnungen• Mixins
SCSS#navbar {  $navbar-width: 800px;  $items: 5;  $navbar-color: #ce4dd6;    width: $navbar-width;    border-bottom: 2px s...
SCSS#navbar {  $navbar-width: 800px;                                            Variablen  $items: 5;  $navbar-color: #ce4...
SCSS#navbar {  $navbar-width: 800px;                                            Variablen  $items: 5;  $navbar-color: #ce4...
SCSS#navbar {  $navbar-width: 800px;                                            Variablen  $items: 5;  $navbar-color: #ce4...
CSS#navbar {  width: 800px;  border-bottom: 2px solid #ce4dd6; }  #navbar li {    float: left;    width: 150px;    backgro...
Browser Prefixe Präfix           Browser  -moz-            Firefox -webkit-      Safari, Chrome    -o-            Opera-ms-,...
.my-class, #my-id {    border-radius: 1em;    transition: all 1s ease;    box-shadow: #123456 0 0 10px;}
.my-class, #my-id {    -moz-border-radius: 1em;    -webkit-border-radius: 1em;    -ms-border-radius: 1em;    border-radius...
http://www.sitepoint.com/opera-css3-webkit-prefix/#fbid=OROafxTvqrv
WebKit
WebKit                         E 6                      e I              n e u      d e rist
SCSS@mixin rounded($side, $radius: 10px) {  border-#{$side}-radius: $radius;  -moz-border-radius-#{$side}: $radius;  -webk...
SCSSMixin        @mixin rounded($side, $radius: 10px) {          border-#{$side}-radius: $radius;          -moz-border-rad...
SCSSMixin                                   Variable        @mixin rounded($side, $radius: 10px) {          border-#{$side...
CSS#navbar li {  border-top-radius: 10px;  -moz-border-radius-top: 10px;  -webkit-border-top-radius: 10px; }#footer {  bor...
Modular
JavaScript Tools
JS DOM Frameworks
ApplicationFrameworks
Tools Socketstream
Testing
Jasminedescribe("CreditCard", function() {  it("cleans number by removing spaces and dashes", function() {    expect(Credi...
http://visionmedia.github.com/mocha/
Server
node.jsvar http = require(http);http.createServer(function (req, res) {  res.writeHead(200, {Content-Type: text/plain});  ...
CoffeeScriptnumber   = 42opposite = truenumber = -42 if oppositesquare = (x) -> x * xlist = [1, 2, 3, 4, 5]math =  root:  ...
var cubes, list, math, num, number,        race = function() {     opposite, race, square,                  var runners, w...
http://www.flickr.com/photos/gruts/4612133889/
Jens-Christian Fischerjens-christian.fischer@simplificator.com                @jcfischer
Beyond HTML Präsentation an ONE Konferenz 2012 von Jens-Christian Fischer steht unter einerCreative Commons Namensnennung ...
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Upcoming SlideShare
Loading in …5
×

Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr

3,275 views

Published on

Früher war alles besser - sowieso! Konnte man vor 20 Jahren alleine mit HTML einen Webauftritt gestalten, hat sich die Anzahl der Technologien, die eine Webentwicklerin beherrschen muss, vervielfacht. Was ist wichtig, was unwichtig? In diesem Vortrag beleuchtet Jens-Christian den aktuellen Zoo von Technologien, und zeigt auf, wie sich diese Vielfalt sinnvoll bändigen lässt.

HTML(5), CSS(3), JavaScript, CoffeeScript, JavaScript Frameworks (jQuery, Prototype, Moo, Dojo, Ext, ...), JavaScript Microframeworks (Backbone, Ember, Flatiron), Templatingsprachen, Hilfsmittel zur Gestaltung von CSS (SASS, SCSS), Responsive Design, Browsererkennung, Caching, Performancetweaks, Testing und vieles mehr wird thematisiert.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,275
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Um Daten darzustellen, ohne auf Clientseite HTML zu bauen\n (auch wenn es mit jQuery &amp;#x201E;einfacher&amp;#x201C; geht)\n Funktioniert teilweise auch Serverseitig \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr

    1. 1. Beyond HTMLScriptsprachen, Frameworks, Templatesprachen und vieles mehr 9. Mai 2012 Jens-Christian Fischer @jcfischer
    2. 2. 1992
    3. 3. 1998
    4. 4. 2001
    5. 5. 2002
    6. 6. 2012
    7. 7. Best of Swiss Web 2012 ausser einer Seite
    8. 8. HTML CSSJavaScript
    9. 9. Offline<!DOCTYPE HTML> CACHE MANIFEST<html manifest="/cache.manifest"> FALLBACK:<body> / /offline.html... NETWORK:</body> /tracking.cgi</html> CACHE: /clock.css /clock.js /clock-face.jpghttp://diveintohtml5.org/offline.html
    10. 10. Storageif (Modernizr.localstorage) { var foo = localStorage.getItem("key"); // ... localStorage.setItem("key", foo);} else { alert(No storage capabilities);} http://diveintohtml5.org/storage.html
    11. 11. Websocketsvar sockets = new webSockets("ws://foo.example.com:8181/socket");sockets.bind("open", function (msg) { debug(Verbindung steht!");});sockets.bind("close", function (msg) { debug("Verbindung verloren!");});sockets.bind("doStuff", function (msg) { var data = msg.data; if (data) { doSomething(data); }});
    12. 12. Datei Zugriff<ol ondragstart="dragStartHandler(event)"> <li draggable="true" data-value="fruit-apple">Apples</li> <li draggable="true" data-value="fruit-orange">Oranges</li> <li draggable="true" data-value="fruit-pear">Pears</li></ol><script> var internalDNDType = text/x-example; function dragStartHandler(event) { if (event.target instanceof HTMLLIElement) { // use the elements data-value="" attribute as the value to be moving: event.dataTransfer.setData(internalDNDType, event.target.dataset.value); event.dataTransfer.effectAllowed = move; // only allow moves } else { event.preventDefault(); // dont allow selection to be dragged } }</scripthttp://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-dragevent-and-datatransfer-interfaces
    13. 13. Semantischhttp://slides.html5rocks.com/#new-form-types
    14. 14. Multimedia<audio id="audio" src="sound.mp3" controls></audio><video id="video" src="movie.webm" autoplay controls></video><script> document.getElementById("audio").muted = false; document.getElementById("video").play();</script>
    15. 15. 3D Graphik http://slides.html5rocks.com/#canvas-3d
    16. 16. Präsentation (CSS 3)
    17. 17. Präsentation (CSS 3) Typographie (Webfonts)
    18. 18. Präsentation (CSS 3) Typographie (Webfonts)Rotation (2D / 3D)
    19. 19. http://flickr.com/photos/glennharper/49536169/
    20. 20. WerkzeugeThe Way of the carpenter is tobecome proficient in the use ofhis tools, first to lay his plans witha true measure and then performhis work according to plan. – Go Rin No Sho
    21. 21. HTML Tools http://www.flickr.com/photos/lynnfriedman/5570720402/
    22. 22. HTML<div id="profile"> profile <div class="left column"> left column <h4>Willkommen</h4> h4 Willkommen <p id="address"><%= current_user.address %></p> p address = </div> <div class="right column"> right column <ul> ul <li id="email"><%= current_user.email %></li> li email = <li id="bio"><%= current_user.bio %></li> li bio = </ul> </div></div>
    23. 23. HTML profile left columnh4 Willkommenp address = current_user.address right columnul li email = current_user.email li bio = current_user.bio
    24. 24. HAMLprofile left column h4 p address= current_user.address right column ul li email= current_user.email li bio= current_user.bio
    25. 25. HAML#profile profile .left.column left column %h4 Willkommen h4 %p#address= current_user.address p address= .right.column right column %ul ul %li#email= current_user.email li email= %li#bio= current_user.bio li bio= current_user
    26. 26. http://haml-lang.com/Python, Lua, ASP.NET, .NET, PHP, PHP5, JavaScript, Perl, Scala, Java
    27. 27. HAML#profile profile .left.column left column %h4 Willkommen h4 %p#address= current_user.address p address= .right.column right column %ul ul %li#email= current_user.email li email= %li#bio= current_user.bio li bio= current_user
    28. 28. Jadeprofile left column h4 Willkommen p address= current_user.address right column ul li email= current_user.email li bio= current_user.bio http://jade-lang.com/
    29. 29. Jade#profile profile .left.column left column h4 Willkommen p address= current_user.address p#address= .right.column right column ul li email= current_user.email li#email= li bio= current_user li#bio= current_user.bio http://jade-lang.com/
    30. 30. Templates http://www.flickr.com/photos/jima/460348206/
    31. 31. Mustache{{ }}http://mustache.github.com/
    32. 32. Mustache Template<h1>{{header}}</h1>{{#items}} {{#first}} <li><strong>{{name}}</strong></li> {{/first}} {{#link}} <li><a href="{{url}}">{{name}}</a></li> {{/link}}{{/items
    33. 33. JSON Daten{ "header": "Colors", "items": [ {"name": "red", "first": true, "url": "#Red"}, {"name": "green", "link": true, "url": "#Green"}, {"name": "blue", "link": true, "url": "#Blue"} ],}
    34. 34. Resultat<h1>Colors</h1><li><strong>red</strong></li><li><a href="#Green">green</a></li><li><a href="#Blue">blue</a></li
    35. 35. CSS Toolshttp://www.flickr.com/photos/the-meir/2201434695/
    36. 36. <font face="Arial Black">&nbsp;Google search, a <font color="#0000ff">new</font>service from</font><big><font face="Arial Black"><big><strong><font size="4"><a href="http://www.leicatime.com"><img src="favicon.gif" border="0" width="16" height="16"></a></font></strong></big></font></big><strong><br></strong><b><font face="Arial Black">ATTENTION: for my &quot;how to purchase&quot; INFO page,please <a target="_blank" href="a000-PURCHASE-info.htm">click HERE !</a>&nbsp;Partita IVA: IT 06822200587<br>--------------------------------------</font></b><br><font size="4"><strong><font color="#ff0000"><img alt="globeTurns.gif (7996 byte)" src="http://www.leicatime.com/globeTurns.gif" width="30" height="30"></font></strong></font><font size="5"><img border="0" src="http://www.leicatime.com/EuropeanUnionWte2.gif" width="75"height="50"></font><font size="5"><b><font size="1"><a href="http://www.leicatime.com/a000-CASES-line.htm"target="_blank"><img border="0" src="http://www.leicatime.com/LeicatimeBannerOK.jpg" width="141" height="75"></a></font></b><img src="http://www.leicatime.com/GianniFototesseraSmart.jpg" width="75" height="89"><font size="3"></font><font color="#800080" size="5" face="Arial Black"> http://leicatime.com/
    37. 37. Inhalt FormVerhalten
    38. 38. Inhalt Form Verhalten
    39. 39. html css javascript
    40. 40. 2744 Zeilen
    41. 41. „Besseres“ CSS
    42. 42. „Besseres“ CSS SCSShttp://sass-lang.com/
    43. 43. „Besseres“ CSS SCSShttp://sass-lang.com/ http://lesscss.org/
    44. 44. Vorteile• Modular - includes• Variablen• Berechnungen• Mixins
    45. 45. SCSS#navbar { $navbar-width: 800px; $items: 5; $navbar-color: #ce4dd6; width: $navbar-width; border-bottom: 2px solid $navbar-color; li { float: left; width: $navbar-width/$items - 10px; background-color: lighten($navbar-color, 20%); &:hover { background-color: lighten($navbar-color, 10%); } }}
    46. 46. SCSS#navbar { $navbar-width: 800px; Variablen $items: 5; $navbar-color: #ce4dd6; width: $navbar-width; border-bottom: 2px solid $navbar-color; li { float: left; width: $navbar-width/$items - 10px; background-color: lighten($navbar-color, 20%); &:hover { background-color: lighten($navbar-color, 10%); } }}
    47. 47. SCSS#navbar { $navbar-width: 800px; Variablen $items: 5; $navbar-color: #ce4dd6; width: $navbar-width; border-bottom: 2px solid $navbar-color; Berechnungen li { float: left; width: $navbar-width/$items - 10px; background-color: lighten($navbar-color, 20%); &:hover { background-color: lighten($navbar-color, 10%); } }}
    48. 48. SCSS#navbar { $navbar-width: 800px; Variablen $items: 5; $navbar-color: #ce4dd6; width: $navbar-width; border-bottom: 2px solid $navbar-color; Berechnungen li { float: left; width: $navbar-width/$items - 10px; background-color: Funktionsaufruf lighten($navbar-color, 20%); &:hover { background-color: lighten($navbar-color, 10%); } }}
    49. 49. CSS#navbar { width: 800px; border-bottom: 2px solid #ce4dd6; } #navbar li { float: left; width: 150px; background-color: #e5a0e9; } #navbar li:hover { background-color: #d976e0; }
    50. 50. Browser Prefixe Präfix Browser -moz- Firefox -webkit- Safari, Chrome -o- Opera-ms-, -mso- Internet Explorer
    51. 51. .my-class, #my-id { border-radius: 1em; transition: all 1s ease; box-shadow: #123456 0 0 10px;}
    52. 52. .my-class, #my-id { -moz-border-radius: 1em; -webkit-border-radius: 1em; -ms-border-radius: 1em; border-radius: 1em; -moz-transition: all 1s ease; -o-transition: all 1s ease; -webkit-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; -moz-box-shadow: #123456 0 0 10px; -webkit-box-shadow: #123456 0 0 10px; -ms-box-shadow: #123456 0 0 10px; box-shadow: #123456 0 0 10px; }
    53. 53. http://www.sitepoint.com/opera-css3-webkit-prefix/#fbid=OROafxTvqrv
    54. 54. WebKit
    55. 55. WebKit E 6 e I n e u d e rist
    56. 56. SCSS@mixin rounded($side, $radius: 10px) { border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius;}#navbar li { @include rounded(top); }#footer { @include rounded(top, 5px); }#sidebar { @include rounded(left, 8px); }
    57. 57. SCSSMixin @mixin rounded($side, $radius: 10px) { border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius; } #navbar li { @include rounded(top); } #footer { @include rounded(top, 5px); } #sidebar { @include rounded(left, 8px); }
    58. 58. SCSSMixin Variable @mixin rounded($side, $radius: 10px) { border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius; } #navbar li { @include rounded(top); } #footer { @include rounded(top, 5px); } #sidebar { @include rounded(left, 8px); }
    59. 59. CSS#navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; }#footer { border-top-radius: 5px; -moz-border-radius-top: 5px; -webkit-border-top-radius: 5px; }#sidebar { border-left-radius: 8px; -moz-border-radius-left: 8px; -webkit-border-left-radius: 8px; }
    60. 60. Modular
    61. 61. JavaScript Tools
    62. 62. JS DOM Frameworks
    63. 63. ApplicationFrameworks
    64. 64. Tools Socketstream
    65. 65. Testing
    66. 66. Jasminedescribe("CreditCard", function() { it("cleans number by removing spaces and dashes", function() { expect(CreditCard.cleanNumber("123 4-5")).toEqual("12345"); }); it("validates based on mod 10", function() { expect(CreditCard.validNumber("4111 1111-11111111")).toBeTruthy(); expect(CreditCard.validNumber("4111111111111121")).toBeFalsy(); }); it("validates when text field loses focus", function() { loadFixtures("order_form.html"); $("#card_number").validateCreditCardNumber(); $("#card_number").val("123"); $("#card_number").blur(); expect($("#card_number_error")).toHaveText("Invalid credit card number."); $("#card_number").val("4111 1111-11111111"); $("#card_number").blur(); expect($("#card_number_error")).toHaveText(""); });}); http://pivotal.github.com/jasmine/
    67. 67. http://visionmedia.github.com/mocha/
    68. 68. Server
    69. 69. node.jsvar http = require(http);http.createServer(function (req, res) { res.writeHead(200, {Content-Type: text/plain}); res.end(Hello Worldn);}).listen(1337, 127.0.0.1);console.log(Server running at http://127.0.0.1:1337/);
    70. 70. CoffeeScriptnumber = 42opposite = truenumber = -42 if oppositesquare = (x) -> x * xlist = [1, 2, 3, 4, 5]math = root: Math.sqrt square: square cube: (x) -> x * square xrace = (winner, runners...) -> print winner, runnersalert "I knew it!" if elvis?cubes = (math.cube num for num in list)
    71. 71. var cubes, list, math, num, number, race = function() { opposite, race, square, var runners, winner; __slice = [].slice; winner = arguments[0], runners = 2 <= arguments.length ? __slice.call(arguments, 1) : [];number = 42; return print(winner, runners); };opposite = true; if (typeof elvis !== "undefined" && elvis !== null) {if (opposite) { alert("I knew it!"); number = -42; }} cubes = (function() {square = function(x) { var _i, _len, _results; return x * x; _results = [];}; for (_i = 0, _len = list.length; _i < _len; _i++) { num = list[_i];list = [1, 2, 3, 4, 5]; _results.push(math.cube(num)); }math = { return _results; root: Math.sqrt, })(); square: square, cube: function(x) { return x * square(x); }}; http://coffeescript.org/
    72. 72. http://www.flickr.com/photos/gruts/4612133889/
    73. 73. Jens-Christian Fischerjens-christian.fischer@simplificator.com @jcfischer
    74. 74. Beyond HTML Präsentation an ONE Konferenz 2012 von Jens-Christian Fischer steht unter einerCreative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Schweiz Lizenz.

    ×