erlanglab · baransu · Apr 9, 2017 · Apr 9, 2017 · Apr 9, 2017 · Apr 9, 2017
diff --git a/_sass/libs/_vars.scss b/_sass/libs/_vars.scss
@@ -47,43 +47,43 @@
 		border2-bg:			rgba(144,144,144,0.5),
 
 		accent1: (
-			bg:				#21b2a6,
+			bg:				#1F79B7,
 			fg-bold:		#ffffff,
-			fg:				mix(#21b2a6, #ffffff, 25%),
-			fg-light:		mix(#21b2a6, #ffffff, 40%),
+			fg:				mix(#1F79B7, #ffffff, 25%),
+			fg-light:		mix(#1F79B7, #ffffff, 40%),
 			border:			rgba(0,0,0,0.125),
 			border-bg:		rgba(255,255,255,0.075),
 			border2:		rgba(0,0,0,0.25),
 			border2-bg:		rgba(255,255,255,0.2)
 		),
 
 		accent2: (
-			bg:				#00ffcc,
+			bg:				#c7deed,
 			fg-bold:		#ffffff,
-			fg:				mix(#00ffcc, #ffffff, 25%),
-			fg-light:		mix(#00ffcc, #ffffff, 40%),
+			fg:				mix(#c7deed, #ffffff, 25%),
+			fg-light:		mix(#c7deed, #ffffff, 40%),
 			border:			rgba(0,0,0,0.125),
 			border-bg:		rgba(255,255,255,0.075),
 			border2:		rgba(0,0,0,0.25),
 			border2-bg:		rgba(255,255,255,0.2)
 		),
 
 		accent3: (
-			bg:				#00f0ff,
+			bg:				#c7deed,
 			fg-bold:		#ffffff,
-			fg:				mix(#00f0ff, #ffffff, 25%),
-			fg-light:		mix(#00f0ff, #ffffff, 40%),
+			fg:				mix(#c7deed, #ffffff, 25%),
+			fg-light:		mix(#c7deed, #ffffff, 40%),
 			border:			rgba(0,0,0,0.125),
 			border-bg:		rgba(255,255,255,0.075),
 			border2:		rgba(0,0,0,0.25),
 			border2-bg:		rgba(255,255,255,0.2)
 		),
 
 		accent4: (
-			bg:				#76ddff,
+			bg:				#c7deed,
 			fg-bold:		#ffffff,
-			fg:				mix(#76ddff, #ffffff, 25%),
-			fg-light:		mix(#76ddff, #ffffff, 40%),
+			fg:				mix(#c7deed, #ffffff, 25%),
+			fg-light:		mix(#c7deed, #ffffff, 40%),
 			border:			rgba(0,0,0,0.125),
 			border-bg:		rgba(255,255,255,0.075),
 			border2:		rgba(0,0,0,0.25),
@@ -102,10 +102,10 @@
 		),
 
 		accent6: (
-			bg:				#ed4933,
+			bg:				#bfbfbf,
 			fg-bold:		#ffffff,
-			fg:				mix(#ed4933, #ffffff, 25%),
-			fg-light:		mix(#ed4933, #ffffff, 40%),
+			fg:				mix(#bfbfbf, #ffffff, 25%),
+			fg-light:		mix(#bfbfbf, #ffffff, 40%),
 			border:			rgba(0,0,0,0.125),
 			border-bg:		rgba(255,255,255,0.075),
 			border2:		rgba(0,0,0,0.25),
@@ -122,4 +122,4 @@
 			border2:		#bfbfbf,
 			border2-bg:		rgba(0,0,0,0.1)
 		)
-	);
+	);
diff --git a/getting_started.html b/getting_started.html
diff --git a/getting_started.md b/getting_started.md
@@ -0,0 +1,107 @@
+---
+layout: page
+title: Getting started
+subtitle: How to build and use the erlangpl script
+---
+
+### Download prebuilt script
+
+The easiest way to get started is to download a prebuilt `erlangpl` script
+([download link](https://erlang.pl/erlangpl.gz)).
+
+### Build it manually
+
+#### Prerequisites
+
+For building UI you need to have following dependencies installed:
+* [node](https://nodejs.org/en/)
+* [yarn](https://yarnpkg.com/lang/en/)
+* [elm-lang](https://guide.elm-lang.org/install.html)
+
+Be aware that building UI can take some time. It takes around 1 minute on stock MacBook 2015 plus dependencies
+download for the first time. Second time dependencies will be cached.
+
+```
+$ git clone --recursive [email protected]:erlanglab/erlangpl.git
+$ cd erlangpl
+$ make rebar
+$ make build-ui
+$ make
+$ ./bootstrap
+```
+
+## Running erlangpl script
+
+The erlangpl shell script is a self-contained escript, which can be started from a command line as long as you have Erlang/OTP installed.
+
+```
+$ ./erlangpl -h
+
+Usage: erlangpl [-n <node>] [-c <cookie>] [-p <plugin>] [-h]
+                [-v <verbose>] [-P <port>] [-V] [-s <sname>] [-l <name>]
+
+  -n, --node     Monitored node name
+  -c, --cookie   Overwrite ~/.erlang.cookie
+  -p, --plugin   Path to plugins
+  -h, --help     Show the program options
+  -v, --verbose  Verbosity level (-v, -vv, -vvv)
+  -P, --port     HTTP and WS port number
+  -V, --version  Show version information
+  -s, --sname    Start with a shortname
+  -l, --name     Start with a longname, default [email protected]
+
+$ ./erlangpl -n [email protected] -c YOURCOOKIE
+```
+
+Once started, try visiting http://localhost:8000/
+
+## Examples
+
+### Connecting to an Elixir iex session
+
+```
+$ iex --name [email protected] -S mix
+```
+
+```
+$ ./erlangpl --node [email protected]
+```
+
+### Mnesia cluster
+You can generate messages between nodes by querying a distributed database Mnesia.
+
+To setup a Mnesia cluster, start several Erlang nodes with unique names e.g. `a@`, `b@`, `c@`, etc. and start the database on all of them:
+```
+erl -name [email protected]
+([email protected])1> mnesia:start().
+```
+Then create a `test_table` and configure it to be replicated on all nodes:
+```
+([email protected])2> mnesia:change_config(extra_db_nodes, ['[email protected]']).
+([email protected])3> mnesia:change_config(extra_db_nodes, ['[email protected]']).
+([email protected])4> mnesia:change_config(extra_db_nodes, ['[email protected]']).
+([email protected])5> mnesia:create_table(test_table, []).
+([email protected])6> [mnesia:add_table_copy(test_table, Node, ram_copies) || Node <- nodes()].
+```
+
+Here are some behaviours you can test:
+```
+[begin mnesia:transaction(fun() -> mnesia:write({test_table, Key, "value"}) end), timer:sleep(10) end || Key <- lists:seq(1,2000)].
+[begin mnesia:sync_dirty(fun() -> mnesia:write({test_table, Key, "value"}) end), timer:sleep(10) end || Key <- lists:seq(1,2000)].
+[begin mnesia:dirty_write({test_table, Key, "value"}), timer:sleep(10) end || Key <- lists:seq(1,2000)].
+```
+
+Videos from those experiments were posted on [YouTube](https://www.youtube.com/channel/UCGkcbu799cC1rtMaQtAajpg)
+
+
+## Running development release
+
+You can also start the tool as a regular Erlang release and connect to its console to debug the tool itself.
+
+```
+$ make
+$ rebar -f generate
+$ ./rel/erlangpl/bin/erlangpl console [email protected] cookie=YOURCOOKIE
+```
+
+Have fun!
diff --git a/images/erlanglab_message_passing.png b/images/erlanglab_message_passing.png
diff --git a/index.html b/index.html
@@ -7,7 +7,9 @@
 							<h2>{{ site.title }}</h2>
 							<p>{{ site.description | markdownify }}</p>
 							<ul class="actions">
-                  <li><a href="https://erlang.pl/erlangpl.gz" class="button special icon fa-download">Download</a></li>
+                <li><a href="https://github.com/erlanglab/erlangpl" class="button special icon fa-github" style="background-color: #1F79B7;">Our GitHub</a></li>
+                <li><a href="/getting_started.html" class="button special icon fa-download" style="background-color: #8FBF47;">Getting Started</a></li>
+                <li><a href="https://github.com/erlanglab/erlangpl/releases/download/0.6.0/erlangpl.tar.gz" class="button special icon fa-download" style="background-color: #227A50;">Download</a></li>
 							</ul>
 						</div>
 						<a href="#one" class="more scrolly">Learn More</a>
@@ -17,9 +19,9 @@ <h2>{{ site.title }}</h2>
 					<section id="one" class="wrapper style1 special">
 						<div class="inner">
 							<header class="major">
-								  <h2>What is Erlang Performance Lab ?</h2>
-								  <p>It is a tool for developers working with the Erlang VM (BEAM).<br />
-                      It helps with observing a system and its performance analysis.</p>
+								  <h2>What is Erlang Performance Lab?</h2>
+								  <p>Tool for developers working with the Erlang VM (BEAM).<br />
+                    It helps with observing a system and its performance analysis.</p>
 							</header>
 							<ul class="icons major">
 								<li><a href="https://github.com/erlanglab/erlangpl" class="icon fa-github major style1"><span class="label">GitHub</span></a></li>
@@ -31,7 +33,8 @@ <h2>What is Erlang Performance Lab ?</h2>
 
 				<!-- Two -->
 					<section id="two" class="wrapper alt style2">
-						<section class="spotlight">
+            <!-- DASHBOARD -->
+            <section class="spotlight">
 							<div class="image"><img src="images/erlanglab_dashboard.png" alt="" /></div><div class="content">
 								<h2>Dashboard</h2>
 								<p>Gives high level overview of the current system throughput,
@@ -43,25 +46,42 @@ <h2>Dashboard</h2>
                 </p>
 							</div>
 						</section>
-						<section class="spotlight">
-							<div class="image"><img src="images/erlanglab_st.png" alt="" /></div><div class="content">
+
+            <!-- MESSAGE PASSING -->
+            <section class="spotlight">
+							<div class="image"><img src="images/erlanglab_message_passing.png" alt="" /></div><div class="content">
 								<h2>Message passing graph</h2>
 								<p>In Erlang-based systems processes share data through message passing.
                     If certain processes receive more messages than they can handle,
                     their inbox queue starts growing. Over time it can lead to bottlenecks.
                     The graph visualises which processes communicate extensively
-                    and highlights them in red, so you know which ones to click and inspect.
-                    You can even put on a pair of 3D glasses
-                    and admire the beauty of complex systems visualisations.
+                  allowing you to easily spot key places slowing down your application.
                 </p>
 							</div>
 						</section>
+
+            <!-- TRAFFIC -->
 						<section class="spotlight">
 							<div class="image"><img src="images/erlanglab_traffic.png" alt="" /></div><div class="content">
 								<h2>Traffic graph</h2>
-								<p>
-                    Gaining visibility into network traffic in distributed systems is of great importance as it helps to understand the behaviour of the entire system, which can consist of more than one Erlang node.
-                    Graphical representation of clustering helps grasp the inter-node traffic patterns and allows displaying traffic data on a graph of nodes.</p>
+								<p>Gaining visibility into network traffic in distributed systems is of great
+                    importance as it helps to understand the behaviour of the entire system,
+                    which can consist of more than one Erlang node.
+                    Graphical representation of clustering helps grasp the inter-node traffic
+                    patterns and allows displaying traffic data on a graph of nodes.
+                </p>
+							</div>
+						</section>
+
+            <!-- SUPERVISION TREE  -->
+            <section class="spotlight">
+							<div class="image"><img src="images/erlanglab_st.png" alt="" /></div><div class="content">
+								<h2>Supervision tree</h2>
+								<p>May help you understand internal structure of your application.
+                  This view allows you to monitor spawns and exits of your processes.
+                  Visualizing failure and recovery can help you to understand relations
+                  between workers and supervisors.
+                </p>
 							</div>
 						</section>
 					</section>
@@ -76,7 +96,7 @@ <h2>Interested in erlang.pl?</h2>
                    Don't forget to send us feedback!</p>
 							</header>
 							<ul class="actions vertical">
-								  <li><a href="https://erlang.pl/erlangpl.gz" class="button fit special">Download</a></li>
+								<li><a href="https://erlang.pl/erlangpl.gz" class="button fit special icon fa-download" style="background-color: #8FBF47;">Download</a></li>
 								<li><a href="mailto:[email protected]" class="button fit">Feedback</a></li>
 							</ul>
 						</div>