Fun tool to simulate live coding Frontend technologies: HTML, CSS and Javascript. That means, You don't actually have to code yourself, just pass a program and LiveCoder will do the job for you. No more unexpecteds, typos, exceptions, etc... You prepare the program, making sure everything works fine, and your presentation is ready to go :-)
I always found live coding a great way to present ideas. But we're human, and we make mistakes, above all when there are people watching us. It could be somewhat intimidating... At the same time, I always thought how cool would be if a program could implement other programs in real time :-P
Write HTML, CSS and/or Javascript as a string in a variable or text file separating each technology using the following directives (starting always with three dashes ---
):
--- css: will add the following css in a <style>
element.
--- html: will add the following html in the <default-container>
element (see CoderConfig below).
--- js: will add the following javascript code in a <script>
element.
--- apply: will append the last element being processed to the DOM, which will be parsed and executed.
--- promise(or await):promiseVar: will pause LiveCoder until promiseVar
is resolved (or rejected).
--- css:apply: will append the <style>
element to the DOM right away, making the browser parse the styles as the css is written.
--- html:apply: same effect, although it doesn't look too nice since you'll see angle brackes "<", "</" appearing and disappearing as the html is added.
--- html:tag: will add the following html in the element <tag>
. If it doesn't exist in the DOM, it'll be created and added to the <default-container>
element.
--- html:tag#id: <tag id="id">
--- html:tag.class: <tag class="class">
--- html:#id: <div id="id">
--- html:.class: <tag class="class">
--- html:tag.class:apply: <tag class="class">
with apply
After an apply, if the following block is the same (css, html or js) as the previous one, you don't need to specify again the type of block. For example:
--- css
body { background-color: lightblue; }
--- apply
h1 { margin: 4px; }
h2 { margin: 2px; }
--- apply
Best is to have a look at the example to better understand how it works.
$ git clone https://github.com/jscriptcoder/live-coder.git
$ cd live-coder
$ npm install
$ npm start
Syntax
constructor(config: CoderConfig = {})
Example
var liveCoder = new Live.Coder({
typingSpeed: 30,
paused: true
});
Option | Type | Default | Description |
---|---|---|---|
displayClass? | string | "live-coder__display" | Class name used for the display element |
defaultContainer? | string | "default-container" | Tag used as default container for other elements |
typingSpeed? | number | 50 | Milliseconds between characters |
pauseOnClick? | boolean | true | Pauses/resumes when clicking on the document |
paused? | boolean | false | If true, the program is initially paused |
writeChar? | Function | See here | Allows you to set your own code writer (e.g Syntax highlight) |
? optional
Syntax
public run(code: string = ''): Promise<any>
Example
// Runs a program returning a promise that will be
// resolved when the program is finished
liveCoder.run(program)
.then(() => console.log('Program finished.'));
Syntax
public setTypingSpeed(typingSpeed: number): void
Example
liveCoder.setTypingSpeed(10); // Changes the typing speed
Syntax
public setWriteChar(writeChar: {(char: string, $code: HTMLElement): void}): void
Example
// You can pass your custom code-writer
// For example, you might want syntax highlighting
liveCoder.setWriteChar(function (char, $code) {
$code.innerHTML = highlight($code.textContent + char);
});
Syntax
public pause(timeout?: number): void
Example
liveCoder.pause(); // Pauses the program indefinitely
liveCoder.pause(2000); // Pauses the program for 2 seconds
Syntax
public resume(): void
Example
liveCoder.resume(); // Resumes the program
Syntax - Deferred - Mozilla | MDN
public getDeferredPromise(): Deferred<any>
Example
const deferred = liveCoder.getDeferredPromise();
deferred.promise.then(() => console.log('Promise resolved'));
setTimeout(() => deferred.resolve(), 3000);
Syntax
public loadStyle(url: string): void
Example
liveCoder.loadStyle('http://www.example.com/styles.css'); // Loads a stylesheet
Syntax
public loadScript(url: string): Promise<any>
Example
// Loads a Javascdript files returning a promise that
// will be resolved once the script is loaded
liveCoder.loadScript('http://www.example.com/script.js')
.then(() => console.log('Script loaded.'));
Syntax
public destroy(): void
Example
liveCoder.destroy(); // Frees resources