Click to show TOC

# 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.

let arr = [ 1, 2, 3]; // arr.map( x => x*2 )

### 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...

5

## Simple API Project

## Lodash Tutorial

Page - 3
Executing previous dependent scripts
Waiting to execute