Web Projects: From Theory To Practice
-
Upload
sergey-bolshchikov -
Category
Self Improvement
-
view
3.034 -
download
1
description
Transcript of Web Projects: From Theory To Practice
FROM THEORY TO PRACTICE
unspoken truth of starting web project
brought to youby Sergey Bolshchikov
WHAT'S YOUR NAME, U SAID?
Front end Developer @ New ProImageCo-organizer @ Ember-IL MeetupGraduate 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
UNDERSTANDING THE DESTINY
DESTINY
DESTINY :: GOALThe 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
DESTINY :: STRUCTURE
ORGANIZE YOUR LIFE
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
CHOOSE YOUR COMRADES
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 timeDO 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 YOUR WAY
WRITING APPROACH
LAYOUT :: LAYOUT 1 :: HTML
<header></header><div id="main"></div><footer></footer>
http://jsbin.com/anafap/9/edit
LAYOUT :: LAYOUT 2 :: HTML
<div id="left"></div><div id="center"></div><div id="right"></div>
http://jsbin.com/asehas/7/edit
LAYOUT :: LAYOUT 3 :: HTML
<header></header><div id="container"> <div id="left"></div> <div id="right"></div></div><footer></footer>
http://jsbin.com/uvafam/6/edit
ADD THE MAKE UP
CSS
CSS is a super power
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]
LAYOUT :: LAYOUT 1 :: HTML + CSSHTML
<header></header><div id="main"></div><footer></footer>
CSSheader, footer { border: 1px solid red; height : 55px; background-color: grey; border-radius: 7px;}#main { border-radius: 7px; border: 1px solid red; background-color: grey; height: 90px; margin: 10px 0 10px 0;}
http://jsbin.com/anafap/7/edit
LAYOUT :: LAYOUT 2 :: HTML + CSSHTML
<div id="left"></div><div id="center"></div><div id="right"></div>
CSSdiv { background-color: grey; border-radius: 7px; border: 1px solid red; float: left; margin: 0 5px 0 5px;}#left, #right { width: 150px; height: 250px; }#center { width: 275px; height: 750px; }http://jsbin.com/asehas/6/edit
LAYOUT :: LAYOUT 3 :: HTML + CSSHTML
<header></header><div id="container"> <div id="left"></div> <div id="right"></div></div><footer></footer>
CSS#left { width: 28%; background-color: grey; border: 1px solid red; border-radius: 7px; margin-right: 2%; float: left;}#right { width: 70%; background-color: grey; border: 1px solid red; border-radius: 7px; margin-left: 30%}
http://jsbin.com/uvafam/6/edit
TIME TO CODE
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 () {};
JAVASCRIPT :: GUIDELINES
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 () {});
JAVASCRIPT :: GUIDELINES
Write small functions
JAVASCRIPT :: GUIDELINES
Write comments
QUESTIONS?