5 ms·

Show HN: Flems.io – A Single File, Embeddable Web Sandbox

10 points by porsager 9y ago

pygy_ 9y ago
Here's a whack-a-mole game, derived from a fiddle from Julia Evans: https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ArMIA0IAZgJYy6oDaoAdgIYC2EamAFvPVPiLAPbWL9mAHhYAmAHwAdagAIA7i1qwA1jNoz6PGAEJpQgPRip1IQAdxAdUUqNWiGG0yAkoRkBPHgFcZAcwjwZeBYIejUoKDx3L3liagw9cwBZOzA1ACcIGR402mo-DBkAYShiGz5A4ND4HnlrVSCQ+Oo9JGIANxliJABeSRBaU1M+8QNWtvEQAF88GgYmdGxcAl5+CEF0fX0ZJAg09uQZADE0nlCAKU8S9QBRNtywAHIZEiQkGAAKNnhTMFRNnBebwgGGo-n0EAAzIQsAA2JAALwARvoAJTSO5pWwwAD6Pj2SBk3RkFGkMmJAAZIpSZOSALp4UkUqlU+mMigARmZMnZrOotOk6NomLk5SJhFoUEgAuohE81AQxHKijAFj47xRMmAjOIrne2hF1A1WtkZPkoqxEFx+IwEDauzc71l8vgiuo7xOchRxtNpoy8E8aVkHptdrSDqdCrVsGgUC9jJ9ZL9Adk0fChO6RPJ8dNkzRJrJucZk0ZScDZua1GLFYxtSUqiJ3pkbWIEDkqGecsjbqN2dLsmVqu7MmzZIA-Bp3g8xA9Ig8AJrRQcPDUjmTt+iT+C0REwGfD-MJzQ4vFdDD0AaOzsutUeyJuHsHhMyPtkjcPeBpPerp-B8+mS-Oq67yphEMgAB4Pk+PqSAEz7+MmE7vkge5vhgsDEGksC7pEjZQVBYDwG4MDtrheFQYidZ4l41BIIUWjZO2IHpkS7IyOODzZLkfhPO2Dw7nWDzfmR0xCXhfBYaUyjthG15DqRZGHnYVpdBQbi0hQYG0oSNKiVBVYKT6uZ5gpRlCYWj4yMZMhVlW0j0Ge1HwO8AymJECh1nm0gya6vj+AASrkSCnE4-DvPQsSROeEGaiW8FloktBBBghBQDw2TvAlSU5DRpzqjIABUMhhbQYEyAAtBosQohqADUlXUAA3NItnUDWxDaZA8AhYgaR3FAAFdnljY6kVA5qtVMUHlhEBCt1ux9e8xBWYmcUVgWjI1m42l+PAAU5fQ3XvNSR6WieSAYDAeRBFZNalUSO17UFB2hcdSlnRQdIXWsPjXYyJ3KUgqnqZp2nsn9GAZEgORyOqzWRAArOS5Iog1UwzCAdCMMwaFgEs3B8AI8DY+hmEwJNZKItkOxpGVOStJ4vwyIjACkTUmnIXRBO2iOmGBbNksExA+Gw3Pkrz-MyPohUc0gQRqDRMiC8LASwLkMiIpkuRuEEsQ+JEtCpKleRqKkDRuA8GQyBAACOngSgV+jNdIUz0iAJTUMo5BUCAAacOgXw-H8+hyqYyg+Ghpz6OFQR7FAAAC7IYIn7JcIRpjzCAOAu5MQA https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ArMIA0IAZgJYy6oDa... The UX is really nice. Open a link modify it a bit, <cmd> + L, <cmd> + C (or <ctrl>), and you've got a new URL ready to share your version.
pakx 9y ago
How about this for incestuous: a Flems of a HN reader, written in Mithril: http://yep.it/ckcpfi http://yep.it/ckcpfi
deleted 9y ago
[deleted]
dennisb 9y ago
Latest chrome on Android: ReferenceError: ohnoAnError is not defined at setTimeout (.js:14:8)
- pygy_ 9y ago
  I don't have an android phone at hand, but the error is supposed to be part of the demo. If it appears in the UI (below the code) it is normal. You can click the "at (.js:14:8)" link, you'll get the cursor on the problem line.
- st0le 9y ago
  I think that's deliberate.
TeddyBones 9y ago
This is great! I can see myself using this a lot. :)
lozzo 9y ago
This looks very interesting. Is the code on github ? and if not what's the reason ?
- porsager 9y ago
  Thanks for checking it out. Yeah, I'll put the code on github for the Flems module during the weekend. I think the intro might have been a bit confusing as there's actually 2 parts to this. Flems the module: A "js webapp / module" named Flems, which is a Web sandbox/playground that can easily be customized through options & embedded on any site (think programatically setting up playgrounds for example code in documentation etc.). Flems.io the website: Then there's Flems.io which was launched here, that is a website using the Flems module, and on top of that puts all the state inside the URL. This allows for easy sharing, forking & editing of code examples. Hope that clears it up a bit Don't know if it might make sense to do another Show HN for the module once it's up on github?
  - TeddyBones 9y ago
    Yeah, I think it's worth a repost. It's a different use case than it just being another jsfiddle/codepen/jsbin alternative.
- deleted 9y ago
  [deleted]

10 points by porsager 9y ago

Here's a whack-a-mole game, derived from a fiddle from Julia Evans: https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ArMIA0IAZgJYy6oDaoAdgIYC2EamAFvPVPiLAPbWL9mAHhYAmAHwAdagAIA7i1qwA1jNoz6PGAEJpQgPRip1IQAdxAdUUqNWiGG0yAkoRkBPHgFcZAcwjwZeBYIejUoKDx3L3liagw9cwBZOzA1ACcIGR402mo-DBkAYShiGz5A4ND4HnlrVSCQ+Oo9JGIANxliJABeSRBaU1M+8QNWtvEQAF88GgYmdGxcAl5+CEF0fX0ZJAg09uQZADE0nlCAKU8S9QBRNtywAHIZEiQkGAAKNnhTMFRNnBebwgGGo-n0EAAzIQsAA2JAALwARvoAJTSO5pWwwAD6Pj2SBk3RkFGkMmJAAZIpSZOSALp4UkUqlU+mMigARmZMnZrOotOk6NomLk5SJhFoUEgAuohE81AQxHKijAFj47xRMmAjOIrne2hF1A1WtkZPkoqxEFx+IwEDauzc71l8vgiuo7xOchRxtNpoy8E8aVkHptdrSDqdCrVsGgUC9jJ9ZL9Adk0fChO6RPJ8dNkzRJrJucZk0ZScDZua1GLFYxtSUqiJ3pkbWIEDkqGecsjbqN2dLsmVqu7MmzZIA-Bp3g8xA9Ig8AJrRQcPDUjmTt+iT+C0REwGfD-MJzQ4vFdDD0AaOzsutUeyJuHsHhMyPtkjcPeBpPerp-B8+mS-Oq67yphEMgAB4Pk+PqSAEz7+MmE7vkge5vhgsDEGksC7pEjZQVBYDwG4MDtrheFQYidZ4l41BIIUWjZO2IHpkS7IyOODzZLkfhPO2Dw7nWDzfmR0xCXhfBYaUyjthG15DqRZGHnYVpdBQbi0hQYG0oSNKiVBVYKT6uZ5gpRlCYWj4yMZMhVlW0j0Ge1HwO8AymJECh1nm0gya6vj+AASrkSCnE4-DvPQsSROeEGaiW8FloktBBBghBQDw2TvAlSU5DRpzqjIABUMhhbQYEyAAtBosQohqADUlXUAA3NItnUDWxDaZA8AhYgaR3FAAFdnljY6kVA5qtVMUHlhEBCt1ux9e8xBWYmcUVgWjI1m42l+PAAU5fQ3XvNSR6WieSAYDAeRBFZNalUSO17UFB2hcdSlnRQdIXWsPjXYyJ3KUgqnqZp2nsn9GAZEgORyOqzWRAArOS5Iog1UwzCAdCMMwaFgEs3B8AI8DY+hmEwJNZKItkOxpGVOStJ4vwyIjACkTUmnIXRBO2iOmGBbNksExA+Gw3Pkrz-MyPohUc0gQRqDRMiC8LASwLkMiIpkuRuEEsQ+JEtCpKleRqKkDRuA8GQyBAACOngSgV+jNdIUz0iAJTUMo5BUCAAacOgXw-H8+hyqYyg+Ghpz6OFQR7FAAAC7IYIn7JcIRpjzCAOAu5MQA https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ArMIA0IAZgJYy6oDa... The UX is really nice. Open a link modify it a bit, <cmd> + L, <cmd> + C (or <ctrl>), and you've got a new URL ready to share your version.

pakx 9y ago

How about this for incestuous: a Flems of a HN reader, written in Mithril: http://yep.it/ckcpfi http://yep.it/ckcpfi

deleted 9y ago

[deleted]

dennisb 9y ago

Latest chrome on Android: ReferenceError: ohnoAnError is not defined at setTimeout (.js:14:8)

pygy_ 9y ago
I don't have an android phone at hand, but the error is supposed to be part of the demo. If it appears in the UI (below the code) it is normal. You can click the "at (.js:14:8)" link, you'll get the cursor on the problem line.
st0le 9y ago
I think that's deliberate.

TeddyBones 9y ago

This is great! I can see myself using this a lot. :)

lozzo 9y ago

This looks very interesting. Is the code on github ? and if not what's the reason ?

porsager 9y ago
Thanks for checking it out. Yeah, I'll put the code on github for the Flems module during the weekend. I think the intro might have been a bit confusing as there's actually 2 parts to this. Flems the module: A "js webapp / module" named Flems, which is a Web sandbox/playground that can easily be customized through options & embedded on any site (think programatically setting up playgrounds for example code in documentation etc.). Flems.io the website: Then there's Flems.io which was launched here, that is a website using the Flems module, and on top of that puts all the state inside the URL. This allows for easy sharing, forking & editing of code examples. Hope that clears it up a bit Don't know if it might make sense to do another Show HN for the module once it's up on github?
- TeddyBones 9y ago
  Yeah, I think it's worth a repost. It's a different use case than it just being another jsfiddle/codepen/jsbin alternative.
deleted 9y ago
[deleted]