Skip to content

Commit

Permalink
Set figure sizes for all figures.
Browse files Browse the repository at this point in the history
  • Loading branch information
MichaelDiBernardo committed Apr 9, 2016
1 parent f9ebe91 commit fa61c4b
Show file tree
Hide file tree
Showing 15 changed files with 74 additions and 84 deletions.
13 changes: 6 additions & 7 deletions cluster/cluster.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,7 @@ The protocol operates in a series of ballots, each led by a single member of the
Each ballot has a unique ballot number based on an integer and the proposer's identity.
The proposer's goal is to get a majority of cluster members, acting as acceptors, to accept its value, but only if another value has not already been decided.


\aosafigure{cluster-images/ballot.png}{A Ballot}{500l.cluster.ballot}
\aosafigure[240pt]{cluster-images/ballot.png}{A Ballot}{500l.cluster.ballot}

A ballot begins with the proposer sending a ``Prepare`` message with the ballot number *N* to the acceptors and waiting to hear from a majority (\aosafigref{500l.cluster.ballot}.)

Expand Down Expand Up @@ -420,7 +419,7 @@ The ``Replica`` class is the most complicated role class, as it has a few closel
The replica creates new proposals in response to ``Invoke`` messages from clients, selecting what it believes to be an unused slot and sending a ``Propose`` message to the current leader (\aosafigref{500l.cluster.replica}.)
Furthermore, if the consensus for the selected slot is for a different proposal, the replica must re-propose with a new slot.

\aosafigure{cluster-images/replica.png}{Replica Role Control Flow}{500l.cluster.replica}
\aosafigure[240pt]{cluster-images/replica.png}{Replica Role Control Flow}{500l.cluster.replica}

``Decision`` messages represent slots on which the cluster has come to consensus.
Here, replicas store the new decision, then run the state machine until it reaches an undecided slot.
Expand Down Expand Up @@ -450,14 +449,14 @@ When the acceptor role sends a ``Promise`` to a new leader, it sends an ``Accept

The active leader sends ``Active`` messages as a heartbeat (\aosafigref{500l.cluster.active}.) If no such message arrives before the ``LEADER_TIMEOUT`` expires, the replica assumes the leader is dead and moves on to the next leader. In this case, it's important that all replicas choose the *same* new leader, which we accomplish by sorting the members and selecting the next one in the list.

\aosafigure{cluster-images/active.png}{Active}{500l.cluster.active}
\aosafigure[240pt]{cluster-images/active.png}{Active}{500l.cluster.active}

Finally, when a node joins the network, the bootstrap role sends a ``Join``
message (\aosafigref{500l.cluster.bootstrap}.) The replica responds with a
``Welcome`` message containing its most recent state, allowing the new node to
come up to speed quickly.

\aosafigure{cluster-images/bootstrap.png}{Bootstrap}{500l.cluster.bootstrap}
\aosafigure[240pt]{cluster-images/bootstrap.png}{Bootstrap}{500l.cluster.bootstrap}

```python

Expand Down Expand Up @@ -646,7 +645,7 @@ The leader creates a scout role when it wants to become active, in response to r
The scout sends (and re-sends, if necessary) a ``Prepare`` message, and collects ``Promise`` responses until it has heard from a majority of its peers or until it has been preempted.
It communicates the result back to the leader with an ``Adopted`` or ``Preempted`` message, respectively.

\aosafigure{cluster-images/leaderscout.png}{Scout}{500l.cluster.leaderscout}
\aosafigure[240pt]{cluster-images/leaderscout.png}{Scout}{500l.cluster.leaderscout}

```python

Expand Down Expand Up @@ -705,7 +704,7 @@ Like a scout, a commander sends and re-sends ``Accept`` messages and waits for a
When a proposal is accepted, the commander broadcasts a ``Decision`` message to all nodes.
It responds to the leader with either ``Decided`` or ``Preempted``.

\aosafigure{cluster-images/leadercommander.png}{Commander}{500l.cluster.leadercommander}
\aosafigure[240pt]{cluster-images/leadercommander.png}{Commander}{500l.cluster.leadercommander}

```python

Expand Down
2 changes: 1 addition & 1 deletion contingent/contingent.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -341,7 +341,7 @@ is as a collection of boxes and arrows —
or, in mathematical terminology, *nodes* and *edges*
to form a *graph* (\aosafigref{500l.contingent.graph}).

\aosafigure[240pt]{contingent-images/figure1.png}{Three files generated by parsing three input texts.}{500l.contingent.graph}
\aosafigure[180pt]{contingent-images/figure1.png}{Three files generated by parsing three input texts.}{500l.contingent.graph}

Each language in which a programmer
might tackle writing a build system
Expand Down
6 changes: 3 additions & 3 deletions image-filters/image-filters.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ extracted wasn’t generally the most appealing shade, the creation took a long
time (a couple of seconds per image), and it took hundreds of images to make
something cool (\aosafigref{500l.imagefilters.sunflower}).

\aosafigure[240pt]{image-filters-images/sunflower.jpg}{Sunflower layout}{500l.imagefilters.sunflower}
\aosafigure[180pt]{image-filters-images/sunflower.jpg}{Sunflower layout}{500l.imagefilters.sunflower}

You might think this would be discouraging, but by the time I got to this
point I had learned many things that hadn’t come my way before — about color
Expand Down Expand Up @@ -137,9 +137,9 @@ In \aosafigref{500l.imagefilters.animals}, we see a high-resolution picture of s
MoMA in NYC. \aosafigref{500l.imagefilters.pixelanimals} is
the same image blown up, but with just 24 x 32 pixels.

\aosafigure[240pt]{image-filters-images/animals.jpg}{Blow-up animals at MoMA NY}{500l.imagefilters.animals}
\aosafigure[180pt]{image-filters-images/animals.jpg}{Blow-up animals at MoMA NY}{500l.imagefilters.animals}

\aosafigure[240pt]{image-filters-images/pixelanimals.jpg}{Blow-up animals, blown up}{500l.imagefilters.pixelanimals}
\aosafigure[180pt]{image-filters-images/pixelanimals.jpg}{Blow-up animals, blown up}{500l.imagefilters.pixelanimals}

See how it's so blurry? We call
that _pixelation_, which means the image is too big for the number of pixels it
Expand Down
22 changes: 11 additions & 11 deletions same-origin-policy/same-origin-policy.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -314,9 +314,9 @@ check {

Given this `check` command, the analyzer explores every possible behavior of the system (up to the specified bound), and when it finds one that violates the property, displays that instance as a *counterexample*, as shown in \aosafigref{500l.same-origin-policy.fig-http-2a} and \aosafigref{500l.same-origin-policy.fig-http-2b}.

\aosafigure[240pt]{same-origin-policy-images/fig-http-2a.png}{Counterexample at time 0}{500l.same-origin-policy.fig-http-2a}
\aosafigure[180pt]{same-origin-policy-images/fig-http-2a.png}{Counterexample at time 0}{500l.same-origin-policy.fig-http-2a}

\aosafigure[240pt]{same-origin-policy-images/fig-http-2b.png}{Counterexample at time 1}{500l.same-origin-policy.fig-http-2b}
\aosafigure[180pt]{same-origin-policy-images/fig-http-2b.png}{Counterexample at time 1}{500l.same-origin-policy.fig-http-2b}

This counterexample again shows an HTTP request being made by a
client, but with two different servers. (In the Alloy visualizer,
Expand Down Expand Up @@ -798,14 +798,14 @@ confidentiality property, the analyzer generates the scenario seen in
\aosafigref{500l.same-origin-policy.fig-attack-1b}, which shows how
`EvilScript` may access a piece of critical data (`MyInboxInfo`).

\aosafigure[240pt]{same-origin-policy-images/fig-attack-1a.png}{Confidentiality counterexample at time 0}{500l.same-origin-policy.fig-attack-1a}
\aosafigure[240pt]{same-origin-policy-images/fig-attack-1b.png}{Confidentiality counterexample at time 1}{500l.same-origin-policy.fig-attack-1b}
\aosafigure[180pt]{same-origin-policy-images/fig-attack-1a.png}{Confidentiality counterexample at time 0}{500l.same-origin-policy.fig-attack-1a}
\aosafigure[180pt]{same-origin-policy-images/fig-attack-1b.png}{Confidentiality counterexample at time 1}{500l.same-origin-policy.fig-attack-1b}

This counterexample involves two steps. In the first step (\aosafigref{500l.same-origin-policy.fig-attack-1a}), `EvilScript`, executing inside `AdBanner` from `EvilDomain`, reads the content of `InboxPage`, which originates from `EmailDomain`. In the next step (\aosafigref{500l.same-origin-policy-fig-attack-1b}), `EvilScript` sends the same content (`MyInboxInfo`) to `EvilServer` by making an `XmlHtttpRequest` call. The core of the problem here is that a script executing under one domain is able to read the content of a document from another domain; as we will see in the next section, this is exactly one of the scenarios that the SOP is designed to prevent.

There may be multiple counterexamples to a single assertion. Consider \aosafigref{500l.same-origin-policy.fig-attack-2}, which shows a different way in which the system may violate the confidentiality property.

\aosafigure[240pt]{same-origin-policy-images/fig-attack-2.png}{Another confidentiality violation}{500l.same-origin-policy.fig-attack-2}
\aosafigure[180pt]{same-origin-policy-images/fig-attack-2.png}{Another confidentiality violation}{500l.same-origin-policy.fig-attack-2}

In this scenario, instead of reading the content of the inbox page,
`EvilScript` directly makes a `GetInboxInfo` request to `EmailServer`.
Expand Down Expand Up @@ -1017,13 +1017,13 @@ accessing each other's DOM. The scripts running inside the documents
modify their domain properties to `ExampleDomain` (which is allowed because
`ExampleDomain` is a superdomain of the original domain).

\aosafigure[240pt]{same-origin-policy-images/fig-setdomain-1a.png}{Cross-origin counterexample at time 0}{500l.same-origin-policy.fig-setdomain-1a}
\aosafigure[240pt]{same-origin-policy-images/fig-setdomain-1b.png}{Cross-origin counterexample at time 1}{500l.same-origin-policy.fig-setdomain-1b}
\aosafigure[180pt]{same-origin-policy-images/fig-setdomain-1a.png}{Cross-origin counterexample at time 0}{500l.same-origin-policy.fig-setdomain-1a}
\aosafigure[180pt]{same-origin-policy-images/fig-setdomain-1b.png}{Cross-origin counterexample at time 1}{500l.same-origin-policy.fig-setdomain-1b}

Having done this, they can now access each other's DOM by
executing `ReadDom` or `WriteDom` operations, as in \aosafigref{500l.same-origin-policy.fig-setdomain-1c}.

\aosafigure[240pt]{same-origin-policy-images/fig-setdomain-1c.png}{Cross-origin counterexample at time 2}{500l.same-origin-policy.fig-setdomain-1c}
\aosafigure[180pt]{same-origin-policy-images/fig-setdomain-1c.png}{Cross-origin counterexample at time 2}{500l.same-origin-policy.fig-setdomain-1c}

Note that when you set the domain property of both "email.example.com"
and "calendar.example.com" to "example.com", you are allowing not only
Expand All @@ -1033,11 +1033,11 @@ other page that has "example.com" as a superdomain
constructs a special script (`EvilScript`) that runs inside the
attacker's blog page (`BlogPage`). In the next step (\aosafigref{500l.same-origin-policy.fig-setdomain-2a}), the script executes the `SetDomain` operation to modify the domain property of `BlogPage` to `ExampleDomain`.

\aosafigure[240pt]{same-origin-policy-images/fig-setdomain-2a.png}{Cross-origin counterexample at time 3}{500l.same-origin-policy.fig-setdomain-2a}
\aosafigure[180pt]{same-origin-policy-images/fig-setdomain-2a.png}{Cross-origin counterexample at time 3}{500l.same-origin-policy.fig-setdomain-2a}

Now that `BlogPage` has the same domain property as the other two documents, it can successfully execute the `ReadDOM` operation to access their content (\aosafigref{500l.same-origin-policy.fig-setdomain-2b}.)

\aosafigure[240pt]{same-origin-policy-images/fig-setdomain-2b.png}{Cross-origin counterexample at time 4}{500l.same-origin-policy.fig-setdomain-2b}
\aosafigure[180pt]{same-origin-policy-images/fig-setdomain-2b.png}{Cross-origin counterexample at time 4}{500l.same-origin-policy.fig-setdomain-2b}

This attack points out one crucial weakness of the domain property
method for cross-origin communication: The security of an application
Expand Down Expand Up @@ -1159,7 +1159,7 @@ resource (`MySchedule`) wrapped inside the padding `Leak` (\aosafigref{500l.same

In the next step (\aosafigref{500l.same-origin-policy.fig-jsonp-2}), the browser interprets the JSONP response as a call to `Leak(MySchedule)`. The rest of the attack is simple; `Leak` can simply be programmed to forward the input argument to `EvilServer`, allowing the attacker to access the victim's sensitive information.

\aosafigure[240pt]{same-origin-policy-images/fig-jsonp-2.png}{JSONP counterexample at time 1}{500l.same-origin-policy.fig-jsonp-2}
\aosafigure[180pt]{same-origin-policy-images/fig-jsonp-2.png}{JSONP counterexample at time 1}{500l.same-origin-policy.fig-jsonp-2}

This attack, an example of _cross-site request forgery_ (CSRF), shows an inherent weakness of JSOPN; _any_ site on the web can make a JSONP request simply by including a `<script>` tag and access the payload inside the padding. The risk can be mitigated in two ways: (1) ensure that a JSONP request never returns sensitive data, or (2) use another mechanism in place of cookies (e.g., secret tokens) to authorize the request.

Expand Down
2 changes: 1 addition & 1 deletion sampler/sampler.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -1140,7 +1140,7 @@ Now we can draw a bunch of samples, and compute the 50th percentile
If we were to plot a histogram of how many samples we got for each
amount of damage, it would look something like \aosafigref{500l.sampler.damage}.

\aosafigure[144pt]{sampler-images/damage_distribution.png}{Damage Distribution}{500l.sampler.damage}
\aosafigure[180pt]{sampler-images/damage_distribution.png}{Damage Distribution}{500l.sampler.damage}

There is a pretty wide range of damage that the player could
potentially inflict, but it has a long tail: the 50th percentile is at
Expand Down
14 changes: 7 additions & 7 deletions spreadsheet/spreadsheet.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ The [spreadsheet](https://github.com/audreyt/500lines/tree/master/spreadsheet/co

Now let’s open [our spreadsheet](http://audreyt.github.io/500lines/spreadsheet/) in a browser (\aosafigref{500l.spreadsheet.initial}):

\aosafigure{spreadsheet-images/01-initial.png}{Initial Screen}{500l.spreadsheet.initial}
\aosafigure[240pt]{spreadsheet-images/01-initial.png}{Initial Screen}{500l.spreadsheet.initial}

### Basic Concepts

Expand All @@ -44,15 +44,15 @@ The spreadsheet spans two dimensions, with _columns_ starting from **A**, and _r

Click "3920" to set _focus_ on **E1**, revealing its formula in an _input box_ (\aosafigref{500l.spreadsheet.inputbox}):

\aosafigure{spreadsheet-images/02-input.png}{Input Box}{500l.spreadsheet.input}
\aosafigure[240pt]{spreadsheet-images/02-input.png}{Input Box}{500l.spreadsheet.input}

Now let’s set focus on **A1** and _change_ its content to "1", causing **E1** to _recalculate_ its value to "2047" (\aosafigref{500l.spreadsheet.changed}):

\aosafigure{spreadsheet-images/03-changed.png}{Changed Content}{500l.spreadsheet.changed}
\aosafigure[240pt]{spreadsheet-images/03-changed.png}{Changed Content}{500l.spreadsheet.changed}

Press **ENTER** to set focus to **A2** and change its content to `=Date()`, then press **TAB**, change the content of **B2** to `=alert()`, then press **TAB** again to set focus to `C2` (\aosafigref{500l.spreadsheet.error}):

\aosafigure{spreadsheet-images/04-error.png}{Formula Error}{500l.spreadsheet.error}
\aosafigure[240pt]{spreadsheet-images/04-error.png}{Formula Error}{500l.spreadsheet.error}

This shows that a formula may calculate to a number ("2047" in **E1**), a text (the current time in **A2**, aligned to the left), or an _error_ (red letters in **B2**, aligned to the center).

Expand All @@ -69,7 +69,7 @@ Before we dive into the 99 lines of code, it’s worthwhile to disable JS in the
* Pressing the reset button produces no effect.
* Pressing **TAB** or clicking into the first line of content still reveals an editable input box.

\aosafigure{spreadsheet-images/05-nojs.png}{With JavaScript Disabled}{500l.spreadsheet.nojs}
\aosafigure[240pt]{spreadsheet-images/05-nojs.png}{With JavaScript Disabled}{500l.spreadsheet.nojs}

When we disable the dynamic interactions (JS), the content structure (HTML) and the presentational styles (CSS) remain in effect. If a website is useful with both JS and CSS disabled, we say it adheres to the _progressive enhancement_ principle, making its content accessible to the largest audience possible.

Expand All @@ -87,7 +87,7 @@ As shown in \aosafigref{500l.spreadsheet.nocss}, if we enable JS in the browser

\aosafigref{500l.spreadsheet.architecture} shows the links between HTML and JS components:

\aosafigure{spreadsheet-images/00-architecture.png}{Architecture Diagram}{500l.spreadsheet.architecture}
\aosafigure[240pt]{spreadsheet-images/00-architecture.png}{Architecture Diagram}{500l.spreadsheet.architecture}

In order to make sense of the diagram, let’s go through the four source code files, in the same sequence as the browser loads them:

Expand Down Expand Up @@ -206,7 +206,7 @@ As the bridge between the HTML view and the background worker, it has four tasks

The flowchart in \aosafigref{500l.spreadsheet.flowchart} shows the controller-worker interaction in more detail:

\aosafigure{spreadsheet-images/00-flowchart.png}{Controller-Worker Flowchart}{500l.spreadsheet.flowchart}
\aosafigure[240pt]{spreadsheet-images/00-flowchart.png}{Controller-Worker Flowchart}{500l.spreadsheet.flowchart}

Now let's walk through the code. In the first line, we request the JS model `$scope` object from AngularJS:

Expand Down
20 changes: 12 additions & 8 deletions tex/cluster.tex
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@
acceptors, to accept its value, but only if another value has not
already been decided.

\aosafigure{cluster-images/ballot.png}{A Ballot}{500l.cluster.ballot}
\aosafigure[240pt]{cluster-images/ballot.png}{A Ballot}{500l.cluster.ballot}

A ballot begins with the proposer sending a \texttt{Prepare} message
with the ballot number \emph{N} to the acceptors and waiting to hear
Expand Down Expand Up @@ -567,7 +567,7 @@
the selected slot is for a different proposal, the replica must
re-propose with a new slot.

\aosafigure{cluster-images/replica.png}{Replica Role Control Flow}{500l.cluster.replica}
\aosafigure[240pt]{cluster-images/replica.png}{Replica Role Control Flow}{500l.cluster.replica}

\texttt{Decision} messages represent slots on which the cluster has come
to consensus. Here, replicas store the new decision, then run the state
Expand Down Expand Up @@ -615,14 +615,14 @@
all replicas choose the \emph{same} new leader, which we accomplish by
sorting the members and selecting the next one in the list.

\aosafigure{cluster-images/active.png}{Active}{500l.cluster.active}
\aosafigure[240pt]{cluster-images/active.png}{Active}{500l.cluster.active}

Finally, when a node joins the network, the bootstrap role sends a
\texttt{Join} message (\aosafigref{500l.cluster.bootstrap}.) The replica
responds with a \texttt{Welcome} message containing its most recent
state, allowing the new node to come up to speed quickly.

\aosafigure{cluster-images/bootstrap.png}{Bootstrap}{500l.cluster.bootstrap}
\aosafigure[240pt]{cluster-images/bootstrap.png}{Bootstrap}{500l.cluster.bootstrap}

\begin{verbatim}
Expand All @@ -633,7 +633,7 @@
self.execute_fn = execute_fn
self.state = state
self.slot = slot
self.decisions = decisions.copy()
self.decisions = decisions
self.peers = peers
self.proposals = {}
# next slot num for a proposal (may lead slot)
Expand Down Expand Up @@ -820,7 +820,7 @@
has been preempted. It communicates the result back to the leader with
an \texttt{Adopted} or \texttt{Preempted} message, respectively.

\aosafigure{cluster-images/leaderscout.png}{Scout}{500l.cluster.leaderscout}
\aosafigure[240pt]{cluster-images/leaderscout.png}{Scout}{500l.cluster.leaderscout}

\begin{verbatim}
Expand Down Expand Up @@ -882,7 +882,7 @@
\texttt{Decision} message to all nodes. It responds to the leader with
either \texttt{Decided} or \texttt{Preempted}.

\aosafigure{cluster-images/leadercommander.png}{Commander}{500l.cluster.leadercommander}
\aosafigure[240pt]{cluster-images/leadercommander.png}{Commander}{500l.cluster.leadercommander}

\begin{verbatim}
Expand Down Expand Up @@ -1203,7 +1203,9 @@
def send(self, sender, destinations, message):
sender.logger.debug("sending %s to %s", message, destinations)
for dest in (d for d in destinations if d in self.nodes):
# avoid aliasing by making a closure containing distinct deep copy of
# message for each dest
def sendto(dest, message):
if dest == sender.address:
# reliably deliver local messages with no delay
self.set_timer(sender.address, 0,
Expand All @@ -1214,6 +1216,8 @@
self.set_timer(dest, delay,
functools.partial(self.nodes[dest].receive,
sender.address, message))
for dest in (d for d in destinations if d in self.nodes):
sendto(dest, copy.deepcopy(message))
\end{verbatim}

Expand Down
Loading

0 comments on commit fa61c4b

Please sign in to comment.