7 ms·
Show HN: Scratch.js – Interactive JavaScript Scratchpad
- robbiejs 6y agoCool stuff! What was the reason for you to make this?
- kahole 6y agoI find myself opening and using the web console to do simple tasks like string manipulation, maths, sorting often. I wanted a dedicated and persistent way to do this. And also just a place to keep notes, urls and stuff. So I made this "literate programming" notepad. I'm also former Emacs user, and I like the lisp scratch buffer there, which is similar.
- robbiejs 6y agoAh, I do that too, that must be why playing with this app made me happy :-) Thanks for making it, have bookmarked it.
- protoduction 6y agoI love how simple and effective this is. I'm also building a web-based literate programming environment called Starboard[1] that's probably a hundred times the amount of code (but then it has additional features such as top-level await, plugin, and Python support). Consider supporting lit-html[2] literals instead of strings for HTML output, it works really well in notebook environments. One more thing you can consider: a esm tagged literal that uses import(<data url of the code>), you can then use ES Module imports to dynamically load code. Here's a blog post about that approach [3] [1]: https://starboard.gg https://starboard.gg [2]: https://lit-html.polymer-project.org/ https://lit-html.polymer-project.org/ [3]: https://2ality.com/2019/10/eval-via-import.html https://2ality.com/2019/10/eval-via-import.html
- mNovak 6y agoStarboard looks very cool as well. Is there anyway to push all the outputs into a separate 'document'? That'd be super cool for e.g. Latex too. My issue with these notebooks is they always get very cluttered with inline outputs after a couple 100 lines.
- colejohnson66 6y agoNot to be rude (I actually like it), but why build your own instead of using one of the many JavaScript REPLs already available?
- latchkey 6y agoI've been using this extension for a while... https://chrome.google.com/webstore/detail/markdown-new-tab/demppioeofcekpjcnlkmdjbabifjnokj?hl=en-GB https://chrome.google.com/webstore/detail/markdown-new-tab/d... Would be neat to see this integrated in somehow.
- kahole 6y agoThat would be awesome!
- PieUser 6y agoWhen you paste something it keeps the formatting, intended?
- kahole 6y agoYes, I guess. I'm pretty used to ctrl+shift+v-ing to remove any formatting. I'm now considering removing formatting by default. Know a simple way?
- purplecats 6y ago.innerText?
- kahole 6y agoFixed, formatting is now removed
- OzzyB 6y agoCan you give us Mac users some love and replace ctrl w/ command ? My muscle memory is giving me a hard time xD
- kahole 6y agoThe source is very small and can be used both through the file:// and hosted http protocols. So you can easily make it do whatever you like. I could maybe expose some global variables to make it customizable, but I went for simplicity and smaller source instead.
- kamikaz1k 6y agoif it helps, all you need to do is add this listener to support the cmd key: `document.addEventListener('keydown', (e) => (e.metaKey && e.code === 'Enter' && evaluate() && e.preventDefault()));` The metaKey[1] is only accessible for keydown. [1] https://stackoverflow.com/questions/3902635/how-does-one-capture-a-macs-command-key-via-javascript https://stackoverflow.com/questions/3902635/how-does-one-cap...
- kahole 6y agoFixed
- bikeshaving 6y agoCtrl-Enter is the shortcut for inserting a soft newline for content-editables on Safari btw. You might want to consider supporting command-enter for this reason alone.
- tomcat27 6y agonice!
- angleofrepose 6y agoDo you, or the broader community, have any ideas about solving infinite loops? I'm on mobile so I can't test this at the moment, but I imagine that while(1) crashes the tab. What would an MVP operating system like ctrl-C functionality look like for execution environments in the browser?
- mattigames 6y agoYou could modify the AST tree using something like jscodeshift to add a function that is called in every loop (and maybe every function) and there you can "break" the loop in a pretty clean way.
- protoduction 6y agoA determined user will still be able to figure out something that blocks forever, for instance run a WASM program that has an infinite loop in it.
- angleofrepose 6y agoI am aware of multiple hacky solutions, such as loop detection and adding timeouts. This fails in most non-trivial creative coding applications due to long running code. I'm interested what it would take to come up with a general escape hatch like any shell user has.
- jraph 6y agoA timeout would most certainly not trigger during a busy loop in JS. Timeouts can only trigger when the main thread is not running code. Browsers will complain against code running for too long without interruption though.
- angleofrepose 6y agoYes, as the other comments get at the "hack" I'm referring to is a loop transform that adds a timer check to the condition.
- arthurcolle 6y agoBefore I integrate this into my development workflow, 2 questions: 1) What is your monetization strategy? 2) Will this be supported forever? ... ... /s :) Nice project, useful. EDIT: this was obviously satirical...
- jawnknee 6y agoIs there a way to support multi-line input?
- Naskid 6y agoLegit hacker needed
- drran 6y agoThe simplest scratchpad, which works in Firefox and Chromium at least. data:text/html,<html contenteditable>
- over9001k 6y agosuper nice !
- y2bd 6y agoIt's super cool how the result of any evaluated expression is also itself an evaluable expression.
- r3trohack3r 6y ago(()=>document.body.innerText.split('\n')[0])()
- pwdisswordfish0 6y agoRecommendation: when inserting the results of the evaluation, add it to the selection so "reverting" the inserted text is as easy as hitting Backspace or Delete.
- SamBam 6y agoVery cool. Small issue: I find that the cursor can be hard to use sometimes. For example, if I clear and then execute the single line "<style>body {background-color: #fdf6e3;}</style>" I can no longer get an empty line at the bottom of the document. My cursor can only ever be within the outputted "<style>" tags, and hitting return from there creates a new pair of "<style>" tags. To temper this bug-report with a cool feature, I like that the output is (usually, with the exception of the above) plain text, which can itself be executed. I haven't found a use-case for this, but I'm sure there's some interesting meta-programming that could be done.
- kahole 6y ago(Now fixed) Thanks for letting me know, there is indeed a small issue with the clear() function. I considered supporting only plain-text, but I found the editable visible style tag very interesting. And I like the fact all the power of the browser is available, e.g canvas, 3d rendering, and simple stuff like headers and images. Of course, you can use only plaintext if you'd like.
- kahole 6y agoThis should now be fixed!
- joshxyz 6y agoIs it poasible to soft-wrap lines and execute functions on mobile? Its cool haha
- Lerc 6y agoSuggestions: If the result is an Element (or perhaps Node) insert it into the document instead of for example "[object HTMLCanvasElement]" A potentially more difficult one would be automagically hoisting functions defined in the document when you hit ctrl-enter. function factorial(n) { ...the usual... } factorial(7);// [ctrl-enter] on just this line works
- kahole 6y agoGreat suggestions!
- alan_russell 6y agoIt seems similar to lively（smalltalk-like）： https://github.com/LivelyKernel/lively.next/tree/master/lively.vm https://github.com/LivelyKernel/lively.next/tree/master/live...
- anonytrary 6y agoI suggest using CMD+Enter for Mac. This is the closest/better alternative to CTRL+Enter for PC, albeit Mac having a CTRL key.
- kahole 6y agofixed
- anonytrary 6y agoThat was fast. Thanks!
- mNovak 6y agoVery cool! Felt a bit odd that "running" a line didn't drop the cursor down past the output, ready for the next line; but the current seems useful for editing and re-trying a line, also interesting!