\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{nikey\_es (Jorge Castro)} \pdfinfo{ /Title (javascript-code-style.pdf) /Creator (Cheatography) /Author (nikey\_es (Jorge Castro)) /Subject (Javascript Code Style 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}{FF6600} \definecolor{LightBackground}{HTML}{FFF5EF} \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 Code Style Cheat Sheet}}}} \\ \normalsize{by \textcolor{DarkBackground}{nikey\_es (Jorge Castro)} via \textcolor{DarkBackground}{\uline{cheatography.com/18712/cs/4189/}}} \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}nikey\_es (Jorge Castro) \\ \uline{cheatography.com/jorge-castro} \\ \uline{\seqsplit{www}.jcnistal.es} \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 13th May, 2016.\\ Page {\thepage} of \pageref{LastPage}. \end{tabulary} \vfill \columnbreak \begin{tabulary}{5.8cm}{L} \SetRowColor{FootBackground} \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}} \\ \SetRowColor{white} \vspace{-5pt} %\includegraphics[width=48px,height=48px]{dave.jpeg} Measure your website readability!\\ www.readability-score.com \end{tabulary} \end{multicols}} \begin{document} \raggedright \raggedcolumns % Set font size to small. Switch to any value % from this page to resize cheat sheet text: % www.emerson.emory.edu/services/latex/latex_169.html \footnotesize % Small font. \begin{multicols*}{3} \begin{tabularx}{5.377cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{References}} \tn \SetRowColor{white} \mymulticolumn{1}{x{5.377cm}}{\seqsplit{http://javascript.crockford.com/code.html} \newline % Row Count 1 (+ 1) \seqsplit{https://google-styleguide}.googlecode.com/svn/trunk/javascriptguide.xml \newline % Row Count 3 (+ 2) \seqsplit{http://contribute.jquery.org/style-guide/js/}% 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}{Normas generales}} \tn \SetRowColor{white} \mymulticolumn{1}{x{5.377cm}}{• Todo el javascript debe ir en ficheros .js. si hacemos javascript inline en el html perdemos la oportunidad de reutilizarlo, optimizarlo, comprimirlo y cachearlo. \newline % Row Count 4 (+ 4) • El tag \textless{}script\textgreater{} debe ir lo más abajo posible de la página para reducir el efecto de página en blanco mientras se parsea el javascript. \newline % Row Count 7 (+ 3) • Poner un enter entre diferentes bloques lógicos del código: \newline % Row Count 9 (+ 2) \seqsplit{`AsignarValoresPorDefecto();`} \newline % Row Count 10 (+ 1) `CalcularValores();` \newline % Row Count 11 (+ 1) `ModificarDOM();` \newline % Row Count 12 (+ 1) `EnviarEventosAlDOM();` \newline % Row Count 13 (+ 1) `CrearObjetos();` \newline % Row Count 14 (+ 1) • Si no sabes que regla o que nomenclatura seguir guíate por como está escrito el código y sé coherente con lo que ya existe. \newline % Row Count 17 (+ 3) • Tamaño máximo de las líneas 80 caracteres. Sí, en los últimos años las pantallas se han vuelto mucho más grandes, pero tu cerebro no. Usa el espacio adicional para la pantalla dividida, para la ayuda, etc. \newline % Row Count 22 (+ 5) • Los bloques if/else/for/while/try siempre llevarán llaves \newline % Row Count 24 (+ 2) • Usaremos JSHint como herramienta de validación de análisis código. \newline % Row Count 26 (+ 2) • Usaremos JSCS como herramienta de validación del estilo del código.% Row Count 28 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} % That's all folks \end{multicols*} \end{document}