Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "The Future of CSS and JavaScript Today Daniel Laughland Forward Thinking."— Presentation transcript:

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; 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; 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 SASS: $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. … right { float: right; margin: 1em; box { border: 1px solid black; padding: 1em; } #related-links box; } [SASS]

12 boxify($box-color, $width) { width: $width – 2px; border: 2px solid $box-color; background-color: lighten($box-color, 50%); margin: $width / 15; } #callout 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 background(linear-gradient(top left, #333, #030)); Automatic Image 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 "compass/reset"; fast. forward. thinking.

16

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.

22

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: -> givePeanut: -> console.log "I accept you!" myPeanut = new OrangePeanut true fast. forward. thinking.

25 class OrangePeanut constructor: (data) = ko.observable data.forMe givePeanut: -> console.log "I accept you!" 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.

27

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

29 Daniel Laughland fast. forward. thinking.


Download ppt "The Future of CSS and JavaScript Today Daniel Laughland Forward Thinking."

Similar presentations


Ads by Google