<commit_before>import Website.Skeleton (skeleton)
import Window

port title : String
port title = "Introducing: Elm-Reactor"

main = lift (skeleton "Blog" everything) Window.dimensions

everything wid =
  let w  = truncate (toFloat wid * 0.8)
      w' = min 600 w
      section txt =
          let words = width w' txt in
          container w (heightOf words) middle words
  in
  flow down
  [ width w pageTitle
  , section content
  , width w example
  , section workflow
  , section closing
  ]

pageTitle = [markdown|
<br/>
<div style="font-family: futura, 'century gothic', 'twentieth century', calibri, verdana, helvetica, arial; text-align: center;">
<div style="font-size: 4em;">Introducing Elm Reactor</div>
<div style="font-size: 1.5em;">An Interactive Programming Tool</div>
</div>
|]

content = [markdown|

<p style="text-align: right;">
By <a href="http://github.com/michaelbjames"><NAME></a>
</p>

Elm Reactor is a development tool that gives you the power to time-travel.
Pause, rewind, and unpause any Elm program to find bugs and explore the
interaction space. Elm Reactor swaps in new code upon saving, letting you know
immediately if your bug fix or feature works. This way it&rsquo;s easy to tweak
layout, play with colors, and quickly explore ideas. Elm has prototyped [these
features](http://debug.elm-lang.org/) before, but **Elm Reactor polishes them in
an [easy-to-install package][install]** that can be used with any text editor.
You can start using it for your projects today.

[install]: https://github.com/elm-lang/elm-platform#elm-platform

The following demo shows someone fixing a bug in a TodoMVC app written with
[elm-html](/blog/Blazing-Fast-Html.em). Any task marked as complete should not appear under
&ldquo;Active Tasks&rdquo;, but this bug mistakes completed tasks for active tasks.
Watch them find the bug, fix the code, see the fix propagate
automatically, and rewind the program to verify the fix.

<img src="/imgs/reactor-post/fold.gif" style="width:600px; height:364px;">

Elm Reactor grew out of my internship working on Elm at Prezi this summer. It
combines the time-traveling debugger prototype created by <NAME> and <NAME> along with the modular design of Elm to make a practical development
tool. It harnesses the recent features of Elm to give the debugging process a
much needed upgrade.

# Ultimate Undo Button

Elm Reactor lets you travel back in time. You can pause the execution of your
program, rewind to any earlier point, and start running again. Watch me misplace
a line piece and correct my mistake:

<img src="/imgs/reactor-post/tetris.gif" style="width:600px; height:306px;">

In this example, I paused the game, went back, and continued to avoid crushing
defeat. This is what &ldquo;time-traveling&rdquo; means in Elm Reactor. It lets
you:

* Pause a running program
* Step backwards and forwards in time
* Continue from any point in the program&rsquo;s past

This sort of time traveling lets you explore the interaction space of your
program faster. Imagine debugging an online checkout page. You want to
verify that the error messages look right. There are several dozen
ways to trigger an error message (e.g., bad phone number, no last name, etc.).
Traditionally you would need to repeat the entire transaction for each error,
slowly going crazy as you re-enter the same data for the 13th time. Elm
Reactor lets you rewind to any point, making it easy to explore an alternate
interaction. The next few sections will describe how Elm Reactor makes this
possible.<commit_msg>Workshop bolded sentence, mess with indentation, add a link to 0.13 announcement<commit_after>import Website.Skeleton (skeleton)
import Window

port title : String
port title = "Introducing Elm Reactor"

main = lift (skeleton "Blog" everything) Window.dimensions

everything wid =
  let w  = truncate (toFloat wid * 0.8)
      w' = min 600 w
      section txt =
          let words = width w' txt in
          container w (heightOf words) middle words
  in
  flow down
  [ width w pageTitle
  , section content
  , width w example
  , section workflow
  , section closing
  ]

pageTitle = [markdown|
<br/>
<div style="font-family: futura, 'century gothic', 'twentieth century', calibri, verdana, helvetica, arial; text-align: center;">
<div style="font-size: 4em;">Introducing Elm Reactor</div>
<div style="font-size: 1.5em;">An Interactive Programming Tool</div>
</div>
|]

content = [markdown|

<p style="text-align: right;">
By <a href="http://github.com/michaelbjames"><NAME></a>
</p>

Elm Reactor is a development tool that gives you the power to time-travel.
Pause, rewind, and unpause any Elm program to find bugs and explore the
interaction space. Elm Reactor also swaps in new code upon saving, letting you
know immediately if your bug fix or feature works. This way it&rsquo;s easy to
tweak layout, play with colors, and quickly explore ideas. **Elm Reactor
bundles time-travel and code swapping in an [easy-to-install package][install]
that can be used with any text editor.** It came out with [Elm 0.13][13], so
you can start using it for your projects today.

[install]: https://github.com/elm-lang/elm-platform#elm-platform
[13]: /blog/announce/0.13.elm

The following demo shows someone fixing a bug in [a TodoMVC app][todo] written
with [elm-html](/blog/Blazing-Fast-Html.em). Any task marked as complete should
not appear under &ldquo;Active Tasks&rdquo;, but this bug mistakes completed
tasks for active tasks. Watch them find the bug, fix the code, see the fix
propagate automatically, and rewind the program to verify the fix.

[todo]: https://github.com/evancz/elm-todomvc/blob/master/Todo.elm

<img src="/imgs/reactor-post/fold.gif" style="width:600px; height:364px;">

Elm Reactor grew out of my internship working on Elm at Prezi this summer. It
combines the [time-traveling debugger prototype][debug] created by <NAME>
and <NAME> along with the modular design of Elm to make a practical
development tool. It harnesses the recent features of Elm to give the debugging
process a much needed upgrade.

[debug]: http://debug.elm-lang.org/

# Ultimate Undo Button

Elm Reactor lets you travel back in time. You can pause the execution of your
program, rewind to any earlier point, and start running again. Watch me misplace
a line piece and correct my mistake:

<img src="/imgs/reactor-post/tetris.gif" style="width:600px; height:306px;">

In this example, I paused the game, went back, and continued to avoid crushing
defeat. This is what &ldquo;time-traveling&rdquo; means in Elm Reactor. It lets
you:

* Pause a running program
* Step backwards and forwards in time
* Continue from any point in the program&rsquo;s past

This sort of time traveling lets you explore the interaction space of your
program faster. Imagine debugging an online checkout page. You want to
verify that the error messages look right. There are several dozen
ways to trigger an error message (e.g., bad phone number, no last name, etc.).
Traditionally you would need to repeat the entire transaction for each error,
slowly going crazy as you re-enter the same data for the 13th time. Elm
Reactor lets you rewind to any point, making it easy to explore an alternate
interaction. The next few sections will describe how Elm Reactor makes this
possible.
{'fraction_non_alphanumeric': 0.07984634380573467, 'fraction_numerical': 0.007820002743860612, 'mean_word_length': 4.321167883211679, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 35, 'https://': 3, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3818264', 'n_tokens_mistral': 2198, 'n_tokens_neox': 2067, 'n_words': 1007}