HTTP/DOM/AJAX/REST hypertext transfer protocol - transfer objects between systems reliably. bidirectional.

ional. in-order byte stream domain object model - representation of an HTML websites properties. html can be modified. JS objects represents elements on a page. use JS to traverse, inspect, add and remove elements AJAX retrieve more resources from the server without reloading the page using JS. used to read XML/JSON. makes pages faster to use, sends smaller bits of info to server. executes code on client side. representational state transfer - GET, POST, PUT, DELETE

Sessions/Cookies HTTP is stateless, server doesn't remember who you are. use cookies to remember people. cookies can be modified so check authentication. 3rd party cookies can be used to give you ads. forms can have hidden variables: <input type="hidden" name="UID" value="SOME-UNIQUE-ID-919232"> URL rewriting appends a hash to end of url. used to track state, bad bc overuse issues w/ web crawlers server keeps track of info coming from same browser to remember you via cookies, #, variables, tokens session hijacking - someone else getting your token, taking over your session and making a request with it use encryption. signature to verify/encrypt token. HTML5 web storage can store in browser > cookies

Web Architectures Functional requirements/use cases: what is xxx supposed to do? non-functional: not a particular feature. concerns whole architecture sequence diagram: shows flow of data in a program. visualize architecture estimation: how long things will take to do. analysis: how will nonfunctional reqs make system more complex? overhead: design meetings, test environment setup, dealing w/ clients, things that add to time overall final estimate: complexity of architecture, times # of patterns appears, + risk/overhead

Server Side Architecture Patterns use case, class, sequence, etc diagrams Handler: GET, POST, etc, other events Routing: json of a GET: path, method, callbacks, keys, regexp, etc REST API: topic, topics, topics/TOPIC_ID, topics/TOPICS_ID/replies, etc JSON, objects, arrays, DB model, SQL, object to DB, testing (curl -x), etc

HTML5 & CSS audio/video, canvas - area of webpage manipulable by JS and hardware, local storage, geolocation websockets/server events - consistent connection between server and browser CSS selectors: type E, universal *, grouping E, G, F, attribute [foo = "bar"], id #h1, class .class improves performance because css file can be dled once and cached for a long time jquery-mobile uses javascript to render HTML and CSS

Social Coding cathedral: only a few people in developement, everyone uses it. bazaar: open-source, massive project, many collabs. release early/often. users are co-developers. linux was used by bazaar model. bc the code was public, community of developers helped make the kernel

Cloud Computing use of computing resources (hard/software) delivered as a service over a network architecture: several layers. compute nodes handle computational tasks but don't store data. storage area networks (SANs) are used for storage. they are expensive. virtualization key to the process. allows multiple OS's to be run on the servers at once. helps because servers are underutilized and you have to buy servers for peak load. VMWare is an example if a SAN fails, switch to another one. can be a backlog of requests. secondary SAN may crash because being overwhelmed. this takes out the backend. then whole system fails. happened to amazon web services. how to use cloud: infrastructure as your own service OR platform as a service. provider gives you support downsides: complex. outages are common. expensive as you scale. problems with data locality. Chaos Monkey used to test. turns stuff off randomly to test outage responses. use OpenStack to build your own cloud. the future is the cloud. $241B by 2020 market proposed.

==========================================================================================
Performance Design Responsive: have site dimensions and elements respond to window size. useful for sites for many devices Mobile-first: optimized for mobile devices before larger devices Adaptive: make website to adapt to bandwidth of the user

Techniques HTML CSS hardware accelerated. use, but be aware user might not have good enough internet/computer. choose selectors carefully. not all created equal. jquery id faster than class. keep complexity down. measure repaint time (time it takes to render content in window). cache expensive operations. keep stylesheet at top so loaded first. remove unused CSS rules. avoid * selector. border-radius/xform=slow use selectors with native JS support. $(#id) $(.class) $(tag) since mapped to JS functions/browser optimized operations on dom are long-reflow & structure changes. reflow is when page rearranges itself while loading load content as the user needs it. preload content during idle time. avoid reflow by establishing image size. don't use auto size. keep DOM simple. optimize images. minify JS/CSS. use CSS sprites. gzip everything. let browser know what to cache for long time. every request sends a cookie. know when to expire them. use a css gradient instead of image. allow top navigation bar to morph based on device. lazy image loading: avoid loading images upfront, only later. also load lower res first, then improve it use libraries. structure page so important parts render first. put JS at the end unless it's for jquery mobile

Network Techniques keep #pages down, each invokes http request. use content delivery networks. split resources across server. avoid having multiple domains for a single page. each different domain has to call DNS server/resolve to IP create cookie free domains. be careful with redirects (take long time)

Database Techniques DB is stored on mechanical drive. they are slow. typically always the problem if performance issue. write fast queries. configure mysql to dump out queries that take a long time so you can find them. adding an index can speed up times. use "explain" to find bottlenecks. tweak buffers/cache de-normalize db (have everything in one table). multiplications and joins are expensive.

Hardware Techniques scale up: add more memory, hard drives, cpu (in that order). cache everything. keep DB in RAM. 10gb DB? get 12gb RAM. can do this through distributed memcache. increase concurrency. 2 hard drives are better than 1. (1 for reads, 1 for writes) back and forth when idle

==========================================================================================
Security encrypt passwords. weak passwords are security holes. they can be used multiple times/easy to crack. denial of service: sends many requests to a server crashing it. used by a botnet (infected computers) phishing, brute force, insiders, stolen hardware, etc.

Storing Passwords hash passwords. encrypt it and store in DB. one way encryption is best because can't be reversed hackers can use rainbow/dictionary table to compare keys to get your password. salt it by adding number/string to password and then encrypt password. harder to guess, each unique. honeypot accounts: fake accounts with easy password to lure hackers in.

Database Security don't put raw strings in DB. people can enter stuff to manipulate DB. to prevent this, sanitize DB. escape special chars, bind parameters in queries, gives interfaces little privilege

Regular Expressions var re = new RegExp("ab+c"); or var re = /ab+c/; ^ matches beginning of input. /^A/ does not match "an A" but does "An E" $ matches end of input. /t$/ matches "eat" but not "eater" * matches preceding character 0 or more times. /bo*/ matches "booo" in "a ghost + means 1 or more times. /a+/ matches all the a's in caaaaaaandy ? means preceding character 0 or 1 times . matches any character x(?=y) x if followed by y x(?!y) x not followed by y \b matches word boundary /\bm/ matches "m" in moon (NOT FOLLOWED BY WORD) /oo\b/ does not match oo in moon because oo is followed by n which is a word char /oon\b/ matches "oon" in moon because nothing at the end \d digit, \D non digit JS methods: exec, test, match, search, replace, split

HTML manipulation
var html = '<div class="tweet">PLACE THUMBNAIL TWEET_TEXT PHOTO<div id="info_box">RETWEET FAVOURITE USER TIME</div></div>'; $('#tweets').append(html.replace('THUMBNAIL', tweet_user_thumbnail).replace('TWEET_TEXT', tweet_content) var tweet_user = '<div class="user">'+ data[i].user.screen_name +'</div>';

JSON
$.getJSON('favs.json', function(data) { mydata[id] = JSON.parse(data) mystring = JSON.stringify(mydata[id])

==========================================================================================
JQuery
$(document).ready(function() { $("h1").mouseenter(function() { $(this).css("background-color", "red"); }); $("h1").mouseleave(function() { $(this).css("background-color", "yellow"); $("*").unbind("mouseleave"); }); });

JQuery Mobile <div data-role="page"> <div data-role="header"> CSS

<link rel="stylesheet" type="text/css" href="style.css"> #tweets .tweet { margin: 5px; padding: 0px; border: 1px solid #ccc; background-color: #ffffff; float: left; width:32%; position: relative; }

Server POST
else if (request.url == '/new') { if (request.method == 'POST') { request.on('data', function(chunk) { topic = querystring.parse(chunk.toString()); response.write(JSON.stringify(json_response_ver2)); response.end();

Client GET
function get(id, callback) { $.ajax('http://127.0.0.1:4320/' + id + '/', { get(id, function(data) { $('#echo').html(JSON.stringify(data)); })