\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{shlokad}
\pdfinfo{
  /Title (webapps.pdf)
  /Creator (Cheatography)
  /Author (shlokad)
  /Subject (WebApps 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}{4B91A3}
\definecolor{LightBackground}{HTML}{F3F8F9}
\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{WebApps Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{shlokad} via \textcolor{DarkBackground}{\uline{cheatography.com/28400/cs/8345/}}}
\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}shlokad \\
  \uline{cheatography.com/shlokad} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 7th June, 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*}{4}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{General}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{3.833cm}}{Full stack:  Browser \textless{}=\textgreater{} Webserver \textless{}=\textgreater{} Database system  MEAN stack (Angular, Node, Express, MongoDB)} \tn 
% Row Count 2 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{HTML}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{3.833cm}}{Web browsers display Documents described in HTML. Use JavaScript to dynamically generate and update documents. Include directives with content (annotate with tags). {\bf{Tags}}: formatting info, meaning of text, additional info to display  {\bf{Malformed html:}} complain or figure out missing tag and continue processing   {\bf{Document:}} hierarchical collection of elements  {\bf{Tags}} can have attributes {\bf{Entities:}} \< \&g; \& \" ~  \textless{}p\textgreater{} \textless{}br\textgreater{} \textless{}h1\textgreater{}, \textless{}b\textgreater{} \textless{}i\textgreater{} \textless{}pre\textgreater{} (typically used for code, spaces significant)  \textless{}img\textgreater{} \textless{}a href=""\textgreater{}  \textless{}table\textgreater{} \textless{}tr\textgreater{} \textless{}td\textgreater{}  \textless{}ul\textgreater{} \textless{}li\textgreater{} \textless{}ol\textgreater{} \textless{}li\textgreater{} \textless{}div\textgreater{} (group related elements, where the group occupies entire lines, forces a line break before and after)  \textless{}span\textgreater{} Grouping related elements, group is within a single line  \textless{}form\textgreater{} \textless{}input\textgreater{} \textless{}textarea\textgreater{} \textless{}select\textgreater{}  {\bf{HTML and XHTML difference:}} can skip some end tags, not all attributes have to have values (\textless{}select multiple\textgreater{} elements can overlap} \tn 
% Row Count 19 (+ 19)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{URLs}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{3.833cm}}{\seqsplit{http://host.company.com:80/a/b/c.html?user=Alice\&year=2008\#p2} {\bf{Scheme (http:):}} identifies protocol used to fetch the content. {\bf{http:}} is the most common scheme; it means use the HTTP protocol {\bf{https:}} is similar to http: except that it uses SSL encryption {\bf{file:}} means read a file from the local disk mailto: means open an email program composing a message {\bf{Host name (//host.company.com):}} name of a machine to connect to. {\bf{Server's port number (80):}} allows multiple servers to run on the same machine. {\bf{Hierarchical portion (/a/b/c.html):}} used by server to find content. Web server programmed with routing information. Map hierarchical position to function to be performed and possibly the function's parameters {\bf{Query parameters}} \seqsplit{(?user=Alice\&year=2008):} provides additional parameters {\bf{Fragment (\#p2):}} Have browser scroll page to fragment (html: p2 is anchor tag)   {\bf{Type of Links}} {\bf{Full URL:}} \textless{}a \seqsplit{href="http://www.xyz.com/news/2009}.html"\textgreater{}2009 News\textless{}/a\textgreater{} {\bf{Absolute URL:}} \textless{}a href="/stock/quote.html"\textgreater{} same as \seqsplit{http://www.xyz.com/stock/quote.html} {\bf{Relative URL}} (intra-site links): \textless{}a href="2008/March.html"\textgreater{} same as \seqsplit{http://www.xyz.com/news/2008/March.html} Define an anchor point (a position that can be referenced with \# notation): \textless{}a name="sec3"\textgreater{} Go to a different place in the same page: \textless{}a href="\#sec3"\textgreater{}  {\bf{Users of URLs}} Loading a page, loading an image, spreadsheet, embed a page: \textless{}iframe src="http://www.google.com"\textgreater{}  {\bf{URL encoding}} must be represented as \%xx, where xx is the hexadecimal value of the character:  {\bf{URI vs URL}} A URL is a type of URI. But that doesn't mean all URIs are URLs. The part that makes a URI a URL is the inclusion of the "access mechanism", or "network location", e.g. http:// or ftp://.} \tn 
% Row Count 36 (+ 36)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{AngularJS}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{3.833cm}}{{\bf{Template}} HTML with additional markup used to describe what should be displayed {\bf{Directive}} Allows developer to extend HTML with own elements and attributes (reusable pieces) {\bf{Scope}} Context where the model data is stored so that templates and controllers can access {\bf{Compiler}} Processes the template to generate HTML for the browser {\bf{Data Binding}} Syncing of the data between the Scope and the HTML (two ways) {\bf{Dependency Injection}} Fetching and setting up all the functionality needed by a component {\bf{Module}} A container for all the parts of an application {\bf{Service}} A way of packaging functionality to make it available to any view {\bf{Controller}}: \seqsplit{angular.module("cs142App"}, {[}{]}) .controller('MyCntrl', function(\$scope) \{  \$scope.yourName = "";  \$scope.greeting = "Hola"; \}); Each template component gets a new scope and is paired with a controller. A scope object gets its prototype set to its enclosing parent scope. {\bf{Dot in your model}}: Model reads will go up to fetch properties from inherited scopes. Writes will create the property in the current scope! {\bf{Scope digest and watches}}: Two-way binding works by watching when expressions in view template change and updating the corresponding part of the DOM. Angular add a watch for every variable or function in template expressions. Compared to previous values during digest processing. {\bf{Add your own watches:}} \seqsplit{(\$scope.\$watch('firstName'}, function())) (e.g. caching in controller) {\bf{Trigger a digest cycle:}} (\$scope.\$digest()) (e.g. model updates in event) {\bf{ngRepeat}}: \textless{}li ng-repeat="person in peopleArray". {\bf{ng-if}}: Include in DOM if expression true. (will create scope/controllers when true, exit goint to false) {\bf{ng-show}}: Like ngIf except uses visibility to hide/show DOM elements. Occupies space in DOM structure (but not on screen) when hidden. Scope \& controllers created at startup. {\bf{ng-click}}: run code when element clicked. {\bf{ngModel}}: Bind with input, select, textarea tags. ng-href, ng-src. {\bf{ng-include}}: \textless{}div \seqsplit{ng-include="'navBarHeader}.html'"\textless{}/div\textgreater{}. {\bf{Directives}}: Package together HTML template and Controller and extend templating language. Be inserted by HTML compiler as: attribute (\textless{}div my-dir="foo"\textgreater{}...\textless{}/div\textgreater{}) or element (\textless{}my-dir arg1="foo"\textgreater{}...\textless{}/my-dir\textgreater{}). Specify the template and controller to use. Accept arguments from the template. Run as a child scope or isolated scope {\bf{Services}}: Used to provide code modules across view components. \$http, \$resource, \$xhrFactory, \$location, \$window, \$document, \$timeout, \$interval. {\bf{Dependency injection}}: var cs142App = \seqsplit{angular.module('cs142App'}, {[}'ngRoute'{]}); cs142App.config({[}'\$routeProvider', \seqsplit{function(\$routeProvider)} \{ \seqsplit{cs142App.controller('MainController'}, {[}'\$scope',function(\$scope) \{. {\bf{Angular APIs}}: {\bf{ngRoute}} - Client-side URL routing and URL management, ngResource (REST API access), ngCookies, ngAria (Support for people with disabilities), ngTouch, ngAnimate, ngSanitize (parse and manipulate HTML) safely.} \tn 
% Row Count 60 (+ 60)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Events}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{3.833cm}}{{\bf{Types}}: Mouse-related: mouse movement, button click, enter/leave element, keyboard-related: down, up, press, Focus-related: focus in, focus out (blur), Input field changed, Form submitted, Timer events. {\bf{Event handling:}}: \textless{}div \seqsplit{onclick="gotMouseClick('id42');} gotMouse=true;"\textgreater{}...\textless{}/div\textgreater{}; element.onclick = mouseClick; \seqsplit{element.addEventListener("click"}, mouseClick); {\bf{Event object}}: subclassed MouseEvent, KeyboardEvent. type, timestamp, currentTarget (element that listener was registered on), target (element that dispatched the event). {\bf{MouseEvent}}: button, pageX, pageY (mouse position relative to the top-left corner of document), screenX, screenY (mouse position in screen coordinates). {\bf{KeyboardEvent}}: keyCode, charCode (integer unicode, if there is one). Draggable rect;  elem.style.left = (elem.offsetLeft +  (event.pageX - prevX)) + "px"; {\bf{Capture phase}}: Start at the outermost element and work down to the innermost nested element. ○ Each element can stop the capture, so that its children never see the even event.stopPropagation(). \seqsplit{element.addEventListener(eventType}, handler, true); {\bf{Bubble phase}}:  Most on handlers (e.g. onclick) use bubble, not onfocus/blur. Invoke handlers on the innermost nested element that dispatches the event (mostly right thing). {\bf{Timeout}}: setTimeout(myFunc, 5*1000), setInterval(myfunc, 50), clearInterval(token). {\bf{Event processed one-at-a-time}}: Does not interleave with other js execution. Handlers run to completion, no multithreading.} \tn 
% Row Count 31 (+ 31)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Single Page Applications}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{3.833cm}}{Browser tosses current JS environment when navigating to a different page: Typing into location bar or forward/back buttons. Selecting a bookmarked URL, page refesh, assignments to window.location. Can change hash fragment and query parameters without reload. {\bf{Deep linking}}:  the URL should capture the web app's context so that directing the browser to the URL will result the app's execution to that context. {\bf{Two approaches}}: maintain the app's context state in the URL, provide a share button to generate deep linking URL. {\bf{ngRoute}}: A directive (ngView) to indicate where view components should be inserted in template. A service (\$route) that watches window.location for changes and updates the displayed view. A configuration (\$routeProvider) that allows the user to specify the mappings of URLs to view components. {\bf{\textless{}div ng-view\textgreater{}\textless{}/div\textgreater{}. \seqsplit{angular.module('cs142App'}, {[}'ngRoute'{]}). cs142App.config({[}'\$routeProvider', \seqsplit{function(\$routeProvider)} \{ \seqsplit{\$routeProvider.when('/Book/:bookId'}, \{ templateUrl: 'book.html', controller: 'BookController'\}). }}Passing parameters**: \$routeParams.bookId.} \tn 
% Row Count 22 (+ 22)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{CSS}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{3.833cm}}{Separate style from content  body \{ -\textgreater{} selector  margin: 8px; property, value  {\bf{Selectors:}}  Tag name: h1,  class attribute: .large,  Tag and class: p.large,  Element id \#p20 Pseudo selectors: p: hover, a:link, a:visited   {\bf{Color:}} color and background\_color  rgb(255, 255, 0)  {\bf{Box model}}  Margin -\textgreater{} border -\textgreater{} padding -\textgreater{} element (width, height)  Total element width: width + left padding + right padding + left border + right border + left margin + right margin   {\bf{Distance units:}}  Absolute: 2px, 1mm, 2cm, 0.2in, 3pt 2m (2 times the element's current font size, 2rem (2 times the root element's current font size)   \seqsplit{border-bottom-color/style/width}  {\bf{Position:}} position: static; (default) - Position in document flow \{\{nl\}\} position: relative; Position relative to default position via top, right, bottom, and left properties  \{\{nl\}\} position: fixed; Position to a fixed location on the screen via top, right, bottom, and left properties  \{\{nl\}\} position: absolute; Position relative to ancestor absolute element via top, right, bottom, and left properties  \{\{nl\}\} background-image, background-repeat, font, font-family, font-size, font-weight, font-style, text-align, vertical-align, cursor (eg. help)   {\bf{display:}} none (element not displayed, and takes no space in layout)  display: inline display: block visibility: hidden (element is hidden but space still allocated)|visible   font-size inherited, border, background not inherited Most specific rule wins \textless{}link rel="stylesheet" type="text/css" href="myStyles.css" /\textgreater{}} \tn 
% Row Count 32 (+ 32)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Javacript basics}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{3.833cm}}{high-level, dynamic, untyped, and interpreted programming language ... is prototype-based with first-class functions, … ... supporting object-oriented, imperative, and functional programming  \{\{nl\}\} Need to define variables, variables have the type of the last thing assigned to it. Undefined, number, string, boolean, function, object.   \{\{nl\}\} Two scopes: Global and function local. All var statements hoisted to top of scope.   \{\{nl\}\} {\bf{Number}}: NaN, infinity, bitwise operators 32 bit.  {\bf{String}}:  indexOf(), charAt(), match(), search(), replace(), toUpperCase(), toLowerCase(), slice(), substr() {\bf{boolean}}: false, 0, "", null, undefined, and NaN {\bf{undefined and null}}: null - a value that represents whatever the user wants it to Use to return special condition (e.g. no value) typeof null == 'object' Both are falsy but not equal (null == undefined; null !== undefined) {\bf{functions}}: arguments array. All functions return a value (default is undefined).  {\bf{first class functions}}: can be passed as arguments, returned, stored.  {\bf{Object}}: Object is an unordered collection of name-value pairs called properties. Name can be any string. bar.name or bar{[}"name"{]}. foo.nonExistent == undefined. {\bf{Global scope}} object in browser (window{[}prop{]}). To remove properties, use delete. delete foo.name. {\bf{Arrays}}: Objects. Can be sparse and polymorphic. push, pop, shift, unshift, sort, reverse, splice. Can store properties like objects. {\bf{Dates}}: var date = new Date(). number of ms since midnight Jan 1st, 1970 UTC. valueOf(),, toISOString(), toLocaleString(). {\bf{Regular Expressions}}: var re = /ab+c/; or var re2 = new RegExp("ab+c"). String: search(), match(), replace(), split(). RegExp: exec() and test().  \{\{nl\}\} /HALT/.test(str); // Returns true if string str has the substr HALT \{\{nl\}\} /halt/i.test(str); // Same but ignore case \{\{nl\}\} /{[}Hh{]}alt {[}A-Z{]}/.test(str); // Returns true if str either "Halt L" or "halt L" \{\{nl\}\} 'XXX \seqsplit{abbbbbbc'.search(/ab+c/);} // Returns 4 (position of 'a') \{\{nl\}\} 'XXX ac'.search(/ab+c/); // Returns -1, no match \{\{nl\}\} 'XXX ac'.search(/ab{\emph{c/); // Returns 4 \{\{nl\}\} '12e34'.search(/{[}\textasciicircum{}\textbackslash{}d{]}/); // Returns 2 \{\{nl\}\} 'foo: bar;'.search(/...\textbackslash{}s}}:\textbackslash{}s{\emph{...\textbackslash{}s}};/); // Returns 0 \{\{nl\}\} var str = "This has 'quoted' words like 'this'"; \{\{nl\}\} var re = /'{[}\textasciicircum{}'{]}{\emph{'/g; \{\{nl\}\} re.exec(str); // Returns {[}"'quoted'", index: 9, input: \{\{nl\}\} re.exec(str); // Returns {[}"'this'", index: 29, input: … \{\{nl\}\} re.exec(str); // Returns null \{\{nl\}\} str.match(/'{[}\textasciicircum{}'{]}}}'/g); // Returns {[}"'quoted'", "'this'"{]} \{\{nl\}\} str.replace(/'{[}\textasciicircum{}'{]}*'/g, 'XXX'); // Returns: \{\{nl\}\} 'This has XXX words with XXX.' \{\{nl\}\} try, catch, finally. \textless{}script type="text/javascript" src="code.js"\textgreater{}\textless{}/script\textgreater{}} \tn 
% Row Count 55 (+ 55)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Front End Programming}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{3.833cm}}{{\bf{CGI}}:  Certain URLs map to executable programs that generate web page. {\bf{Templates}}: mix code and HTML. Write HTML document containing parts of the page that are always the same. Add bits of code that generate the parts that are computed for each page.{\bf{Object-relational mapping}}:  simplify the use of databases (make database tables and rows appear as classes and objects). {\bf{Model View Controller}}: Model: manages the application's data, view: HTML/CSS, controller: fetch models and control view, handle user interatcions. {\bf{AngularJS view template}}: Hello \{\{models.user.firstName\}\}. {\bf{Angular controller}}: Angular creates \$scope and calls controller function called when view is instantiated. {\bf{Angular data}}: REST APIs and JSON. {\bf{Mongoos's ODL}}: var userSchema = new Schema(\{ firstName: String, lastName: String, \}); var User = mongoose.model('User', userSchema);} \tn 
% Row Count 18 (+ 18)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Responsive Web Apps}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{3.833cm}}{Add grid layout system with relative rathen than absolute measures. Add @media rules based on screen sizes. Made images support relative sizes. @media only screen and (min-width: 768px)\{ /{\emph{ tablets and desktop layout }}/ \} @media only screen and (max-width: 767px) \{/{\emph{ phones }}/ \} @media only screen and (max-width: 767px) and (orientation: portrait) \{ /{\emph{ portrait phones }}/ \}. {\bf{Use CSS breakpoints to control layout and functionality}}: Layout alternatives, App functionality conditional on available screen real estate.} \tn 
% Row Count 11 (+ 11)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Javascript Programming}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{3.833cm}}{{\bf{OOP}}: In methods this will be bound to the object. Object.keys(this). In non-method functions, this is the global object or undefined if strict.  {\bf{Functions}} can have properties too. plus1.invocations.  {\bf{Classes}}: var r = new Rectangle(26, 14).  {\bf{Prototypes}}: Prototype objects can have prototype objects forming a prototype chain. On an object property read access JavaScript will search the up the prototype chain until the property is found. The properties of an object are its own property in addition to all the properties up the prototype chain. This is called prototype-based inheritance. Property updates always create property in object. Rectangle.prototype.area = function() \{\}. Object.keys() would return width and height.  {\bf{Functional}}: can write entire program as functions with no side effects.  {\bf{Closures}}: {\bf{For private properties}} var myObj = (function() \{  var privateProp1 = 1; var privateProp2 = "test";  var setPrivate1 = function(val1) \{ privateProp1 = val1; \}  var compute = function() \{return privateProp1 + privateProp2;\}  return \{compute: compute, setPrivate1: setPrivate1\}; \})(); typeof myObj; // 'object' Object.keys(myObj); // {[} 'compute', 'setPrivate1' {]} {\bf{Fix for fileNo}}: Make fileno an argument. printFileLength(fileNo);  {\bf{JSON}}: JSON.stringify(obj) or JSON.parse(s).  \{\{nl\}\} {\bf{Bad parts}}: Declares variables on use. Automatic semicolon insertion - Workaround: Enforce semicolons with checkers. Type coercing equals: ==. Always use ===, !==. ("" == "0") is false but (0 == "") is true, so is (0 == '0')  (false == '0') is true as is (null == undefined).{\bf{Assign default value}}:  hostname = hostname || "localhost";. {\bf{Access an undefined object property}}: var prop = obj \&\& obj.propname;. Handle multiple this. var self = this; \seqsplit{fs.readFile(self.fileName} + fileNo, function (err, data) \{  \seqsplit{console.log(self.fileName},fileNo);  \});} \tn 
% Row Count 38 (+ 38)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{DOM}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{3.833cm}}{window, this. Rooted at window.document.head. nodeName property is element type (uppercase P, DIV, etc.) or \#text. parentNode, nextSibling, prevSibling, firstChild, lastChild. Can do element.setAttribute. {\bf{By id}} \seqsplit{document.getElementById("div42")}, getElementsByClassName(), getElementsByTagName(). {\bf{textContent}}: text content of a node and its descendants. {\bf{innerHTML}}: HTML syntax describing the element's descendants. {\bf{outerHTML}} same but includes element. \seqsplit{getAttribute()/setAttribute()}. element.innerHTML = "This text is \textless{}i\textgreater{}important\textless{}/i\textgreater{}", replaces content but retains attributes. {\bf{element.style.display = "none"}}, image.src = "newImage.jpg". element.className = "active"; \seqsplit{document.createElement("P")}, document.createTextNode. \seqsplit{parent.appendChild(element);} or \seqsplit{parent.insertBefore(element}, sibling), \seqsplit{node.removeChild(oldNode);} {\bf{Redirect to new page}}: window.location.href = "newPage.html". {\bf{DOM Coordinate System}}: The screen origin is at the upper left; y increases as you go down. {\bf{The position of an element is determined by the upper-left outside corner of its margin.}} Read location with element.offsetLeft, element.offsetTop. Coordinates are relative to element.offsetParent, which is not necessarily the same as element.parentNode. {\bf{ Default offsetParent is the body element. Position explicity}}: Absolute the element no longer occupies space in document flow. {\bf{The origin inside an offsetParent (for positioning descendants) is just inside the upper-left corner of its border}}. {\bf{Absolute}}: explicitly positioned, {\bf{relative}} element is positioned automatically the usual way. This element will become the offsetParent for all its descendants unless overridden.  {\bf{Dimensions}}: Reading dimensions: element.offsetWidth and element.offsetHeight Include contents, padding, border, but not margin. Updating dimensions:  element.style.width and element.style.height. {\bf{If you want child to be positioned wrt to you, you should be relative, child should be absolute}}.} \tn 
% Row Count 40 (+ 40)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{3.833cm}}{\bf\textcolor{white}{Building web applications}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{3.833cm}}{Be consistent, provide context, be fast. Style guide: covers the look and feel of the app. style, user interactions, layout. Design templates: Master-detail template. Front-end-frameworks (bootstrap) css style sheets, html components (buttons, menus, toolbars, lists, table, forms), javascript (modals, transitions, dropdowns). \textless{}md-toolbar\textgreater{} layout="row" flex\textgreater{}. \textless{}md-content\textgreater{} contents can be the ng-view directive. \{\{nl\}\} Angular Material responsive support: \textless{}md-button hide-gt-sm... \textless{}md-menu show-lg .. \textless{}md-sidenav \seqsplit{md-is-locked-open="\$mdMedia('gt-sm')"}. {\bf{On mobile}}: \seqsplit{md-is-locked-open="\$mdMedia('gt-sm')"}. Make a button in the toolbar for opening the nav bar \textless{}md-button hide-gt-sm \seqsplit{ng-click="toggleUserList()"} \textgreater{} \textless{}md-icon md-svg-icon="menu" \textgreater{}\textless{}/md-icon\textgreater{}\textless{}/md-button\textgreater{}toggleUserList = function() \{ \seqsplit{\$mdSidenav("users").toggle();} \}. {\bf{ARIA}}: Add text descriptions for things that need it \textless{}a aria-label="Photo of user \{\{user.name\}\}". {\bf{Internationalization}}: \textless{}h1\textgreater{}\{\{i18n.GettingStarted\}\}\textless{}/h1\textgreater{} \textless{}h1 translate\textgreater{}Getting Started\textless{}/h1\textgreater{} \textless{}h1\textgreater{}\{\{"Getting Started" | translate\}\}\textless{}/h1\textgreater{}. {\bf{Testing}}: Unit testing, each test targets a particular component. Requires mock components. e2e testing: Run tests against the real web application. Scripting interface into browser used to drive web application. Example: Fire up app in a browser and programmatically interact with it. WebDriver interface in browsers useful for this.} \tn 
% Row Count 29 (+ 29)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}