Web Projects: From Theory To Practice

FROM THEORY
TO PRACTICE
unspoken truth of starting web project
brought to you
by Sergey Bolshchikov

WHAT'S YOUR NAME, U SAID?
Front end Developer @ New ProImage
Co-organizer @ Ember-IL Meetup
Graduate Student @ Technion, IM&E
Web: http://bolshchikov.net
Blog: http://blog.bolshchikov.net
Github: https://github.com/bolshchikov

OUTLINE
1. Understand the destiny
2. Organize your life
3. Choose your comrades
4. Lay out your way
5. Add the make up
6. Bring some action
7. Coding

DESTINY :: GOAL
The goal should formulate the main purpose or idea of future
project. It can be describe by one sentence or two sentences,
e.g.
“Create user-friendly web store for
selling fruits and vegetables”

DESTINY :: FUNCTIONALITY
● Login
● Display a list of available items with prices
● Display detailed information per item
● Be able to add the item to the basket
● Calculate the overall sum
● Send the order

ORGANIZATION
Division by type
Separation of concerns
Complex

HTML5BOILERPLATE
Project started by Paul Irish (Google) for keepin'
best techniques for web project
http://html5boilerplate.com/
● Code structure
● File template (html, css, js)
● Comes with libraries: jQuery, Modernizr
● and other

COMRADES
How? Checklist:
○ Amount of watchers in Github (big)
○ Amount of forks on Github (medium)
○ Amount of issues on Github (small)
○ Amount of results on Stackoverflow
○ Amount of votes on Stackoverflow

COMRADES :: DOM
Why? Cross browser API is not the same
What? Relieves you from pain developments
Who? jQuery, Zepto, MooTools
Save yourself some time
DO NOT WRITE YOUR OWN

COMRADES :: UI & WIDGETS
What?
● Splitter
● Tree
● Accordion
● Context menu
● Dropdown
● Charts
● Calendar
● Grids
● Dialogs
Who?
● Twitter Bootstrap
● jQueryUI
● KendoUI
● Wijmo Components
● jqWidgets
● Dojo

COMRADES :: JS FRAMEWORKS
Why? JS mess, spaghetti code
What? Clean separation of concerns
Who? EmberJS, Backbone, Angular, etc.
How? Write test programs in each of them
http://todomvc.com/

LAYOUT :: LAYOUT 1 :: HTML
<header></header>
<div id="main"></div>
<footer></footer>
http://jsbin.com/anafap/9/edit

<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
http://jsbin.com/asehas/7/edit

<header></header>
<div id="container">
</div>
<footer></footer>
http://jsbin.com/uvafam/6/edit

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:link
E: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:link
a:visited

CSS :: SELECTORS (cont.)
Selector Description Example
E:active
E:hover
E:focus
Matches E during certain user
actions.
a:active
a:hover
a: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 :: MORE
● display: [none, block, inline, table, inline-
block...],
● position: [absolute, fixed, relative],
● top: [number],
● left: [number],
● float: [left, right, none]

LAYOUT :: LAYOUT 1 :: HTML + CSS
HTML
<header></header>
<div id="main"></div>
<footer></footer>
CSS
header, footer {
border: 1px solid red;
height : 55px;
background-color: grey;
border-radius: 7px;
}
#main {
border-radius: 7px;
height: 90px;
margin: 10px 0 10px 0;
}
http://jsbin.com/anafap/7/edit

HTML
<div id="center"></div>
CSS
div {
border-radius: 7px;
float: left;
margin: 0 5px 0 5px;
}
#left, #right {
width: 150px;
height: 250px;
}
#center {
width: 275px;
height: 750px; }http://jsbin.com/asehas/6/edit

HTML
<header></header>
<div id="container">
</div>
<footer></footer>
CSS
#left {
width: 28%;
border-radius: 7px;
margin-right: 2%;
float: left;
}
#right {
width: 70%;
border-radius: 7px;
margin-left: 30%
}
http://jsbin.com/uvafam/6/edit

JAVASCRIPT
"JavaScript is the Assembly language of WEB"
- Erik Meijer, Dutch computer scientist

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 () {})

JAVASCRIPT :: GUIDELINES
Do not populate global space
Use namespaces: create one global variable, e.g. name of your app, and store
everything there.
window.YUI = {};
YUI.version = ‘0.3’,
YUI.start = function () {};

Write JavaScript only in js file
Do NOT write it in HTML:
<a class=”add” onclick=”function () {}”>Add</a>
Instead use jQuery and register the click handler:
$(‘.add’).on(‘click’, function () {});

Write small functions

Write comments

Web Projects: From Theory To Practice

More Related Content

What's hot (20)

Similar to Web Projects: From Theory To Practice (20)

More from Sergey Bolshchikov (13)

Recently uploaded (8)

Web Projects: From Theory To Practice