\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{{[}deleted{]}}
\pdfinfo{
  /Title (random-tasks.pdf)
  /Creator (Cheatography)
  /Author ({[}deleted{]})
  /Subject (random tasks 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{random tasks Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{{[}deleted{]}} via \textcolor{DarkBackground}{\uline{cheatography.com/29211/cs/8583/}}}
\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}{[}deleted{]} \\
  \uline{cheatography.com/deleted-29211} \\
  \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 11th July, 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{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Node Package Manager (NPM)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{NPM is used to install javascript tools for server side, or dev tool usage. NPM hosts packages for client and server (typically called browserify compatible) but they must be installed via JSPM commands. The contents and commands related to a node package are all stored within the package.json file in its root.% Row Count 7 (+ 7)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{NPM Commands}}  \tn
% Row 0
\SetRowColor{LightBackground}
help & npm -{}-help \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
install package from \seqsplit{https://www.npmjs.com/} & npm install packagename -{}-save \tn 
% Row Count 4 (+ 3)
% Row 2
\SetRowColor{LightBackground}
install internal package (windows cli) & npm install \seqsplit{friendlyName=\%wgit\%repository}.git \tn 
% Row Count 7 (+ 3)
% Row 3
\SetRowColor{white}
update installed version & npm update {[}friendlyname e.g. packagename{]} \tn 
% Row Count 10 (+ 3)
% Row 4
\SetRowColor{LightBackground}
run a command from package.config under the scripts section & npm run {[}commandname{]} \tn 
% Row Count 13 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{6.0445 cm} x{11.2255 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{NPM Tasks}}  \tn
% Row 0
\SetRowColor{LightBackground}
Delete a package & delete the package entry from package.config, and run "npm prune" to remove stale libraries \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
Install global package & tools to be used standalone from the command-line can be installed with -g or -{}-global, which installs them next to your npm executable instead of in the current project \tn 
% Row Count 11 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Javascript Package Manager (JSPM)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{JSPM is a package manager that installs packages in a format understood by SystemJs. It was designed to allow packages to be pulled from any configurable endpoint (github/npm/private repositories), in a way that allows for versioning and dependencies across systems.% Row Count 6 (+ 6)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{JSPM Commands}}  \tn
% Row 0
\SetRowColor{LightBackground}
help & jspm -{}-help \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
install package from \seqsplit{http://kasperlewau.github.io/registry/\#/} & jspm install packagename \tn 
% Row Count 5 (+ 4)
% Row 2
\SetRowColor{LightBackground}
install package from windsor & jspm install \seqsplit{friendlyName=windsor:repo-name}.git \tn 
% Row Count 8 (+ 3)
% Row 3
\SetRowColor{white}
install package from npm \seqsplit{https://www.npmjs.com/} & jspm install npm:packageName \tn 
% Row Count 11 (+ 3)
% Row 4
\SetRowColor{LightBackground}
install package from github & jspm install \seqsplit{github:user/reponame} \tn 
% Row Count 13 (+ 2)
% Row 5
\SetRowColor{white}
update installed version & jspm update  {[}friendlyname e.g. packagename{]} \tn 
% Row Count 16 (+ 3)
% Row 6
\SetRowColor{LightBackground}
remove package & jspm uninstall packageName \tn 
% Row Count 18 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{5.5264 cm} x{11.7436 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{JSPM Tasks}}  \tn
% Row 0
\SetRowColor{LightBackground}
install file loader & For loading non-js files using custom loaders, set install with friendlyname as the file extension ex: jspm install html=text (to load html as a string using the text loader). Used in code by placing a trailing ! after the extension ex: import 'test.html!'; \tn 
% Row Count 10 (+ 10)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{SystemJs}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{SystemJs is a runtime package loader. Its configuration is found in config.js (by default), or the file specified as the jspm config file in package.json.It loads javascript packages via javascript commands to make their services available. It is comparable to existing loaders such as commonjs, requirejs, and webpack. \newline % Row Count 7 (+ 7)
{\bf{Features of SystemJS include:}} \newline % Row Count 8 (+ 1)
optional transpilation of es6 syntax via plugins \newline % Row Count 9 (+ 1)
package version management \newline % Row Count 10 (+ 1)
non-js content loaders \newline % Row Count 11 (+ 1)
production build capability into standalone js file, or multiple module formats% Row Count 13 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{5.5264 cm} x{11.7436 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{SystemJs Config}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{defaultJSExtensions} & adds js after files in import statements. This is deprecated, it must be true currently, but will be false in the future, so always explicitly specify file extensions. \tn 
% Row Count 7 (+ 7)
% Row 1
\SetRowColor{white}
transpiler & plugin used to convert es6 into javascript \tn 
% Row Count 9 (+ 2)
% Row 2
\SetRowColor{LightBackground}
paths & created by jspm to lookup packages in file structure, do not modify \tn 
% Row Count 12 (+ 3)
% Row 3
\SetRowColor{white}
meta & overrides for working with incompatible packages (ex: allows making JQuery a global for plugins that don't know how to load it as a module) \tn 
% Row Count 18 (+ 6)
% Row 4
\SetRowColor{LightBackground}
map & maps package names to files/folders generally managed by JSPM and should not be modified \tn 
% Row Count 22 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Bullet to Demystify the Package Tree Mental Model}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{Ideally everything is a package, including your SPA (its entry point is the act of loading index.html)} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{Packages always have a single entry point, and optionally, children/descendants.} \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{The topmost package will not support es6 until browsers do, because of this, the topmost package must use the SystemJs global to load its children} \tn 
% Row Count 8 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{Packages only need references to children that they work with directly, all other descendants are taken care of automatically.} \tn 
% Row Count 11 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{A production package (SPA) is just the entry point to the top level package (all descendant code is present, but technically obscured/private).} \tn 
% Row Count 14 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Using Javascript Packages}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{For thinking about javascipt packages in .Net terms: \newline % Row Count 2 (+ 2)
Library: \newline % Row Count 3 (+ 1)
package.json defines a main file which is the entry point to the package. This file (generally index.js) should contain exports for all public classes within the package. This makes a package equivalent to a .Net dll, where all of the public classes are listed in index.js. \newline % Row Count 9 (+ 6)
Class / Service: \newline % Row Count 10 (+ 1)
Export from a single js file. \newline % Row Count 11 (+ 1)
Sharing code: \newline % Row Count 12 (+ 1)
Import statements are like "using" statements but they aren't optional because javascript has no concept of automatic sharing within namespaces. \newline % Row Count 15 (+ 3)
index.js example: \newline % Row Count 16 (+ 1)
`import Class1 from './lib/class1.js';` \newline % Row Count 17 (+ 1)
`import Service1 from './lib/service1.js';` \newline % Row Count 18 (+ 1)
`export \{Class1, Service1\};` \newline % Row Count 19 (+ 1)
class1.js example: \newline % Row Count 20 (+ 1)
`import Service2 from './service2.js';` \newline % Row Count 21 (+ 1)
`export default function thething\{ Service2.log('oh yeah');\}` \newline % Row Count 23 (+ 2)
{\bf{ Top Level Package:}} \newline % Row Count 24 (+ 1)
When loading a package into a browser, because ES6 syntax is not yet supported, systemjs has a global with an import method which returns a promise with the resulting module. {\bf{In production this is not required because Systemjs will compile the package into a single js file which can be loaded using a script tag.}} \newline % Row Count 31 (+ 7)
} \tn 
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Using Javascript Packages (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{Example: \newline % Row Count 1 (+ 1)
`var lodash = null;` \newline % Row Count 2 (+ 1)
\seqsplit{`System.import('lodash').then(`} \newline % Row Count 3 (+ 1)
`  function(result)\{ lodash = result;\}` \newline % Row Count 4 (+ 1)
`);`% Row Count 5 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{More complex info on modules and syntax here: \seqsplit{http://www.2ality.com/2014/09/es6-modules-final.html}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Promises}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{Promises are a simple way of performing async code in javascript. They are included natively in most browsers, and easily polyfilled  in non-compliant browsers. Complex promise libraries should not be used as polyfills for the same reason it is dangerous to extend other native JS browser objects.% Row Count 6 (+ 6)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Promises (Extremely Basic) Usage}}  \tn
% Row 0
\SetRowColor{LightBackground}
Create a promise from a value & `var promise = \seqsplit{Promise.resolve(value)`} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
Do something when a promise resolves or rejects & \seqsplit{`promise.then(function} fulfilled(value)\{\}, function rejected(err)\{\})` \tn 
% Row Count 6 (+ 4)
% Row 2
\SetRowColor{LightBackground}
Do something when a promise rejects & \seqsplit{`promise.catch(function} rejected(err)\{\})` \tn 
% Row Count 9 (+ 3)
% Row 3
\SetRowColor{white}
Resolve an array of promises (can also contain raw values) & `Promise.all({[}value1,promise1{]}).then(function fulfilled(arg)\{/*arg{[}0{]}=value1 arg{[}1{]}=result of promise1*/\})` \tn 
% Row Count 15 (+ 6)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{Basic Rules inside a "then": \newline 1. If a promise is returned, the returned promise will be resolved and used for the next "then". \newline 2. If a value is returned, it will be passed to the next then. \newline 3. If an error is thrown, or promise rejected, the chain will skip to the next "then" or "catch" that handles the error. \newline 4. Promise.all rejects if any promises reject. \newline  \newline Better documentation here: \seqsplit{https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Promise}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Semver}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{Semver is a versioning scheme used across most package management systems. It is used within a package to specify when patches, minor features, and breaking changes occur. It is used by package managers to specify which versions of a package are considered compatible, and what the allowed automatic-upgrade path should be.% Row Count 7 (+ 7)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Package managers and semver}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{Package managers install the latest version of a dependency, that meets all of the requirements of other dependencies. \newline % Row Count 3 (+ 3)
Example: \newline % Row Count 4 (+ 1)
Package relies on lodash@1 (any release of lodash major version 1) \newline % Row Count 6 (+ 2)
The latest release of lodash is 1.6.8. \newline % Row Count 7 (+ 1)
Package contains 1.6.8 as installed dependency. \newline % Row Count 8 (+ 1)
Package adds a dependency "foo" that requires lodash@1.5.2  (this is hypothetical, 3rd party sources generally lock on major version only) \newline % Row Count 11 (+ 3)
Package now contains lodash@1.5.2 which meets requirements of both. \newline % Row Count 13 (+ 2)
There are also generally devices for locking versions and solving conflicts built into every package manager, but use cases are for extreme legacy support and generally semver results in smooth upgrade paths making them unnecessary.% Row Count 18 (+ 5)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{10.5347 cm} x{6.7353 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Semver (2.0) Syntax Inside A Package}}  \tn
% Row 0
\SetRowColor{LightBackground}
Version format *1 & {[}v{]}{[}Major{]}.{[}Minor{]}.{[}Patch{]} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
When you change something and tests break or you don't believe in testing but you still pretend to be collaborative & npm version major \tn 
% Row Count 7 (+ 5)
% Row 2
\SetRowColor{LightBackground}
When you add something and no tests break & npm version minor \tn 
% Row Count 9 (+ 2)
% Row 3
\SetRowColor{white}
When you fix a bug & npm version patch \tn 
% Row Count 11 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{*1 The leading v on versions is ignored, but some providers aren't smart about how that gets handled so it should always be included on git tags to remain standard in our code. \newline  \newline Semver has many more features/options for complex flows that we probably shouldn't waste our time on.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{7.7715 cm} x{9.4985 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Semver (2.0) Syntax Consuming A Package}}  \tn
% Row 0
\SetRowColor{LightBackground}
npm package format & `"dependencies": \{ "packageName": "version" \}` \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
jspm package format & `"dependencies": \{ "packageName": \seqsplit{"wheretofindpackage@version"} \}` \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
npm installed from git format *1 & `"dependencies": \{ "packageName": \seqsplit{"git+repourlwithreadonlycredentials\#version(with} leading v)" \}` \tn 
% Row Count 11 (+ 5)
% Row 3
\SetRowColor{white}
\textasciitilde{} prefix & Allows patch-level changes if a minor version is specified on the comparator. Allows minor-level changes if not. \tn 
% Row Count 17 (+ 6)
% Row 4
\SetRowColor{LightBackground}
\textasciicircum{} prefix & Allows changes that do not modify the left-most non-zero digit \tn 
% Row Count 20 (+ 3)
% Row 5
\SetRowColor{white}
Partial Version & Includes all versions that match the present parts. ex: 1 = 1.1.0 or 1.5.4 but not 2.anything.anything \tn 
% Row Count 25 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{*1 npm packages installed directly from git use git tags directly and don't pay attention to semver, so it is best to just force move a major version tag until switching to the next major version. Npm git provider should only be used for internal dev tools so versioning is not overly important.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}



\end{document}