Your SlideShare is downloading. ×

Front End Development: The Important Parts

7,305

Published on

The important parts of the front end development sphere including CSS3, advanced JavaScript, libraries such as jQuery, RequireJS and Promises. And finally, chrome developer tools for successful …

The important parts of the front end development sphere including CSS3, advanced JavaScript, libraries such as jQuery, RequireJS and Promises. And finally, chrome developer tools for successful debugging and editing.

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

No Downloads
Views
Total Views
7,305
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
93
Comments
0
Likes
15
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. FRONT END DEVELOPMENTby Sergey N. BolshchikovThe Important Parts
  • 2. 3 hours ofwasting my time?
  • 3. Lets find out
  • 4. LETS FIND OUT1. Is it possible to do shadows with CSS?
  • 5. LETS FIND OUT1. Is it possible to do shadows with CSS?2. Who can write such function?var result = addNumbers(2)(3);
  • 6. LETS FIND OUT1. Is it possible to do shadows with CSS?2. Who can write such function?var result = addNumbers(2)(3);3. Who can define "this"?
  • 7. LETS FIND OUT1. Is it possible to do shadows with CSS?2. Who can write such function?var result = addNumbers(2)(3);3. Who can define "this"?4. How to call a function after completion oftwo async functions together?
  • 8. OUTLINEI. CSS1. Basics2. CSS33. LESSII. JavaScript1. Functions: objects2. Lexical scope: closures, module pattern3. Execution contexts and "this" valueIII. Tools and Libraries1. RequireJS2. jQuery3. Promises4. Chrome Dev Tools
  • 9. CSS
  • 10. CSS :: SELECTORSSelector Description Example*Matches any element.E Matches any E element (i.e., anelement of type E).aE F Matches any F element that is adescendant of an E element.div aE > F Matches any F element that is achild of an element E.div > aE:first-child Matches element E when E is thefirst child of its parent.li:first-childE:linkE:visitedMatches element E if E is the sourceanchor of a hyperlink of which thetarget is not yet visited (:link) oralready visited (:visited).a:linka:visited
  • 11. CSS :: SELECTORS (cont.)Selector Description ExampleE:activeE:hoverE:focusMatches E during certain useractions.a:activea:hovera:focusE + F Matches any F element immediatelypreceded by a sibling element E.div + divE[foo] Matches any E element with the"foo" attribute set (whatever thevalue).div[data-id]E[foo="warning"] Matches any E element whose "foo"attribute value is exactly equal to"warning".input[type=”text”]DIV.warning Language specific. (In HTML, thesame as DIV[class~="warning"].)div.navigationE#myid Matches any E element with ID equalto "myid".div#main
  • 12. CSS :: BOX MODEL
  • 13. CSS :: MORE● display: [none, block, inline, table, inline-block...],● position: [absolute, fixed, relative],● top: [number],● left: [number],● float: [left, right, none]● font: size, weight, family
  • 14. CSS :: CSS3● border-radius● box-shadow● gradients● multiple columns● transformations● animationhttp://jsbin.com/udimij/1/edit
  • 15. LESS
  • 16. LESS :: WHY?● CSS is too much writing.nav {}.nav ul {}.nav ul li {}● No validation● Declarative
  • 17. LESS :: WHAT?LESS extends CSS with dynamic behaviorsuch as variables, mixins, operations andfunctions.
  • 18. LESS :: NESTING.nav {ul {...li {...}}}
  • 19. LESS :: VARIABLES@color: #4D926F;#header {color: @color;}h2 {color: @color;}#header {color: #4D926F;}h2 {color: #4D926F;}
  • 20. LESS :: MIXINS.border-radius (@radius) {border-radius: @radius;-moz-border-radius: @radius;-webkit-border-radius: @radius;}#header {.border-radius(4px);}.button {.border-radius(6px);}#header {border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;}.button {border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;}
  • 21. FUNCTIONSinJAVASCRIPT
  • 22. FUNCTIONis anOBJECT
  • 23. FUNCTIONS :: OBJECTSfunction foo (x) {return x + 1;}function bar (y) {return y * 2;}var myFuncs = [foo, bar];myFuncs[0](2) // 3
  • 24. FUNCTIONS :: OBJECTSvar callFirst = function (x) {return x + 1;}var callSecond = function (f, x) {return f(f(x));}var attempt = callSecond(callFirst, 2); // 4
  • 25. FUNCTIONS :: OBJECTSvar makeFunc = function () {var addOne = function (x) {return x + 1;}return addOne;}var f = makeFunc();f(3); // 4
  • 26. LEXICALENVIRONMENT
  • 27. FUNCTIONS :: LEXICAL ENV :: defDefinition:A Lexical Environment is a specification type used to definethe association of Identifiers to specific variables andfunctions based upon the lexical nesting structure ofECMAScript code.
  • 28. FUNCTIONS :: LEXICAL ENV :: wtffunction () {...function () {...return;}return ;}Lexical Env OutersLexical Env Inner
  • 29. FUNCTIONS :: LEXICAL ENV :: nestingfunction createIncreaser () {var accumulator = 0;var increaser = function () {return accumulator += 2;};return increaser;}var inc = createIncreaser();console.log(inc()); // 2console.log(inc()); // 4console.log(inc()); // 6
  • 30. FUNCTIONS :: LEXICAL ENV :: closurefunction createIncreaser () {var accumulator = 0;var increaser = function () {return accumulator += 2;};return increaser;}var inc = createIncreaser();console.log(inc()); // 2console.log(inc()); // 4console.log(inc()); // 6envcode block
  • 31. FUNCTIONS :: LEXICAL ENV :: module pattern// not a constructorvar myModule = (function (projId) {var moduleName, projectorId;moduleName = toolbar;projectorId = projId;return {init: function () {console.log(moduleName);},tickUpdate: function () {}};})();myModule.init() // "toolbar"myModule.moduleName // undefined
  • 32. PROBLEM<div>I am div 1</div><div>I am div 2</div><div>I am div 3</div>
  • 33. PROBLEM<div>I am div 1</div><div>I am div 2</div><div>I am div 3</div>var i, divs, len;i = 0;divs=document.getElementsByTagName(div);len = divs.length;for (i; i < len; i += 1) {divs[i].addEventListener(click,function () {alert(I am div + i);}, false)}http://jsbin.com/acoceb/1/edit
  • 34. PROBLEMenvironmentvar ieventhandler 1eventhandler 2eventhandler 3
  • 35. PROBLEM<div>I am div 1</div><div>I am div 2</div><div>I am div 3</div>var i, divs, len;i = 0;divs = document.getElementsByTagName(div);len = divs.length;for (i; i < len; i += 1) {(function (id) {divs[i].addEventListener(click,function () {alert("I am div " + (id + 1));}, false);})(i);}http://jsbin.com/acoceb/5/edit
  • 36. PROBLEMenvironmenteventhandler 1eventhandler 2eventhandler 3var i var i var i
  • 37. EXECUTIONCONTEXT
  • 38. FUNCTIONS :: EXECUTIONthis.javascript !== this.javathis.javascript !== self.python
  • 39. FUNCTIONS :: EXECUTION CONTEXTEvery line of JavaScript code is run in an“execution context.”ExecCont = {LexicalEnv: {},VarEnv: {},ThisBinding: {}}
  • 40. FUNCTIONS :: EXECUTABLE CODE TYPES● Global codealert("hello world");● Function codefunction callMe () {alert(hello world);}● Eval code
  • 41. FUNCTIONS :: GLOBAL CONTEXTvar a = 1,b = 3c = a + b;alert(c); // 4alert(this); // window
  • 42. FUNCTIONS :: FUNC CONTEXT :: methodvar a = {b: function() {return this;}};a.b(); //a;a[b](); //a;var c = {};c.d = a.b;c.d(); //c
  • 43. FUNCTIONS :: FUNC CONTEXT :: functionfunction a () {return this;}var A = a(); // window
  • 44. FUNCTIONS :: FUNC CONTEXT :: functionvar a = {b: function() {return this;}};var foo = a.b;foo(); //window
  • 45. FUNCTIONS :: FUNC CONTEXT :: functionvar a = {b: function() {var c = function() {return this;};return c();}};a.b(); //window
  • 46. FUNCTIONS :: FUNC CONTEXT :: callfunction t() {return [].slice.call(arguments, 1);}var upd = t(1,2,3,4,5);// [2,3,4,5]fun.call(thisArg[, arg1[, arg2[, ...]]])
  • 47. FUNCTIONS :: FUNC CONTEXT :: applyfunction t() {return [].slice.apply(arguments, [1]);}var upd = t(1,2,3,4,5);// [2,3,4,5]fun.apply(thisArg[, argsArray])
  • 48. function Builder () {this.name = Arnold;}var b = new Builder();// b = {// name: Arnold// }FUNCTIONS :: FUNC CONTEXT :: new
  • 49. FUNCTIONS :: FUNC CONTEXT :: referenceExecution Context Syntax of function call Value of thisGlobal n/a global object (e.g. window)FunctionMethod call:myObject.foo();myObjectFunctionBaseless function call:foo();global object (e.g. window)(undefined in strict mode)FunctionUsing call:foo.call(context, myArg);contextFunctionUsing apply:foo.apply(context, [myArgs]);contextFunctionConstructor with new:var newFoo = new Foo();the new instance(e.g. newFoo)Evaluation n/a value of this in parent contextsource: http://javascriptweblog.wordpress.com/2010/08/30/understanding-javascripts-this/
  • 50. TOOLS
  • 51. REQUIREJS
  • 52. REQUIREJS :: WHY?● Web sites are turning into Web apps● Code complexity grows as the site getsbigger● Assembly gets harder● Developer wants discrete JS files/modules● JavaScript doesnt have import yetsource: http://requirejs.org/docs/why.html
  • 53. REQUIREJS :: WHAT?RequireJSisan AMD JavaScript fileand module loader.
  • 54. REQUIREJS :: HOW? :: definedefine();
  • 55. REQUIREJS :: HOW? :: definedefine([]);
  • 56. REQUIREJS :: HOW? :: definedefine([sandbox, ./views/View]);
  • 57. REQUIREJS :: HOW? :: definedefine([sandbox, ./views/View],function () {});
  • 58. REQUIREJS :: HOW? :: definedefine([sandbox, ./views/View],function (sandbox, View) {});
  • 59. REQUIREJS :: HOW? :: definedefine([sandbox, ./views/View],function (sandbox, View) {var Module = function () { }return Module;});
  • 60. REQUIREJS :: HOW? :: definedefine([sandbox, ./views/View],function (sandbox, View) {var Module = function () {var views = [];this.init = function () { };this.tickUpdate = function () { }}return Module;});
  • 61. REQUIREJS :: HOW? :: definedefine([sandbox, ./views/View],function (sandbox, View) {var Module = function () {var views = [];this.init = function () {};this.tickUpdate = function () {this.views.push(View.create());}}return Module;});
  • 62. REQUIREJS :: HOW? :: configrequire.config({shim: {ember: {deps: [jquery, handlebars],exports: Ember}},paths: {...jquery: libs/jquery-1.8.2,tick_mngr: managers/tick,ember: libs/ember-1.0.0-rc.1,...}})
  • 63. JQUERY
  • 64. JQUERY :: SELECTORS$(selector).method()For example, $(‘#list’) will return the elements which has the attribute id=”list”.For more, see http://api.jquery.com/category/selectors/.
  • 65. JQUERY :: DOM MANIPULATIONS● $(selector).html()● $(selector).append(html)● $(selector).remove()● $(selector).attr(myAttr, value)● $(selector).removeAttr(myAttr)● $(selector).css(width, 40)● $(selector).addClass(my-class)● $(selector).removeClass(my-class)● $(selector).text()● $(selector).val()
  • 66. JQUERY :: AJAX$.ajax({url: ‘/api/posts’type: ‘POST’,data: {},success: function () {},error: function () {}});
  • 67. JQUERY :: EVENTS● $(selector).click(function () {})● $(selector).dblclick(function () {})● $(selector).mousedown(function () {})● $(selector).mouseup(function () {})● $(selector).mouseover(function () {})● $(selector).mouseenter(function () {})● $(selector).mouseleave(function () {})● $(selector).on(eventName,function () {})● $(selector).off(eventName,function () {})
  • 68. PROMISES
  • 69. REMINDER :: async naturefunction getData() {var data;$.ajax({url: https://api.github.com/users/bolshchikov,type: GET,success: function (response) {data = response;}});return data;}var myData = getData(); // ???http://jsbin.com/imatun/2/edit
  • 70. REMINDER :: async naturefunction getData() {var data;$.ajax({url: https://api.github.com/users/bolshchikov,type: GET,success: function (response) {data = response;}});return data;}var myData = getData(); // undefinedhttp://jsbin.com/imatun/2/edit
  • 71. TOOLS :: PROMISES :: pyramid of doomstartChannel(function (data) {drawLayout(function () {startFirstModule(function () {...});});});
  • 72. TOOLS :: PROMISES :: parallelstartChannel(function (data) {drawLayout(function () {startFirstModule(function () {...});});});112
  • 73. TOOLS :: PROMISES :: defIn computer science, future, promise, and delay refer toconstructs used for synchronizing in some concurrentprogramming languages. They describe an object that acts as aproxy for a result that is initially unknown, usually because thecomputation of its value is yet incomplete.The term promise was proposed in 1976 by Daniel P. Friedmanand David Wise,[1] [...]The terms future, promise, and delay are often usedinterchangeably, although some differences in usage betweenfuture and promise are treated below. Setting the value of afuture is also called resolving, fulfilling, or binding it.Source: http://en.wikipedia.org/wiki/Futures_and_promises
  • 74. source: http://blog.mediumequalsmessage.com/promise-deferred-objects-in-javascript-pt1-theory-and-semantics
  • 75. TOOLS :: PROMISES :: Deferred ObjectjQuery.Deferred() A constructor that creates a new Deferred object, can take an optionalinitFunction parameter that will be called right after the deferred hasbeen constructed.jQuery.when() A way to execute callback functions based on one or more objects thatrepresent asynchronous tasks.jQuery.ajax() Performs an asynchronous Ajax requests where the jqXHR objectsreturned by $.ajax() implement the Promise interface, giving them allthe properties, methods, and behaviour of a Promise.deferred.resolve(arg1, arg2, ...) Resolve a Deferred object and call any done Callback with the givenarguments.deferred.reject(arg1, arg2, ...) Reject a Deferred object and call any fail Callback with the givenarguments.deferred.promise() Returns a promise, that is an immutable view of the deferred object: thepromise can be passed around safely since the underlying deferredcannot be resolved or rejected through it.
  • 76. TOOLS :: PROMISES :: Promise Objectdeferred.then(resolveCallback,rejectCallback)Handlers to be called when the Deferred object is resolved orrejected.deferred.done() Functions or array of functions that are called when the Deferredobject is resolved.deferred.fail() Functions or array of functions that are called when the Deferred isrejected.deferred.isResolved Determine whether a Deferred object has been resolved.
  • 77. TOOLS :: PROMISES :: side 1$.when(// call functionsstartChannel(),drawLayout()).done(function () {// do when both are doneinitModule.start();})
  • 78. TOOLS :: PROMISES :: side 2function drawLayout () {var dfd = $.Deferred();function loadSettings() {// do some ajax request;}function validate() {...// in case validation faileddfd.reject();}function render() {// renderreturn dfd.resolve();}return dfd.promise();}
  • 79. CHROMEDEVELOPERTOOLS
  • 80. CHROME DEV TOOLS :: OPEN● F12 (Windows)● Alt + Cmd + i (Mac)● View > Developer > Developer Tools (Everywhere)● Mouse right click > Inspect Element (Everywhere)source: http://www.html5rocks.com/en/tutorials/developertools/part1/
  • 81. CHROME DEV TOOLS :: TABS1. Elements: edit HTML, CSS, events2. Resources: local storage, cookies3. Network: xhr requests, their size, headers...4. Source: js editing, debugging, breakpoints5. Timeline: performance, memory6. Profile: performance7. Audits8. Console
  • 82. to be continued...PAUSE

×