Skip to content
Permalink
Browse files

catalog final polish before launch

  • Loading branch information...
Steve Krouse
Steve Krouse committed Sep 9, 2019
1 parent 5f67c79 commit 73a119a29d4afd39f6fa9e5c76f28c5e1fa7dc99
@@ -7,7 +7,7 @@
<title>Eve - The Whole Code Catalog</title>
<link href="https://fonts.googleapis.com/css?family=Crimson+Text|Noto+Serif+JP&display=swap" rel="stylesheet">
<link href="shared.css" rel="stylesheet" type="text/css" />
<link href="article.css" rel="stylesheet" type="text/css" />
<link href="article.css" rel="stylesheet [" type="text/css" />
</head>

<body>
@@ -57,19 +57,19 @@ <h2 id="unified">Unified API</h2>
</section>

<section>
<h2 id="TODO">Intelligent Inspector</h2>
<p>The Eve inspector shows what the browser devtools inspector could be with a more unified tech stack. When you click on a place in the UI, it can take you the various places in the code that could be relevant.</p>
<h2 id="inspector">Intelligent Inspector</h2>
<p>When you "inspect" a place in the UI, it takes you the various places in the code that could be relevant.</p>
<iframe class="video" src="https://www.youtube.com/embed/JJk9PTzz_8M?controls=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>

<section>
<h2 id="wishes">Wishes</h2>
<ul>
<li>Much, much fewer bugs</li>
<li>Fewer bugs</li>
<li>Better docs</li>
<li>More displayed live data of code execution</li>
<li>Autocomplete in the editor</li>
<li>Better messaging that nothing is changing due to the set-based nature of the language</li>
<li>Better messaging when nothing is changing due to the set-based nature of the language</li>
</ul>
</section>

@@ -82,7 +82,7 @@ <h2 id="further-reading">Further Reading</h2>
<li><a href="https://www.chris-granger.com/2015/01/26/coding-is-not-the-new-literacy/">Coding is not the new literacy</a></li>
<li><a href="https://www.chris-granger.com/2016/07/21/two-years-of-eve/">Two years of Eve</a></li>
<li><a href="https://groups.google.com/forum/#!topic/eve-talk/YFguOGkNrBo">Eve is winding down</a></li>
<li><a href="https://github.com/witheve/eve-experiments/blob/90a6c6bc4597572a29c72119fc7bb964426f8107/design/bibliography.md"></a></li>
<li><a href="https://github.com/witheve/eve-experiments/blob/90a6c6bc4597572a29c72119fc7bb964426f8107/design/bibliography.md">Eve Bibliography</a></li>
</ul>
</section>
</article>
@@ -22,22 +22,22 @@
<section>
<h1 id="glitch">Glitch</h1>
<em>Reviewed July 24, 2019</em>
<p>Glitch is a collaborative online IDE for creating NodeJS apps. It also features a community to explore and remix others' creations. There's no deploy button: the tool reloads itself every few keystrokes. It was founded by Fog Creek Software (Trello, StackOverflow) in 2017 and raised $30M. They company has a focus on diversity and inclusion, both on its internal team and Glitch's app community.</p>
<p>Glitch is a collaborative online IDE for creating NodeJS apps. It also features a community for exploring and remixing others' creations. There's no deploy button: the tool reloads itself every few keystrokes. It was founded by Fog Creek Software (Trello, StackOverflow) in 2017 and raised $30M.</p>
</section>

<section>
<h2 id="productfeel">Product Feel</h2>
<ul>
<li>👍 Easy to get started and play around with community projects</li>
<li>👎 Hobbyist: toy version control, <a href=""http://help-center.glitch.me/help/restrictions/">toy deployment</a></li>
<li>👎 Lame: childish graphics, tutorials and videos</li>
<li>👎 Hobbyist: toy version control, <a href="http://help-center.glitch.me/help/restrictions/">toy deployment</a></li>
<li>👎 Corny aesthetic</li>
</ul>
</section>

<section>
<h2 id="basicusage">Basic Usage</h2>
<iframe class="loom" src="https://www.loom.com/embed/5d5d9dfac29b46c287bdadcf452b30a0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>The above video produces <a href="https://glitch.com/edit/#!/stream-capybara">a simple webpage that counts the number of times its been loaded</a>. It demonstrates:</p>
<p>The above video produces <a href="https://glitch.com/edit/#!/stream-capybara">a simple webpage that counts the number of times it's been loaded</a>. It demonstrates:</p>
<ul>
<li>automatic app reload every couple keystrokes</li>
<li>errors in the preview pane and inline</li>
@@ -46,7 +46,7 @@ <h2 id="basicusage">Basic Usage</h2>

<section>
<h2 id="version-control">Visual Version Control</h2>
<p>Built on top of git, Glitch's visual version control tries to make it easier for beginners to rollback to earlier versions. They commit ("checkpoint") code every couple changes / minutes, but don't seem to handle forks. I found it confusing and would prefer either Google-docs-style revision history or Github-style branching diagram.
<p>Built on top of git, Glitch's visual version control tries to make it easier for beginners to rollback to earlier versions. It commits code every couple changes. It doesn't seem to handle forks. I found it confusing and would prefer either Google-docs-style revision history or a Github-style branching diagram.
</p>
<img src="https://user-images.githubusercontent.com/2288939/61523885-8130b980-aa15-11e9-8f45-b85fdb3bf3bd.png">
</section>
@@ -59,7 +59,7 @@ <h2 id="get-help">Get Help</h2>

<section>
<h2 id="collab">Google-docs-style Collaboration</h2>
<p>I can imagine this would be amazing for hackathons or other forms of close collaboration on a small project. However, I worry about larger projects with 2+ people working on different parts at the same time.</p>
<p>I can imagine this would be amazing for hackathons or other forms of close collaboration on a small project. However, I worry about larger projects with 2+ people working on different parts of a NodeJS app at the same time.</p>
</section>

<section>
@@ -22,7 +22,7 @@
<section>
<h1 id="hazel">Hazel</h1>
<em>Reviewed July 24, 2019</em>
<p>While computer science theory normally analyzes complete and valid programs, the activity of programming consists mostly of incomplete and invalid programs. Hazel is an academic research project that is providing mathematical foundations for incomplete and invalid programs with the aim of improving the experience of programming through improved developer tool services. For example, Hazel provides a semantics for partially evaluating incomplete and invalid expressions. The Hazel project also features an experimental structured editor with a focus on fluid editing and rich input types.</p>
<p>While computer science theory normally analyzes complete and valid programs, the activity of programming consists mostly of incomplete and invalid programs. Hazel is an academic research project by Cyrus Omar that is providing mathematical foundations for incomplete and invalid programs with the aim of improving the experience of programming through improved developer tool services. For example, Hazel provides a semantics for partially evaluating incomplete and invalid expressions. The Hazel project also features an experimental structured editor with a focus on fluid editing and rich input types.</p>
</section>

<section>
@@ -36,21 +36,15 @@ <h2 id="type-data">Type errors with live data</h2>
<p>Type errors render as partially evaluated expressions with incompatible types being treated as "non-empty holes" and outlined in red.</p>
<img src="https://user-images.githubusercontent.com/2288939/61526936-aaecdf00-aa1b-11e9-985d-a2ded9ff6593.png">
</section>

<section>
<h2 id="guidance">Guidance for incomplete terms</h2>
<p>Eventually the semantic information Hazel will inform an "intelligent programmer’s assistant." <a href="https://github.com/cyrus-/papers/blob/master/syzygy/syzygy.pdf">They found</a> "the use of type and context is several times more accurate...” and that 90% accuracy for variable predictions was "not uncommon".</p>
<img src="https://user-images.githubusercontent.com/2288939/61526953-b04a2980-aa1b-11e9-8d0a-81b5efc9a9f6.png">
</section>

<section>
<h2 id="rich">Rich type input</h2>
<p>Their structured editor will allow projections for various kinds of data (tables, inputs, pictures, JSON, etc). <a href="https://www.youtube.com/watch?v=gOSlR62-rd8">A former project of Cyrus's</a> featured an IDE-embedded color picker and regex tester.</p>
<p>The Hazel structured editor allows for various kinds of rich data (tables, inputs, pictures, JSON, etc). <a href="https://www.youtube.com/watch?v=gOSlR62-rd8">A former project of Cyrus's</a> featured an IDE-embedded color picker and regex tester.</p>
</section>

<section>
<h2 id="fluid">Fluid Structured Editing</h2>
<p>Influenced by work by the mbeddr team, terms in Hazel can be constructed in any order (even from inside-out) and can be used before they are defined.</p>
<p>Influenced by work of the mbeddr team, terms in Hazel can be constructed in any order (even from inside-out) and can be used before they are defined.</p>
</section>

<section>
@@ -57,7 +57,7 @@ <h2 id="levels">User Levels</h2>

<section>
<h2 id="syntax">English-like syntax</h2>
<p>Trying to bring programming to "the rest of us", HyperTalk is renowned for its English-like syntax. A common example of HyperTalk's readability is line: <code>put the first word of the third line of field "hello" into field "goodbye"</code>. The numbers <code>1</code> and <code>2</code> can also be referenced with <code>one</code> and <code>two</code> or <code>first</code> and <code>second</code>.</p>
<p>Trying to bring programming to "the rest of us", HyperTalk is renowned for its English-like syntax. A common example of HyperTalk's readability is the line: <code>put the first word of the third line of field "hello" into field "goodbye"</code>. The numbers <code>1</code> and <code>2</code> can be referenced with <code>one</code> and <code>two</code> or <code>first</code> and <code>second</code>.</p>
</section>

<section>
@@ -28,10 +28,10 @@ <h1 id="lamdu">Lamdu</h1>
<section>
<h2 id="productfeel">Product Feel</h2>
<ul>
<li>👍 Comittment to showing all live intermediate values</li>
<li>👍 Fine-granularity ctrl-z is key to undo my constant mistakes</li>
<li>👍 One of the more usable structural editors</li>
<li>👎 Always getting into strange editing modes</li>
<li>👍 Shows all live intermediate values</li>
<li>👍 Fine-granularity ctrl-z is key</li>
<li>👍 One of the most usable structural editors</li>
<li>👎 Often getting into strange editing modes</li>
</ul>
</section>

@@ -46,7 +46,7 @@ <h2 id="basicusage">Basic Usage</h2>
<li>exploring the intermediate results via the subexpression annotations</li>
<li>filtering a list</li>
<li>converting a lazy list to an array to preview it</li>
<li>my struggle to get *2 to apply to an argument and not the result of the function</li>
<li>my struggle to get <code>*2</code> to apply to an argument and not the result of the function</li>
<li>changing the display of a function to infix and OOP-style</li>
<li>filtering via a first class function</li>
<li>abstracting out an expression into a global variable</li>
@@ -75,7 +75,7 @@ <h2 id="basicusage">Basic Usage</h2>

<section>
<h2 id="live">Live data</h2>
<p>It's extremely rare to see live-evaluated subexpression annotations, particularly in non-visual languages. Some non-visual languages, put the results of whole lines off to the side, but Lamdu is one of the first to publish a working implementation of underlined evaluation of all intermediate subexpressions. This goals a long way towards making functional programming understandable for beginners.
<p>It's extremely rare to see live-evaluated subexpression annotations, particularly in languages with a textual representation. Some non-visual languages put the results of whole lines off to the side, but Lamdu is one of the first to publish a working implementation of underlined evaluation of all intermediate subexpressions. This goes a long way towards making functional programming understandable for beginners.
</p>
<img style="max-width:500px" src="https://user-images.githubusercontent.com/2288939/62528697-2f6d9900-b835-11e9-9b58-688e9a55772a.png"></img>
</section>
@@ -111,7 +111,6 @@ <h2 id="wishes">Wishes</h2>
<ul>
<li>Caching previous HTTP request runs to show live data when editing</li>
<li>Autocomplete suggestions to be WYSIWYG (instead of the star and green color to indicate where expressions and the cursor will go)</li>
<li></li>
</section>

<section>
@@ -22,17 +22,18 @@
<section>
<h1 id="luna">Luna</h1>
<em>Reviewed July 18, 2019</em>
<p>Luna is a Haskell-inspired functional programming language, with both node-and-wire and textual representations. Despite its visual environment, Luna is targeting a technical user base, and expects its users to be fluent in its textual language as well. Luna was designed with data processing in mind, for industries such as "data science, machine learning, IoT,Bioinformatics, computer graphics or architecture. The Luna Electron app was released and open-source in Jan 2018.</p>
<p>Luna is a Haskell-inspired functional programming language, with both a node-and-wire and a textual representations. Despite its visual environment, Luna is targeting a technical user base, and expects its users to be fluent in its textual language as well. Luna was designed with data processing in mind, for industries such as "data science, machine learning, IoT,Bioinformatics, computer graphics or architecture." The Luna Electron app was released and open-source in Jan 2018.</p>
<iframe class="video" src="https://www.youtube.com/embed/uBFQbYZG2Ik?autoplay=1&controls=0&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>

<section>
<h2 id="productfeel">Product Feel</h2>
<ul>
<li>👍 Intermediate results live-computed</li>
<li>👎 Cumbersome node editor. Not fluid.</li>
<li>👍 Slick app, visually appealing, clever design</li>
<li>👎 Cumbersome node editor</li>
<li>👎 Confusing type errors</li>
<li>👎 Crashes more than any other app I've ever used.</li>
<li>👎 Crashes more than any other app I've ever used</li>
</ul>
</section>

@@ -52,7 +53,7 @@ <h2 id="basicusage">Basic Usage</h2>

<section>
<h2 id="intermdiate">Strong visual metaphors for functions</h2>
<p>Inputs are to the left and output is to the right, in both the functions you’re using and defining. It feels like a fractal structure because every screen accepts inputs on the far-left and outs on the far-right, and in-between are function nodes that also accept their inputs on the left and outputs on the right.</p>
<p>Inputs are to the left and output is to the right, in both the functions you’re using and defining. It feels like a fractal structure because every screen accepts inputs on the far-left and ouputs on the far-right, and in-between are function nodes that also accept their inputs on the left and outputs on the right.</p>
<img src="https://user-images.githubusercontent.com/2288939/61533952-8b12e680-aa2e-11e9-88a4-b9f2da62ea49.png">
<p>You can select a number of nodes and hit the f-key to abstract them into a function. Luna intelligently figures out what inputs and outputs there are to your function, and hooks them up correctly. Below is Luna program where we want to abstract the middle five nodes:</p>
<img src="https://user-images.githubusercontent.com/2288939/61533958-8e0dd700-aa2e-11e9-8c03-521d4d964b0b.png">
@@ -62,13 +63,13 @@ <h2 id="intermdiate">Strong visual metaphors for functions</h2>

<section>
<h2 id="expression-editor">Intermediate results</h2>
<p>Live-updated intermediate values is a very compelling feature. The following video shows a stream of numbers which create an animation of a growing circle. Both the stream of numbers and the circle update live. In the vide, I mouse over both nodes to show their type signatures.</p>
<p>Live-updated intermediate values is a very compelling feature. The following video shows a stream of numbers which create an animation of a growing circle. Both the stream of numbers and the circle update live. In the video, I mouse over both nodes to show their type signatures.</p>
<iframe class="video" src="https://www.youtube.com/embed/GmnNPI9OMA4?controls=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>

<section>
<h2 id="expression-editor">Node expression editor</h2>
<p>Nodes in Luna can be arbitrary Luna expressions, which can be great for compactness. The following video demonstrates how their autocomplete pairs well with their dot-syntax which normally isn't found in functional languages. However, you may notice how selecting each autocomplete suggestion bounces me out of the textbox, and I have to scroll and double-click to resume typing.</p>
<p>Nodes in Luna can be arbitrary Luna expressions, which can be great for compactness. The following video demonstrates how their autocomplete functionality pairs well with their dot-syntax (which normally isn't found in functional languages). However, you may notice how selecting each autocomplete suggestion bounces me out of the textbox, and I have to scroll and double-click to resume typing.</p>
<iframe class="video" src="https://www.youtube.com/embed/br7Yl-DcjXA?controls=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>

0 comments on commit 73a119a

Please sign in to comment.
You can’t perform that action at this time.