├── .gitattributes ├── LICENSE ├── README.md ├── docs ├── CNAME ├── bg.jpg ├── favicon.ico ├── index.html ├── live.html ├── sequential.256x44.black.png └── third-party │ ├── ace │ └── 1.2.3 │ │ ├── ace.js │ │ ├── mode-html.js │ │ ├── mode-javascript.js │ │ ├── theme-dawn.js │ │ ├── theme-eclipse.js │ │ └── worker-javascript.js │ ├── lz-string │ └── 1.4.4 │ │ └── lz-string.min.js │ ├── normalize │ └── 7.0.0 │ │ └── normalize.min.css │ └── yeoman │ └── 3.2.0 │ └── stringifyObject.js └── sequential.png /.gitattributes: -------------------------------------------------------------------------------- 1 | *.md linguist-language=JavaScript 2 | *.png linguist-language=JavaScript -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 lorenzo puccetti 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |  2 | 3 | ## What does it do? 4 | 5 | sequential shows JavaScript code execution 6 | 7 | ```javascript 8 | var i=5/4; 9 | i++; 10 | console.log(i); 11 | // > 2.25 12 | ``` 13 | 14 | [live example](https://sequential.js.org/live.html#G4QwTgBAlgvArAegCwG4BQUDUn0GMD2AdgM74A2ApgHRn4DmAFFAJQpA) 15 | 16 | 17 | ## What is it for ? 18 | 19 | The purpose of sequential is to provide an environment to show JavaScript code execution in a browser. 20 | 21 | **sequential gives JavaScript authors the means to write the most concise and most natural _(i.e. sequential)_ script to present any JavaScript work.** 22 | 23 | A typical piece consists of all or some of those parts: 24 | 1. A comment describing what the code is about 25 | 2. The load function to access any external JavaScript library (commonly relying on CDN services like [rawgit](https://rawgit.com/), [cdnjs](https://cdnjs.com), [jsdelivr](https://www.jsdelivr.com/), [unpkg](https://unpkg.com/) and others) 26 | 3. JavaScript code to set a use case. 27 | 4. console.log calls to display the outcome. 28 | 29 | 30 | 31 | ## How does it compare with other code playgrounds such as codepen or jsfiddle ? 32 | 33 | Those are bigger _beasts_ than sequential: fully fledged solutions covering all aspects of Web Development (HTML, CSS, JavaScript). 34 | Instead, sequential focuses only on JavaScript execution without involving _(as mush as possible)_ any DOM object. 35 | 36 | ## The architecture. 37 | 38 | sequential is a complete client side solution, meaning that everything is running on the browser. 39 | The back-end (server) is only responsible to serve static resources (HTML, CSS, JavaScript and images) 40 | 41 | 42 | ## Roadmap 43 | 44 | It's a misty one but those are a few things I'd like to have: 45 | 46 | - Ability to easily embed on external site (e.g. IFrame , embed.ly, script ) 47 | - Ability to compare/diff executions (i.e. to highlight differences between browsers) 48 | 49 | ## Issues 50 | 51 | Report any issue using GitHub and use notifications to track progress on them. 52 | 53 | ## Contributing 54 | 55 | Want to hack on this project? Any kind of contribution is welcome! I am particularly interested in any JavaScript snippet you might want to share. 56 | 57 | 58 | ## License 59 | 60 | This project is licensed under the MIT license. 61 | 62 | -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | sequential.js.org -------------------------------------------------------------------------------- /docs/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lorenzoongithub/sequential/24f86ce3e83a8ab351be4d70226e17d5d13ac260/docs/bg.jpg -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lorenzoongithub/sequential/24f86ce3e83a8ab351be4d70226e17d5d13ac260/docs/favicon.ico -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 16 |load( urlString )
to load any external JavaScript libraryconsole.log( ... )
to display any valuable output from your code. Watch Out: you can only use it once