1. Javascript

Good code benefits

  • clean
  • predictable
  • solid
  • easy to maintain

JS basic

  • "objective"
  • interpreted
  • no classes
  • "flexible"
function() {
    res = 10; //will be global
    return res;
}

function() {
    var res = 10;
    return res;
}

function() {
    var res = x = 10;
    return x; //x will be global
}

Variables [all global by default]

var1 = 1;
var var2 = 2;
window.var3 = 3;

Scope

Good practice #1

always use var

var test = "test";

function() {
    console.log(test); //undefined
    test = 10;
    console.log(test); //10
}

Hoisting

function() {
    console.log(x);
    var x = 10;
}

Hoisting + Scope

function() {
    var x;
    console.log(x);
    x = 10;
}

===

Good practice #2

variables should be declared always on top of the function

function fakeSum() {
    var one = 1,
        two = 2,
        three = one + two;

    return three;
}
var test = 'test';

function() {
    if (typeof test !== 'undefined') {
        ..do sth..
    }
}

== vs ===

"" == 0;        //true
"" == false;    //true
0 == false;     //true

typeof

"" === 0;        //false
"" === false;    //false
0 === false;     //false

Good practice #3

ALWAYS use ternary operator

Shortcuts

var obj = {},    // new Object()
    str = "",    // new String("")
    arr = [],    // new Array()
    num = 1;     // new Number(1)
    

literals

short if

var someVar = true,
    otherVar = (someVar === true) ? true : false;

Good practice #4

use literals always

andShortIfOnly = (readable) ? use : do not;

How JS functions works

function nothing() {
    // nothing there but still...
}

return always returns

function nothing() {
    // nothing there but still...
}

return always returns

===

function nothing() {
    return;    // self (this)
}

function nothing() {
    return this;
}

no return always returns this

So what?!

function something() {
    var this = {};

    this.name = "Martin";
    this.getName = function() {
        return this.name;
    };

    return this;
}
var Something = function(name) {
    var this = {};

    this.name = name;
    this.getName = function() {
        return this.name;
    };

    return this;
}

notice that "this" cannot be assigned as it is a keyword - it's only an example

var Something = function(name) {
    var this = {};

    this.name = name;
    this.getName = function() {
        return this.name;
    };

    return this;
}

notice that "this" cannot be assigned as it is a keyword - it's only an example!

then we'll add pointer...

var sth = Something();

returns "this" from unnamed function pointed by var Something above

var Something = function(name) {
    var this = {};

    this.name = name;
    this.getName = function() {
        return this.name;
    };

    return this;
}

notice that "this" cannot be assigned as it is a keyword - it's only an example!

then we'll add pointer...

var sth = Something();

returns "this" from unnamed function pointed by var Something above

...or two

var sth = Something();

var sth2 = Something();

and both are pointing to the same object now

But!

var sth = new Something();

var sth2 = new Something();

now JS interpreter creates new empty object inside Something on each call so we have new separated objects!

So...

Constructors and classes!!!

var Something = function(name) {
    this.name = name;
    this.getName = function() {
        return this.name;
    }
};

var sth = new Something("dupa");

Good practice #5

naming conventions:

- methods, props camelCase (from lower)

- constructors CamelCase (from upper)

Object literal - where fun begins :)

var me = {};

me.name = "Martin";
me.getName = function() {
    return this.name;
};

    
var me = {
    name: "Martin",
    getName: function() {
        return this.name
    }
};
    
var me = {
    name: "Martin",
    getName: function() {
        return this.name
    }
};

var someOneElse = {
    name: "Listonosz",
    whatDoesForALiving: function() {
        return "Roznosi listy";
    }
};

var community = {};

community.ja = me;
community.ktos = someOneElse;

We can "join" the objects

var community = {
    ja: {
        name: "Martin",
        getName: function() {
            return this.name;
        }
    },
    ktos: {
        name: "Listonosz",
        whatDoesForALiving: function() {
            return "Roznosi listy";
        }
    }
};

We can "join" the objects

var electrabel = electrabel || {};

electrabel.utils = {
    // some utils
};

electrabel.eiris = {
    // some eiris logic
};

electrabel.pricesim = }
    // pricesim logic
};

and build "modules"

Good practice #6

keep logical structure and build app from modules

[namespace pattern]

Module improvements

Encapsulation

var mainmodule = {};

mainmodule.newModule = (function() {
    var that = this;

    this._setup = function () {
        // do some setup
    };

    this._init = function() {
        that._setup();
        // and do more here
    };

    return {
        init: this._init
    }
})();

Good practice #7

ALWAYS encapsulate your functions where possible

Good practice #8

use that pattern

Good practice #9

private vars with "_" prefix

Extend current objects with jQuery

// Navigation component scripts
var bobcat = bobcat || {};

bobcat.components = $.extend(bobcat.components, {

    "navigation": (function() {
        this._init = function() {
            // some initial functions
	}

	return {
		init: this._init
	}
    })()
});

Good practice #10

extend objects instead of recreate them

Latest good practices

  • always use indents
  • always use ;
  • whitespaces between operators
  • start { in the command line

2. jQuery

Document Ready vs Window Load

$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert( "window is loaded" );
});

After DOM is ready

$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert( "document is ready" );
});

Later, when page is fully loaded (inluding images)

DOM Manipulation

The slowest part of front



    $( '#input' ).css( 'color' , 'red' );
    $( '#input' ).attr( 'value' , 'something' );
    $( '#input' ).show();

What is wrong here ?


    // we're searching through dom several times

    $( '#input' ).css( 'color' , 'red' );
    $( '#input' ).attr( 'value' , 'costam' );
    $( '#input' ).show();

What is wrong here ?


    var $input= $( '#input' ); // reference to dom element

    $input.css( 'color' , 'red' );
    $input.attr( 'value' , 'costam' );
    $input.show();

Better


    var $input = $( '#input' ); // reference to dom element

    $input.css( 'color' , 'red' ).attr( 'value' , 'costam' ).show();

The best method

Chaining

    var $ul = $('ul');

    for( var i = 0 ; i<10 ; i++){

        $ul.append( '<li>' + i + '</li>' );

    }

What is wrong here ?

    var $ul = $('ul');

    for( var i = 0 ; i<10 ; i++ ){

        $ul.append( '<li>' +i+ '</li>' ); // dom manipulating

    }

What is wrong here ?

    var $ul = $('ul');
    var html = $(document.createDocumentFragment());

    for( var i = 0 ; i<10 ; i++ ){

        html.append($( '<li>' + i + '</li>' ));

    }

    $ul.append( html ); // dom manipulating

Better

createDocumentFragment() method creates a imaginary Node object

Optimizing jQuery selectors

1)
   $( 'div.container' );
   $( '.container' );  // FASTER

2)
   $( '#mainMenuContainer ul li' );
   $( '#mainMenuContainer' ).find( 'ul li' ); // FASTER
  1. Stop using html tags in selectors! Good for performance and maintain.
  2. When inside query is only id jQuery is using findElementById()

jQuery Events

// .on(events, selector, handler);

$( '#container' ).on( 'click' , 'a' , function( event ) {

    event.preventDefault();

    console.log( 'item anchor clicked' );

});

Possible events :

-click

-hover

-submit

-etc.

$( '#container' ).click(function( e ){
    // code
});

$( '#form' ).submit(function( e ){
    // code
});

$( '#container' ).hover(
    function( event ){
        console.log( 'mouseenter' );
    };

    function( event ){
        console.log( 'mouseleave' );
    }
);

Shorter version

$( '#container' ).off(); // all events will be switched off

$( '#form' ).off( 'submit' , '#submit' ); // only submit will be off for element matching to selector

Switching off events watching

Event Delegation

Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent.

Instead of :

$( 'ul' ).on( 'click' , 'li' , function( e ){

    // code

});

We are using event delegation:

$( 'ul li' ).click(function( e ){

    // code

});

jQuery stopPropagation()

.container

.b2

.b1

$( '.container' ).click(function( e ){

    alert( 'event for container' );

});


$( '.b1' ).click(function(e){

    alert( 'event for b1' );
    e.stopPropagation();

});

$( '.b2' ).click(function(e){

    alert( 'event for b2' );

});

Text

Event.preventDefault()

HTML :

<a href="#">start</a>



JS :

$( 'a' ).click(function( e ){

    // do something
    e.preventDefault(); // without this after click page will scroll top because of #

});

If preventDefault method is called, the default action of the event will not be triggered.

Optimizing loop

var array = ['Radek','Ola','Jacek'  , .... ];
var arrayLength = array.length;

for( var i = 0 ; i < arrayLength ; i++ ){
	console.log( array[ i ] );
}
var array = ['Radek','Ola','Jacek' , .... ];

for( var i = 0 ; i < array.lenght ; i++ ){
	console.log( array[ i ] );
}

For long loop we can use length caching

Instead of

Add cache var

Ajax

$.getJSON( url [, data ] [, success ] )

    $.getJSON( "example.json" , { data : data} , function (data) {
        console.log(data);
        console.log('success as a callback');
    })
      .done(function(data) {
        console.log(data);
        console.log( "success" );
      })
      .fail(function() {
        console.log( "error" );
      });

$.getScript( url [, success ] )

    $.getScript( "ajax/test.js" )
      .done(function( script, textStatus ) {
        console.log('after execution of the code');
      })
      .fail(function( jqxhr, settings, exception ) {
        console.log('error');
    });

Load a JavaScript file from the server using a GET HTTP request, then execute it

$.getScript( url [, success ] )

    $.getScript( "ajax/test.js" )
      .done(function( script, textStatus ) {
        console.log('after execution of the code');
      })
      .fail(function( jqxhr, settings, exception ) {
        console.log('error');
    });

Load a JavaScript file from the server using a GET HTTP request, then execute it

$.get( url [, data ] [, success ] [, dataType ] )

      $.get( "ajax/test.html", function( data ) {
          console.log(data);
          console.log('success');
      });

Load data from the server using a HTTP GET request.

3.Case

from Felco
e-shop

Solution ? Timeout.

-The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.

-The clearTimeout() method clears a timer set with the setTimeout() method.

var myVar;

function myFunction() {
    myVar = setTimeout(function(){alert("Hello")}, 3000);
}

function myStopFunction() {
    clearTimeout(myVar);
}

4. CSS

3.1 CSS Selectors Specifity

Which selector is "stronger" ?

3.2 CSS3 Vendor Prefixes

Some attributes from CSS3 are implemented in different way in different browsers.

-moz-     /* Firefox and other browsers using Mozilla's browser engine */
-webkit-  /* Safari, Chrome and browsers using the Webkit engine */
-o-       /* Opera */
-ms-      /* Internet Explorer (but not always) */



-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;  /* non-prefixed version last */

Older versions of IE ? http://css3pie.com/

3.3 Most used units in CSS

px - fixed unit

body{
    font-size:10px;
}

.parent{
    font-size:16px;
    width:960px;
    height:500px;
}

em - relative to the font-size of its direct or nearest parent

.child-lvl-1{
    font-size:2em; // 2 * 16px = 32px
}

.child-lvl-2{
    font-size:2em; // 2 * 32px = 64px
}

parent

child-lvl-1

child-lvl-2

rem - relative to the html (root) font-size

.child-lvl-1{
    font-size:2rem; // 2 * 10px = 20px
}

.child-lvl-2{
    font-size:2rem; // 2 * 10px = 20px
}

%


.parent{
    width:100%; // browser window width
}

.child-lvl-1{
    width:80%; // 80% of browser width
}

.child-lvl-2{
    width:50%; // 40% of browser width
}

parent

child-lvl-1

child-lvl-2

Which unit is the best ?

  • width ( % )
  • height ( em , rem)
  • line-height ( em, rem)
  • font-size (em, rem)
  • padding ( vertical - em, rem ; horizontal - % )
  • margin ( vertical - em, rem ; horizontal - % )
  • etc.

Or pixels to everything ;) But responsive design.

4. Sass

4.1 Variables

Store things like colors, font stacks, breakpoints or any CSS value you think you'll want to reuse.

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

4.2 Nesting

Organize your CSS and make it more readable

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a.nodecoration {
    text-decoration: none;
    color: #000;
  }

  li {
    @extend a.nodecoration;

    display: inline-block;
  }
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a.nodecoration,
nav li {
  text-decoration: none;
  color: #000;
}

nav li {
  display: inline-block;
}

4.4 Partials

main.scss

files structure

partial .scss contain snippets that you can include in other Sass files.

4.5 Mixins

Organize your CSS and make it more readable

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Links about Front End

  • Ocean of links and articles - http://www.jstherightway.org/
  • Documentation for JS -https://developer.mozilla.org/pl/docs/Web/JavaScript
  • Video courses - http://tutsplus.com/courses (for premium account write message to maciejkowalskimk@gmail.com)
  • Facebook group of Polish JS Developers -https://www.facebook.com/groups/217169631654737/

APPLAUSE !!!!!!