\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{pseud}
\pdfinfo{
  /Title (javascript-survival-kit.pdf)
  /Creator (Cheatography)
  /Author (pseud)
  /Subject (JavaScript Survival Kit 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}{E96656}
\definecolor{LightBackground}{HTML}{FDF5F4}
\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{JavaScript Survival Kit Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{pseud} via \textcolor{DarkBackground}{\uline{cheatography.com/26472/cs/7447/}}}
\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}pseud \\
  \uline{cheatography.com/pseud} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 9th March, 2016.\\
   Updated 11th 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}{About this document}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{This cheat-sheet explains the most important parts of the JavaScript language, defines some key terms and shows the syntax through small examples. \newline % Row Count 3 (+ 3)
However, it's no substitute for proper studying - you can't learn to program off of a cheat sheet (sorry!).% Row Count 6 (+ 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}{\{\{fa-graduation-cap\}\} Variables - Explained}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What is a variable?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}A variable is a storage location, a "box", which we associate with a name (an identifier). The variable can hold a single value and its value may be changed} \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What is an identifier?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}It's the "name" affixed the variable. Later on, whether updating or retrieving its value, we'll use refer to the variable by its identifier.} \tn 
% Row Count 10 (+ 5)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What can a variable hold?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Any `string`, `number`, `boolean`, `array`, `object` or `Function`.} \tn 
% Row Count 13 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Why use variables?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Use them to "remember" things in the program. Sometimes, the collection of all variables (everything the program remembers) is called {\emph{the state}} of the program.} \tn 
% Row Count 18 (+ 5)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\{\{fa-info-circle\}\} Where to read more}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Read the section "Variables" at:\{\{nl\}\}\{\{link="http://eloquentjavascript.net/02\_program\_structure.html"\}\}eloquentjavascript.net/02\_program\_structure.html\{\{/link\}\}} \tn 
% Row Count 23 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-code\}\} Variables - Examples}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Define a variable}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}`var name = "Adalina";`\{\{nl\}\}{\bf{NB}} - subsequent examples assume we have defined this variable.} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Retrieve the variable's value}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Simply refer to the variable's {\emph{identifier}}:\{\{nl\}\}`console.log(name);`\{\{nl\}\}is (in this case) the same as:\{\{nl\}\}`console.log("Adalina");`} \tn 
% Row Count 8 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Update the variable's value}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}`name = "Emma";`\{\{nl\}\}{\bf{NB}} - The syntax is the same as defining the variable, {\emph{sans}} the `var` keyword!} \tn 
% Row Count 12 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-graduation-cap\}\} Objects - Explained}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What is an object?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}If a variable is a "box" which can hold a value, then an object is a box of boxes, holding many values - each of which is a {\emph{property}}.} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What is a property?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}A property is some small part of an object which holds some data (e.g. `string`) or a `Function`. Each property has an {\emph{identifier}}, just like variables.} \tn 
% Row Count 9 (+ 5)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\{\{fa-info-circle\}\} Where to read more}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}\{\{link="http://eloquentjavascript.net/04\_data.html"\}\}eloquentjavascript.net/04\_data.html\{\{/link\}\} - The introduction and the paragraphs "Properties" and "Objects"} \tn 
% Row Count 14 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-code\}\} Objects - Examples}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Define an object}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Define an object with two properties whose identifiers are "name" and "species": \{\{nl\}\}`var my\_pet = \{\{\{nl\}\}~~~name: "spot",\{\{nl\}\}~~~species: "dog"\{\{nl\}\}\}`\{\{nl\}\}{\bf{NB}} Subsequent examples will assume we start with this object.\{\{nl\}\}{\bf{NB}} It isn't necessary to define a variable to hold the array (but you almost always will).} \tn 
% Row Count 9 (+ 9)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Retrieve a property}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Get the value of the `name` property:\{\{nl\}\} `my\_pet{[}"name"{]}`\{\{nl\}\}{\bf{or}}\{\{nl\}\}`my\_pet.name`} \tn 
% Row Count 12 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Update a property}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}To change the value of the `name` property (i.e. rename our pet):\{\{nl\}\}`my\_pet{[}"name"{]} = "sparky";`\{\{nl\}\}{\bf{or}}\{\{nl\}\}`my\_pet.name = "sparky";`} \tn 
% Row Count 17 (+ 5)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Add a property}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}`my\_pet{[}"breed"{]} = 'bulldog';`\{\{nl\}\}{\bf{or}}\{\{nl\}\}`my\_pet.breed = 'bulldog';`\{\{nl\}\}{\bf{NB}} adding/updating a property uses the same syntax - if the property didn't exist, it is added.} \tn 
% Row Count 22 (+ 5)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Remove a property}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}To remove the `species` property:\{\{nl\}\}`delete my\_pet{[}"species"{]};`\{\{nl\}\}{\bf{or}}\{\{nl\}\}`delete my\_pet.species;`} \tn 
% Row Count 26 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{0.89586 cm} x{4.08114 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-balance-scale\}\} Comparisons}}  \tn
% Row 0
\SetRowColor{LightBackground}
`x === y` & `true` if `x` is equal to `y` \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
`x !== y` & `true` if `x` is different from `y` \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
`x \textgreater{}= y` & `true` if `x` is greater than, or equal to `y` \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
`x \textless{}= y` & `true` if `x` is less than, or equal to `y` \tn 
% Row Count 8 (+ 2)
% Row 4
\SetRowColor{LightBackground}
`x \textgreater{} y` & `true` if `x`` is greater than `y` \tn 
% Row Count 10 (+ 2)
% Row 5
\SetRowColor{white}
`x \textless{} y` & `true` if `x` is less than `y` \tn 
% Row Count 11 (+ 1)
% Row 6
\SetRowColor{LightBackground}
`!x` & `true` if `x` is `false` \tn 
% Row Count 12 (+ 1)
% Row 7
\SetRowColor{white}
`x \&\& y` & `true` if {\emph{both}} `x` {\emph{and}} `y` are `true` \tn 
% Row Count 14 (+ 2)
% Row 8
\SetRowColor{LightBackground}
`x || y` & `true` if {\emph{either}} (or both) `x` or `y` are `true` \tn 
% Row Count 16 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-balance-scale\}\} Conditions - False \& True}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What's a condition?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}A condition is really just an expression. When we use an expression as a condition, we're not interested in its value, but whether or not that value is {\emph{truthy}}.} \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What's a truthy value?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}In JavaScript, all but 6 values are `truthy`, that is, unless your {\emph{condition}} evaluates to one of those 6 values, the code guarded by the if-block will be run.} \tn 
% Row Count 10 (+ 5)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What are the falsy values?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}These 6 values will cause the condition to fail and the code it guards to be skipped:\{\{nl\}\}• `false`\{\{nl\}\} • `0` - (the number zero)\{\{nl\}\} • `""` - (the empty string)\{\{nl\}\} • `null`\{\{nl\}\} • `undefined`\{\{nl\}\} • `NaN` - not a number\{\{nl\}\}} \tn 
% Row Count 17 (+ 7)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Where are conditions used?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Conditions determine which code block to evaluate in if-statements and when to terminate a loop.} \tn 
% Row Count 21 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-graduation-cap\}\} Functions - Explained}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What is a function?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Functions group code together into a block which is given a name (an {\emph{identifier}}). Functions often accept arguments to modify their behaviour.} \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What is an argument?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Think of function arguments as variables which are defined \& available to the code inside the function. The value of an argument is determined by the point the function is called and the argument(s) is supplied.} \tn 
% Row Count 11 (+ 6)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Why use functions?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Functions are the primary way of defining more complex or specific actions than is built into JavaScript and to organise code.\{\{nl\}\}{\emph{In other words - functions are handy when we wish to use a piece of code more than once.}}} \tn 
% Row Count 17 (+ 6)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\{\{fa-info-circle\}\} Where to read more}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}\{\{link="eloquentjavascript.net/03\_functions.html"\}\}eloquentjavascript.net/03\_functions.html\{\{/link\}\}} \tn 
% Row Count 21 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-code\}\} Functions - Syntax}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Define a function}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Define a function called `takeFive`, which returns the number 5 when called:\{\{nl\}\}`function takeFive() \{\{\{nl\}\}~~~return 5;\{\{nl\}\}\}`\{\{nl\}\}{\bf{NB}} - we will be using this function in some of the examples below.} \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Call a function}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Call `takeFive`, which takes no arguments: \{\{nl\}\}`takeFive();`\{\{nl\}\}{\bf{NB}} - Note the parentheses' that follow the function's identifier - {\emph{that's}} what tells JavaScript to call the function rather than just returning it as a (`Function`) value.} \tn 
% Row Count 13 (+ 7)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Define a function (with arguments)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}`function add5(num) \{\{\{nl\}\} ~~~console.log("I got num=" + num);\{\{nl\}\} ~~~return num + 5;\{\{nl\}\} \}`\{\{nl\}\}{\bf{NB}} - To have more arguments than just `num`, type out additional identifiers (names) of arguments and add a comma (`,`) between each.} \tn 
% Row Count 20 (+ 7)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Call a function (with arguments)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}`var x = add5(10);`\{\{nl\}\}`var y = add5(-5);`\{\{nl\}\}\{\{nl\}\}{\bf{NB}} - {\emph{This amounts to manually typing:}}\{\{nl\}\}`var num1 = 5;\{\{nl\}\} console.log("I got num=" + num1);\{\{nl\}\} var x = num1 + 5;\{\{nl\}\} var num2 = -5;\{\{nl\}\} console.log("I got num=" + num2);\{\{nl\}\} var y = num2 + 5;\{\{nl\}\}`} \tn 
% Row Count 27 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-graduation-cap\}\} if-statement - Explained}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What's an if-statement?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}If-statements are used to group code together into a block which is {\emph{only}} evaluated if the {\emph{condition}} evaluates to `true`.\{\{nl\}\}{\bf{NB}} - see "Conditions - Falsy \& Truthy" for an explanation of conditions.} \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What does an if-statement look like?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}`if (CONDITION) \{\{\{nl\}\} ~~~//evaluate this code if CONDITION\{\{nl\}\} ~~~//is true\{\{nl\}\} \} else if (OTHER-CONDITION) \{\{\{nl\}\} ~~~//evaluate this code if CONDITION\{\{nl\}\} ~~~//is false, but OTHER-CONDITION\{\{nl\}\} ~~~//is true\{\{nl\}\} \} else \{\{\{nl\}\} ~~~//evaluate this code if no condition\{\{nl\}\} ~~~//evaluated to true.\{\{nl\}\} \}\{\{nl\}\}`} \tn 
% Row Count 17 (+ 11)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Which parts are needed?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Only the `if`-part is needed. `else if` and `else` blocks are optional.\{\{nl\}\}Also, you can have as many `else if` blocks as you'd like.} \tn 
% Row Count 21 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-code\}\} if-statements - Examples}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{if-statement}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}`if (pet\_type === "dog") \{\{\{nl\}\}~~~//done if var 'pet\_type' is "dog"\{\{nl\}\}\}`} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{if/else statement}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}`if (pet\_type === "dog") \{\{\{nl\}\}~~~//if var 'pet\_type' is "dog"\{\{nl\}\}\} else \{\{\{nl\}\}~~~//if var 'pet\_type' is something else\{\{nl\}\}\}`} \tn 
% Row Count 8 (+ 5)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{if/else if/else statement}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}`if (pet\_type === "dog") \{\{\{nl\}\}~~~//if var 'pet\_type' is "dog"\{\{nl\}\}\} else if (pet\_type === "cat") \{\{\{nl\}\}~~~//if var 'pet\_type' is "cat"\{\{nl\}\}\} else \{\{\{nl\}\}~~~//if var 'pet\_type' is something else\{\{nl\}\}\}`} \tn 
% Row Count 15 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-code\}\} (while) Loops - Examples}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{How do I loop forever}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}`while (true) \{\{\{nl\}\} ~~~//keep doing this until time ends\{\{nl\}\} \}`} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{How do I loop X times?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}To loop X times (say 3), we ensure the condition evaluates to `false` at the start of the fourth loop:\{\{nl\}\} `var count = 0;\{\{nl\}\} while (count \textless{} 4) \{\{\{nl\}\} ~~~//increase count by 1\{\{nl\}\} ~~~count = count + 1;\{\{nl\}\} ~~~//evaluate this code until count\{\{nl\}\} ~~~//is 4 or more\{\{nl\}\} \}`\{\{nl\}\} {\bf{NB}} - if we don't ensure our condition eventually becomes invalid, we will loop forever.} \tn 
% Row Count 14 (+ 11)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-graduation-cap\}\} (`while`) Loops - Explained}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What is a (while) loop?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Loops allow repeating a block of code for as long as a {\emph{condition}} remains true.} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Real world (tm) loop example}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Think of this exchange:\{\{nl\}\}Passenger: {\emph{Are we there yet?}}\{\{nl\}\}Driver: {\emph{No, not yet}}\{\{nl\}\}...\{\{nl\}\}Passenger: {\emph{Are we there yet?}}\{\{nl\}\}\{\{nl\}\}If the passenger is really obnoxious and keeps repeating the question, and the driver patiently answers each time - they are essentially in a conversational {\emph{loop}}!} \tn 
% Row Count 11 (+ 8)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Syntax Example}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}`while (CONDITION) \{\{\{nl\}\} ~~~//evaluate code in this block\{\{nl\}\} \}`} \tn 
% Row Count 14 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\{\{fa-info-circle\}\} Where to read more}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Mid-way through the page linked below, look for the heading "while and do loops":\{\{nl\}\}\{\{link="http://eloquentjavascript.net/02\_program\_structure.html"\}\}eloquentjavascript.net/02\_program\_structure.html\{\{/link\}\}} \tn 
% Row Count 20 (+ 6)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.09494 cm} x{3.88206 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-puzzle-piece\}\} Data Types}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Number}} & Any numeric value - `3`, `3.14`, `2e10` \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
{\bf{String}} & Any sequence of characters inside quotation marks. `"d"`, `"dog"`, `"cute dog"` \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
{\bf{Boolean}} & Two possible values, `true` or `false`. Used as conditions in if-statements \& loops. Every expression can be boiled down into a boolean. \tn 
% Row Count 10 (+ 5)
% Row 3
\SetRowColor{white}
{\bf{Array}} & A sequence of elements grouped together. E.g. `{[}1, 2, 3{]}` is an array of 3 numbers. \tn 
% Row Count 13 (+ 3)
% Row 4
\SetRowColor{LightBackground}
{\bf{Object}} & An object which groups other values.\{\{nl\}\}`\{ name: "Rachel", age: 22 \}` \tn 
% Row Count 16 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-code\}\} Syntax - (basic) data types}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{String}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}`"d"`\{\{nl\}\}`"To be or not to be"`\{\{nl\}\}`"300" //in quotes, this is a string`\{\{nl\}\}`'single quotes also work'`} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Number}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}`300`\{\{nl\}\}`3.1415`\{\{nl\}\}`2e10`} \tn 
% Row Count 6 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Boolean}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}`true`\{\{nl\}\}`false`} \tn 
% Row Count 8 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-commenting\}\} Terminology}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Syntax}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}The collection of rules about "what goes where" to form valid JavaScript code.\{\{nl\}\}{\bf{NB}} - if you get a syntax error, you've written some code which isn't legal javascript.} \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Statement}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}A piece of code (usually a single line) which represents something we want done - some small task.} \tn 
% Row Count 9 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Expression}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Some piece of code which, when evaluated, will yield a value back. E.g. `3 + 6`} \tn 
% Row Count 12 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Evaluation}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}The thing which happens when the JavaScript interpreter analyses a piece of code and either does something in response (a statement) or yields a value (an expression).} \tn 
% Row Count 17 (+ 5)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{JavaScript Interpreter}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Some program which can understand, and act on JavaScript. Your browser (Firefox/Chrome) is a JavaScript interpreter.} \tn 
% Row Count 21 (+ 4)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{(Code) Block}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Blocks are delimited by `\{ \}` and used by if-statements, loops and functions to encapsulate some series of {\emph{statements}} which should be executed.} \tn 
% Row Count 26 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-graduation-cap\}\} Arrays - Explained}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What is an array?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}An array is a sequence of elements. Each element can be retrieved from the array by its index number.} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{What is an array element?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}An element part of an array, it can be any data type (`string`, `number`, `boolean`, `array`, `object`) but it could also be a `Function`.} \tn 
% Row Count 8 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{How can I get elements from the array?}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}The first element has index 0, the second has index 1 and so on.} \tn 
% Row Count 11 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\{\{fa-info-circle\}\} Where to read more}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Read the introduction and the paragraph "data sets" at:\{\{nl\}\}\{\{link="http://eloquentjavascript.net/04\_data.html"\}\}eloquentjavascript.net/04\_data.html\{\{/link\}\}} \tn 
% Row Count 16 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-code\}\} Arrays - Examples}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Defining an array}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Define an array with 3 elements, the string `"one"`, the number `2` and the boolean `false`, in that order:\{\{nl\}\}`{[}"one", 2, "three"{]}`} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Retrieve an element from the array}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Get the second element of the array, `"b"`, by indexing into the array using the index number `1`:\{\{nl\}\}`{[}"a", "b", "c"{]}{[}1{]}`} \tn 
% Row Count 8 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Updating an element}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}`var pets = {[}'dog', 'cat', 'canary'{]};\{\{nl\}\}pets{[}1{]} = 'lion';`\{\{nl\}\}Now the array would be:\{\{nl\}\}`{[}'dog', 'lion', 'canary'{]}`} \tn 
% Row Count 12 (+ 4)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Add an element}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Use the method `push`. {\bf{NB}} push adds elements to the {\emph{end}} of the array.\{\{nl\}\}`var pets = {[}'dog', 'cat', 'canary'{]};\{\{nl\}\}pets.push('crocodile');`\{\{nl\}\}Now the array would be:\{\{nl\}\}`{[}'dog', 'cat', 'canary', 'crocodile'{]}`} \tn 
% Row Count 18 (+ 6)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Remove element(s)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Use `splice` - `splice` needs two arguments, the index of where to start and a number of elements to remove.\{\{nl\}\}`var pets = {[}'dog', 'cat', 'fish', 'bird'{]};\{\{nl\}\}pets.splice(1,2);`\{\{nl\}\}Now the array would be:\{\{nl\}\}`{[}'dog', 'bird'{]}`} \tn 
% Row Count 24 (+ 6)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Get number of elements in array}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Use the `length` property on the array:\{\{nl\}\}`pets.length`\{\{nl\}\}\{\{nl\}\}Yes, arrays are actually a kind of object(!!) - which means it has some properties (like `length`) and methods attached to it.} \tn 
% Row Count 30 (+ 6)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-map-signs\}\} Where to go for more?}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\{\{fa-code\}\} \{\{link="http://www.codher.com"\}\}http://www.codher.com\{\{/link\}\}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}CodHer's official website :)\{\{nl\}\}Learn about the organisation and upcoming events} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{fa-medkit\}\}/\{\{fa-commenting\}\} {\bf{\{\{link="https://asosio.com/72"\}\}asosio.com/72\{\{/link\}\}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}CodHer's Asosio community. \{\{nl\}\}Ask the mentors, get new JS assignments, download learning materials and (please!) discuss JavaScript with other attendees.} \tn 
% Row Count 10 (+ 6)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{fa-facebook\}\} {\bf{\{\{link="https://www.facebook.com/codhercph/timeline?ref=page\_internal"\}\}facebook.com/codhercph\{\{/link\}\}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Find event photos, keep current on upcoming events \& find stories related to females in tech} \tn 
% Row Count 15 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{\{\{fa-support\}\} Helpful Sites}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{link="https://developer.mozilla.org/en-US/"\}\}developer.mozilla.org/en-US/\{\{/link\}\}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Huge site dedicated web developers. The "CSS" \& "JavaScript" links under "Web Platform" are especially interesting to you.} \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{link="learn.jquery.com"\}\}learn.jquery.com\{\{/link\}\}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Introduction/Guide to JQuery} \tn 
% Row Count 8 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\{\{link="api.jquery.com"\}\}api.jquery.com\{\{/link\}\}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}The JQuery API - go here to read more about a given JQuery function or to search for functionality.} \tn 
% Row Count 12 (+ 4)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\{\{link="eloquentjavascript.net"\}\}eloquentjavascript.net\{\{/link\}\}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Probably the best JavaScript textbook in existence - and it's free! An excellent and recommended read.} \tn 
% Row Count 17 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}