\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Abisco}
\pdfinfo{
  /Title (csc309h.pdf)
  /Creator (Cheatography)
  /Author (Abisco)
  /Subject (CSC309H Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{A3A3A3}
\definecolor{LightBackground}{HTML}{F3F3F3}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{CSC309H Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Abisco} via \textcolor{DarkBackground}{\uline{cheatography.com/27378/cs/7925/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Abisco \\
  \uline{cheatography.com/abisco} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 18th April, 2016.\\
   Updated 13th May, 2016.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{3}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Internet Basics}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What is the Internet}} \newline % Row Count 1 (+ 1)
- Collection of computer networks that use a protocol to exchange data \newline % Row Count 3 (+ 2)
- IETF (Internet Enforcement Task Force): Internet protocol standards \newline % Row Count 5 (+ 2)
{\bf{IP (Internet Protocol)}}: Simple protocol for exchanging data between computers \newline % Row Count 7 (+ 2)
{\bf{TCP}}: Adds multiplexing and reliability on top of IP \newline % Row Count 9 (+ 2)
- Multiplexing: Multiple programs using same IP address \newline % Row Count 11 (+ 2)
- Reliability: Guaranteed, ordered and error-checked delivery \newline % Row Count 13 (+ 2)
{\bf{DNS (Domain Name Server)}}: Set of servers that map(translate) written names to ip addresses \newline % Row Count 15 (+ 2)
{\bf{URL (Uniform resource locator)}}: Identifies the path to a document on the web server \newline % Row Count 17 (+ 2)
{\bf{HTTP (Hypertext transport protocol)}}: Set of commands understood by a web server and sent from a browser \newline % Row Count 20 (+ 3)
HTTP Commands: \newline % Row Count 21 (+ 1)
- GET filename: Download \newline % Row Count 22 (+ 1)
- POST filename: send a web form response \newline % Row Count 23 (+ 1)
- PUT filename: upload% Row Count 24 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Security}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Understanding Threats}}: Defacement, Infiltration, Phishing (Spoofed site that looks real, retrieve login credentials), Pharming(Like phishing, get user to enter sensitive data into spoofed site, no conscious action required by the victim), DNS Cache Poisoning (Attacker is able to compromise DNS tables so as to redirect legitimate URL to their spoofed site), DNS translates URL to IP Addresses \newline % Row Count 8 (+ 8)
{\bf{SQL Injection}}:Untrusted input inserted into query or command \newline % Row Count 10 (+ 2)
Solutions: Defence in Depth, Whitelisting over Blacklisting, Input validation and Escaping, Use prepared statements and Bind variables \newline % Row Count 13 (+ 3)
Mitigation: Prevent schema and information leaks, Limit privileges (defence in depth), Encrypt sensitive data stored in Database, Harden DB server and Host O/S, Apply input validation \newline % Row Count 17 (+ 4)
{\bf{Password Protection}}: Straw man Proposal, Salting(Include additional info in hash), Honeypots(Simple username/password combos as 'honey' to attract attackers), Aging \seqsplit{passwords(Encourage/require} users to change passwords every so often) \newline % Row Count 22 (+ 5)
{\bf{HTTP Is stateless}}: Cookies(-Browser can refuse cookies, -size limit/ expiration policy), Hidden Variables (-Following hyperlinks causes a loss of state, -Current submitted page represents current state independent of what was done previously), URL Rewritting (-Current submitted page represents current state independent of what was done previously) \newline % Row Count 30 (+ 8)
} \tn 
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Security (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Web Security}}: Same Origin Policy (A webpage may include some JavaScripts to access its DOM and send AJAX msgs to its backend, try to steal information from another website), XSSI (Cross-site script inclusion, making sure scripts aren't dynamically created with sensitive data. Do not support GET requests for scripts returning URLS) XSS (Enables attackers to inject scripts into webpages viewed by other users, which can steal cookies, change appearances of web sites...Do validation and HTTP only option for cookies), XSRF (Makes a user to submit requests on behalf of the attacker. Protection: Give a secret token to a user and tell the user to submit it along with cookie on following requests)% Row Count 15 (+ 15)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Web Performance}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{HTML Techniques}}: Lazy load content, Use idle time to pre-load content, Batch DOM updates, Set image sizes before loading, Reduce DOM depth \newline % Row Count 3 (+ 3)
{\bf{CSS Techniques}}: Stylesheets at the top, Remove unused CSS Rules, Avoid universal selectors, Don't abuse border-radius \& transform, Prefer selectors with native JS Support \newline % Row Count 7 (+ 4)
{\bf{Network Techniques}}: Make fewer HTTP requests, Content delivery network, Split resources across servers -load balance, But avoid too many DNS lookups% Row Count 11 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Performance}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Load Testing}}: Process of putting demand on a system or device and measuring its response. Performed to determine a system's behaviour under both normal and anticipated peak load conditions. \newline % Row Count 4 (+ 4)
{\bf{Locust.io}} \newline % Row Count 5 (+ 1)
+: Write simple python code to simulate a user behaviour \newline % Row Count 7 (+ 2)
+: Handled thousands of users on a single machine \newline % Row Count 8 (+ 1)
-: Results are downloadable in CSV format \newline % Row Count 9 (+ 1)
{\bf{Back-end Tips}}: Increase parallelism of node.js, Caching, DB Index% Row Count 11 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Express}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{OUR ASSIGNMENT}} \newline var express  = require('express'); \newline var app      = express();    \newline  \newline  app.get('/newrecipe', function(req, res) \{ \newline         var User = \seqsplit{require('../app/models/user');} \newline         \seqsplit{res.render('newrecipe.ejs'}, \{ message: 'loggedin' \}); \newline     \}); \newline  \newline     app.post('/newrecipe', function(req, res) \{ \newline           var newRecipe = new Recipe(); \newline           newRecipe.author\_id = req.user.\_id; \newline          newRecipe.name = req.body.name; \newline          newRecipe.description = req.body.description; \newline          \seqsplit{res.render('newrecipe.ejs'}, \{ message: 'done'\}); \newline     \}); \newline  \newline {\bf{EXAMPLE OF DEALING WITH A SIMPLE LOGIN FORM}} \newline {\emph{HTML CODE}} \newline \textless{}form \seqsplit{action="form\_submitted.php"} method="GET"\textgreater{} \newline         \textless{}h1\textgreater{}Login Form\textless{}/h1\textgreater{} \newline         \textless{}label\textgreater{} Login:\textless{}/label\textgreater{} \newline 		\textless{}input type="text" name="login"\textgreater{}\textless{}br\textgreater{} \newline         \textless{}label\textgreater{} Password: \textless{}/label\textgreater{} \newline 		\textless{}input type="password" name="password"\textgreater{}\textless{}br\textgreater{} \newline         \textless{}button type="submit" \textgreater{}Log In \textless{}/button\textgreater{} \newline \textless{}/form\textgreater{} \newline {\emph{SERVER SIDE CODE}} \newline var express = require('express'); \newline var router = express.Router(); \newline router.get('form\_submitted.php*', function(req, res)\{ \newline 	if (req.query.login == req.query.password)\{ \newline 		res.send('Login Successful'); \newline \} else \{ \newline 	res.send('Error: Login Failed'); \newline \} \newline \});} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Less/Sass}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{CSS Pre-processor: Converts code written in a preprocessed language in css \newline % Row Count 2 (+ 2)
{\bf{Allows us to do:}} \newline % Row Count 3 (+ 1)
- Don't repeat yourself principle \newline % Row Count 4 (+ 1)
- Maintainability \newline % Row Count 5 (+ 1)
- Readability \newline % Row Count 6 (+ 1)
- Natural extension \newline % Row Count 7 (+ 1)
{\bf{Less}} \newline % Row Count 8 (+ 1)
- Easier to transition from CSS \newline % Row Count 9 (+ 1)
- Resembles CSS \newline % Row Count 10 (+ 1)
- Syntax not as jarring as SASS \newline % Row Count 11 (+ 1)
- Newer Than SASS, inspired by it  \newline % Row Count 12 (+ 1)
{\bf{SASS}} \newline % Row Count 13 (+ 1)
- Syntax is quite different from CSS \newline % Row Count 14 (+ 1)
- Symbols used are similar to bash \newline % Row Count 15 (+ 1)
- More functionality/capability than LESS \newline % Row Count 16 (+ 1)
- Complex tasks are more pragmatic than LESS% Row Count 17 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Databases}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{RDBMS}} (Relational Database Management System): Has Concurrent access, Fault Tolerance, Data Integrity, Scalability \newline % Row Count 3 (+ 3)
{\bf{NoSQL}}: Flexible Schema, Cheaper to setup, massive scalability (Integrated Caching and Auto sharing), relaxed consistency BUT no declarative query language, and fewer guarantees due to ReCo.% Row Count 7 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Session and Cookies}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{HTTP Is stateless}} \newline % Row Count 1 (+ 1)
- Simply allows a browser to request a single document from web server \newline % Row Count 3 (+ 2)
- It remembers nothing between invocations, thus short lived \newline % Row Count 5 (+ 2)
- When we started using web applications, we started ad hoc states \newline % Row Count 7 (+ 2)
{\emph{*Adding state to HTTP}} \newline % Row Count 8 (+ 1)
- Client Mechanisms: \newline % Row Count 9 (+ 1)
   1. Cookies {\emph{Size limit/ expiration policy, browser can refuse}} \newline % Row Count 11 (+ 2)
   2. Hidden variables {\emph{hyperlinks leads to loss of state}} \newline % Row Count 13 (+ 2)
   3. URL Rewriting {\emph{Current submitted page represents current state independent of what was done previously}} \newline % Row Count 16 (+ 3)
   4. Local Storage \newline % Row Count 17 (+ 1)
- Server Mechanisms \newline % Row Count 18 (+ 1)
1. Sessions (Persistent Storage) - In a file or database% Row Count 20 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Canvas Coding}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{ASSIGNMENT CODE}} \newline var canvas = \seqsplit{document.getElementById("game");} \newline var context = canvas.getContext("2d"); \newline  \newline     \seqsplit{document.getElementById("main").innerHTML} = "\textless{}canvas id='"game "' width = 400 height = '"600"'\textgreater{}  \textless{}/canvas\textgreater{} ; \newline 	canvas = \seqsplit{document.getElementById("game");} \newline 	 \newline 	// Add Mouse down listener \newline 	canvas.addEventListener("mousedown", mouseDidPressDown, false); \newline 	canvas.addEventListener("mouseup", mouseDidRelease, false); \newline  \newline 	 \newline 	context = canvas.getContext("2d"); \newline  \newline function mouseDidPressDown(event) \{ \newline 	var WIDTH = HEIGHT {\emph{ 0.65; \newline 	var mousePosition = \seqsplit{mousePositionInCanvas(event}.clientX, event.clientY); \newline        //DO WHATEVER with mousePosition.x and mousePosition.y \newline \} \newline  \newline {\bf{EXAM CODE}} \newline \textless{}body\textgreater{} \newline     \textless{}canvas id='myCanvas' width='500' height='400'\textgreater{} Canvas not supported \textless{}/canvas\textgreater{} \newline  \textless{}/body\textgreater{} \newline \textless{}/html\textgreater{} \newline  \newline \textless{}script\textgreater{} \newline   var canvas  = \seqsplit{document.getElementById('myCanvas');} \newline   var context = canvas.getContext("2d"); \newline  \newline   function getMousePos(canvas, evt) \{ \newline       var rect = \seqsplit{canvas.getBoundingClientRect();} \newline 	  return \{ \newline 	    x: evt.clientX - rect.left }} (canvas.width / rect.width), \newline 	    y: evt.clientY - rect.top * (canvas.height / rect.height) \newline 	  \}; \newline   \} \newline  \newline  \seqsplit{canvas.addEventListener('click'}, function(evt)\{ \newline   	   var temp = getMousePos(canvas, evt); \newline   	   context.translate(temp.x, temp.y); \newline        drawCoolShape(context); \newline        \seqsplit{context.translate(-temp.x}, -temp.y); \newline   \}, false); \newline \textless{}/script\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{AngularJS}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Why}} \newline - Lightweight, free \newline - Modularity \newline - Reusable components \newline {\bf{What we used previously}} \newline - Allows for DOM manipulation \newline - Does not provide structure to your code \newline  \newline \textless{}div ng-app=""\textgreater{}  \newline \textless{}p\textgreater{}Input something in the input box:\textless{}/p\textgreater{} \newline \textless{}p\textgreater{}Name : \textless{}input type="text" ng-model="name" placeholder="Enter name here"\textgreater{}\textless{}/p\textgreater{} \newline \textless{}h1\textgreater{}Hello \{\{name\}\}\textless{}/h1\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{XML vs JSON}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Some Basics}} \newline - XML is easy to read and make automation easy, but bulky structure makes files large, can be hard to structure data into good xml format \newline - Javascript XML has properties and methods to structure well \newline {\bf{Something in XML}} \newline \textless{}menu id="file" value="File"\textgreater{} \newline   \textless{}popup\textgreater{} \newline     \textless{}menuitem value="New" onclick="CreateNewDoc()" /\textgreater{} \newline     \textless{}menuitem value="Open" onclick="OpenDoc()" /\textgreater{} \newline     \textless{}menuitem value="Close" onclick="CloseDoc()" /\textgreater{} \newline   \textless{}/popup\textgreater{} \newline \textless{}/menu\textgreater{} \newline {\bf{Same in JSON}} \newline \{"menu": \{ \newline   "id": "file", \newline   "value": "File", \newline   "popup": \{ \newline     "menuitem": {[} \newline       \{"value": "New", "onclick": "CreateNewDoc()"\}, \newline       \{"value": "Open", "onclick": "OpenDoc()"\}, \newline       \{"value": "Close", "onclick": "CloseDoc()"\} \newline     {]} \newline   \} \newline \}\} \newline {\bf{Navigating JSON}} \newline var data = JSON.Parse(file) \newline var fileId = data.menu.id; \newline var firstMenu = data.menu.popup.menuitem{[}0{]};} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Mocha}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What is it}}: Testing for Node \newline {\bf{Example}}: \newline var assert = require('assert'); \newline var calc = require('./calc.js'); \newline describe('Calculator Tests', function() \{ \newline 	it('returns 1+1=2', function(done) \{ \newline 		assert.equal(calc.add(1, 1), 2); \newline 		done(); \newline 	\}); \newline 	it('returns 2*2=4', function(done) \{ \newline 		assert.equal(calc.mul(2, 2), 4); \newline 		done(); \newline 	\}); \newline \});} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{AJAX}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Asynchronous Javascript and XML}}: Not a programming language, just a way of using Javascript, Downloads data from server in background, Avoids dynamically updating a page without making the user wait \newline {\bf{XMLHttprequest (and why it sucks)}}: Javascript includes an XMLHttprequest object that can fetch files from a web server, BUT clunky and browser incompatibilities  \newline {\bf{JQuery}}: Cross browser, simplifies javascript \newline  \newline \$(document).ready(function()\{ \newline     \$("p").click(function()\{ \newline         \$(this).hide(); \newline     \}); \newline \});} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Simple Web Request}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Basic Structure:}} \newline % Row Count 1 (+ 1)
Request: GET /HTTP/1.1 \newline % Row Count 2 (+ 1)
Reply:HTTP/1.1 301 moved permanently \newline % Row Count 3 (+ 1)
{\bf{Big Picture}} \newline % Row Count 4 (+ 1)
- Client-server model: A client process wants to talk to a server process \newline % Row Count 6 (+ 2)
- DNS Lookup: Client must find server \newline % Row Count 7 (+ 1)
- Ports: Clients must find service on server \newline % Row Count 8 (+ 1)
- Finally establish a connection so they can talk \newline % Row Count 9 (+ 1)
{\bf{Types of connection (TCP/UDP)}} \newline % Row Count 10 (+ 1)
- Connection oriented model: Use Transmission control protocol (TCP) \newline % Row Count 12 (+ 2)
- Connectionless Model: Uses user datagram protocol (UDP)% Row Count 14 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{GIT}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Difference between CVC and DVC}}: \newline % Row Count 1 (+ 1)
- Centralized Version Control: Repository goes straight to each working copy/pc \newline % Row Count 3 (+ 2)
- Distributed Version Contol: Each computer has it's own repository, which can pull and push to server repository. {\bf{WHAT GIT USES}} \newline % Row Count 6 (+ 3)
{\bf{Working with remote repository}} \newline % Row Count 7 (+ 1)
- git remote abu link {\emph{Creates a reference called abu to the link}} \newline % Row Count 9 (+ 2)
- git clone \seqsplit{https://blah.com/csc309.git} {\emph{clone remote rep and create local one}} \newline % Row Count 11 (+ 2)
- git fetch mashiyat {\emph{Download changes from mashiyat's repository to my local repository}} \newline % Row Count 13 (+ 2)
- git pull mashiyat {\emph{Downloaded changes and merges them to my local repository}} \newline % Row Count 15 (+ 2)
- git push origin master \newline % Row Count 16 (+ 1)
- git push mashiyat master \newline % Row Count 17 (+ 1)
- git merge blah {\emph{Merge changes made in blah branch to current branch}}% Row Count 19 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{HTML5 and CSS3}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{HTML5: New features}} \newline % Row Count 1 (+ 1)
- Semantic elements and markups  \newline % Row Count 2 (+ 1)
- Audio and video support \newline % Row Count 3 (+ 1)
- Canvas \newline % Row Count 4 (+ 1)
- Drag and drop \newline % Row Count 5 (+ 1)
- Local data storage: Unlike cookies, the storage limit is far larger \newline % Row Count 7 (+ 2)
{\bf{CSS3}} \newline % Row Count 8 (+ 1)
- Allows a lot of new things, such as border-radius \newline % Row Count 10 (+ 2)
- Viewport (vary with device size) \newline % Row Count 11 (+ 1)
{\bf{Responsive Web Design}} \newline % Row Count 12 (+ 1)
@media (max-width: 600px) \{ .facet\_sidebar \{ display: none; \} \}  \newline % Row Count 14 (+ 2)
Example of how to style the media for phones% Row Count 15 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Web Architectures}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Data independence in Rel. DBMS}} \newline % Row Count 1 (+ 1)
- Logical Independence: The Ability to change the logical schema without changing the external schema or application programs.  \newline % Row Count 4 (+ 3)
- Physical Independence: The ability to change the physical schema without changing the logical schema \newline % Row Count 7 (+ 3)
{\bf{Significance of Tiers}} \newline % Row Count 8 (+ 1)
- N-Tier architectures try to separate the components into different tiers/layers. Tier: physical separation, Layer: logical separation \newline % Row Count 11 (+ 3)
- 1-Tier architecture: All 3 layers on the same machine - All code and processing kept on a single machine \newline % Row Count 14 (+ 3)
- 2-Tier Architecture: Database runs on server \newline % Row Count 15 (+ 1)
- 3-Tier Architecture: Each layer can potentially run on a different machine \newline % Row Count 17 (+ 2)
MVC Design Pattern: Chang look and feel without changing the core/logic, Maintain multiple views of the same data% Row Count 20 (+ 3)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{MongoDB Schema}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{var mongoose = require('mongoose'); \newline var bcrypt   = \seqsplit{require('bcrypt-nodejs');} \newline var userSchema = mongoose.Schema(\{ \newline  \newline         firstname    : String, \newline         lastname     : String, \newline         password     : String, \newline         phonenumber : Number, \newline         fav\_cuisine  :{[}String{]}, \newline         admin        : Boolean \newline \}); \newline  \newline // generating a hash \newline userSchema.methods.generateHash = function(password) \{ \newline     return bcrypt.hashSync(password, bcrypt.genSaltSync(8), null); \newline \}; \newline  \newline // checking if password is valid \newline userSchema.methods.validPassword = function(password) \{ \newline     return \seqsplit{bcrypt.compareSync(password}, this.password); \newline \}; \newline  \newline module.exports = mongoose.model('User', userSchema);} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{REST API Code}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{var requestBody = ''; \newline var http = require("http"), \newline 	url = require("url"), \newline 	path = require("path"), \newline 	fs = require("fs"); \newline PORT = 3000; \newline  \newline function handleRequest(request, response) \{ \newline 	var rest = url \&\& \seqsplit{url.parse(request.url).pathname;} \newline   	var filePath = \_\_dirname + request.url; \newline  \newline 	var favs = \seqsplit{fs.readFileSync('js/favs.json');} \newline  \newline 	if (chooseFile()) return; \newline  \newline 	//For each of the possible return paths, send the json file \newline 	if (request.url == "/allTweets") \{ \newline 		returnTweets(); \newline 	\} else if (request.url == "/allUsers") \{ \newline 		returnTweets(); \newline 	\}  \newline  \newline 	//Function to return Json \newline 	function returnJson(json) \{ \newline 		response.writeHead(200); \newline 		response.end(JSON.stringify(json, null, 8)); \newline 	\} \newline  \newline 	//Provide the file in accordance with the  \newline 	function returnFile(path, type) \{ \newline 	    var file = fs.readFileSync(path, 'utf8'); \newline 	    response.writeHead(200, type); \newline 	    response.end(file); \newline 	\} \newline  \newline 	function chooseFile() \{ \newline 		if (path.extname(filePath) == '.js') \{ \newline 			returnFile(filePath, \{"Content-Type": "text/javascript"\}); \newline 			return true; \newline 		\} \newline 		if (rest.length \textless{}= 1) \{ \newline 			returnFile('./index.html', \{"Content-Type": "text/html"\}); \newline 			return true; \newline 		\} \newline 		return false; \newline 	\} \newline \} \newline http.createServer(handleRequest).listen(PORT); \newline console.log("Nodejs Server running at http://127.0.0.1:" + PORT + "/");} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{JQuery Selecting Code}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{function change()\{ \newline     \seqsplit{\$("body").find("*").hide();} \newline     var images = \$("body").find("img"); \newline     images.parents().show(); \newline     images.show(); \newline   \}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}