Skip to content

Commit

Permalink
progress, link to draft video
Browse files Browse the repository at this point in the history
  • Loading branch information
@yairchu
yairchu committed Jul 27, 2018
1 parent 6d6b506 commit 930603a
Show file tree
Hide file tree
Showing 2 changed files with 327 additions and 8 deletions.
25 changes: 17 additions & 8 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,22 @@
# Presetation ideas
# Presetation

The context of presenting right now is that we intend to prepare and submit a video presentation to the [LIVE 2018 workshop](https://2018.splashcon.org/track/live-2018-papers) (deadline: 2018.08.17) and need to decide what to present.

The problem is that Lamdu is somewhat challenging to present. Paul Chiusano's [article on incrementalism](https://pchiusano.github.io/2017-05-17/incrementalism.html) expands on this topic quite well.

The gist of the problem is that Lamdu is a big and novel project with many aspects to describe, but it's also essential to keep the presentation focused. We got to this predicament as we've focused more on coding and less on presenting our research, in contrast to academics, who typically continually update on their advances so at any given point in time there is only the recent new material to present.

## Topics/Storylines
## Script - Scaling the REPL experience

Options for the main idea to present (many are similar but with different emphasis) -

### Scaling the REPL experience
See also: [Draft video](https://www.dropbox.com/s/80h3b4o9tff59i8/Lamdu%20LIVE%202018%20-%20Intro%20draft.mp4?dl=0)

Many programmers love the REPL (aka Interactive Shell, Notebook, Playgrounds).

It provides validation, useful feedback, it's very useful for learning to code, and in some cases it even produces the actual program results (obviating the need to build a full application).

But the REPL often loses its efficacy when writing larger programs, to the point that many "serious" programming languages such Java, Rust, and C++ don't even bother offering one.

#### How the REPL loses efficacy for larger programs
### How the REPL loses efficacy for larger programs

How exactly does the REPL become less effective for large programs?

Expand All @@ -27,7 +25,7 @@ We recognize two problems:
* Availability
* Bandwidth

##### Availability
#### Availability

Let's illustrate this with an example.

Expand All @@ -44,7 +42,7 @@ and you happen to want the check something in the repl for what you're currently
* Computer: Module loaded successfully. Your wish is my command! What do you want to do now?
* You: I forgot :/

##### Bandwidth
#### Bandwidth

The other problem with REPLs is that the output size is not proportional to the size of your program.

Expand All @@ -61,6 +59,17 @@ Now let's see how it works in Lamdu:
* When typing `factorial 2`, evaluation does reach the type error and only then it actually blocks the evaluation.
* Note that we don't only see the final result but we also see the intermediate values, and can navigate between different evaluated scopes too. This is our response to the bandwidth problem

### How does this work - what about syntax errors

Lamdu's approach to syntax errors is radical - eliminate them from existence!
Lamdu is not a free form text editor, but rather a projectional code editor.
This means you can't just type any text you want - you can only type syntactically valid code.
Same goes for name errors.

Wait - I can't just write any text I want?

That's right, but worry not.

## Scenes

Ideas for possible "scenes"/parts which can be used to construct the presentation -
Expand Down
310 changes: 310 additions & 0 deletions scenes/whatsapp.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,310 @@
<!doctype html>
<html class="no-js" lang="en">

<!-- Many thanks to fakewhats.com ! See text in page for more info -->

<head>
<meta charset="utf-8" />
<title>Based on fakewhats.com</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Architects+Daughter|Open+Sans:400,300,600,700' rel='stylesheet'
type='text/css'>
<link rel="stylesheet" href="https://www.fakewhats.com/css/app.css" />
<link rel="stylesheet" href="https://www.fakewhats.com/css/style.css" />

<style>
.hide {
opacity: 0;
}

#type-message {
font-size: 1.125rem;
padding: 0.6875rem 0 0.6875rem 3.75rem;
float: left;
}

.empty-message {
color: #c8c8cd;
}
</style>

</head>

<body style="background:red">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="color:white">
This animation is based on the design from
<a href="http://fakewhats.com/">fakewhats.com</a>. As it has no options for creating and saving animations, I've edited their html to make this. Thanks
you very much fakewhats.com!
</p>
<div id="iphone">
<div class="top"></div>
<div class="middle">
<div id="screen">
<section id="header">

<div class="row">
<div class="small-6 columns">
<div id="connection" class="left">
<img src="https://www.fakewhats.com/images/iphone/3g-3.png" id="signalimage">
</div>
<div id="operator" class="left">
<span id="operator-result" class="result">IDE</span>
</div>
<div id="connection-type" class="left">
<div id="connection-type-wifi-wrapper">
<img src="https://www.fakewhats.com/images/iphone/wifi-2.png" id="connection-type-wifi">
</div>
</div>
</div>

<div class="small-4 columns text-center">
<div id="clock">
<span id="clock-result" class="result">14:19</span>
</div>
</div>

<div id="battery-container" class="small-6 columns">
<div id="battery" class="right">
<!-- Width needs to be larger than percent number because -->
<!-- It probably should look relative to outer frame? -->
<div id="battery-percent" style="width:31%;"></div>
</div>
<div id="battery-percent-number-container" class="right">
<span id="battery-percent-number">26</span> %</div>
</div>
</div>

<div id="row-2">
<div class="row">
<div class="small-5 columns">
<div id="messages">
<div class="left">
<img src="https://www.fakewhats.com/images/iphone/arrow-left.png">
</div>
<div class="left" id="text-messages-result-container">
<span id="text-messages-result" class="result"></span>
</div>
</div>
</div>
<div class="small-7 columns">
<div id="messages-name">
<span id="name-result" class="result text-center">Mr. REPL</span>
<span id="online-result">online</span>
</div>
</div>
<div class="small-4 columns">
</div>
</div>
</div>

</section>

<section id="messages-container" style="height:560px; overflow-y:scroll;">
<div class="row">
<div class="small-16 columns">
<ul id="messages-list">

<li class="text-message green">
<div class="bubble-top"></div>
<div class="message-content">
<p>
Hmm, how much is 2*3?
</p>
<p class="timestamp">14:19
<span>
<img src="https://static.fakewhats.com/images/iphone/check-read.png" alt="received">
</span>
</p>
</div>
<div class="bubble-bottom"></div>
</li>

<li class="text-message grey">
<div class="bubble-top"></div>
<div class="message-content">
<p>
What? What do you mean? I can't even understand the syntax of that other function you wrote
</p>
<p class="timestamp">14:20</p>
</div>
<div class="bubble-bottom"></div>
</li>

<li class="text-message green">
<div class="bubble-top"></div>
<div class="message-content">
<p>
One moment..
</p>
<p class="timestamp">14:20
<span>
<img src="https://static.fakewhats.com/images/iphone/check-read.png" alt="received">
</span>
</p>
</div>
<div class="bubble-bottom"></div>
</li>

<li class="text-message green">
<div class="bubble-top"></div>
<div class="message-content">
<p>
I fixed the syntax!
</p>
<p class="timestamp">14:21
<span>
<img src="https://static.fakewhats.com/images/iphone/check-read.png" alt="received">
</span>
</p>
</div>
<div class="bubble-bottom"></div>
</li>

<li class="text-message grey">
<div class="bubble-top"></div>
<div class="message-content">
<p>
Yeah? What about name errors?
</p>
<p class="timestamp">14:22</p>
</div>
<div class="bubble-bottom"></div>
</li>

<li class="text-message green">
<div class="bubble-top"></div>
<div class="message-content">
<p>
🤦 Here, fine now?
</p>
<p class="timestamp">14:21
<span>
<img src="https://static.fakewhats.com/images/iphone/check-read.png" alt="received">
</span>
</p>
</div>
<div class="bubble-bottom"></div>
</li>

<li class="text-message grey">
<div class="bubble-top"></div>
<div class="message-content">
<p>
At least your code seems to make some sense now. Let me see 🧐
</p>
<p class="timestamp">14:22</p>
</div>
<div class="bubble-bottom"></div>
</li>

<li class="text-message grey">
<div class="bubble-top"></div>
<div class="message-content">
<p>
Your types don't match ☝️
</p>
<p class="timestamp">14:23</p>
</div>
<div class="bubble-bottom"></div>
</li>

<li class="text-message green">
<div class="bubble-top"></div>
<div class="message-content">
<p>
🤦🤦 Ok, how about now?
</p>
<p class="timestamp">14:24
<span>
<img src="https://static.fakewhats.com/images/iphone/check-read.png" alt="received">
</span>
</p>
</div>
<div class="bubble-bottom"></div>
</li>

<li class="text-message grey">
<div class="bubble-top"></div>
<div class="message-content">
<p>
Thanks for the cooperation! It really helps when someone puts the effort to ask a question properly.
</p>
<p>
I'm happy to inform you that I performed the requested calculation on your behalf.
<br> The answer to your question, "Hmm, how much is 2*3?", is:
<br> 6.
</p>
<p class="timestamp">14:25</p>
</div>
<div class="bubble-bottom"></div>
</li>

<li class="text-message grey">
<div class="bubble-top"></div>
<div class="message-content">
<p>
Anything else I can do for you? I'm here to help 😇
</p>
<p class="timestamp">14:25</p>
</div>
<div class="bubble-bottom"></div>
</li>

<li class="text-message green">
<div class="bubble-top"></div>
<div class="message-content">
<p>
💩 I lost my 🚆 of 🤔
</p>
<p class="timestamp">14:27
<span>
<img src="https://static.fakewhats.com/images/iphone/check-read.png" alt="received">
</span>
</p>
</div>
<div class="bubble-bottom"></div>
</li>

</ul>
</div>
</div>
</section>

<div id="messages-bottom">
<div id="type-message" class="empty-message">
Text Message
</div>
</div>
</div>
</div>

<div class="bottom"></div>

</div>

<button>Start animation</button>
<script>
$("button").click(function () {
var numItems = $("li").size();
$("li").each(function (i) {
$(this).addClass("hide");
})
$("li").each(function (i) {
$(this).delay(1000 * (i + 1)).queue(function () {
$("#clock-result").text($(this).find(".timestamp").text());
$("#battery-percent-number").text(Math.round(26 - 0.3 * i));
if (i == numItems - 1) {
$("#type-message").text($(this).find(".message-content").find("p").first().text());
$("#type-message").removeClass("empty-message");
return;
}
$(this).removeClass("hide");
$(this).get(0).scrollIntoView(false);
})
})
});
</script>

</body>

</html>

0 comments on commit 930603a

Please sign in to comment.