Back-to-Front

Common mistakes of Back-end developers in Front-end

by Alina Basova

Is Front-end so important?
What is semantic HTML?
Why is CSS awesome?
How to optimize JavaScript?

Is Front-end so important?

Because people do judge a book by it's cover

Loading of two same web-pages, that have been made by different people, with disabled JavaScript

Why should we care about semantic HTML?

Lighter and cleaner code

Accessibility

correct accessibility

Search engine optimization

Inline styles and JavaScript rules are bad. Why?

Difficult code maintenance

Lack of caching
HTML file size - Don't overweigh your HTML

Source: http://goo.gl/XQ5gSp

Why is CSS awesome?

CSS is awesome

Don't tag-qualify

          
  div#blue { }
  ul.menu { }
  a.link { }

          
  #blue { }
  .menu { }
  .link { }

Source: http://goo.gl/3gBkh

Too general selectors

          
  header { }
  div { }

          
  .header { }
  .main-block { }

Source: http://goo.gl/3gBkh

Facilitate the work of your browser

Over-Qualifying Selectors

          
  header .top_menu .sign_in .tab_button span { }
  article .leave_note .text_area_block textarea { }

          
  .sign_in .tab_button_inner { }
  .leave_note .text_area_block { }

Source: http://goo.gl/3gBkh

Using Color Names Instead of Hexadecimal

          
  color: red;

          
  color: #FF0000;
  
  color: rgb(255,0,0);

So why optimize JavaScript?

fast turtle

Global variables are bad

earth

Source: http://goo.gl/FgjeJ4

The worst code you could ever see

          
  function renderItems(data) {

    $('.search-results').addClass('visible');

    for(var i=0; i < data.length; i++) {

      $('.search-results').append('<li>' + data[i] + '</li>');

    }
  }

Cache DOM elements

          
  function renderItems(data) {

    var $search = $('.search-results');

    $search.addClass('visible');

    for(var i=0; i < data.length; i++) {

      $search.append('<li>' + data[i] + '</li>');

    }
  }

Which example is faster?

          
    for(var i=0; i < data.length; i++) {
      $('.search-results').append('<li>' + data[i] + '</li>');
    }

          
    var dataLength = data.length;

    for(var i=0; i < dataLength; i++) {
      $('.search-results').append('<li>' + data[i] + '</li>');
    }

Sometimes few more lines make your code works 10 times faster.

          
  function renderItems(data) {

    var searchEl = document.querySelector('.search-results'),
        dataLength = data.length,
        newHtml = '',
        i = 0;    

    while(i < dataLength) {
      newHtml += '<li>' + data[i] + '</li>';
      i++;
    }

    searchEl.innerHTML = newHtml;
    searchEl.className += ' visible';
  }