\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{ProLoser}
\pdfinfo{
  /Title (bacon-js.pdf)
  /Creator (Cheatography)
  /Author (ProLoser)
  /Subject (Bacon.js 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}{FFBB00}
\definecolor{LightBackground}{HTML}{FFFAEF}
\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{Bacon.js Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{ProLoser} via \textcolor{DarkBackground}{\uline{cheatography.com/1600/cs/1103/}}}
\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}ProLoser \\
  \uline{cheatography.com/proloser} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 11th June, 2013.\\
   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}{Observable Interface}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.map(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}maps values using given function, returning a new EventStream. Instead of a function, you can also provide a constant value. Further, you can use a property extractor string like ".keyCode". So, if f is a string starting with a dot, the elements will be mapped to the corresponding field/function in the event value. For instance map(".keyCode") will pluck the keyCode field from the input values. If keyCode was a function, the result stream would contain the values returned by the function. The Function Construction rules below apply here.} \tn 
% Row Count 13 (+ 13)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{stream.map(property)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}maps the stream events to the current value of the given property. This is equivalent to {\emph{property.sampledBy(stream)}}} \tn 
% Row Count 17 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.mapError(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}maps errors using given function. More specifically, feeds the "error" field of the error event to the function and produces a "Next" event based on the return value. Function Construction rules apply. You can omit the argument to produce a Next event with {\emph{undefined}} value.} \tn 
% Row Count 24 (+ 7)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.mapEnd(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Adds an extra Next event just before End. The value is created by calling the given function when the source stream ends. Instead of a function, a static value can be used. You can omit the argument to produce a Next event with {\emph{undefined}} value.} \tn 
% Row Count 31 (+ 7)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Observable Interface (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.filter(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}filters values using given predicate function. Instead of a function, you can use a constant value (true/false) or a property extractor string (like ".isValuable") instead. Just like with {\emph{map}}, indeed.} \tn 
% Row Count 6 (+ 6)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.filter(property)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}filters values based on the value of a property. Event will be included in output iff the property holds {\emph{true}} at the time of the event.} \tn 
% Row Count 10 (+ 4)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.takeWhile(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}takes while given predicate function holds true} \tn 
% Row Count 12 (+ 2)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.take(n)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}takes at most n elements from the stream. Equals to Bacon.never() if n \textless{}= 0.} \tn 
% Row Count 15 (+ 3)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.takeUntil(stream2)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}takes elements from source until a Next event appears in the other stream. If other stream ends without value, it is ignored} \tn 
% Row Count 19 (+ 4)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.skip(n)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}skips the first n elements from the stream} \tn 
% Row Count 21 (+ 2)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.delay(delay)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}delays the stream/property by given amount of milliseconds. Does not delay the initial value of a Property.} \tn 
% Row Count 25 (+ 4)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.throttle(delay)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}throttles stream/property by given amount of milliseconds. Events are emitted with the minimum interval of {\emph{delay}}. The implementation is based on stream.bufferWithTime. Does not affect emitting the initial value of a Property.} \tn 
% Row Count 31 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Observable Interface (cont)}}  \tn
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.debounce(delay)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}throttles stream/property by given amount of milliseconds, but so that event is only emitted after the given "quiet period". Does not affect emitting the initial value of a Property. The difference of {\emph{throttle}} and {\emph{debounce}} is the same as it is in the same methods in jQuery.} \tn 
% Row Count 7 (+ 7)
% Row 13
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.debounceImmediate(delay)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}passes the first event in the stream through, but after that, only passes events after a given number of milliseconds have passed since previous output.} \tn 
% Row Count 12 (+ 5)
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.doAction(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}returns a stream/property where the function f is executed for each value, before dispatching to subscribers. This is useful for debugging, but also for stuff like calling the preventDefault() method for events. In fact, you can also use a property-extractor string instead of a function, as in ".preventDefault".} \tn 
% Row Count 20 (+ 8)
% Row 15
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.not()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}returns a stream/property that inverts boolean values} \tn 
% Row Count 23 (+ 3)
% Row 16
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.flatMap(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}for each element in the source stream, spawn a new stream using the function {\emph{f}}. Collect events from each of the spawned streams into the result {\emph{EventStream}}. This is very similar to selectMany in RxJs. Note that instead of a function, you can provide a stream/property too. Also, the return value of function {\emph{f}} can be either an Observable (stream/property) or a constant value. The result of {\emph{flatMap}} is always an {\emph{EventStream}}.  {\emph{stream.flatMap()}} can be used conveniently with {\emph{Bacon.once()}} and {\emph{Bacon.never()}} for converting and filtering at the same time, including only some of the results.} \tn 
% Row Count 37 (+ 14)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Observable Interface (cont)}}  \tn
% Row 17
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.flatMapLatest(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}like flatMap, but instead of including events from all spawned streams, only includes them from the latest spawned stream. You can think this as switching from stream to stream. The old name for this method is {\emph{switch}}. Note that instead of a function, you can provide a stream/property too.} \tn 
% Row Count 8 (+ 8)
% Row 18
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.flatMapFirst(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}like flatMap, but doesn't spawns a new stream only if the previously spawned stream has ended.} \tn 
% Row Count 12 (+ 4)
% Row 19
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.scan(seed, f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}scans stream/property with given seed value and accumulator function, resulting to a Property. For example, you might use zero as seed and a "plus" function as the accumulator to create an "integral" property. Instead of a function, you can also supply a method name such as ".concat", in which case this method is called on the accumulator value and the new stream value is used as argument.} \tn 
% Row Count 22 (+ 10)
% Row 20
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.fold(seed, f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}is like {\emph{scan}} but only emits the final value, i.e. the value just before the observable ends. Returns a Property.} \tn 
% Row Count 26 (+ 4)
% Row 21
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.reduce(seed,f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}synonym for {\emph{fold}}.} \tn 
% Row Count 28 (+ 2)
% Row 22
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.diff(start, f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}returns a Property that represents the result of a comparison between the previous and current value of the Observable. For the initial value of the Observable, the previous value will be the given start.} \tn 
% Row Count 34 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Observable Interface (cont)}}  \tn
% Row 23
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.zip(other, f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}return an EventStream with elements pair-wise lined up with events from this and the other stream. A zipped stream will publish only when it has a value from each stream and will only produce values up to when any single stream ends.  Be careful not to have too much "drift" between streams. If one stream produces many more values than some other excessive buffering will occur inside the zipped observable.} \tn 
% Row Count 10 (+ 10)
% Row 24
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.slidingWindow(max{[}, min{]})}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}returns a Property that represents a "sliding window" into the history of the values of the Observable. The result Property will have a value that is an array containing the last {\emph{n}} values of the original observable, where {\emph{n}} is at most the value of the {\emph{max}} argument, and at least the value of the {\emph{min}} argument. If the {\emph{min}} argument is omitted, there's no lower limit of values.} \tn 
% Row Count 20 (+ 10)
% Row 25
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.log()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}logs each value of the Observable to the console. It optionally takes arguments to pass to console.log() alongside each value. To assist with chaining, it returns the original Observable. Note that as a side-effect, the observable will have a constant listener and will not be garbage-collected. So, use this for debugging only and remove from production code.} \tn 
% Row Count 29 (+ 9)
% Row 26
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.combine(property2, f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}combines the latest values of the two streams or properties using a two-arg function. Similarly to {\emph{scan}}, you can use a method name instead, so you could do {\emph{a.combine(b, ".concat")}} for two properties with array value. The result is a Property.} \tn 
% Row Count 36 (+ 7)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Observable Interface (cont)}}  \tn
% Row 27
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.withStateMachine(initState, f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}lets you run a state machine on an observable. Give it an initial state object and a state transformation function that processes each incoming event and returns and array containing the next state and an array of output events.} \tn 
% Row Count 6 (+ 6)
% Row 28
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{observable.decode(mapping)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}decodes input using the given mapping. Is a bit like a switch-case or the decode function in Oracle SQL. For example, the following would map the value 1 into the the string "mike" and the value 2 into the value of the {\emph{who}} property.} \tn 
% Row Count 12 (+ 6)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Both EventStream and Property share the Observable interface, and hence share a lot of methods. Common methods are listed below. \newline https://github.com/raimohanska/bacon.js\#common-methods-in-eventstreams-and-properties}  \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}{EventStream}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Bacon.EventStream}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}a stream of events} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{stream.onValue(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}subscribes a given handler function to event stream. Function will be called for each new value in the stream. This is the simplest way to assign a side-effect to a stream. The difference to the subscribe method is that the actual stream values are received, instead of Event objects. Function Construction rules below apply here.} \tn 
% Row Count 11 (+ 9)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{stream.onValues(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}like onValue, but splits the value (assuming its an array) as function arguments to f} \tn 
% Row Count 14 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{stream.onEnd(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}subscribes a callback to stream end. The function will be called when the stream ends.} \tn 
% Row Count 17 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{stream.subscribe(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}subscribes given handler function to event stream. Function will receive Event objects (see below). The subscribe() call returns a unsubscribe function that you can call to unsubscribe. You can also unsubscribe by returning Bacon.noMore from the handler function as a reply to an Event.} \tn 
% Row Count 25 (+ 8)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{stream.skipDuplicates({[}isEqual{]})}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}drops consecutive equal elements. So, from {[}1, 2, 2, 1{]} you'd get {[}1, 2, 1{]}. Uses the === operator for equality checking by default. If the isEqual argument is supplied, checks by calling isEqual(oldValue, newValue). For instance, to do a deep comparison,you can use the isEqual function from underscore.js like \seqsplit{stream.skipDuplicates(\_.isEqual).}} \tn 
% Row Count 34 (+ 9)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{EventStream (cont)}}  \tn
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{stream1.concat(stream2)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}concatenates two streams into one stream so that it will deliver events from stream1 until it ends and then deliver events from stream2. This means too that events from stream2, occurring before the end of stream1 will not be included in the result stream.} \tn 
% Row Count 7 (+ 7)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{stream.merge(stream2)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}merges two streams into one stream that delivers events from both} \tn 
% Row Count 10 (+ 3)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{stream.bufferWithTime(delay)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}buffers stream events with given delay. The buffer is flushed at most once in the given delay. So, if your input contains {[}1,2,3,4,5,6,7{]}, then you might get two events containing {[}1,2,3,4{]} and {[}5,6,7{]} respectively, given that the flush occurs between numbers 4 and 5.} \tn 
% Row Count 17 (+ 7)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{stream.bufferWithTime(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}works with a given "defer-function" instead of a delay. Here's a simple example, which is equivalent to \seqsplit{stream.bufferWithTime(10):}  \seqsplit{stream.bufferWithTime(function(f)} \{ setTimeout(f, 10) \})} \tn 
% Row Count 22 (+ 5)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{stream.bufferWithCount(count)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}buffers stream events with given count. The buffer is flushed when it contains the given number of elements. So, if you buffer a stream of {[}1, 2, 3, 4, 5{]} with count 2, you'll get output events with values {[}1, 2{]}, {[}3, 4{]} and {[}5{]}.} \tn 
% Row Count 28 (+ 6)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{stream.bufferWithTimeOrCount(delay, count)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}buffers stream events and flushes when either the buffer contains the given number elements or the given amount of milliseconds has passed since last buffered event.} \tn 
% Row Count 33 (+ 5)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{EventStream (cont)}}  \tn
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{stream.toProperty()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}creates a Property based on the EventStream. Without arguments, you'll get a Property without an initial value. The Property will get its first actual value from the stream, and after that it'll always have a current value.} \tn 
% Row Count 6 (+ 6)
% Row 13
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{stream.toProperty(initialValue)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}creates a Property based on the EventStream with the given initial value that will be used as the current value until the first value comes from the stream.} \tn 
% Row Count 11 (+ 5)
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{stream1.awaiting(stream2)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}creates a Property that indicates whether stream1 is awaiting stream2, i.e. has produced a value after the latest value from stream2. This is handy for keeping track whether we are currently awaiting an AJAX response:  var showAjaxIndicator = \seqsplit{ajaxRequest.awaiting(ajaxResponse)}} \tn 
% Row Count 18 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/raimohanska/bacon.js?utm\_source=javascriptweekly\&utm\_medium=email\#eventstream}}  \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}{Bus}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{new Bacon.Bus()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}returns a new Bus.} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{bus.push(x)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}pushes the given value to the stream.} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{bus.end()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}ends the stream. Sends an End event to all subscribers. After this call, there'll be no more events to the subscribers. Also, the Bus push and plug methods have no effect.} \tn 
% Row Count 9 (+ 5)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{bus.error(e)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}sends an Error with given message to all subscribers} \tn 
% Row Count 12 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{bus.plug(stream)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}plugs the given stream to the Bus. All events from the given stream will be delivered to the subscribers of the Bus. Returns a function that can be used to unplug the same stream.  The plug method practically allows you to merge in other streams after the creation of the Bus. I've found Bus quite useful as an event broadcast mechanism in the Worzone game, for instance.} \tn 
% Row Count 21 (+ 9)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Bus is an EventStream that allows you to push values into the stream. It also allows pluggin other streams into the Bus. The Bus practically merges all plugged-in streams and the values pushed using the push method. \newline  \newline https://github.com/raimohanska/bacon.js?utm\_source=javascriptweekly\&utm\_medium=email\#bus}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Property}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Bacon.Property}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}a reactive property. Has the concept of "current value". You can create a Property from an EventStream by using either toProperty or scan method. Note depending on how a Property is created, it may or may not have an initial value.} \tn 
% Row Count 6 (+ 6)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Bacon.constant(x)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}creates a constant property with value x.} \tn 
% Row Count 8 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{property.subscribe(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}subscribes a handler function to property. If there's a current value, an Initial event will be pushed immediately. Next event will be pushed on updates and an End event in case the source EventStream ends.} \tn 
% Row Count 14 (+ 6)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{property.onValue(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}similar to eventStream.onValue, except that also pushes the initial value of the property, in case there is one. See Function Construction rules below for different forms of calling this method.} \tn 
% Row Count 20 (+ 6)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{property.onValues(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}like onValue, but splits the value (assuming its an array) as function arguments to f} \tn 
% Row Count 23 (+ 3)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{property.onEnd(f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}subscribes a callback to stream end. The function will be called when the source stream of the property ends.} \tn 
% Row Count 27 (+ 4)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{property.assign(obj, method, {\emph{{[}param...{]}}})}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}calls the method of the given object with each value of this Property. You can optionally supply arguments which will be used as the first arguments of the method call. For instance, if you want to assign your Property to the "disabled" attribute of a JQuery object, you can do this:  \seqsplit{myProperty.assign(\$("\#my-button")}, "attr", "disabled") A simpler example would be to toggle the visibility of an element based on a Property:  \seqsplit{myProperty.assign(\$("\#my-button")}, "toggle") Note that the assign method is actually just a synonym for onValue and the function construction rules below apply to both.} \tn 
% Row Count 41 (+ 14)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Property (cont)}}  \tn
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{property.sample(interval)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}creates an EventStream by sampling the property value at given interval (in milliseconds)} \tn 
% Row Count 3 (+ 3)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{property.sampledBy(stream)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}creates an EventStream by sampling the property value at each event from the given stream. The result EventStream will contain the property value at each event in the source stream.} \tn 
% Row Count 8 (+ 5)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{property.sampledBy(property)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}creates a Property by sampling the property value at each event from the given property. The result Property will contain the property value at each event in the source property.} \tn 
% Row Count 13 (+ 5)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{property.sampledBy(streamOrProperty, f)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}samples the property on stream events. The result values will be formed using the given function f(propertyValue, samplerValue). You can use a method name (such as ".concat") instead of a function too.} \tn 
% Row Count 19 (+ 6)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{property.skipDuplicates({\emph{{[}isEqual{]}}})}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}drops consecutive equal elements. So, from {[}1, 2, 2, 1{]} you'd get {[}1, 2, 1{]}. Uses the === operator for equality checking by default. If the isEqual argument is supplied, checks by calling isEqual(oldValue, newValue). The old name for this method was "distinctUntilChanged".} \tn 
% Row Count 26 (+ 7)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{property.changes()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}returns an EventStream of property value changes. Returns exactly the same events as the property itself, except any Initial events. Note that property.changes() does NOT skip duplicate values, use .skipDuplicates() for that.} \tn 
% Row Count 32 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Property (cont)}}  \tn
% Row 13
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{property.and(other)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}combines properties with the \&\& operator.} \tn 
% Row Count 2 (+ 2)
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{property.or(other)}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}combines properties with the || operator.} \tn 
% Row Count 4 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/raimohanska/bacon.js?utm\_source=javascriptweekly\&utm\_medium=email\#property}}  \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}{Event Types}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Bacon.Event}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}has subclasses Next, End, Error and Initial} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Bacon.Next}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}next value in an EventStream or a Property. Call isNext() to distinguish a Next event from other events.} \tn 
% Row Count 6 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Bacon.End}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}an end-of-stream event of EventStream or Property. Call isEnd() to distinguish an End from other events.} \tn 
% Row Count 10 (+ 4)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Bacon.Error}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}an error event. Call isError() to distinguish these events in your subscriber, or use onError to react to error events only. errorEvent.error returns the associated error object (usually string).} \tn 
% Row Count 16 (+ 6)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Bacon.Initial}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}the initial (current) value of a Property. Call isInitial() to distinguish from other events. Only sent immediately after subscription to a Property.} \tn 
% Row Count 21 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/raimohanska/bacon.js?utm\_source=javascriptweekly\&utm\_medium=email\#event}}  \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}{Event Methods}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{event.value()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}returns the value associated with a Next or Initial event} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{event.hasValue()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}returns true for events of type Initial and Next} \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{event.isNext()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}true for Next events} \tn 
% Row Count 8 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{event.isInitial()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}true for Initial events} \tn 
% Row Count 10 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{event.isEnd()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}true for End events} \tn 
% Row Count 12 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{https://github.com/raimohanska/bacon.js?utm\_source=javascriptweekly\&utm\_medium=email\#event}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}