--- a/langs.sty	Tue Sep 23 01:06:00 2014 +0100
+++ b/langs.sty	Tue Sep 23 01:49:53 2014 +0100
@@ -8,10 +8,28 @@
 \definecolor{codepurple}{rgb}{0.5,0,0.35}      % keywords
 \definecolor{codedocblue}{rgb}{0.25,0.35,0.75} % doc
 \definecolor{codeblue}{rgb}{0.25,0.35,0.75}    % types
+\definecolor{darkgray}{rgb}{.4,.4,.4}
 
 \BeforeBeginEnvironment{lstlisting}{\par\noindent\begin{minipage}{\linewidth}}
 \AfterEndEnvironment{lstlisting}{\end{minipage}\par}
 
+\lstdefinelanguage{JavaScript}{
+  keywords={break,case,catch,continue,debugger,default,% 
+    delete,do,else,false,finally,for,function,if,in,instanceof,% 
+    new,null,return,switch,this,throw,true,try,typeof,var,void,while,with},
+  morecomment=[l]{//},
+  morecomment=[s]{/*}{*/},
+  morestring=[b]',
+  morestring=[b]",
+  ndkeywords={class,export,boolean,throw,implements,import,this},
+  keywordstyle=\color{codepurple}\bfseries,
+  ndkeywordstyle=\color{darkgray}\bfseries,
+  identifierstyle=\color{black},
+  commentstyle=\color{codegreen}\ttfamily,
+  stringstyle=\color{codegreen}\ttfamily,
+  sensitive=true
+}
+
 \lstdefinelanguage{Scala}{
   morekeywords={abstract,case,catch,class,def,%
     do,else,extends,false,final,finally,%

Binary file slides/slides01.pdf has changed

--- a/slides/slides01.tex	Tue Sep 23 01:06:00 2014 +0100
+++ b/slides/slides01.tex	Tue Sep 23 01:49:53 2014 +0100
@@ -648,86 +648,21 @@
 \end{frame}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   
 
-
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 \begin{frame}[c]
-\frametitle{Why Scala?}
-
-\begin{textblock}{6}(1,3)
-\begin{tabular}{l}
-\mbox{}\hspace{-1mm}\includegraphics[scale=0.36]{pics/twitter.png}\\[-1mm]
-\includegraphics[scale=0.30]{pics/linked.png}\\
-\includegraphics[scale=0.30]{pics/guardian.jpg}\\[-3mm]
-\mbox{}\hspace{-2mm}\includegraphics[scale=0.38]{pics/morgan.png}\\[-3mm]
-\includegraphics[scale=0.30]{pics/suisse.png}\\
-\includegraphics[scale=0.20]{pics/edf.png}\\[-1mm]
-\includegraphics[scale=0.08]{pics/novell.png}\\[-1mm]
-\includegraphics[scale=0.30]{pics/foursquare.png}\\
-\includegraphics[scale=0.30]{pics/hsbc.png}\\
-{\large\bf ...}
-\end{tabular}
-\end{textblock}
- 
-\only<2->{  
-\begin{textblock}{6}(6,3)
-\includegraphics[scale=0.35]{pics/jobgraph.png}\\
-\end{textblock}}  
-  
-\only<3->{  
-\begin{textblock}{6}(7.3,9.2)
-\begin{tabular}{l}
-\footnotesize 2013: 1$\%$\\[-2mm]
-\footnotesize 2014: 3$\%$\\[-2mm]
-\footnotesize 2015: 9$\%$\\[-2mm]
-\footnotesize 2016: 27$\%$\\[-2mm]
-\footnotesize 2017: 81$\%$\\[-2mm]
-\footnotesize 2018: 243$\%$ \raisebox{-1mm}{\includegraphics[scale=0.02]{pics/smiley.jpg}}
-\end{tabular}
-\end{textblock}} 
-  
-\only<3->{  
-\begin{textblock}{6}(6,9.5)
-\footnotesize 5 yrs $\begin{cases}\mbox{}\\[1.4cm]\end{cases}$
-\end{textblock}}
-
-\only<4->{  
-\begin{textblock}{11}(5,14.1)
-\textcolor{gray}{
-\footnotesize {\bf in London today:} 1 Scala job for every 30 Java jobs;\\[-2mm]
-Scala programmers seem to get up to 20\% better salary}
-\end{textblock}}
-
-
-\only<5->{
-\begin{textblock}{1}(3,6)
-\begin{bubble}[8.5cm]
-\normalsize
-Scala is a functional and object-oriented programming
-language; compiles to the JVM; does not need null-pointer
-exceptions; a course on Coursera\\
-\mbox{}\hfill\url{http://www.scala-lang.org}
-\end{bubble}
-\end{textblock}}
-
-  
-\end{frame}
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   
-
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-\begin{frame}[c]
-\frametitle{Scala + Play}
+\frametitle{JavaScript + Node.js}
 
 A simple response from the server:
 
 \small
-\lstinputlisting{../progs/app0.scala}
-\medskip
+\lstinputlisting[language=JavaScript]{../progs/ap0.js}
+\medskip\pause
 
 \small
 alternative response:\smallskip\\
 
 
-\lstinline{Ok("<H1>Hello world!</H1>").as(HTML)}
+\lstinline[language=JavaScript]{response.write('<H1>Hello World</H1>');}
 
 \end{frame}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   
@@ -735,21 +670,17 @@
 
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-\mode<presentation>{
 \begin{frame}[c]
 
-{\lstset{language=Scala}\fontsize{8}{10}\selectfont
-\texttt{\lstinputlisting{../progs/app1.scala}}}
+\footnotesize
+\lstinputlisting[language=JavaScript]{../progs/ap1.js}
 
-  
-\end{frame}}
+\end{frame}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-\mode<presentation>{
 \begin{frame}[c]
-\frametitle{\begin{tabular}{c}Cookies\end{tabular}}
-
+\frametitle{Cookies}
 
 \begin{textblock}{1}(1.5,5)
 \begin{tabular}{c}
@@ -797,22 +728,25 @@
 
 \only<5>{
 \begin{textblock}{11}(1,3)
-\begin{tikzpicture}
-\draw (0,0) node[inner sep=2mm,fill=cream, ultra thick, draw=red, rounded corners=2mm] 
-{\normalsize\color{darkgray}
-\begin{minipage}{10cm}\raggedright\small
-{\bf EU Privacy Directive about Cookies:}\smallskip\\
-``In May 2011, a European Union law was passed stating that websites that leave non-essential cookies on visitors' devices have to alert the visitor and get acceptance from them. This law applies to both individuals and businesses based in the EU regardless of the nationality of their website's visitors or the location of their web host. It is not enough to simply update a website's terms and conditions or privacy policy. The deadline to comply with the new EU cookie law was 26th May 2012 and failure to do so could mean a fine of up to \pounds{}500,000.''
-\hfill\small\textcolor{gray}{$\rightarrow$BBC News}, \textcolor{blue}{\url{goo.gl/RI4qhh}}
-\end{minipage}};
-\end{tikzpicture}
+\begin{bubble}[10cm]\small
+{\bf EU Privacy Directive about Cookies:}\smallskip\\ ``In May 2011, a
+European Union law was passed stating that websites that leave
+non-essential cookies on visitors' devices have to alert the visitor
+and get acceptance from them. This law applies to both individuals and
+businesses based in the EU regardless of the nationality of their
+website's visitors or the location of their web host. It is not enough
+to simply update a website's terms and conditions or privacy
+policy. The deadline to comply with the new EU cookie law was 26th May
+2012 and failure to do so could mean a fine of up to
+\pounds{500,000}.''  \hfill\small\textcolor{gray}{$\rightarrow$BBC
+  News}, \textcolor{blue}{\url{goo.gl/RI4qhh}}
+\end{bubble}
 \end{textblock}}
   
-\end{frame}}
+\end{frame}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-\mode<presentation>{
 \begin{frame}[t]
 \begin{itemize}
 \item While cookies are per web-page, this can be easily circumvented.
@@ -888,49 +822,39 @@
   \end{tikzpicture}
 \end{textblock}
 
-
-
-\end{frame}}
+\end{frame}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-\mode<presentation>{
 \begin{frame}[c]
-\frametitle{\begin{tabular}{c}My First Webapp\end{tabular}}
+\frametitle{My First Real Webapp}
 
 {\bf GET request:}\smallskip
 \begin{enumerate}
 \item read the cookie from client
-\item if none is present, set \texttt{visits} to \textcolor{blue}{$0$}
-\item if cookie is present, extract \texttt{visits} counter
-\item if \texttt{visits} is greater or equal \textcolor{blue}{$10$}, \\
+\item if none is present, set \texttt{counter} to \textcolor{blue}{zero}
+\item if cookie is present, extract \texttt{counter}
+\item if \texttt{counter} is greater or equal \textcolor{blue}{$5$}, \\
 print a valued customer message\\
 otherwise just a normal message
-\item increase \texttt{visits} by \textcolor{blue}{$1$} and store new cookie with client
+\item increase \texttt{counter} by \textcolor{blue}{$1$} and store new cookie with client
 \end{enumerate}
 
-  
-\end{frame}}
+\end{frame}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   
 
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-\mode<presentation>{
 \begin{frame}[c]
 \mbox{}\\[-9mm]
 
-{\lstset{language=Scala}\fontsize{8}{10}\selectfont
-\texttt{\lstinputlisting{../progs/app2.scala}}}
+\footnotesize
+\lstinputlisting[language=JavaScript]{../progs/ap2.js}
 
-\footnotesize
-\begin{itemize}
-\item cookie value encoded as hash
-\end{itemize}
-\end{frame}}
+\end{frame}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-\mode<presentation>{
 \begin{frame}[c]
 
 \begin{center}
@@ -941,29 +865,23 @@
 \item data integrity needs to be ensured
 \end{itemize}
 
-\end{frame}}
+\end{frame}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%     
 
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-\mode<presentation>{
 \begin{frame}[c]
 \mbox{}\\[-7mm]
 
-{\lstset{language=Scala}\fontsize{8}{10}\selectfont
-\texttt{\lstinputlisting{../progs/app3.scala}}}
+\footnotesize
+\lstinputlisting[language=JavaScript]{../progs/ap3.js}
 
-\small
-\begin{itemize}
-\item the counter/hash pair is intended to prevent tampering
-\end{itemize}  
-\end{frame}}
+\end{frame}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-\mode<presentation>{
 \begin{frame}[c]
-\frametitle{\begin{tabular}{c}SHA-1\end{tabular}}
+\frametitle{SHA-1}
   
 \begin{itemize}
 \item SHA-1 is a cryptographic hash function\\
@@ -973,28 +891,35 @@
 \item but dictionary attacks are much more effective for extracting passwords (later)
 \end{itemize}  
   
-\end{frame}}
+\end{frame}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   
 
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-\mode<presentation>{
 \begin{frame}[c]
-\mbox{}\\[-9mm]
+\mbox{}\\[-2mm]
 
-{\lstset{language=Scala}\fontsize{8}{10}\selectfont
-\texttt{\lstinputlisting{../progs/app4.scala}}}
+{\footnotesize\lstinputlisting[language=JavaScript]{../progs/ap4.js}}
 
-\begin{textblock}{1}(9,1)
+\begin{textblock}{1}(9,0)
   \begin{tikzpicture}[scale=1.3]
   \draw[white] (0,0) node (X) {};
-  \draw[white] (3,0) node (Y) {};
+  \draw[white] (3.5,0) node (Y) {};
   \draw[red, <-, line width = 2mm] (X) -- (Y);
   \node [inner sep=5pt,label=above:\textcolor{black}{\small should be random}] at ($ (X)!.5!(Y) $) {};
   \end{tikzpicture}
 \end{textblock}
 
-\begin{textblock}{1}(6.6,5.1)
+\begin{textblock}{1}(12.6,6.5)
+  \begin{tikzpicture}[scale=1.3]
+  \draw[white] (0,0) node (X) {};
+  \draw[white] (-1,-1) node (Y) {};
+  \draw[red, <-, line width = 2mm] (X) -- (Y);
+  \node [inner sep=5pt,label=above:{}] at ($ (X)!.5!(Y) $) {};
+  \end{tikzpicture}
+\end{textblock}
+
+\begin{textblock}{1}(9.9,11.5)
   \begin{tikzpicture}[scale=1.3]
   \draw[white] (0,0) node (X) {};
   \draw[white] (1,-1) node (Y) {};
@@ -1003,7 +928,7 @@
   \end{tikzpicture}
 \end{textblock}
 
-\end{frame}}
+\end{frame}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   
 
 
@@ -1105,7 +1030,6 @@
 
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-\mode<presentation>{
 \begin{frame}[c]
 \frametitle{\begin{tabular}{c}Brute Forcing Passwords\end{tabular}}
 
@@ -1140,17 +1064,14 @@
 \end{tabular}
 \end{textblock}}
 
-
-
-\end{frame}}
+\end{frame}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-\mode<presentation>{
 \begin{frame}[c]
-\frametitle{\begin{tabular}{c}Passwords\end{tabular}}
+\frametitle{Passwords}
 
-How to recover from a breakin?\pause\medskip
+How to recover from a break in?\pause\medskip
 
 \begin{itemize}
 \item Do not send passwords in plain text.
@@ -1158,13 +1079,12 @@
 \item QQ (Chinese Skype) authenticates you via contacts.
 \end{itemize}
 
-\end{frame}}
+\end{frame}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-\mode<presentation>{
 \begin{frame}[c]
-\frametitle{\begin{tabular}{c}This Course\end{tabular}}
+\frametitle{This Course}
 
 \begin{itemize}
 \item break-ins (buffer overflows)
@@ -1179,7 +1099,7 @@
 \item zero-knowledge proofs
 \end{itemize}
 
-\end{frame}}
+\end{frame}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   
 
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
@@ -1191,7 +1111,7 @@
 
 \begin{itemize}
 \item Cookies
-\item Javascript
+\item JavaScript
 \item LocalStorage/SessionStorage/GlobalStorage
 \item Flash, Java or other plugins
 \item Your IP address or user agent string
@@ -1199,8 +1119,8 @@
 \mbox{}\hfill $\rightarrow$ \textcolor{blue}{\url{https://panopticlick.eff.org/}}
 \end{itemize}
 
-Even when you disabled cookies entirely, have Javascript turned off and use a VPN service.\\\pause
-And numerous sites already use it.
+Even when you disabled cookies entirely, have JavaScript turned off and use a VPN service.\\\pause
+And numerous sites use it.
 
 \end{frame}}
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%