\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{NikiSolo}
\pdfinfo{
  /Title (programming.pdf)
  /Creator (Cheatography)
  /Author (NikiSolo)
  /Subject (Programming 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{Programming Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{NikiSolo} via \textcolor{DarkBackground}{\uline{cheatography.com/84699/cs/20002/}}}
\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}NikiSolo \\
  \uline{cheatography.com/nikisolo} \\
  \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 8th July, 2019.\\
   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}{Programming Paradigms}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Imperative}}: Programming with an explicit sequence of commands that update state.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Declarative}}: Programming by specifying the result you want, not how to get it.} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Structured}}: Programming with clean, goto-free, nested control structures.} \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Procedural}}: Imperative programming with procedure calls.} \tn 
% Row Count 8 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Functional (Applicative)}}: Programming with function calls that avoid any global state.} \tn 
% Row Count 10 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Object-Oriented}}: Programming by defining objects that send messages to each other. Objects have their own internal (encapsulated) state and public interfaces. Object orientation can be: Class-based: Objects get state and behavior based on membership in a class. Prototype-based: Objects get behavior from a prototype object.} \tn 
% Row Count 17 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{A programming paradigm is a style, or "way," of programming. \newline Some languages make it easy to write in some paradigms but not others.}  \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}{Higher-order functions}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{When we talk about higher-order functions, we mean a function that either: \newline % Row Count 2 (+ 2)
•	takes one or more functions as arguments, or \newline % Row Count 3 (+ 1)
•	returns a function as its result \newline % Row Count 4 (+ 1)
They let us encapsulate variables, make HOCs in React, currying, etc.% Row Count 6 (+ 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}{Pure function}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{A pure function is a function which: \newline % Row Count 1 (+ 1)
•	Given the same input, will always return the same output. \newline % Row Count 3 (+ 2)
•	Produces no side effects.% Row Count 4 (+ 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}{Functions as first-class entities}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Functions as first-class entities can: \newline % Row Count 1 (+ 1)
•	refer to it from constants and variables \newline % Row Count 2 (+ 1)
•	pass it as a parameter to other functions \newline % Row Count 3 (+ 1)
•	return it as result from other functions% Row Count 4 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.4977 cm} p{0.4977 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Currying}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{Currying is a process to reduce functions of more than one argument to functions of one argument.}  \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}{Serverless}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{1) Abstraction \newline % Row Count 1 (+ 1)
2) Scaling \newline % Row Count 2 (+ 1)
3) Effective costs% Row Count 3 (+ 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}{Redux}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Redux is a state management tool. It offers a single store of state, which can be accessed from any React component. There are three main principles of Redux: \newline % Row Count 4 (+ 4)
1)	{\bf{Single source of truth}}. It means that the state of the app is stored as an object tree within a single store. \newline % Row Count 7 (+ 3)
2)	{\bf{State is read-only}}. It means that the state can be changed only by emitting an action. \newline % Row Count 9 (+ 2)
3)	{\bf{Changes are made with pure functions}}. To specify how the state tree is transformed by actions, you write pure reducers. Reducers are just pure functions that take the previous state and an action, and return the next state.% Row Count 14 (+ 5)
} \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}{React}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{React is a JavaScript library for building user interfaces. It is the view layer for web applications. At the heart of all React applications are components. \newline % Row Count 4 (+ 4)
Advantages: \newline % Row Count 5 (+ 1)
{\bf{1.1 Component Creation}} \newline % Row Count 6 (+ 1)
React enables the creation of module-like pieces of code called "Components" which allows reusability. \newline % Row Count 9 (+ 3)
{\bf{1.2 Virtual DOM}} \newline % Row Count 10 (+ 1)
Considered the next biggest leap in web development since AJAX, the virtual DOM (short for Document Object Model) is the core reason why React enables the creation of fast, scalable web apps. Through React's memory reconciliation algorithm, the library constructs a representation of the page in a virtual memory, where it performs the necessary updates before rendering the final web-page into the browser. \newline % Row Count 19 (+ 9)
{\bf{1.3 Easy to learn}} \newline % Row Count 20 (+ 1)
We need to clarify that React is NOT a framework; unlike Angular or Vue.js, but a library that is consistently used in association with other Javascript libraries. Hence, there is a shorter learning curve involved in understanding React compared to other comprehensive libraries.% Row Count 26 (+ 6)
} \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}{Scrum}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Scrum is a project management methodology. \newline % Row Count 1 (+ 1)
Scrum relies on a self-organizing, cross-functional team. The Scrum model suggests that projects progress via a series of sprints. In keeping with an agile methodology, sprints are timeboxed to no more than a month long, most commonly two weeks. Scrum methodology advocates for a planning meeting at the start of the sprint, where team members figure out how many items they can commit to, and then create a sprint backlog – a list of the tasks to perform during the sprint.% Row Count 11 (+ 10)
} \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}{Prototypal Inheritance}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{In JavaScript every object has a prototype object. These prototype objects are live objects that can be changed at any point in time. The most important thing to know about prototype objects is that they can be linked with each other to create chains. JavaScript internally can traverse these chains and look for methods and properties. So if you ask a random object about a property or method, it's going to traverse the chain to find them. \newline % Row Count 9 (+ 9)
When a function is called with the new keyword, couple of things happen behind the scenes: \newline % Row Count 11 (+ 2)
1) A new empty object is created \newline % Row Count 12 (+ 1)
2) The context object this is bound to the new empty object \newline % Row Count 14 (+ 2)
3) The new object is linked to the function's prototype property \newline % Row Count 16 (+ 2)
4) this is automatically returned unless another value is returned explicitly from the function% Row Count 18 (+ 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}{this}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{In JavaScript, 'this' normally refers to the object which 'owns' the method, but it depends on how a function is called. \newline % Row Count 3 (+ 3)
Global Scope \newline % Row Count 4 (+ 1)
If there's no current object, 'this' refers to the global object. In a web browser, that's 'window' — the top-level object which represents the document, location, history and a few other useful properties and methods.% Row Count 9 (+ 5)
} \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}{Agile}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Agile software development refers to  software development methodologies centered round the idea of iterative development, where requirements and solutions evolve through collaboration between self-organizing cross-functional teams. The ultimate value in Agile development is that it enables teams to deliver value faster, with greater quality and predictablity, and greater aptitude to respond to change. Scrum and Kanban are two of the most widely used Agile methodologies. Below are the most frequently asked questions around Agile and Scrum, answered by our experts.% Row Count 12 (+ 12)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}