FRONT END DEVELOPMENT by Sergey N. Bolshchikov The Important Parts
Sep 01, 2014
FRONT END DEVELOPMENT
by Sergey N
. BolshchikovThe Important Parts
3 hours of wasting my time?
Let's find out
LET'S FIND OUT
1. Is it possible to do shadows with CSS?
LET'S FIND OUT
1. Is it possible to do shadows with CSS?
2. Who can write such function?
var result = addNumbers(2)(3);
LET'S FIND OUT
1. Is it possible to do shadows with CSS?
2. Who can write such function?
var result = addNumbers(2)(3);
3. Who can define "this"?
LET'S FIND OUT
1. 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 of
two async functions together?
OUTLINEI. CSS
1. Basics2. CSS33. LESS
II. JavaScript1. Functions: objects2. Lexical scope: closures, module pattern3. Execution contexts and "this" value
III. Tools and Libraries1. RequireJS2. jQuery3. Promises4. Chrome Dev Tools
CSS
CSS :: SELECTORS
Selector Description Example
*
Matches any element.
E Matches any E element (i.e., an element of type E).
a
E F Matches any F element that is a descendant of an E element.
div a
E > F Matches any F element that is a child of an element E.
div > a
E:first-child Matches element E when E is the first child of its parent.
li:first-child
E:linkE:visited
Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).
a:linka:visited
CSS :: SELECTORS (cont.)
Selector Description Example
E:activeE:hoverE:focus
Matches E during certain user actions.
a:activea:hovera:focus
E + F Matches any F element immediately preceded by a sibling element E.
div + div
E[foo] Matches any E element with the "foo" attribute set (whatever the value).
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, the same as DIV[class~="warning"].)
div.navigation
E#myid Matches any E element with ID equal to "myid".
div#main
CSS :: BOX MODEL
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
CSS :: CSS3
● border-radius
● box-shadow
● gradients
● multiple columns
● transformations
● animation
http://jsbin.com/udimij/1/edit
LESS
LESS :: WHY?
● CSS is too much writing
.nav {}
.nav ul {}
.nav ul li {}
● No validation
● Declarative
LESS :: WHAT?
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
LESS :: NESTING
.nav {ul {...li {...
}}
}
LESS :: VARIABLES
@color: #4D926F;
#header {color: @color;
}h2 { color: @color;}
#header { color: #4D926F;}h2 { color: #4D926F;}
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;}
FUNCTIONSin
JAVASCRIPT
FUNCTION is an
OBJECT
FUNCTIONS :: OBJECTSfunction foo (x) { return x + 1;}
function bar (y) { return y * 2;}
var myFuncs = [foo, bar];myFuncs[0](2) // 3
FUNCTIONS :: OBJECTSvar callFirst = function (x) { return x + 1;}
var callSecond = function (f, x) { return f(f(x));}
var attempt = callSecond(callFirst, 2); // 4
FUNCTIONS :: OBJECTSvar makeFunc = function () { var addOne = function (x) { return x + 1; } return addOne;}
var f = makeFunc();f(3); // 4
LEXICALENVIRONMENT
FUNCTIONS :: LEXICAL ENV :: def
Definition:
A Lexical Environment is a specification type used to define the association of Identifiers to specific variables and functions based upon the lexical nesting structure of ECMAScript code.
FUNCTIONS :: LEXICAL ENV :: wtf
function () {...function () {
...return;
}
return ;}
Lexical Env Outers
Lexical Env Inner
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
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()); // 6
env
code block
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
PROBLEM
<div> I am div 1</div>
<div> I am div 2</div>
<div> I am div 3</div>
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
PROBLEM
environmentvar i
eventhandler 1
eventhandler 2
eventhandler 3
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
PROBLEM
environment
eventhandler 1
eventhandler 2
eventhandler 3
var i var i var i
EXECUTIONCONTEXT
FUNCTIONS :: EXECUTION
this.javascript !== this.java
this.javascript !== self.python
FUNCTIONS :: EXECUTION CONTEXT
Every line of JavaScript code is run in an “execution context.”
ExecCont = {LexicalEnv: {},VarEnv: {},ThisBinding: {}
}
FUNCTIONS :: EXECUTABLE CODE TYPES
● Global code
alert("hello world");● Function code
function callMe () {alert('hello world');
}● Eval code
FUNCTIONS :: GLOBAL CONTEXT
var a = 1,b = 3c = a + b;
alert(c); // 4alert(this); // window
FUNCTIONS :: FUNC CONTEXT :: methodvar a = { b: function() { return this; }};a.b(); //a;a['b'](); //a;var c = {};c.d = a.b;c.d(); //c
FUNCTIONS :: FUNC CONTEXT :: functionfunction a () {
return this;}
var A = a(); // window
FUNCTIONS :: FUNC CONTEXT :: function
var a = { b: function() { return this; }}; var foo = a.b;foo(); //window
FUNCTIONS :: FUNC CONTEXT :: function
var a = { b: function() { var c = function() { return this; }; return c(); }};a.b(); //window
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[, ...]]])
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])
function Builder () {this.name = 'Arnold';
}
var b = new Builder();// b = {// name: 'Arnold'// }
FUNCTIONS :: FUNC CONTEXT :: new
FUNCTIONS :: FUNC CONTEXT :: referenceExecution Context Syntax of function call Value of this
Global n/a global object (e.g. window)
FunctionMethod call:myObject.foo();
myObject
FunctionBaseless function call:foo();
global object (e.g. window)(undefined in strict mode)
FunctionUsing call:foo.call(context, myArg);
context
FunctionUsing apply:foo.apply(context, [myArgs]);
context
FunctionConstructor with new:var newFoo = new Foo();
the new instance(e.g. newFoo)
Evaluation n/a value of this in parent context
source: http://javascriptweblog.wordpress.com/2010/08/30/understanding-javascripts-this/
TOOLS
REQUIREJS
REQUIREJS :: WHY?
● Web sites are turning into Web apps● Code complexity grows as the site gets
bigger● Assembly gets harder● Developer wants discrete JS files/modules● JavaScript doesn't have import yet
source: http://requirejs.org/docs/why.html
REQUIREJS :: WHAT?
RequireJS is
an AMD JavaScript file and module loader.
REQUIREJS :: HOW? :: definedefine();
REQUIREJS :: HOW? :: definedefine([]);
REQUIREJS :: HOW? :: definedefine(['sandbox', './views/View']);
REQUIREJS :: HOW? :: definedefine(['sandbox', './views/View'], function () {
});
REQUIREJS :: HOW? :: definedefine(['sandbox', './views/View'], function (sandbox, View) {
});
REQUIREJS :: HOW? :: definedefine(['sandbox', './views/View'], function (sandbox, View) { var Module = function () { } return Module;});
REQUIREJS :: HOW? :: definedefine(['sandbox', './views/View'], function (sandbox, View) { var Module = function () { var views = []; this.init = function () { }; this.tickUpdate = function () { } } return Module;});
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;});
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',...
}})
JQUERY
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/.
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()
JQUERY :: AJAX
$.ajax({ url: ‘/api/posts’ type: ‘POST’, data: {}, success: function () {}, error: function () {}});
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 () {})
PROMISES
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
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(); // undefined
http://jsbin.com/imatun/2/edit
TOOLS :: PROMISES :: pyramid of doom
startChannel(function (data) {drawLayout(function () {startFirstModule(function () {...
});});
});
TOOLS :: PROMISES :: parallel
startChannel(function (data) {drawLayout(function () {startFirstModule(function () {...
});});
});
1
1
2
TOOLS :: PROMISES :: defIn computer science, future, promise, and delay refer to constructs used for synchronizing in some concurrent programming languages. They describe an object that acts as a proxy for a result that is initially unknown, usually because the computation of its value is yet incomplete.
The term promise was proposed in 1976 by Daniel P. Friedman and David Wise,[1] [...]
The terms future, promise, and delay are often used interchangeably, although some differences in usage between future and promise are treated below. Setting the value of a future is also called resolving, fulfilling, or binding it.
Source: http://en.wikipedia.org/wiki/Futures_and_promises
source: http://blog.mediumequalsmessage.com/promise-deferred-objects-in-javascript-pt1-theory-and-semantics
TOOLS :: PROMISES :: Deferred Object
jQuery.Deferred() A constructor that creates a new Deferred object, can take an optional initFunction parameter that will be called right after the deferred has been constructed.
jQuery.when() A way to execute callback functions based on one or more objects that represent asynchronous tasks.
jQuery.ajax() Performs an asynchronous Ajax requests where the jqXHR objects returned by $.ajax() implement the Promise interface, giving them all the properties, methods, and behaviour of a Promise.
deferred.resolve(arg1, arg2, ...) Resolve a Deferred object and call any 'done' Callback with the given arguments.
deferred.reject(arg1, arg2, ...) Reject a Deferred object and call any 'fail' Callback with the given arguments.
deferred.promise() Returns a promise, that is an immutable view of the deferred object: the promise can be passed around safely since the underlying deferred cannot be resolved or rejected through it.
TOOLS :: PROMISES :: Promise Object
deferred.then(resolveCallback,rejectCallback)
Handlers to be called when the Deferred object is resolved or rejected.
deferred.done() Functions or array of functions that are called when the Deferred object is resolved.
deferred.fail() Functions or array of functions that are called when the Deferred is rejected.
deferred.isResolved Determine whether a Deferred object has been resolved.
TOOLS :: PROMISES :: side 1
$.when(// call functionsstartChannel(),drawLayout()
).done(function () {// do when both are doneinitModule.start();
})
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();
}
CHROME DEVELOPER
TOOLS
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/
CHROME DEV TOOLS :: TABS
1. Elements: edit HTML, CSS, events
2. Resources: local storage, cookies
3. Network: xhr requests, their size, headers...
4. Source: js editing, debugging, breakpoints
5. Timeline: performance, memory
6. Profile: performance
7. Audits
8. Console
to be continued...
PAUSE