Skip to content

Instantly share code, notes, and snippets.

@stolksdorf

stolksdorf/js_pad.md

Last active August 22, 2021 18:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save stolksdorf/258774eaa531b52aae4b269da1009b0c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save stolksdorf/258774eaa531b52aae4b269da1009b0c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. stolksdorf revised this gist Aug 22, 2021. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions js_pad.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,6 +9,12 @@ Make a new bookmark, then copy and paste this as the URL:
    #### how it works
    uses `contenteditable` to make the root `html` element edittable. On every keypress it `eval`s the page's content. Changes the text color if it's valid code or not. Open dev tools and use `console.log` to see the results for your code.


    - [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported
    - [x] list syntax required (any unordered or ordered list supported)
    - [x] this is a complete item
    - [ ] this is an incomplete item

    #### readable code
    ```html
    data:text/html,<html contenteditable onkeyup="try{
  2. stolksdorf revised this gist May 29, 2020. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion js_pad.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,10 @@ Make a new bookmark, then copy and paste this as the URL:

    `data:text/html,<html contenteditable onkeyup="try{this.style.color='rgb(240,239,208)';console.clear();eval(this.innerText);}catch(err){this.style.color='rgb(223,175,143)';console.log(err);}"><title>js_pad</title><style>html{background:rgb(63,63,63);color:rgb(240,239,208);font-size:1.5em;font-family:Monospace}</style></html>`

    readable code
    #### how it works
    uses `contenteditable` to make the root `html` element edittable. On every keypress it `eval`s the page's content. Changes the text color if it's valid code or not. Open dev tools and use `console.log` to see the results for your code.

    #### readable code
    ```html
    data:text/html,<html contenteditable onkeyup="try{
    this.style.color='rgb(240,239,208)';
  3. stolksdorf revised this gist May 29, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion js_pad.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@
    Make a new bookmark, then copy and paste this as the URL:

    `data:text/html,<html contenteditable onkeyup="try{this.style.color='rgb(240,239,208\)';console.clear(\);eval(this.innerText\);}catch(err\){this.style.color='rgb(223,175,143\)';console.log(err\);}"><title>js_pad</title><style>html{background:rgb(63,63,63\);color:rgb(240,239,208\);font-size:1.5em;font-family:Monospace}</style></html>`
    `data:text/html,<html contenteditable onkeyup="try{this.style.color='rgb(240,239,208)';console.clear();eval(this.innerText);}catch(err){this.style.color='rgb(223,175,143)';console.log(err);}"><title>js_pad</title><style>html{background:rgb(63,63,63);color:rgb(240,239,208);font-size:1.5em;font-family:Monospace}</style></html>`

    readable code
    ```html
  4. stolksdorf revised this gist May 29, 2020. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions js_pad.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,10 @@
    ### `js_pad`

    a micro javascript sandbox to play around in
    > a micro javascript sandbox to play around in
    Drag this link to your bookmark bar.
    Make a new bookmark, then copy and paste this as the URL:

    [js_pad](data:text/html,%3Chtml%20contenteditable%20onkeyup%3D%22try%7Bthis.style.color%3D%27rgb%28240%2C239%2C208%5C%29%27%3Bconsole.clear%28%5C%29%3Beval%28this.innerText%5C%29%3B%7Dcatch%28err%5C%29%7Bthis.style.color%3D%27rgb%28223%2C175%2C143%5C%29%27%3Bconsole.log%28err%5C%29%3B%7D%22%3E%3Ctitle%3Ejs_pad%3C%2Ftitle%3E%3Cstyle%3Ehtml%7Bbackground%3Argb%2863%2C63%2C63%5C%29%3Bcolor%3Argb%28240%2C239%2C208%5C%29%3Bfont-size%3A1.5em%3Bfont-family%3AMonospace%7D%3C%2Fstyle%3E%3C%2Fhtml%3E)
    `data:text/html,<html contenteditable onkeyup="try{this.style.color='rgb(240,239,208\)';console.clear(\);eval(this.innerText\);}catch(err\){this.style.color='rgb(223,175,143\)';console.log(err\);}"><title>js_pad</title><style>html{background:rgb(63,63,63\);color:rgb(240,239,208\);font-size:1.5em;font-family:Monospace}</style></html>`

    readable code
    ```html
  5. stolksdorf revised this gist May 29, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion js_pad.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ a micro javascript sandbox to play around in

    Drag this link to your bookmark bar.

    [js_pad](data%3Atext%2Fhtml%2C%3Chtml%20contenteditable%20onkeyup%3D%22try%7Bthis.style.color%3D%27rgb%28240%2C239%2C208%5C%29%27%3Bconsole.clear%28%5C%29%3Beval%28this.innerText%5C%29%3B%7Dcatch%28err%5C%29%7Bthis.style.color%3D%27rgb%28223%2C175%2C143%5C%29%27%3Bconsole.log%28err%5C%29%3B%7D%22%3E%3Ctitle%3Ejs_pad%3C%2Ftitle%3E%3Cstyle%3Ehtml%7Bbackground%3Argb%2863%2C63%2C63%5C%29%3Bcolor%3Argb%28240%2C239%2C208%5C%29%3Bfont-size%3A1.5em%3Bfont-family%3AMonospace%7D%3C%2Fstyle%3E%3C%2Fhtml%3E)
    [js_pad](data:text/html,%3Chtml%20contenteditable%20onkeyup%3D%22try%7Bthis.style.color%3D%27rgb%28240%2C239%2C208%5C%29%27%3Bconsole.clear%28%5C%29%3Beval%28this.innerText%5C%29%3B%7Dcatch%28err%5C%29%7Bthis.style.color%3D%27rgb%28223%2C175%2C143%5C%29%27%3Bconsole.log%28err%5C%29%3B%7D%22%3E%3Ctitle%3Ejs_pad%3C%2Ftitle%3E%3Cstyle%3Ehtml%7Bbackground%3Argb%2863%2C63%2C63%5C%29%3Bcolor%3Argb%28240%2C239%2C208%5C%29%3Bfont-size%3A1.5em%3Bfont-family%3AMonospace%7D%3C%2Fstyle%3E%3C%2Fhtml%3E)

    readable code
    ```html
  6. stolksdorf revised this gist May 29, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion js_pad.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ a micro javascript sandbox to play around in

    Drag this link to your bookmark bar.

    [js_pad](data:text/html,<html contenteditable onkeyup="try{this.style.color='rgb(240,239,208\)';console.clear(\);eval(this.innerText\);}catch(err\){this.style.color='rgb(223,175,143\)';console.log(err\);}"><title>js_pad</title><style>html{background:rgb(63,63,63\);color:rgb(240,239,208\);font-size:1.5em;font-family:Monospace}</style></html>)
    [js_pad](data%3Atext%2Fhtml%2C%3Chtml%20contenteditable%20onkeyup%3D%22try%7Bthis.style.color%3D%27rgb%28240%2C239%2C208%5C%29%27%3Bconsole.clear%28%5C%29%3Beval%28this.innerText%5C%29%3B%7Dcatch%28err%5C%29%7Bthis.style.color%3D%27rgb%28223%2C175%2C143%5C%29%27%3Bconsole.log%28err%5C%29%3B%7D%22%3E%3Ctitle%3Ejs_pad%3C%2Ftitle%3E%3Cstyle%3Ehtml%7Bbackground%3Argb%2863%2C63%2C63%5C%29%3Bcolor%3Argb%28240%2C239%2C208%5C%29%3Bfont-size%3A1.5em%3Bfont-family%3AMonospace%7D%3C%2Fstyle%3E%3C%2Fhtml%3E)

    readable code
    ```html
  7. stolksdorf revised this gist May 29, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion js_pad.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ a micro javascript sandbox to play around in

    Drag this link to your bookmark bar.

    [js_pad](data:text/html,<html contenteditable onkeyup="try{this.style.color='rgb\(240,239,208)';console.clear\();eval\(this.innerText);}catch\(err){this.style.color='rgb\(223,175,143)';console.log\(err);}"><title>js_pad</title><style>html{background:rgb\(63,63,63);color:rgb\(240,239,208);font-size:1.5em;font-family:Monospace}</style></html>)
    [js_pad](data:text/html,<html contenteditable onkeyup="try{this.style.color='rgb(240,239,208\)';console.clear(\);eval(this.innerText\);}catch(err\){this.style.color='rgb(223,175,143\)';console.log(err\);}"><title>js_pad</title><style>html{background:rgb(63,63,63\);color:rgb(240,239,208\);font-size:1.5em;font-family:Monospace}</style></html>)

    readable code
    ```html
  8. stolksdorf revised this gist May 29, 2020. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion js_pad.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,8 @@
    a micro javascript sandbox to play around in

    Drag this link to your bookmark bar.
    <a href="data:text/html,<html contenteditable onkeyup='try{this.style.color=\'rgb(240,239,208)\';console.clear();eval(this.innerText);}catch(err){this.style.color=\'rgb(223,175,143)\';console.log(err);}'><title>js_pad</title><style>html{background:rgb(63,63,63);color:rgb(240,239,208);font-size:1.5em;font-family:Monospace}</style></html>">js_pad</a>

    [js_pad](data:text/html,<html contenteditable onkeyup="try{this.style.color='rgb\(240,239,208)';console.clear\();eval\(this.innerText);}catch\(err){this.style.color='rgb\(223,175,143)';console.log\(err);}"><title>js_pad</title><style>html{background:rgb\(63,63,63);color:rgb\(240,239,208);font-size:1.5em;font-family:Monospace}</style></html>)

    readable code
    ```html
  9. stolksdorf revised this gist May 29, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion js_pad.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    a micro javascript sandbox to play around in

    Drag this link to your bookmark bar.
    <a href="data:text/html,<html contenteditable onkeyup=\"try{this.style.color='rgb(240,239,208)';console.clear();eval(this.innerText);}catch(err){this.style.color='rgb(223,175,143)';console.log(err);}\"><title>js_pad</title><style>html{background:rgb(63,63,63);color:rgb(240,239,208);font-size:1.5em;font-family:Monospace}</style></html>">js_pad</a>
    <a href="data:text/html,<html contenteditable onkeyup='try{this.style.color=\'rgb(240,239,208)\';console.clear();eval(this.innerText);}catch(err){this.style.color=\'rgb(223,175,143)\';console.log(err);}'><title>js_pad</title><style>html{background:rgb(63,63,63);color:rgb(240,239,208);font-size:1.5em;font-family:Monospace}</style></html>">js_pad</a>

    readable code
    ```html
  10. stolksdorf revised this gist May 29, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion js_pad.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    a micro javascript sandbox to play around in

    Drag this link to your bookmark bar.
    <a href="data:text/html,<html contenteditable onkeyup="try{this.style.color='rgb(240,239,208)';console.clear();eval(this.innerText);}catch(err){this.style.color='rgb(223,175,143)';console.log(err);}"><title>js_pad</title><style>html{background:rgb(63,63,63);color:rgb(240,239,208);font-size:1.5em;font-family:Monospace}</style></html>">js_pad</a>
    <a href="data:text/html,<html contenteditable onkeyup=\"try{this.style.color='rgb(240,239,208)';console.clear();eval(this.innerText);}catch(err){this.style.color='rgb(223,175,143)';console.log(err);}\"><title>js_pad</title><style>html{background:rgb(63,63,63);color:rgb(240,239,208);font-size:1.5em;font-family:Monospace}</style></html>">js_pad</a>

    readable code
    ```html
  11. stolksdorf revised this gist May 29, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion js_pad.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    a micro javascript sandbox to play around in

    Drag this link to your bookmark bar.
    [js_pad](data:text/html,<html contenteditable onkeyup="try{this.style.color='rgb(240,239,208)';console.clear();eval(this.innerText);}catch(err){this.style.color='rgb(223,175,143)';console.log(err);}"><title>js_pad</title><style>html{background:rgb(63,63,63);color:rgb(240,239,208);font-size:1.5em;font-family:Monospace}</style></html>)
    <a href="data:text/html,<html contenteditable onkeyup="try{this.style.color='rgb(240,239,208)';console.clear();eval(this.innerText);}catch(err){this.style.color='rgb(223,175,143)';console.log(err);}"><title>js_pad</title><style>html{background:rgb(63,63,63);color:rgb(240,239,208);font-size:1.5em;font-family:Monospace}</style></html>">js_pad</a>

    readable code
    ```html
  12. stolksdorf created this gist May 29, 2020.
    28 changes: 28 additions & 0 deletions js_pad.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    ### `js_pad`

    a micro javascript sandbox to play around in

    Drag this link to your bookmark bar.
    [js_pad](data:text/html,<html contenteditable onkeyup="try{this.style.color='rgb(240,239,208)';console.clear();eval(this.innerText);}catch(err){this.style.color='rgb(223,175,143)';console.log(err);}"><title>js_pad</title><style>html{background:rgb(63,63,63);color:rgb(240,239,208);font-size:1.5em;font-family:Monospace}</style></html>)

    readable code
    ```html
    data:text/html,<html contenteditable onkeyup="try{
    this.style.color='rgb(240,239,208)';
    console.clear();
    eval(this.innerText);
    }catch(err){
    this.style.color='rgb(223,175,143)';
    console.log(err);
    }">
    <title>js_pad</title>
    <style>
    html{
    background:rgb(63,63,63);
    color:rgb(240,239,208);
    font-size:1.5em;
    font-family:Monospace
    }
    </style>
    </html>
    ```