TryITJS - What is it

Problem statement

Documenting JS Libraries

API docs are hard to digest

So Much To Read

We all know developers are bust, and documenting API is hard to do. Let's face it reading somebody else's code is hard particularly if the API is anyting other than small and simple.

It is often harder to write documentation for a function than it is to write the function in the first place. Most often the doctment barely enough to even understant the simple usage of the API. But ther is one saving grace - developers love to tinker with som code that is known to work.

Developers love to play with code
Make displaying data simple

Page - 1

Solution option

Jsfiddle JSBin

Jupyter Notebook (for Javascript)

TryiyJS

KISS principle
Tools you know
Javascript
Markdown
HTML
Scalable

Page - 2

TryItJs Tutorial

This is an interactive tutorial on how TryItJS can be use to document a API.

Introduction

Simple tool to help JavaScript module developers to provide tutorials for the library. It generates a standalone HTML file that behaves like a Jypyter Notebook

An example of a tryit block

You can edit and run the code below and display the result.

Jupyter Notebook

Jupyter is a great way of playing with javascript libraries (or any other langeage supported). You can build well crafted tutorials with code examples that can play with all in the browser. The real downside is that the jupyter environment has to be setup locally. It takes substantial knowledge and effort to setup a Jupyter environment. Further, it takes yet more effort to setup everything required to test a library.

Why TryITJs

Lets Begin

Simple API Project

Lodash Tutorial

Another block

!head --- to be a page this must be at the top of the page
  <!-- add a title -->;
  <title>Test Tryit</title>
  <!-- add some custon scripts, in this case the lodash library -->

  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/styles/solarized-light.min.css">
  <!-- some in-line script -->

  <script>
  let words = ['sky', 'wood', 'forest', 'falcon', 
      'pear', 'ocean', 'universe'];
  </script>
  <!-- end of the inline script -->

!md
## Simple API Project

## [Lodash Tutorial](./lodash.html)
!html
   </div>
    
      <iframe width="560" height="315" 
        src="https://www.youtube.com/embed/0pcOxoPJ7-U" frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
      </iframe>
    </div>
    </div>


    @@include xxx.try  --- this includes the body of the file 'xxx.tyy' here (a page fragment)

!tryit 
var x = 5; // var decl (full file scope)
let y = '10'; // scope of this code snippet    

!end --- end of the file
    ... HTML ot add to the bottom of the page goes here...

Simple API Project

Lodash Tutorial

Page - 3