catalog/hazel.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Hazel - 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" />
</head>

<body>
	<article>
		<div id="title" style=" cursor: pointer;" onclick="window.location.href='./'">
			<div id="the">The</div>
			<br>
      <div id="wholecode">Whole Code</div>
      <br>
      <div id="catalog">Catalog</div>
    </div>
      <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 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>
        <h2 id="incomplete">Live evaluation of incomplete terms</h2>
        <p>Evaluation continues around "empty holes". Unfinished terms are evaluated as far as they can be.</p>
        <img src="https://user-images.githubusercontent.com/2288939/61526924-a6282b00-aa1b-11e9-87d7-aa1793540d0a.png">
      </section>

      <section>
        <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="rich">Rich type input</h2>
        <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 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>
        <h2 id="collaboration">Collaboration</h2>
        <p>The Hazel project also features a semantics for editing programs, which
          makes merging code much more semantic than diffing lines of syntax. For example, a rename operation is semantically one operation, not seperate changes everywhere the name is referenced. They have modeled their code data structure as a CRDT which easily allows for Google-docs-style collaboration.</p>
      </section>

      <section>
        <h2 id="further-reading">Further Reading</h2>
        <ul>
          <li><a href="http://hazel.org/">The Hazel Project Website</a></li>
          <li><a href="https://futureofcoding.org/episodes/039">Future of Coding Episode 39 - Mathematical Foundations for the Activity of Programming: Cyrus Omar</a></li>
        </ul>      
      </section>
    </article>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-103157758-1', 'auto');
      ga('send', 'pageview');
    </script>
  </body>
</html>