CoderDeck

http://github.com/cykod/CoderDeck

The best way to teach the web is with the web.
Create interactive live-coding presentations.

Use the arrow-keys go between slides.

Basic Code Editor

Basic split code editor is created by adding a class of "coder-editor" to a textarea. Press run, then modify some code and press "run" again

<header>
  <h1>My Site!</h1>
  <nav><ul>
    <li><a href='#'>Link 1</a></li>
    <li><a href='#'>Link 2</a></li>
  </ul></nav>
</header>

<section id='content'>
  <article class='blog-post'>
    <h1>Blog Post 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
  </article>
</section>
<footer>
  <a href='#'>Link 1</a> | <a href='#'>Link 2</a>
</footer>

How to use it?

Download a release and modify the index.html with your slide. Slides are created with by adding a class='slide' to any element. CoderDeck areas are created by adding a class of 'coder-editor' to a text area, for example (prettyprint is also bundled, so, as below just use a <pre class='prettyprint'>.. to highlight static code):

<article class='slide slide-list'>
  <h2>This is a second level heading!</h2>
  <p>Here is some descriptive text, followed by a split editor. </p>
  <textarea class='coder-editor'>
    <script>
       alert("Yay!");
    </script> 
  <textarea>
</article>

Full Page Code Editor

Basic full page code editor is created by adding a class of "coder-editor-full" along with "coder-editor" to a textarea. Press run, then press "back", then modify some code and press "run" again

<header>
  <h1>My Site!</h1>
  <nav><ul>
    <li><a href='#'>Link 1</a></li>
    <li><a href='#'>Link 2</a></li>
  </ul></nav>
</header>

<section id='content'>
  <article class='blog-post'>
    <h1>Blog Post 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
  </article>
</section>
<footer>
  <a href='#'>Link 1</a> | <a href='#'>Link 2</a>
</footer>

Pulling from Gists

Use a class of 'gist' and an attribute of data-gist-id for the Gist ID

Custom template and custom language

You can create custom reusable templates for wrapping the editor code with custom <script> tags. You can also specify the mode the editor should display (xml, css, javascript or the default htmlmixed )

h1 { color:blue; }
h2 { color:red;}
p  { color:pink;}
.stuff  { color:purple;}
#my-div { color:teal;}

Instant Update Sample

Try modifying any of the HTML on the left, the right side should updated periodically as you type. This is done by adding a class of "coder-editor-instant" to the textarea

h1 { color:blue; }
h2 { color:red;}
p  { color:pink;}
.stuff  { color:purple;}
#my-div { color:teal;}

Javascript/jQuery Example

Javascript works normally as well, libraries and external css (including jquery) can be included in the coderdeck template.

<script>
  $(function() {
    $(".box").animate({ 
        'top':"50%", 
        'left':"50%" });
  });
</script>
<style>
  .box { 
    top:0px; left:0px;
    width:50px; height:50px; 
    position:absolute; 
    background-color:red;
  }
</style>
<div class='box'></div>

Local Storage

If you want your changes to a slide to survive between page reloads you can define a data-save attribute which will save it to the attributes value in localstorage. Make a code change, hit run/save and reload this slide.

You can also use the same 'data-save' attribute on mulitiple slides to keep the same code moving forwad

  <h1>This is some dummy content..</h1>

Solutions

If you want to add a solution to an exercise, you can add a coderdeck-solution script tag in the slide


<script>
    // Display an alert message
    // if a confirm dialog returns true
</script>