1. The Future of CSS and JavaScript Today Daniel Laughland Forward Thinking

2. fast. forward. thinking..scss.sass.less.ts.coffee.min.css.min.js

3. Why Use Pre-Processors? Repetition Utility Classes Browser Prefixes Monolithic Files function s as Classes var self = this; "0" == true Awkward Namespacing fast. forward. thinking.

4. Concise, Consistent, and Reusable fast. forward. thinking.

5. Nested Rules #header h1 { font-size: 200%; } #header a { text-decoration: none; } #header nav { float: right; } @media screen and (max-width:480px) { #header nav { float: none; } } fast. forward. thinking.

6. Nested Rules #header { h1 { font-size: 200%; } a { text-decoration: none; } nav { float: right; } @media screen and (max-width:480px) { nav { float: none; } } fast. forward. thinking.

7. Variables fast. forward. thinking. h1, h2 { color: #D9A164; }.callout { background-color: #D9A164; } li:before { content: " "; color: #D9A164; }

8. Variables $orange-peanut: #D9A164; h1, h2 { color: $orange-peanut; }.callout { background-color: $orange-peanut; } li:before { content: " "; color: $orange-peanut; } fast. forward. thinking. SASS: $variable LESS: @variable SASS: $variable LESS: @variable

9. Mixins … div.right { float: right; margin: 1em; }.box { border: 1px solid black; padding: 1em; } fast. forward. thinking.

10. Mixins fast. forward. thinking. … div.right { float: right; margin: 1em; }.box { border: 1px solid black; padding: 1em; } #related-links {.right;.box; } [LESS]

11. Mixins fast. forward. thinking. … div @mixin right { float: right; margin: 1em; } @mixin box { border: 1px solid black; padding: 1em; } #related-links { @include right; @include box; } [SASS]

12. Functions @mixin boxify($box-color, $width) { width: $width – 2px; border: 2px solid $box-color; background-color: lighten($box-color, 50%); margin: $width / 15; } #callout { @include boxify(#B1946C, 150px); } fast. forward. thinking.

13. Functions Color Manipulation saturate() green() fade-out() hsl() complement() Math and Units round() max() (1in + 12px) fast. forward. thinking.

14. Ported to many platforms Simple setup & integration Limited capability Bootstrap Kendo UI Built on Ruby Many scripting options Powerful add-on libraries ZURB Foundation Sencha fast. forward. thinking.

15. Unified Syntax for Prefixed Features @include background(linear-gradient(top left, #333, #030)); Automatic Image Sprites @import "my-icons/*.png"; @include all-my-icons-sprites; Detect Image Height and Width width: image-width('banner.jpg'); In-Line Base64 Encoding background: inline-image('pattern.png'); Built-In CSS Reset @include "compass/reset"; fast. forward. thinking.

17. Tools for LESS/SASS Visual Studio 2012 Web Tools Update 2 Web Essentials 2012 Mindscape Web Workbench fast. forward. thinking.

18. Easier Structure and Code Safety fast. forward. thinking.

19. window.myApp.OrangePeanut = (function(ko){ function OrangePeanut() { this.forMe = ko.observable(true); } OrangePeanut.prototype.givePeanut = function() { if (this.forMe() === true) { console.log("I accept you!"); } return OrangePeanut; })(ko); ko.applyBindings(window.myApp.OrangePeanut);

20. window.myApp.OrangePeanut = function(){ var thisPeanut = this; this.forMe = ko.observable(true); this.givePeanut = function() { if (thisPeanut.forMe() === true) { console.log("I accept you!"); } }; ko.applyBindings(new OrangePeanut()); fast. forward. thinking.

21. class OrangePeanut { public Observable forMe; public void givePeanut() { if (forMe) console.log ("I accept you!"); } ko.applyBindings(new OrangePeanut());new fast. forward. thinking.

23. TypeScript Microsoft Open-Source Superset of ECMAScript 5 Well-Integrated with VS “It’s just JavaScript” Inspired by Ruby syntax Best with Node.JS fast. forward. thinking.

24. class OrangePeanut constructor: (@forMe) -> givePeanut: -> console.log "I accept you!" if @forMe myPeanut = new OrangePeanut true fast. forward. thinking.

25. class OrangePeanut constructor: (data) -> @forMe = ko.observable data.forMe givePeanut: -> console.log "I accept you!" if @forMe() myPeanut = new OrangePeanut true fast. forward. thinking.

26. class OrangePeanut { forMe: KnockoutObservableBool; constructor(mine: boolean) { this.forMe = ko.observable(mine); } givePeanut() { if (this.forMe()) console.log("I accept you!"); } var myPeanut = new MyApp.OrangePeanut(true); fast. forward. thinking.

28. Thinking Forward Integration with Bundler/WebGrease Real Source Map Support in SASS New Language Features (like Generics) fast. forward. thinking.

29. Daniel Laughland daniel.laughland@centare.com Twitter @jabberwik fast. forward. thinking.